/* =========================================================================
   MPAC — LIGHT THEME
   Loaded AFTER styles.css. Overrides only colour/surface; layout, spacing
   and type come from styles.css so both themes stay in sync.

   TO GO BACK TO DARK: delete the theme-light.css <link> tag from the
   <head> of every .html file. Nothing else needs to change.
   ========================================================================= */

:root{
  --ink:#1c1b17;          /* warm near-black body text */
  --paper:#faf9f5;        /* warm ivory page */
  --paper-2:#f2f0e9;      /* banded sections */
  --card:#ffffff;
  --line:#e3dfd4;         /* warm hairline */
  --muted:#6d6a62;        /* warm grey secondary text */
  --bg-dark:#faf9f5;      /* former dark bands become paper */
  --teal:#07806e;         /* deepened so it passes contrast on white */
  --teal-bright:#02b099;  /* original brand teal, for accents only */
  --shadow:0 1px 2px rgba(28,27,23,.04),0 12px 30px -20px rgba(28,27,23,.18);
}

body{background:var(--paper);color:var(--ink)}
/* the film grain reads as haze on a light ground */
body::after{opacity:.018}

/* ---------- header ---------- */
.site-header{background:rgba(250,249,245,.82);border-bottom:1px solid var(--line)}
.nav-links a{color:var(--ink)}
.nav-links a:hover{background:var(--paper-2);color:var(--ink)}
.menu-btn span,.menu-btn span::before,.menu-btn span::after{background:var(--ink)}
/* swap in the brand-coloured mark; the white one is for dark backgrounds */
/* the logo is /assets/mpac-logo.svg, set in the markup */

