/* site-chrome.css — shared header dropdowns + footer for the public CPD pages
   (index.php, course.php). Replicates klc.edu.sg's menu items/links + footer,
   styled to the redesigned navy/green system. Loaded after each page's inline
   <style>; selectors are specific enough to win where they overlap. */

/* ===== Language toggle (简体中文 / English) ===== */
.primary-links .lang{color:var(--text-muted);font-weight:700;font-size:12px;text-transform:none;
  display:inline-flex;align-items:center;gap:5px;cursor:pointer;white-space:nowrap;}
.primary-links .lang:hover{color:var(--navy);}
.primary-links .flag{width:16px;height:11px;border-radius:2px;overflow:hidden;flex:none;display:inline-block;}
.primary-links .flag svg{width:100%;height:100%;display:block;}

/* ===== Mobile hamburger toggle (shown ≤900px) ===== */
.nav-toggle{display:none;}
.nav-toggle::before{content:"\2630";}                          /* ☰ */
header.site.nav-open .nav-toggle::before{content:"\2715";}     /* ✕ */

/* ===== Primary-nav dropdowns ===== */
.primary-links{position:static;}
.primary-links > .pl{position:relative;display:inline-flex;align-items:center;}
.primary-links > .pl > a{display:inline-flex;align-items:center;gap:4px;cursor:pointer;}
.primary-links .caret{font-size:9px;opacity:.6;transition:transform .2s;}
.primary-links .pl:hover .caret,.primary-links .pl.open .caret{transform:rotate(180deg);}
.primary-links .drop{
  position:absolute;top:100%;left:0;z-index:70;min-width:262px;
  background:#fff;border:1px solid var(--line);border-radius:12px;
  box-shadow:0 18px 44px rgba(20,48,79,.18);padding:8px;margin-top:8px;
  display:none;flex-direction:column;gap:1px;
}
/* transparent bridge over the 8px gap so moving from the item into the dropdown
   doesn't drop :hover (part of .drop -> keeps .pl:hover true). */
.primary-links .drop::before{content:"";position:absolute;left:0;right:0;top:-10px;height:12px;}
.primary-links .pl:hover > .drop,
.primary-links .pl.open > .drop{display:flex;}
.primary-links .drop a{
  display:block;padding:9px 13px;border-radius:8px;
  font-size:13px;font-weight:600;text-transform:none;letter-spacing:0;
  color:var(--text);white-space:normal;line-height:1.35;
}
.primary-links .drop a:hover{background:var(--green-tint);color:var(--green-dark);}

/* Courses mega-menu (4 grouped columns) */
.primary-links .pl.mega{position:static;}   /* let the wide panel span under the nav */
.primary-links .pl.mega .drop{
  left:32px;right:32px;width:auto;flex-direction:row;flex-wrap:wrap;gap:8px 24px;padding:20px 24px;
}
.primary-links .mega-col{flex:1 1 220px;min-width:200px;display:flex;flex-direction:column;gap:1px;}
.primary-links .mega-h{
  font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;
  color:var(--green-dark);padding:4px 13px 6px;margin-bottom:4px;border-bottom:1px solid var(--line);
}
@media (max-width:900px){
  /* hamburger + collapsible full-width menu panel */
  .nav-toggle{display:inline-flex;align-items:center;justify-content:center;width:44px;height:40px;flex:none;
    border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--navy-ink);font-size:18px;line-height:1;cursor:pointer;}
  .nav-toggle:hover{border-color:var(--navy);color:var(--navy);}
  .nav-primary{flex-wrap:nowrap;position:relative;}
  .primary-links{display:none;position:absolute;top:calc(100% + 1px);left:0;right:0;background:#fff;
    flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:0;padding:6px 16px 14px;border-top:1px solid var(--line);
    box-shadow:0 22px 34px rgba(20,48,79,.16);max-height:calc(100vh - 66px);overflow-y:auto;z-index:65;}
  header.site.nav-open .primary-links{display:flex;}
  .primary-links > .pl,.primary-links > a{display:block;width:100%;border-bottom:1px solid #eef1f4;}
  .primary-links > .pl:last-child,.primary-links > a:last-child{border-bottom:none;}
  .primary-links > .pl > a,.primary-links > a{padding:13px 2px;justify-content:space-between;font-size:14px;text-transform:none;color:var(--navy-ink);}
  .primary-links .lang{padding:13px 2px;font-size:13px;}
  /* dropdowns -> inline accordions (tap the item to expand) */
  .primary-links .pl.mega .drop,.primary-links .drop{
    left:0;right:auto;width:100%;position:static;box-shadow:none;border:none;
    border-left:2px solid var(--green);border-radius:0;margin:2px 0 8px;flex-direction:column;
  }
  .primary-links .pl:hover > .drop{display:none;}      /* touch: rely on .open toggle only */
  .primary-links .pl.open > .drop{display:flex;}
  .primary-links .pl.mega .drop{gap:0;padding:0 0 0 4px;}
  .primary-links .mega-col{flex:none;width:100%;}
}
/* the horizontal wordmark is wide — shrink it a touch on small phones so it fits beside the hamburger */
@media (max-width:440px){ .logo img{height:32px;} }

