/*
================================================================================
site.css — VISUAL IDENTITY ONLY.

Belongs here:
  - CSS resets (box-sizing, body, image defaults).
  - Block-style implementations (.wp-block-*.is-style-* { ... }).
  - Custom-layout-container reset for is-layout-flow blockGap (see below).
  - Layout direction (display: grid/flex, grid-template-columns, flex-direction).
  - Backgrounds, gradients, shadows, borders, transforms, transitions.

Does NOT belong here — these are customer-editable from the block sidebar and
must live on the block instance via style.spacing.* / style.color.* / etc.:
  - padding, margin, gap (block attributes — style.spacing.padding, etc.).
  - colors                (theme.json palette presets — backgroundColor,
                            textColor, or style.color.*).
  - font-sizes            (theme.json fontSizes presets — fontSize attribute).

If you find yourself writing padding/margin/gap/color rules here, stop and set
the matching attribute on the block instance instead. See wordpress-design
SKILL.md "Core rules" — rule 1.

Companion files in this theme:
  style.css            — WP theme metadata header + responsive show/hide utils.
  colors_and_type.css  — design tokens (CSS variables). Written by the
                         wordpress-design translator from the brand folder.
================================================================================
*/

/* ---------- Resets ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; height: auto; display: block; }

/* ---------- Block-style implementations ----------
   Each register_block_style() call in functions.php pairs with a matching
   .wp-block-<block>.is-style-<name> { ... } rule below. Use design-language
   names (Tile Small, Pill, Dotted) — not content-language names (Service Icon).
   See wordpress-design SKILL.md rule 5.

   Design-phase examples (uncomment + adapt):

   .wp-block-button.is-style-primary .wp-block-button__link { ... }
   .wp-block-image.is-style-tile-large { ... }
   .wp-block-separator.is-style-dotted { ... }
   ---------- */

/* ---------- Custom-layout-container reset ----------
   WP's is-layout-flow injects `> * + * { margin-block-start: <blockGap>; }`.
   For containers whose layout is driven by raw CSS grid/flex in THIS file
   (not by WP's block layout system), the injected sibling margin produces
   phantom row offsets. Add each custom-layout container's selector here.
   See wordpress-design SKILL.md rule 8.

   Top-level template-part siblings always belong here so header/main/footer
   sit flush.
   ---------- */
.wp-site-blocks > * + * {
    margin-block-start: 0 !important;
}
/* Design phase: add custom-layout-container selectors below, e.g.
.ckh-grid-3 > *,
.ckh-section-grid > * {
    margin-block-start: 0 !important;
}
*/

/* ---------- Block-style implementations (Carz) ---------- */

/* Default button: smooth color transition on hover/focus (states set in theme.json). */
.wp-block-button__link {
    transition: background-color .15s ease, color .15s ease;
}

/* Button — "Outline (Light)": for dark/photographic sections (hero, dark bands). */
.wp-block-button.is-style-outline-light .wp-block-button__link {
    background-color: transparent;
    color: var(--carz-base);
    border: 2px solid var(--carz-base);
}
.wp-block-button.is-style-outline-light .wp-block-button__link:hover,
.wp-block-button.is-style-outline-light .wp-block-button__link:focus {
    background-color: var(--carz-base);
    color: var(--carz-ink);
}

/* Separator — "Dotted". */
.wp-block-separator.is-style-dotted {
    border: none;
    border-top: 4px dotted currentColor;
    opacity: .5;
    background: none;
}

/* Image — "Rounded Card": soft corners for service cards and the founder photo. */
.wp-block-image.is-style-rounded img {
    border-radius: 16px;
}

/* Match that 16px radius on Media & Text feature images (home unique-needs /
   au-pairs sections), including image-fill backgrounds. */
.wp-block-media-text__media {
    border-radius: 16px;
    overflow: hidden;
}

/* List — "No Bullets": clean link lists (footer quick links, etc.). */
.wp-block-list.is-style-none {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* On ink (dark) backgrounds — utility bar, footer, CTA bands — render plain
   links in white for legibility (buttons keep their own styling). */
.has-contrast-background-color a:not(.wp-block-button__link) {
    color: var(--carz-base);
}
.has-contrast-background-color a:not(.wp-block-button__link):hover {
    color: var(--carz-base);
    text-decoration: underline;
}