/* ============================================================
   layout.css — header, footer, navigation, containers, grids.
   Mobile-first: breakpoints at 768px (tablet) and 1024px (desktop).
   ============================================================ */

/* ── Container ───────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}
@media (min-width: 768px) {
  .container { padding-left: var(--space-6); padding-right: var(--space-6); }
}

/* ──────────────────────────────────────────────────────────
   SITE HEADER
   ────────────────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--color-bg) 92%, transparent);
  backdrop-filter: saturate(1.2) blur(10px);
  -webkit-backdrop-filter: saturate(1.2) blur(10px);
  border-bottom: 1px solid var(--color-border);
  transition: background-color var(--transition-base), border-color var(--transition-base);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 72px;
}

/* Brand */
.site-header__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-text);
  text-decoration: none;
  flex-shrink: 0;
}
.site-header__brand:hover { text-decoration: none; color: var(--color-text); }
.site-header__brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--color-accent);
}
.site-header__logo-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.site-header__brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
  font-family: var(--font-heading);
}
.site-header__brand-text strong {
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.site-header__brand-text small {
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--color-text-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 2px;
}

/* ── Site nav (desktop) ──────────────────────────────────── */
.site-nav { display: none; }
@media (min-width: 1024px) {
  .site-nav {
    display: block;
    flex: 1;
  }
}

.site-nav__list {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
}

.site-nav__item { position: relative; }

.site-nav__link {
  display: inline-flex;
  align-items: center;
  white-space: normal;
  text-align: center;
  line-height: 1.2;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--color-text);
  background: transparent;
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: color var(--transition-fast), background-color var(--transition-fast);
}
.site-nav__link:hover,
.site-nav__link:focus-visible,
.site-nav__item.is-current > .site-nav__link {
  color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
  text-decoration: none;
}

.site-nav__link--button {
  border: none;
  cursor: pointer;
}

.site-nav__caret { flex-shrink: 0; transition: transform var(--transition-fast); }
/* Chevron rotates on hover/focus-within — matches the dropdown open trigger */
.site-nav__item--has-submenu:hover > .site-nav__link--button .site-nav__caret,
.site-nav__item--has-submenu:focus-within > .site-nav__link--button .site-nav__caret {
  transform: rotate(180deg);
}

/* Submenu (desktop = absolute, mobile = inline) */
.site-nav__submenu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 220px;
  padding: var(--space-2);
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
  margin: 0;
  list-style: none;
}
/* Reveal: hover always; :focus-within only without JS (main.js marks the item
   .has-js and drives .is-open instead, so Escape can close it while focus is
   still inside); .is-open when the toggle opened it. */
.site-nav__item--has-submenu:hover > .site-nav__submenu,
.site-nav__item--has-submenu:not(.has-js):focus-within > .site-nav__submenu,
.site-nav__item--has-submenu.is-open > .site-nav__submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
/* The Donate item is last; open its menu to the left so it cannot leave the
   viewport on a narrow desktop. */
.site-nav__item--has-submenu:last-child > .site-nav__submenu {
  left: auto;
  right: 0;
}
.site-nav__submenu-item.is-current > a {
  color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
}

/* The caret button beside the Donate link: same vertical padding and line
   height as .site-nav__link so the header does not grow, narrow horizontally. */
