/* ==========================================================================
   The Catch Air section block, and its parts

   The band, the container and the heading stack are the section primitives in
   sections.css (.ca-section, .ca-surface--*, .ca-container, .ca-heading). This
   file adds only what the block brings:

     section.ca-section.ca-sec.ca-sec--<layout>[.ca-sec--aside-<side>]
       .ca-container
         .ca-sec__aside     the heading (split) or the photo (media)
         .ca-sec__main      the heading (stack, media), then
           .ca-sec__parts   the blocks placed inside the section

   Written by ca_render_section() in inc/section-block.php, and drawn the same
   way in the editor by section-block.js.
   ========================================================================== */

/* --- Layout -------------------------------------------------------------- */

/*
 * A section inside a section — the usual case being sections in the tabs of
 * a section — breaks out to the full page width, so its tint spans the page
 * like any other. Its own container still centres its content on the page
 * width. (overflow-x: clip on the page keeps this from adding a scrollbar.)
 */
.ca-sec .ca-section.ca-sec {
  margin-inline: calc(50% - 50vw);
}

/*
 * The gap between parts (--ca-sec-stack) and between the two columns
 * (--ca-sec-gap) are set on :root in tokens.css. They used to be declared
 * here, on every section, which silently overrode Settings → Brand, Layout &
 * Style → "Gap between parts" (written on :root) — the setting did nothing.
 */

/*
 * Every section carries its own air, tinted or not — the prototype pads each
 * section, and the old bands always did. The small section-gap margin the
 * untinted primitive uses would leave a heading pressed against the band
 * above it. Sections then meet directly, so a tint change is one clean edge.
 */
.ca-section.ca-sec {
  margin-top: 0;
  padding-block: var(--ca-section-pad);
}
.ca-section.ca-sec.ca-section--sm { padding-block: calc(var(--ca-section-pad) * 0.6); }
.ca-section.ca-sec.ca-section--lg { padding-block: calc(var(--ca-section-pad) * 1.6); }

/* Stacked: the heading, then the content, full width. */
.ca-sec__parts > :first-child { margin-top: 0; }

/* An empty paragraph left behind in the editor adds no space. */
.ca-sec__parts > p:empty,
.ca-page-content > p:empty { display: none; }

/* Parts in a row of their own each get the same space above them. */
.ca-sec__parts > * + * { margin-top: var(--ca-sec-stack); }
.ca-sec__parts > :last-child  { margin-bottom: 0; }
.ca-sec--stack .ca-heading + .ca-sec__parts,
.ca-sec--media .ca-heading + .ca-sec__parts { margin-top: var(--ca-sec-stack); }

/* Beside: two columns, the aside first unless it is on the right. */
.ca-sec--split > .ca-container,
.ca-sec--media > .ca-container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--ca-sec-gap);
  align-items: center;
}

.ca-sec--aside-right .ca-sec__aside { order: 2; }

