/* ============================================================
   LAYOUT.CSS — Arihant Fabrics
   Role: Header · dropdown · mobile nav · footer ·
         page container / wrapper
   Depends on: base.css (custom properties must be loaded first)
   Source of truth: component--header-desktop.html,
                    component--mobile-nav.html,
                    component--footer.html
   ============================================================ */


/* ============================================================
   PAGE CONTAINER
   Reusable max-width wrapper, centred, with horizontal padding.
   Used inside header, footer, and every page section.
   ============================================================ */

/* ============================================================
   SITE HEADER
   Source: component--header-desktop.html
   Single white bar. No top utility bar.
   Sticky — shadow added via .is-sticky (toggled by main.js
   IntersectionObserver on a sentinel element in <main>).
   ============================================================ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 1001; /* Above mobile-nav (1000) so hamburger stays tappable when nav is open */
  background: var(--color-white);
  border-bottom: 0.5px solid var(--color-border);
}

@media (prefers-reduced-motion: no-preference) {
  .site-header {
    transition: box-shadow 0.2s ease;
  }
}

.site-header.is-sticky {
  box-shadow: 0 2px 12px rgba(10, 37, 117, 0.08);
}

/* ── Header inner ── */
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;                            /* APPROVED: desktop height */
  padding-inline: var(--page-padding-inline); /* shared token — always identical to .container */
}

@media (max-width: 1023px) {
  .header-inner {
    height: 64px; /* APPROVED: tablet height — padding handled by token */
  }
}

@media (max-width: 767px) {
  .header-inner {
    height: 56px; /* APPROVED: mobile height — padding handled by token */
  }
}


/* ── Page container ──
   Wraps inner content of all content sections. Uses the same
   --page-padding-inline token as .header-inner so content left/right
   edges are mathematically identical to the header at every viewport.
   Usage: add class="container" to the inner wrapper div of any section. */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--page-padding-inline);
}


/* ── Brand: logo + name ── */
.brand-link {
  display: flex;
  align-items: center;
  gap: 8px; /* reduced from 12px per user request */
  text-decoration: none;
  flex-shrink: 0;
}

.brand-logo {
  width: 64px;            /* APPROVED: desktop logo size */
  height: 64px;
  flex-shrink: 0;
}

.brand-name {
  font-family: var(--font-brand);
  font-size: 1.7rem;      /* APPROVED: desktop brand name */
  font-weight: 700;
  text-transform: lowercase;
  letter-spacing: -0.25px;
  color: var(--color-navy);
  line-height: 1;
}

@media (max-width: 1023px) {
  .brand-logo { width: 48px; height: 48px; } /* APPROVED: tablet */
  .brand-name { font-size: 1.45rem; }         /* APPROVED: tablet */
}

@media (max-width: 767px) {
  .brand-logo { width: 40px; height: 40px; } /* APPROVED: mobile */
  .brand-name { font-size: 1.25rem; }         /* APPROVED: mobile */
}


/* ── Desktop navigation ── */
.main-nav {
  display: flex;
  align-items: stretch;
  height: var(--header-height); /* token handles 72px → 64px → 56px at each breakpoint */
}

@media (max-width: 767px) {
  .main-nav    { display: none; } /* replaced by mobile hamburger */
}

.nav-link {
  display: flex;
  align-items: center;
  padding: 0 18px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  color: rgba(10, 37, 117, 0.72);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
}

@media (prefers-reduced-motion: no-preference) {
  .nav-link {
    transition: color 0.15s ease, border-color 0.15s ease;
  }
}

.nav-link:hover {
  color: var(--color-navy);
  text-decoration: none;
}

/* APPROVED: active page = gold underline, set via aria-current="page" by main.js */
.nav-link[aria-current="page"],
.nav-link.is-active {
  color: var(--color-navy);
  font-weight: 500;
  border-bottom-color: var(--color-gold);
}

.nav-trigger-icon {
  font-size: 10px;
  opacity: 0.5;
  margin-left: 4px;
}