.site-nav__item--has-submenu {
  display: inline-flex;
  align-items: center;
}
.site-nav__submenu-toggle {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-1);
  font-size: 0.95rem;
  line-height: 1.2;
  color: var(--color-text);
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: color var(--transition-fast), background-color var(--transition-fast);
}
.site-nav__submenu-toggle:hover,
.site-nav__submenu-toggle:focus-visible,
.site-nav__item.is-current > .site-nav__submenu-toggle {
  color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
}
.site-nav__item--has-submenu:hover > .site-nav__submenu-toggle .site-nav__caret,
.site-nav__item--has-submenu:not(.has-js):focus-within > .site-nav__submenu-toggle .site-nav__caret,
.site-nav__item--has-submenu.is-open > .site-nav__submenu-toggle .site-nav__caret {
  transform: rotate(180deg);
}
.site-nav__submenu a {
  display: block;
  padding: var(--space-2) var(--space-3);
  color: var(--color-text);
  text-decoration: none;
  font-size: 0.9rem;
  border-radius: var(--radius-sm);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
.site-nav__submenu a:hover,
.site-nav__submenu a:focus-visible {
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
  color: var(--color-primary);
}

/* ── Header actions ──────────────────────────────────────── */
.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

/* Mobile hamburger (visible only below desktop breakpoint) */
.mobile-nav-toggle {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: transparent;
  cursor: pointer;
}
.mobile-nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-text);
  border-radius: 2px;
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}
.mobile-nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.mobile-nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.mobile-nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Hide the desktop nav below the desktop breakpoint — the slide-in
   panel takes over there. */
@media (max-width: 1023.98px) {
  .site-nav { display: none; }
}
@media (min-width: 1024px) {
  .mobile-nav-toggle { display: none; }
}

/* ──────────────────────────────────────────────────────────
   MOBILE NAV PANEL — right-side slide-in
   ────────────────────────────────────────────────────────── */
.mobile-nav-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: min(300px, 85vw);
  height: 100vh;
  background: var(--color-surface);
  border-left: 1px solid var(--color-border);
  box-shadow: -8px 0 32px color-mix(in srgb, var(--color-text) 20%, transparent);
  transform: translateX(100%);
  transition: transform var(--transition-base);
  z-index: 9999;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  visibility: hidden;
}
body.has-mobile-nav-open .mobile-nav-panel {
  transform: translateX(0);
  visibility: visible;
}

.mobile-nav-backdrop {
  position: fixed;
  inset: 0;
  background: color-mix(in srgb, var(--color-text) 50%, transparent);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-base);
  z-index: 9998;
}
body.has-mobile-nav-open .mobile-nav-backdrop {
  opacity: 1;
  pointer-events: auto;
}

body.has-mobile-nav-open { overflow: hidden; }

/* Hide both panel + backdrop on desktop */
@media (min-width: 1024px) {
  .mobile-nav-panel,
  .mobile-nav-backdrop { display: none; }
}

/* Header */
.mobile-nav-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
}
.mobile-nav-panel__logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text);
  text-decoration: none;
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 600;
}
.mobile-nav-panel__logo:hover { color: var(--color-primary); text-decoration: none; }
.mobile-nav-panel__logo .site-header__brand-mark {
  width: 28px;
  height: 28px;
  color: var(--color-accent);
}

.mobile-nav-panel__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  color: var(--color-text);
  background: transparent;
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
.mobile-nav-panel__close:hover {
  background: var(--color-border);
  color: var(--color-primary);
}

/* Nav list */
.mobile-nav-panel__nav { flex: 1; padding: var(--space-3) 0; }
.mobile-nav-panel__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.mobile-nav-panel__link,
.mobile-nav-panel__accordion-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-3) var(--space-5);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-text);
  background: transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
.mobile-nav-panel__link:hover,
.mobile-nav-panel__accordion-toggle:hover {
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
  color: var(--color-primary);
  text-decoration: none;
}

.mobile-nav-panel__chevron { transition: transform var(--transition-base); }
.mobile-nav-panel__accordion.is-open .mobile-nav-panel__chevron { transform: rotate(180deg); }

