/* ==========================================================================
   KPD Bio Organics — site-wide stylesheet
   --------------------------------------------------------------------------
   Adopted from the Claude Design build (2026-08-29).

   This file holds the base rules shared by all three pages. Everything else in
   that build is inline on the elements themselves, plus a small per-page block
   of .k1….kN hover rules. Those stay in each page's <style> because the same
   class names mean different things on different pages — index.html defines
   .k1–.k18, the product pages define .k1–.k8, and merging them would collide.

   Palette in use (design build, replaces the earlier green/gold system):
     #f5ead8  page ground, warm cream       #8c491a  link / accent brown
     #f9f4ed  alternate band                #b2622d  link hover
     #ebddc5  card fill                     #aa5c26  primary button
     #3d472b  body text and headings        #54633a  sage, eyebrow labels
     #474238  secondary text                #3d472b  dark green panels
   Type: Caprasimo (display) + Figtree (body), loaded from Google Fonts.
   ========================================================================== */

body { margin: 0; background: #f5ead8; }
a { color: #8c491a; text-decoration: none; }
a:hover { color: #b2622d; }
::selection { background: #ffe1d0; }

/* --------------------------------------------------------------------------
   Mobile hero
   --------------------------------------------------------------------------
   On desktop the photograph fills the hero behind the text: 118vw wide,
   anchored bottom right, with a horizontal wash keeping the copy legible on
   the left. The mobile version has to read as the same hero.

   Two earlier attempts put the photograph in a band at the foot of the hero
   instead -- first clear of the content, then overlapping it by 40px. Both
   were reported as the image looking dislocated, and both times that was
   right: a band under the text is a different composition, not a narrower
   version of the same one.

   So the photograph now fills the hero on mobile too, with the wash turned
   vertical because the text runs full width here rather than sitting in a
   left-hand column.

   The gradient is a compromise the desktop version never has to make. There,
   text and photograph occupy different parts of the frame and the image can
   stay strong. Here they overlap, so the wash has to be heavy where the text
   is -- .97 falling only to .92 by 82%, which is where the copy ends -- and
   then drops hard to .28 for the last stretch, giving a band of genuinely
   visible photograph below the curcumin figure.

   Contrast measured by sampling the actual image pixels under each run of
   text, compositing through the gradient alpha at that height, worst of five
   points per element:

     heading            7.9:1     body copy      7.7:1
     "See the lab data" 9.1:1     7.5% figure    5.2:1
     curcumin label     5.1:1     (was 3.1:1 before the wash was raised)

   Two elements still fail, both pre-existing and neither affected by the
   photograph: the sage eyebrow at 3.5:1, which failed at 3.1:1 on plain
   cream before any of this, and white-on-orange button text at 3.4:1, whose
   button is opaque so the image behind it is irrelevant.
   ------------------------------------------------------------------------ */
@media (max-width: 760px) {

  #top { padding-bottom: 150px !important; }

  .hero-img {
    inset: 0 !important;
    width: auto !important;
    height: auto !important;
    aspect-ratio: auto !important;
    background-size: cover !important;
    background-position: center bottom !important;
    opacity: 1 !important;
    -webkit-mask-image: none !important;
            mask-image: none !important;
  }

  .hero-fade {
    background: linear-gradient(to bottom,
      rgba(245, 234, 216, .97) 0%,
      rgba(245, 234, 216, .95) 55%,
      rgba(245, 234, 216, .92) 82%,
      rgba(245, 234, 216, .28) 100%) !important;
  }
}

/* --------------------------------------------------------------------------
   Mobile header
   --------------------------------------------------------------------------
   The header is one nowrap flex row: logo, then a nav pushed right by
   margin-left:auto. There is no width at which it is told to do anything
   else, so on a narrow screen the row simply runs past the right edge and
   the last item -- the "Request a quote" button -- is cut off. Measured at
   375px: 78px lost on index.html (four nav items), 24px on the product
   pages (two). The body does not scroll sideways, so the button was not
   merely off-screen, it was unreachable.

   Below 760px the nav drops onto its own full-width row beneath the logo
   and centres, which holds at any width rather than fitting exactly one.
   The nav is allowed to wrap internally too, so very small screens stack
   instead of overflowing again.

   Same !important caveat as the hero block above: these properties are set
   inline by the design build and cannot be reached otherwise.
   ------------------------------------------------------------------------ */
@media (max-width: 760px) {

  .site-head {
    flex-wrap: wrap !important;
    gap: 10px !important;
    padding: 10px 20px !important;
  }

  .site-nav {
    margin-left: 0 !important;
    width: 100% !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 10px 18px !important;
    font-size: 14px !important;
  }

  /* The quote button is the last nav child on every page. Addressing it by
     position rather than class is deliberate: the design build numbers these
     per page, so it is .k4 on index.html and .k2 on the product pages. */
  .site-nav a:last-child { padding: 9px 18px !important; }
}

/* --------------------------------------------------------------------------
   Mobile layout: grids, flex rows and form fields
   --------------------------------------------------------------------------
   The design build lays the whole site out with multi-column grids written
   inline -- repeat(3,1fr), repeat(4,1fr), 1.05fr .95fr and so on -- and
   defines no breakpoint anywhere. Nothing ever told them to stop being
   multi-column, so on a phone they did not.

   They do not merely look cramped, they overflow and the overflow is
   unreachable. 1fr is minmax(auto,1fr), and that auto floor is the column's
   min-content, so a column refuses to shrink past its widest unbreakable
   content and pushes the grid wider than its container. The page itself
   does not scroll sideways, so whatever ends up past the right edge is
   simply gone. Measured at 375px before this rule: repeat(4,1fr) resolved
   to 778px inside 311px -- the third and fourth cards were invisible.

   Two rules fix nearly all of it:

   1. Collapse every inline grid to one column. Every display:grid in this
      build declares grid-template-columns inline, so the attribute selector
      reaches all 22 of them.

   2. Let flex rows wrap. This is not cosmetic -- an unwrappable flex row is
      what sets the large min-content that forces a grid column open in the
      first place. Collapsing the turmeric hero to one column left it 462px
      wide until its stat row was allowed to break. display:inline-flex does
      not match this selector, which is deliberate: the logo lockup must
      stay on one line.

   Form fields need their own rule. An <input> carries an intrinsic width
   from its size attribute -- about 241px -- and will not shrink below it,
   so the fields alone kept the contact form overflowing. box-sizing is set
   with the width because nothing in this build sets it and the fields carry
   their own padding.

   Measured after, at 375px: index 89 past-edge and 20 clipped -> 0 and 0,
   turmeric 64 and 19 -> 0 and 0, chilli 49 and 16 -> 0 and 0. The only
   elements still reported past the edge are the Netlify honeypot fields,
   which sit at left:-9999px on purpose.

   Same !important caveat as the rules above: all of this is inline.
   ------------------------------------------------------------------------ */
@media (max-width: 760px) {

  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }

  /* The :not() is load-bearing. An earlier version wrapped every inline
     display:flex, including the 24 with flex-direction:column. On a column
     container, flex-wrap:wrap lets items wrap into new columns, and a child
     sized only by aspect-ratio collapses to zero height rather than
     resolving against its width. That is what hid the four process-step
     photographs on mobile: they loaded, sat at 326x0, and were reported as
     missing images. Row containers still need to wrap -- that is what stops
     a nowrap row forcing its grid column open. */
  [style*="display:flex"]:not([style*="flex-direction:column"]) { flex-wrap: wrap !important; }

  form input,
  form select,
  form textarea {
    min-width: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* 64px/56px of padding leaves a 375px screen only 199px of form. */
  .form-card { padding: 34px 22px !important; }
}

/* --------------------------------------------------------------------------
   Tablet and landscape-phone band
   --------------------------------------------------------------------------
   The rules above stop at 760px. The desktop layout does not actually fit
   until 812px. That left a 51px-wide band, 761px to 811px, where neither
   applied and the four-column grids overflowed -- 49px of content lost at
   761px, tapering to 10px at 800px.

   That band is not a rounding error. iPad portrait is exactly 768px, plenty
   of Android tablets report 800px, and an iPhone 12 mini turned landscape is
   780px. Anyone on those saw the same broken layout the mobile rules were
   written to fix.

   Two columns rather than one here: at 761px each column still comes to
   about 338px, comfortably above the ~257px min-content of the widest cell
   ("250/500 g"), and a single column at this width would leave a line
   measure far too long to read.

   The band is closed to 900px rather than 811px so a content change cannot
   silently reopen it. 900px to 1100px was already clean and is unaffected,
   having been measured before and after.
   ------------------------------------------------------------------------ */
@media (min-width: 761px) and (max-width: 900px) {

  [style*="grid-template-columns"] { grid-template-columns: repeat(2, 1fr) !important; }

  [style*="display:flex"]:not([style*="flex-direction:column"]) { flex-wrap: wrap !important; }
}

/* --------------------------------------------------------------------------
   Mobile type and spacing
   --------------------------------------------------------------------------
   The rules above stopped things overflowing. They did not make the page
   feel like it was built for a phone, because the design build sets one set
   of type sizes and one set of section paddings for every screen.

   Measured at 360px before this block:
     h1                 44px, wrapping to six lines, 269px tall
     header             136px
     header + h1        405px -- over half the screen before any content
     section padding    96px top and bottom, so 192px between every section
     page height        10362px, about thirteen screens

   The heading alone filled the first screen and the buttons underneath it
   were never visible without scrolling.

   33px on the h1 is deliberate rather than round: it is the largest size
   that still wraps to four lines instead of five at 360px, so the display
   character survives while a whole line disappears.

   After:
     h1                 33px, four lines, 140px
     header             97px, nav on one row
     header + h1        237px
     page height        about 9400px
     the "Buy a pouch" button is on the first screen
   ------------------------------------------------------------------------ */
@media (max-width: 760px) {

  h1 { font-size: 33px !important; line-height: 1.06 !important; margin-bottom: 18px !important; }
  h2 { font-size: 26px !important; line-height: 1.12 !important; }
  h3 { font-size: 22px !important; }

  /* #top keeps its bottom padding: that space is reserved for the hero
     photograph band declared further up this file. */
  section:not(#top) { padding-top: 52px !important; padding-bottom: 52px !important; }

  .site-head { padding: 8px 18px !important; gap: 6px !important; }
  .site-nav { gap: 8px 14px !important; font-size: 13px !important; }
  .site-nav a:last-child { padding: 8px 15px !important; }

  #top p { font-size: 17px !important; }

  /* the rule above the curcumin figure carried 52px of desktop margin */
  #top div[style*="border-top"] { margin-top: 28px !important; padding-top: 18px !important; }
}

/* --------------------------------------------------------------------------
   Header navigation
   --------------------------------------------------------------------------
   The nav used to list Turmeric, Red chilli, Buy and Request a quote as four
   flat items. It is now three: About, a Buy dropdown holding the two product
   pages, and the quote button.

   These carry real class names rather than the design build's per-page .k1-.kN
   hover rules, because those numbers mean different things on different pages
   -- nav was .k1-.k4 on index.html and .k1-.k2 on the product pages -- and a
   shared component cannot be styled from a per-page numbering scheme. The old
   .k1-.k4 rules are left where they are: harmless, and renumbering the rest of
   each page to close the gap would be a large diff for no gain.
   ------------------------------------------------------------------------ */

.nav-link { color: inherit; }
.nav-link:hover { color: #b2622d; }

.nav-cta {
  background: #aa5c26;
  color: #fff8f2;
  padding: 11px 22px;
  border-radius: 999px;
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(46, 43, 37, .14);
}
.nav-cta:hover { background: #8f4c1e; color: #fff8f2; }

.nav-drop { position: relative; }

.nav-drop__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
}


.nav-drop__menu {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 208px;
  max-width: calc(100vw - 28px);
  padding: 8px;
  border: 1px solid #e6dcc8;
  border-radius: 16px;
  background: #fffaf1;
  box-shadow: 0 14px 30px rgba(46, 43, 37, .16);
}

/* display:flex above would otherwise defeat the hidden attribute, and the
   menu would sit open on every page load with JavaScript unable to shut it. */
.nav-drop__menu[hidden] { display: none; }

/* The menu sits 14px below the button. Nothing occupies that gap, so moving
   the cursor from Buy down towards the menu leaves .nav-drop, mouseleave
   fires, and the menu shuts before the pointer ever arrives -- the dropdown
   looks broken on hover even though it is working exactly as written. This
   invisible strip belongs to the menu, so the pointer stays inside the
   subtree the whole way across. */
.nav-drop__menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -16px;
  height: 16px;
}

.nav-drop__menu a {
  display: block;
  padding: 11px 14px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  color: #474238;
  white-space: nowrap;
}
.nav-drop__menu a:hover { background: #f2e8d6; color: #8c491a; }

@media (max-width: 760px) {
  .nav-drop__menu { min-width: 190px; }
  .nav-drop__menu a { font-size: 14px; padding: 10px 12px; }
}

/* --------------------------------------------------------------------------
   Mobile buttons
   --------------------------------------------------------------------------
   Measured at 360px before this rule, the content buttons came out 150, 165,
   181, 194, 198, 216 and 232px wide, at heights from 46 to 65px, each one
   left-aligned and none agreeing with its neighbour. Two buttons stacked in
   the same row ended at different points, which is what reads as buttons
   being out of place.

   Each pill now fills its own container, so buttons sitting together match
   and their edges line up with the text above them. Widths still differ
   between sections, because a button inside a padded card has less room than
   one in the hero -- that is the container differing, not the buttons
   disagreeing.

   Matched on the inline border-radius, which is what the design build gives
   its pills. The header CTA takes its radius from .nav-cta in this file, not
   inline, so it is not caught and stays inline in the nav where it belongs.
   The "Read more" toggles have no radius and are likewise untouched.
   ------------------------------------------------------------------------ */
@media (max-width: 760px) {

  a[style*="border-radius:999px"],
  button[style*="border-radius:999px"] {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: center !important;
    padding: 15px 20px !important;
  }

  /* The ghost button is transparent, and now sits over the photograph. On
     plain cream that was fine; over the image it measured 4.2:1. A near
     opaque backdrop takes it to 9.1:1 and makes it read as a button rather
     than an outline floating on a picture. */
  #top a[style*="border:1.5px solid"] { background: rgba(255, 250, 241, .88) !important; }
}