/* ===== Footer (adapted from klciicom/forme — CTA + legal, centred) ===== */
footer.site{background:var(--navy-deep);color:#fff;text-align:center;font-family:var(--font-body);}
.footer-cta{padding:32px 20px;border-bottom:1px solid rgba(255,255,255,.15);}
.footer-cta h2{margin:0 0 12px;font-size:1.5rem;font-weight:700;color:#fff;}
.footer-cta p{margin:0 auto 24px;max-width:860px;line-height:1.6;font-size:.95rem;color:#dbe6f2;}
.footer-cta .cta-button{display:inline-block;width:100%;max-width:280px;padding:14px 24px;background:#fff;color:var(--navy-deep);text-decoration:none;border-radius:8px;font-weight:700;font-size:1rem;box-sizing:border-box;}
.footer-cta .cta-button:hover{background:var(--green-tint);color:var(--green-dark);}
.footer-bottom{position:relative;min-height:104px;padding:24px 20px 26px;display:flex;flex-direction:column;justify-content:center;font-size:.78rem;line-height:1.8;}
.footer-bottom .legal-line{margin:0 0 6px;color:#cfdae6;}
.footer-bottom .legal-line a{color:#fff;text-decoration:underline;} .footer-bottom .legal-line a:hover{color:var(--green-tint);}
/* social icons pinned bottom-LEFT; EduTrust badge pinned bottom-RIGHT; legal centred between */
.footer-social{position:absolute;left:32px;top:50%;transform:translateY(-50%);display:flex;gap:16px;margin:0;}
.footer-social a{width:22px;height:22px;display:flex;align-items:center;justify-content:center;color:#fff;}
.footer-social a svg{width:100%;height:100%;display:block;} .footer-social a:hover{color:var(--green-tint);}
.footer-bottom .edutrust-badge{position:absolute;right:32px;top:50%;transform:translateY(-50%);margin:0;}
@media (max-width:900px){
  .footer-bottom{min-height:0;}
  .footer-social,.footer-bottom .edutrust-badge{position:static;transform:none;margin:14px auto 0;}
  .footer-social{justify-content:center;}
}
.edutrust-badge{display:inline-block;background:#fff;border-radius:6px;padding:8px 12px;text-align:center;color:var(--navy-ink);width:120px;}
.edutrust-badge.edutrust-img{width:auto;padding:6px;}
.edutrust-badge.edutrust-img img{height:64px;width:auto;max-width:220px;display:block;border-radius:3px;}
.edutrust-badge .et-name{font-size:15px;font-weight:800;color:#c81e5c;}
.edutrust-badge .et-name b{color:#1a1a1a;font-weight:800;}
.edutrust-badge .et-sub{font-size:7px;letter-spacing:.08em;color:var(--navy-ink);font-weight:700;margin-top:-2px;}
.edutrust-badge .et-cert{font-size:7.5px;color:var(--text-muted);margin-top:4px;line-height:1.4;}
@media (min-width:768px){
  .footer-cta{padding:48px 24px;}
  .footer-cta h2{font-size:2rem;}
  .footer-cta p{font-size:1rem;}
  .footer-cta .cta-button{width:auto;min-width:220px;}
}

/* ===== signed-in learner chip (CPD sub-nav .header-actions) =====
   Rendered by learner_nav_actions_html() in inc/learner_auth.php, shared by index.php and
   course.php. Lives here (not in each page's inline CSS) because both pages already load this
   file, so .header-actions gets one definition instead of two. Reuses the .primary-links .drop
   visual language and the --navy/--green tokens from inc/theme.php.
   Disclosure is CSS-only: :hover for pointers, :focus-within for keyboard. The trigger is a
   real link to the account page, so a touch tap always does something useful — and below 900px
   the panel is hidden outright rather than left half-openable (log out is reachable from the
   account page's own header). */
.acct-menu{position:relative;display:inline-flex;}
.acct-menu .acct-btn{gap:6px;}
.acct-menu .acct-name{max-width:15ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.acct-menu .caret{font-size:10px;line-height:1;opacity:.75;}
.acct-drop{
  display:none;position:absolute;right:0;top:calc(100% + 8px);z-index:60;
  min-width:172px;padding:6px;flex-direction:column;
  background:#fff;border:1px solid #d7e2f0;border-radius:12px;
  box-shadow:0 10px 24px rgba(27,62,112,.14);
}
/* bridge the 8px gap so moving the pointer from chip to panel doesn't drop :hover */
.acct-drop::before{content:"";position:absolute;left:0;right:0;top:-10px;height:12px;}
.acct-menu:hover > .acct-drop,
.acct-menu:focus-within > .acct-drop{display:flex;}
.acct-drop a{
  display:block;padding:8px 12px;border-radius:8px;
  font-size:13.5px;font-weight:600;color:var(--navy);white-space:nowrap;text-decoration:none;
}
.acct-drop a:hover,.acct-drop a:focus{background:var(--green-tint);color:var(--green-dark);}
@media (max-width:900px){
  /* touch: the chip is just a link to the account page; no partially-open panel */
  .acct-drop{display:none !important;}
  .acct-menu .caret{display:none;}
  .acct-menu .acct-name{max-width:11ch;}
}