/*
 * Base mechanics for the "Flexible Sections" page builder:
 * section wrapper modifiers, the shared columns grid system,
 * and structural CSS for tabs / accordion / carousel primitives
 * that template-parts/flexible/flexible.js drives.
 *
 * Layout-specific visual styling lives in
 * template-parts/flexible/css/batch-*.css
 */

.flex-section {
  position: relative;
}

/*
 * Section content wrapper + its width variants (driven by the "Container
 * Size" Section Option). Plain CSS rather than Tailwind's mx-auto/px-6/
 * max-w-7xl utilities so this always renders correctly immediately —
 * every class a Section Option can produce needs to already exist here,
 * with no `npm run build:css` step required in between saving an option
 * and seeing it take effect.
 */
.flex-container {
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}

@media (min-width: 1024px) {
  .flex-container {
    padding-left: 40px;
    padding-right: 40px;
  }
}

.flex-container-small {
  max-width: 720px;
}

.flex-container-medium {
  max-width: 960px;
}

.flex-container-standard {
  max-width: 1280px;
}

.flex-container-full {
  max-width: 100%;
}

.flex-section.default-padding {
  padding: 128px 0;
}

.flex-section.npt {
  padding-top: 0;
}

.flex-section.npb {
  padding-bottom: 0;
}

.flex-section.np {
  padding: 0;
}

.flex-section.light-bg,
.flex-section.light-bg-full {
  background: var(--color-bg-alt);
  /* The body default is now dark-text-on-dark-bg (style.css), so a light
     section needs to explicitly revert back to dark text/muted — without
     this it would inherit light text from the body and disappear against
     this section's own light background. */
  --color-text: #0a0a0f;
  --color-muted: #6b6b76;
}

.flex-section[class*="dark-bg"],
.flex-section.is-dark {
  background: var(--color-navy);
  color: rgba(255, 255, 255, 0.92);
  /*
   * Re-point the shared text-color variables locally within any dark
   * section. Every layout's own CSS (in css/batch-*.css) sets text
   * colors via var(--color-text)/var(--color-muted)/var(--color-border)
   * rather than hardcoded hex — because CSS custom properties re-resolve
   * per-scope, this single override makes ALL of that text legible on a
   * dark background without editing every layout file individually.
   */
  --color-text: #ffffff;
  --color-muted: rgba(255, 255, 255, 0.7);
  --color-border: rgba(255, 255, 255, 0.16);
  --color-bg: transparent;
  --color-bg-alt: rgba(255, 255, 255, 0.06);
}

.flex-section[class*="dark-bg"] a:not(.btn-dark):not(.btn-light),
.flex-section.is-dark a:not(.btn-dark):not(.btn-light) {
  color: #ffffff;
}

/*
 * When the background animation is on (body.cr-bg-animation-on, set in
 * header.php), let dark sections go fully transparent instead of painting
 * var(--color-navy) over the fixed wave layer behind them. This is a
 * no-op visually on its own — --color-navy IS the page's own --color-bg,
 * so an opaque dark section already looks pixel-identical to transparent
 * — it only matters because it lets the waves show through continuously
 * instead of being clipped to section gaps. Higher specificity than the
 * plain .is-dark rule above (extra body ancestor + class) wins without
 * needing !important. Light sections are deliberately left opaque: they
 * use dark text on a light card, which would go unreadable against the
 * dark page behind a transparent one.
 */
body.cr-bg-animation-on .flex-section[class*="dark-bg"],
body.cr-bg-animation-on .flex-section.is-dark {
  background: transparent;
}

/* Status badges (sizes_layout) use a light-background-assuming tinted
   chip (dark text on a faint color wash) that reads poorly on a dark
   section — brighten both the chip and its text for dark contexts. */
.flex-section[class*="dark-bg"] .size-item-status.status-in-stock,
.flex-section.is-dark .size-item-status.status-in-stock {
  color: #4ade80;
  background: rgba(74, 222, 128, 0.16);
  border-color: rgba(74, 222, 128, 0.35);
}

.flex-section[class*="dark-bg"] .size-item-status.status-last-few,
.flex-section.is-dark .size-item-status.status-last-few {
  color: #fb923c;
  background: rgba(251, 146, 60, 0.16);
  border-color: rgba(251, 146, 60, 0.35);
}

.flex-section[class*="dark-bg"] .size-item-status.status-sold-out,
.flex-section.is-dark .size-item-status.status-sold-out {
  color: #f87171;
  background: rgba(248, 113, 113, 0.16);
  border-color: rgba(248, 113, 113, 0.35);
}

.flex-section[class*="dark-bg"] .eyebrow,
.flex-section.is-dark .eyebrow {
  color: #c4b5ff;
}

.flex-section[class*="dark-bg"] h1,
.flex-section[class*="dark-bg"] h2,
.flex-section[class*="dark-bg"] h3,
.flex-section.is-dark h1,
.flex-section.is-dark h2,
.flex-section.is-dark h3 {
  color: #fff;
}

/*
 * Light-on-dark overrides for the newer Tailwind-based Flexible Sections
 * layouts (template-parts/flexible/layouts/*.php), which style themselves
 * via text-ink/text-ash/bg-paper/bg-mist/border-line utility classes
 * (src/tailwind.css @theme tokens) rather than the --color-text/
 * --color-muted variables the block above re-points.
 *
 * Wrapped in @layer components (reusing the same layer name declared by
 * src/tailwind.css's `@layer theme, components, utilities;`) rather than
 * left unlayered: some templates use Tailwind's "!" important modifier
 * (e.g. text-ink!), which compiles to a real !important declaration
 * inside @layer utilities. Per the CSS Cascade Layers spec, layer
 * priority for !important declarations is the REVERSE of normal-priority
 * ones — components outranks utilities for !important, whereas unlayered
 * is the *lowest* priority of all for !important (the opposite of how
 * unlayered behaves for normal declarations). So an unlayered !important
 * override here would actually lose to text-ink!; @layer components
 * with !important is what's needed to beat it — and since !important
 * always beats a non-important declaration regardless of layer, it still
 * wins against the plain (non-"!") utility classes too.
 *
 * bg-ink is deliberately NOT touched here: it's used for chip/button/
 * avatar fills (btn-dark, card-badge, initials circles, bento featured
 * cells), which should stay dark regardless of section background —
 * only text-ink (headings/body text) needs to flip to read on dark.
 */
