/* Makhanley responsive layer — loaded LAST on every page.
   Purpose: make the existing design adapt to every screen size.
   It changes layout behaviour only (sizing, wrapping, scaling); colours,
   typography, imagery and composition at the 1280px desktop design are untouched.

   Breakpoints used (match the existing system):
     <  768px   phones            (mobile-responsive.css owns most rules)
     768–1023   tablets / small laptops
     1024–1279  laptops
     1280–1919  desktop (the original design — unchanged)
     >= 1920    large / ultra-wide monitors (proportional scaling)
*/

/* -------------------------------------------------------------
   0. Global safety
   ------------------------------------------------------------- */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

img,
video,
canvas {
  max-width: 100%;
}

/* Long words / emails / URLs must never push a layout wider than the screen */
p,
li,
h1,
h2,
h3,
h4,
a,
address {
  overflow-wrap: break-word;
}

/* Decorative star on the homepage can poke past the viewport edge */
.home-page #roots {
  overflow-x: clip;
}

/* -------------------------------------------------------------
   1. Homepage hero — never clip content on short screens
      (1366x768 / 1280x720 laptops, landscape phones, split-screen windows)
   ------------------------------------------------------------- */
@media (min-width: 768px) {
  .home-page #home {
    height: auto;
    min-height: calc(100vh - var(--site-header-height));
    min-height: calc(100svh - var(--site-header-height));
    padding-block: clamp(1rem, 3vh, 3rem) 4.5rem; /* bottom room for the scroll arrow */
  }
}

/* Laptops with short screens (e.g. 1366x768): ease the headline down so the
   whole hero, buttons included, fits in the first view. Taller screens keep the
   original 6rem headline (clamp ceiling). */
@media (min-width: 1024px) and (max-height: 899px) {
  .home-page #home h1 {
    font-size: clamp(3.5rem, 10.5vh, 6rem);
  }
}

/* Landscape phones / very short windows: keep the hero compact and readable */
@media (min-width: 768px) and (max-height: 560px) {
  .home-page #home h1 {
    font-size: clamp(2.5rem, 7vw, 3.75rem);
    line-height: 1.08;
  }

  .home-page #home h1 + p {
    font-size: 1rem;
    line-height: 1.6;
  }

  .home-page #home > a.absolute {
    display: none; /* scroll arrow would collide with content */
  }

  .home-page #home {
    padding-bottom: 2.5rem;
  }
}

/* Phones in landscape (below 768 wide but short) */
@media (max-width: 767px) and (max-height: 480px) {
  .home-page #home {
    min-height: 0;
    padding-block: 2rem 3rem;
  }

  .home-page #home > a.absolute {
    display: none;
  }
}

/* -------------------------------------------------------------
   2. Tablets (768–1023): comfortable reading widths
   ------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1023px) {
  /* Homepage "roots": single column, so keep text and collage centred & readable */
  .home-page #roots > .grid {
    max-width: 44rem;
    margin-inline: auto;
  }
}

/* -------------------------------------------------------------
   3. Small phones (<= 400px): tables, forms, buttons
   ------------------------------------------------------------- */
@media (max-width: 340px) {
  .product-detail-page .nutrition-table {
    min-width: 0;
    font-size: .82rem;
  }

  .product-detail-page .nutrition-table th,
  .product-detail-page .nutrition-table td {
    padding-inline: .35rem;
  }

  .bulk-page .bulk-form-card {
    padding: 1.1rem;
  }

  .home-page #home h1 {
    font-size: clamp(2.3rem, 11vw, 2.65rem) !important;
  }
}

@media (max-width: 340px) {
  .site-footer__top > div:nth-child(2) ul {
    grid-template-columns: 1fr;
  }

  .site-header__brand {
    width: 84px;
  }

  .site-header__brand img {
    width: 80px;
  }

  .site-header__cta {
    padding-inline: .6rem;
    font-size: .72rem;
  }

  .content-page .simple-hero h1,
  .products-page .products-intro h1,
  .bulk-page .bulk-hero-title,
  .product-detail-page .product-summary h1 {
    font-size: 2.15rem !important;
  }
}

/* -------------------------------------------------------------
   4. Touch devices: bigger tap targets, no sticky hover effects
   ------------------------------------------------------------- */
