/*
==========================================================
HERO BLOCK — hero.css
==========================================================
WHAT IT IS:
A full width hero banner block with background image
or color, heading, subheading, paragraph, and up to
two CTA buttons.
 
WHAT IT DOES:
Renders a full width hero section pulling from ACF fields.
Supports left, center, and right text alignment via a
CSS class added by hero.php. Background image overlays
are controlled by an ACF opacity field. Falls back to
a background color if no image is set.
 
HOW TO USE:
1. In the WordPress block editor add the "Hero" block
   to any page or post.
2. Fill in the Heading field (required).
3. Optionally add Subheading, Paragraph, and CTA buttons.
4. Layout: width, where the words sit, text alignment,
   space above / below.
5. Colors, or a Background photo (with darkening, focus
   and an optional phone photo).
6. Advanced: optional Section ID.
7. Save and preview the page.
Editor organization: BATCH_8_PLAN.md §26.
 
TO SIMPLIFY TO OPTION A (color background only):
- Remove hero_bg_image ACF field
- Remove .hero_overlay styles below
 
TO SIMPLIFY TO OPTION B (image, single CTA):
- Remove hero_cta_2 ACF fields
- Remove .hero_cta_secondary styles below
 
All values use boilerplate CSS tokens from style.css.
==========================================================
*/
 
/* Hero wrapper */
.hero_block {
    position: relative;
    width: 100%;
    min-height: 560px;
    display: flex;
    align-items: center;
    background-size: cover;
    background-position: var(--hero-pos, center);
    background-repeat: no-repeat;
    background-color: var(--color-bg-dark);
    margin: 0;
    padding: var(--space-20) 0;
}
 
/* Hero Style — Full Width */
.hero_style_full-width {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-top: calc(-1 * var(--space-16));
}

/* Hero Style — Contained */
.hero_style_contained {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
}

/* Overlay */
.hero_overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}
 
/* Inner content */
.hero_inner {
    position: relative;
    z-index: 2;
    width: 100%;
}
 
/* Alignment variants */
.hero_align_left  .hero_inner { text-align: left; }
.hero_align_center .hero_inner { text-align: center; }
.hero_align_right  .hero_inner { text-align: right; }
 
.hero_align_center .hero_inner .hero_paragraph {
    margin-left: auto;
    margin-right: auto;
}
 
.hero_align_right .hero_inner .hero_paragraph {
    margin-left: auto;
    margin-right: 0;
}

.hero_align_center .hero_cta_row {
    justify-content: center;
}
 
.hero_align_right .hero_cta_row {
    justify-content: flex-end;
}
 
/* Subheading — structural base in style.css §10c.
   Dark background context: text-inverse color, reduced opacity,
   and slightly more bottom margin than the base space-3.
   BOILERPLATE NOTE: Full rule kept here so this block is self-contained
   when copied to a new project. On a live project you would keep only
   the context-specific overrides (color, opacity, margin) and rely on §10c
   for the shared structural properties. */
.hero_subheading {
    font-family: var(--font-accent);
    font-size: var(--text-sm);
    font-weight: var(--weight-semi);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-text-inverse);
    opacity: 0.75;
    margin: 0 0 var(--space-4) 0;
}
 
/* Heading */
.hero_heading {
    font-family: var(--font-heading);
    font-size: var(--text-4xl);
    font-weight: var(--weight-bold);
    color: var(--color-text-inverse);
    line-height: var(--leading-tight);
    margin: 0 0 var(--space-5) 0;
    max-width: 780px;
}
 
.hero_align_center .hero_heading,
.hero_align_right .hero_heading {
    max-width: 100%;
}
 
/* Paragraph */
.hero_paragraph {
    font-size: var(--text-md);
    color: var(--color-text-inverse);
    opacity: 0.85;
    line-height: var(--leading-relaxed);
    margin: 0 0 var(--space-8) 0;
    max-width: 620px;
}
 
