/*
Theme Name: Last Aid International
Theme URI: https://last-aid.org
Author: Mathias Bader
Description: Theme for the Last Aid International website (last-aid.org). Presents the Last Aid initiative and its courses, the participating countries (rendered by the last-aid-countries plugin), and the international working group.
Version: 0.1.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: lastaid-intl
*/

/* ---- Provisional design tokens (placeholder until branding lands) ---- */
:root {
  --lai-ink: #1f2a2e;
  --lai-muted: #5b6b70;
  --lai-accent: #2e7d6b;      /* calm teal-green — provisional */
  --lai-accent-dark: #245a4e;
  --lai-bg: #ffffff;
  --lai-soft: #f4f6f5;
  --lai-border: #e2e8e6;
  --lai-logo: #aa3550;        /* Last Aid logo crimson (sampled from the mark) */
  --lai-logo-flame: #ce5e53;  /* logo flame coral */
  --lai-maxw: 1080px;
  /* The header bar gets more room than the reading column: it has to hold the brand and six menu
     items side by side, while body text stays comfortable to read at 1080. */
  --lai-headw: 1240px;
  --lai-radius: 10px;
  /* Warm serif for display headings — adds humanity vs. the system sans (provisional branding). */
  --lai-serif: Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  color: var(--lai-ink);
  background: var(--lai-bg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.6;
  font-size: 18px;
  /* Sticky footer: footer sits at the bottom of the viewport on short pages,
     and scrolls in normally on long ones (no absolute/fixed positioning). */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
a { color: var(--lai-accent-dark); }
a:hover { color: var(--lai-accent); }
img { max-width: 100%; height: auto; }

.lai-container { max-width: var(--lai-maxw); margin: 0 auto; padding: 56px 20px; }

/* ---- Header ---- */
.lai-header { border-bottom: 1px solid var(--lai-border); background: #fff; box-shadow: 0 2px 10px rgba(20,28,30,.07); position: relative; z-index: 5; }
/* Three rules keep this header from breaking the menu across two lines, which is what it used to do
   as soon as a sixth item was added:
     - the bar is allowed to be wider than the reading column (--lai-headw),
     - the menu never shrinks (.lai-nav below), so it either sits beside the brand or moves to a row
       of its own; letting both shrink, the flex default, broke the brand name AND the menu at widths
       where one line apiece would have fitted,
     - just above the width where that would happen, the brand name breaks after "Last Aid" instead
       (the 1100px query below), which frees the ~170px the menu needs. */
.lai-header__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; padding: 16px 20px; max-width: var(--lai-headw); margin: 0 auto; }
.lai-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--lai-ink); }
.lai-brand img { flex: none; height: 90px; width: auto; display: block; margin: -11px 0; } /* bigger logo; negative margin keeps header height unchanged */
.lai-brand__name { font-weight: 700; font-size: 1.1rem; letter-spacing: .2px; }
/* Below the width where brand and menu fit side by side on one line each, break the name after
   "Last Aid" on purpose. That frees roughly 170px, which is what keeps the six menu items on a
   single line — and a two-line brand reads far better than a two-line menu. */
@media (max-width: 1100px) {
  .lai-brand__name { max-width: min-content; }
}
/* The logo is pulled out of the flow by 11px top and bottom so the bar stays short. That only works
   while the menu sits beside it; once the menu wraps to its own row, the overhang reaches down into
   it and prints the logo across the first menu item. */