/* A heading beside its content reads better a touch narrower than half. */
.ca-sec--split > .ca-container { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.ca-sec--split.ca-sec--aside-right > .ca-container { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.ca-sec--split .ca-sec__aside { align-self: start; }

.ca-sec__photo { margin: 0; }
.ca-sec__photo img {
  border-radius: var(--ca-r-xl);
  box-shadow: var(--ca-shadow-lg);
}

/* Narrow screens: one column, the photo above its words whichever side it was. */
@media (max-width: 820px) {
  .ca-sec--split > .ca-container,
  .ca-sec--media > .ca-container,
  .ca-sec--split.ca-sec--aside-right > .ca-container { grid-template-columns: minmax(0, 1fr); }
  .ca-sec--aside-right .ca-sec__aside { order: 0; }
}

/* --- Chosen colours: each a custom property, switched on by a class ------- */

/* Any background, in place of the tint (same specificity, later file: wins). */
.ca-sec--bg { background: var(--ca-sec-bg); }

/* The accent reaches the kicker and every list marker in the section. */
.ca-sec--accent { --ca-part-accent: var(--ca-sec-accent); }
.ca-sec--accent .ca-heading__label { color: var(--ca-sec-accent); }

/* Icon above the heading. */
.ca-sec__icon { margin: 0 0 12px; font-size: 34px; line-height: 1; }
.ca-sec__icon--center { text-align: center; }

/* On the ink tint, the heading follows the light text. */
.ca-sec.ca-surface--ink .ca-heading__title { color: var(--ca-white); }
.ca-sec.ca-surface--ink .ca-heading__lede  { color: var(--ca-on-dark); }

/* ==========================================================================
   Parts — styles on the core List block

   Each is a list, so it is edited like one: type, Enter for the next item,
   drag to reorder, and switch style in the Styles panel. They share the reset
   and the gap; each style then draws its own item.
   ========================================================================== */

/* :where() keeps this at zero specificity, so each style below can change it. */
:where(ul, ol):where(.is-style-diamonds, .is-style-ticks, .is-style-steps, .is-style-cards, .is-style-chips, .is-style-info) {
  --ca-part-gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ca-part-gap);
}

/*
 * The editor's reset (:where(.editor-styles-wrapper) ul { list-style: revert })
 * outranks the zero-specificity rule above, so the browser's bullets, indent
 * and bottom margin came back on the canvas only. The parts draw their own
 * markers, so these three hold at ordinary strength.
 */
:is(.is-style-diamonds, .is-style-ticks, .is-style-steps, .is-style-cards, .is-style-chips, .is-style-info) {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}

:where(.is-style-diamonds, .is-style-ticks, .is-style-steps, .is-style-cards, .is-style-chips, .is-style-info) > li {
  margin: 0;
  color: var(--ca-body);
  font-size: var(--ca-text-base);
  line-height: 1.55;
}

/* Centred sections centre the wrapping parts too. */
.ca-heading--center + .ca-sec__parts :is(.is-style-chips, .is-style-cards, .is-style-steps) { justify-content: center; }

/* --- Diamonds: the Food & Drinks bullet ---------------------------------- */

.is-style-diamonds { --ca-part-gap: 8px; }
.is-style-diamonds > li {
  position: relative;
  padding-left: 20px;
}
.is-style-diamonds > li::before {
  content: "\25C6";
  position: absolute;
  left: 0;
  top: 0.3em;
  color: var(--ca-part-accent, var(--ca-orange));
  font-size: 11px;
  line-height: 1;
}

/* --- Check marks --------------------------------------------------------- */

.is-style-ticks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
.is-style-ticks > li {
  position: relative;
  padding: 14px 16px 14px 46px;
  background: var(--ca-white);
  border: 1px solid var(--ca-hairline);
  border-radius: var(--ca-r-sm);
}
.is-style-ticks > li::before {
  content: "\2713";
  position: absolute;
  left: 16px;
  top: 15px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--ca-teal-tint);
  color: var(--ca-part-accent, var(--ca-teal));
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

/* --- Numbered steps: bold words first become the step's title ------------ */

.is-style-steps {
  counter-reset: ca-step;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  --ca-part-gap: 16px;
}
.is-style-steps > li {
  counter-increment: ca-step;
  padding: 24px 20px;
  background: var(--ca-white);
  border: 1px solid var(--ca-hairline);
  border-radius: var(--ca-r-md);
  box-shadow: var(--ca-shadow-sm);
  color: var(--ca-muted);
  font-size: 14px;
}
.is-style-steps > li::before {
  content: counter(ca-step);
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 12px;
  border-radius: 50%;
  background: var(--ca-part-accent, var(--ca-orange));
  color: var(--ca-cream);
  font-family: var(--ca-font-display);
  font-weight: 800;
  font-size: 15px;
}
.is-style-steps > li > strong:first-child {
  display: block;
  margin: 0 0 6px;
  font-family: var(--ca-font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--ca-ink);
}

/* --- Cards: an emoji or bold words first, then the label ----------------- */

.is-style-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
  --ca-part-gap: 14px;
}
.is-style-cards > li {
  padding: 22px 18px;
  background: var(--ca-white);
  border: 1px solid var(--ca-hairline);
  border-radius: var(--ca-r-md);
  box-shadow: var(--ca-shadow-sm);
  text-align: center;
  font-family: var(--ca-font-display);
  font-weight: 600;
  font-size: 14px;
  color: var(--ca-ink);
}
.is-style-cards > li > strong:first-child {
  display: block;
  margin: 0 0 8px;
  font-size: 30px;
  line-height: 1;
}

