/* =============================================================
   layout.css — Container, Sections, Header, Footer, Drawer
   gestaltme.com | v1.0 | 2026-03
   =============================================================
   DEPENDS ON: tokens.css, base.css
   ============================================================= */

/* -----------------------------------------------------------
   CONTAINER
----------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-px);
  box-sizing: border-box;
}

/* Wide variant for edge-to-edge sections */
.container--wide {
  max-width: 1280px;
}

/* Narrow variant for blog articles and focused content */
.container--narrow {
  max-width: 720px;
}

/* -----------------------------------------------------------
   SECTION
   Base class for all page sections.
   Color variants via modifier classes.
----------------------------------------------------------- */

.section {
  padding-block: var(--section-py);
}

/* Light section - default */
.section--light {
  background: var(--c-cream);
  overflow: clip;
}

/* Linen - slightly off-white, for alternating sections */
.section--linen {
  background: var(--c-linen);
  overflow: clip;
}

/* Dark section - charcoal background */
.section--dark {
  background: var(--c-dark-bg);
  position: relative;
  overflow: clip;
  /* overflow:hidden clips decorative blobs that extend beyond bounds */
}

/* Decorative radial glow for dark sections */
.section--dark::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(700px, 100%);
  height: min(700px, 100vw);
  background: radial-gradient(circle, rgba(122,158,142,.12) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}

/* Ensure content sits above the glow */
.section--dark .container {
  position: relative;
  z-index: var(--z-base);
}

/* -----------------------------------------------------------
   SECTION HEADER
   Reusable header block above section content
----------------------------------------------------------- */

.section-header {
  margin-bottom: var(--sp-12);
}

.section-header--center {
  text-align: center;
}

.section-header--center .lead {
  margin-inline: auto;
}

.section-header--split {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-8);
  flex-wrap: wrap;
}

/* -----------------------------------------------------------
   HEADER
----------------------------------------------------------- */

.header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: rgba(247,243,238,.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(122,158,142,.15);
  transition: box-shadow var(--ease);
}

.header.is-scrolled {
  box-shadow: var(--shadow-sm);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-8);
  padding-block: var(--sp-5);
}

/* Logo */
.header__logo {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--c-charcoal);
  white-space: nowrap;
  flex-shrink: 0;
  transition: opacity var(--ease);
}

.header__logo:hover {
  opacity: 0.85;
}

.header__logo span {
  color: var(--c-sage-dk);
}

/* Primary navigation */
.header__nav {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
}

.header__nav a {
  position: relative;
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--c-brown);
  transition: color var(--ease);
  white-space: nowrap;
}

.header__nav a::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--c-sage);
  border-radius: var(--radius-pill);
  transition: width var(--ease-bounce);
}

.header__nav a:hover {
  color: var(--c-charcoal);
}

/* Hover: sage underline slides in */
.header__nav a:hover::after {
  width: 100%;
}

/* Active page: charcoal underline, bold */
.header__nav a[aria-current="page"]::after {
  width: 100%;
  background: var(--c-charcoal);
}

.header__nav a[aria-current="page"] {
  color: var(--c-charcoal);
  font-weight: var(--fw-semibold);
}

/* Language switcher */
.header__lang {
  display: flex;
  gap: var(--sp-1);
  align-items: center;
  padding-left: var(--sp-5);
  border-left: 1px solid var(--c-linen);
}

.header__lang a {
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  color: var(--c-muted);
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--radius-sm);
  transition: all var(--ease);
  letter-spacing: var(--tracking-wide);
}

.header__lang a.is-active,
.header__lang a[aria-current="true"] {
  background: var(--c-charcoal);
  color: var(--c-white);
}

/* Header right side: lang + CTA */
.header__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-shrink: 0;
}

/* Burger button (mobile only) */
.header__burger {
  display: none;
  width: 42px;
  height: 42px;
  background: var(--c-charcoal);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: background var(--ease);
  flex-shrink: 0;
}

.header__burger:hover {
  background: #3a3632;
}

.header__burger span {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--c-white);
  border-radius: var(--radius-pill);
  transition:
    transform var(--ease-bounce),
    opacity var(--ease);
  transform-origin: center;
}

/* Burger open state */
.header__burger.is-open span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}

.header__burger.is-open span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.header__burger.is-open span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* -----------------------------------------------------------
   MOBILE DRAWER
----------------------------------------------------------- */

.drawer {
  display: none;
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
}

.drawer.is-open {
  display: block;
}

/* Backdrop */
.drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(37,35,32,.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: backdropIn var(--ease-slow) forwards;
}

@keyframes backdropIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Panel */
.drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  width: min(340px, 88vw);
  height: 100dvh;
  background: var(--c-cream);
  display: flex;
  flex-direction: column;
  padding: var(--sp-6);
  box-shadow: var(--shadow-xl);
  animation: panelIn var(--ease-bounce) forwards;
  overflow-y: auto;
}

@keyframes panelIn {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}

/* Drawer top row */
.drawer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-10);
}

.drawer__logo {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  color: var(--c-charcoal);
}

.drawer__logo span {
  color: var(--c-sage-dk);
}

.drawer__close {
  width: 36px;
  height: 36px;
  background: var(--c-linen);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-size: 20px;
  color: var(--c-charcoal);
  display: grid;
  place-items: center;
  line-height: 1;
  transition: background var(--ease);
}

.drawer__close:hover {
  background: var(--c-sage-lt);
}

/* Drawer navigation */
.drawer__nav {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--sp-1);
}

.drawer__nav a {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: var(--fw-semibold);
  color: var(--c-charcoal);
  padding-block: var(--sp-2);
  border-bottom: 1px solid var(--c-linen);
  transition: color var(--ease), padding-left var(--ease-bounce);
}