.mobile-nav-panel__submenu {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-base);
}
.mobile-nav-panel__accordion.is-open .mobile-nav-panel__submenu {
  max-height: 500px;
}
.mobile-nav-panel__submenu a {
  display: block;
  padding: var(--space-3) var(--space-5) var(--space-3) var(--space-10);
  font-size: 0.95rem;
  color: var(--color-text-muted);
  text-decoration: none;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
.mobile-nav-panel__submenu a:hover {
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
  color: var(--color-primary);
  text-decoration: none;
}

/* Nested category list under Donate — always visible, no disclosure (#2E.4). */
.mobile-nav-panel__sublist {
  list-style: none;
  margin: 0;
  padding: 0;
}
.mobile-nav-panel__sublink {
  display: block;
  padding: var(--space-2) var(--space-5) var(--space-2) var(--space-10);
  font-size: 0.95rem;
  color: var(--color-text-muted);
  text-decoration: none;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
.mobile-nav-panel__sublink:hover,
.mobile-nav-panel__list li.is-current > .mobile-nav-panel__link,
.mobile-nav-panel__sublist li.is-current > .mobile-nav-panel__sublink {
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
  color: var(--color-primary);
  text-decoration: none;
}

/* Footer of the panel */
.mobile-nav-panel__footer {
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--color-border);
}
.mobile-nav-panel__whatsapp {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-whatsapp);
  color: var(--color-on-primary);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  transition: background-color var(--transition-fast);
}
.mobile-nav-panel__whatsapp:hover {
  background: var(--color-whatsapp-dark);
  color: var(--color-on-primary);
  text-decoration: none;
}

/* ──────────────────────────────────────────────────────────
   SITE FOOTER
   ────────────────────────────────────────────────────────── */
.site-footer {
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  color: var(--color-text);
}

.site-footer__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  padding-top: var(--space-12);
  padding-bottom: var(--space-8);
}
@media (min-width: 768px) {
  .site-footer__inner {
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: var(--space-10);
  }
}

.site-footer__title {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: var(--space-4);
  color: var(--color-text);
  font-family: var(--font-body);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.site-footer__text {
  color: var(--color-text-muted);
  font-size: 0.95rem;
  line-height: 1.7;
  margin-bottom: var(--space-3);
}

.site-footer__tagline {
  color: var(--color-accent);
  font-family: var(--font-heading);
  font-size: 1rem;
}

.site-footer__links,
.site-footer__contact {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Color/hover/underline come from the .link--muted-to-primary utility
   further down this file; the footer keeps only its own font sizing. */
.site-footer__links a,
.site-footer__contact a {
  font-size: 0.95rem;
}

.site-footer__contact strong {
  color: var(--color-text);
  font-weight: 500;
  margin-right: var(--space-1);
}

/* ── Branch cards — a full-width row under the three columns ──
   Derived from .contact-card (pages.css) so the two read as one system, at a
   footer's scale: same --radius-md, same tokens, but --space-4 of padding
   instead of --space-8/--space-6 and no 56px icon, either of which would have
   made this row taller than the three columns above it.

   ONE DEVIATION, and it is deliberate. .contact-card is --color-surface with
   --shadow-sm, which reads as a raised card because it sits on --color-bg. The
   footer IS --color-surface, so the same treatment would be an invisible card
   with a shadow. These are --color-bg with a border instead — a tile set INTO
   the footer rather than raised above it — which is the one direction that
   holds in both themes, because --color-bg is a step back from
   --color-surface in each of them rather than only in one. (The values are in
   variables.css and are deliberately not repeated here: the hex audit greps
   this directory and a comment that trips it permanently teaches the reader
   to skim its output.) A drop shadow under a recessed tile would read as a
   rendering fault, so there is none.

   Four across only at >=1024px. At 768px the three columns above are already
   1.4fr 1fr 1fr and a quarter of that width cannot hold a Philippine street
   address in fewer than five lines. */
.site-footer__branches {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  padding-bottom: var(--space-10);
}
@media (min-width: 768px) {
  .site-footer__branches {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .site-footer__branches {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* A flex column, so the three lines are separated by the LAYOUT. The bug this
   replaces was three inline siblings in one <li> with the gap between items
   instead of inside them, which ran the name, the address and the phone
   together into a single string. */
.site-footer__branch {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.site-footer__branch-name {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
}
/* Colour and hover come from .link--muted-to-primary, which the address and
   phone also carry; this is only the footer's own sizing, the same division
   of labour as .site-footer__links a above. The address line is often two
   lines at card width, so it sets its own line-height rather than inheriting
   the body's 1.6. */
.site-footer__branch-line {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--color-text-muted);
}

.site-footer__bar {
  border-top: 1px solid var(--color-border);
}
.site-footer__bar-inner {
  padding: var(--space-4) var(--space-4);
  font-size: 0.85rem;
  color: var(--color-text-muted);
  text-align: center;
}

/* ══════════════════════════════════════════════════════════
   Merged in from shared-partials.css, which loaded immediately after this
   file. Appended verbatim — no rule, selector, value or order
   changed — so the cascade is identical to the two-file version.
   ══════════════════════════════════════════════════════════ */
/* ──────────────────────────────────────────────────────────
   LINK UTILITY — muted text, primary on hover/focus, no underline
   Shared between the footer (Quick Links + Get in Touch) and the
   Contact page channel cards. Overrides base.css's global anchor
   color (primary) + underline-on-hover for these specific links.
   ────────────────────────────────────────────────────────── */
.link--muted-to-primary {
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--transition-fast);
}
.link--muted-to-primary:hover,
.link--muted-to-primary:focus-visible {
  color: var(--color-primary);
  text-decoration: none;
}

/* ──────────────────────────────────────────────────────────
   FOOTER — socials row (About column)
   ────────────────────────────────────────────────────────── */
.main-footer__socials {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-4);
}
.main-footer__social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-text) 7%, transparent);
  color: var(--color-text-muted);
  text-decoration: none;
  transition: background-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}