/* ---------- buttons ---------- */
.btn-ghost{color:var(--ink);border-color:#cfcabb;background:transparent}
.btn-ghost:hover{background:var(--paper-2)}
/* CTAs: solid black with white text (Cursor / Anthropic / Harvey house style).
   Overrides the blue-teal gradient and its teal hover glow from styles.css. */
.nav-cta,.btn-primary,.btn-grad,.band .btn{
  background:var(--ink);background-image:none;color:#fff!important}
.btn-grad:hover,.btn-primary:hover,.band .btn:hover{
  background:#000;background-image:none;
  box-shadow:0 14px 28px -14px rgba(28,27,23,.55)}
.nav-cta:hover{background:#000}

/* ---------- hero ---------- */
.hero{background:var(--paper);color:var(--ink)}
.hero h1,.hero-h1{color:var(--ink)}
.hero-sub{color:var(--muted)}
.hero::after{opacity:.42}
/* 'Massachusetts' reads as solid black here, not the gradient */
.hero h1 .grad-head{background:none;background-image:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--ink);-webkit-text-fill-color:var(--ink)}
.access-label{color:var(--muted)}
.access-list li{color:var(--ink);border-right-color:var(--line)}
.access{border-left-color:var(--teal)}

/* ---------- sections ---------- */
.section-dark{background:var(--paper);color:var(--ink)}
.alt{background:var(--paper-2)}
.section-dark .section-head h2{color:var(--ink)}
.section-dark .section-head p,.section-head p{color:var(--muted)}
.eyebrow,.section-dark .section-head h2.eyebrow,.section-dark .section-head h1.eyebrow{color:var(--ink)}

/* ---------- prose / lists ---------- */
.prose p{color:var(--ink)}
.prose .lead{color:var(--ink)}
.prose .list-intro{color:var(--ink)}
.bullets li,.section-dark .bullets li{color:var(--ink)}
.section-dark .bullets li b{color:var(--ink)}
.opt-in-note{color:var(--muted)}
.track-subtitle{color:var(--ink)}

/* ---------- what you get (stacked rows) ---------- */
.blist{border-top-color:var(--line)}
.brow{border-bottom-color:var(--line)}
.brow .m h3{color:var(--ink)}
.brow .m p{color:var(--muted)}
.brow .n,.brow .t{color:var(--muted)}
.row-link{color:var(--teal)}

/* ---------- leadership ---------- */
/* The leadership panel stays dark on the light page — a dark-grey ombre.
   Everything inside it therefore keeps light-on-dark colours. */
.wg{background:var(--card);border-color:var(--line)}
.wg-lead{
  background-color:#0d0d0e;
  background-image:
    /* fine grain, soft-light blended so it reads as texture not speckle */
    url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E"),
    /* light catching the top-left corner */
    radial-gradient(130% 95% at 10% -5%,rgba(255,255,255,.07),transparent 58%),
    /* the ombre itself: charcoal down to near-black */
    linear-gradient(155deg,#34343a 0%,#1c1c20 46%,#0a0a0c 100%);
  background-size:170px 170px,auto,auto;
  background-blend-mode:soft-light,normal,normal;
  border-color:#3c3c42;
  box-shadow:0 26px 64px -34px rgba(10,10,12,.7);
}
.wg-lead .wg-name{color:var(--teal-bright)}
.wg-lead .wg-list a,.wg-lead .lead-tier .wg-plain{color:#fff}
.wg-lead .wg-list a{border-bottom-color:rgba(255,255,255,.28)}
.wg-lead .wg-list a:hover,.wg-lead .wg-list a:focus-visible{
  color:var(--teal-bright);border-bottom-color:var(--teal-bright)}
.wg-lead .lead-tier .wg-meta{color:var(--teal-bright)}   /* firm */
.wg-lead .lead-tier .wg-meta .wg-role,
.wg-lead .lead-tier .wg-role-line{color:#c2bfb6}          /* committee roles */
.wg-lead .lead-tier + .lead-tier{border-top-color:rgba(255,255,255,.16)}
.wg-lead .wg-sub{border-top-color:rgba(255,255,255,.16)}
.wg-lead .wg-sub-name{color:#c2bfb6}
.wg-lead .wg-sub .wg-plain{color:#fff}
.wg-lead .wg-sub .wg-meta{color:var(--teal-bright)}

/* ---------- forms ---------- */
/* styles.css lifts these fields to mid-slate for the dark section; on light
   they become white panels with warm borders. Selectors mirror those there
   so specificity matches. */
.form label,.apply-form label{color:var(--muted)}
.form input,.form textarea,
.apply-form input[type=text],
.apply-form input[type=email],
.apply-form input[type=url],
.apply-form input[type=file],
.apply-form textarea,
.apply-form select{
  background-color:var(--card);
  border:1px solid #d5d0c2;
  color:var(--ink);
}
.apply-form input::placeholder,
.apply-form textarea::placeholder{color:#9a958a;opacity:1}
.form input:focus,.form textarea:focus,
.apply-form input[type=text]:focus,
.apply-form input[type=email]:focus,
.apply-form input[type=url]:focus,
.apply-form input[type=file]:focus,
.apply-form textarea:focus,
.apply-form select:focus{
  background-color:var(--card);
  border-color:var(--teal);
  box-shadow:0 0 0 3px rgba(7,128,110,.15);
}
.apply-form select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236d6a62' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 15px center;
}
.apply-form select option{background:#fff;color:var(--ink)}
.apply-form select:invalid{color:#9a958a}
.apply-form input[type=file]::file-selector-button{background:var(--teal);color:#fff}

.apply-form .fs{background:var(--card);border-color:var(--line)}
.apply-form .fs legend{color:var(--ink)}
.choice span{background:var(--card);border-color:#d5d0c2}
.choice span b{color:var(--ink)}
.choice span em{color:var(--muted)}
.choice input:checked + span{background:rgba(7,128,110,.07);border-color:var(--teal);box-shadow:none}
.apply-form .check span{color:var(--ink)}
.field-note,.form-note,.apply-form .field-note,.apply-form .form-note{color:var(--muted)}
.apply-form .form-note{border-top-color:var(--line)}
.apply-form .form-note b{color:var(--ink)}
.form-status.err{color:#b3261e}
.money .mo,.money .yr{color:var(--ink)}

/* ---------- logo wall ---------- */
.logo-wall .lg{background:var(--card);border-color:var(--line);color:var(--ink)}
.logo-wall .lg:hover{background:var(--paper-2);border-color:rgba(7,128,110,.5)}
.logo-wall .lg.needs-logo{border-color:#d8d3c6;background:transparent;color:var(--muted)}

/* ---------- events (customer council) ---------- */
.event-card{background:var(--card);border-color:var(--line)}
.event-date .dy,.event-body h3{color:var(--ink)}
.event-body p{color:var(--muted)}
.event-tag{background:var(--teal);color:#fff}
.cc-provisional{color:var(--muted)}

/* ---------- page hero (subpages) ---------- */
.page-hero{background:var(--paper-2);color:var(--ink)}
.page-hero::before{background:radial-gradient(700px 400px at 90% 0,rgba(7,128,110,.10),transparent 60%)}
.page-hero h1{color:var(--ink)}
.page-hero p{color:var(--muted)}

/* ---------- footer ---------- */
.site-footer{background:var(--paper-2);color:var(--muted);border-top:1px solid var(--line)}
.foot-grid{border-bottom-color:var(--line)}
.foot-grid p{color:#403d35}   /* styles.css sets #9fb1c9 for the dark footer */
.foot-col h4{color:var(--ink)}
.foot-col a{color:var(--muted)}
.foot-col a:hover{color:var(--ink)}
.foot-bottom{color:var(--muted)}
.disclosure + .foot-bottom{border-top-color:var(--line)}

/* ---------- FAQ ---------- */
.faq-item,.faq-group{border-color:var(--line)}
.faq-group{color:var(--muted)}
.faq-item summary{color:var(--ink)}
.faq-a p{color:var(--muted)}

/* ---------- footer newsletter signup ---------- */
.foot-signup-copy h4{color:var(--ink)}
.foot-signup-copy p{color:var(--muted)}
.signup-form input[type=email]{background:var(--card);border-color:#d5d0c2;color:var(--ink)}
.signup-form input[type=email]::placeholder{color:#9a958a}
.signup-form input[type=email]:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(7,128,110,.15)}
.signup-status.ok{color:var(--teal)}
.signup-status.err{color:#b3261e}