.drawer__nav a:last-child {
  border-bottom: none;
}

.drawer__nav a:hover {
  color: var(--c-sage-dk);
  padding-left: var(--sp-2);
}

/* Drawer bottom: lang + CTA */
.drawer__bottom {
  padding-top: var(--sp-6);
  border-top: 1px solid var(--c-linen);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  margin-top: var(--sp-4);
}

.drawer__lang {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-sm);
  color: var(--c-muted);
}

.drawer__lang a {
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--radius-pill);
  color: var(--c-brown);
  transition: all var(--ease);
}

.drawer__lang a.is-active {
  background: var(--c-charcoal);
  color: var(--c-white);
}

.drawer__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-sage);
  color: var(--c-white);
  font-size: var(--text-base);
  font-weight: var(--fw-semibold);
  padding: var(--sp-4);
  border-radius: var(--radius-pill);
  transition: background var(--ease);
}

.drawer__cta:hover {
  background: var(--c-sage-dk);
}

/* -----------------------------------------------------------
   FOOTER
----------------------------------------------------------- */

.footer {
  background: #1c1a18;
  padding-block: var(--sp-10);
  border-top: 1px solid rgba(255,255,255,.06);
}

.footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-5);
}

.footer__logo {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--fw-bold);
  color: var(--c-white);
}

.footer__logo span {
  color: var(--c-sage);
}

.footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-6);
}

.footer__nav a {
  font-size: var(--text-sm);
  color: var(--c-dark-muted);
  transition: color var(--ease);
}

.footer__nav a:hover {
  color: rgba(255,255,255,.8);
}

.footer__copy {
  font-size: var(--text-xs);
  color: rgba(255,255,255,.28);
  letter-spacing: var(--tracking-wide);
}

/* -----------------------------------------------------------
   SOCIAL LINKS
----------------------------------------------------------- */

.header__social,
.drawer__social,
.footer__social {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  transition: background var(--ease), color var(--ease), transform var(--ease-bounce);
}

.social-link:hover {
  transform: translateY(-2px);
}

/* Header: icon buttons on light background */
.header__social .social-link {
  color: var(--c-charcoal);
  background: rgba(0,0,0,0.07);
}
.header__social .social-link:hover {
  background: rgba(0,0,0,0.14);
}

/* Drawer: same style on light panel */
.drawer__social .social-link {
  color: var(--c-charcoal);
  background: rgba(0,0,0,0.07);
  width: 38px;
  height: 38px;
}
.drawer__social .social-link:hover {
  background: rgba(0,0,0,0.13);
}

/* Footer: icon buttons on dark background */
.footer__social .social-link {
  color: rgba(255,255,255,.75);
  background: rgba(255,255,255,.1);
}
.footer__social .social-link:hover {
  color: var(--c-white);
  background: rgba(255,255,255,.18);
}

/* Hide header social on mobile — they live in the drawer */
@media (max-width: 767px) {
  .header__social { display: none; }
}

/* -----------------------------------------------------------
   GRID HELPERS
----------------------------------------------------------- */

/* 2-column equal grid */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-5);
}

/* 3-column equal grid */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
}

/* Auto-fill grid (for cards) */
.grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--sp-5);
}

/* -----------------------------------------------------------
   BREADCRUMB
----------------------------------------------------------- */

.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-sm);
  color: var(--c-muted);
  margin-bottom: var(--sp-8);
  flex-wrap: wrap;
}

.breadcrumb a {
  color: var(--c-muted);
  transition: color var(--ease);
}

.breadcrumb a:hover {
  color: var(--c-sage-dk);
}

.breadcrumb__sep {
  color: var(--c-sage-lt);
  font-size: var(--text-xs);
}

.breadcrumb__current {
  color: var(--c-brown);
  font-weight: var(--fw-medium);
}

/* -----------------------------------------------------------
   RESPONSIVE — HEADER
----------------------------------------------------------- */

@media (max-width: 960px) {
  .header__nav,
  .header__actions .btn {
    display: none;
  }

  .header__burger {
    display: flex;
    width: 38px;
    height: 38px;
  }

  .header__inner {
    gap: var(--sp-2);
  }

  .header__actions {
    gap: var(--sp-2);
  }

  .header__lang {
    gap: 0;
    padding-left: var(--sp-2);
  }

  .header__lang a {
    padding: var(--sp-1) var(--sp-1);
    font-size: 11px;
    letter-spacing: 0;
  }

  /* Reduce header padding so logo + lang + burger all fit */
  .header .container {
    padding-inline: var(--sp-3);
  }
}

/* -----------------------------------------------------------
   RESPONSIVE — FOOTER
----------------------------------------------------------- */

@media (max-width: 767px) {
  .footer__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-4);
  }

  .footer__nav {
    gap: var(--sp-4);
  }
}

/* -----------------------------------------------------------
   RESPONSIVE — GRIDS
----------------------------------------------------------- */

@media (max-width: 1024px) {
  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .grid-2,
  .grid-3,
  .grid-auto {
    grid-template-columns: 1fr;
  }
}

/* Very narrow phones (Galaxy Fold, etc) < 380px */
@media (max-width: 380px) {
  .header__inner {
    gap: var(--sp-2);
    padding-inline: var(--sp-3);
  }

  .header__logo {
    font-size: 0.95rem;
    flex-shrink: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }

  .header__actions {
    gap: var(--sp-1);
    flex-shrink: 0;
  }

  .header__lang {
    gap: 0;
    padding-left: var(--sp-2);
  }

  .header__lang a {
    padding: 2px 3px;
    font-size: 10px;
    letter-spacing: 0;
  }

  .header__burger {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
  }
}