/* ==========================================================================
   Mithila Hosieries — brand layer
   --------------------------------------------------------------------------
   Everything here is decorative and additive. It draws with pseudo-elements,
   masks and backgrounds only, so no text content is added, removed or hidden.
   Load it AFTER the page's existing <style> blocks.

   Palette is switchable from one attribute on <html>:

       <html data-brand="navy-coral">   full identity-kit palette (default)
       <html data-brand="olive">        the site's original green
       <html data-brand="navy">         navy-led, coral used sparingly

   The site's existing CSS already reads var(--accent) everywhere, so
   switching the theme re-tints eyebrows, MVV titles and highlights for free.
   ========================================================================== */

:root {
  /* Fixed identity-kit colours. These never change between themes — they are
     the logo's own colours and are used for the mark, pattern and ridge. */
  --brand-navy: #233B5D;
  --brand-coral: #DF7669;
  --brand-cream: #F7F3EC;

  /* Theme-driven roles. The identity kit's palette is the default: navy
     carries structure and type, coral appears on interaction. Olive was the
     site's colour before the kit existed and is still selectable by name. */
  --brand-accent: var(--brand-navy);      /* section eyebrows, titles */
  --brand-highlight: var(--brand-coral);  /* underlines, corner marks, hovers */
  --brand-pattern-opacity: .05;
  --brand-ridge-opacity: .13;
}

/* Full identity-kit palette. */
[data-brand="navy-coral"] {
  --accent: var(--brand-navy);
  --brand-accent: var(--brand-navy);
  --brand-highlight: var(--brand-coral);
  --brand-pattern-opacity: .055;
  --brand-ridge-opacity: .15;
}

/* Navy-led, coral reserved for small accents only. */
[data-brand="navy"] {
  --accent: var(--brand-navy);
  --brand-accent: var(--brand-navy);
  --brand-highlight: var(--brand-coral);
  --brand-pattern-opacity: .045;
  --brand-ridge-opacity: .11;
}

/* Explicit olive theme, so the preview page can select it by name. */
[data-brand="olive"] {
  --accent: #4C6A3C;
  --brand-accent: #4C6A3C;
  --brand-highlight: #4C6A3C;
}


/* --------------------------------------------------------------------------
   1. Section eyebrows get a small peak glyph
   --------------------------------------------------------------------------
   .eyebrow is already shared across index, products and the header, so this
   one rule brands every section label on the site at once.
   -------------------------------------------------------------------------- */

.eyebrow {
  display: flex !important;
  align-items: center;
  gap: .5em;
}

.eyebrow::before {
  content: "";
  flex: 0 0 auto;
  width: 1.5em;          /* the mark is ~1.64:1, so width and height stay in step */
  height: .92em;
  background-color: var(--brand-accent);
  -webkit-mask: url("pics/brand/mark-silhouette.svg") no-repeat center / contain;
          mask: url("pics/brand/mark-silhouette.svg") no-repeat center / contain;
}

/* The contact eyebrow sits on the dark ending panel and is centred. Coral is
   too close in value to the near-black panel and the mark disappears into it,
   so it goes cream here instead. */
.contact-eyebrow { justify-content: center; }
.contact-eyebrow::before { background-color: var(--brand-cream); opacity: .8; }

/* Same problem on the dark hero — keep the glyph light. */
#home .brands-header .eyebrow::before { background-color: #F7F4EE; opacity: .85; }


/* --------------------------------------------------------------------------
   2. Section rhythm
   --------------------------------------------------------------------------
   Ridge dividers were tried here and removed — repeating the mark along every
   section edge read as noise rather than structure. The mark now appears in
   three deliberate places only: the hero reveal, the MVV cards, and the
   footer. pics/brand/ridge.svg is kept in case it is wanted later.
   -------------------------------------------------------------------------- */


/* --------------------------------------------------------------------------
   3. Mission / Vision / Values cards
   -------------------------------------------------------------------------- */

.mvv-item {
  position: relative;
  overflow: hidden;
  transition: border-color .25s ease, transform .25s ease;
}

/* Pattern watermark, bottom-right, clipped by the card. */
.mvv-item::after {
  content: "";
  position: absolute;
  right: -30px;
  bottom: -40px;
  width: 190px;
  height: 190px;
  pointer-events: none;
  background-color: var(--brand-navy);
  opacity: var(--brand-pattern-opacity);
  -webkit-mask: url("pics/brand/mark-silhouette.svg") no-repeat center / contain;
          mask: url("pics/brand/mark-silhouette.svg") no-repeat center / contain;
}

/* Accent rule along the card's top edge, in place of the old gradient
   .mvv-line. Full width: a short stub gets chewed by the 14px corner radius
   and ends up looking detached from the card. */
.mvv-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--brand-highlight);
}

.mvv-item:hover { border-color: var(--brand-highlight); }


