/* =====================================================================
   Maw & Paw — site styles
   Loaded after bootstrap.min.css on every page (via header.php).
   Palette is taken from the waterwheel drawing: sepia ink on aged paper,
   with moss green for things you can click and gorse for keyboard focus.
   ===================================================================== */

/* ---------- Fonts (self-hosted: no calls to Google from a private site) */
@font-face { font-family: "Literata"; src: url("../fonts/literata-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Literata"; src: url("../fonts/literata-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Literata"; src: url("../fonts/literata-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Literata"; src: url("../fonts/literata-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("../fonts/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("../fonts/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

/* ---------- Design tokens: change the look here, nowhere else */
:root {
  --mp-paper:      #FBEFDD;  /* page background — matches the drawing's paper */
  --mp-paper-deep: #F3E3CA;  /* bands, table stripes */
  --mp-card:       #FFF9F0;  /* raised surfaces */
  --mp-rule:       #E2CFB3;  /* lines and borders */
  --mp-ink:        #33251A;  /* body text */
  --mp-sepia:      #6B4E35;  /* secondary text, dates, captions — the drawing's ink */
  --mp-moss:       #3E5A44;  /* links, buttons, active nav */
  --mp-moss-deep:  #2C4232;  /* hover / pressed */
  --mp-gorse:      #C9962E;  /* keyboard focus ring */
  --mp-rust:       #9A4A2B;  /* errors and warnings only */

  --mp-font-ui:    "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mp-font-read:  "Literata", Georgia, "Times New Roman", serif;

  --mp-radius-sm:  4px;      /* inputs, buttons */
  --mp-radius:     8px;      /* panels */
  --mp-measure:    38em;     /* comfortable reading width for stories */

  /* Hand Bootstrap our values */
  --bs-body-bg: var(--mp-paper);
  --bs-body-color: var(--mp-ink);
  --bs-body-font-family: var(--mp-font-ui);
  --bs-body-line-height: 1.6;
  --bs-border-color: var(--mp-rule);
  --bs-secondary-color: var(--mp-sepia);
  --bs-link-color: var(--mp-moss);
  --bs-link-color-rgb: 62, 90, 68;
  --bs-link-hover-color: var(--mp-moss-deep);
  --bs-link-hover-color-rgb: 44, 66, 50;
  --bs-border-radius: var(--mp-radius-sm);
  --bs-focus-ring-color: rgba(201, 150, 46, .55);
}

/* ---------- Base: 18px so older eyes don't need to zoom */
html { font-size: 112.5%; }
body {
  background: var(--mp-paper);
  color: var(--mp-ink);
  font-family: var(--mp-font-ui);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1 0 auto; }

h1, h2, h3, h4 {
  font-family: var(--mp-font-read);
  font-weight: 600;
  color: var(--mp-ink);
  line-height: 1.2;
  letter-spacing: -0.005em;
}
h1 { font-size: 2.25rem; margin-bottom: .5em; }
h2 { font-size: 1.6rem;  margin: 1.6em 0 .5em; }
h3 { font-size: 1.25rem; margin: 1.2em 0 .4em; }
h1:first-child, h2:first-child, h3:first-child { margin-top: 0; }

a { text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

/* One focus style everywhere: thick gorse ring, never removed */
:focus-visible,
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible {
  outline: 3px solid var(--mp-gorse);
  outline-offset: 2px;
  box-shadow: none;
}

.text-sepia { color: var(--mp-sepia) !important; }
.mp-small   { font-size: .875rem; }

/* ---------- Skip link */
.mp-skip {
  position: absolute; left: 1rem; top: -4rem; z-index: 1000;
  background: var(--mp-moss); color: #fff; padding: .6rem 1rem; border-radius: var(--mp-radius-sm);
}
.mp-skip:focus { top: 1rem; color: #fff; }

/* ---------- Layout */
.mp-container {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding-left: 1rem;
  padding-right: 1rem;
}
@media (min-width: 768px) {
  .mp-container { padding-left: 1.5rem; padding-right: 1.5rem; }
}
.mp-page { padding-top: 2rem; padding-bottom: 3rem; }

/* ---------- Header */
.mp-header {
  background: var(--mp-card);
  border-bottom: 1px solid var(--mp-rule);
}
.mp-header__top {
  display: flex;
  align-items: center;
  gap: 1rem 1.5rem;
  flex-wrap: wrap;
  padding-top: .9rem;
  padding-bottom: .9rem;
}
.mp-brand {
  font-family: var(--mp-font-read);
  font-weight: 600;
  font-size: 1.6rem;
  color: var(--mp-ink);
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
}
.mp-brand:hover { color: var(--mp-ink); text-decoration: none; }
.mp-brand__amp { font-style: italic; font-weight: 400; color: var(--mp-sepia); padding: 0 .05em; }

.mp-search { flex: 1 1 18rem; display: flex; max-width: 34rem; }
.mp-search .form-control {
  border-color: var(--mp-rule);
  background: #fff;
  border-radius: var(--mp-radius-sm) 0 0 var(--mp-radius-sm);
  min-height: 2.75rem;
}
.mp-search .btn { border-radius: 0 var(--mp-radius-sm) var(--mp-radius-sm) 0; }

.mp-account { margin-left: auto; display: flex; align-items: center; gap: .75rem; white-space: nowrap; }
.mp-account__name { color: var(--mp-sepia); }

/* Navigation: one row, scrolls sideways on a phone rather than hiding behind a menu button */
.mp-nav { border-top: 1px solid var(--mp-rule); }
.mp-nav ul {
  display: flex; gap: .25rem;
  list-style: none; margin: 0; padding: 0;
  overflow-x: auto; scrollbar-width: thin;
}
.mp-nav a {
  display: block;
  padding: .7rem .8rem .6rem;
  color: var(--mp-ink);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
}
@media (max-width: 767.98px) {
  .mp-nav ul { flex-wrap: wrap; overflow: visible; }   /* phones: wrap so every section is visible */
  .mp-nav a { padding: .55rem .6rem .45rem; }
}
.mp-nav a:hover { color: var(--mp-moss); border-bottom-color: var(--mp-rule); }
.mp-nav a[aria-current="page"] { color: var(--mp-moss); border-bottom-color: var(--mp-moss); font-weight: 700; }

/* ---------- Buttons: 44px minimum touch target */
.btn { min-height: 2.75rem; padding-left: 1.1rem; padding-right: 1.1rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; }
.btn-primary {
  --bs-btn-bg: var(--mp-moss);            --bs-btn-border-color: var(--mp-moss);
  --bs-btn-hover-bg: var(--mp-moss-deep); --bs-btn-hover-border-color: var(--mp-moss-deep);
  --bs-btn-active-bg: var(--mp-moss-deep);--bs-btn-active-border-color: var(--mp-moss-deep);
  --bs-btn-disabled-bg: var(--mp-moss);   --bs-btn-disabled-border-color: var(--mp-moss);
}
.btn-outline-primary {
  --bs-btn-color: var(--mp-moss);         --bs-btn-border-color: var(--mp-moss);
  --bs-btn-hover-bg: var(--mp-moss);      --bs-btn-hover-border-color: var(--mp-moss);
  --bs-btn-active-bg: var(--mp-moss-deep);--bs-btn-active-border-color: var(--mp-moss-deep);
}
.btn-quiet {
  --bs-btn-color: var(--mp-moss); --bs-btn-hover-color: var(--mp-moss-deep);
  --bs-btn-hover-bg: var(--mp-paper-deep); font-weight: 400;
}

/* ---------- Forms */
.form-label { font-weight: 700; margin-bottom: .3rem; }
.form-text  { color: var(--mp-sepia); }
.form-control, .form-select { background-color: #fff; border-color: #CDB89A; min-height: 2.75rem; }
.form-control:focus, .form-select:focus { border-color: var(--mp-moss); box-shadow: none; }

/* ---------- Messages */
.mp-flash {
  border-left: 4px solid var(--mp-moss);
  background: var(--mp-card);
  padding: .8rem 1rem;
  margin-bottom: 1.25rem;
  border-radius: 0 var(--mp-radius-sm) var(--mp-radius-sm) 0;
}
.mp-flash--error   { border-left-color: var(--mp-rust); }
.mp-flash--warning { border-left-color: var(--mp-gorse); }

/* ---------- Panels: the one container style, used sparingly */
.mp-panel {
  background: var(--mp-card);
  border: 1px solid var(--mp-rule);
  border-radius: var(--mp-radius);
  padding: 1.25rem 1.35rem;
}

/* ---------- Empty state: says what's missing and what to do */
.mp-empty {
  border: 1px dashed #CDB89A;
  border-radius: var(--mp-radius);
  padding: 1.5rem;
  color: var(--mp-sepia);
  max-width: var(--mp-measure);
}
.mp-empty p:last-child { margin-bottom: 0; }

/* ---------- People: always shown with dates and place so namesakes can be told apart */
.mp-person { display: block; text-decoration: none; color: inherit; }
.mp-person__name { font-family: var(--mp-font-read); font-weight: 600; font-size: 1.15rem; color: var(--mp-ink); }
.mp-person__meta { color: var(--mp-sepia); font-size: .9rem; }
a.mp-person:hover .mp-person__name { color: var(--mp-moss); text-decoration: underline; text-underline-offset: .18em; }

/* A person's own page: the name is the headline */
.mp-person-title { font-family: var(--mp-font-read); line-height: 1.1; color: var(--mp-ink); font-size: clamp(2.2rem, 5vw, 3.4rem); font-weight: 600; margin-bottom: .15em; }
.mp-person-title + .mp-person__meta { font-size: 1.05rem; }

/* ---------- Photographs: mounted like prints in an album */
.mp-mount {
  background: #fff;
  padding: .6rem .6rem 0;
  border: 1px solid var(--mp-rule);
  box-shadow: 0 1px 0 var(--mp-rule), 0 6px 14px -10px rgba(51, 37, 26, .45);
  margin: 0;
}
.mp-mount img { display: block; width: 100%; height: auto; }
.mp-mount figcaption { padding: .5rem .1rem .6rem; font-size: .875rem; color: var(--mp-sepia); }

/* ---------- Reading: stories and transcriptions */
.mp-prose {
  font-family: var(--mp-font-read);
  font-size: 1.05rem;
  line-height: 1.75;
  max-width: var(--mp-measure);
}
.mp-prose blockquote {
  border-left: 3px solid var(--mp-rule);
  padding-left: 1rem;
  color: var(--mp-sepia);
  font-style: italic;
}

/* ---------- Home page */
.mp-hero { margin: 0; background: var(--mp-paper); }
.mp-hero img {
  display: block;
  width: 100%;
  max-width: min(1400px, 100vh);  /* keeps the greeting and search in view on a laptop */
  height: auto;
  margin: 0 auto;
  /* fade all four edges into the page so the drawing has no visible border */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent),
                      linear-gradient(to bottom, transparent, #000 7%, #000 90%, transparent);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent),
                      linear-gradient(to bottom, transparent, #000 7%, #000 90%, transparent);
          mask-composite: intersect;
}
.mp-welcome { text-align: center; padding-top: .5rem; padding-bottom: 2.5rem; }
.mp-welcome h1 { font-size: clamp(2rem, 4.5vw, 3rem); margin-bottom: .3em; }
.mp-welcome__lede { color: var(--mp-sepia); font-size: 1.1rem; margin: 0 auto 1.5rem; max-width: 34em; }
.mp-welcome .mp-search { margin: 0 auto; max-width: 36rem; }
.mp-welcome .mp-search .form-control { font-size: 1.1rem; min-height: 3.25rem; }
.mp-welcome .mp-search .btn { min-height: 3.25rem; }

.mp-ways { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.mp-way { display: block; padding: 1.1rem 1.25rem; background: var(--mp-card); border: 1px solid var(--mp-rule); border-radius: var(--mp-radius); text-decoration: none; color: var(--mp-ink); }
.mp-way:hover { border-color: var(--mp-moss); color: var(--mp-ink); }
.mp-way__title { font-family: var(--mp-font-read); font-weight: 600; font-size: 1.2rem; color: var(--mp-moss); display: block; margin-bottom: .2rem; }
.mp-way__text  { color: var(--mp-sepia); font-size: .95rem; }

/* ---------- Footer */
.mp-footer {
  border-top: 1px solid var(--mp-rule);
  background: var(--mp-paper-deep);
  color: var(--mp-sepia);
  font-size: .9rem;
  padding: 1.5rem 0 2rem;
}
.mp-footer__inner { display: flex; flex-wrap: wrap; gap: .75rem 2rem; justify-content: space-between; align-items: baseline; }
.mp-footer p { margin: 0; max-width: 40em; }
.mp-footer ul { list-style: none; display: flex; gap: 1.25rem; margin: 0; padding: 0; }

/* ---------- Style guide swatches (styleguide.php only) */
.mp-swatches { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); }
.mp-swatch { border: 1px solid var(--mp-rule); border-radius: var(--mp-radius-sm); overflow: hidden; background: var(--mp-card); font-size: .85rem; }
.mp-swatch span { display: block; height: 3.5rem; }
.mp-swatch div { padding: .4rem .6rem; }
.mp-swatch--paper span      { background: var(--mp-paper); }
.mp-swatch--paper-deep span { background: var(--mp-paper-deep); }
.mp-swatch--card span       { background: var(--mp-card); }
.mp-swatch--rule span       { background: var(--mp-rule); }
.mp-swatch--ink span        { background: var(--mp-ink); }
.mp-swatch--sepia span      { background: var(--mp-sepia); }
.mp-swatch--moss span       { background: var(--mp-moss); }
.mp-swatch--gorse span      { background: var(--mp-gorse); }
.mp-swatch--rust span       { background: var(--mp-rust); }

/* ---------- Respect people who've asked for less motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ---------- Print: stories and person pages print cleanly */
@media print {
  .mp-header, .mp-footer, .mp-skip, .mp-search, .btn { display: none !important; }
  body { background: #fff; }
}