/* ══════════════════════════════════════════════════════════════════
   BSA — page shell shared by every page
   Navigation (desktop flyout + phone panel), brand block, page banner,
   section helpers, footer. Loaded after base.css; page stylesheets
   (home.css, events-news.css, …) come after this and may override.
   ══════════════════════════════════════════════════════════════════ */

/* ── NAVBAR ── */
nav{position:fixed;top:0;left:0;right:0;z-index:1000;padding:0 40px;display:flex;align-items:center;justify-content:space-between;height:80px;background:rgba(255,255,255,0.96);backdrop-filter:blur(10px);border-bottom:1px solid var(--border);transition:box-shadow 0.3s;}
nav.scrolled{box-shadow:0 4px 30px rgba(27,42,74,0.12);}
.nav-right{display:flex;align-items:center;gap:16px;}
.lang-toggle{display:flex;align-items:center;background:var(--cream-dark);border-radius:50px;padding:4px;gap:2px;border:1px solid var(--border);}
.lang-btn{padding:7px 18px;border-radius:50px;border:none;font-size:12px;font-weight:700;letter-spacing:1px;cursor:pointer;transition:all 0.3s;background:transparent;color:var(--text-light);}
.lang-btn.active{background:var(--navy);color:white;box-shadow:0 2px 8px rgba(27,42,74,0.25);}
.nav-links{display:flex;gap:28px;list-style:none;align-items:center;}
.nav-links>li{display:flex;align-items:center;} /* one baseline for text links and the flex Community toggle */
.nav-links a{font-size:14px;font-weight:700;letter-spacing:0.5px;color:var(--navy);text-decoration:none;position:relative;padding-bottom:4px;transition:color 0.3s;}
body.ltr .nav-links a{font-family:'Lato',sans-serif;font-size:13px;letter-spacing:1px;text-transform:uppercase;}
.nav-links a::after{content:'';position:absolute;bottom:0;right:0;width:0;height:2px;background:var(--gold);transition:width 0.3s;}
body.ltr .nav-links a::after{right:auto;left:0;}
.nav-links a:hover{color:var(--gold-text);}
.nav-links a:hover::after{width:100%;}
.nav-cta{background:var(--navy)!important;color:var(--white)!important;padding:10px 22px!important;border-radius:3px;transition:background 0.3s!important;}
.nav-cta:hover{background:var(--gold)!important;color:var(--on-gold)!important;}
.nav-cta::after{display:none!important;}
.nav-active{color:var(--gold-text)!important;}
.nav-active::after{width:100%!important;}
.hamburger{display:none;cursor:pointer;flex-direction:column;gap:5px;}
.hamburger span{width:26px;height:2px;background:var(--navy);display:block;transition:0.3s;}

