/* ==========================================================================
   kraflex  |  layout.css
   Page skeleton: containers, grids, header, hero, sections, footer.
   Mobile-first. Anything that changes per screen size lives in responsive.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CONTAINERS
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-lg);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--xl { max-width: var(--container-xl); }
.container--md { max-width: var(--container-md); }
.container--sm { max-width: var(--container-sm); }
.container--flush { padding-inline: 0; }

/* --------------------------------------------------------------------------
   2. SECTIONS
   -------------------------------------------------------------------------- */
.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: calc(var(--section-y) * 0.6); }
.section--alt   { background: var(--bg-alt); }
.section--dark  { background: var(--bg-dark); color: var(--text-on-dark); }
.section--darker{ background: var(--bg-darker); color: var(--text-on-dark); }

.section--dark h1, .section--dark h2, .section--dark h3,
.section--darker h1, .section--darker h2, .section--darker h3 { color: #fff; }
.section--dark .lead, .section--darker .lead { color: var(--text-muted-dark); }

/* Orange rule that separates dark bands */
.section--rule-bottom { border-bottom: 4px solid var(--accent); }

/* Standard section intro block */
.section-head { max-width: 64ch; margin-bottom: var(--sp-6); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head p { margin-top: var(--sp-2); }

/* --------------------------------------------------------------------------
   3. GRID HELPERS
   auto-fit + minmax means these reflow on every screen with no media query.
   -------------------------------------------------------------------------- */
.grid { display: grid; gap: var(--sp-3); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

/* Never more than two across, then one. The three above fit in as many columns
   as the screen has room for, which is what you want for cards and wrong for
   big pictures - grid--2 will quietly become three columns on a wide monitor.
   Use this one for photographs that need the space. 520px is what holds it to
   two: three of them would need 1608px and the widest container is 1480px. */
.grid--2up { grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr)); }

.grid--gap-lg { gap: var(--sp-5); }

/* Two-column text + media row (technology sections) */
.split {
  display: grid;
  gap: var(--sp-5);
  align-items: center;
  grid-template-columns: 1fr;
}

/* --------------------------------------------------------------------------
   4. SITE HEADER + NAVIGATION
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border-soft);
  transition: box-shadow var(--dur-base) var(--ease-soft),
              background var(--dur-base) var(--ease-soft);
}
/* .is-stuck is added by js/navigation.js once the page scrolls */
.site-header.is-stuck { box-shadow: var(--shadow-md); }

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  min-height: var(--header-h);
}

/* --- Logo ---------------------------------------------------------------- */
.brand { display: flex; align-items: center; gap: var(--sp-2); flex-shrink: 0; }
/* Size lives in variables.css as --logo-h (and steps up in responsive.css). */
.brand__logo { height: var(--logo-h); width: auto; }
.brand__text { display: none; }             /* revealed on wider screens */
.brand__name,
.brand__tag { display: block; }
.brand__name {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: var(--fw-bold);
  line-height: 1.1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--clr-charcoal);
}
.brand__tag {
  font-size: 0.62rem;
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* --- Hamburger ----------------------------------------------------------- */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap-min);
  height: var(--tap-min);
  background: none;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--clr-charcoal);
  transition: transform var(--dur-base) var(--ease-out),
              opacity var(--dur-fast) linear;
}
.nav-toggle__bars { position: relative; }
.nav-toggle__bars::before,
.nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after  { top:  6px; }

.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after  { transform: translateY(-6px) rotate(-45deg); }

/* --- Nav drawer (mobile default) ----------------------------------------- */
.main-nav {
  position: fixed;
  inset: var(--header-h) 0 auto 0;
  max-height: calc(100dvh - var(--header-h));
  overflow-y: auto;
  background: var(--clr-white);
  border-bottom: 1px solid var(--border-soft);
  box-shadow: var(--shadow-lg);
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out),
              visibility 0s linear var(--dur-base);
  z-index: var(--z-drawer);
}
.main-nav.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}

