/* Layout primitives — container, grid utility, sticky header. Mobile-first: base = mobile, min-width queries layer up. */

.ap-container {
  max-width: var(--ap-container);
  margin-inline: auto;
  padding-inline: var(--ap-space-md);
}

/* .ap-store-layout — generic "main content + sidebar" 2-column grid, used on
   the store page and any other page with a sidebar (e.g. Contact Us). */
.ap-store-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ap-space-xl);
  align-items: start;
  margin-bottom: var(--ap-space-xl);
}

@media (min-width: 1024px) {
  .ap-store-layout {
    grid-template-columns: 2fr 1fr;
  }
}

.ap-store-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--ap-space-md);
  position: sticky;
  top: calc(var(--ap-topbar-height) + var(--ap-topbar-gap) + var(--ap-header-height) + var(--ap-subnav-height) + var(--ap-space-md));
}

/* .ap-breadcrumb — used on every detail page (store, category, blog post, event). */
.ap-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ap-space-xs);
  font-size: var(--ap-fs-sm);
  color: var(--ap-text-muted);
}

.ap-breadcrumb a {
  display: inline-flex;
  align-items: center;
  gap: var(--ap-space-xs);
  color: var(--ap-text-muted);
}

.ap-breadcrumb a:hover {
  color: var(--ap-primary);
}

.ap-breadcrumb i {
  font-size: 0.65rem;
  opacity: 0.6;
}

.ap-breadcrumb [aria-current="page"] {
  color: var(--ap-text);
  font-weight: 600;
}

/* Modifier for a breadcrumb sitting on a fixed-dark photo/gradient banner
   (e.g. the blog post hero) — reuses the same fixed (non-theme-swapped)
   white tokens as the header/topbar, not a one-off hardcoded color. */
.ap-breadcrumb--on-dark,
.ap-breadcrumb--on-dark a {
  color: var(--ap-header-text-muted);
}

.ap-breadcrumb--on-dark [aria-current="page"] {
  color: var(--ap-header-text);
}

.ap-breadcrumb--on-dark a:hover {
  color: var(--ap-header-text);
}

/* Generic grid: set --cols on the element (or per-breakpoint) to control column count. */
.ap-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols, 1), 1fr);
  gap: var(--ap-space-lg);
}

/* Store / coupon card grids: self-sizing columns, no fixed --cols needed. */
.ap-grid--cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--ap-space-lg);
}

/* .ap-section — generic vertical-rhythm wrapper used on every page (home,
   store, category, event, ...), so this must live in a globally-loaded file,
   not a page-scoped one under 06-pages/. Two adjacent <section> elements
   each carry this padding on both edges (padding never collapses like
   margins do), so the visible gap between sections is 2x this value —
   was --ap-space-xl (4rem), making back-to-back sections read as ~128px of
   empty space. --ap-space-lg keeps it a single shared, still-generous value
   everywhere .ap-section is used, just tighter. */
.ap-section {
  padding-block: var(--ap-space-lg);
}

.ap-section__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ap-space-md);
  margin-bottom: var(--ap-space-lg);
}

/* This wrapper already carries the margin-bottom above — without this, the
   heading's own base margin-bottom (03-base.css) would stack on top of it.
   h1 too: promocodes.php's page title lives in one of these. */
.ap-section__header h1,
.ap-section__header h2 {
  margin-bottom: 0;
}

.ap-section__link {
  font-size: var(--ap-fs-sm);
  font-weight: 600;
  white-space: nowrap;
}

/* .ap-intro — centered, muted-text lead-in block (home page hero, category
   "About" blurb). Used on multiple pages, so it must live here rather than
   in a page-scoped 06-pages/ file. */
.ap-intro {
  max-width: 760px;
  margin-inline: auto;
  color: var(--ap-text-muted);
  display: flex;
  flex-direction: column;
  gap: var(--ap-space-md);
}

/* Fixed aspect ratio wrapper for card media — prevents layout shift while images/logos load. */
.ap-media-ratio {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--ap-radius-md);
  background: var(--ap-surface-alt);
}

.ap-media-ratio img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ap-media-ratio--square { aspect-ratio: 1 / 1; }
.ap-media-ratio--logo { aspect-ratio: 2 / 1; }

body {
  padding-top: calc(var(--ap-topbar-height) + var(--ap-topbar-gap) + var(--ap-header-height) + var(--ap-subnav-height));
}

/* Topbar sits pinned above everything, including the header — it's the
   true top of the page. The header is fixed directly below it, with a
   small visible gap (--ap-topbar-gap) so the two bars don't visually merge. */
.ap-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 600;
  height: var(--ap-topbar-height);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ap-header {
  position: fixed;
  top: calc(var(--ap-topbar-height) + var(--ap-topbar-gap));
  left: 0;
  right: 0;
  z-index: 500;
  height: var(--ap-header-height);
}

/* .ap-subnav (Top Deals/Categories/Stores/.../Blog row) only shows at the
   same >=1024px breakpoint as the rest of the desktop nav — collapsing its
   height token to 0 below that means every calc() using it (body padding,
   sticky sidebars, mobile nav inset) adapts automatically, no duplicate
   mobile-only overrides needed. */
@media (max-width: 1023px) {
  :root {
    --ap-subnav-height: 0px;
  }
}

@media (max-width: 767px) {
  :root {
    /* Collapsing the height token to 0 (same pattern as --ap-subnav-height
       above) means every calc() that includes it — header position, body
       padding-top, mobile nav inset — adapts automatically with no
       duplicate mobile-only overrides needed. */
    --ap-topbar-height: 0px;
  }

  /* Hidden on mobile by request — the wrapped disclosure text + link never
     read cleanly at this width. Still shown at >=768px. The affiliate
     disclosure itself isn't only said here, though: /affiliate-disclosure
     and /terms are still linked from the footer on every page size. */
  .ap-topbar {
    display: none;
  }
}

@media (min-width: 480px) {
  .ap-grid--sm-2 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 768px) {
  .ap-grid--md-3 { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1024px) {
  .ap-grid--lg-4 { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 1280px) {
  .ap-grid--xl-6 { grid-template-columns: repeat(6, 1fr); }
}