/* ==========================================================================
   SECTIONS — the layout system
   ==========================================================================

   One place that decides how wide a section is, how much air sits around it,
   and what its label and heading look like. Everything else composes from
   these.

   The problem this replaces: each block carried its own width, padding and
   heading sizes, so a fix in one place left the next section subtly different,
   and specificity wars broke out whenever two blocks met. Now a block says
   *what* it is and this file says *how* it sits.

   Three primitives:

     .ca-section   vertical rhythm — the air above and below
     .ca-container horizontal measure — the width and the gutter
     .ca-heading   the label / title / lede stack

   A block uses them together and adds only what makes it that block.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Container — the one measure
   -------------------------------------------------------------------------- */

.ca-container {
  width: 100%;
  max-width: calc(var(--ca-width) + (var(--ca-gutter) * 2));
  margin-inline: auto;
  padding-inline: var(--ca-gutter);
}

.ca-container--narrow { max-width: var(--ca-width-narrow); }
.ca-container--prose  { max-width: var(--ca-width-prose); }
.ca-container--flush  { padding-inline: 0; }

/* --------------------------------------------------------------------------
   Section — the vertical rhythm
   -------------------------------------------------------------------------- */

/*
 * The size variants adjust the gap above a section rather than its padding.
 * Padding is now only about the room inside a tint, so changing it here would
 * make a "small" tinted section look squashed rather than simply closer.
 */
.ca-section--sm    { margin-top: calc(var(--ca-section-gap) / 2); }
.ca-section--lg    { margin-top: calc(var(--ca-section-gap) * 2); }
.ca-section--flush { margin-top: 0; }

/* Two tinted sections in a row should read as one band, not two stripes. */
.ca-section + .ca-section.is-same-tint { padding-top: 0; }

/* --------------------------------------------------------------------------
   Surfaces — the tints a section can sit on
   -------------------------------------------------------------------------- */

.ca-surface--cream { background: var(--ca-cream); }
.ca-surface--sand  { background: var(--ca-sand); }
.ca-surface--sky   { background: var(--ca-sky); }
.ca-surface--lilac { background: var(--ca-lilac); }
.ca-surface--warm  { background: var(--ca-cream-warm); }
.ca-surface--white { background: var(--ca-white); }
.ca-surface--ink   { background: var(--ca-ink); color: var(--ca-on-dark); }

/* --------------------------------------------------------------------------
   Heading stack — label, title, lede

   Every section that has a heading uses this, so the relationship between the
   three lines is decided once. A block never sets its own heading size.
   -------------------------------------------------------------------------- */

.ca-heading { margin-bottom: var(--ca-heading-gap); }

.ca-heading--center { text-align: center; }
.ca-heading--center .ca-heading__lede { margin-inline: auto; }
.ca-heading--center .ca-heading__label { margin-inline: auto; }

.ca-heading__label {
  display: flex;
  align-items: center;
  gap: 9px;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto var(--ca-label-gap) 0;
  font-family: var(--ca-font-mono);
  font-size: var(--ca-text-label);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: var(--ca-tracking-label);
  text-transform: uppercase;
  color: var(--ca-teal);
}

.ca-heading__label--orange { color: var(--ca-orange-dark); }
.ca-heading__label--warm   { color: var(--ca-faint-warm); }
.ca-heading__label--muted  { color: var(--ca-faint); }

/*
 * The prefix is drawn rather than typed, so the copy stays clean and a
 * translator or editor cannot accidentally lose it.
 */
.ca-heading__label::before {
  content: "//";
  opacity: 0.75;
}

.ca-heading__label--pill {
  font-size: var(--ca-text-pill);
  padding: 6px 13px;
  border: 1px solid currentColor;
  border-radius: var(--ca-r-pill);
  background: var(--ca-teal-tint);
}
.ca-heading__label--pill::before { content: none; }

/*
 * Open / closed state, applied wherever a label carries data-state. Colour is
 * traded rather than layered so the border and dot follow via currentColor.
 */
[data-state="soon"].ca-heading__label {
  color: var(--ca-orange-dark);
  background: rgba(242, 103, 43, 0.08);
}

[data-state="closed"].ca-heading__label {
  color: var(--ca-faint);
  background: var(--ca-tint);
}

.ca-heading__title {
  margin: 0;
  font-family: var(--ca-font-display);
  font-size: var(--ca-text-section);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: var(--ca-tracking-tighter);
  color: var(--ca-ink);
  text-wrap: balance;
}

.ca-heading__title--lg { font-size: var(--ca-text-section-lg); }
.ca-heading__title--sm { font-size: var(--ca-text-section-sm); }

.ca-heading__lede {
  max-width: var(--ca-measure);
  margin: 12px 0 0;
  color: var(--ca-muted);
  font-size: var(--ca-text-lede);
  line-height: 1.6;
  text-wrap: balance;
}

/* ==========================================================================
   Section rhythm

   One number decides how far apart every section on the site sits, and it is
   the same 16px that separates the store info card from its map.

   Two jobs, deliberately kept apart:

     the gap BETWEEN sections   --ca-section-gap   a margin
     the room INSIDE a tint     --ca-section-pad   padding

   They were the same property before, which is why the spacing was uneven: a
   tinted band's internal room was adding to the gap, so two plain sections sat
   16px apart while two tinted ones sat 52px apart. As a margin, the gap is the
   gap no matter what the section is made of.

   Margin-top rather than a sibling selector, because section-level elements
   are several different classes and matching every pairing between them would
   be a grid of selectors that quietly misses the pair nobody thought of.
   ========================================================================== */

/*
 * Every section-level element, listed once.
 *
 * A class missing from this list gets no gap at all, which is how the Q&A
 * once ended up flush against the block below it.
 */
.ca-section,
.ca-marquee,
.ca-promos,
.ca-paycor,
.ca-office,
.ca-footer {
  margin-top: var(--ca-section-gap);
}

/* Only the untinted ones give up their padding; a tint keeps its room. */
.ca-section,
.ca-paycor {
  padding-block: 0;
}

/* Anything carrying a background needs room inside it. */
.ca-section[class*="ca-surface--"],
.ca-marquee,
.ca-promos {
  padding-block: var(--ca-section-pad);
}

/*
 * Two tinted bands in a row meet directly. A strip of page showing between two
 * colours reads as a mistake rather than as a change of section.
 */
.ca-marquee + .ca-promos,
.ca-promos + .ca-marquee {
  margin-top: 0;
}

/* The first thing on a page sits against the header, not below a gap. */
.ca-hero,
#ca-main > :first-child,
.ca-page-content > :first-child,
.is-root-container > :first-child,
.is-root-container > .wp-block-block > :first-child { margin-top: 0; }