@media (prefers-reduced-motion: no-preference) {
  .nav-trigger-icon {
    transition: transform 0.2s ease;
  }
}

.nav-link[aria-expanded="true"] .nav-trigger-icon {
  transform: rotate(180deg);
}

@media (max-width: 1023px) {
  .nav-link { padding: 0 12px; font-size: 12.5px; }
}


/* ── Header CTA: Enquire Now ── */
/* APPROVED: outlined button (not filled) on desktop */
.header-cta {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  color: var(--color-navy);
  border: 1.5px solid var(--color-navy);
  border-radius: 5px;
  padding: 8px 18px;
  text-decoration: none;
  white-space: nowrap;
  letter-spacing: 0.5px;
}

@media (prefers-reduced-motion: no-preference) {
  .header-cta {
    transition: background 0.15s ease, color 0.15s ease;
  }
}

.header-cta:hover {
  background: var(--color-navy);
  color: var(--color-white);
  text-decoration: none;
}

@media (max-width: 767px) {
  .header-cta { display: none; } /* replaced by CTA inside mobile nav */
}


/* ── Hamburger button ── */
/* Written fresh — no equivalent in component files (see pre-coding checklist).
   Design matches mobile nav's SVG-only approach: no border, no box, no outline.
   Button morphs to ✕ when menu is open — separate close button removed. */
