/* Deterministic generated-theme layout */

/* ─────────────────────────────────────────────────────────────────────────────
 * Invariants that SKILL.md used to dictate to the model verbatim.
 *
 * Every generated style.css re-derived this block from the prompt, identically —
 * three sampled themes across three industries wrote the nav reset and the
 * content-width group byte for byte. That is prompt tokens in and output tokens
 * out, on every generation, for CSS that was never allowed to vary. It lives
 * here instead, and SKILL.md now tells the model not to repeat it.
 *
 * Specificity is deliberately unchanged from what the model used to emit, and
 * layout.css is enqueued with style.css as its dependency, so identical rules
 * resolve to the same computed values as before. Sections still override with a
 * child combinator (.hero-split > .wp-block-group__inner-container), which
 * outscores these at (0,2,0) exactly as it did when both lived in style.css.
 * ───────────────────────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* Readable content stays within 1200px; full-bleed sections carry their own
 * background past it. This is also the wp:group layout boundary, so grid and
 * flex belong on this container rather than on the outer group. */
.wp-block-group__inner-container,
.wp-block-cover__inner-container,
.entry-content,
.page-content {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.alignwide {
  max-width: 1200px;
}

.alignfull {
  max-width: none;
  width: 100%;
}

/* Catalog page titles need clearance below the header. */
.page-article {
  padding-top: clamp(3rem, 8vw, 6rem);
  padding-bottom: clamp(3rem, 8vw, 6rem);
}

/* Every booking CTA is an in-page jump to #booking, so the target has to clear
 * a sticky header on arrival. */
#booking {
  scroll-margin-top: 6rem;
}

/* wp_nav_menu() renders a plain <ul> with default list markers until reset. */
.site-header nav .menu,
.site-header nav ul,
.site-header .primary-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1.5rem);
}

.site-header nav .menu li,
.site-header nav ul li {
  list-style: none;
}

.site-header nav a {
  text-decoration: none;
}

.site-header {
  width: 100%;
  max-width: none;
}

.site-header .header-inner {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem 2rem;
  box-sizing: border-box;
  gap: 2.75rem;
}

.site-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  flex: 0 0 auto;
  line-height: 1;
  text-decoration: none;
}

.site-logo .site-logo-mark {
  display: block;
  width: 40px;
  height: 40px;
  max-width: 40px;
  flex: 0 0 40px;
  object-fit: contain;
}

.site-logo-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.2rem;
}

.site-logo-name {
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
}

.site-logo-descriptor {
  font: inherit;
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.1;
  text-transform: uppercase;
  white-space: nowrap;
}

.has-text-align-center {
  margin-inline: auto;
}

/* A section title the stylesheet shrink-wrapped — usually `display: inline-block`,
 * to hang an accent rule off the width of the text — stops answering to
 * `margin-inline: auto`, because auto margins resolve to zero on an inline-level
 * box. The box then sits against the start edge while its text centers inside it,
 * so the title reads as left-aligned however plainly the block is marked centered.
 * It also only surfaces where the container is plain block flow, since a grid
 * container does honour auto margins on its items: half the titles on a page
 * center and half do not, from one stylesheet rule nobody wrote on purpose.
 * Shrink-wrapping a block box with `width: fit-content` centers reliably and
 * still lets an accent hug the text. Three classes outscore the
 * `.wp-block-group.alignfull h2` shape that causes this, and the child
 * combinator leaves card headings nested in columns alone. */
.wp-block-group__inner-container > .wp-block-heading.has-text-align-center,
.wp-block-cover__inner-container > .wp-block-heading.has-text-align-center {
  display: block;
  width: fit-content;
  margin-inline: auto;
}

#booking > .wp-block-group__inner-container > .wp-block-heading {
  margin-bottom: 0.75rem;
}

#booking > .wp-block-group__inner-container > p {
  display: none;
}

#booking .amelia-v2-booking,
#booking #amelia-container,
#booking .am-fs {
  text-align: left;
}

