/* ==========================================================================
   layout.css - page frame: container, top bar, sticky header, navigation, drawer, footer, section rhythm and grids.
   Mobile first; breakpoints 480 / 768 / 1024 / 1280 (min-width).
   ========================================================================== */

/* ---- container: 1200 content width, side padding 20 -> 32 (768) -> 40 (1024). At 1440 the auto margins give Figma's 120 px. ---- */
.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
@media (min-width: 768px) { :root { --gutter: 2rem; } }
@media (min-width: 1024px) { :root { --gutter: 2.5rem; --header-h: 6.0625rem; } }

/* ---- generic page section ---- */
.section { padding-block: var(--section-pad); }
.section--soft { background: var(--bg-soft); }
.section--navy { background: var(--bg-navy); color: var(--text-on-navy); }

/* ---- top bar (Figma 5:49) ---- */
.top-bar {
  display: none;
  background: var(--bg-navy);
  color: var(--text-on-navy-muted);
  font-size: var(--fs-label);
  font-weight: 500;
  line-height: 1.2;
}
.top-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  min-height: 2.5rem;
}
.top-bar__slogan,
.top-bar__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.top-bar__slogan .icon { width: 1rem; height: 1rem; color: var(--accent); }
.top-bar__contact { display: flex; align-items: center; gap: var(--space-6); }
.top-bar__item { white-space: nowrap; transition: color var(--dur-fast) ease; }
.top-bar__slogan { min-width: 0; }
/* 768-859: slogan, e-mail and phone no longer fit on one line; the slogan lives in the drawer there, the contact lines stay on the right */
@media (max-width: 859.98px) { .top-bar__slogan { display: none; } .top-bar__inner { justify-content: flex-end; } }
@media (hover: hover) and (pointer: fine) {
  a.top-bar__item:hover { color: var(--color-white); }
}
@media (min-width: 768px) { .top-bar { display: block; } }
/* landscape phones (about 390 px tall): the top bar would cost a tenth of the screen; the e-mail and phone are in the drawer and the header */
@media (max-height: 480px) and (orientation: landscape) { .top-bar { display: none; } }

/* ---- sticky header (Figma 5:50): white bar, hairline border ---- */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: calc(var(--header-h) - 1px);
  padding-block: var(--space-3);
}
.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
@media (min-width: 1024px) {
  .site-header__inner { padding-block: var(--space-4) 1.125rem; gap: var(--space-8); }
}

/* logo: 44 px mark in the compact bar, 60 px (Figma) from 1024 */
.site-header .logo { --logo-mark: 2.75rem; }
@media (min-width: 1024px) { .site-header .logo { --logo-mark: 3.75rem; } }
@media (max-width: 389.98px) { .site-header .logo { --logo-mark: 2.5rem; } .site-header__inner { gap: var(--space-2); } }

/* main navigation: desktop only, the drawer carries it below 1024 */
.main-nav { display: none; }
.main-nav__list { display: flex; align-items: center; gap: 2.25rem; }
.main-nav__link {
  position: relative;
  display: inline-block;
  padding-block: var(--space-2);
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1.2;
  color: var(--text);
  transition: color var(--dur-fast) ease;
}
/* underline grows from the left on hover; the active item is orange and semibold like Figma */
.main-nav__link::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-base) var(--ease-out);
}
.main-nav__link[aria-current="page"] { color: var(--accent-text); font-weight: 600; }
@media (hover: hover) and (pointer: fine) {
  .main-nav__link:hover { color: var(--accent-text); }
  .main-nav__link:hover::after { transform: scaleX(1); }
}
@media (min-width: 1024px) {
  .main-nav { display: block; }
}
/* no JavaScript: no drawer, so the navigation stays visible as a wrapped row under the logo (the menu button is hidden in components.css) */
@media (max-width: 1023.98px) {
  .no-js .site-header__inner { flex-wrap: wrap; }
  .no-js .main-nav { display: block; order: 3; flex-basis: 100%; }
  .no-js .main-nav__list { flex-wrap: wrap; gap: var(--space-1) var(--space-5); }
}

/* ---- drawer (< 1024): native <dialog>, slides in from the right ---- */
.drawer {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-on-navy);
  overflow: hidden;
}
.drawer::backdrop {
  background: var(--overlay);
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-out);
}
.drawer.is-open::backdrop { opacity: 1; }
.drawer__panel {
  position: absolute;
  inset-block: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  width: min(calc(100% - 2.5rem), 25rem); /* on phones a 40 px strip of the page stays visible: tap it to close */
  background: var(--bg-navy);
  box-shadow: var(--shadow-drawer);
  padding: var(--space-4) var(--space-5) max(var(--space-6), env(safe-area-inset-bottom));
  padding-top: max(var(--space-4), env(safe-area-inset-top));
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(100%);
  transition: transform var(--dur-slow) var(--ease-drawer);
}
.drawer.is-open .drawer__panel { transform: none; }
.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--line-on-navy);
}
.drawer__nav { padding-block: var(--space-4); }
.drawer__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 3.25rem;
  padding-inline: var(--space-2);
  border-radius: var(--radius-md);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-white);
  transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease;
}
.drawer__link[aria-current="page"] { color: var(--accent); }
.drawer__link .icon { color: var(--text-on-navy-muted); }
@media (hover: hover) and (pointer: fine) {
  .drawer__link:hover { background: var(--hover-on-navy); }
}
.drawer__foot {
  display: grid;
  gap: var(--space-4);
  margin-top: auto;
  padding-top: var(--space-6);
  border-top: 1px solid var(--line-on-navy);
}
.drawer__contact { display: grid; gap: var(--space-3); font-size: var(--fs-small); color: var(--text-on-navy-muted); }
.drawer__contact a,
.drawer__contact span { display: inline-flex; align-items: center; gap: var(--space-3); color: inherit; text-decoration: none; }
.drawer__contact .icon { color: var(--accent); flex: none; }
.drawer__slogan { font-size: var(--fs-label); color: var(--text-on-navy-muted); }

