/* ============================================================================
   CWF NAV V2 — sticky glassmorphism header, Register popover/sheet, hero
   slider, role-pill rows. Scoped by component class (cwf-nav-v2 / cwf-role- /
   cwf-hero- / cwf-pill-), not a single wrapper, since this renders inside the
   pre-existing <header> alongside untouched legacy markup (.ogs-mobile-roles,
   #registerTypeModal, the mobile drawer) that must keep its own styling.

   Fonts: Plus Jakarta Sans (headings/buttons), Inter (body) — same pair as
   the About page and the Next.js reference. Loaded via <link> in
   header.blade.php, not @import here (avoids a render-blocking hop).

   Brand accents (Google 4-color), reused everywhere a role needs a color:
     blue #4285F4  red #EA4335  yellow #FBBC05  green #34A853
   ========================================================================= */

.cwf-nav-v2, .cwf-role-popover, .cwf-role-sheet, .cwf-hero-slider, .cwf-pill-row {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}
.cwf-nav-v2__logo, .cwf-hero-slide__title, .cwf-role-card__name, .cwf-role-sheet__header span {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
}

/* ---------------------------------------------------------------- NAV BAR */
.cwf-nav-v2 {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: rgba(255,255,255,.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(194,198,213,.35);
}
.cwf-nav-v2__inner {
    /* Full-bleed, edge-to-edge (matches the reference's own header) -- no
       max-width centering, so the logo sits at the true left edge and the
       actions sit at the true right edge on wide screens instead of both
       floating inward with empty space beyond them. */
    width: 100%;
    padding: 14px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    box-sizing: border-box;
}
.cwf-nav-v2__logo img { height: 52px; width: auto; display: block; }
.cwf-nav-v2__links { display: flex; align-items: center; gap: 28px; flex: 1; justify-content: center; }
.cwf-nav-v2__links a {
    font-size: 16px;
    font-weight: 600;
    color: #191B22;
    text-decoration: none;
    transition: color .2s ease;
}
.cwf-nav-v2__links a:hover { color: #4285F4; }
.cwf-nav-v2__actions { display: flex; align-items: center; gap: 12px; }
.cwf-nav-v2__lang .lang-btn {
    background: #fff;
    border: 1.5px solid #C2C6D5;
    border-radius: 999px;
    padding: 9px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.cwf-nav-v2__profile .dropdown-toggle::after { margin-left: 6px; }

/* The pre-redesign desktop nav row (logo/nav-links/login-signup/lang-switcher)
   is now fully replaced by .cwf-nav-v2 above -- hidden everywhere rather than
   removed from the markup, since header.blade.php's auth-state branches and
   the mobile drawer/topbar still share this same surrounding structure and
   are deliberately left untouched.

   Specificity note: .header-controls also carries Bootstrap's .d-flex utility
   class (display:flex !important), compiled into a bundle that happens to
   load AFTER this file on the live page -- same specificity, same
   !important, so source order alone let Bootstrap win. Qualifying the
   selector with its real ancestor beats that regardless of load order. */
body .n-header--top .ogs-desktop-nav,
body .n-header--top .header-controls {
    display: none !important;
}

/* .ogs-header-topbar (despite the "mobile" filename it's included from,
   header-mobile-topbar.blade.php) is deliberately kept visible at desktop
   widths by the theme's own CSS -- it's the old site's persistent logo bar,
   not a mobile-only element. Its search/hamburger sub-part is already
   d-lg-none; only the logo duplicates .cwf-nav-v2 at desktop widths, so it's
   hidden there only -- mobile keeps this exact element untouched. */
@media (min-width: 992px) {
    body .n-header--top .ogs-header-topbar {
        display: none !important;
    }

    /* .header-style carries its own min-height (68-72px) reserved for the
       row above, regardless of whether its children render -- with the
       topbar/nav/controls all hidden at this width it would otherwise leave
       an empty gap between .cwf-nav-v2 and the hero content below. */
    body .n-header--top .header-style {
        min-height: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
}
.cwf-nav-v2__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 15px;
    font-weight: 600;
    padding: 11px 26px;
    border-radius: 999px;
    text-decoration: none;
    cursor: pointer;
    border: 1.5px solid transparent;
    transition: box-shadow .2s ease, transform .15s ease;
}
.cwf-nav-v2__btn--outline { background: #fff; color: #191B22; border-color: #C2C6D5; }
.cwf-nav-v2__btn--outline:hover { border-color: #4285F4; color: #4285F4; }
.cwf-nav-v2__btn--primary { background: #4285F4; color: #fff; box-shadow: 0 4px 14px rgba(66,133,244,.35); }
.cwf-nav-v2__btn--primary:hover { box-shadow: 0 6px 20px rgba(66,133,244,.45); transform: translateY(-1px); }

/* ---------------------------------------------------- MOBILE TOPBAR LANG */
.ogs-topbar-lang { position: relative; margin-right: 6px; }
.ogs-lang-btn {
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(66, 133, 244, 0.25);
    border-radius: 10px;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
}
.ogs-topbar-lang .lang-menu { right: 0; left: auto; }
@media (min-width: 992px) {
    .ogs-topbar-lang { display: none !important; }
}

/* ---------------------------------------------------------- ROLE POPOVER */
.cwf-role-popover {
    position: absolute;
    top: 100%;
    right: 32px;
    margin-top: 10px;
    width: min(56rem, 92vw);
    max-height: 75vh;
    overflow-y: auto;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 24px 60px rgba(25,27,34,.18), 0 2px 8px rgba(25,27,34,.08);
    padding: 18px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
    z-index: 1040;
}
.cwf-role-popover.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.cwf-role-popover__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
@media (max-width: 1200px) {
    .cwf-role-popover__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------------------------------------------------------------- CARDS */
.cwf-role-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 18px 16px 16px;
    border-radius: 16px;
    background: #F9F9FF;
    border: 1px solid #ECEDF7;
    text-decoration: none;
    overflow: hidden;
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.cwf-role-card:hover { box-shadow: 0 10px 26px rgba(25,27,34,.12); transform: translateY(-2px); text-decoration: none; }
.cwf-role-card__bar { position: absolute; inset: 0 0 auto 0; height: 4px; }
.cwf-role-card--blue   .cwf-role-card__bar { background: #4285F4; }
.cwf-role-card--red    .cwf-role-card__bar { background: #EA4335; }
.cwf-role-card--yellow .cwf-role-card__bar { background: #FBBC05; }
.cwf-role-card--green  .cwf-role-card__bar { background: #34A853; }
.cwf-role-card__icon {
    width: 40px; height: 40px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
    background: #ECEDF7;
    margin-bottom: 4px;
}
.cwf-role-card--blue   .cwf-role-card__icon { color: #4285F4; }
.cwf-role-card--red    .cwf-role-card__icon { color: #EA4335; }
.cwf-role-card--yellow .cwf-role-card__icon { color: #B58500; }
.cwf-role-card--green  .cwf-role-card__icon { color: #34A853; }
.cwf-role-card__name { font-size: 16px; font-weight: 700; color: #191B22; }
.cwf-role-card__desc { font-size: 13px; color: #424753; line-height: 1.45; flex: 1; }
.cwf-role-card__cta { font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; }
.cwf-role-card--blue   .cwf-role-card__cta { color: #4285F4; }
.cwf-role-card--red    .cwf-role-card__cta { color: #EA4335; }
.cwf-role-card--yellow .cwf-role-card__cta { color: #B58500; }
.cwf-role-card--green  .cwf-role-card__cta { color: #34A853; }

/* ------------------------------------------------------------ MOBILE SHEET */
.cwf-role-sheet {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: #fff;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform .25s ease;
}
.cwf-role-sheet.is-open { transform: translateX(0); }
.cwf-role-sheet__header {
    display: flex; align-items: center; gap: 14px;
    padding: 18px 20px;
    border-bottom: 1px solid #ECEDF7;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 20px; font-weight: 700; color: #191B22;
}
.cwf-role-sheet__back {
    width: 38px; height: 38px; border-radius: 50%;
    border: 1px solid #C2C6D5; background: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; cursor: pointer;
}
.cwf-role-sheet__grid { padding: 16px; display: grid; grid-template-columns: 1fr; gap: 12px; overflow-y: auto; }

/* -------------------------------------------------------------- PILL ROW */
.cwf-pill-row { display: flex; gap: 3px; }
.cwf-pill {
    flex: 1 1 0;
    min-width: 0;
    min-height: 54px;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 13px; font-weight: 700;
    color: #fff;
    text-decoration: none;
    text-align: center;
    padding: 8px 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: filter .2s ease;
}
.cwf-pill:hover { filter: brightness(1.08); text-decoration: none; color: #fff; }
.cwf-pill--blue   { background: #4285F4; }
.cwf-pill--red    { background: #EA4335; }
.cwf-pill--yellow { background: #FBBC05; color: #1a1a1a; }
.cwf-pill--green  { background: #34A853; }
.cwf-pill--yellow:hover { color: #1a1a1a; }
@media (max-width: 1100px) {
    .cwf-pill { font-size: 11px; }
}

/* ------------------------------------------------------------ HERO SLIDER */
.cwf-hero-slider { position: relative; background: #F9F9FF; overflow: hidden; }
.cwf-hero-slider__track { position: relative; height: 420px; }
.cwf-hero-slide {
    position: absolute; inset: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 32px;
    padding: 0 64px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .5s ease;
}
.cwf-hero-slide.is-active { opacity: 1; pointer-events: auto; }
.cwf-hero-slide__kicker {
    display: inline-block;
    font-size: 12px; font-weight: 700;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(66,133,244,.1);
    color: #4285F4;
    border: 1px solid rgba(66,133,244,.2);
    margin-bottom: 14px;
}
.cwf-hero-slide__title { font-size: clamp(1.75rem, 2.6vw, 2.75rem); font-weight: 700; color: #191B22; line-height: 1.2; margin-bottom: 14px; }
.cwf-hero-slide__title strong { color: #4285F4; }
.cwf-hero-slide__subtitle { font-size: 17px; color: #424753; line-height: 1.6; margin-bottom: 22px; max-width: 46ch; }
.cwf-hero-slide__cta {
    display: inline-flex; align-items: center;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 700; font-size: 15px;
    color: #fff; background: #4285F4;
    padding: 13px 30px; border-radius: 999px;
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(66,133,244,.35);
    transition: box-shadow .2s ease, transform .15s ease;
}
.cwf-hero-slide__cta:hover { box-shadow: 0 10px 24px rgba(66,133,244,.45); transform: translateY(-1px); color: #fff; }
.cwf-hero-slide__figure { height: 85%; display: flex; align-items: center; justify-content: flex-end; }
.cwf-hero-slide__figure img { max-height: 100%; width: auto; max-width: 100%; border-radius: 24px; box-shadow: 0 24px 48px rgba(25,27,34,.15); object-fit: cover; }
.cwf-hero-slide__figure-empty {
    width: 100%; height: 260px; border-radius: 24px;
    background: linear-gradient(135deg, #ECEDF7, #E1E2EB);
    display: flex; align-items: center; justify-content: center;
    color: #C2C6D5; font-size: 40px;
}
.cwf-hero-slider__dots { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; }
.cwf-hero-slider__dot { width: 8px; height: 8px; border-radius: 50%; border: none; background: #C2C6D5; cursor: pointer; padding: 0; }
.cwf-hero-slider__dot.is-active { background: #4285F4; width: 22px; border-radius: 5px; }
@media (max-width: 1100px) {
    .cwf-hero-slide { grid-template-columns: 1fr; padding: 24px 32px; text-align: center; }
    .cwf-hero-slide__figure { display: none; }
    .cwf-hero-slide__subtitle { max-width: 100%; margin-inline: auto; }
    .cwf-hero-slider__track { height: 340px; }
}