/* --- Chips --------------------------------------------------------------- */

.is-style-chips {
  flex-direction: row;
  flex-wrap: wrap;
}
.is-style-chips > li {
  padding: 10px 18px;
  background: var(--ca-white);
  border: 1px solid var(--ca-hairline-str);
  border-radius: var(--ca-r-pill);
  font-size: 14px;
  font-weight: 600;
  color: var(--ca-ink);
}

/* --- Info list ----------------------------------------------------------- */

.is-style-info > li {
  padding: 12px 16px;
  background: var(--ca-white);
  border-left: 3px solid var(--ca-part-accent, var(--ca-teal));
  border-radius: 0 var(--ca-r-sm) var(--ca-r-sm) 0;
  font-size: 14px;
}

/* ==========================================================================
   Photo cards (inc/cards.php)

   Each card: photo, badge over its top-left corner, title, line. Matches the
   homepage feature cards these replace. The grid's choices are modifiers;
   chosen colours are custom properties. A badge with no colour of its own
   follows the section's accent, then ink.
   ========================================================================== */

.ca-photo-cards {
  --ca-card-gap: 16px;
  --ca-card-basis: 352px;            /* three across fill the 1120px measure */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: var(--ca-card-gap);
}

.ca-photo-cards > * {
  flex: 0 0 var(--ca-card-basis);
  max-width: 100%;
  margin: 0;
}

/* A set number per row instead of the fixed size. */
.ca-photo-cards--cols-2 { --ca-card-basis: calc((100% - var(--ca-card-gap)) / 2); }
.ca-photo-cards--cols-3 { --ca-card-basis: calc((100% - var(--ca-card-gap) * 2) / 3); }
.ca-photo-cards--cols-4 { --ca-card-basis: calc((100% - var(--ca-card-gap) * 3) / 4); }

@media (max-width: 1000px) {
  .ca-photo-cards--cols-4 { --ca-card-basis: calc((100% - var(--ca-card-gap)) / 2); }
}
@media (max-width: 700px) {
  .ca-photo-cards { --ca-card-basis: 100%; }
}

/* The photo's shape: .ca-img (components.css), from the grid's settings. */

.ca-photo-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--ca-card-bg, var(--ca-white));
  border: 1px solid var(--ca-hairline);
  border-radius: var(--ca-r-lg);
  overflow: hidden;
  box-shadow: var(--ca-shadow-sm);
  text-align: left;
}
.ca-photo-cards--center .ca-photo-card { text-align: center; }

/* Edge to edge: weighted to beat the generic figure margins elsewhere. */
.ca-photo-card .ca-photo-card__image { margin: 0; }
.ca-photo-card__image--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: var(--ca-img-ratio, 4 / 3);
  min-height: 160px;
  background: var(--ca-sand);
}

.ca-photo-card .ca-photo-card__badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  margin: 0;
  padding: 5px 11px;
  border-radius: var(--ca-r-pill);
  background: var(--ca-card-badge, var(--ca-part-accent, var(--ca-ink)));
  color: var(--ca-card-badge-fg, var(--ca-cream));
  font-family: var(--ca-font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-align: left;
}

/* No photo: the badge leads the words instead of floating over nothing. */
.ca-photo-card--no-image .ca-photo-card__badge {
  position: static;
  align-self: var(--ca-card-badge-align, flex-start);
  width: fit-content;
  margin: 18px 20px 0;
}
.ca-photo-cards--center .ca-photo-card--no-image { --ca-card-badge-align: center; }

