/* ============================================================
   FILE: /css/layout.css
   PURPOSE: Layout structure (header/footer/grid/responsive)
   INCLUDES:
   - Container + spacing helpers
   - Header + navigation (desktop + mobile toggle support) ✅ CLEAN (data-open) + POLISHED
   - Hero polish (subtle glow + accent rule) ✅ "zush"
   - Section separation (main only)
   - Typography measure (readable paragraphs, but hero spans full width)
   - Grid/card alignment fix (prevents “stepped” cards)
   - Mobile tap polish (removes dark tap flash) ✅
   ============================================================ */


/* ============================================================
   0) MOBILE TAP POLISH (REMOVE DARK TAP FLASH)
   NOTE: Safe to keep global; prevents OS tap highlight on mobile.
   ============================================================ */
a, button{
  -webkit-tap-highlight-color: transparent;
}


/* ============================================================
   1) CONTAINER + GLOBAL LAYOUT HELPERS
   ============================================================ */
.container{
  width: min(100% - 2rem, var(--content));
  margin-inline: auto;
}

.main{ display: block; }

/* Simple vertical rhythm helpers */
.stack > * + *{ margin-top: var(--s-4); }
.stack-lg > * + *{ margin-top: var(--s-5); }
.stack-xl > * + *{ margin-top: var(--s-6); }

.image-boarder{
  border: 1px solid #6D6D6D;
  padding: 2px;
  border-radius: 8px;
}


/* ============================================================
   2) HEADER + NAV (DESKTOP)
   ============================================================ */
.site-header{
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  position: relative;
  z-index: 10; /* above hero glow */
}

.header-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4) 0;
}

.brand{
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.nav{
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

/* Mobile menu button (hidden on desktop) */
.nav-toggle{
  display: none;
  border: 1px solid var(--border);
  background: var(--bg);
  border-radius: 10px;
  padding: 0.5rem 0.7rem;
  font-weight: 600;
}


/* ============================================================
   3) RESPONSIVE NAV (MOBILE) ✅ POLISHED (ANIMATED)
   - JS toggles: #site-nav[data-open="true|false"]
   - Uses max-height + opacity for reliable animation
   - No display toggling (so animation can run)
   ============================================================ */
@media (max-width: 820px){
  .nav-toggle{ display: inline-flex; }

  .header-inner{
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .brand{ order: 0; }

  .nav-toggle{
    order: 1;
    margin-left: auto;
  }

  /* Base mobile nav (always flex; we animate open/close) */
  #site-nav{
    order: 2;
    width: 100%;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-2);

    /* spacing */
    margin-top: var(--s-2);
    padding-top: var(--s-3);

    /* closed state */
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;

    /* animation */
    transition:
      max-height 220ms ease,
      opacity 180ms ease;
  }

  /* Open state */
  #site-nav[data-open="true"]{
    max-height: 60vh;           /* plenty for your links */
    opacity: 1;
    pointer-events: auto;

    border-top: 1px solid var(--border);
    padding-bottom: var(--s-3);
  }

  /* Links: full-width tap targets */
  #site-nav a{
    display: block;
    width: 100%;
    padding: 0.6rem 0.75rem;
  }

  /* Controlled tap feedback (instead of OS dark flash) */
  #site-nav a:active{
    background: color-mix(in srgb, var(--surface) 70%, transparent);
    text-decoration: none;
  }

  /* Respect reduced-motion */
  @media (prefers-reduced-motion: reduce){
    #site-nav{ transition: none; }
  }
}


/* ============================================================
   4) HERO POLISH (SAFE “ZUSH”)
   ============================================================ */
.main .section:first-of-type{
  position: relative;
  overflow: hidden;
}

.main .section:first-of-type::after{
  content: "";
  position: absolute;
  inset: -120px -80px auto -80px;
  height: 520px;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(420px 260px at 20% 45%, rgba(37,99,235,.10), transparent 60%),
    radial-gradient(520px 320px at 72% 30%, rgba(16,24,40,.06), transparent 62%);
  filter: blur(6px);
  opacity: .9;
}

.main .section:first-of-type > .container{
  position: relative;
  z-index: 1;
}

/* Accent rule under ONLY the first H1 on the page */
.main h1:first-of-type{
  position: relative;
  padding-bottom: var(--s-3);
}

.main h1:first-of-type::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 96px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(
    to right,
    var(--accent),
    color-mix(in srgb, var(--accent) 55%, white)
  );
  opacity: .95;
}


/* ============================================================
   5) SECTIONS (MAIN ONLY)
   ============================================================ */
.main .section{
  position: relative;
  padding: var(--s-7) 0;
  isolation: isolate; /* keeps divider behind content */
}

@media (max-width: 640px){
  .main .section{ padding: var(--s-6) 0; }
}

.main .section + .section{ padding-top: var(--s-6); }

.main .section:nth-of-type(even){
  background: linear-gradient(
    to bottom,
    transparent 0%,
    color-mix(in srgb, var(--surface) 92%, white) 10%,
    color-mix(in srgb, var(--surface) 92%, white) 90%,
    transparent 100%
  );
}

.main .section::before{
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(72%, var(--content));
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    color-mix(in srgb, var(--border) 60%, transparent),
    transparent
  );
  z-index: 0;
}

.main .section:first-of-type::before{ display: none; }

.main .section > .container{
  position: relative;
  z-index: 1;
}


/* ============================================================
   6) TYPOGRAPHY MEASURE
   ============================================================ */
.main .section p{ max-width: 65ch; }
.main .hero-lead{ max-width: none; }
.main .section:first-of-type p{ max-width: none; }


/* ============================================================
   7) GRID SYSTEM + CARD ALIGNMENT FIX (PREVENT “STEPPED” CARDS)
   ============================================================ */
.grid,
.grid-2{
  display: grid;
  gap: var(--s-5);
  align-items: stretch;
}

@media (max-width: 640px){
  .grid,
  .grid-2{ gap: var(--s-4); }
}

.grid-2{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 860px){
  .grid-2{ grid-template-columns: 1fr; }
}

/* Kill spacing artifacts inside grids */
.grid > * + *,
.grid-2 > * + *{ margin-top: 0 !important; }

.grid .card + .card,
.grid-2 .card + .card{ margin-top: 0 !important; }

.grid > * > .card,
.grid-2 > * > .card{ margin-top: 0 !important; }

/* Force equal-height + aligned cards in grids */
.grid > *,
.grid-2 > *{
  min-height: 0;
  height: 100%;
}

.grid > a,
.grid-2 > a{
  display: block;
  height: 100%;
}

.grid > .card,
.grid-2 > .card,
.grid > * > .card,
.grid-2 > * > .card{
  height: 100%;
  display: flex;
  flex-direction: column;
}

.card .card-footer{ margin-top: auto; }


/* ============================================================
   8) CARD STACKING SPACING (ONLY IN STACKS)
   ============================================================ */
.stack > .card + .card{ margin-top: var(--s-4); }
.stack-lg > .card + .card{ margin-top: var(--s-5); }
.stack-xl > .card + .card{ margin-top: var(--s-6); }


/* ============================================================
   9) FOOTER
   ============================================================ */
.site-footer{
  border-top: 1px solid var(--border);
  padding: var(--s-6) 0;
}