.hamburger {
  display: none; /* hidden on desktop and tablet */
  background: none;
  border: none;
  outline: none;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
  padding: 8px;
  cursor: pointer;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.hamburger:focus-visible {
  outline: 3px solid var(--color-gold);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (max-width: 767px) {
  .hamburger {
    display: flex;
  }
}

/* SVG lines inside hamburger */
.hamburger-line {
  transform-origin: center;
}

@media (prefers-reduced-motion: no-preference) {
  .hamburger-line {
    transition:
      transform  0.25s ease-in-out,
      opacity    0.25s ease-in-out;
  }
}

/* Open state: top line rotates +45deg, middle fades, bottom rotates -45deg */
.hamburger.is-open .hamburger-line--top {
  transform: translateY(6px) rotate(45deg);
}

.hamburger.is-open .hamburger-line--mid {
  opacity: 0;
  transform: scaleX(0);
}

.hamburger.is-open .hamburger-line--bot {
  transform: translateY(-6px) rotate(-45deg);
}


/* ============================================================
   DROPDOWN — Fabric Range mega menu
   Source: component--header-desktop.html (Direction C)
   Transparent outer wrapper — no full-width white bleed.
   Contained 880px white panel, shadow on sides + bottom only.
   ============================================================ */

.dropdown-outer {
  display: none;
  justify-content: center;
  background: transparent;
  position: absolute;
  left: 0;
  right: 0;
  top: 72px; /* sits directly below desktop header */
  z-index: 999;
  /* Transparent sides were keeping the dropdown open on hover.
     pointer-events:none makes them click-through.
     pointer-events:auto on .dropdown-panel restores interactivity on the actual panel. */
  pointer-events: none;
}

.dropdown-outer.is-open {
  display: flex;
}

@media (max-width: 1023px) {
  .dropdown-outer { top: 64px; } /* tablet header height */
}

@media (max-width: 767px) {
  /* !important required: .dropdown-outer.is-open { display: flex } has higher specificity
     and would override this rule — !important ensures dropdown never shows on mobile */
  .dropdown-outer { display: none !important; } /* mobile uses accordion instead */
}

/* APPROVED: contained panel — not full-width */
.dropdown-panel {
  pointer-events: auto; /* restores interactivity — overrides none on .dropdown-outer */
  background: var(--color-white);
  border: 0.5px solid var(--color-border);
  border-top: none;
  border-radius: 0 0 8px 8px;
  /* APPROVED: shadow on sides + bottom only (negative spread clips top shadow) */
  box-shadow:
    0 6px 20px -2px rgba(10, 37, 117, 0.09),
    3px 0 8px -4px  rgba(10, 37, 117, 0.05),
    -3px 0 8px -4px rgba(10, 37, 117, 0.05);
  width: 100%;
  max-width: 880px;
  padding: 20px 28px 14px;
}

/* ── Two-pane layout ── */
.dropdown-panes {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0;
}

/* ── Sidebar ── */
.dropdown-sidebar {
  padding-right: 18px;
  border-right: 0.5px solid rgba(10, 37, 117, 0.08);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sidebar-item {
  padding: 9px 14px 9px 11px;
  border-radius: 5px;
  cursor: pointer;
  border-left: 3px solid transparent;
  text-decoration: none;
  display: block;
}

@media (prefers-reduced-motion: no-preference) {
  .sidebar-item {
    transition: background 0.12s ease, border-color 0.12s ease;
  }
}

.sidebar-item:hover:not(.is-active-greige):not(.is-active-yarn):not(.is-active-denim) {
  background: rgba(10, 37, 117, 0.03);
  border-left-color: rgba(10, 37, 117, 0.12);
}

/* APPROVED: per-fabric active states */
.sidebar-item.is-active-greige {
  background: rgba(112, 112, 103, 0.07);
  border-left-color: var(--accent-greige);
}

.sidebar-item.is-active-yarn {
  background: rgba(180, 120, 64, 0.07);
  border-left-color: var(--accent-yarn);
}

.sidebar-item.is-active-denim {
  background: rgba(10, 37, 117, 0.06);
  border-left-color: var(--accent-denim);
}

.sidebar-title {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-navy);
  line-height: 1.2;
  white-space: nowrap;
}

.is-active-greige .sidebar-title { color: var(--accent-greige); }
.is-active-yarn   .sidebar-title { color: var(--accent-yarn); }

.sidebar-tag {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 0.73rem;
  color: rgba(10, 37, 117, 0.37);
  margin-top: 2px;
  white-space: nowrap;
}

.is-active-greige .sidebar-tag { color: rgba(112, 112, 103, 0.58); }
.is-active-yarn   .sidebar-tag { color: rgba(180, 120, 64, 0.58); }
.is-active-denim  .sidebar-tag { color: rgba(10, 37, 117, 0.48); }

.sidebar-hint {
  font-family: var(--font-body);
  font-size: 10px;
  margin-top: 3px;
  white-space: nowrap;
  display: none;
}

.is-active-greige .sidebar-hint { display: block; color: rgba(112, 112, 103, 0.5); }
.is-active-yarn   .sidebar-hint { display: block; color: rgba(180, 120, 64, 0.5); }
.is-active-denim  .sidebar-hint { display: block; color: rgba(10, 37, 117, 0.4); }

/* ── Right pane ── */
.dropdown-content {
  padding-left: 24px;
}

.dropdown-pane {
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: 10px 28px;
}

.dropdown-pane.is-active {
  display: grid;
}

/* 5th spec: spans full width */
.pane-full {
  grid-column: 1 / -1;
}

/* APPROVED: spec label styling */
.spec-label {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(10, 37, 117, 0.33);
  margin-bottom: 4px;
}

/* APPROVED: spec value styling */
.spec-value {
  font-family: var(--font-body);
  font-size: 12.5px;
  color: rgba(10, 37, 117, 0.75);
  line-height: 1.6;
}

/* ── Bottom note ── */
.dropdown-note {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 0.5px solid rgba(10, 37, 117, 0.07);
  font-family: var(--font-body);
  font-size: 11px;
  color: rgba(10, 37, 117, 0.28);
  text-align: center;
  letter-spacing: 0.04em;
}


/* ============================================================
   MOBILE NAVIGATION — Full-screen overlay
   Source: component--mobile-nav.html
   White overlay, slide in from right (Option B — approved).
   Hamburger morphs to ✕ — no separate close button.
   ============================================================ */

.mobile-nav {
  position: fixed;
  top: 56px;    /* Starts below mobile header (56px) — header stays visible and tappable above */
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: var(--color-white);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  /* Slide from right: start off-screen */
  transform: translateX(100%);
  visibility: hidden;
}

@media (prefers-reduced-motion: no-preference) {
  .mobile-nav {
    transition:
      transform   0.28s ease-in-out,
      visibility  0.28s ease-in-out;
  }
}

/* Open state — toggled by main.js adding .is-open */
.mobile-nav.is-open {
  transform: translateX(0);
  visibility: visible;
}

/* ── Mobile nav header bar ── */
/* Mirrors the collapsed header: same height, same logo, same brand name */
.mob-header {
  height: 56px;               /* APPROVED: mobile header height */
  padding: 0 16px;            /* APPROVED: mobile padding */
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--color-white);
  border-bottom: 0.5px solid rgba(10, 37, 117, 0.08);
  flex-shrink: 0;
}

.mob-brand {
  display: flex;
  align-items: center;
  gap: 8px; /* already 8px - consistent */
  text-decoration: none;
}

.mob-logo {
  width: 40px;                /* APPROVED: mobile logo size */
  height: 40px;
  flex-shrink: 0;
}

.mob-brand-name {
  font-family: var(--font-brand);
  font-size: 1.25rem;         /* APPROVED: mobile brand name size */
  font-weight: 700;
  text-transform: lowercase;
  letter-spacing: -0.25px;
  color: var(--color-navy);
  line-height: 1;
}

/* ── Mobile nav body ── */
.mob-nav-body {
  background: var(--color-white);
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Base nav row */
.nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 20px;
  font-family: var(--font-body);
  font-size: 15px;
  color: rgba(10, 37, 117, 0.80);
  border-bottom: 0.5px solid rgba(10, 37, 117, 0.08);
  cursor: pointer;
  text-decoration: none;
}

.nav-row:hover {
  background: rgba(10, 37, 117, 0.03);
  color: var(--color-navy);
}

/* Last direct-link row before CTA — removes the dividing border at the bottom */
.mob-nav-body a.nav-row:last-of-type {
  border-bottom: none;
}

/* Accordion trigger row */
.nav-row--trigger {
  color: var(--color-navy);
  font-weight: 500;
  background: none;
  border: none;
  border-bottom: 0.5px solid rgba(10, 37, 117, 0.08);
  width: 100%;
  text-align: left;
  cursor: pointer;
  padding: 15px 20px;
  font-family: var(--font-body);
  font-size: 15px;
}

.nav-row--trigger:hover {
  background: rgba(10, 37, 117, 0.03);
}

.chevron {
  font-size: 11px;
  color: rgba(10, 37, 117, 0.4);
  flex-shrink: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .chevron {
    transition: transform 0.2s ease;
  }
}

.chevron.is-open {
  transform: rotate(180deg);
}

/* ── Accordion panel ── */
.accordion-panel {
  overflow: hidden;
  max-height: 0;
  background: var(--color-bg-advantage); /* APPROVED: off-white sub-links background — matches --color-bg-advantage token */
}

@media (prefers-reduced-motion: no-preference) {
  .accordion-panel {
    transition: max-height 0.28s ease;
  }
}

.accordion-panel.is-open {
  max-height: 400px;
}

/* Fabric sub-links — direct navigation on tap */
.fabric-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 20px 13px 32px;
  font-family: var(--font-body);
  font-size: 14px;
  color: rgba(10, 37, 117, 0.70);
  border-bottom: 0.5px solid rgba(10, 37, 117, 0.07);
  text-decoration: none;
  min-height: 44px; /* WCAG 2.2 minimum touch target */
}

