/*
 * ============================================================
 *  public-ui.css  —  Bangla-O-Biswa (Revised)
 *  ──────────────────────────────────────────────────────────
 *  Layout + component styles.
 *  Uses ONLY var(--bob-…) tokens defined in theme.css.
 *  Zero hardcoded colours — change theme.css to retheme.
 * ============================================================
 */

/* ── Reset ──────────────────────────────────────────────── */
*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
    font-family: var(--bob-font-body);
    font-size:   1rem;
    line-height: 1.65;
    color:       var(--bob-clr-text);
    background:  var(--bob-clr-bg);
    -webkit-font-smoothing:  antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; }
ul, ol { list-style: none; }

/* ── Skip link (accessibility) ──────────────────────────── */
.skip-link {
    position: absolute;
    top: -100%;
    left: 1rem;
    padding: 0.5rem 1rem;
    background: var(--bob-clr-primary);
    color: var(--bob-clr-on-primary);
    border-radius: var(--bob-r-sm);
    font-family: var(--bob-font-ui);
    font-size: 0.85rem;
    font-weight: 600;
    z-index: 9999;
    transition: top var(--bob-ease);
}
.skip-link:focus { top: 0.5rem; }

/* ── Layout container ───────────────────────────────────── */
.container {
    width: 100%;
    max-width: var(--bob-max-w);
    margin-inline: auto;
    padding-inline: var(--bob-gutter);
}

/* ══════════════════════════════════════════════════════════
   SITE HEADER
   ══════════════════════════════════════════════════════════ */
.site-header {
    position: sticky;
    top: 0;
    z-index: 500;
    transition: box-shadow 0.3s ease;
}

.site-header.is-scrolled {
    box-shadow: var(--bob-nav-shadow);
}

/* ── Topbar ─────────────────────────────────────────────── */
.topbar {
    background: var(--bob-topbar-bg);
    color:      var(--bob-topbar-clr);
    font-family: var(--bob-font-ui);
    font-size:  0.76rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    border-bottom: 1px solid var(--bob-topbar-border);
}

.topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    max-width: var(--bob-max-w);
    margin-inline: auto;
    padding-inline: var(--bob-gutter);
    height: var(--bob-topbar-h);
}

.topbar__left {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.topbar__item {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    color: var(--bob-topbar-clr);
    text-decoration: none;
    transition: color var(--bob-ease);
}

a.topbar__item:hover { color: var(--bob-topbar-link-clr); }

.topbar__sep {
    color: var(--bob-topbar-clr);
    opacity: 0.4;
    font-size: 0.9rem;
}

.topbar__right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* Social icons in topbar */
.topbar__socials {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.topbar__social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width:  28px;
    height: 28px;
    border-radius: var(--bob-r-pill);
    background: var(--bob-topbar-icon-bg);
    color: var(--bob-topbar-link-clr);
    font-size: 0.72rem;
    transition: background var(--bob-ease), color var(--bob-ease), transform var(--bob-ease);
}

.topbar__social-link:hover {
    background: var(--bob-clr-primary);
    color: var(--bob-clr-on-primary);
    transform: translateY(-1px);
}

/* ── Main Nav ───────────────────────────────────────────── */
.main-nav {
    background: var(--bob-nav-bg);
    color:      var(--bob-nav-clr);
    height:     var(--bob-nav-h);
    position:   relative;
}

.main-nav__inner {
    display:     flex;
    align-items: center;
    gap:         2rem;
    max-width:   var(--bob-max-w);
    margin-inline: auto;
    padding-inline: var(--bob-gutter);
    height:      100%;
}

/* ── Brand / Logo ───────────────────────────────────────── */
.brand {
    display:     flex;
    align-items: center;
    gap:         0.75rem;
    text-decoration: none;
    flex-shrink: 0;
    margin-right: auto;
}

.brand__mark {
    position:       relative;
    width:          46px;
    height:         46px;
    border-radius:  var(--bob-r-pill);
    background:     var(--bob-brand-mark-bg);
    border:         1.5px solid var(--bob-brand-mark-border);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display:        flex;
    align-items:    center;
    justify-content: center;
    flex-shrink:    0;
    overflow:       hidden;
    box-shadow:     var(--bob-brand-mark-shadow);
    transition:     transform var(--bob-ease), box-shadow var(--bob-ease);
}

.brand:hover .brand__mark {
    transform:  scale(1.05);
    box-shadow: var(--bob-brand-mark-shadow-hover);
}

.brand__logo-img {
    width:  100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--bob-r-pill);
}