/* ── Section Background Mode (Batch 8F Round 1) ──────────────
   .hero_block's base rule already defaults to a dark background
   (--color-bg-dark) with inverse (white) heading/subheading/paragraph
   text, above — that is "Theme Default" and needs no class at all.
   "Background" and "Alternate" resolve to light tokens (--color-bg /
   --color-bg-alt), so their classes flip heading/subheading/paragraph
   back to normal (dark) text for legibility. "Dark" and "Accent" need
   no override — both already read correctly against the existing
   inverse text. Custom mode's explicit Light/Dark text-treatment field
   drives .hero_text_light/.hero_text_dark the same way; .hero_text_light
   needs no rule since it matches the existing default exactly. */
.hero_bg_background .hero_heading,
.hero_bg_alt_background .hero_heading,
.hero_text_dark .hero_heading {
    color: var(--color-primary);
}

.hero_bg_background .hero_subheading,
.hero_bg_alt_background .hero_subheading,
.hero_text_dark .hero_subheading,
.hero_bg_background .hero_paragraph,
.hero_bg_alt_background .hero_paragraph,
.hero_text_dark .hero_paragraph {
    color: var(--color-text);
}

/* CTA buttons — styles defined in style.css §10b.
   BOILERPLATE NOTE: Full rules kept here so this block is self-contained
   when copied to a new project. On a live project, remove these and rely
   on the shared definitions in §10b. */

/* CTA buttons row */
.hero_cta_row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    align-items: center;
}

/* Primary CTA */
.hero_cta_primary {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-white);
    padding: var(--space-4) var(--space-8);
    font-size: var(--text-base);
}

.hero_cta_primary:hover {
    background-color: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
    color: var(--color-white);
    text-decoration: none;
}

/* Secondary CTA — outline style on dark background */
.hero_cta_secondary {
    background-color: transparent;
    border: 2px solid var(--color-white);
    color: var(--color-white);
    padding: var(--space-4) var(--space-8);
    font-size: var(--text-base);
}

.hero_cta_secondary:hover {
    background-color: var(--color-white);
    color: var(--color-primary);
    text-decoration: none;
}

/* ── Section Background Mode — button contrast (Codex defect 3) ─────
   The two CTA buttons above are tuned for the Theme Default/Dark
   background this block originally always had. On a light background
   (Background, Alternate, Custom + Dark Text), the secondary button's
   white border/text is nearly invisible; on an Accent background, the
   primary button's own accent fill blends into its parent section.
   Dark and Custom + Light Text are deliberately left untouched — both
   are visually equivalent to the block's original always-dark state. */