.fabric-link:last-of-type {
  border-bottom: none;
}

.fabric-link:hover {
  background: rgba(10, 37, 117, 0.04);
  color: var(--color-navy);
}

/* 7px accent colour dots — colour set via modifier class, not inline style */
.accent-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.accent-dot--greige { background: #707067; }
.accent-dot--yarn   { background: #b47840; }
.accent-dot--denim  { background: var(--color-navy); }

/* Bottom note inside accordion */
.accordion-note {
  padding: 10px 20px;
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.03em;
  text-align: center;
  color: rgba(10, 37, 117, 0.30);
  border-top: 0.5px solid rgba(10, 37, 117, 0.07);
}

/* ── Mobile CTA ── */
/* APPROVED: navy filled button at bottom, min-height 44px */
.mob-cta-wrap {
  padding: 16px 20px;
  border-top: 0.5px solid rgba(10, 37, 117, 0.08);
  margin-top: auto;
}

.mob-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  padding: 12px;
  border-radius: 6px;
  text-decoration: none;
  background: var(--color-navy);
  color: var(--color-white);
  min-height: 44px;
  letter-spacing: 0.5px;
}

.mob-cta:hover {
  background: var(--color-navy-dark);
  color: var(--color-white);
  text-decoration: none;
}


/* ============================================================
   STICKY FOOTER REVEAL
   Footer sits behind main content in stacking order.
   As user scrolls to bottom, main slides off revealing footer.
   DOM order, SEO, accessibility and tab order are all unchanged.
   ============================================================ */
main {
  position: relative;
  z-index: 1;          /* sits above the sticky footer */
  background-color: var(--color-white); /* stacking context must be fully opaque.
     Without this, any semi-transparent hero gradient (e.g. greige page) creates
     transparent pixels in main's composited stacking context, allowing the footer's
     navy background to bleed through. background-color: white makes main opaque
     everywhere, completely hiding the footer until it is revealed by scrolling. */
}

.site-footer {
  position: sticky;
  bottom: 0;
  z-index: 0; /* behind main — revealed as main scrolls away */
}


/* ============================================================
   SITE FOOTER
   Source: component--footer.html
   Background: navy #0a2575
   Layout: 30% logo · 20% gap · 50% link columns
   ============================================================ */

.site-footer {
  background: var(--color-navy);
}

.footer-inner {
  padding: 56px var(--page-padding-inline) 0; /* token for sides — aligns with .header-inner at every viewport width */
}

/* ── Main columns layout ── */
/* APPROVED: 30% logo · 20% gap · 50% links */
.footer-cols {
  display: flex;
  gap: 0;
  margin-bottom: 48px;
}

/* Logo column (30%) */
.footer-brand {
  flex: 0 0 30%;
}

.footer-brand-row {
  display: flex;
  align-items: center;
  gap: 8px; /* reduced to match header brand gap */
  margin-bottom: 12px;
}

.footer-logo {
  width: 64px;   /* APPROVED: desktop logo size */
  height: 64px;
  flex-shrink: 0;
}

.footer-brand-name {
  font-family: var(--font-brand);
  font-size: 1.7rem;  /* APPROVED: desktop brand name size */
  font-weight: 700;
  text-transform: lowercase;
  letter-spacing: -0.25px;
  color: var(--color-white);
  line-height: 1;
}

/* APPROVED: tagline starts at x=0 — flush with logo's LEFT edge, not indented */
.footer-tagline {
  font-family: var(--font-body);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.42);
  line-height: 1.7;
  max-width: 250px; /* aligns line-break with brand name right edge (~210px) */
  /* NO padding-left */
}