.brand__logo-fallback {
    display:     none;
    align-items: center;
    justify-content: center;
    font-family: var(--bob-font-display);
    font-weight: 700;
    font-size:   1rem;
    color:       var(--bob-brand-mark-clr);
    letter-spacing: 0.04em;
}

/* Show fallback when image fails (set via JS onerror) */
.brand__mark:not(:has(.brand__logo-img[style*="none"])) .brand__logo-fallback { display: none; }

.brand__text {
    display:        flex;
    flex-direction: column;
    gap:            0.05rem;
}

.brand__name {
    font-family:    var(--bob-font-display);
    font-size:      1.18rem;
    font-weight:    700;
    color:          var(--bob-nav-clr);
    line-height:    1.15;
    letter-spacing: 0.01em;
    text-shadow:    var(--bob-brand-name-shadow);
    transition:     opacity var(--bob-ease);
}

.brand:hover .brand__name { opacity: 0.92; }

.brand__tagline {
    font-family:    var(--bob-font-ui);
    font-size:      0.68rem;
    font-weight:    500;
    color:          var(--bob-brand-tagline-clr);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height:    1;
}

/* ── Nav Menu ───────────────────────────────────────────── */
.nav-menu {
    display:     flex;
    align-items: center;
    gap:         0.25rem;
    height:      100%;
}

/* ── Nav Link — clean text style, no pills ──────────────── */
.nav-link {
    position:        relative;
    display:         inline-flex;
    align-items:     center;
    gap:             0.32rem;
    padding:         0.4rem 0.65rem;
    font-family:     var(--bob-font-ui);
    font-size:       0.875rem;
    font-weight:     500;
    color:           var(--bob-nav-link-clr);
    letter-spacing:  0.015em;
    text-decoration: none;
    white-space:     nowrap;
    border-radius:   0;
    background:      none;
    border:          none;
    cursor:          pointer;
    transition:      color var(--bob-ease);
}

/* Animated underline */
.nav-link::after {
    content:          '';
    position:         absolute;
    bottom:           2px;
    left:             50%;
    transform:        translateX(-50%) scaleX(0);
    width:            75%;
    height:           2px;
    border-radius:    var(--bob-r-pill);
    background:       var(--bob-nav-active-line);
    transition:       transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform-origin: center;
}

.nav-link:hover                  { color: var(--bob-nav-link-hover-clr); }
.nav-link:hover::after           { transform: translateX(-50%) scaleX(1); }
.nav-link.is-active              { color: var(--bob-nav-link-hover-clr); font-weight: 600; }
.nav-link.is-active::after       { transform: translateX(-50%) scaleX(1); }

/* ── Support Us — button style ──────────────────────────── */
.nav-link--support {
    background:      var(--bob-nav-btn-bg);
    border:          1.5px solid var(--bob-nav-btn-border);
    border-radius:   var(--bob-r-pill);
    padding:         0.38rem 1.1rem;
    font-weight:     600;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition:      background var(--bob-ease), border-color var(--bob-ease), color var(--bob-ease);
}
.nav-link--support:hover {
    background:   var(--bob-nav-btn-hover-bg);
    border-color: var(--bob-nav-btn-hover-border);
    color:        var(--bob-nav-btn-hover-clr);
}
.nav-link--support::after { display: none; }

/* Chevron rotates when dropdown is open */
.nav-dropdown__icon {
    font-size:  0.62rem;
    transition: transform 0.22s ease;
}
.nav-dropdown.is-open .nav-dropdown__icon { transform: rotate(180deg); }

/* ── Sign In — subtle separator + icon ─────────────────── */
.nav-link--signin {
    margin-left:  0.25rem;
    padding-left: 1rem;
    font-weight:  600;
    border-left:  1px solid var(--bob-nav-signin-divider);
}

/* ── Dropdown container ─────────────────────────────────── */
.nav-dropdown {
    position:    relative;
    display:     flex;
    align-items: center;
    height:      100%;
}

