/* =====================================================================
   shell.css  —  site chrome layout (nav, footer, floating WhatsApp).
   Uses theme.css tokens only — no hardcoded brand colours, so re-brand
   still means "edit theme.css". Load AFTER theme.css.
   ===================================================================== */

/* ---------------- Top navigation ---------------- */
.site-nav{ position:sticky; top:0; z-index:var(--z-nav); background:var(--surface); border-bottom:1px solid var(--border); }
.site-nav__in{ max-width:var(--container); margin-inline:auto; padding:0 18px; height:64px; display:flex; align-items:center; justify-content:space-between; gap:16px; }

.brand{ display:inline-flex; align-items:center; gap:10px; font-family:var(--font-head); font-weight:700; font-size:24px; color:var(--heading); white-space:nowrap; }
.brand b{ color:var(--accent); }
.brand img{ height:36px; width:auto; }

.nav-links{ display:flex; align-items:center; gap:4px; }
.nav-links a{ padding:9px 13px; border-radius:var(--radius-pill); color:var(--text-dim); font-weight:600; font-size:15px; white-space:nowrap; }
.nav-links a:hover,.nav-links a.is-active{ background:var(--surface-alt); color:var(--accent); }

/* Tools dropdown */
.nav-drop{ position:relative; }
.nav-drop__btn{ display:inline-flex; align-items:center; gap:5px; padding:9px 13px; border-radius:var(--radius-pill); color:var(--text-dim); font-weight:600; font-size:15px; background:none; border:0; cursor:pointer; font-family:inherit; }
.nav-drop__btn:hover{ background:var(--surface-alt); color:var(--accent); }
.nav-drop__btn .caret{ transition:transform var(--t-fast); }
.nav-drop.open .nav-drop__btn .caret{ transform:rotate(180deg); }
.nav-drop__panel{ position:absolute; left:0; top:calc(100% + 8px); min-width:230px; background:var(--surface); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow-md); padding:8px; display:none; }
.nav-drop.open .nav-drop__panel{ display:block; }
.nav-drop__panel a{ display:block; padding:10px 12px; border-radius:9px; color:var(--text); font-weight:500; font-size:15px; }
.nav-drop__panel a:hover{ background:var(--surface-alt); color:var(--accent); }

.nav-right{ display:flex; align-items:center; gap:10px; }

/* Language toggle */
.lang-tog{ display:inline-flex; border:1px solid var(--border); border-radius:var(--radius-pill); overflow:hidden; }
.lang-tog button{ background:var(--surface); color:var(--text-dim); border:0; padding:7px 13px; font-size:14px; cursor:pointer; font-family:inherit; line-height:1; }
.lang-tog button.on{ background:var(--accent); color:#fff; }
.nav-plan{ background:var(--c-gold); color:#3a2a08; font-weight:700; font-size:14px; padding:8px 15px; border-radius:var(--radius-pill); white-space:nowrap; }
.nav-plan:hover{ background:var(--accent); color:#fff; }

/* Hamburger */
.hamburger{ display:none; background:var(--surface); border:1px solid var(--border); color:var(--accent); border-radius:10px; width:42px; height:42px; align-items:center; justify-content:center; cursor:pointer; }
.hamburger svg{ width:22px; height:22px; }

/* Mobile panel */
.mobile-backdrop{ position:fixed; inset:0; background:rgba(23,17,14,.4); z-index:var(--z-modal); display:none; }
.mobile-backdrop.open{ display:block; }
.mobile-panel{ position:fixed; top:0; right:0; height:100%; width:min(86%,340px); background:var(--surface); z-index:calc(var(--z-modal) + 1); transform:translateX(100%); transition:transform var(--t); overflow-y:auto; padding:18px; box-shadow:var(--shadow-lg); }
.mobile-panel.open{ transform:translateX(0); }
.mobile-panel__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.mobile-panel__close{ background:var(--surface-alt); border:0; width:40px; height:40px; border-radius:50%; font-size:20px; cursor:pointer; color:var(--text-dim); }
.mobile-panel a{ display:block; padding:13px 8px; border-radius:10px; color:var(--text); font-weight:600; font-size:16px; border-bottom:1px solid var(--border); }
.mobile-panel a:hover{ color:var(--accent); }
.mobile-panel .m-label{ font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--text-dim); font-weight:700; padding:14px 8px 4px; }

@media (max-width:900px){
  .nav-links,.nav-drop,.nav-right .nav-cta{ display:none; }
  .hamburger{ display:inline-flex; }
  .nav-right{ gap:8px; }
  .nav-right .lang-tog{ display:inline-flex; }               /* keep language toggle on the mobile bar */
  .nav-right .lang-tog button{ padding:8px 12px; font-size:14px; }
  .nav-right .nav-plan{ padding:7px 11px; font-size:13px; }  /* keep Plans/Upgrade visible on mobile */
}

/* ---------------- Footer layout ---------------- */
.site-footer .container{ }
.footer-brand{ font-family:var(--font-head); font-weight:700; font-size:22px; color:#fff; }
.footer-brand b{ color:var(--accent); }
.footer-tag{ color:var(--footer-dim); font-size:var(--fs-sm); margin-top:6px; max-width:280px; }
.footer-social{ display:flex; gap:10px; margin-top:14px; }
.footer-social a{ width:38px; height:38px; border:1px solid var(--footer-line); border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--footer-dim); }
.footer-social a:hover{ color:#fff; border-color:var(--accent); }
.footer-social svg{ width:18px; height:18px; }
.footer-wa{ display:inline-flex; align-items:center; gap:.5em; background:var(--c-wa); color:#0b3d24; font-weight:700; padding:10px 16px; border-radius:var(--radius); margin-top:14px; }
.footer-wa:hover{ color:#0b3d24; background:#1eb257; }

/* ---------------- Floating WhatsApp ---------------- */.wa-pop{ background:var(--surface); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow-lg); padding:8px; width:250px; display:none; margin-bottom:6px; }
.wa-pop.open{ display:block; }
.wa-pop__item{ display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:10px; color:var(--text); }
.wa-pop__item:hover{ background:var(--surface-alt); color:var(--accent); }
.wa-pop__item img{ width:38px; height:38px; border-radius:50%; object-fit:cover; flex:none; }
.wa-pop__ph{ width:38px; height:38px; border-radius:50%; background:var(--surface-alt); color:var(--accent); display:flex; align-items:center; justify-content:center; font-weight:700; flex:none; }
.wa-pop__name{ font-weight:700; font-size:14px; line-height:1.2; }
.wa-pop__role{ font-size:12px; color:var(--text-dim); }

/* ---- account dropdown + mobile lang toggle (v2 nav enhancements) ---- */
.nav-drop__panel--right{ left:auto; right:0; }
.acct-drop .nav-drop__btn .acct-ico{ width:18px; height:18px; flex:none; }
.acct-drop .nav-drop__panel{ min-width:210px; }
.m-toprow{ display:flex; justify-content:flex-end; margin-bottom:6px; }
.mobile-panel .m-toprow .lang-tog{ border:1px solid var(--border); }
.mobile-panel .m-toprow .lang-tog button{ padding:10px 18px; font-size:15px; }

/* ---------------- Banner slots ---------------- */
.banner-slot{ display:none; }
.banner-slot.has-banner{ display:block; max-width:var(--container); margin:14px auto 0; padding:0 18px; text-align:center; }
.banner-slot img{ max-width:100%; height:auto; border-radius:12px; display:inline-block; }