/* --------------------------------------------------------------------------
   4. Why Choose Mithila — feature cards
   --------------------------------------------------------------------------
   Three cards, distinguished by nth-child. Icons are inline SVG masks so they
   inherit the theme colour and cost no extra requests.
   -------------------------------------------------------------------------- */

#middle-class-value .text-content > div > div {
  position: relative;
  padding-top: 3.6rem !important;
  transition: border-color .25s ease;
}

#middle-class-value .text-content > div > div::before {
  content: "";
  position: absolute;
  top: 1.6rem;
  left: 1.6rem;
  width: 26px;
  height: 26px;
  /* Navy, not coral — three coral icons in a row would out-shout the MVV
     cards above them. Coral stays reserved for single accents. */
  background-color: var(--brand-accent);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* Durable Quality — interlocking weave */
#middle-class-value .text-content > div > div:nth-child(1)::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M3 7h18M3 12h18M3 17h18M7 3v18M12 3v18M17 3v18'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M3 7h18M3 12h18M3 17h18M7 3v18M12 3v18M17 3v18'/%3E%3C/svg%3E");
}

/* Affordable Pricing — price tag */
#middle-class-value .text-content > div > div:nth-child(2)::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 13.4 12 22 2 12V2h10l8.6 8.6a2 2 0 0 1 0 2.8Z'/%3E%3Ccircle cx='7' cy='7' r='1.6'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 13.4 12 22 2 12V2h10l8.6 8.6a2 2 0 0 1 0 2.8Z'/%3E%3Ccircle cx='7' cy='7' r='1.6'/%3E%3C/svg%3E");
}

/* Skin Comfort — cotton leaf */
#middle-class-value .text-content > div > div:nth-child(3)::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 20A7 7 0 0 1 4 13c0-6 7-10 16-10 0 9-4 16-9 17Z'/%3E%3Cpath d='M4 21c2-6 6-9 12-11'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 20A7 7 0 0 1 4 13c0-6 7-10 16-10 0 9-4 16-9 17Z'/%3E%3Cpath d='M4 21c2-6 6-9 12-11'/%3E%3C/svg%3E");
}

#middle-class-value .text-content > div > div:hover { border-color: var(--brand-highlight) !important; }


/* --------------------------------------------------------------------------
   5. Product cards on the hero
   --------------------------------------------------------------------------
   A coral corner notch that reveals on hover. The two unavailable products
   keep their existing muted treatment and get no notch.
   -------------------------------------------------------------------------- */

#home .brand-logo-item { position: relative; }

#home .brand-logo-item:not(.is-unavailable)::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 34px;
  height: 34px;
  border-radius: 0 14px 0 0;
  background: linear-gradient(225deg, var(--brand-coral) 46%, transparent 47%);
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
}

#home .brand-logo-item:not(.is-unavailable):hover::after { opacity: 1; }


/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */

.site-btn { position: relative; overflow: hidden; }

/* Primary call to action picks up the highlight colour on hover. */
.hero-check-link:hover,
.contact-btn-secondary:hover {
  border-color: var(--brand-coral) !important;
}


/* --------------------------------------------------------------------------
   7. Footer
   --------------------------------------------------------------------------
   Adds a mark above the big wordmark and a pattern wash behind the whole
   block. Both are drawn on existing elements — footer.html gains one
   decorative <span>, which carries no text.
   -------------------------------------------------------------------------- */

/* No pattern wash here — a single mark above the wordmark carries it. */
.footer { position: relative; overflow: hidden; }

.footer-content { position: relative; z-index: 1; }

/* Black mark in the footer, matching the black wordmark directly below it.
   Drawn as a mask rather than an image file, so no separate black WebP is
   needed and it stays crisp at any density. */
.footer-mark {
  display: block;
  width: 62px;
  height: 38px;
  /* Top margin keeps it clear of the hairline above; bottom margin pulls it
     closer to the wordmark it belongs to. */
  margin: 2.4rem auto .6rem;
  background-color: var(--ink, #1B1F24);
  -webkit-mask: url("pics/brand/mark-silhouette.svg") no-repeat center / contain;
          mask: url("pics/brand/mark-silhouette.svg") no-repeat center / contain;
}

/* Coral hairline under the footer's big wordmark. */
.footer-brand { position: relative; }
.footer-brand::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 1.4rem;
  transform: translateX(-50%);
  width: min(320px, 60%);
  height: 2px;
  background: var(--brand-highlight);
  opacity: .55;
}


/* --------------------------------------------------------------------------
   8. Hero logo reveal
   --------------------------------------------------------------------------
   The mark draws itself in once per session above the hero headline.
   Sized and positioned so it cannot shift the H1 — no layout shift, no CLS.
   -------------------------------------------------------------------------- */