/* Dropdown panel */
.nav-dropdown__panel {
    position:   absolute;
    top:        calc(100% + 10px);
    right:      0;
    min-width:  190px;
    background: var(--bob-clr-surface);
    border-radius: var(--bob-r-md);
    box-shadow: var(--bob-dropdown-shadow);
    overflow:   hidden;
    z-index:    200;

    /* hidden by default */
    opacity:        0;
    transform:      translateY(-6px);
    pointer-events: none;
    transition:     opacity 0.2s ease, transform 0.2s ease;
}

/* Small arrow/notch pointing up */
.nav-dropdown__panel::before {
    content:      '';
    position:     absolute;
    top:          -6px;
    right:        1.2rem;
    width:        12px;
    height:       12px;
    background:   var(--bob-clr-surface);
    transform:    rotate(45deg);
    border-radius: 2px;
    box-shadow:   var(--bob-dropdown-notch-shadow);
}

.nav-dropdown.is-open .nav-dropdown__panel {
    opacity:        1;
    transform:      translateY(0);
    pointer-events: auto;
}

/* Dropdown items */
.nav-dropdown__item {
    display:         flex;
    align-items:     center;
    gap:             0.65rem;
    padding:         0.8rem 1.1rem;
    font-family:     var(--bob-font-ui);
    font-size:       0.875rem;
    font-weight:     500;
    color:           var(--bob-dropdown-item-clr);
    text-decoration: none;
    border-bottom:   1px solid var(--bob-dropdown-item-border);
    transition:      background var(--bob-ease), color var(--bob-ease), padding var(--bob-ease);
    position:        relative;
    z-index:         1;
}
.nav-dropdown__item:last-child { border-bottom: none; }

.nav-dropdown__item i {
    width:      16px;
    font-size:  0.8rem;
    color:      var(--bob-dropdown-item-icon-clr);
    flex-shrink: 0;
    transition: color var(--bob-ease);
}

.nav-dropdown__item:hover {
    background:   var(--bob-dropdown-item-hover-bg);
    color:        var(--bob-dropdown-item-hover-clr);
    padding-left: 1.35rem;
}
.nav-dropdown__item:hover i { color: var(--bob-dropdown-item-icon-hover-clr); }

/* ── Mobile hamburger ───────────────────────────────────── */
.nav-toggle {
    display:         none;
    flex-direction:  column;
    justify-content: center;
    align-items:     center;
    gap:             5px;
    width:  40px;
    height: 40px;
    border-radius: var(--bob-r-sm);
    background: var(--bob-toggle-bg);
    border: 1.5px solid var(--bob-toggle-border);
    flex-shrink: 0;
    transition: background var(--bob-ease);
}

.nav-toggle:hover { background: var(--bob-toggle-hover-bg); }

.nav-toggle__bar {
    display: block;
    width:   22px;
    height:  2px;
    border-radius: var(--bob-r-pill);
    background: var(--bob-toggle-bar-clr);
    transition: transform 0.3s ease, opacity 0.3s ease, width 0.3s ease;
    transform-origin: center;
}

/* Animate to X when open */
.nav-toggle.is-open .nav-toggle__bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.nav-toggle.is-open .nav-toggle__bar:nth-child(2) {
    opacity: 0;
    width: 0;
}
.nav-toggle.is-open .nav-toggle__bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════ */
@media (max-width: 992px) {
    .nav-link { padding: 0.4rem 0.5rem; font-size: 0.82rem; }
    .main-nav__inner { gap: 0.5rem; }
}