@layer components {
  .flex-section[class*="dark-bg"] .text-ink,
  .flex-section.is-dark .text-ink,
  .flex-section[class*="dark-bg"] .text-ink\!,
  .flex-section.is-dark .text-ink\! {
    color: #fff !important;
  }

  .flex-section[class*="dark-bg"] .text-ash,
  .flex-section.is-dark .text-ash {
    color: rgba(255, 255, 255, 0.65) !important;
  }

  .flex-section[class*="dark-bg"] .bg-paper,
  .flex-section.is-dark .bg-paper {
    background-color: var(--color-ink-soft) !important;
  }

  .flex-section[class*="dark-bg"] .bg-mist,
  .flex-section.is-dark .bg-mist {
    background-color: rgba(255, 255, 255, 0.08) !important;
  }

  .flex-section[class*="dark-bg"] .border-line,
  .flex-section.is-dark .border-line {
    border-color: rgba(255, 255, 255, 0.14) !important;
  }

  /* Same softening as .border-line above, for layouts that need a
     different color on another side of the same element (e.g. a divider
     row that also has an accent-colored left border) and so use
     Tailwind's directional border-color utility instead of the
     all-sides one. */
  .flex-section[class*="dark-bg"] .border-b-line,
  .flex-section.is-dark .border-b-line {
    border-bottom-color: rgba(255, 255, 255, 0.14) !important;
  }
}

/* Gutter / gap modifiers set CSS custom properties consumed below */
.flex-section.standard-gutters {
  --flex-gutter: 28px;
}

.flex-section.no-gutters {
  --flex-gutter: 0px;
}

.flex-section.narrow-gutters {
  --flex-gutter: 12px;
}

.flex-section.wide-gutters {
  --flex-gutter: 48px;
}

.flex-section.no-vertical-layout-gap {
  --flex-vgap: 0px;
}

.flex-section.small-vertical-layout-gap {
  --flex-vgap: 16px;
}

.flex-section.medium-vertical-layout-gap {
  --flex-vgap: 32px;
}

.flex-section.large-vertical-layout-gap {
  --flex-vgap: 56px;
}

.flex-section.no-horizontal-layout-gap {
  --flex-hgap: 0px;
}

.flex-section.narrow-horizontal-layout-gap {
  --flex-hgap: 16px;
}

.flex-section.wide-horizontal-layout-gap {
  --flex-hgap: 48px;
}

.flex-section.standard-horizontal-layout-gap {
  --flex-hgap: 28px;
}

.flex-section.two-columns .flex-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--flex-hgap, 28px);
  align-items: start;
}

.flex-section.v-align .flex-two-col {
  align-items: center;
}

@media (max-width: 782px) {
  .flex-section.two-columns .flex-two-col {
    grid-template-columns: 1fr;
  }
}

/* Shared "columns" grid system, driven by cr_wp_flex_columns_class() */
.flex-grid {
  display: grid;
  gap: var(--flex-gutter, 28px);
  grid-template-columns: 1fr;
}

.flex-grid.cols-1 {
  grid-template-columns: 1fr;
}

.flex-grid.cols-2 {
  grid-template-columns: repeat(2, 1fr);
}

.flex-grid.cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

.flex-grid.cols-4 {
  grid-template-columns: repeat(4, 1fr);
}

.flex-grid.cols-5 {
  grid-template-columns: repeat(5, 1fr);
}

.flex-grid.cols-6 {
  grid-template-columns: repeat(6, 1fr);
}

.flex-grid.cols-auto {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

@media (max-width: 900px) {
  .flex-grid.cols-3,
  .flex-grid.cols-4,
  .flex-grid.cols-5,
  .flex-grid.cols-6 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .flex-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Tabs primitive (driven by flexible.js) */
.tabs-nav {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

.tabs-nav button {
  padding: 10px 22px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: #fff;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-text);
}

.tabs-nav button.is-active {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

.tab-panel {
  display: none;
}

.tab-panel.is-active {
  display: block;
}

/* Accordion primitive (driven by flexible.js) */
.accordion-item {
  border-bottom: 1px solid var(--color-border);
}

.accordion-toggle {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 20px 0;
  font-size: 1.05rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-family: var(--font-body);
  color: inherit;
}

.accordion-toggle::after {
  content: "+";
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 1;
  transition: transform 0.15s ease;
  flex-shrink: 0;
}

.accordion-item.is-open .accordion-toggle::after {
  transform: rotate(45deg);
}

.accordion-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease;
}

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

.accordion-panel-inner {
  padding-bottom: 20px;
  color: var(--color-muted);
}

/* Carousel primitive (driven by flexible.js) */
.carousel-wrap {
  position: relative;
}

.carousel-track {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.carousel-track::-webkit-scrollbar {
  display: none;
}

.carousel-track > * {
  scroll-snap-align: start;
  flex: 0 0 auto;
}

.carousel-controls {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 24px;
}

.carousel-controls button {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: #fff;
  cursor: pointer;
  font-size: 1rem;
  color: var(--color-text);
}

.carousel-controls button:hover {
  background: var(--color-bg-alt);
}