/* ── DROPDOWN (desktop flyout; phone panel further down) ── */
.nav-dropdown{position:relative;}
.nav-dropdown>a{display:flex;align-items:center;gap:5px;cursor:pointer;}
.nav-caret{font-size:9px;opacity:0.65;transition:transform 0.3s;}
.nav-dropdown:hover .nav-caret,.nav-dropdown.open .nav-caret{transform:rotate(180deg);}
.dropdown-menu{position:absolute;top:calc(100% + 18px);right:0;min-width:230px;background:var(--white);border-radius:10px;box-shadow:0 12px 50px rgba(27,42,74,0.15),0 0 0 1px var(--border);padding:8px;opacity:0;visibility:hidden;transform:translateY(-10px);transition:all 0.25s cubic-bezier(0.16,1,0.3,1);z-index:200;}
body.ltr .dropdown-menu{right:auto;left:0;}
.nav-dropdown:hover .dropdown-menu,.nav-dropdown.open .dropdown-menu{opacity:1;visibility:visible;transform:translateY(0);}
.dropdown-menu::before{content:'';position:absolute;top:-5px;right:22px;width:10px;height:10px;background:white;border:1px solid var(--border);border-bottom:none;border-right:none;transform:rotate(45deg);border-radius:2px 0 0 0;}
body.ltr .dropdown-menu::before{right:auto;left:22px;}
.dd-label{font-size:10px;font-weight:700;letter-spacing:1.5px;color:var(--gold-text);padding:8px 14px 4px;text-transform:uppercase;}
.dd-divider{height:1px;background:var(--border);margin:6px 8px;}
.dropdown-menu a{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:7px;font-size:13px;font-weight:600;color:var(--navy);text-decoration:none;transition:all 0.2s;}
body.ltr .dropdown-menu a{flex-direction:row;}
.dropdown-menu a:hover{background:var(--cream);color:var(--gold-text);}
.dropdown-menu a i{width:18px;text-align:center;font-size:13px;color:var(--gold-text);}
@media(max-width:900px){
  .nav-dropdown .dropdown-menu{position:static;opacity:1;visibility:visible;
    transform:none;display:none;width:100%;margin-top:12px;
    background:var(--navy);border:none;border-radius:8px;padding:12px;
    box-shadow:0 6px 20px rgba(27,42,74,.25);}
  .nav-dropdown .dropdown-menu a{color:#fff;background:transparent;padding:10px 12px;}
  .nav-dropdown .dropdown-menu a:hover{background:rgba(255,255,255,.08);color:var(--gold-light);}
  .nav-dropdown .dropdown-menu a i{color:var(--gold);}
  .nav-dropdown .dd-label{padding:2px 12px 10px;color:rgba(255,255,255,.5);}
  .nav-dropdown .dd-divider{background:rgba(255,255,255,.15);}
  .nav-dropdown.mob-open .dropdown-menu{display:block;}
  .nav-dropdown.mob-open .nav-caret{transform:rotate(180deg);}
  .dropdown-menu::before{display:none;}
}

/* ── BRAND ──
   The crest is white artwork on a navy square with a lot of padding, so as
   a 58px tile the letters were ~12px and the two name lines unreadable.
   The nav now shows the BSA★ mark alone (cut out, navy on white) with the
   name as live text beside it, in the current language. */
.nav-logo .brand{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--navy);}
.brand-mark{display:block;height:48px;width:auto;flex-shrink:0;}
.brand-text{display:flex;flex-direction:column;line-height:1.15;}
.brand-name{font-size:16px;font-weight:700;color:var(--navy);white-space:nowrap;}
.brand-sub{font-size:11px;color:var(--text-light);white-space:nowrap;margin-top:3px;}
body.ltr .brand-name{font-family:'Playfair Display',serif;font-size:17px;}
body.ltr .brand-sub{font-family:'Noto Naskh Arabic',serif;}
body:not(.ltr) .brand-sub{font-family:'Lato',sans-serif;letter-spacing:1.2px;text-transform:uppercase;font-size:10px;}
/* Between 900 and 1200px the links leave no room for the name; the mark alone still
   reads clearly. Under 600px (phones) the same, next to the hamburger and toggle. */
@media (max-width:1200px){.brand-sub{display:none;}.nav-links{gap:20px;}}
@media (max-width:1080px) and (min-width:901px){.brand-text{display:none;}}
@media (max-width:600px){.brand-text{display:none;}.brand-mark{height:42px;}}
.footer-logo{display:block;height:104px;width:auto;margin-bottom:20px;}

/* ── PAGE BANNER (inner pages) ── */
.page-banner{background:var(--navy);padding:140px 0 60px;position:relative;overflow:hidden;text-align:center;}
.page-banner::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 60% 0%,rgba(196,151,59,0.18) 0%,transparent 70%);pointer-events:none;}
.page-banner-inner{position:relative;z-index:1;max-width:700px;margin:0 auto;padding:0 40px;}
.page-banner .section-label{display:inline-block;font-size:11px;font-weight:700;letter-spacing:3px;color:var(--gold-light);margin-bottom:16px;}
body.ltr .page-banner .section-label{font-family:'Lato',sans-serif;text-transform:uppercase;}
.page-banner h1{font-size:clamp(32px,5vw,54px);font-weight:700;color:white;line-height:1.3;margin-bottom:16px;}
body.ltr .page-banner h1{font-family:'Playfair Display',serif;line-height:1.2;}
.page-banner p{font-size:16px;color:rgba(255,255,255,0.65);line-height:1.9;}
body.ltr .page-banner p{font-family:'Lato',sans-serif;font-weight:300;line-height:1.7;}
.banner-divider{width:60px;height:3px;background:linear-gradient(to left,var(--gold),var(--gold-light));margin:20px auto;border-radius:2px;}
body.ltr .banner-divider{background:linear-gradient(to right,var(--gold),var(--gold-light));}

