/* Shared kit styles — extends colors_and_type.css */

/* Layout */
.kit-page { background: var(--cream); color: var(--green); min-height: 100vh; }

/* Header / Nav
   Height is pinned to --nav-h (rather than derived from padding + logo) so the
   home hero can slide up underneath it by exactly one nav height at every
   breakpoint, and so Header.jsx can measure it in one read. */
.kit-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: var(--nav-h);
  /* Track the centered content column rather than the window edge, so the nav
     links stay flush with the page below them — on a 34" display a plain
     --gutter would strand them 500px out in the margin. Falls back to --gutter
     as soon as the viewport is narrower than the content measure. */
  padding-inline: max(var(--gutter), calc((100% - var(--maxw)) / 2));
  padding-block: 0;
  gap: 24px;
  background: var(--cream);
  position: sticky; top: 0; z-index: 50;
  border-bottom: 1px solid var(--hairline-soft);
  transition: background 320ms var(--ease-soft), border-color 320ms var(--ease-soft);
}

/* Transparent overlay variant — shown over the home hero until it scrolls past */
.kit-nav--overlay {
  background: transparent;
  border-bottom-color: transparent;
}
.kit-nav--overlay .kit-nav__link {
  color: var(--cream);
  /* Just enough lift to stay legible over lighter photos */
  text-shadow: 0 1px 3px rgba(31, 32, 16, 0.35);
}
.kit-nav--overlay .kit-nav__link:hover { color: var(--rose); }
.kit-nav--overlay .kit-nav__link.is-active::after { background: var(--cream); }
.kit-nav--overlay .kit-brand img { filter: drop-shadow(0 1px 4px rgba(31, 32, 16, 0.35)); }
.kit-nav__left, .kit-nav__right { display: flex; gap: clamp(18px, 2.4vw, 36px); align-items: center; }
.kit-nav__left  { grid-column: 1; grid-row: 1; }
.kit-brand      { grid-column: 2; grid-row: 1; }
.kit-nav__right { grid-column: 3; grid-row: 1; justify-content: flex-end; }
.kit-nav__link {
  font-family: var(--font-sans);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--green); text-decoration: none;
  padding: 8px 0;
  border: none; background: transparent; cursor: pointer;
  position: relative;
  transition: color 240ms var(--ease-soft);
}
.kit-nav__link:hover { color: var(--clay); }
.kit-nav__link.is-active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--clay);
}
.kit-brand { text-align: center; cursor: pointer; user-select: none; min-width: 0; }
.kit-brand img {
  height: var(--logo-h, 56px); width: auto; margin: 0 auto;
  /* Scale (not height) so the nav's layout height stays exactly --nav-h */
  transform-origin: center top;
  transition: transform 320ms var(--ease-soft);
}
/* Over the hero: enlarge the primary logo so its wordmark reads clearly;
   shrinks back to --logo-h as the solid nav fades in on scroll. */
.kit-nav--overlay .kit-brand img { transform: scale(var(--logo-scale, 2)); }

/* ---- Hamburger (tablet + phone only) ------------------------------------ */
.kit-nav__burger {
  display: none;
  grid-column: 1; grid-row: 1; justify-self: start;
  /* 44px square keeps the tap target at the accessibility minimum; the pull-left
     cancels the bars' 10px inset so the icon itself lines up with the content
     edge below, not the tap box. */
  width: 44px; height: 44px; padding: 0; margin-left: -10px;
  background: transparent; border: none; cursor: pointer;
  position: relative;
}
.kit-nav__burger span {
  position: absolute; left: 10px; width: 24px; height: 1.5px;
  background: var(--green);
  transition: transform 300ms var(--ease-soft), opacity 200ms var(--ease-soft),
              background-color 320ms var(--ease-soft);
}
.kit-nav__burger span:nth-child(1) { top: 15px; }
.kit-nav__burger span:nth-child(2) { top: 21px; }
.kit-nav__burger span:nth-child(3) { top: 27px; }
.kit-nav--overlay .kit-nav__burger span { background: var(--cream); }
/* Open state: top and bottom bars cross, middle fades out */
.kit-nav__burger.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.kit-nav__burger.is-open span:nth-child(2) { opacity: 0; }
.kit-nav__burger.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Scroll-locking the body (below) stops it being a scroll container, which
   drops this sticky bar back to its static position at the top of the document
   — off screen whenever the page is scrolled, leaving a live strip of the page
   showing above the drawer. Pinning it for the duration of the drawer keeps the
   bar, its logo and its close button where they belong. Header.jsx restores the
   scroll offset on close, since going fixed takes the bar out of flow. */