/* Gap column (20%) */
.footer-gap {
  flex: 0 0 20%;
}

/* Link columns (50%) */
.footer-links {
  flex: 1;
  display: flex;
  gap: 0;
  justify-content: space-between;
}

.footer-col-heading {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.38);
  margin-bottom: 16px;
  white-space: nowrap; /* prevents "FABRIC RANGE" wrapping, which misaligns first links */
}

.footer-link {
  font-family: var(--font-body);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.60);
  text-decoration: none;
  display: block;
  line-height: 1;
  margin-bottom: 10px;
}

.footer-link:last-child {
  margin-bottom: 0;
}

.footer-link:hover {
  color: var(--color-white);
  text-decoration: none;
}

/* ── Get in Touch: contact rows with inline SVG icons ── */
/* APPROVED: inline SVG paths only — no Tabler webfont, no CDN */
.contact-row {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-bottom: 12px;
}

.contact-row:last-child {
  margin-bottom: 0;
}

.contact-icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  margin-top: 1px;
  color: rgba(255, 255, 255, 0.38);
}

.contact-text {
  font-family: var(--font-body);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.60);
  text-decoration: none;
  line-height: 1.6;
}

.contact-text:hover {
  color: var(--color-white);
  text-decoration: none;
}

/* Address link with diagonal arrow */
.address-link {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  font-family: var(--font-body);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.60);
  text-decoration: none;
  line-height: 1.65;
}