.ca-photo-card .ca-photo-card__title {
  margin: 18px 20px 6px;
  font-family: var(--ca-font-display);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--ca-ink);
}
.ca-photo-card .ca-photo-card__body {
  margin: 0 20px 20px;
  color: var(--ca-muted);
  font-size: 14px;
  line-height: 1.55;
}

/* A linked card: the whole card is the link, through the title. */
.ca-photo-card__link { color: inherit; text-decoration: none; }
.ca-photo-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.ca-photo-card--linked { transition: transform 0.2s var(--ca-ease), box-shadow 0.2s var(--ca-ease); }
.ca-photo-card--linked:hover { transform: translateY(-3px); box-shadow: var(--ca-shadow-lg); }
.ca-photo-card__link:focus-visible { outline: none; }
.ca-photo-card--linked:focus-within { outline: 3px solid var(--ca-teal); outline-offset: 3px; }

/* ==========================================================================
   Tabs (inc/tabs.php) — the look of the Terms page's tabs

   Without JavaScript every panel shows in turn under its own heading, and the
   buttons jump to them. Once the script is ready (.is-ready), one panel shows
   at a time and the headings are kept for screen readers only.
   ========================================================================== */

.ca-tabs { --ca-tab-active: var(--ca-ink); }

/* Each tab's anchor, pinned to the top of the screen (inc/tabs.php). */
.ca-tabs__target {
  position: fixed;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  pointer-events: none;
  visibility: hidden;
}

.ca-tabs__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0 0 26px;
}
.ca-tabs--left .ca-tabs__list { justify-content: flex-start; }

.ca-tabs__tab {
  padding: 10px 22px;
  background: var(--ca-white);
  border: 1px solid var(--ca-hairline-str);
  border-radius: var(--ca-r-pill);
  color: var(--ca-muted);
  font-family: var(--ca-font-body);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
  cursor: pointer;
}
.ca-tabs__tab:hover { color: var(--ca-ink); }
.ca-tabs__tab[aria-selected="true"] {
  background: var(--ca-tab-active);
  border-color: var(--ca-tab-active);
  color: var(--ca-cream);
}

/*
 * Tabs placed straight on a page span it, so the sections in their panels
 * can too. The button row, and anything in a panel that is not a section,
 * keep to the page width.
 */
.ca-tabs__list,
.ca-tab > :not(.ca-sec):not(.ca-tab__title),
.ca-tab__content > :not(.ca-sec) {
  box-sizing: border-box;
  max-width: calc(var(--ca-width) + (var(--ca-gutter) * 2));
  margin-inline: auto;
  padding-inline: var(--ca-gutter);
}
.ca-page-content > .ca-tabs,
.is-root-container > .ca-tabs,
.is-root-container > .wp-block-block > .ca-tabs { padding-top: var(--ca-section-pad); }

.ca-tabs__panels { min-width: 0; }
.ca-tab__content > :first-child { margin-top: 0; }

.ca-tab .ca-tab__title {
  margin: 0 0 18px;
  font-size: clamp(20px, 3vw, 28px);
}
.ca-tab + .ca-tab { margin-top: 40px; }

.ca-tabs.is-ready .ca-tab[hidden] { display: none; }
.ca-tabs.is-ready .ca-tab + .ca-tab { margin-top: 0; }
.ca-tabs.is-ready .ca-tab .ca-tab__title {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ==========================================================================
   Section parts: the button row, the location picker, the Q&A box
   (inc/section-parts.php)
   ========================================================================== */

.ca-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: var(--ca-sec-stack, 22px) 0 0;
}
.ca-sec__parts > .ca-buttons:first-child { margin-top: 0; }

.ca-buttons--left   { justify-content: flex-start; }
.ca-buttons--center { justify-content: center; }
.ca-buttons--right  { justify-content: flex-end; }