@media (pointer: coarse) {
  .site-footer a {
    display: inline-block;
    padding-block: .3rem;
  }

  .quantity-control button {
    width: 2.5rem;
    height: 2.5rem;
  }

  .product-gallery__thumbnails {
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }

  .product-gallery__thumbnail {
    scroll-snap-align: start;
  }
}

@media (hover: none) {
  .catalog-card__image:hover img,
  .home-page #roots img:hover {
    transform: none;
  }
}

/* -------------------------------------------------------------
   5. Large screens: scale the design proportionally
      The whole site is rem-based, so raising the root size scales type,
      spacing and components together — the layout looks identical,
      just bigger, instead of floating in a sea of empty space.
   ------------------------------------------------------------- */
:root {
  --mk-s: 1;
}

@media (min-width: 1920px) {
  :root { --mk-s: 1.125; }
}

@media (min-width: 2400px) {
  :root { --mk-s: 1.25; }
}

@media (min-width: 3000px) {
  :root { --mk-s: 1.5; }
}

@media (min-width: 1920px) {
  html {
    font-size: calc(100% * var(--mk-s));
  }

  /* header uses px sizes — scale them with everything else */
  :root {
    --site-header-height: calc(90px * var(--mk-s));
  }

  .site-header__brand {
    width: calc(160px * var(--mk-s));
    height: calc(82px * var(--mk-s));
  }

  .site-header__brand img {
    width: calc(148px * var(--mk-s));
    height: calc(78px * var(--mk-s));
  }

  /* px-based content containers → scaled equivalents */
  .content-page .simple-hero,
  .content-page .split,
  .content-page .three-col,
  .content-page .process-list {
    width: min(100% - 2.5rem, calc(1100px * var(--mk-s)));
  }

  .content-page .split {
    width: min(100%, calc(1100px * var(--mk-s)));
  }

  .content-page .article-body {
    width: min(100% - 2.5rem, calc(1000px * var(--mk-s)));
  }

  .product-detail-page .product-page {
    width: min(100% - 2.5rem, calc(1280px * var(--mk-s)));
  }

  .site-footer__inner {
    width: min(100%, calc(1280px * var(--mk-s)));
  }

  .products-page .products-intro {
    width: min(100% - 2.5rem, calc(1280px * var(--mk-s))) !important;
  }

  .products-page main > section:first-of-type > div {
    width: min(100%, calc(1280px * var(--mk-s))) !important;
  }

  .products-page main > section:last-of-type {
    width: min(100% - 2.5rem, calc(900px * var(--mk-s))) !important;
  }

  .error-page .error-card {
    width: min(100%, calc(760px * var(--mk-s)));
  }

  /* px-based media heights */
  .journey-step__content video,
  .journey-step__content > img {
    height: clamp(220px, 27vw, calc(360px * var(--mk-s)));
  }

  .catalog-card__image {
    height: calc(300px * var(--mk-s));
  }

  .product-list {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(280px * var(--mk-s))), calc(320px * var(--mk-s))));
  }

  .home-page #roots .lg\:col-span-7 {
    height: calc(600px * var(--mk-s));
  }
}

/* Hero fills the screen on big monitors; make sure the very top of ultra-tall
   portrait displays doesn't leave the hero text tiny */
@media (min-width: 1920px) and (min-aspect-ratio: 1/1) {
  .home-page #home {
    min-height: calc(100svh - var(--site-header-height));
  }
}

/* -------------------------------------------------------------
   6. Reduced motion
   ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .animate-bounce {
    animation: none;
  }
}

/* -------------------------------------------------------------
   About page — fluid layout overrides
   The About page is intentionally kept independent from the more
   specialised page rules above so it remains stable from very small
   phones through ultra-wide displays.
   ------------------------------------------------------------- */
.content-page main,
.content-page main > * {
  min-width: 0;
}

.content-page .simple-hero,
.content-page .split,
.content-page .three-col,
.content-page .article-body,
.content-page .process-list {
  box-sizing: border-box;
}

/* Prevent the long-form sections from ever becoming wider than the viewport. */
.content-page .simple-hero,
.content-page .three-col,
.content-page .article-body,
.content-page .process-list {
  width: min(calc(100% - 2.5rem), 1100px);
}

