/* Final, deterministic overrides for W5OBM hero typography.
   Loaded site-wide to prevent theme/Bootstrap/inline CSS from forcing low-contrast titles.
*/

:root {
    /* Rich gold ramp (avoid cool/blue influence) */
    --w5obm-hero-gold-top: #fff7d4;
    --w5obm-hero-gold-mid: #ffcf4a;
    --w5obm-hero-gold-bottom: #b87400;

    /* Warm outline for contrast on busy/dark photography */
    --w5obm-hero-gold-outline: rgba(66, 34, 0, 0.62);

    /* Bevel + depth stack */
    --w5obm-hero-title-highlight: rgba(255, 255, 255, 0.55);
    --w5obm-hero-title-shadow-1: rgba(22, 10, 0, 0.65);
    --w5obm-hero-title-shadow-2: rgba(0, 0, 0, 0.38);
    --w5obm-hero-title-shadow-deep: rgba(0, 0, 0, 0.6);

    /* Subtle specular sheen overlay for the clipped gradient */
    --w5obm-hero-title-sheen-1: rgba(255, 255, 255, 0.22);
    --w5obm-hero-title-sheen-2: rgba(255, 255, 255, 0.0);
}

/* Standard page hero title */
.page-hero .hero-title,
.page-hero .hero-title-accent,
/* Homepage hero title */
.hero-home .hero-home__title,
.hero-home .hero-home__title-accent {
    color: var(--w5obm-hero-gold-mid) !important;
    text-shadow:
        /* top-left highlight to simulate bevel */
        -1px -1px 0 var(--w5obm-hero-title-highlight),
        0 1px 0 rgba(255, 255, 255, 0.18),
        /* warm inner depth */
        0 4px 0 rgba(92, 48, 0, 0.55),
        /* outer drop shadows */
        0 8px 18px var(--w5obm-hero-title-shadow-1),
        0 18px 42px var(--w5obm-hero-title-shadow-2),
        0 34px 70px var(--w5obm-hero-title-shadow-deep) !important;

    /* Subtle outline improves contrast on busy/dark photography */
    -webkit-text-stroke: 1px var(--w5obm-hero-gold-outline) !important;
}

/* Compatibility alias (some notes/docs refer to this name) */
.hero-home-title {
    color: var(--w5obm-hero-gold-mid) !important;
    text-shadow:
        -1px -1px 0 var(--w5obm-hero-title-highlight),
        0 1px 0 rgba(255, 255, 255, 0.18),
        0 4px 0 rgba(92, 48, 0, 0.55),
        0 8px 18px var(--w5obm-hero-title-shadow-1),
        0 18px 42px var(--w5obm-hero-title-shadow-2),
        0 34px 70px var(--w5obm-hero-title-shadow-deep) !important;

    -webkit-text-stroke: 1px var(--w5obm-hero-gold-outline) !important;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {

    .page-hero .hero-title,
    .page-hero .hero-title-accent,
    .hero-home .hero-home__title,
    .hero-home .hero-home__title-accent {
        background-image:
            linear-gradient(180deg,
                var(--w5obm-hero-gold-top) 0%,
                var(--w5obm-hero-gold-mid) 42%,
                var(--w5obm-hero-gold-bottom) 100%),
            linear-gradient(120deg,
                var(--w5obm-hero-title-sheen-2) 0%,
                var(--w5obm-hero-title-sheen-1) 18%,
                var(--w5obm-hero-title-sheen-2) 42%,
                var(--w5obm-hero-title-sheen-1) 62%,
                var(--w5obm-hero-title-sheen-2) 100%) !important;
        background-size: 100% 100%, 240% 240% !important;
        background-position: center center, 35% 45% !important;
        background-repeat: no-repeat !important;
        -webkit-background-clip: text !important;
        background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
    }

    .hero-home-title {
        background-image:
            linear-gradient(180deg,
                var(--w5obm-hero-gold-top) 0%,
                var(--w5obm-hero-gold-mid) 42%,
                var(--w5obm-hero-gold-bottom) 100%),
            linear-gradient(120deg,
                var(--w5obm-hero-title-sheen-2) 0%,
                var(--w5obm-hero-title-sheen-1) 18%,
                var(--w5obm-hero-title-sheen-2) 42%,
                var(--w5obm-hero-title-sheen-1) 62%,
                var(--w5obm-hero-title-sheen-2) 100%) !important;
        background-size: 100% 100%, 240% 240% !important;
        background-position: center center, 35% 45% !important;
        background-repeat: no-repeat !important;
        -webkit-background-clip: text !important;
        background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
    }
}