.hero-mark {
  display: block;
  width: clamp(58px, 5vw, 82px);
  height: auto;
  margin: 0 0 1.1rem;
  overflow: visible;
}

.hero-mark .hm-navy { fill: #F7F4EE; }
.hero-mark .hm-coral { fill: var(--brand-coral); }

/* Pre-animation state. Removed by script once the reveal has played, and
   never applied at all when the visitor has already seen it this session. */
.hero-mark[data-reveal="pending"] .hm-navy,
.hero-mark[data-reveal="pending"] .hm-coral { opacity: 0; }

@media (max-width: 900px) {
  .hero-mark { width: clamp(48px, 12vw, 64px); margin-bottom: .85rem; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-mark[data-reveal="pending"] .hm-navy,
  .hero-mark[data-reveal="pending"] .hm-coral { opacity: 1; }
}


/* --------------------------------------------------------------------------
   9. About band
   --------------------------------------------------------------------------
   Left plain. A pattern wash was tried here and removed for the same reason
   as the dividers — it competed with the copy without adding meaning.
   -------------------------------------------------------------------------- */


/* --------------------------------------------------------------------------
   10. Hero accents under the navy palette
   --------------------------------------------------------------------------
   index.html hardcodes #b9d2a8 for the hero's small type, so those greens
   ignore --accent entirely. Navy is unreadable on the dark hero photograph,
   so they go coral instead — which is what actually makes the palette change
   visible above the fold.
   -------------------------------------------------------------------------- */

[data-brand="navy"] #home .text-welcome-to,
[data-brand="navy-coral"] #home .text-welcome-to,
[data-brand="navy"] #home .brands-header .eyebrow,
[data-brand="navy-coral"] #home .brands-header .eyebrow { color: var(--brand-coral) !important; }

[data-brand="navy"] #home .brands-header .eyebrow::before,
[data-brand="navy-coral"] #home .brands-header .eyebrow::before {
  background-color: var(--brand-coral);
  opacity: 1;
}


/* --------------------------------------------------------------------------
   11. Distributor CTA
   --------------------------------------------------------------------------
   Reuses the header's pulse + shine treatment so the primary action reads the
   same wherever it appears. Colours come from the theme rather than the
   header's hardcoded olive.
   -------------------------------------------------------------------------- */

.brand-cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--brand-coral) !important;
  color: #fff !important;
  border: 1px solid var(--brand-coral);
  animation: brand-cta-pulse 2.8s ease-in-out infinite;
}

.brand-cta::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: -60%;
  left: -45%;
  width: 34%;
  height: 220%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.85), transparent);
  transform: skewX(-20deg);
  animation: brand-cta-shine 3.2s ease-in-out infinite;
  pointer-events: none;
}

.brand-cta:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
  animation-play-state: paused;
}
.brand-cta:hover::before { animation-play-state: paused; }
.brand-cta > * { position: relative; z-index: 1; }

@keyframes brand-cta-pulse {
  0%, 68%, 100% { box-shadow: 0 0 0 0 rgba(223,118,105,0); }
  78%           { box-shadow: 0 0 0 6px rgba(223,118,105,.30); }
  88%           { box-shadow: 0 0 0 11px rgba(223,118,105,0); }
}
@keyframes brand-cta-shine {
  0%, 58%   { left: -45%; opacity: 0; }
  64%       { opacity: 1; }
  82%, 100% { left: 120%; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .brand-cta, .brand-cta::before { animation: none; }
}

/* Hero holds two actions now: the distributor ask first, browsing second. */
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin-top: 1.8rem;
}
#home .hero-actions .hero-check-link { margin-top: 0 !important; }
@media (max-width: 480px) {
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .site-btn { justify-content: center; }
}


/* --------------------------------------------------------------------------
   12. Proof strip
   --------------------------------------------------------------------------
   Figures already published elsewhere on the site, surfaced where a buyer
   vetting a supplier actually looks.
   -------------------------------------------------------------------------- */

.proof-strip { background: var(--surface); border-block: 1px solid var(--hairline); padding: 2.6rem 1.5rem; }
.proof-inner {
  max-width: 1100px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; text-align: center;
}
.proof-item { display: flex; flex-direction: column; gap: .35rem; }
/* Deliberately NOT Brigends Expanded. The copy of Brigends loaded from
   fonts.cdnfonts.com is a personal-use trial: its numerals are replaced with a
   "PERSONAL USE ONLY / PURCHASE FULL VERSION" watermark, so any digit set in it
   renders as garbage. Inter is already loaded and has real numerals. */
.proof-num {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1.75rem, 3.2vw, 2.6rem);
  font-weight: 700; letter-spacing: -.02em;
  color: var(--brand-accent); line-height: 1;
}
.proof-label { font-size: .82rem; color: var(--ink-2); letter-spacing: .04em; }
@media (max-width: 768px) { .proof-inner { grid-template-columns: repeat(2, 1fr); gap: 1.8rem 1rem; } }