.content-page .split {
  width: min(calc(100% - 2.5rem), 1100px);
}

.content-page .simple-hero h1,
.content-page .split h2,
.content-page .three-col h2 {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.content-page .simple-hero > p:last-child,
.content-page .split p,
.content-page .three-col p {
  max-width: 100%;
}

.content-page .split > *,
.content-page .three-col > * {
  min-width: 0;
}

.content-page .split img {
  max-width: 100%;
  height: auto;
}

/* Tablet: give the text/image pair enough width to remain readable. */
@media (min-width: 768px) and (max-width: 959px) {
  .content-page .simple-hero {
    width: min(calc(100% - 3rem), 760px);
    padding-block: clamp(4rem, 8vw, 5.5rem) 3.75rem;
  }

  .content-page .simple-hero h1 {
    font-size: clamp(2.7rem, 7vw, 4.2rem);
  }

  .content-page .split {
    width: min(calc(100% - 3rem), 760px);
    grid-template-columns: 1fr;
    gap: 2.25rem;
  }

  .content-page .split h2 {
    font-size: clamp(2rem, 4vw, 2.5rem);
  }

  .content-page .three-col {
    width: min(calc(100% - 3rem), 760px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .content-page .three-col article:last-child {
    grid-column: 1 / -1;
    max-width: calc(50% - .5rem);
  }
}

/* Desktop: use a stable two-column split without the auto-fit breakpoint
   changing unexpectedly as the browser window is resized. */
@media (min-width: 960px) {
  .content-page .split {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    gap: clamp(2rem, 4vw, 4rem);
  }

  .content-page .split > div {
    min-width: 0;
  }

  .content-page .split h2 {
    font-size: clamp(2rem, 3vw, 2.8rem);
  }
}

/* Phone: use viewport-relative typography and padding instead of fixed
   values, including very narrow 320px devices. */
@media (max-width: 767px) {
  .content-page .simple-hero,
  .content-page .split,
  .content-page .three-col,
  .content-page .article-body,
  .content-page .process-list {
    width: min(calc(100% - 2rem), 680px);
  }

  .content-page .simple-hero {
    padding-block: clamp(2.25rem, 9vw, 3.75rem) clamp(2.5rem, 9vw, 3.5rem);
  }

  .content-page .simple-hero h1 {
    font-size: clamp(2.15rem, 10.5vw, 3rem);
    line-height: 1.04;
    letter-spacing: -.04em;
  }

  .content-page .simple-hero > p:last-child {
    font-size: clamp(.92rem, 3.8vw, 1rem);
    line-height: 1.7;
  }

  .content-page .paper-section {
    padding-inline: 0;
    padding-block: clamp(2.75rem, 10vw, 4rem);
  }

  .content-page .split {
    grid-template-columns: 1fr;
    gap: clamp(1.5rem, 6vw, 2.25rem);
  }

  .content-page .split img {
    width: 100%;
  }

  .content-page .split h2,
  .content-page .three-col h2 {
    font-size: clamp(1.65rem, 7.5vw, 2rem);
    line-height: 1.12;
  }

  .content-page .split p,
  .content-page .three-col p {
    font-size: clamp(.9rem, 3.7vw, .98rem);
    line-height: 1.7;
  }

  .content-page .split .button {
    width: 100%;
    min-height: 46px;
    margin-top: 1rem;
  }

  .content-page .three-col {
    grid-template-columns: 1fr;
    gap: 0;
    padding-block: clamp(2.75rem, 10vw, 4rem);
  }

  .content-page .three-col article {
    padding-block: 1.5rem;
  }

  .content-page .three-col article:first-child {
    padding-top: 0;
  }

  .content-page .three-col article + article {
    border-top: 1px solid #d8d2c5;
  }
}

@media (max-width: 360px) {
  .content-page .simple-hero,
  .content-page .split,
  .content-page .three-col,
  .content-page .article-body,
  .content-page .process-list {
    width: calc(100% - 1.5rem);
  }

  .content-page .simple-hero h1 {
    font-size: clamp(2rem, 10.5vw, 2.45rem);
  }

  .content-page .simple-hero > p:last-child {
    font-size: .9rem;
  }

  .content-page .split h2,
  .content-page .three-col h2 {
    font-size: 1.55rem;
  }
}