/* ============================================================
   MDW PLATFORM - resources/css/styles.css
   ------------------------------------------------------------
   THE THEMING CONTRACT + structural baseline only. No campaign
   visual design lives here yet - that is built per project on
   top of these tokens. Rebrand a site by editing :root below.
   ============================================================ */

/* ---- 1. Design tokens (edit per campaign) ---- */
:root {
  /* Brand palette - neutral placeholders; replace per project.
     Keep an "accessible" variant for text/buttons (>= 4.5:1 on its bg). */
  --color-primary:            #1f6feb;   /* decorative / fills */
  --color-primary-accessible: #1a5fd0;   /* text + buttons on light */
  --a11y-accent: #1b232b;                /* accessibility menu theme (title bar, buttons, scrollbar, active tiles) - defaults to the MDW logo black; override per site to brand it */
  --color-secondary:          #0b3d5c;
  --color-accent:             #e8852b;
  --color-dark:               #11181f;
  --color-light:              #f6f8fa;
  --color-bg:                 #ffffff;
  --color-text:               #1b232b;
  --color-muted:              #5b6670;
  --color-border:             #e2e6ea;

  /* Typography - swap families per project; load the webfont in header.php */
  --font-heading: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-base: 16px;
  --lh-base: 1.6;

  /* Layout */
  --container-max: 1140px;
  --container-pad: 1.25rem;
  --radius: 6px;
  --page-frame: 0px;            /* set e.g. 10px for a colored body frame */
  --page-frame-color: transparent;

  /* Focus + motion */
  --focus-ring: 3px solid var(--color-accent);
}


/* ---- 2. Minimal reset ---- */
*, *::before, *::after { box-sizing: border-box; }

html { font-size: var(--fs-base); -webkit-text-size-adjust: 100%; color-scheme: light only; }

/* Browser "force dark" (esp. Samsung Internet): ship a dark-preference theme so the
   browser renders our (light) styles instead of algorithmically inverting the page. */
@media (prefers-color-scheme: dark) {
  html { color-scheme: only light; }

  input, textarea, select { background-color: #fff; }
}

body {
  margin: 0;
  font-family: var(--font-body);
  line-height: var(--lh-base);
  color: var(--color-text);
  background: var(--color-bg);
  border: var(--page-frame) solid var(--page-frame-color);
}

h1, h2, h3, h4 { font-family: var(--font-heading); line-height: 1.2; }

img, video, svg { max-width: 100%; height: auto; display: block; }

a { color: var(--color-primary-accessible); }

:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }


/* ---- 3. Structural utilities (not visual design) ---- */
.container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-pad); }


@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}


/* ---- Lengua (legacy header switcher) ----
   The header switcher is no longer rendered — global/lengua-switcher.php is not
   included anywhere. These rules are kept only because campaign.css still
   carries .lengua__* overrides; both go when that file is next tidied. */
.lengua__list { list-style: none; display: flex; gap: .4rem; margin: 0; padding: 0; }

.lengua__link { text-decoration: none; padding: .25rem .5rem; border-radius: 4px; color: var(--color-text); }

.lengua__link[aria-current="true"] { font-weight: 700; text-decoration: underline; }

.lengua__link:hover { background: var(--color-light); }
.lengua-fab__toggle { background: var(--indigo, #241C54); }
.lengua-fab__toggle:hover { background: var(--violet, #4A2A7A); }
.lengua-fab__toggle:focus-visible { outline: 3px solid var(--orange, #F26623); }
.lengua-fab__pop { background: var(--indigo, #241C54); }
.lengua-fab__opt:hover, .lengua-fab__opt:focus-visible { background: var(--orange, #F26623); }


/* ============================================================
   Component + page styles are added per project BELOW this line.
   ============================================================ */

/* Shared menu theme; interaction and layout are core-owned. */
:root { --mm-bg: var(--indigo-900); --mm-fg: #fff; --mm-accent: var(--teal); --mm-font: var(--font-heading); }