/* --------------------------------------------------------------------------
   13. How to order
   -------------------------------------------------------------------------- */

.order-steps { background: var(--canvas); padding: 4rem 1.5rem; }
.order-inner { max-width: 1100px; margin: 0 auto; }
.order-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: 1.8rem; }
.order-step {
  background: var(--surface); border: 1px solid var(--hairline); border-radius: 14px;
  padding: 1.8rem 1.6rem; position: relative;
}
.order-step-n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--brand-accent); color: #fff;
  font-size: .82rem; font-weight: 700; margin-bottom: .9rem;
}
.order-step h3 { font-size: .98rem !important; color: var(--ink) !important; margin-bottom: .45rem; }
.order-step p  { font-size: .9rem; color: var(--ink-2); line-height: 1.6; }
@media (max-width: 768px) { .order-grid { grid-template-columns: 1fr; } }


/* --------------------------------------------------------------------------
   14. FAQ
   -------------------------------------------------------------------------- */

.faq-section { background: var(--surface); padding: 4rem 1.5rem; }
.faq-inner { max-width: 820px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--hairline); }
.faq-item summary {
  cursor: pointer; list-style: none; padding: 1.15rem 2rem 1.15rem 0; position: relative;
  font-weight: 600; font-size: 1rem; color: var(--ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: ""; position: absolute; right: .35rem; top: 50%; width: 10px; height: 10px;
  border-right: 2px solid var(--brand-accent); border-bottom: 2px solid var(--brand-accent);
  transform: translateY(-70%) rotate(45deg); transition: transform .2s ease;
}
.faq-item[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq-item p { padding: 0 0 1.2rem; color: var(--ink-2); font-size: .95rem; line-height: 1.7; }


/* --------------------------------------------------------------------------
   15. WhatsApp float
   -------------------------------------------------------------------------- */

.wa-float {
  position: fixed; right: 18px; bottom: 18px; z-index: 900;
  display: inline-flex; align-items: center; gap: .55rem;
  background: #25D366; color: #fff !important;
  padding: 11px 17px 11px 14px; border-radius: 999px;
  font-family: 'Inter', sans-serif; font-size: .9rem; font-weight: 600;
  box-shadow: 0 8px 26px rgba(0,0,0,.22);
  transition: transform .2s ease, box-shadow .2s ease;
}
.wa-float:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0,0,0,.28); }
.wa-float svg { width: 20px; height: 20px; flex: 0 0 auto; }
@media (max-width: 600px) {
  .wa-float { right: 14px; bottom: 14px; padding: 12px; }
  .wa-float .wa-label { display: none; }
}


/* --------------------------------------------------------------------------
   16. Header, retinted per theme
   --------------------------------------------------------------------------
   header.html is a shared partial with olive hardcoded throughout. Overriding
   here — scoped by data-brand — keeps index navy while products, blog and the
   articles keep their olive header untouched.
   -------------------------------------------------------------------------- */

[data-brand="navy"] .header .nav-menu .nav-cta,
[data-brand="navy-coral"] .header .nav-menu .nav-cta {
  border-color: var(--brand-coral);
  background: rgba(223,118,105,.10);
  color: var(--ink);
  animation-name: brand-cta-pulse;
}
[data-brand="navy"] .header .nav-menu .nav-cta:hover,
[data-brand="navy-coral"] .header .nav-menu .nav-cta:hover {
  background: var(--brand-coral);
  color: #fff;
}

/* Nav links, active state and any other olive accents in the header. */
[data-brand="navy"] .header .nav-menu a.is-current,
[data-brand="navy-coral"] .header .nav-menu a.is-current { color: var(--brand-navy); }

[data-brand="navy"] .header .nav-menu a:hover,
[data-brand="navy-coral"] .header .nav-menu a:hover { color: var(--brand-navy); }

[data-brand="navy"] .mobile-menu a:hover,
[data-brand="navy-coral"] .mobile-menu a:hover { color: var(--brand-navy); }


/* --------------------------------------------------------------------------
   17. Enquiry panel — removed
   --------------------------------------------------------------------------
   index.html used to reveal a collapsed copy of the enquiry form inline on the
   dark contact band, which needed a light-surface override and a :target
   no-JS fallback. That panel is gone: every CTA on the site now opens the
   shared popup, which brings its own styling in enquiry-modal.css.
   -------------------------------------------------------------------------- */


/* --------------------------------------------------------------------------
   18. Small alignment corrections
   -------------------------------------------------------------------------- */

/* "Why Choose Mithila Hosieries" was centred while its eyebrow sat left. */
#middle-class-value h2,
#middle-class-value .text-content { text-align: left !important; }
@media (max-width: 768px) {
  #middle-class-value h2,
  #middle-class-value .text-content { text-align: left !important; }
}