.nav-list { display: flex; flex-direction: column; padding: var(--sp-2) var(--gutter) var(--sp-4); }

.nav-item { border-bottom: 1px solid var(--border-soft); }
.nav-item:last-child { border-bottom: 0; }

.nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-1);
  width: 100%;
  min-height: 52px;
  padding: var(--sp-1) 0;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: var(--fw-semi);
  color: var(--clr-charcoal);
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
}
.nav-link:hover,
.nav-link[aria-current="page"] { color: var(--accent); }

/* Active page indicator */
.nav-item > .nav-link[aria-current="page"] { position: relative; }

/* --- Dropdown ------------------------------------------------------------ */
.nav-caret {
  width: 10px; height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--dur-base) var(--ease-out);
  flex-shrink: 0;
}
.nav-link[aria-expanded="true"] .nav-caret { transform: rotate(-135deg) translate(-2px, -2px); }

.nav-dropdown {
  display: grid;
  grid-template-rows: 0fr;                 /* animated height, no JS maths */
  transition: grid-template-rows var(--dur-base) var(--ease-out);
}
.nav-dropdown > ul { overflow: hidden; }
.nav-link[aria-expanded="true"] + .nav-dropdown { grid-template-rows: 1fr; }

.nav-dropdown a {
  display: block;
  padding: var(--sp-1) 0 var(--sp-1) var(--sp-3);
  min-height: var(--tap-min);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
  border-left: 2px solid var(--border-soft);
}
.nav-dropdown a:hover { color: var(--accent); border-left-color: var(--accent); }

/* CTA button sitting at the end of the nav */
.nav-cta { margin-top: var(--sp-2); }

/* Backdrop behind the open drawer */
.nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20, 23, 26, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-base) var(--ease-soft), visibility 0s linear var(--dur-base);
  z-index: var(--z-sticky);
}
.nav-backdrop.is-visible { opacity: 1; visibility: visible; transition-delay: 0s; }

/* Lock the page behind the drawer */
body.nav-open { overflow: hidden; }

/* --------------------------------------------------------------------------
   5. HERO
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto;   /* content centres, trust strip pins bottom */
  align-items: center;
  min-height: clamp(460px, 78vh, 900px);
  overflow: hidden;
  background: var(--clr-charcoal);
  color: #fff;
  isolation: isolate;
}

/* Full-bleed background layer. On its own it is a charcoal-to-bronze gradient.
   Drop an <img> inside it for a wide atmospheric photo:
     <div class="hero__media" aria-hidden="true">
       <img src="images/hero/xxx.jpg" alt="" data-eager>
     </div>
   Leave the <img> out, or point it at a file that does not exist, and the
   gradient shows instead - so the hero never looks broken. */
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  background-color: #6B4A31;
  background-image:
    radial-gradient(120% 90% at 78% 42%, rgba(196, 150, 108, 0.55) 0%, rgba(60, 44, 32, 0) 62%),
    linear-gradient(120deg, #1E2226 0%, #2B3036 42%, #6B4A31 100%);
}

.hero__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center right;
}

.hero__media .img-placeholder { display: none; }

/* --------------------------------------------------------------------------
   HERO PRODUCT PHOTO
   A cut-out product shot pinned to the right, half of it running off the edge
   of the screen and its left side dissolving into the background, so there is
   no visible picture frame anywhere.

   Use a PNG or WebP with a TRANSPARENT background, otherwise you will see the
   photo's own rectangle. Add it to the page like this:

     <figure class="hero__figure" aria-hidden="true">
       <img src="images/hero/hero-disc.webp" alt="" data-eager>
     </figure>

   Four dials, all optional. Put them in a style="" on the <figure>:

     --hero-photo-crop      how much runs off the right edge, as a share of
                            the picture. 50% = exactly half. 0% = all of it.
     --hero-photo-w         how big it is
     --hero-photo-fade      how long the dissolve on the left side is
     --hero-photo-opacity   how strong it looks against the background

   Remove the <figure> and the hero still looks finished - the gradient
   behind it takes over.
   -------------------------------------------------------------------------- */