.kit-nav--menu-open {
  position: fixed; top: 0; left: 0; right: 0;
  padding-right: calc(max(var(--gutter), (100% - var(--maxw)) / 2) + var(--scrollbar-w, 0px));
}

/* ---- Slide-down menu drawer --------------------------------------------- */
.nav-drawer {
  position: fixed; top: var(--nav-h); left: 0; right: 0; bottom: 0;
  background: var(--cream);
  padding: clamp(24px, 6vw, 56px) var(--gutter) 32px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: calc(var(--gutter) + var(--scrollbar-w, 0px));
  display: flex; flex-direction: column; justify-content: space-between; gap: 40px;
  opacity: 0; visibility: hidden; transform: translateY(-12px);
  transition: opacity 300ms var(--ease-soft), transform 300ms var(--ease-soft),
              visibility 0s linear 300ms;
}
.nav-drawer.is-open {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity 300ms var(--ease-soft), transform 300ms var(--ease-soft),
              visibility 0s linear 0s;
}
.nav-drawer__links { display: flex; flex-direction: column; }
.nav-drawer__link {
  display: flex; align-items: baseline; gap: 16px;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(27px, 7.4vw, 44px); line-height: 1.1;
  color: var(--green); text-align: left;
  background: transparent; border: none; cursor: pointer;
  padding: clamp(12px, 2.4vw, 18px) 0;
  border-bottom: 1px solid var(--hairline-soft);
  transition: color 240ms var(--ease-soft);
}
.nav-drawer__link:last-child { border-bottom: none; }
.nav-drawer__link.is-active,
.nav-drawer__link:hover { color: var(--clay); }
.nav-drawer__link.is-active em, .nav-drawer__link em { font-style: italic; }
.nav-drawer__num {
  font-family: var(--font-sans); font-size: 10px; font-weight: 600;
  letter-spacing: 0.28em; color: var(--clay); opacity: 0.75;
  flex: none; width: 32px;
}
.nav-drawer__foot {
  display: flex; flex-direction: column; gap: 10px;
  font-family: var(--font-sans); font-size: 11px;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--fg-muted);
}
.nav-drawer__foot a { color: var(--clay); text-decoration: none; }

/* Tablet + phone: swap the split link rows for the hamburger drawer.
   (--logo-h / --nav-h step down at the same breakpoints in colors_and_type.css.) */
@media (max-width: 1024px) {
  .kit-nav__left, .kit-nav__right { display: none; }
  .kit-nav__burger { display: block; }
}

/* Buttons */
.kit-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  font-family: var(--font-sans);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.28em; text-transform: uppercase;
  padding: 16px 32px;
  max-width: 100%; text-align: center;
  background: transparent;
  color: var(--green);
  border: 1px solid var(--green);
  border-radius: 0;
  cursor: pointer;
  transition: all 280ms var(--ease-soft);
  text-decoration: none;
}
.kit-btn:hover { background: var(--green); color: var(--cream); }
.kit-btn--primary { background: var(--clay); color: var(--cream); border-color: var(--clay); }
.kit-btn--primary:hover { background: #8A4D38; border-color: #8A4D38; }
.kit-btn--ghost { border-color: transparent; padding: 8px 0; }
.kit-btn--ghost::after { content: ""; width: 28px; height: 1px; background: currentColor; transition: width 280ms var(--ease-soft); }
.kit-btn--ghost:hover { background: transparent; color: var(--clay); }
.kit-btn--ghost:hover::after { width: 56px; }
.kit-btn--lg { padding: 20px 40px; font-size: 12px; }

/* Eyebrow + rule combos */
.kit-eyebrow {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--font-sans);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--clay);
}
.kit-eyebrow::before, .kit-eyebrow::after { content: ""; height: 1px; width: 36px; background: currentColor; opacity: 0.6; }

.kit-rule { width: 56px; height: 1px; background: var(--clay); border: none; margin: 24px 0; }
.kit-rule--center { margin-left: auto; margin-right: auto; }

