/* Site overrides for the LEXO WP Hero plugin.
   Loaded last in the frontend, in the post editor and in the TinyMCE iframe, so one file covers
   every side. Plugin updates never touch it - it is a theme file and belongs in the theme's git:
   the deploy replaces the theme directory wholesale, so an untracked file here does not survive.
   Every rule hangs on the hero root id, which outranks the plugin's :where()-scoped rules. */

/* Heights: the editor picks "Taller" (= --hero-base, 500px) or "Browser height" (the front page),
   and the cap turns "Browser height" into min(860px, 100vh). Up to 768px wide every hero is
   min(500px, 70vh) - that cut is the site's, not the plugin's tablet band (768-1024), hence a cap
   and not an editor step. */
#header-slider-wrapper {
    --hero-base: min(500px, 100vh);
    max-height: 860px;
}

@media (max-width: 768px) {
    #header-slider-wrapper {
        --hero-base: min(500px, 70vh);
        max-height: min(500px, 70vh);
    }
}

/* Text column = the page column (--page-margin / --page-max from rte.css), so a box width of 50 %
   is half the column the content below sits in. The plugin's --gx gutter moves into the inset and
   is zeroed for the blocks inside. Middle = the middle of the box: the header is transparent over
   the image. */
#header-slider-wrapper .title-logo-container {
    --gy-mid: 50%;
}

#header-slider-wrapper .title-subtitle {
    left: max(var(--page-margin), calc((100% - var(--page-max)) / 2));
    right: max(var(--page-margin), calc((100% - var(--page-max)) / 2));
    --gx: 0px;
}

/* The block takes the full box width, not its text's: the halo below spans that box. */
#header-slider-wrapper .hero-text {
    width: 100%;
    isolation: isolate;
}

/* The theme's paragraph margin stays below the last line: the block is centred with it. */
#header-slider-wrapper .hero-text-content > p:last-child {
    margin-bottom: 10px;
}

/* Hero title 64/80, larger than the content h1, light on the image, with a soft dark halo. */
#header-slider-wrapper .hero-text::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: 200px;
    background-color: var(--color-black);
    opacity: 0.15;
    filter: blur(40px);
    pointer-events: none;
}

/* Light text unless the editor picked a colour (data-tc-*).
   The editor HTML sits in the plugin wrapper .hero-text-content, so colour and margin rules
   target its children - a `.hero-text > *` rule only reaches the wrapper and the h1 falls
   back to --color-heading (measured: dark-blue title). */
#header-slider-wrapper .hero-text:not([data-tc-d], [data-tc-t], [data-tc-m]) .hero-text-content > * {
    color: var(--color-light);
}

#header-slider-wrapper .hero-text h1 {
    font-size: 6.4rem;
    line-height: 8rem;
    letter-spacing: 0.02em;
}

@media (max-width: 1280px) {
    #header-slider-wrapper .hero-text h1 {
        font-size: 4.6rem;
        line-height: 5.6rem;
    }
}

@media (max-width: 1024px) {
    #header-slider-wrapper .hero-text h1 {
        font-size: 4.2rem;
        line-height: 5.2rem;
    }
}

@media (max-width: 650px) {
    #header-slider-wrapper .hero-text h1 {
        font-size: 3.8rem;
        line-height: 4.6rem;
    }
}

@media (max-width: 480px) {
    #header-slider-wrapper .hero-text h1 {
        font-size: 3.5rem;
        line-height: 4.3rem;
    }
}