.hero_bg_background .hero_cta_secondary,
.hero_bg_alt_background .hero_cta_secondary,
.hero_text_dark .hero_cta_secondary {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.hero_bg_background .hero_cta_secondary:hover,
.hero_bg_alt_background .hero_cta_secondary:hover,
.hero_text_dark .hero_cta_secondary:hover {
    background-color: var(--color-accent);
    color: var(--color-white);
}

.hero_bg_accent .hero_cta_primary {
    background-color: var(--color-bg-dark);
    border-color: var(--color-bg-dark);
    color: var(--color-text-inverse);
}

.hero_bg_accent .hero_cta_primary:hover {
    background-color: var(--color-text-inverse);
    border-color: var(--color-text-inverse);
    color: var(--color-primary);
}

/* Responsive */
@media (max-width: 768px) {
    .hero_block {
        min-height: 420px;
        padding: var(--space-16) 0;
    }

    /* Pull up by exactly main's top margin at this size (style.css §9),
       so the hero sits flush under the header instead of overlapping it. */
    .hero_style_full-width {
        margin-top: calc(-1 * var(--space-10));
    }
 
    .hero_heading {
        font-size: var(--text-3xl);
    }
 
    .hero_paragraph {
        font-size: var(--text-base);
    }
}
 
@media (max-width: 480px) {
    .hero_block {
        min-height: 360px;
        padding: var(--space-12) 0;
    }

    .hero_style_full-width {
        margin-top: calc(-1 * var(--space-8));
    }
 
    .hero_heading {
        font-size: var(--text-2xl);
    }
 
    .hero_cta_row {
        flex-direction: column;
        align-items: flex-start;
    }
 
    .hero_align_center .hero_cta_row {
        align-items: center;
    }
 
    .hero_cta_primary,
    .hero_cta_secondary {
        width: 100%;
        text-align: center;
    }
}

/* ==========================================================
   Batch 8H — Hero (BATCH_8_PLAN.md §26)
   ========================================================== */

/* ── Background photo ──────────────────────────────────────
   Focus: hero.php sets --hero-pos (and --hero-pos-phone) only when a
   choice other than Middle / Same as above is saved, so existing heroes
   keep background-position: center. A phone photo is passed as
   --hero-photo / --hero-photo-phone so this rule can swap it on phones. */
.hero_has_phone_photo {
    background-image: var(--hero-photo);
}

@media (max-width: 480px) {
    .hero_has_photo {
        background-position: var(--hero-pos-phone, var(--hero-pos, center));
    }

    .hero_has_phone_photo {
        background-image: var(--hero-photo-phone);
    }
}

/* ── Where the words sit ───────────────────────────────────
   Only added when it differs from Text alignment, so every existing hero
   is unchanged. The words become one block, as wide as a left-aligned
   heading, moved left, to the middle or right; Text alignment still lines
   up the lines inside it. On phones the block is already full width. */
.hero_pos_left .hero_content,
.hero_pos_center .hero_content,
.hero_pos_right .hero_content {
    max-width: 780px;
}

.hero_pos_center .hero_content {
    margin-left: auto;
    margin-right: auto;
}

.hero_pos_right .hero_content {
    margin-left: auto;
}

/* ── Space above / below the content (shared standard, §25) ─
   Normal = the padding above (80 / 64 / 48px). Two-class selectors so the
   choice beats the breakpoint rules. The hero keeps its min-height. */
.hero_block.hero_space_top_none      { padding-top: 0; }
.hero_block.hero_space_top_small     { padding-top: var(--space-10); }
.hero_block.hero_space_top_large     { padding-top: calc(var(--space-16) * 2); }
.hero_block.hero_space_bottom_none   { padding-bottom: 0; }
.hero_block.hero_space_bottom_small  { padding-bottom: var(--space-10); }
.hero_block.hero_space_bottom_large  { padding-bottom: calc(var(--space-16) * 2); }

@media (max-width: 768px) {
    .hero_block.hero_space_top_small    { padding-top: var(--space-8); }
    .hero_block.hero_space_top_large    { padding-top: var(--space-20); }
    .hero_block.hero_space_bottom_small { padding-bottom: var(--space-8); }
    .hero_block.hero_space_bottom_large { padding-bottom: var(--space-20); }
}

@media (max-width: 480px) {
    .hero_block.hero_space_top_small    { padding-top: var(--space-6); }
    .hero_block.hero_space_top_large    { padding-top: var(--space-16); }
    .hero_block.hero_space_bottom_small { padding-bottom: var(--space-6); }
    .hero_block.hero_space_bottom_large { padding-bottom: var(--space-16); }
}

/* ── Editor-only messages ──────────────────────────────────
   Printed by hero.php in the editor preview only, never on the page. */
.hero_preview_empty,
.hero_preview_note {
    box-sizing: border-box;
    margin: var(--space-4) 0 0;
    padding: var(--space-3) var(--space-6);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-alt);
    color: var(--color-text);
    font-size: var(--text-sm);
    text-align: center;
}

.hero_preview_empty {
    margin: var(--space-4) auto;
}

/* ── Label look: Rounded tag (Batch 8H, BATCH_8_PLAN.md §28) ──────
   Added only when the editor picks Label look → Rounded tag; Plain text
   (the default) adds nothing, so existing sections look the same. Uses the
   label's own color (currentColor), so it reads on light and dark
   backgrounds. The first border line is the fallback for browsers without
   color-mix(). No blur, glow or animation.
   BOILERPLATE NOTE: the same rule lives in style.css §10c. Kept here so
   this block works when copied to a new project on its own; on a live
   project with §10c in place this copy can be removed. */
.hero_subheading.hero_label_pill {
    display: inline-block;
    padding: var(--space-2) var(--space-4);
    border: 1px solid currentColor;
    border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
    border-radius: var(--radius-full);
    background-color: color-mix(in srgb, currentColor 8%, transparent);
    line-height: var(--leading-tight);
}