/* Hero - Secondary — Tailwind utilities cover this block's styling. */

/**
 * Color variants (registered in inc/classes/Blocks.php). `--hero-bg` /
 * `--hero-accent` drive BOTH the section background AND the seal SVG's
 * fill/stroke attributes (render.php inlines the SVG — not <img src> —
 * specifically so its `fill="var(--hero-bg)"` / `fill="var(--hero-accent)"`
 * attributes can resolve against these custom properties; an <img> can't
 * be recolored this way). Plain CSS custom properties, not a dynamic
 * Tailwind arbitrary-value class, since that wasn't picking up per variant.
 *
 * "Dark Blue" (#223159 / accent #334370) and "Mid Blue" (#2071a8 / accent
 * #4991c4) and "Dark Red" (#5d0618 / accent #7e1a2e) are CONFIRMED —
 * pulled from this same Header component reused with different
 * section/seal colors on the City Hall (node 135:10281) and Residents
 * (node 135:10946) pages in the Figma file, not just this Bid
 * Opportunities instance. "Light Blue" is NOT confirmed from Figma — see
 * README.md.
 *
 * The bare (no-variant) selector is a fallback for block instances saved
 * before these styles existed (is_default doesn't retroactively add
 * is-style-* to already-saved content) and matches "Dark Blue".
 */

/* Wrapped in Tailwind's own `utilities` layer: per the CSS Cascade Layers
   spec, an `!important` declaration in an UNLAYERED stylesheet is
   OUTRANKED by ANY `!important` declaration in ANY layer, regardless of
   selector specificity — `!important` reverses normal layer priority, so
   a layered `!important` always beats an unlayered one. Tailwind v4 wraps
   every utility (including this theme's own `@utility container` in
   assets/src/main.css, which sets `padding: 0 90px !important` at
   >=1000px) in `@layer utilities`, so no amount of specificity or
   `!important` in this plain, unlayered file could ever beat it — that's
   why every earlier attempt here kept losing regardless of the selector
   used. Joining the same layer name puts these rules back on equal
   footing, where normal specificity rules decide the winner. */
@layer utilities {
	.wpb_wrapper .wp-block-acf-hero-secondary.wp-block-acf-hero-secondary .container,
	body .container .wpb_wrapper .hero-secondary .container:not(.tab-container):not(.recent-post-container):not(.normal-container),
	/* Ancestor-independent fallback: the two selectors above only match when
	   this block sits inside a `.wpb_wrapper` (WPBakery) context — on pages
	   that render it outside one (e.g. the Tribe Events archive header, or
	   any non-WPBakery page/template), those never match. `.hero-secondary
	   .container` alone (no `._tf-max-w` requirement) covers every instance
	   of the class inside this block, whatever else rides along with it. */
	.hero-secondary .container {
		padding: unset!important;
		max-width: unset!important;
	}
}

.wp-block-acf-hero-secondary {
    position: relative;
    z-index: 1;

    &:before {
        content: "";
        position: absolute;
        z-index: -1;
        inset: 0;
        left: 50%;
        transform: translateX(-50%);
        /* margin-inline: calc(-50vw + 50%); */
        width: 100vw;
    }
}

.wp-block-acf-hero-secondary,
.wp-block-acf-hero-secondary.is-style-dark-blue {
    --hero-bg: #223159;
    --hero-accent: #334370;

    &:before {
        background-color: var(--hero-bg);
    }
}

.wp-block-acf-hero-secondary.is-style-mid-blue {
    --hero-bg: #2071a8;
    --hero-accent: #4991c4;
}

.wp-block-acf-hero-secondary.is-style-light-blue {
    --hero-bg: #4991c4;
    --hero-accent: #6faed4;
}

.wp-block-acf-hero-secondary.is-style-dark-red {
    --hero-bg: #5d0618;
    --hero-accent: #7e1a2e;
}

/**
 * Icon fallback circle (template.php's coe_theme_render_hero_secondary_icon_fallback())
 * — shown instead of the photo when no `photo` is set. Plain CSS, not a
 * Tailwind arbitrary-value class, for the same reason as `--hero-bg`/
 * `--hero-accent` above: those aren't picked up per variant that way.
 */
.hero-secondary__photo--icon {
    background-color: var(--hero-accent);
}


/* Higher specificity than the `.hero-secondary .container` reset above
   (this one adds a `body .container` ancestor requirement), so on pages
   where that ancestor exists — WPBakery pages like /calendar/, which wrap
   everything in their own `.container` rows — this used to win and
   reinstate a hardcoded 90px, undoing the reset above. Match the same
   `unset` intent instead of a hardcoded value. Also joins `@layer
   utilities` for the same reason as the block above it — see that
   comment — since this is just as unlayered/outranked otherwise. */
@layer utilities {
	body .container .hero-secondary .container:not(.tab-container):not(.recent-post-container):not(.normal-container) {
		padding: unset !important;

		&:after,
		&:before {
			content: unset;
		}
	}
}

/**
 * TODO: ; dup
 */ 
/* body:has(.wp-block-acf-hero-secondary:first-child):not(:has(.nectar.small-nav)) #header-outer {
    background: transparent!important;
} */

#ajax-content-wrap > .container-wrap {
    padding-top: 0!important;
}
    
/* .tribe-common-l-container .hero-secondary, */
/* .tribe-common-l-container.tribe-common-l-container:has(.hero-secondary) .hero-secondary */
#ajax-content-wrap > .container-wrap .hero-secondary:first-child {
    padding-top: calc(108px + var(--nectar_hook_before_nav_content_height,0px))!important;
    margin-top: calc(-108px - var(--nectar_hook_before_nav_content_height,0px));
}

/* The seal and fallback-icon SVGs carry fixed width/height attributes (193px /
   71px); make them fill their boxes so they stay centered and unclipped if those
   boxes are ever resized. */
.hero-secondary__seal svg,
.hero-secondary__photo--icon svg {
	width: 100%;
	height: 100%;
}

/* Below 1280px, shrink the decoration (194px circles / 308px art box / 71px
   icon -> 120px / 190px / 44px) so it doesn't dominate the hero. The sizes come
   from Tailwind utilities (`size-[194px]` etc.), which are !important and sit in
   the `utilities` layer, so this joins that layer and wins on specificity. */
@media (max-width: 1279px) {
	@layer utilities {
		.hero-secondary .hero-secondary__art {
			width: 190px !important;
			height: 120px !important;
		}

		.hero-secondary .hero-secondary__seal,
		.hero-secondary .hero-secondary__photo {
			width: 120px !important;
			height: 120px !important;
		}

		.hero-secondary .hero-secondary__photo--icon > div {
			width: 44px !important;
			height: 44px !important;
		}
	}
}