.hero__figure {
  /* These are the PHONE values - they step up at each breakpoint in
     responsive.css. A style="" on the tag overrides them at every size. */
  --hero-photo-crop: 28%;
  --hero-photo-w: 72%;
  --hero-photo-fade: 40%;
  --hero-photo-opacity: 0.38;

  position: absolute;
  top: 50%;
  right: 0;
  width: var(--hero-photo-w);
  margin: 0;

  /* Percentages here are a share of the PICTURE, not of the screen, so the
     same amount is cropped on a phone, a laptop and a 4K TV. */
  translate: var(--hero-photo-crop) -50%;

  z-index: -1;                 /* above the dark scrim, below the text */
  pointer-events: none;
  user-select: none;
}

.hero__figure img {
  display: block;
  width: 100%;
  height: auto;
  opacity: var(--hero-photo-opacity);
  filter: saturate(1.05) brightness(1.06);

  /* The dissolve, in two parts that are multiplied together:
       1. left to right  - the main fade into the headline side
       2. top and bottom - softens the photo's own straight edges so it never
                           looks like a rectangle pasted onto the page
     Raise --hero-photo-fade for a longer, softer dissolve. */
  -webkit-mask-image:
    linear-gradient(to right,
      transparent 0%,
      rgba(0, 0, 0, 0.35) calc(var(--hero-photo-fade) * 0.55),
      #000 var(--hero-photo-fade)),
    linear-gradient(to bottom,
      transparent 0%, #000 18%, #000 82%, transparent 100%);
  mask-image:
    linear-gradient(to right,
      transparent 0%,
      rgba(0, 0, 0, 0.35) calc(var(--hero-photo-fade) * 0.55),
      #000 var(--hero-photo-fade)),
    linear-gradient(to bottom,
      transparent 0%, #000 18%, #000 82%, transparent 100%);

  /* Both gradients must agree before a pixel is drawn. */
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

/* Warm glow behind the photo so it sits in the scene rather than on top. */
.hero__figure::before {
  content: "";
  position: absolute;
  inset: -16%;
  z-index: -1;
  background: radial-gradient(closest-side circle at 50% 50%,
    rgba(245, 130, 32, 0.20) 0%,
    rgba(196, 150, 108, 0.10) 45%,
    rgba(0, 0, 0, 0) 72%);
}

/* If the file is missing, stay quiet and let the gradient show, rather than
   dropping the grey "missing image" card into the middle of the hero. */
.hero__figure .img-placeholder { display: none; }

/* Scrim keeps the headline readable over any photo */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    100deg,
    rgba(20, 23, 26, 0.94) 0%,
    rgba(20, 23, 26, 0.86) 34%,
    rgba(20, 23, 26, 0.52) 62%,
    rgba(20, 23, 26, 0.30) 100%
  );
}

.hero__inner { position: relative; padding-block: clamp(var(--sp-8), 9vw, var(--sp-16)); }
.hero__content { max-width: 46rem; }

/* Optional logo above the eyebrow.
   The width and height on the tag reserve the space so the headline does not
   jump as the picture loads - but they do not size it, because the global
   `img { height: auto }` rule overrides the height attribute. This is what
   actually sets the size. Change the 220px and everything else follows.
   Desktop gets a larger one - see `.hero__logo` in responsive.css.
   Use a picture with a TRANSPARENT background and light artwork: the hero is
   near-black, so the dark-navy version of the logo disappears into it. */
.hero__logo {
  width: 220px;
  height: auto;
  max-width: 62%;              /* shrinks on a small phone, never overflows */
  margin-bottom: var(--sp-3);
}

.hero__title {
  font-size: var(--fs-display);
  font-weight: var(--fw-black);
  line-height: 0.98;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  margin-bottom: var(--sp-3);
}
.hero__text {
  font-size: var(--fs-lead);
  color: #D9E0E6;
  max-width: 46ch;
  margin-bottom: var(--sp-4);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* Slim trust strip pinned under the hero */
.hero__strip {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(20, 23, 26, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.hero__strip ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  padding-block: var(--sp-2);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: #C4CDD5;
}
.hero__strip li { display: flex; align-items: center; gap: var(--sp-1); }
.hero__strip li::before { content: ""; width: 7px; height: 7px; background: var(--accent); flex-shrink: 0; }

/* --------------------------------------------------------------------------
   6. PAGE HEADER (interior pages)
   -------------------------------------------------------------------------- */
.page-hero {
  position: relative;
  background: var(--clr-charcoal);
  color: #fff;
  padding-block: clamp(var(--sp-6), 6vw, var(--sp-12));
  border-bottom: 4px solid var(--accent);
  overflow: hidden;
}
.page-hero::after {           /* faint diagonal texture nodding to the logo X */
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg, transparent 45%, rgba(245, 130, 32, 0.10) 46%, transparent 47%),
    linear-gradient(245deg, transparent 60%, rgba(255, 255, 255, 0.05) 61%, transparent 62%);
  pointer-events: none;
}
.page-hero__title { font-size: var(--fs-h1); text-transform: uppercase; }
.page-hero p { color: var(--text-muted-dark); margin-top: var(--sp-2); max-width: 62ch; }

/* --------------------------------------------------------------------------
   7. FOOTER
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--bg-darker);
  color: var(--text-muted-dark);
  padding-top: var(--sp-8);
  border-top: 4px solid var(--accent);
}
.footer-grid {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: 1fr;
  padding-bottom: var(--sp-6);
}
.footer-col h4 {
  font-family: var(--font-heading);
  font-size: 1rem;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: #fff;
  margin-bottom: var(--sp-2);
}
.footer-col ul li { margin-bottom: var(--sp-1); }
.footer-col a { color: var(--text-muted-dark); font-size: var(--fs-small); display: inline-block; min-height: 32px; }
.footer-col a:hover { color: var(--accent); }

/* Buttons in the footer keep their own text colour. Without this the two rules
   above win - .footer-col a is more specific than .btn--primary - and the
   Request a Quote button ends up muted grey on its own orange background. */
.footer-col a.btn,
.footer-col a.btn:hover { color: #fff; }

.footer-brand__logo { height: var(--logo-h-footer); width: auto; margin-bottom: var(--sp-2); }
.footer-brand p { font-size: var(--fs-small); max-width: 40ch; }

.footer-contact li {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  font-size: var(--fs-small);
  margin-bottom: var(--sp-2);
  align-items: flex-start;
}
.footer-contact strong { color: #fff; font-weight: var(--fw-semi); }

/* A contact line that carries a nested list - the two works addresses, say.
   The line is a flex row, so a plain <br> inside it does nothing; what drops
   the list onto its own line is flex-basis 100%, which makes it too wide to
   share the row with the label. */
.footer-contact li > ul {
  flex: 1 0 100%;
  padding-left: var(--sp-2);
  border-left: 1px solid rgba(255, 255, 255, 0.12);
}
.footer-contact li > ul > li {
  display: block;              /* these read as text, not as a flex row */
  line-height: 1.5;
  margin-bottom: var(--sp-2);
}
.footer-contact li > ul > li:last-child { margin-bottom: 0; }

/* Plant name on its own line - the footer column is too narrow to keep the
   label and a full address side by side without ragged wrapping. */
.footer-contact li > ul strong { display: block; }

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  padding-block: var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  align-items: center;
  text-align: center;
  font-size: var(--fs-micro);
}
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); justify-content: center; }