@media (max-width: 1000px) {
  .lai-brand img { margin: 0; }
}
.lai-nav { flex: 0 0 auto; max-width: 100%; }
.lai-nav ul { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 0; }
.lai-nav a { text-decoration: none; white-space: nowrap; color: var(--lai-ink); font-weight: 600; font-size: 1rem; padding: 7px 12px; border-radius: 4px; transition: background-color .15s ease, color .15s ease; }
.lai-nav a:hover { color: #99304a; background: rgba(170,53,80,.14); }
/* Active tab: solid highlight in the Last Aid logo colour (#aa3550). */
.lai-nav .current-menu-item > a,
.lai-nav .current_page_item > a { color: #fff; background: var(--lai-logo); font-weight: 700; }
.lai-nav .current-menu-item > a:hover,
.lai-nav .current_page_item > a:hover { color: #fff; background: var(--lai-logo); }

/* ---- Hero (front page) ---- */
/* The hero carries the movement's photo mosaic, so it is a two-column band on a light ground rather
   than white text over a photograph: the mosaic only reads as the Last Aid mark when the whole frame
   is visible, and anything laid on top of it hides faces. */
.lai-hero {
  border-bottom: 1px solid var(--lai-border);
  background: linear-gradient(180deg, #fbfcfb 0%, var(--lai-soft) 100%);
}
.lai-hero__inner {
  max-width: var(--lai-maxw);
  margin: 0 auto;
  padding: 48px 20px 52px;
  display: grid;
  grid-template-columns: 1fr minmax(0, 520px);
  align-items: center;
  gap: 48px;
}
.lai-hero__text { min-width: 0; }
.lai-hero h1 {
  font-size: 2.6rem;
  line-height: 1.15;
  margin: 0 0 14px;
  color: var(--lai-ink);
}
.lai-hero p {
  color: var(--lai-muted);
  font-size: 1.25rem;
  line-height: 1.5;
  margin: 0;
}
/* The film and the still it ends on are stacked in the same frame. The frame carries the card look
   (white, hairline, shadow) so both layers share it exactly and the swap is invisible. */
.lai-hero__figure {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--lai-border);
  border-radius: var(--lai-radius);
  background: #fff;
  box-shadow: 0 1px 0 rgba(20,28,30,.04), 0 8px 24px rgba(20,28,30,.10);
}
.lai-hero__film,
.lai-hero__still {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  /* The film is 16:9 and its finished mosaic occupies the middle 4:3, so cover lands the mark
     exactly on the frame's edges. */
  object-fit: cover;
}
.lai-hero__film { cursor: pointer; }
/* The still waits underneath at zero and takes over when the film ends. */
.lai-hero__still { opacity: 0; transition: opacity .45s ease; }
.lai-hero__figure.is-done .lai-hero__still { opacity: 1; }
.lai-hero__figure.is-done .lai-hero__film { cursor: default; }
@media (prefers-reduced-motion: reduce) {
  .lai-hero__still { transition: none; }
}
@media (max-width: 860px) {
  /* Stacked: the title leads, the mosaic follows at a size where the faces are still legible. */
  .lai-hero__inner { grid-template-columns: 1fr; gap: 28px; padding: 36px 20px 40px; text-align: center; }
  .lai-hero h1 { font-size: 2.1rem; }
  .lai-hero p { font-size: 1.12rem; }
  /* justify-self, not "margin: 0 auto": auto inline margins make a grid item fit-content wide, and
     this one's only children are absolutely positioned, so it collapsed to nothing and took the
     aspect-ratio height with it. */
  .lai-hero__figure { width: 100%; max-width: 520px; justify-self: center; }
}

/* ---- Content ---- */
.lai-main { padding: 0; flex: 1 0 auto; } /* full-bleed hero flush under header; grow to push footer down */
.lai-main h1, .lai-main h2 { line-height: 1.25; }
.entry-title { font-size: 2rem; margin: 0 0 24px; }
/* Cohesive serif for display headings across hero, page titles and country cards/detail. */
.lai-hero h1, .entry-title, .lai-country-card h3, .lai-country-detail h1 { font-family: var(--lai-serif); }
.entry-content { max-width: 100%; }
.entry-content h2 { margin-top: 2em; }
.entry-content > h2:first-child { margin-top: 0; }
.entry-content img { border-radius: var(--lai-radius); }

/* ---- Country cards (rendered by the Last Aid Countries plugin) ---- */
.lai-countries { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin: 28px 0; padding: 0; list-style: none; }
@media (max-width: 900px) { .lai-countries { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .lai-countries { grid-template-columns: 1fr; } }
.lai-country-card { position: relative; overflow: hidden; border: 1px solid #b7c6c0; border-radius: var(--lai-radius); background: #eef2f0; box-shadow: 0 1px 0 rgba(20,28,30,.04), 0 5px 16px rgba(20,28,30,.10); transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease; }
/* On hover OR keyboard focus, drop the clip and raise the tile so the full silhouette can spill out and
   float above its neighbours. The ring uses the tile's own colour (--tile-rgb) so it feels bespoke. */
.lai-country-card:hover,
.lai-country-card:focus-within { box-shadow: 0 0 0 2px rgb(var(--tile-rgb, 46, 125, 107)), 0 12px 26px rgba(20,28,30,.14); transform: translateY(-3px); overflow: visible; z-index: 5; }
.lai-country-card__link:focus-visible { outline: none; } /* the tile ring above is the focus indicator */
/* Country silhouette watermark — zoomed to overlap, clipped by overflow:hidden, tinted per tile. */
.lai-country-card.has-shape::before {
  content: "";
  /* Position the silhouette with the BOX (left/top/width), not mask-position/mask-size: the box model
     renders identically in every browser, whereas Chromium mishandled the var()-based mask-position/
     size and Edge dropped the position (rendering the shape at the tile's left edge). The pseudo-
     element is a square sized to --tile-w and the SVG simply fills it (mask: center / contain). Same
     x/y/scale values as before — only the mechanism changed. It overflows the tile (clipped by
     overflow:hidden), so the hover lift never reveals a gap. */
  position: absolute; left: var(--tile-x, 0px); top: var(--tile-y, 0px); width: var(--tile-w, 138%); aspect-ratio: 1 / 1; z-index: 0;
  /* Translucent watermark at rest; opaque on hover (see below). The plugin emits just the RGB so the
     same colour can be faint here and solid on hover. */
  background-color: rgba(var(--tile-rgb, 46, 125, 107), .26);
  /* Never hit-test the silhouette: the spilled-out part must not keep the tile in :hover — the hover is
     tracked by the tile rectangle alone, so it ends the instant the cursor leaves the tile. */
  pointer-events: none;
  -webkit-mask: var(--tile-svg) center / contain no-repeat;
          mask: var(--tile-svg) center / contain no-repeat;
  transition: transform .3s cubic-bezier(.22,.61,.36,1), background-color .2s ease;
  transform-origin: center;
}
/* On hover the tile stops clipping (see .lai-country-card:hover), so the FULL country shows at its set
   size: lifted a touch, sitting ABOVE the tile border, name and logo (z-index), fully OPAQUE so nothing
   shows through. */
.lai-country-card.has-shape:hover::before,
.lai-country-card.has-shape:focus-within::before {
  transform: translateY(-8px) scale(1.05);
  background-color: rgb(var(--tile-rgb, 46, 125, 107));
  z-index: 3;
}
/* The drop-shadow is its own layer: the SVG used as a background-image (its black fill IS the shape), so
   a blur can soften it — a filter:drop-shadow on the country itself is clipped away by its own mask.
   It sits just behind the opaque country (z-index 2), offset down and blurred; hidden until hover. */
.lai-country-card.has-shape::after {
  content: "";
  position: absolute; left: var(--tile-x, 0px); top: var(--tile-y, 0px); width: var(--tile-w, 138%); aspect-ratio: 1 / 1;
  z-index: 0; opacity: 0; pointer-events: none;
  background: var(--tile-svg) center / contain no-repeat;
  transition: transform .3s cubic-bezier(.22,.61,.36,1), opacity .2s ease;
  transform-origin: center;
}
.lai-country-card.has-shape:hover::after,
.lai-country-card.has-shape:focus-within::after {
  opacity: .4; z-index: 2;
  transform: translateY(6px) scale(1.05);
  filter: blur(7px);
}
/* Honour reduced-motion: still show the full country on hover, just without the lift animation. */
@media (prefers-reduced-motion: reduce) {
  .lai-country-card, .lai-country-card.has-shape::before, .lai-country-card.has-shape::after { transition: none; }
}
/* Touch devices can't hover, and tapping a tile just navigates: keep them in the clean resting watermark
   so a tap's transient focus never triggers the spill/opaque reveal. */
@media (hover: none) {
  .lai-country-card:focus-within { overflow: hidden; transform: none; z-index: auto;
    box-shadow: 0 1px 0 rgba(20,28,30,.04), 0 5px 16px rgba(20,28,30,.10); }
  .lai-country-card.has-shape:focus-within::before { transform: none; z-index: 0;
    background-color: rgba(var(--tile-rgb, 46, 125, 107), .26); }
  .lai-country-card.has-shape:focus-within::after { opacity: 0; }
}
.lai-country-card__link { position: relative; z-index: 1; display: flex; flex-direction: column; min-height: 212px; padding: 20px; text-decoration: none; color: var(--lai-ink); }
/* Fixed logo height so every tile carries equal visual weight regardless of the logo's aspect ratio. */
.entry-content .lai-country-card__logo { height: 88px; width: auto; max-width: 96%; margin-top: auto; align-self: flex-start; object-fit: contain; object-position: left center; border-radius: 0; }
.lai-country-card h3 { margin: 0; font-size: 1.3rem; font-weight: 600; letter-spacing: .2px; }
.lai-country-card p { color: var(--lai-muted); font-size: .96rem; margin: 0; }
/* ---- "Also at work in" — countries in the network with nothing published yet ----
   Deliberately quiet and unlinked: plain names in a wrapping row, each with a small silhouette of its
   own, so the grid above stays the reward for a team that has filled in their page. */
.lai-countries-soon { margin: 40px 0 8px; padding-top: 26px; border-top: 1px solid #dde5e2; }
/* Nothing above it to separate from: no rule, no heading (see lac_render_overview). */
.lai-countries-soon--only { margin-top: 8px; padding-top: 0; border-top: 0; }
.entry-content .lai-countries-soon h2 { margin: 0 0 18px; font-size: 1.08rem; font-weight: 600; letter-spacing: .1px; }
.lai-countries-soon ul { display: flex; flex-wrap: wrap; row-gap: 16px; column-gap: 32px; margin: 0; padding: 0; list-style: none; }
.lai-countries-soon li { display: inline-flex; align-items: center; gap: 9px; color: #4c5b5f; font-size: .95rem; line-height: 1.2; }
/* The silhouette is a mask over currentColor, so it always matches the name next to it. */
.lai-countries-soon li.has-shape::before { content: ""; flex: none; width: 28px; height: 28px; opacity: .55;
  background-color: currentColor; -webkit-mask: var(--chip-svg) center / contain no-repeat;
          mask: var(--chip-svg) center / contain no-repeat; }
@media (max-width: 520px) { .lai-countries-soon ul { column-gap: 22px; }
  .lai-countries-soon li { font-size: .9rem; }
  .lai-countries-soon li.has-shape::before { width: 24px; height: 24px; } }

.lai-badge-preview { display: inline-block; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: #8a5a00; background: #fff3d6; border-radius: 999px; padding: 2px 8px; margin-left: 8px; }

/* ---- Country detail ---- */
.lai-country-detail { position: relative; --lai-country: 46, 125, 107; } /* overridden per country inline */
/* Country-coloured rule under the name ties the page to the tile that was clicked. */
.lai-country-detail h1 { margin: 0 0 20px; padding-bottom: 12px; border-bottom: 3px solid rgb(var(--lai-country, 46, 125, 107)); }
/* On a single-country view, drop the generic "Countries" page title so the country leads (logo + name). */
body.lai-country-single .entry-title { display: none; }
.lai-country-detail__media { float: right; width: 220px; max-width: 42%; margin: -12px 0 16px 28px; text-align: center; }
/* Logo-less countries: the column is emitted after the <h1> so the float starts below the rule.
   Drop the negative top margin that would pull the silhouette back up over it. */
.lai-country-detail__media--below { margin-top: 0; }
.lai-country-detail__media img { display: block; width: auto; max-width: 100%; height: auto; margin: 0 auto 12px; }
.lai-country-detail img.lai-country-detail__logo { max-height: 110px; border-radius: 0; }
.lai-country-detail__svg { display: block; width: 100%; height: 200px; margin: 0 auto 12px;
  -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; }
.lai-intro p { margin: 0 0 1em; }
.lai-empty { color: #555; background: #f0f0f0; font-style: italic; text-align: center; padding: 44px 24px; border-radius: 6px; margin: 16px 0; clear: both; }
.lai-country-website { clear: both; margin-top: 28px; }
.lai-nav-arrow { position: fixed; top: 50%; transform: translateY(-50%); z-index: 50; display: flex;
  align-items: center; justify-content: center; width: 52px; height: 66px; font-size: 2.4rem; line-height: 1;
  color: #fff; background: var(--lai-logo); border-radius: 8px; text-decoration: none; opacity: .5;
  transition: opacity .15s ease; }
.lai-nav-arrow:hover { opacity: 1; color: #fff; }
.lai-nav-prev { left: 14px; }
.lai-nav-next { right: 14px; }
@media (max-width: 900px) { .lai-nav-arrow { width: 38px; height: 52px; font-size: 1.9rem; } }
@media (max-width: 760px) {
  .lai-country-detail__media { float: none; width: auto; max-width: none; margin: 12px 0; }
}
.lai-country-detail .lai-team-photo { margin: 24px 0; border-radius: var(--lai-radius); }
.lai-contact, .lai-links { margin: 16px 0; }
.lai-links a { display: inline-block; margin-right: 14px; color: rgb(var(--lai-country, 46, 125, 107)); font-weight: 600; }
.lai-back { display: inline-block; margin-bottom: 18px; font-weight: 600; text-decoration: none; color: rgb(var(--lai-country, 46, 125, 107)); }
.lai-back:hover { text-decoration: underline; color: rgb(var(--lai-country, 46, 125, 107)); }
.lai-country-website a { color: rgb(var(--lai-country, 46, 125, 107)); font-weight: 600; }

/* ---- Landing page (front page content) ---- */
/* Two-column media/text rows, mirroring the media-text layout of letztehilfe.info. */
.lai-split { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; margin: 28px 0; }
.lai-split figure { margin: 0; }
.lai-split h3 { margin-top: 0; }
@media (max-width: 760px) {
  .lai-split { grid-template-columns: 1fr; }
  /* When stacked, media always follows its text. */
  .lai-split--media-first figure { order: 2; }
}
/* Centered editorial pull-quote: decorative mark + serif italic, no box or border. */
.entry-content blockquote.lai-quote {
  margin: 52px auto; padding: 0 24px; max-width: 680px; text-align: center;
}
.lai-quote::before {
  content: "\201C";
  display: block; font-family: var(--lai-serif); font-size: 5rem; line-height: .55;
  color: var(--lai-logo); margin-bottom: 18px;
}
.lai-quote p {
  font-family: var(--lai-serif); font-style: italic; font-size: 1.45rem; line-height: 1.5;
  margin: 0 0 20px; color: var(--lai-ink);
}
.lai-quote footer { font-style: normal; }
.lai-quote__name {
  display: block; font-size: .85rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .14em; color: var(--lai-ink);
}
.lai-quote__role { display: block; margin-top: 2px; color: var(--lai-muted); font-size: .9rem; }
.lai-video { margin: 24px 0; }
.lai-video video { width: 100%; height: auto; border-radius: var(--lai-radius); background: #000; }
/* Dedicated /video page (QR-code target). The film is 720px wide, so cap it there
   rather than letting it stretch to the 1080px container and upscale into mush. */
.lai-video-page .lai-video { max-width: 720px; margin-left: auto; margin-right: auto; }
/* First Aid / Last Aid definition cards. */
.lai-defs { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin: 24px 0; }
@media (max-width: 640px) { .lai-defs { grid-template-columns: 1fr; } }
.lai-def { background: var(--lai-soft); border: 1px solid var(--lai-border); border-radius: var(--lai-radius); padding: 18px 22px; }
.lai-def h3 { margin: 0 0 8px; color: var(--lai-accent-dark); }
.lai-def p { margin: 0; }
.entry-content img.lai-book { float: left; width: 150px; margin: 6px 26px 14px 0; }
.lai-chain { margin: 28px 0; text-align: center; clear: both; }
.lai-chain figcaption, .lai-split figcaption { color: var(--lai-muted); font-size: .9rem; margin-top: 8px; text-align: center; }
.lai-sessions { margin: 16px 0 28px; padding-left: 26px; }
.lai-sessions li { font-weight: 600; padding: 3px 0; }
.lai-partners { display: flex; flex-wrap: wrap; align-items: center; gap: 32px 48px; margin: 24px 0; }
.entry-content .lai-partners img { height: 84px; width: auto; border-radius: 0; }

/* ---- Footer ---- */
.lai-footer { background: #1c2629; color: #fff; }
.lai-footer a { color: rgba(255,255,255,.82); text-decoration: none; }
.lai-footer a:hover { color: #fff; text-decoration: underline; }
.lai-footer__inner {
  max-width: var(--lai-maxw);
  margin: 0 auto;
  padding: 44px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px 40px;
}
.lai-footer__brand { display: flex; align-items: center; gap: 14px; }
.lai-footer__icon { height: 48px; width: auto; display: block; }
.lai-footer__name { font-weight: 700; font-size: 1.1rem; letter-spacing: .2px; }
.lai-footer__tag { color: rgba(255,255,255,.6); font-size: .9rem; margin-top: 2px; }
.lai-footer__nav ul { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0; padding: 0; }
.lai-footer__nav a { font-weight: 600; padding: 6px 12px; border-radius: 4px; }
.lai-footer__nav .current-menu-item > a,
.lai-footer__nav .current_page_item > a { background: var(--lai-logo); color: #fff; }
.lai-footer__nav .current-menu-item > a:hover,
.lai-footer__nav .current_page_item > a:hover { color: #fff; }
.lai-footer__bottom { border-top: 1px solid rgba(255,255,255,.12); }
.lai-footer__bottom-inner { max-width: var(--lai-maxw); margin: 0 auto; padding: 16px 20px; font-size: .85rem; color: rgba(255,255,255,.55); }

@media (max-width: 640px) {
  body { font-size: 17px; }
  /* Logo centred, name under it, menu centred below that. There is no width here for brand and menu
     side by side, and the logo's negative margin used to pull the menu up across the logo itself. */
  .lai-header__inner { flex-direction: column; align-items: center; gap: 14px; text-align: center; }
  .lai-brand { flex-direction: column; gap: 6px; }
  .lai-brand img { margin: 0; }
  .lai-brand__name { max-width: none; }
  .lai-nav { width: 100%; }
  .lai-nav ul { justify-content: center; }
  .lai-hero h1 { font-size: 1.7rem; }
}