/* ── SECTION HELPERS ──
   Pages set their own section padding; the home page overrides the title,
   sub and reveal sizes in home.css. */
.section-inner{max-width:1180px;margin:0 auto;padding:0 40px;}
.section-label{display:inline-block;font-size:12px;font-weight:700;letter-spacing:2px;color:var(--gold-text);margin-bottom:14px;}
body.ltr .section-label{font-family:'Lato',sans-serif;font-size:11px;letter-spacing:3px;text-transform:uppercase;}
.section-title{font-size:clamp(28px,4vw,42px);font-weight:700;color:var(--navy);line-height:1.3;margin-bottom:16px;}
body.ltr .section-title{font-family:'Playfair Display',serif;line-height:1.2;}
.section-sub{font-size:16px;color:var(--text-light);line-height:1.9;max-width:560px;}
body.ltr .section-sub{font-family:'Lato',sans-serif;line-height:1.7;}
.divider{width:60px;height:3px;background:linear-gradient(to left,var(--gold),var(--gold-light));margin:20px 0 40px;border-radius:2px;}
body.ltr .divider{background:linear-gradient(to right,var(--gold),var(--gold-light));}
.reveal{opacity:0;transform:translateY(30px);transition:all 0.8s cubic-bezier(0.16,1,0.3,1);}
.reveal.visible{opacity:1;transform:translateY(0);}

/* ── FOOTER ── */
footer{background:var(--navy);color:rgba(255,255,255,0.7);padding:80px 0 0;}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:50px;max-width:1180px;margin:0 auto;padding:0 40px;}
.footer-brand p{font-size:13px;line-height:1.9;max-width:280px;}
.footer-social{display:flex;gap:10px;margin-top:20px;}
.social-icon{width:36px;height:36px;border:1px solid rgba(255,255,255,0.2);border-radius:50%;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,0.6);font-size:14px;text-decoration:none;transition:all 0.3s;}
.social-icon:hover{background:var(--gold);border-color:var(--gold);color:var(--on-gold);}
.footer-col h4{color:white;font-size:13px;font-weight:700;letter-spacing:1px;margin-bottom:20px;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,0.1);}
body.ltr .footer-col h4{font-family:'Lato',sans-serif;letter-spacing:1.5px;text-transform:uppercase;}
.footer-col ul{list-style:none;}
.footer-col ul li{margin-bottom:10px;}
.footer-col ul a{color:rgba(255,255,255,0.6);text-decoration:none;font-size:13px;transition:color 0.3s,padding-inline-start 0.3s;display:flex;align-items:center;gap:8px;}
body.ltr .footer-col ul a{font-family:'Lato',sans-serif;}
.footer-col ul a::before{content:'\203A';color:var(--gold);font-size:16px;}
.footer-col ul a:hover{color:var(--gold);padding-inline-start:6px;}
.footer-bottom-bar{border-top:1px solid rgba(255,255,255,0.08);margin-top:60px;padding:24px 40px;max-width:1180px;margin-left:auto;margin-right:auto;display:flex;align-items:center;justify-content:space-between;font-size:12px;flex-wrap:wrap;gap:12px;}

