/* ---------------------------------------------------------------------------
   लखेश्वर डेअरी — static site
   Brand: #005AAA + white, straight off the client's logo (same family the POS
   uses; see dairyAccent.js). Red is reserved for warnings and appears nowhere.

   Devanagari is the primary script here, so the font stack leads with faces
   that actually shape it well and that ship with the devices customers use:
   Nirmala UI on Windows, Kohinoor on iOS, Noto on Android. No webfont is
   loaded — a Devanagari webfont is 200-400 KB, and on a village 3G connection
   that is a blank page for several seconds while the text is already sitting
   in the HTML, ready to render.
   --------------------------------------------------------------------------- */

:root {
  --brand:        #005AAA;
  --brand-dark:   #00437F;
  --brand-soft:   #1D74C0;
  --brand-light:  #D2E4F4;
  --brand-tint:   #F2F7FC;

  --ink:          #16212B;
  --ink-soft:     #4A5A68;
  --line:         #DCE5EC;
  --bg:           #FFFFFF;

  --wrap:         1120px;
  --radius:       14px;
  --shadow:       0 1px 2px rgba(22, 33, 43, .05), 0 8px 24px rgba(22, 33, 43, .06);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Nirmala UI", "Kohinoor Devanagari", "Noto Sans Devanagari",
               "Mukta", "Segoe UI", system-ui, -apple-system, sans-serif;
  /* Devanagari sits taller than Latin and needs the extra leading to stay
     readable — matras collide at the 1.4 that would be fine for English. */
  line-height: 1.75;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--brand); }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }

.skip {
  position: absolute; left: -9999px;
  background: var(--brand); color: #fff; padding: 12px 18px; z-index: 100;
}
.skip:focus { left: 12px; top: 12px; border-radius: 8px; }

:focus-visible { outline: 3px solid var(--brand-soft); outline-offset: 2px; }

/* ── header ───────────────────────────────────────────────────────────── */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  display: flex; align-items: center; gap: 16px;
  min-height: 74px;
}
.brand {
  margin-inline-end: auto;
  display: flex; align-items: center;
  border-radius: 10px;
  /* It behaves as a home link, so it should feel like one on hover and be
     reachable and visible by keyboard. */
  transition: opacity .15s;
}
.brand:hover { opacity: .78; }
.brand img { height: 52px; width: auto; }