.address-link:hover {
  color: var(--color-white);
  text-decoration: none;
}

.external-arrow {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  margin-top: 5px;
}

/* ── Separator + bottom bar ── */
/* APPROVED: Privacy + Terms BELOW the separator, not above */
.footer-separator {
  height: 0.5px;
  background: rgba(255, 255, 255, 0.12);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 0;
}

.footer-copyright {
  font-family: var(--font-body);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.28);
}

.footer-legal {
  display: flex;
  gap: 24px;
}

.footer-legal-link {
  font-family: var(--font-body);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.28);
  text-decoration: none;
}

.footer-legal-link:hover {
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
}

/* ── Mobile footer ── */
/* APPROVED: single column · Fabric Range + Company in 2-col grid ·
             Get in Touch full width below · copyright stacked */
/* ── TABLET FOOTER (768–1023px) ──
   Logo and brand name match the header tablet sizes exactly (48px / 1.45rem)
   per project instructions: "whatever the screen width, they should be equal."
   Footer-gap hidden at tablet to give the links column more room (65% vs 50%),
   preventing column headings from touching. Brand column grows to 35%.
   At 768px: links col = 65% of 688px = 447px → 93px between each heading. ── */
@media (min-width: 768px) and (max-width: 1023px) {
  .footer-inner      { padding-top: 40px; }              /* sides handled by --page-padding-inline token */
  .footer-logo       { width: 48px; height: 48px; }  /* matches header tablet */
  .footer-brand-name { font-size: 1.45rem; }          /* matches header tablet */
  .footer-brand      { flex: 0 0 35%; }               /* 30%→35% absorbs gap space */
  .footer-gap        { display: none; }               /* 20% gap hidden at tablet */
  /* footer-links flex:1 now gets 65% instead of 50% */
}

/* ── Desktop: footer-links-grid is display:contents so its children become
   direct flex children of .footer-links. Mobile overrides to display:grid.
   Previously this was an inline style — moved here to fix CSS specificity. ── */
.footer-links-grid {
  display: contents;
}

@media (max-width: 767px) {
  .footer-inner {
    padding-top: 40px; /* sides handled by --page-padding-inline token */
  }

  .footer-cols {
    flex-direction: column;
    margin-bottom: 32px;
  }

  .footer-brand {
    flex: none;
    margin-bottom: 32px;
  }

  .footer-logo      { width: 40px; height: 40px; } /* APPROVED: mobile */
  .footer-brand-name { font-size: 1.25rem; }        /* APPROVED: mobile */

  .footer-gap { display: none; }

  .footer-links {
    flex: none;
    flex-direction: column;
    gap: 0;
  }

  /* APPROVED: Fabric Range + Company in 2-col grid */
  /* Override the desktop display:contents rule set in non-media-query CSS */
  .footer-links-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px 16px;
    margin-bottom: 32px;
  }

  /* Get in Touch: full width below grid */
  .footer-col--contact {
    width: 100%;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 16px 0;
  }

  .footer-copyright    { font-size: 11px; }
  .footer-legal-link   { font-size: 11px; }
}

/* ── Last mobile nav row: remove bottom border ── */
.mob-nav-body .nav-row--last { border-bottom: none; }

/* ── End of layout.css ── */