/* ── RESPONSIVE ── */
@media(max-width:900px){
  nav{padding:0 20px;}
  .nav-links{display:none;}
  .hamburger{display:flex;}
  /* Mobile menu panel. nav has backdrop-filter, which makes it the
     containing block for this fixed panel: bottom:0 used to resolve
     against the 80px nav, not the screen, so the panel collapsed to its
     own padding and the items spilled over the hero. An explicit height
     fixes that. align-items:stretch + text-align:start puts items on the
     right in Arabic and the left in English (flex-end did the opposite). */
  .nav-links.open { display:flex; flex-direction:column; position:fixed; top:80px; left:0; right:0;
    height:calc(100vh - 80px); height:calc(100dvh - 80px); overflow-y:auto; -webkit-overflow-scrolling:touch;
    background:white; padding:16px 24px 40px; gap:0; z-index:999; align-items:stretch; text-align:start; }
  .nav-links.open > li { width:100%; }
  .nav-links.open > li > a { display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding:16px 0; font-size:16px; border-bottom:1px solid var(--border); }
  .nav-links.open > li > a::after { display:none; }
  .nav-links.open > li > .nav-cta { justify-content:center; margin-top:24px; border-bottom:none; padding:14px 22px !important; }
  .nav-links.open .nav-dropdown.mob-open > a { border-bottom-color:transparent; }
  .footer-grid{grid-template-columns:1fr 1fr;gap:36px 24px;padding:0 20px;}
  .footer-col{min-width:0;}
  .footer-col ul a,.footer-col ul li,.footer-brand p{overflow-wrap:anywhere;}
  .footer-bottom-bar{padding:20px;flex-wrap:wrap;gap:8px;}
  .section-inner{padding:0 20px;}
  .page-banner-inner{padding:0 20px;}
/* ── PHONES ── */
@media(max-width:600px){
  .page-banner{padding:120px 0 48px;}
  .footer-grid{grid-template-columns:1fr;gap:32px;}
  footer{padding-top:56px;}
  .footer-bottom-bar{margin-top:40px;flex-direction:column;text-align:center;}
}

/* ── Mobile dropdown panel ──
   Stated last and marked important: earlier attempts were being lost to
   the desktop .dropdown-menu rule. #0B2040 is the blue from the logo. */
@media (max-width:900px){
  .nav-dropdown .dropdown-menu{
    background:#0B2040 !important;
    background-color:#0B2040 !important;
    border:none !important;box-shadow:0 8px 24px rgba(0,0,0,.3) !important;
    border-radius:8px !important;padding:12px !important;
    width:100% !important;margin-top:12px !important;}
  .nav-dropdown .dropdown-menu a{color:#fff !important;background:transparent !important;}
  .nav-dropdown .dropdown-menu a:hover{background:rgba(255,255,255,.10) !important;
    color:var(--gold-light) !important;}
  .nav-dropdown .dropdown-menu a i{color:var(--gold) !important;}
  .nav-dropdown .dropdown-menu .dd-label{color:rgba(255,255,255,.55) !important;
    padding:2px 12px 10px !important;}
  .nav-dropdown .dropdown-menu .dd-divider{background:rgba(255,255,255,.18) !important;}

/* ── CONSENT BANNER (built by BSA.initConsent when analytics is configured) ── */
.consent{position:fixed;bottom:16px;inset-inline-end:16px;z-index:2100;max-width:420px;width:calc(100% - 32px);
  background:var(--white);border:1px solid var(--border);border-top:3px solid var(--gold);border-radius:8px;
  box-shadow:0 14px 44px rgba(27,42,74,.18);padding:18px 20px 16px;}
.consent-text{font-size:13px;line-height:1.75;color:var(--text);margin:0 0 12px;}
body.ltr .consent-text{font-family:'Lato',sans-serif;}
.consent-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;}
.consent-btn{border:1.5px solid var(--navy);background:var(--navy);color:#fff;padding:9px 16px;border-radius:4px;font:inherit;font-size:13px;font-weight:700;cursor:pointer;transition:background .3s,color .3s,border-color .3s;}
.consent-btn:hover{background:var(--gold);border-color:var(--gold);color:var(--on-gold);}
.consent-essential{background:none;color:var(--navy);}
.consent-essential:hover{background:none;color:var(--gold-text);}
.consent-link{margin-inline-start:auto;font-size:12px;color:var(--text-light);text-decoration:underline;}
.consent-link:hover{color:var(--gold-text);}
@media(max-width:600px){.consent{inset-inline-end:8px;bottom:8px;width:calc(100% - 16px);padding:16px;}}