.nav { display: flex; align-items: center; gap: 4px; }
.nav a {
  display: block;
  padding: 10px 14px;
  border-radius: 10px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  /* 44px minimum touch target, same rule the POS follows — most visitors
     will be on a phone held one-handed. */
  min-height: 44px;
  line-height: 24px;
}
.nav a:hover { background: var(--brand-tint); color: var(--brand-dark); }
.nav .nav-cta {
  background: var(--brand); color: #fff; margin-inline-start: 6px;
}
.nav .nav-cta:hover { background: var(--brand-dark); color: #fff; }

.nav-toggle {
  display: none;
  width: 46px; height: 46px;
  border: 1px solid var(--line); border-radius: 10px;
  background: #fff; cursor: pointer;
  padding: 12px 11px;
}
.nav-toggle span {
  display: block; height: 2px; background: var(--ink); border-radius: 2px;
  transition: transform .2s, opacity .2s;
}
.nav-toggle span + span { margin-top: 5px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── hero ─────────────────────────────────────────────────────────────── */

.hero {
  background:
    radial-gradient(1200px 400px at 80% -10%, var(--brand-light), transparent 60%),
    linear-gradient(180deg, var(--brand-tint), #fff);
  border-bottom: 1px solid var(--line);
}
/* The hero keeps the page's own left margin. Narrowing the whole block instead
   would centre it and leave the headline starting a fifth of the way across
   while every section below starts at the edge — the measure is capped on the
   text itself so the alignment holds. */
.hero-inner { padding: 72px 20px 80px; }
.hero h1, .eyebrow { max-width: 22ch; }
.eyebrow {
  margin: 0 0 10px;
  color: var(--brand); font-weight: 700; letter-spacing: .04em;
  text-transform: none; font-size: .95rem;
}
.hero h1 {
  margin: 0 0 18px;
  font-size: clamp(2rem, 5.5vw, 3.25rem);
  line-height: 1.35;
  letter-spacing: -0.01em;
}
.lede { margin: 0 0 30px; font-size: 1.14rem; color: var(--ink-soft); max-width: 62ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 12px 24px;
  border-radius: 999px;
  font-weight: 700; text-decoration: none;
  border: 2px solid transparent;
  transition: background .15s, color .15s, border-color .15s;
}
.btn-sm { min-height: 44px; padding: 10px 18px; font-size: .95rem; }
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-dark); }
.btn-ghost { border-color: var(--brand); color: var(--brand); background: #fff; }
.btn-ghost:hover { background: var(--brand-tint); }

/* ── trust strip ──────────────────────────────────────────────────────── */

.strip { border-bottom: 1px solid var(--line); background: #fff; }
.strip-inner {
  display: grid; gap: 8px;
  grid-template-columns: repeat(4, 1fr);
  padding: 34px 20px;
}
.strip-item { padding: 8px 12px; }
.strip-icon { font-size: 1.7rem; line-height: 1; display: block; margin-bottom: 8px; }
.strip-item h3 { margin: 0 0 4px; font-size: 1.05rem; }
.strip-item p { margin: 0; color: var(--ink-soft); font-size: .96rem; line-height: 1.6; }

/* ── sections ─────────────────────────────────────────────────────────── */

.section { padding: 72px 0; }
.section-alt { background: var(--brand-tint); }
.section-head { max-width: 62ch; margin-bottom: 36px; }
.section-head h2, .about-grid h2, .contact-grid h2 {
  margin: 0 0 10px;
  font-size: clamp(1.6rem, 3.4vw, 2.2rem);
  line-height: 1.4;
}
.section-head p { margin: 0; color: var(--ink-soft); }

/* ── product catalogue ────────────────────────────────────────────────── */

.cat { margin-bottom: 34px; }
.cat-title {
  margin: 0 0 14px;
  font-size: 1.2rem;
  color: var(--brand-dark);
  padding-bottom: 8px;
  border-bottom: 2px solid var(--brand-light);
}
.items {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.items li {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;              /* keeps the photo inside the rounded corner */
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.items li:hover {
  border-color: var(--brand-soft);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

/* aspect-ratio + object-fit means a portrait or a panorama both fill the card
   identically, so one odd photo cannot make the whole grid go ragged. */
.item-img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--brand-tint);
}
/* Shown when there is no photo for an item. Not an error state — it is a
   deliberate, quiet panel so the row keeps its rhythm. */
.item-img-none {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  background:
    radial-gradient(circle at 30% 30%, #fff, transparent 60%),
    linear-gradient(135deg, var(--brand-light), var(--brand-tint));
}
.item-text { display: block; padding: 12px 16px 14px; }
.items .mr { display: block; font-weight: 700; font-size: 1.04rem; }
/* The English name is a quiet second line, not a translation the page is
   about — it is there for the customer who knows "shrikhand" but not श्रीखंड. */
.items .en {
  display: block; color: var(--ink-soft); font-size: .84rem;
  line-height: 1.4; letter-spacing: .01em;
}
.note {
  margin: 8px 0 0; color: var(--ink-soft);
  background: var(--brand-tint);
  border-inline-start: 4px solid var(--brand-soft);
  border-radius: 0 10px 10px 0;
  padding: 14px 18px;
}
.section-alt .note { background: #fff; }

/* ── dairy gallery ────────────────────────────────────────────────────── */

.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.g-item {
  margin: 0;
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--brand-tint);
}
/* Two of the six span double width, so the grid reads as a composed set
   rather than six identical tiles. */
.g-wide { grid-column: span 2; }
.g-item img {
  display: block; width: 100%; height: 100%;
  aspect-ratio: 3 / 2; object-fit: cover;
  transition: transform .4s ease;
}
.g-item:hover img { transform: scale(1.04); }
.g-item figcaption {
  position: absolute; inset-inline: 0; bottom: 0;
  padding: 22px 16px 12px;
  color: #fff; font-weight: 600; font-size: .98rem;
  /* Gradient rather than a flat bar: the caption stays readable over a light
     photo without hiding the picture behind it. */
  background: linear-gradient(to top, rgba(0, 32, 60, .82), rgba(0, 32, 60, 0));
}

@media (max-width: 900px) {
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .g-wide { grid-column: span 2; }
}
@media (max-width: 560px) {
  .gallery { grid-template-columns: 1fr; }
  .g-wide { grid-column: span 1; }
}

/* ── about ────────────────────────────────────────────────────────────── */

.about-grid {
  display: grid; gap: 40px;
  grid-template-columns: 1.5fr 1fr; align-items: start;
}
.about-grid p { color: var(--ink-soft); margin: 0 0 16px; }
.facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.facts li {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px 20px; box-shadow: var(--shadow);
}
.facts strong { display: block; font-size: 1.6rem; color: var(--brand); line-height: 1.3; }
.facts span { color: var(--ink-soft); font-size: .95rem; }

/* ── cards ────────────────────────────────────────────────────────────── */

.cards { display: grid; gap: 18px; grid-template-columns: repeat(3, 1fr); }
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 24px; box-shadow: var(--shadow);
}
.card h3 { margin: 0 0 8px; font-size: 1.15rem; color: var(--brand-dark); }
.card p { margin: 0; color: var(--ink-soft); }

/* ── contact ──────────────────────────────────────────────────────────── */

.contact-grid { display: grid; gap: 40px; grid-template-columns: 1fr 1fr; align-items: start; }
.contact-row { display: grid; grid-template-columns: 110px 1fr; gap: 12px; margin-bottom: 18px; }
.contact-label { font-weight: 700; color: var(--brand-dark); }
.contact-row p, .contact-row address { margin: 0; font-style: normal; color: var(--ink-soft); }
.contact-row a { font-weight: 600; }

.map-box {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
  min-height: 320px;
}
.map-box iframe { display: block; width: 100%; height: 360px; border: 0; }
.map-placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; min-height: 320px; text-align: center; padding: 30px;
}
.map-placeholder span { font-size: 2.4rem; line-height: 1; }
.map-placeholder p { margin: 0; color: var(--ink-soft); }

/* ── credits table ────────────────────────────────────────────────────── */

/* The table scrolls inside its own box rather than pushing the page sideways —
   four columns of filenames will not fit a phone, and a horizontally scrolling
   body is far worse than a scrolling table. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.credits {
  width: 100%; border-collapse: collapse; min-width: 640px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  font-size: .95rem;
}
table.credits th, table.credits td {
  text-align: start; padding: 10px 14px; border-bottom: 1px solid var(--line);
  vertical-align: top;
}
table.credits th { background: var(--brand-tint); color: var(--brand-dark); font-weight: 700; }
table.credits tr:last-child td { border-bottom: 0; }
table.credits code { font-size: .88em; color: var(--ink-soft); }

/* ── footer ───────────────────────────────────────────────────────────── */

.site-footer { background: var(--brand-dark); color: #E8F1F9; padding: 52px 0 26px; }
.footer-inner {
  display: grid; gap: 30px;
  grid-template-columns: 1.4fr 1fr 1fr;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(255, 255, 255, .18);
}
/* The mark is a solid blue shape with the lettering knocked OUT of it in white.
   Forcing it white (brightness(0) invert(1)) filled the knockouts too and left
   a featureless blob — so it sits on its own light panel instead and renders
   exactly as drawn, the same way it does in the header. */
.footer-brand a { display: inline-block; margin-bottom: 14px; }
.footer-brand img {
  background: #fff;
  padding: 10px 16px;
  border-radius: 12px;
  display: block;
}
.footer-brand p { margin: 0; color: #B9D3EA; }

.footer-nav { display: flex; flex-direction: column; gap: 6px; }
.footer-nav a {
  color: #E8F1F9; text-decoration: none; padding: 8px 0; min-height: 40px;
}
.footer-nav a:hover { text-decoration: underline; }

.footer-legal p { margin: 0 0 6px; color: #B9D3EA; font-size: .92rem; }

.footer-bottom {
  display: flex; flex-wrap: wrap; gap: 8px 20px;
  justify-content: space-between; padding-top: 22px;
}
.footer-bottom p { margin: 0; font-size: .88rem; color: #A8C7E2; }
.footer-bottom .credit { opacity: .8; }

/* ── responsive ───────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .strip-inner { grid-template-columns: repeat(2, 1fr); }
  .about-grid, .contact-grid { grid-template-columns: 1fr; }
  .cards { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  body { font-size: 16px; }
  .nav-toggle { display: block; }
  .nav {
    position: absolute; top: 74px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 2px;
    background: #fff; border-bottom: 1px solid var(--line);
    padding: 10px 16px 18px;
    box-shadow: var(--shadow);
    display: none;
  }
  .nav.open { display: flex; }
  .nav .nav-cta { margin: 6px 0 0; text-align: center; }
  .hero-inner { padding: 52px 20px 58px; }
  .section { padding: 54px 0; }
  .contact-row { grid-template-columns: 1fr; gap: 2px; }
  .footer-inner { grid-template-columns: 1fr; }
}

@media (max-width: 380px) {
  .strip-inner { grid-template-columns: 1fr; }
  .items { grid-template-columns: 1fr; }
}

/* ── print ────────────────────────────────────────────────────────────── */
/* Shops do print their own product list to pin up. Keep it plain. */
@media print {
  .site-header, .nav-toggle, .hero-actions, .map-box, .footer-nav { display: none; }
  body { font-size: 12pt; }
  .section, .hero-inner { padding: 12pt 0; }
  .items li { break-inside: avoid; border-color: #999; }
  .site-footer { background: none; color: #000; }
  .footer-brand img { filter: none; }
  .footer-legal p, .footer-bottom p, .footer-brand p { color: #000; }
}