/**
 * Sampreshan — Brand System (site-wide foundation)
 * ==========================================================================
 * Loaded on EVERY front-end page, immediately after the premium-3d skin.
 *
 * Why this file exists
 * --------------------
 * The dark "premium 3D" skin used to be applied by a front-page-only block of
 * inline !important CSS, so the homepage looked designed and every other page
 * fell back to default BuddyBoss. This file makes one visual system the
 * default across the whole site:
 *
 *   1. Tokens      — extends the --d-* skin with a full spacing/type/motion
 *                    scale so every component draws from one source.
 *   2. Surfaces    — neutralises the white BuddyBoss / Elementor containers.
 *   3. Typography  — fluid, readable type scale.
 *   4. A11y        — visible focus, skip link, screen-reader utilities,
 *                    reduced-motion and forced-colors support.
 *   5. Responsive  — fluid container, safe-area insets, no horizontal scroll.
 *
 * The !important flags live in section 2 ONLY. They are scoped to parent-theme
 * surface colours and are the documented price of overriding a commercial
 * theme from a child theme — do not spread them into component code.
 *
 * @package SampreShan_Child
 */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */
:root {
    /* Fluid spacing scale — 4px base, responsive */
    --sp-1: clamp(0.25rem, 0.22rem + 0.15vw, 0.375rem);
    --sp-2: clamp(0.5rem, 0.45rem + 0.25vw, 0.75rem);
    --sp-3: clamp(0.75rem, 0.68rem + 0.35vw, 1rem);
    --sp-4: clamp(1rem, 0.9rem + 0.5vw, 1.5rem);
    --sp-5: clamp(1.5rem, 1.3rem + 0.9vw, 2.25rem);
    --sp-6: clamp(2rem, 1.7rem + 1.4vw, 3.25rem);
    --sp-7: clamp(3rem, 2.4rem + 2.6vw, 5.5rem);

    /* Fluid type scale */
    --sp-fs-xs: clamp(0.75rem, 0.72rem + 0.12vw, 0.8125rem);
    --sp-fs-sm: clamp(0.8125rem, 0.79rem + 0.14vw, 0.9375rem);
    --sp-fs-base: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
    --sp-fs-md: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
    --sp-fs-lg: clamp(1.25rem, 1.15rem + 0.5vw, 1.625rem);
    --sp-fs-xl: clamp(1.5rem, 1.3rem + 0.9vw, 2.25rem);
    --sp-fs-2xl: clamp(1.875rem, 1.5rem + 1.7vw, 3.25rem);
    --sp-fs-3xl: clamp(2.25rem, 1.6rem + 2.8vw, 4.5rem);

    /* Radii */
    --sp-r-sm: 8px;
    --sp-r-md: 14px;
    --sp-r-lg: 22px;
    --sp-r-xl: 32px;
    --sp-r-pill: 999px;

    /* Layout */
    --sp-container: 1240px;
    --sp-gutter: clamp(1rem, 4vw, 2.5rem);

    /* Elevation — layered, tuned for dark surfaces */
    --sp-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --sp-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.3);
    --sp-shadow-lg: 0 24px 70px rgba(0, 0, 0, 0.55), 0 6px 18px rgba(0, 0, 0, 0.35);
    --sp-ring: 0 0 0 2px var(--d-bg), 0 0 0 4px var(--d-accent);

    /* Motion */
    --sp-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --sp-ease-out: cubic-bezier(0.33, 1, 0.68, 1);
    --sp-fast: 160ms;
    --sp-mid: 320ms;
    --sp-slow: 640ms;

    /* Brand */
    --sp-saffron: #ff9933;
    --sp-ember: #c2410c;
    --sp-gold: #f5c542;
}

/* ==========================================================================
   2. SURFACES — neutralise white parent-theme containers (site-wide)
   ========================================================================== */