/* ---- footer (Figma 5:52) ---- */
.site-footer {
  background: var(--bg-navy);
  color: var(--text-on-navy-muted);
  padding-block: var(--space-12) var(--space-8);
}
.site-footer__top {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-10) var(--space-6);
}
.site-footer__brand { grid-column: 1 / -1; display: grid; gap: var(--space-5); justify-items: start; align-content: start; }
.site-footer__blurb { max-width: 22.5rem; font-size: var(--fs-small); line-height: 1.6; }
.site-footer__col--contact { grid-column: 1 / -1; }
.site-footer__title {
  margin-bottom: 0.875rem;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-white);
  letter-spacing: 0;
}
.site-footer__list { display: grid; gap: 0.75rem; font-size: var(--fs-small); line-height: 1.35; } /* 12 px gap + 1.35 line = Figma's 31 px pitch; a wrapped address stays readable */
.site-footer__link {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  width: fit-content;
  padding-block: 0.125rem;
  margin-block: -0.125rem; /* the padding enlarges the tap area without changing Figma's 14 px rhythm */
  overflow-wrap: break-word;
  transition: color var(--dur-fast) ease;
}
.site-footer__list .icon { flex: none; width: 1rem; height: 1rem; margin-top: 0.1875rem; color: var(--accent); }
@media (hover: hover) and (pointer: fine) {
  a.site-footer__link:hover { color: var(--color-white); }
}
.site-footer__bottom {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-10);
  padding-top: var(--space-6);
  border-top: 1px solid var(--line-on-navy);
  font-size: var(--fs-label);
}
.site-footer__legal { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); font-weight: 500; }
.site-footer__legal .site-footer__link { align-items: center; }
@media (min-width: 768px) {
  /* the contact column is the widest: the e-mail address (31 characters) must stay on one line */
  .site-footer__top { grid-template-columns: minmax(0, 0.9fr) minmax(0, 0.9fr) minmax(0, 1.5fr); }
  .site-footer__col--contact { grid-column: auto; }
  .site-footer { padding-block: 4.5rem; }
  .site-footer__bottom { flex-direction: row; align-items: center; justify-content: space-between; margin-top: var(--space-12); padding-top: var(--space-12); }
}
@media (min-width: 1024px) {
  .site-footer__top { grid-template-columns: minmax(15rem, 20rem) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.15fr); gap: 4rem; }
  .site-footer__brand,
  .site-footer__col--contact { grid-column: auto; }
}
/* 1024-1279: the contact column needs the width (address and e-mail must not break inside words) */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .site-footer__top { grid-template-columns: minmax(13rem, 16rem) minmax(0, 0.75fr) minmax(0, 0.8fr) minmax(0, 1.6fr); gap: var(--space-8); }
}
/* phones and tablets: footer links get a 44 px tall tap area; the rhythm opens up a little instead of cramping the targets */
@media (max-width: 1023.98px) {
  .site-footer__list { gap: 0; }
  .site-footer__link { min-height: 2.75rem; margin-block: 0; padding-block: 0; }
  .site-footer__legal { gap: 0 var(--space-6); }
}
/* phones: the three legal links form one neat stack (two on a row and one orphaned looked broken); 480+ they fit on one row */
@media (max-width: 479.98px) {
  .site-footer__legal { flex-direction: column; flex-wrap: nowrap; }
  .site-footer__bottom { gap: var(--space-3); }
}
@media (max-width: 359.98px) {
  .site-footer__top { grid-template-columns: minmax(0, 1fr); }
}

/* ---- two-column page shell (service / post / legal): main column + sidebar from 1024. Figma: 756 + 380 with a 64 gap at 1440.
   The sidebars of the service and post pages are taller than a laptop viewport, so they only stick on tall screens; the legal
   table of contents is a single short card and always sticks. ---- */
.layout-split { display: grid; gap: var(--space-10); align-items: start; }
@media (min-width: 1024px) {
  .layout-split { grid-template-columns: minmax(0, 1fr) 20rem; gap: var(--space-12); }
}
@media (min-width: 1280px) {
  .layout-split { grid-template-columns: minmax(0, 1fr) 23.75rem; gap: 4rem; }
}
@media (min-width: 1024px) and (min-height: 1000px) {
  .layout-split__aside { position: sticky; top: calc(var(--header-h) + var(--space-6)); }
}
@media (min-width: 1024px) { .legal__aside { position: sticky; top: calc(var(--header-h) + var(--space-6)); } }

/* ---- reveal-on-scroll: main.js adds .is-pending only to elements below the fold (no JS / no IntersectionObserver = always visible),
   then swaps it for .is-revealing so the transition runs once; the transition never lives on the element otherwise (hover transforms stay snappy) ---- */
[data-reveal].is-pending {
  opacity: 0;
  transform: translateY(0.75rem);
}
[data-reveal].is-revealing {
  transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out);
  transition-delay: calc(var(--reveal-i, 0) * 60ms);
}