/* =========================================================
   Satphone site footer — the shared footer for the chrome-swapped routes
   (category, contact, FAQs, airtime plans). The homepage keeps its own.

   Placement: the template renders into `page.bottom.container`, which the base
   page layout declares after="main.content" inside page.wrapper — so the footer
   is a sibling of <main class="page-main">, never inside it.

   Scroll behaviour: `.page-main` is held to the full viewport height below the
   fixed 74px header (see the rule at the foot of this file). Page-wrapper's
   74px top padding plus that min-height comes to exactly 100vh, so the footer
   always begins at the fold — the reader reaches the end of the main column
   before any of it appears.

   Uses the global --spc-* tokens (cart-drawer.css, loaded site-wide), NOT the
   homepage's --bg/--line/--muted, which only exist on the homepage.
   ========================================================= */

/* The footer renders inside Magento's `page.bottom.container`, which styles-l.css
   caps at max-width 1280px with auto side margins and 20px padding — so the
   footer inherits that cap however wide its own box is set. Flatten the container
   first; everything below then measures against the real viewport.

   The selector has to carry `.page-wrapper >`: styles-l.css targets this element
   as `.page-wrapper > .page-bottom` (0,2,0) and loads AFTER the theme CSS, so a
   plain `.sp-has-footer .page-bottom` ties on specificity and loses on source
   order. Adding the child step makes this 0,3,0 and settles it on specificity
   rather than order. Same trap as the captcha image note in account-contact.css. */
.sp-has-footer .page-wrapper > .page-bottom {
  max-width: none; width: 100%; margin: 0; padding: 0;
}

.sp-footer {
  /* One column geometry for the whole footer: a brand track and a content track.
     The nav row and the marks row both lay out on it, so the payment block lines
     up with the leading nav column instead of running back to the page edge.
     Change it here and both rows move together — they cannot drift apart.
     The alignment is positional, not tied to a particular column's name, so
     reordering the nav columns leaves it correct. */
  --sp-footer-grid: minmax(220px, 1fr) 2.6fr;
  --sp-footer-gap: clamp(2rem, 5vw, 5rem);

  background: #0a1526; /* a step below --spc-bg, so the footer reads as a base */
  border-top: 1px solid var(--spc-line);
  color: var(--spc-muted);
}
/* Full-bleed: no max-width, so the footer spans the whole viewport. The side
   padding scales with the viewport instead, which keeps the columns off the
   edge on a wide screen without ever capping the width. */
.sp-footer-inner {
  width: 100%; box-sizing: border-box;
  padding: 3.5rem var(--spc-gutter) 1.75rem;
}

/* ---------- Top: brand + nav ---------- */
.sp-footer-top {
  display: grid; grid-template-columns: var(--sp-footer-grid); gap: var(--sp-footer-gap);
  padding-bottom: 2.5rem; border-bottom: 1px solid var(--spc-line);
}
.sp-footer-logo { display: inline-flex; }
.sp-footer-logo img { height: 32px; width: auto; display: block; }
.sp-footer-tag {
  margin: 1rem 0 0; color: var(--spc-muted);
  font-size: .9rem; line-height: 1.6;
}
.sp-footer-cols {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 2.5rem);
}
.sp-footer-col h2 {
  margin: 0 0 .9rem; color: var(--spc-accent2);
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
}
.sp-footer-col a {
  display: block; padding: .3rem 0; color: var(--spc-muted);
  font-size: .88rem; text-decoration: none; transition: color .15s ease;
}
.sp-footer-col a:hover { color: var(--spc-fg); }

/* ---------- Middle: payment + shipping marks ---------- */
/* Same two tracks as the nav row. The first is left empty — the groups are placed
   explicitly into the second, which is what puts "Payment methods" on the same
   left edge as the leading nav column. */
.sp-footer-marks {
  display: grid; grid-template-columns: var(--sp-footer-grid); gap: var(--sp-footer-gap);
  padding: 2.25rem 0; border-bottom: 1px solid var(--spc-line);
}
.sp-footer-mark-groups {
  grid-column: 2; min-width: 0;
  display: grid; grid-template-columns: 2.4fr 1fr; gap: var(--sp-footer-gap);
}
.sp-footer-mark-group h2 {
  margin: 0 0 .9rem; color: var(--spc-accent2);
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
}
.sp-marks {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 0; padding: 0; list-style: none;
}
/* Fixed-size tile. The interpretations in the template are monochrome and sized
   to this box, so a real brand SVG can replace one without reflowing the row. */
.sp-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 62px; height: 38px; box-sizing: border-box; padding: 0 8px;
  background: var(--spc-bg-2); border: 1px solid var(--spc-line);
  color: var(--spc-fg);
  transition: border-color .18s ease, color .18s ease;
}
.sp-mark:hover { border-color: var(--spc-accent); color: var(--spc-accent); }
.sp-mark svg { width: 100%; height: auto; display: block; }
/* The SVGs are aria-hidden, so each tile carries a screen-reader-only name. */
.sp-mark-label {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Bottom: copyright + legal ---------- */
.sp-footer-bottom {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
  padding-top: 1.5rem; color: var(--spc-muted); font-size: .8rem;
}
.sp-footer-legal { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.sp-footer-legal a {
  color: var(--spc-muted); text-decoration: none; transition: color .15s ease;
}
.sp-footer-legal a:hover { color: var(--spc-accent); }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  /* Brand track drops away, so both rows go single-column and the marks return to
     the first column — otherwise `grid-column: 2` would invent an implicit track
     and indent them past the nav. */
  .sp-footer-top,
  .sp-footer-marks { grid-template-columns: 1fr; gap: 2.25rem; }
  .sp-footer-mark-groups { grid-column: 1; }
}
@media (max-width: 720px) {
  /* Vertical padding tightens on small screens, but the horizontal inset stays on
     --spc-gutter — hard-coding it here put the footer 15px inside the header,
     which is exactly the drift this token exists to prevent. */
  .sp-footer-inner { padding: 2.5rem var(--spc-gutter) 1.5rem; }
  .sp-footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
  .sp-footer-mark-groups { grid-template-columns: 1fr; gap: 1.75rem; }
  .sp-footer-bottom { flex-direction: column; gap: .75rem; }
}

/* =========================================================
   Main content absorbs the viewport.

   Scoped to the routes that carry this footer (`.sp-has-footer`, set on <body>
   by the layout) so it cannot reach the homepage or checkout. Every one of these
   pages already sets its own min-height on .page-main; this is the shared
   guarantee so a page with little content — the category grid with four
   products, say — still fills the screen and keeps the footer below the fold
   rather than floating it halfway up.

   Must be `main.page-main`, not `.page-main`. The product-full-width layout
   renders a SECOND element carrying that class — div.page-main-details, holding
   the reviews — and a bare class selector stretched that one to a full viewport
   too, leaving a screen-height empty gap between the product and the footer.
   Only the real <main> should absorb the viewport.
   ========================================================= */
.sp-has-footer main.page-main { min-height: calc(100vh - 74px); box-sizing: border-box; }