/* ==========================================================================
   Parents First — shared design tokens, header/footer, and responsive base.
   Loaded on every page alongside that page's own inline <style> block,
   which holds page-specific section styling.
   ========================================================================== */

:root{
  --pf-purple:#6d58ba;
  --pf-purple-dark:#583f99;
  --pf-purple-deep:#46327a;
  --pf-purple-tint:#e1e5ff;
  --pf-purple-tint2:#f3f0fb;
  --pf-ink:#181520;
  --pf-body:#564f64;
  --pf-muted:#756f83;
  --pf-line:#efedf3;
  --pf-radius-pill:999px;
  --pf-max:1320px;
  --pf-header-h:65px;
}

html,body{ overflow-x:hidden; }
body{
  margin:0; background:#fff; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  font-family:'Lexend','Noto Sans SC',system-ui,sans-serif; color:var(--pf-body); line-height:1.85;
}
.pf-fr, .pf-fr a{ color:inherit; text-decoration:none; }
.pf-fr *, .pf-fr *::before, .pf-fr *::after{ box-sizing:border-box; }
.disp{ font-family:'Outfit','Noto Sans SC',system-ui,sans-serif; }
img{ max-width:100%; height:auto; }
.pf-wrap{ width:var(--pf-max); max-width:100%; margin:0 auto; background:#fff; }

/* ---------- shared header / pill nav ---------- */
#site-header{ padding:20px 40px 0; }
.pf-hbar{
  display:flex; align-items:center; gap:6px;
  border:1px solid var(--pf-line); border-radius:var(--pf-radius-pill);
  padding:8px 10px 8px 22px; margin:20px 0; min-height:var(--pf-header-h);
  box-shadow:0 6px 18px rgba(47,35,86,.08); background:var(--pf-purple);
  position:relative;
}
.pf-hlogo{
  display:flex; align-items:center; flex:none; background:#fff; border-radius:var(--pf-radius-pill);
  padding:14px 0; box-shadow:0 4px 14px rgba(47,35,86,.16); margin-left:-14px; width:150px;
}
.pf-hlogo img{ height:39px; display:block; margin:0 auto; }
.pf-hnav{ display:flex; align-items:center; gap:2px; margin-left:auto; font-size:14.5px; font-weight:500; color:#fff; }
.pf-hnav > .pf-hitem{ position:relative; }
.pf-hnav a.pf-hlink, .pf-hnav .pf-hlabel{
  display:inline-flex; align-items:center; gap:5px; padding:9px 16px; border-radius:var(--pf-radius-pill);
  color:#fff; font-weight:500; cursor:pointer; background:none; border:none; font:inherit;
}
.pf-hnav .pf-hitem.active > .pf-hlink, .pf-hnav .pf-hitem.active > .pf-hlabel{
  background:var(--pf-purple-tint2); color:var(--pf-purple-dark); font-weight:700;
}
.pf-hnav a.pf-hlink:hover, .pf-hnav .pf-hlabel:hover{ background:rgba(255,255,255,.14); }
.pf-hitem.active > .pf-hlink:hover, .pf-hitem.active > .pf-hlabel:hover{ background:var(--pf-purple-tint2); }
.pf-hcaret{ width:10px; height:10px; transition:transform .2s ease; }
.pf-hitem.open .pf-hcaret, .pf-hitem:hover .pf-hcaret{ transform:rotate(180deg); }

.pf-hdrop{
  display:none; position:absolute; top:calc(100% + 10px); left:0; min-width:230px;
  background:#fff; border-radius:20px; box-shadow:0 20px 46px rgba(47,35,86,.22);
  padding:10px; z-index:40; flex-direction:column; gap:2px;
}
.pf-hitem.open .pf-hdrop, .pf-hitem:hover .pf-hdrop{ display:flex; }
/* invisible bridge over the 10px gap between label and panel, so the pointer
   never leaves .pf-hitem (and its :hover) while moving down into the menu */
.pf-hdrop::before{ content:""; position:absolute; left:0; right:0; top:-10px; height:10px; }
.pf-hdrop a{
  display:block; padding:11px 16px; border-radius:12px; font-size:14.5px; font-weight:500;
  color:var(--pf-ink); white-space:nowrap;
}
.pf-hdrop a:hover, .pf-hdrop a.active{ background:var(--pf-purple-tint2); color:var(--pf-purple-dark); font-weight:600; }

.pf-hcta{
  margin-left:14px; font-family:'Outfit','Noto Sans SC',system-ui,sans-serif; font-size:14px; font-weight:600;
  color:var(--pf-purple); padding:11px 20px; border-radius:var(--pf-radius-pill); background:#fff; flex:none;
}

.pf-hburger{ display:none; flex:none; width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,.16); border:none; align-items:center; justify-content:center; cursor:pointer; margin-left:8px; }
.pf-hburger span, .pf-hburger span::before, .pf-hburger span::after{
  content:""; display:block; width:18px; height:2px; background:#fff; border-radius:2px; position:relative;
}
.pf-hburger span::before{ position:absolute; top:-6px; }
.pf-hburger span::after{ position:absolute; top:6px; }

/* mobile nav */
@media (max-width:900px){
  #site-header{ padding:14px 16px 0; }
  .pf-hbar{ padding:8px 8px 8px 16px; flex-wrap:wrap; }
  /* the pill radius turns into a huge oval once the menu expands, curving the
     last links out of view — square it off while the drawer is open */
  .pf-hbar.pf-mobile-open{ border-radius:28px; padding-bottom:14px; }
  .pf-hnav{ display:none; width:100%; flex-direction:column; align-items:stretch; gap:2px; margin:12px 0 6px; order:3; }
  .pf-hbar.pf-mobile-open .pf-hnav{ display:flex; }
  .pf-hnav a.pf-hlink, .pf-hnav .pf-hlabel{ width:100%; justify-content:space-between; padding:13px 16px; }
  .pf-hitem .pf-hdrop{
    display:none; position:static; box-shadow:none; background:rgba(255,255,255,.08); margin:4px 0 4px 10px; padding:4px; border-radius:14px;
  }
  .pf-hitem.open .pf-hdrop{ display:flex; }
  .pf-hdrop::before{ display:none; }
  .pf-hdrop a{ color:#fff; }
  .pf-hdrop a:hover, .pf-hdrop a.active{ background:rgba(255,255,255,.18); color:#fff; }
  .pf-hcta{ margin-left:auto; }
  .pf-hburger{ display:flex; }
}

/* ---------- shared footer -------------------------------------------------
   ONE implementation for every page — markup lives in /partials/footer.html.
   #site-footer is only a mount point and carries no background of its own, so
   the purple band on .site-footer always spans the full viewport width no
   matter what max-width the page content above it uses.
   Geometry matches the design source (PF Director footer / footer reference). */
#site-footer{ display:block; width:100%; background:none; color:inherit; }
.site-footer{
  display:block; width:100%; box-sizing:border-box;
  background:#50408e; color:rgba(255,255,255,.6);
  padding:74px 80px 34px;
}
.site-footer *, .site-footer *::before, .site-footer *::after{ box-sizing:border-box; }
.site-footer a{ color:inherit; text-decoration:none; }
.footer-inner{ width:100%; max-width:1100px; margin:0 auto; }

.pf-fgrid{ display:grid; grid-template-columns:1.5fr 1fr 1.15fr 1fr; gap:48px; align-items:start; }
.pf-fbrand{ max-width:300px; }
.pf-fbrand-logo{ height:65px; display:block; }
.pf-ftag{ margin:24px 0 0; font-weight:600; font-size:16px; color:#fff; }
.pf-fsub{ margin:0; font-size:15px; line-height:1.7; color:rgba(255,255,255,.58); }
.pf-fcol h4{ margin:6px 0 22px; font-weight:700; font-size:15px; color:#fff; }
.pf-flinks{ display:flex; flex-direction:column; gap:5px; font-size:14.5px; }
.pf-flink{ color:rgba(255,255,255,.62); transition:color .25s ease; }
.pf-flink:hover{ color:#fff; }
.pf-frule{ height:1px; background:rgba(255,255,255,.12); margin:56px 0 26px; }
.pf-fbottom{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.pf-fcopy{ font-size:13px; color:rgba(255,255,255,.5); }
.pf-fsdg{ display:flex; gap:10px; flex-wrap:wrap; }
.pf-fbadge{ font-size:12.5px; font-weight:500; color:rgba(255,255,255,.8);
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
  padding:8px 16px; border-radius:999px; white-space:nowrap;
  transition:background .25s ease, border-color .25s ease; }
.pf-fbadge:hover{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.28); }

@media (max-width:1024px){
  .site-footer{ padding:64px 40px 32px; }
  .pf-fgrid{ gap:32px; }
}
@media (max-width:900px){
  .site-footer{ padding:56px 24px 28px; }
  .pf-fgrid{ grid-template-columns:1fr 1fr; gap:36px 28px; }
  .pf-fbrand{ grid-column:span 2; max-width:none; }
  .pf-frule{ margin:44px 0 24px; }
}
@media (max-width:560px){
  .site-footer{ padding:48px 18px 26px; }
  .pf-fgrid{ grid-template-columns:1fr; gap:32px; }
  .pf-fbrand{ grid-column:auto; }
  .pf-fbrand-logo{ height:52px; }
  .pf-frule{ margin:36px 0 22px; }
  .pf-fbottom{ flex-direction:column; align-items:flex-start; gap:16px; }
}

/* ---------- generic responsive helpers pages can opt into ---------- */
.pf-container{ padding-left:56px; padding-right:56px; }
@media (max-width:900px){ .pf-container{ padding-left:24px; padding-right:24px; } }
@media (max-width:560px){ .pf-container{ padding-left:18px; padding-right:18px; } }

/* ---------- responsive normaliser ----------------------------------------
   The pages were exported from a fixed-width design canvas, so a number of
   blocks carry hard pixel widths, min-widths or negative left offsets. Those
   are correct at desktop size but push content outside narrow viewports
   (silently, because html/body clip overflow-x). Tag such a block with
   .pf-fluid and its fixed HORIZONTAL geometry is released at tablet width and
   below. Vertical offsets (top/margin-top) are deliberately left alone.
   Every rule lives inside a media query, so desktop rendering is unchanged.  */
@media (max-width:1024px){
  .pf-fluid{
    width:auto !important; min-width:0 !important; max-width:100% !important;
    left:0 !important; right:auto !important;
    margin-left:0 !important; margin-right:0 !important;
  }
  /* same, but keeps the block centred in its container */
  .pf-fluid-c{
    width:auto !important; min-width:0 !important; max-width:100% !important;
    left:0 !important; right:auto !important;
    margin-left:auto !important; margin-right:auto !important;
  }
}

/* ══ SHARED MOBILE HEADER / FOOTER ═══════════════════════════════════════
   The mobile pill header and the stacked footer from M_Home.dc.html, applied
   to every page from the one place the partials are styled. Phone and small
   tablet only — nothing here is live above 767px, so desktop is unchanged. */
@media (max-width:767px){
  /* a fixed 335px content column, centred: the gutter is whatever is left
     over on each side (20px at 375, 27.5px at 390, 47.5px at 430) */
  :root{ --pf-gut: max(0px, calc((100% - 335px) / 2)); }

  /* ── header — M_Home mobile pill bar ─────────────────────────────── */
  #site-header{ padding:14px var(--pf-gut) 0 !important; position:sticky; top:0; z-index:60; background:#fff; }
  #site-header .pf-hbar{ height:62px; min-height:62px; padding:8px !important; margin:0 !important;
    gap:10px !important; border:0 !important; border-radius:999px !important;
    box-shadow:0 8px 22px rgba(47,35,86,.18); flex-wrap:nowrap !important; }
  #site-header .pf-hbar.pf-mobile-open{ border-radius:999px !important; padding-bottom:8px !important; }
  #site-header .pf-hlogo{ height:46px; width:auto !important; padding:0 18px !important; margin-left:0 !important;
    border-radius:999px; box-shadow:0 4px 12px rgba(47,35,86,.14); }
  #site-header .pf-hlogo img{ height:26px !important; }
  #site-header .pf-hcta{ margin-left:auto !important; font-size:14px; padding:12px 18px; white-space:nowrap; }
  #site-header .pf-hburger{ width:46px; height:46px; margin-left:0 !important; background:rgba(255,255,255,.22); }
  #site-header .pf-hburger span, #site-header .pf-hburger span::before, #site-header .pf-hburger span::after{ width:17px; }
  /* the drawer drops out of the pill as its own white card */
  #site-header .pf-hnav{ position:absolute; top:calc(100% + 10px); left:0; right:0; width:auto !important;
    margin:0 !important; padding:10px; background:#fff; border:1px solid #efedf3; border-radius:22px;
    box-shadow:0 18px 40px rgba(47,35,86,.16); gap:2px !important; z-index:70; }
  #site-header .pf-hnav a.pf-hlink, #site-header .pf-hnav .pf-hlabel{ min-height:48px; padding:0 16px !important;
    border-radius:14px; font-size:15.5px; font-weight:500; color:#3f3a4c; }
  /* the group toggles are <button>, which the shared sheet only styles as
     <span> — give them the same full-width row as the plain links */
  #site-header .pf-hnav .pf-hlabel{ width:100%; justify-content:space-between; background:none;
    border:0; font:inherit; font-size:15.5px; font-weight:500; color:#3f3a4c; cursor:pointer; }
  #site-header .pf-hitem .pf-hdrop{ background:#f7f6fa; margin:4px 0 4px 10px; }
  #site-header .pf-hdrop a{ color:#3f3a4c; }
  #site-header .pf-hitem:last-child a.pf-hlink{ font-weight:700; color:#583f99; background:#f3f0fb; }

  /* ── footer — M_Home mobile footer ─────────────────────────────────── */
  #site-footer .site-footer{ padding:38px var(--pf-gut) 26px !important; background:#50408e; }
  #site-footer .footer-inner{ display:grid; grid-template-columns:1fr 1fr; column-gap:16px; row-gap:18px;
    align-items:start; padding:0 !important; max-width:none !important; }
  #site-footer .pf-fgrid, #site-footer .pf-fbottom{ display:contents; }
  #site-footer .pf-fbrand{ grid-column:1 / -1; order:1; margin-bottom:10px; }
  #site-footer .pf-fbrand-logo{ height:46px !important; width:auto; display:block; }
  #site-footer .pf-ftag{ margin:18px 0 6px !important; margin-top:0 !important; font-size:18px !important; font-weight:600; color:#fff; }
  #site-footer .pf-fsub{ margin:0 !important; margin-top:-10px !important; font-size:18px !important; line-height:1.7 !important; }
  #site-footer .pf-fcol{ order:2; padding:18px 0 0 !important; border-top:1px solid rgba(255,255,255,.14); }
  #site-footer .pf-fcol:nth-child(2), #site-footer .pf-fcol:nth-child(3){ margin-top:-10px; }
  #site-footer .pf-fcol h4{ margin:0 0 12px !important; font-size:14.5px !important; font-weight:700; color:#fff; }
  #site-footer .pf-flinks{ gap:9px !important; font-size:14.5px; }
  #site-footer .pf-flink{ font-size:14.5px !important; height:18px; color:rgba(255,255,255,.62); }
  /* the SDG badges take the empty fourth cell, as in the reference */
  #site-footer .pf-fsdg{ order:3; display:flex; flex-direction:column; align-items:flex-start; gap:8px;
    padding:18px 0 0; border-top:1px solid rgba(255,255,255,.14); }
  #site-footer .pf-fbadge{ font-size:12px !important; font-weight:500; height:30px; padding:7px 12px !important;
    border-radius:999px; white-space:nowrap; display:inline-flex; align-items:center; }
  /* the grid already contributes its 18px row gap, so these carry only the
     remainder of the reference's 26px and 18px stand-offs */
  #site-footer .pf-frule{ grid-column:1 / -1; order:4; margin:8px 0 0 !important; height:1px; background:rgba(255,255,255,.12); }
  #site-footer .pf-fcopy{ grid-column:1 / -1; order:5; font-size:12.5px !important; line-height:1.6;
    color:rgba(255,255,255,.5); margin-top:0; }
  /* the reference keeps every link on one line at 18px — the longest one
     (5Q Leadership 企业方案) also sizes its column to 170px */
  #site-footer .pf-flink{ height:auto !important; line-height:18px; white-space:nowrap; }
}