/* Auto: centred under a centred heading, left under any other. */
.ca-buttons--auto { justify-content: flex-start; }
.ca-sec__main:has(> .ca-heading--center) .ca-buttons--auto { justify-content: center; }

/* On the ink tint, an outline button turns light. */
.ca-surface--ink .ca-buttons .ca-btn--outline {
  color: var(--ca-white);
  border-color: currentColor;
}

/* A chosen text colour beats the ink tint's white (it is declared after it, at equal weight). */
.ca-sec.ca-sec--text .ca-heading__title,
.ca-sec.ca-sec--text .ca-heading__lede,
.ca-sec.ca-sec--text .ca-sec__icon { color: var(--ca-sec-text); }

/*
 * Plain list text sits on the section, not on a white card, so it follows
 * the section's text colour, and turns light on the ink tint. The carded
 * parts (ticks, steps, cards, chips, info) keep their dark text on white.
 */
.ca-sec.ca-surface--ink .is-style-diamonds > li { color: var(--ca-on-dark); }
.ca-sec.ca-sec--text .is-style-diamonds > li { color: var(--ca-sec-text); }

/* A button's chosen colours (inc/section-parts.php). Weighted to beat the ink tint's outline rule. */
.ca-buttons .ca-btn--custom.ca-btn--primary {
  background: var(--ca-btn-color, var(--ca-orange));
  border-color: var(--ca-btn-color, var(--ca-orange));
  color: var(--ca-btn-fg, var(--ca-cream));
}
.ca-buttons .ca-btn--custom.ca-btn--outline {
  color: var(--ca-btn-color, var(--ca-ink));
  border-color: currentColor;
}
.ca-buttons .ca-btn--custom:hover { filter: brightness(0.92); }

/* The picker and Q&A sit under the section heading; their own title is optional. */
.ca-sec__parts > .ca-mk-picker:first-child,
.ca-sec__parts > .ca-qa:first-child { margin-top: 0; }

/* ==========================================================================
   Editor only: the canvas draws the section with inline fields
   ========================================================================== */

.ca-sec-block .ca-heading__label:empty::before,
.ca-sec-block [data-rich-text-placeholder] { opacity: 0.55; }

.ca-sec__photo-pick {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  border: 2px dashed var(--ca-hairline-str);
  border-radius: var(--ca-r-xl);
  background: var(--ca-white);
}

/* Previews drawn by PHP (picker, Q&A, the Store hero): look, don't operate. */
:is(.ca-part-preview, .ca-block-preview) :is(a, button, select, input) { pointer-events: none; }

/* The Store hero's preview while it loads, or with nothing filled in yet. */
.ca-block-preview__note {
  margin: 0;
  padding: 22px 16px;
  border-radius: var(--ca-r-md);
  background: var(--ca-sand);
  color: var(--ca-muted);
  font-size: 13px;
  text-align: center;
}
.ca-buttons .ca-btn[data-rich-text-placeholder] { opacity: 0.6; }

/* --------------------------------------------------------------------------
   Inner gaps in pixels (the section's Size & spacing panel)

   Set only when someone types a number; blank keeps the theme's. Child
   selectors, so a section inside this one (in tabs, say) keeps its own.
   The margin and padding of the section itself are WordPress's Dimensions
   controls, written as inline styles (inc/spacing.php).
   -------------------------------------------------------------------------- */

.ca-sec--sp-heading > .ca-container > :is(.ca-sec__main, .ca-sec__aside) > .ca-heading { margin-bottom: var(--ca-sp-heading); }
.ca-sec--sp-heading > .ca-container > .ca-sec__main > .ca-heading + .ca-sec__parts { margin-top: 0; }

.ca-sec--sp-parts > .ca-container > .ca-sec__main > .ca-sec__parts > * + * { margin-top: var(--ca-sp-parts); }

.ca-sec.ca-sec--sp-columns > .ca-container { gap: var(--ca-sp-columns); }