@media (max-width: 768px) {
    .topbar__item { font-size: 0.7rem; }
    .topbar__sep  { display: none; }

    /* Show hamburger */
    .nav-toggle { display: flex; }

    /* Nav slides down as full-width panel */
    .nav-menu {
        position:       absolute;
        top:            100%;
        left:           0;
        right:          0;
        flex-direction: column;
        align-items:    stretch;
        gap:            0;
        height:         auto;
        background:     var(--bob-nav-bg);
        padding:        0.5rem 1.25rem 1rem;
        border-top:     1px solid var(--bob-nav-mobile-border);
        box-shadow:     var(--bob-nav-shadow);
        max-height:     0;
        overflow:       hidden;
        opacity:        0;
        pointer-events: none;
        transition:     max-height 0.35s ease, opacity 0.25s ease;
    }
    .nav-menu.is-open {
        max-height:     700px;
        opacity:        1;
        pointer-events: auto;
    }

    /* Mobile nav links */
    .nav-link {
        padding:     0.72rem 0.5rem;
        font-size:   0.95rem;
        border-bottom: 1px solid var(--bob-nav-divider);
    }
    .nav-link::after    { display: none; }
    .nav-link.is-active { border-left: 3px solid var(--bob-nav-active-border); padding-left: 0.75rem; }

    /* Support Us on mobile — full width, no pill */
    .nav-link--support {
        background:   var(--bob-dropdown-mobile-item-hover-bg);
        border:       none;
        border-radius: 0;
        border-bottom: 1px solid var(--bob-nav-divider);
        padding:      0.72rem 0.5rem;
        text-align:   left;
    }

    /* Sign In — remove separator on mobile */
    .nav-link--signin {
        border-left:  none;
        margin-left:  0;
        padding-left: 0.5rem;
    }

    /* Dropdown — inline expand on mobile, not absolute */
    .nav-dropdown { height: auto; display: block; }

    .nav-dropdown__panel {
        position:   static;
        box-shadow: none;
        border-radius: 0;
        background: var(--bob-dropdown-mobile-bg);
        transform:  none !important;
        max-height: 0;
        overflow:   hidden;
        opacity:    1 !important;
        pointer-events: none;
        transition: max-height 0.3s ease;
    }
    .nav-dropdown__panel::before { display: none; }

    .nav-dropdown.is-open .nav-dropdown__panel {
        max-height:     200px;
        pointer-events: auto;
    }

    .nav-dropdown__item {
        color:        var(--bob-dropdown-mobile-item-clr);
        border-bottom: 1px solid var(--bob-nav-divider);
        padding-left: 1.5rem;
    }
    .nav-dropdown__item:hover {
        background:   var(--bob-dropdown-mobile-item-hover-bg);
        color:        var(--bob-dropdown-mobile-item-hover-clr);
        padding-left: 1.75rem;
    }
    .nav-dropdown__item i { color: var(--bob-dropdown-mobile-icon-clr); }

    .brand__name    { font-size: 1rem; }
    .brand__tagline { display: none; }
}

@media (max-width: 480px) {
    .topbar__left { display: none; }
}

/* ══════════════════════════════════════════════════════════
   PAGE BASE  (placeholder content styles for prototype)
   ══════════════════════════════════════════════════════════ */
.page-hero {
    min-height: 60vh;
    display:    flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align:  center;
    padding:     4rem var(--bob-gutter);
    background: var(--bob-clr-bg);
}

.page-hero__eyebrow {
    font-family:    var(--bob-font-ui);
    font-size:      0.78rem;
    font-weight:    600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color:          var(--bob-clr-secondary);
    margin-bottom:  0.75rem;
}

.page-hero__title {
    font-family:  var(--bob-font-display);
    font-size:    clamp(2rem, 5vw, 3.5rem);
    font-weight:  700;
    color:        var(--bob-clr-primary);
    line-height:  1.18;
    margin-bottom: 1.25rem;
}

.page-hero__sub {
    font-family:  var(--bob-font-body);
    font-size:    1.05rem;
    color:        var(--bob-clr-text-muted);
    max-width:    560px;
    line-height:  1.7;
    margin-bottom: 2rem;
}

.btn {
    display:     inline-flex;
    align-items: center;
    gap:         0.5rem;
    padding:     0.72rem 1.75rem;
    border-radius: var(--bob-r-pill);
    font-family:  var(--bob-font-ui);
    font-size:    0.9rem;
    font-weight:  600;
    letter-spacing: 0.02em;
    transition:   transform var(--bob-ease), box-shadow var(--bob-ease), opacity var(--bob-ease);
    text-decoration: none;
}

.btn--primary {
    background: var(--bob-gradient-brand);
    color:      var(--bob-btn-primary-clr);
    box-shadow: var(--bob-shadow-sm);
}

.btn--primary:hover {
    transform:  translateY(-2px);
    box-shadow: var(--bob-shadow-md);
    opacity: 0.92;
}