/* Photo placeholders — gradient stand-ins for real photography */
.kit-photo {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #DBBEB6 0%, #A25C43 100%);
  border-radius: 2px;
}
.kit-photo--warm   { background: linear-gradient(150deg, #F4E7E2 0%, #DBBEB6 50%, #A25C43 100%); }
.kit-photo--rose   { background: linear-gradient(160deg, #F4E7E2, #DBBEB6); }
.kit-photo--green  { background: linear-gradient(160deg, #6B6C44, #343516); }
.kit-photo--garden { background: linear-gradient(135deg, #A8B07A, #6B6C44 60%, #343516); }
.kit-photo--field  { background: linear-gradient(140deg, #F0EAD9, #DBBEB6 50%, #A25C43); }
.kit-photo--dusk   { background: linear-gradient(180deg, #DBBEB6, #A25C43 60%, #5F3527); }
.kit-photo::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 80% at 50% 100%, transparent 50%, rgba(52,53,22,0.18));
  pointer-events: none;
}
.kit-photo__cap {
  position: absolute; left: 16px; bottom: 14px;
  font-family: var(--font-sans); font-size: 9px;
  letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--cream); opacity: 0.78; z-index: 1;
}

/* Section + headlines */
.kit-section { padding: var(--gutter-y) 0; }
.kit-section--dark { background: var(--green); color: var(--cream); }
.kit-section--dark .kit-eyebrow { color: var(--rose); }
.kit-section--dark .kit-rule { background: var(--rose); }

.kit-headline {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-wrap: balance;
  margin: 0;
}
.kit-headline--xl { font-size: clamp(38px, 8vw, 112px); font-style: italic; font-weight: 300; }
.kit-headline--lg { font-size: clamp(29px, 5.2vw, 72px); }
.kit-headline--md { font-size: clamp(24px, 3.6vw, 48px); }

.kit-headline em { font-style: italic; color: var(--clay); font-weight: 300; }
.kit-headline .stroke { color: transparent; -webkit-text-stroke: 1px var(--green); }
.kit-section--dark .kit-headline .stroke { -webkit-text-stroke-color: var(--cream); }

.kit-lede {
  font-family: var(--font-sans);
  font-size: clamp(14px, 1.2vw, 15px); font-weight: 500;
  letter-spacing: 0.12em; line-height: 1.75;
  max-width: 56ch;
  color: var(--fg-muted);
}

/* Footer */
.kit-footer { background: var(--green); color: var(--cream); padding: clamp(40px, 6vw, 56px) var(--gutter) 24px; }
.kit-footer__inner { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: clamp(28px, 3.5vw, 40px); }
.kit-footer h6 {
  font-family: var(--font-sans); font-size: 10px; font-weight: 600;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--rose); margin: 0 0 14px;
}
.kit-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.kit-footer a {
  font-family: var(--font-sans); font-size: 13px; font-weight: 400;
  letter-spacing: 0.1em; color: var(--cream); text-decoration: none; opacity: 0.78;
}
.kit-footer a:hover { opacity: 1; color: var(--rose); }
.kit-footer__bottom {
  max-width: var(--maxw); margin: 36px auto 0;
  padding-top: 18px; border-top: 1px solid rgba(255,252,247,0.14);
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 10px 24px;
  font-family: var(--font-sans); font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(255,252,247,0.55);
}
.kit-footer__mark img { height: 64px; width: auto; opacity: 0.9; }

/* Instagram, sitting under the brand tagline. Icon + handle together so the
   single link still reads as a deliberate element rather than a stray glyph. */
.kit-footer__ig {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 22px; padding: 8px 0;
  color: var(--cream); opacity: 0.78; text-decoration: none;
  font-family: var(--font-sans); font-size: 12px;
  letter-spacing: 0.18em; text-transform: lowercase;
  transition: opacity 240ms var(--ease-soft), color 240ms var(--ease-soft);
}
.kit-footer__ig:hover { opacity: 1; color: var(--rose); }
.kit-footer__ig svg {
  width: 19px; height: 19px; display: block; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.4;
  stroke-linecap: round; stroke-linejoin: round;
}
.kit-footer__ig svg .is-filled { fill: currentColor; stroke: none; }

/* ========================================================================
   Kit breakpoints
   ======================================================================== */

/* Landscape tablet / small laptop */
@media (max-width: 1024px) {
  .kit-btn--lg { padding: 18px 32px; font-size: 11px; }
}

/* Portrait tablet */
@media (max-width: 900px) {
  .kit-footer__inner { grid-template-columns: repeat(2, 1fr); }
  /* Brand block reads as a masthead above the two link groups */
  .kit-footer__inner > :first-child { grid-column: 1 / -1; margin-bottom: 8px; }
  .kit-footer__mark img { height: 52px; }
}

/* Phone */
@media (max-width: 560px) {
  .kit-btn { padding: 15px 26px; letter-spacing: 0.22em; }
  .kit-btn--lg { padding: 17px 28px; }
  .kit-footer__bottom { justify-content: center; text-align: center; }
  .kit-eyebrow { letter-spacing: 0.24em; }
  /* The side rules eat too much width next to a centered eyebrow on a phone */
  .kit-eyebrow::before, .kit-eyebrow::after { width: 20px; }
}