.main-footer__social:hover,
.main-footer__social:focus-visible {
  background: color-mix(in srgb, var(--color-primary) 15%, transparent);
  color: var(--color-primary);
  transform: translateY(-1px);
}
.main-footer__social svg {
  width: 18px;
  height: 18px;
}

/* ──────────────────────────────────────────────────────────
   FOOTER — secondary bar with legal links (copyright + T&C/Privacy)
   ────────────────────────────────────────────────────────── */
.site-footer__bar--main .site-footer__bar-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  /* The WhatsApp float is position:fixed at the bottom-right, 56px tall with
     a var(--space-6) offset, and carries z-index 999 against a footer with no
     stacking context, so scrolled to the bottom it occupies the last 80px of
     both edges. The legal links are the last row of this bar and are centred,
     which at narrow widths puts "Privacy Policy" within a thumb's width of
     that circle — at 375px the row is about 250px wide inside 343px, so its
     right end stops roughly 47px short of an 80px button. Reserve room below
     the bar so the two can never occupy the same strip.

     (Until #3.5 this bar was a row at >=768px with the links pinned right,
     directly under the button. Centring them moved the collision, it did not
     remove it, and the padding is what keeps it theoretical.)

     Chosen over raising the footer's z-index, which would slide a circular
     button half under the bar and make it unclickable, and over hiding the
     button near the page bottom, which needs a scroll listener and moves the
     UI while the user reads. */
  padding-bottom: calc(var(--space-20) + var(--space-4));
}
/* No row layout at any width. The legal entity line grew in #2F.2 to carry the
   full UNICEP name, the corporate type, the SEC registration and the TIN, so
   as a flex row with justify-content: space-between it took nearly the whole
   bar and squeezed the <ul> until both links wrapped mid-label. The paragraph
   now has the full width and the links sit centred beneath it. */
.main-footer__legal {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
  list-style: none;
  margin: 0;
  padding: 0;
}
/* The same middot the legal line above already uses to separate the SEC
   registration from the TIN. A pseudo-element rather than markup: it is
   punctuation between two links, not a third thing to read, and a screen
   reader should not announce it. */
.main-footer__legal li + li::before {
  content: "\00b7";
  margin-right: var(--space-3);
  color: var(--color-text-muted);
}
.main-footer__legal a {
  color: var(--color-text-muted);
  text-decoration: none;
  white-space: nowrap;
  font-size: 0.85rem;
  transition: color var(--transition-fast);
}
.main-footer__legal a:hover { color: var(--color-primary); }