html,
body,
#content,
.site-content,
.site-content-grid,
.site-main,
.container,
.bb-grid,
.entry-content,
.page-content {
    background-color: var(--d-bg-deep, #08090c) !important;
    color: var(--d-text, #fff) !important;
}

/* BuddyBoss drives its palette through CSS custom properties — override the
   source rather than fighting every individual rule. */
:root {
    --bb-body-background-color: #08090c !important;
    --bb-body-background-color-rgb: 8, 9, 12 !important;
    --bb-body-text-color: #ffffff !important;
    --bb-body-text-color-rgb: 255, 255, 255 !important;
    --bb-content-background-color: #12151e !important;
    --bb-content-alternate-background-color: #181c28 !important;
    --bb-content-border-color: rgba(255, 255, 255, 0.06) !important;
    --bb-header-background: #0c0e14 !important;
    --bb-footer-background: #08090c !important;
}

.site-header,
.bb-mobile-header,
#masthead,
.site-footer {
    background: var(--d-bg, #0c0e14) !important;
    border-color: var(--d-border, rgba(255, 255, 255, 0.06)) !important;
}

/* Elementor forces white on its own containers when a page is built with it. */
.elementor-page .elementor,
.elementor-page .elementor-section,
.elementor-page .elementor-container,
.elementor-page .elementor-widget-wrap,
.elementor-page .elementor-column,
.elementor-page .e-con,
.elementor-page .e-con-inner {
    background-color: transparent !important;
    color: var(--d-text, #fff) !important;
}

/* ==========================================================================
   3. TYPOGRAPHY
   ========================================================================== */
body {
    font-size: var(--sp-fs-base);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
    line-height: 1.18;
    letter-spacing: -0.015em;
    text-wrap: balance;
    color: var(--d-text, #fff);
}

h1 { font-size: var(--sp-fs-3xl); }
h2 { font-size: var(--sp-fs-2xl); }
h3 { font-size: var(--sp-fs-xl); }
h4 { font-size: var(--sp-fs-lg); }
h5 { font-size: var(--sp-fs-md); }
h6 { font-size: var(--sp-fs-sm); letter-spacing: 0.04em; text-transform: uppercase; }

p, li {
    text-wrap: pretty;
}

/* Long words and URLs must never break the layout on narrow screens. */
h1, h2, h3, h4, p, li, a, button, .sp-card, .d3-card {
    overflow-wrap: break-word;
    word-break: break-word;
}

a {
    color: var(--d-accent, #ff9933);
    text-decoration-color: color-mix(in srgb, var(--d-accent, #ff9933) 45%, transparent);
    text-underline-offset: 0.18em;
    transition: color var(--sp-fast) var(--sp-ease),
                text-decoration-color var(--sp-fast) var(--sp-ease);
}

a:hover {
    color: var(--sp-gold, #f5c542);
    text-decoration-color: currentColor;
}

::selection {
    background: color-mix(in srgb, var(--d-accent, #ff9933) 35%, transparent);
    color: #fff;
}

/* ==========================================================================
   4. ACCESSIBILITY
   ========================================================================== */

/* Visible focus for keyboard users on every interactive element. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--d-accent, #ff9933);
    outline-offset: 3px;
    border-radius: var(--sp-r-sm);
    box-shadow: var(--sp-ring);
}

/* Remove the default focus ring only where :focus-visible is supported. */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
input:focus:not(:focus-visible),
select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible) {
    outline: none;
}

/* Skip link — keyboard users jump straight to the content. */
.sp-skip-link {
    position: absolute;
    left: var(--sp-3);
    top: var(--sp-3);
    z-index: 100000;
    padding: 0.7em 1.25em;
    background: var(--d-accent, #ff9933);
    color: #10233d;
    font-weight: 700;
    border-radius: var(--sp-r-pill);
    box-shadow: var(--sp-shadow-md);
    transform: translateY(-160%);
    transition: transform var(--sp-fast) var(--sp-ease);
}

.sp-skip-link:focus {
    transform: translateY(0);
}

/* Screen-reader-only utility. */
.sp-sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Every decorative image stays out of the accessibility tree. */
img[alt=""] {
    opacity: 1;
}

/* Keyboard-navigable scroll areas need a focus ring too. */
[tabindex="0"]:focus-visible {
    outline: 2px solid var(--d-accent, #ff9933);
    outline-offset: 2px;
}

/* ==========================================================================
   5. MOTION & CONTRAST PREFERENCES
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }

    /* Reveal-on-scroll helpers must never leave content hidden. */
    .d3-reveal,
    .d3-reveal-left,
    .d3-reveal-right,
    .d3-reveal-scale,
    .d3-stagger > *,
    .reveal {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* Windows High Contrast / forced colours: keep structure visible. */
@media (forced-colors: active) {
    .d3-card,
    .sp-card,
    .sp-dash-card {
        border: 1px solid CanvasText;
    }

    .sp-icon__svg {
        forced-color-adjust: auto;
    }
}

/* ==========================================================================
   6. RESPONSIVE FOUNDATION
   ========================================================================== */
html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

body {
    overflow-x: hidden;
    max-width: 100%;
}

/* Fluid container used by the page templates. */
.sp-container {
    width: 100%;
    max-width: var(--sp-container);
    margin-inline: auto;
    padding-inline: var(--sp-gutter);
}

/* Respect notches / home indicators on modern phones. */
@supports (padding: env(safe-area-inset-bottom)) {
    .site-footer,
    .sp-mobile-tab-nav {
        padding-bottom: calc(var(--sp-4) + env(safe-area-inset-bottom));
    }
}

/* Media never overflows its container. */
img,
svg,
video,
iframe,
canvas {
    max-width: 100%;
    height: auto;
}

/* Give embedded media an explicit aspect ratio so the page does not jump. */
iframe {
    aspect-ratio: 16 / 9;
}

/* Touch targets: comfortable minimum size on touch devices. */
@media (pointer: coarse) {
    a,
    button,
    [role="button"],
    input[type="submit"],
    input[type="button"] {
        min-height: 44px;
    }

    .sp-icon--xs,
    .sp-icon--sm {
        min-height: 0;
    }
}

/* Print: strip the chrome, keep the words. */
@media print {
    .site-header,
    .site-footer,
    .sp-mobile-tab-nav,
    .d3-hero__light,
    .d3-hero__grid {
        display: none !important;
    }

    body,
    html {
        background: #fff !important;
        color: #000 !important;
    }
}

/* ==========================================================================
   Header visibility on the dark theme (BuddyBoss header).
   The customizer leaves the site title and menu links dark-on-dark.
   ========================================================================== */
#masthead .site-title a,
.bb-mobile-header .site-title a,
.bb-mobile-panel-header .logo-wrap a {
    color: #f59e0b !important;
    font-weight: 700;
    letter-spacing: -.01em;
}
#masthead #primary-menu > li > a,
#masthead .primary-menu > li > a,
#masthead .main-navigation .menu > li > a {
    color: #e7e5e4 !important;
}
#masthead #primary-menu > li > a:hover,
#masthead #primary-menu > li.current-menu-item > a,
#masthead .main-navigation .menu > li.current-menu-item > a {
    color: #f59e0b !important;
}
#masthead .header-aside i,
#masthead .bb-toggle-panel i,
#masthead .more-button i,
.bb-mobile-header i,
.bb-mobile-header .bb-left-panel-mobile i {
    color: #e7e5e4 !important;
    opacity: 1 !important;
}
#masthead .signin-button {
    color: #e7e5e4 !important;
    border-color: rgba(255, 255, 255, .25) !important;
}