#amelia-container,
#amelia-container p,
.amelia-v2-booking,
.amelia-v2-booking p,
.am-fs,
.am-fs p {
  color: unset;
}

/* Events list ([ameliaeventslistbooking]) writes default Amelia blues inline.
 * The booking dialog teleports onto body (.am-dialog-el), so both surfaces
 * need the same token remap. !important beats Amelia's element-level vars. */
#booking #amelia-container.am-elf,
.amelia-v2-booking.am-dialog-el {
  --am-c-primary: var(--atg-accent-fill, var(--accent)) !important;
  --am-c-btn-prim: var(--atg-accent-fill, var(--accent)) !important;
  --am-c-btn-sec: var(--atg-primary-fill, var(--primary)) !important;
  --am-c-btn-sec-text: var(--atg-primary-fill-text, #ffffff) !important;
}

#booking .am-elf,
#booking .am-elf *,
.amelia-v2-booking.am-dialog-el,
.amelia-v2-booking.am-dialog-el * {
  --am-c-primary: var(--atg-accent-fill, var(--accent)) !important;
  --am-c-ec-primary: var(--atg-accent-fill, var(--accent)) !important;
  --am-c-eli-primary: var(--atg-accent-fill, var(--accent)) !important;
  --am-c-ps-primary: var(--atg-accent-fill, var(--accent)) !important;
  --am-c-ct-primary: var(--atg-accent-fill, var(--accent)) !important;
}

#booking .am-elf .am-button--primary,
.amelia-v2-booking.am-dialog-el .am-button--primary {
  --am-c-btn-first: var(--atg-accent-fill, var(--accent)) !important;
  --am-c-btn-first-op80: color-mix(in srgb, var(--atg-accent-fill, var(--accent)) 80%, transparent) !important;
  --am-c-btn-first-op30: color-mix(in srgb, var(--atg-accent-fill, var(--accent)) 30%, transparent) !important;
  --am-c-btn-first-op20: color-mix(in srgb, var(--atg-accent-fill, var(--accent)) 10%, transparent) !important;
}

/* Available calendar days are a 10–30% tint of the accent. White type — the
 * contrast colour against the solid fill — disappears on that wash. Amelia
 * writes --am-c-cal-init-text inline on the calendar, so the descendant
 * !important is what actually wins. */
#booking .amelia-v2-booking,
#booking .amelia-v2-booking *,
#booking #amelia-container,
#booking #amelia-container *,
.amelia-v2-booking,
.amelia-v2-booking * {
  --am-c-cal-init-text: var(--atg-primary-fill, var(--primary, #1A2C37)) !important;
}

/* Dropdown prices use the accent as text. Lime and gold fail on white. */
#booking .am-select-service-price,
.amelia-v2-booking .am-select-service-price {
  color: color-mix(in srgb, var(--atg-accent-fill, var(--accent)) 42%, var(--atg-primary-fill, var(--primary, #1A2C37))) !important;
}

/* Lite "Booking by Amelia" footer sits on the section background.
 * --primary is near-black on barbershop and disappears; the accent is the
 * same gold/lime as the Continue button. */
.am-lite-footer a,
.am-lite-footer-link {
  color: var(--atg-accent-fill, var(--accent)) !important;
  text-decoration: none;
}

.am-lite-footer a:hover,
.am-lite-footer-link:hover {
  color: color-mix(in srgb, var(--atg-accent-fill, var(--accent)) 70%, #fff) !important;
}

/* Outline / ghost buttons on a dimmed cover are otherwise dark-on-dark. */
.wp-block-cover .wp-block-button.is-style-outline .wp-block-button__link {
  color: #fff !important;
  border-color: currentColor !important;
  background: transparent !important;
}

/* Primary and outline buttons in one row must share a height. Outline adds a
 * 2px border (beauty / real-estate read taller) or WP core shrinks its padding
 * (sports reads shorter). Stretch the pair and give the fill a transparent
 * border so the boxes match. */
.wp-block-buttons {
  align-items: stretch;
}

.wp-block-buttons .wp-block-button {
  display: flex;
}

.wp-block-buttons .wp-block-button .wp-block-button__link {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border-width: 2px;
  border-style: solid;
}

.wp-block-buttons .wp-block-button:not(.is-style-outline) .wp-block-button__link {
  border-color: transparent;
}

#booking .am-elf .am-button--secondary,
.amelia-v2-booking.am-dialog-el .am-button--secondary {
  --am-c-btn-first: var(--atg-primary-fill, var(--primary)) !important;
  --am-c-btn-second: var(--atg-primary-fill-text, #ffffff) !important;
  --am-c-btn-first-op80: color-mix(in srgb, var(--atg-primary-fill, var(--primary)) 80%, transparent) !important;
  --am-c-btn-first-op30: color-mix(in srgb, var(--atg-primary-fill, var(--primary)) 30%, transparent) !important;
  --am-c-btn-first-op20: color-mix(in srgb, var(--atg-primary-fill, var(--primary)) 10%, transparent) !important;
}

#booking .am-ec__period-date,
#booking .am-ec__period-time {
  font-variant-numeric: tabular-nums;
}

.hero-split > .wp-block-group__inner-container {
  align-items: stretch;
}

.hero-split-copy {
  height: 100%;
  box-sizing: border-box;
}

/* A generated stylesheet that names a section class in home-content.html but
 * styles a differently-named one leaves that section with no vertical rhythm at
 * all. The :where() wrapper scores zero specificity, so this floor only applies
 * where style.css said nothing; a theme that does style its sections keeps
 * full control. */
:where(.front-page-main) > :where(.wp-block-group.alignfull) {
  padding: clamp(3.5rem, 8vw, 6.5rem) 2rem;
}

/* Section headings, centered intros and whole column rows are never meant to
 * occupy a single cell of a section's grid. Without this they become siblings of
 * the cards they introduce, which squeezes the row into one grid track. */
.wp-block-group__inner-container > :is(.wp-block-heading, .wp-block-columns, p.has-text-align-center) {
  grid-column: 1 / -1;
}

/* auto-fit + minmax(..., 1fr) plus a heading that spans 1 / -1 keeps every
 * leftover track alive (the heading occupies them), so three step cards sit
 * in a five-column grid and hug the left while the title looks centered.
 * Flex packs the cards under the title; the heading still takes the full row. */
.wp-block-group__inner-container:has(> .step-item),
.process-section > .wp-block-group__inner-container,
.steps-section > .wp-block-group__inner-container,
.how-it-works-section > .wp-block-group__inner-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.wp-block-group__inner-container:has(> .step-item) > :is(.wp-block-heading, p.has-text-align-center),
.process-section > .wp-block-group__inner-container > :is(.wp-block-heading, p.has-text-align-center),
.steps-section > .wp-block-group__inner-container > :is(.wp-block-heading, p.has-text-align-center),
.how-it-works-section > .wp-block-group__inner-container > :is(.wp-block-heading, p.has-text-align-center) {
  flex: 1 0 100%;
}

.wp-block-group__inner-container:has(> .step-item) > .wp-block-group,
.process-section > .wp-block-group__inner-container > .wp-block-group,
.steps-section > .wp-block-group__inner-container > .wp-block-group,
.how-it-works-section > .wp-block-group__inner-container > .wp-block-group {
  flex: 1 1 14rem;
  max-width: 18rem;
}

.main-navigation {
  margin-left: 0.75rem;
  margin-right: auto;
}

.header-cta {
  margin-left: auto;
}

.site-footer {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  color: #cdd4e4;
  background: var(--primary-dark, var(--primary, #101a30));
}

.site-footer .footer-inner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 2.5rem 2rem;
}

.site-footer .footer-copy {
  margin: 0;
  color: inherit;
}

@media (max-width: 768px) {
  :where(.front-page-main) > :where(.wp-block-group.alignfull) {
    padding: 2.75rem 1.25rem;
  }

  .site-logo .site-logo-mark {
    width: 36px;
    height: 36px;
    max-width: 36px;
    flex-basis: 36px;
  }

  .main-navigation {
    order: 3;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}