/*
    VYNILYN — audience landing pages.

    TYPOGRAPHY IS NOT SET HERE. Headings are real h1-h4 elements and inherit Avada's Global
    Typography; body copy inherits Body Typography. If a heading is the wrong size, change the
    TAG in the builder, or change the scale once in Avada > Options > Typography — do not add a
    rule here. Ben, 2026-08-19: "just use it so it codes the DOM elements and its parent, so it
    just inherits the h1 from the theme. It's a lot less work and less code."

    Backgrounds, gradients, band padding and column layout are set NATIVELY on the containers in
    the page, so they are absent here too and stay editable in the builder.

    What is left is only what Avada has no control for: two utility labels, the card treatment,
    and the motion.
*/


/* ---------------------------------------------------------------- page shell

    Ben, 2026-08-24: these pages always want the theme's vertical page padding gone, so the hero
    starts flush under the nav and the last band ends flush on the footer.

    No !important needed. Avada sets this with a plain `#main { padding-top: var(--main_padding-top) }`
    at specificity (1,0,0); `main#main` is (1,0,1) and wins outright.

    LEFT AND RIGHT ARE DELIBERATELY UNTOUCHED. The 30px horizontal padding is half of Avada's
    full-bleed mechanism — `.fusion-fullwidth` carries `margin: 0 -30px` to cancel it. Zero the
    sides and every full-width band stops reaching the edge of the screen.
*/

main#main {
    padding-top: 0;
    padding-bottom: 0;
}


/* ---------------------------------------------------------------- utility labels

    These are the only sized text in the file. They are labels, not headings, and the theme has
    no equivalent to inherit from.
*/

#main .vy-eyebrow {
    font-size: 0.8rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--awb-color4);
    margin-bottom: 0.5rem;
}

/* Supporting line under the statement heading. Wider than body copy would naturally sit, so
   it reads as part of the statement rather than as the start of the next section. */
.vy-lede__sub {
    max-width: 46em;
}

.vy-quote__cite {
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--awb-color4);
}

.vy-lede__accent {
    color: var(--awb-color4);
}

.vy-center {
    text-align: center;
}


/* ---------------------------------------------------------------- stats

    .vy-stat is a nested COLUMN, so the visible box is its first div child — styling the column
    itself would style the grid cell rather than the content.
*/

.vy-stat > div {
    border-top: 1px solid hsla(var(--awb-color4-h), var(--awb-color4-s), var(--awb-color4-l), 0.35);
}

.vy-stat__figure h4 {
    color: var(--awb-color4);
}


/* ---------------------------------------------------------------- icon boxes

    Avada supplies the grid, icons and circles. Ours is the card surface and the hover: a uniform
    1px border on all four sides, colour-only on hover, so no edge is ever heavier than the rest.

    The border goes on the WRAPPER, not the column — the column is the grid cell and carries
    Avada's 15px gutter padding, which put the card edge 15px outside the section heading.
*/

#main .vy-boxes .content-box-wrapper {
    border: 1px solid hsla(var(--awb-color1-h), var(--awb-color1-s), var(--awb-color1-l), 0.1);
    border-radius: 6px;
    overflow: hidden;
    padding: 2.25rem 1.75rem 2rem;
    background-image: linear-gradient(
        160deg,
        hsla(var(--awb-color4-h), var(--awb-color4-s), var(--awb-color4-l), 0.07) 0%,
        hsla(var(--awb-color1-h), var(--awb-color1-s), var(--awb-color1-l), 0.02) 45%
    );
    transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.vy-boxes .content-box-column:hover .content-box-wrapper {
    border-color: hsla(var(--awb-color4-h), var(--awb-color4-s), var(--awb-color4-l), 0.55);
    transform: translateY(-4px);
    box-shadow: 0 18px 40px hsla(var(--awb-color8-h), var(--awb-color8-s), var(--awb-color8-l), 0.55);
}

/*
    Avada's icon-boxed layout centres icon, heading and body via
    `.fusion-content-boxes.content-boxes-icon-boxed .heading` at (0,3,0). Anchoring to #main gives
    (1,2,0) — an ID beats any number of classes — so this wins without !important.
*/
#main .vy-boxes .heading,
#main .vy-boxes .heading-with-icon,
#main .vy-boxes .content-container,
#main .vy-boxes .content-box-heading {
    text-align: left;
}

.vy-boxes .heading-with-icon {
    display: block;
}

.vy-boxes .heading-with-icon .icon {
    margin-bottom: 1.5rem;
}

/*
    Avada centres the circle with `.content-boxes-icon-on-top .heading .fontawesome-icon
    { margin-left: auto; margin-right: auto }` at (0,3,0), which left the icon floating in the
    middle above left-aligned text. #main gives (1,2,0) and puts it back on the text edge.
*/
#main .vy-boxes .heading-with-icon .icon .fontawesome-icon {
    margin-left: 0;
    margin-right: 0;
}

#main .vy-boxes .content-box-heading {
    margin-bottom: 10px;
}

/*
    The card bodies carry a <p> wrapper purely so Yoast stops gluing all six of them into one
    193-word "paragraph" — on the page they are six separate cards. Avada's paragraph margin
    would otherwise add 20px of dead space inside every card.
*/
#main .vy-boxes .content-container p:last-child {
    margin-bottom: 0;
}

/*
    Equal-height cards. Avada's own equal-heights JS only runs for the `icon-boxed` layout, and
    that layout centres the icon over left-aligned text — so it is not an option here.

    Only needed above 1024px: at 1024 and below Avada gives the columns `width: 100%` and they
    stack, where equal heights would be wrong. Grid rather than flex because three floated
    columns at 33.3333% total 1170.07px against a 1170px container, and that 0.07px wraps the
    third card onto its own line under `flex-wrap`. Grid has no such rounding cliff.
*/
@media (min-width: 1025px) {

    #main .vy-boxes.fusion-content-boxes {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: 1fr;
    }

    /*
        A 2-up variant. The Las Vegas page splits cb's ten advantages 6 + 4; four cards in a
        3-column grid would strand one alone on its own row, which Ben rejected on the stats.
    */
    #main .vy-boxes--2.fusion-content-boxes {
        grid-template-columns: repeat(2, 1fr);
    }

    /*
        Avada clears its floats with `::before` / `::after` (`content: " "; display: table`) and a
        trailing `.fusion-clearfix` div. In a grid container all three become GRID ITEMS and each
        eats a cell — which pushed the first card into column 2 and spilled the set onto a third
        row. Grid has no floats to clear, so all three go.
    */
    #main .vy-boxes.fusion-content-boxes::before,
    #main .vy-boxes.fusion-content-boxes::after,
    #main .vy-boxes > .fusion-clearfix {
        display: none;
    }

    #main .vy-boxes .content-box-column {
        float: none;
        width: auto;
    }

    #main .vy-boxes .content-box-wrapper {
        height: 100%;
    }
}


/* ---------------------------------------------------------------- logos */

#main .vy-logos .vy-eyebrow {
    margin-bottom: 2.75rem;
}

.vy-logos {
    border-top: 1px solid hsla(var(--awb-color1-h), var(--awb-color1-s), var(--awb-color1-l), 0.1);
    border-bottom: 1px solid hsla(var(--awb-color1-h), var(--awb-color1-s), var(--awb-color1-l), 0.1);
}

.vy-logos .vy-img img {
    width: auto;
    max-height: 3.4rem;
    margin: 0 auto;
    border-radius: 0;
    opacity: 0.85;
    filter: grayscale(1) brightness(1.6);
    transition: opacity 0.25s ease, filter 0.25s ease, transform 0.25s ease;
}

.vy-logos .vy-img img:hover {
    opacity: 1;
    filter: grayscale(0) brightness(1);
    transform: scale(1.06);
}


/* ---------------------------------------------------------------- quote */

.vy-quote__text {
    border-left: 3px solid var(--awb-color4);
    padding-left: 2.25rem;
}

.vy-quote__cite {
    padding-left: 2.25rem;
}


/* ---------------------------------------------------------------- FAQ

    Avada supplies the toggle behaviour. Ours is the restraint: hairlines instead of boxes, and
    questions that do not read as bold — Ben asked for that specifically.
*/

.vy-accordion .fusion-panel {
    border: 0;
    border-top: 1px solid var(--awb-color7);
    border-radius: 0;
    padding: 0;
    background: transparent;
}

#main .vy-accordion .panel-title a {
    padding: 1.25rem 2.5rem 1.25rem 0;
}

#main .vy-accordion .panel-body {
    padding: 0 2.5rem 1.75rem 0;
}

#main .vy-accordion.fusion-accordian .panel-title a {
    font-weight: 400;
    color: var(--awb-color1);
}

#main .vy-accordion.fusion-accordian .panel-title a:hover,
#main .vy-accordion.fusion-accordian .panel-title.active a {
    color: var(--awb-color4);
}


/* ---------------------------------------------------------------- button glow

    A warm glow that sits BEHIND the button face and slides with the cursor, after the effect on
    tradeify.co. Theirs: a blurred radial blob, hidden at rest, faded in on enter, translated on
    X only (never Y) so it reads as a light source travelling along the button.

    It works with `z-index: -1` rather than a wrapper element because the button is
    `position: relative` with `z-index: auto` and sets no transform, filter, opacity or
    isolation — so it creates NO stacking context, and a negative-z child paints behind its own
    background. Verified on the page, not assumed. If a future button ever gains a transform or
    an opacity below 1, that stops being true and the glow will jump in front of the face.

    Scoped to #main, which excludes the header and the footer. Any button Ben adds to the page
    later — the booking section — is picked up with no further work.
*/

#main .fusion-button {
    /* One hue drives the whole glow — change this number to recolour it. */
    --vy-glow-hue: 47;
    --vy-glow-w: 190px;
    --vy-glow-h: 54px;
}

#main .fusion-button .vy-glow {
    position: absolute;
    top: 50%;
    left: 0;
    z-index: -1;
    width: var(--vy-glow-w);
    height: var(--vy-glow-h);
    margin-top: calc(var(--vy-glow-h) / -2);
    margin-left: calc(var(--vy-glow-w) / -2);
    border-radius: 50%;
    background: radial-gradient(ellipse at center,
        hsl(var(--vy-glow-hue), 100%, 82%) 0%,
        hsla(var(--vy-glow-hue), 100%, 68%, 0.7) 40%,
        hsla(var(--vy-glow-hue), 100%, 60%, 0) 72%);
    filter: blur(12px);
    opacity: 0;
    pointer-events: none;

    /*
        `screen` always LIGHTENS, whatever is behind it. That matters here: the hero button sits
        on a video whose frames swing from near-black to bright casino signage, and a plain
        yellow blob simply vanished against the bright ones. Screen keeps the glow legible on
        every frame. Checked on the page across several frames, not assumed.
    */
    mix-blend-mode: screen;
    transition: opacity 0.4s ease, transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}

#main .fusion-button.is-glowing .vy-glow {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {

    #main .fusion-button .vy-glow {
        transition: opacity 0.4s ease;
    }
}


/* ---------------------------------------------------------------- images */

.vy-img img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 4px;
}


/* ---------------------------------------------------------------- cursor depth (SCRATCH)

    Prototype only, currently on /vy-motion-test/. Two layers move at different rates against the
    cursor, which reads as depth without needing any cut-out images: the background image is the
    far layer, the content row is the near one.

    The transition is short on purpose. The script updates on animation frames, so a long
    transition would lag behind the pointer; a short one only smooths the jitter.
*/

#main .vy-depth {
    transition: background-position 0.18s ease-out;
}

#main .vy-depth .fusion-builder-row {
    transition: transform 0.18s ease-out;
}

@media (prefers-reduced-motion: reduce) {

    #main .vy-depth,
    #main .vy-depth .fusion-builder-row {
        transition: none;
    }
}


/* ---------------------------------------------------------------- motion

    Elements only start hidden once the script confirms it is running (html.vy-js), so a JS
    failure can never leave the page blank.
*/

.vy-js .vy-reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.55s ease-out, transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

.vy-js .vy-reveal.is-in {
    opacity: 1;
    transform: none;
}

.vy-js .vy-lede__accent {
    display: inline-block;
    opacity: 0;
    transform: translateX(-0.4em);
    transition: opacity 0.45s ease-out 0.45s, transform 0.55s cubic-bezier(0.16, 1, 0.3, 1) 0.45s;
    animation: vy-accent-failsafe 0.01s linear 2s forwards;
}

.vy-js .vy-lede.is-in .vy-lede__accent,
.vy-js .vy-reveal.is-in .vy-lede__accent {
    opacity: 1;
    transform: none;
}

/*
    FAILSAFE. "Period." was invisible for a while because the reveal that unhides it never fired
    after the markup changed under it. Content must never depend on an animation succeeding.
*/
@keyframes vy-accent-failsafe {
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes vy-breathe {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.82;
    }
}

.vy-js .vy-stat.is-in .vy-stat__figure h4 {
    animation: vy-breathe 5s ease-in-out infinite;
}


/* ---------------------------------------------------------------- narrow screens

    The previous version reduced the hero and grew the feature band at 768px, because the
    feature's centred heading wraps to several lines on a phone and needs the room.

    These three stay here rather than moving to the container's native responsive fields:
    Avada's breakpoints are 600 and 1024, so neither can express 768, and widening one is a
    site-wide setting change. #main outranks Avada's own (0,3,0) container rule.
*/
@media (max-width: 768px) {

    #main .vy-hero {
        min-height: 70vh;
    }

    #main .vy-feature {
        min-height: 68vh;
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
}


@media (max-width: 768px) {

    .vy-js .vy-reveal {
        transform: translateY(14px);
        transition: opacity 0.4s ease-out, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .vy-js .vy-lede__accent {
        transition: opacity 0.35s ease-out 0.3s, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.3s;
    }
}


@media (prefers-reduced-motion: reduce) {

    .vy-js .vy-reveal,
    .vy-js .vy-lede__accent {
        opacity: 1;
        transform: none;
        transition: none;
        animation: none;
    }

    .vy-js .vy-stat.is-in .vy-stat__figure h4 {
        animation: none;
    }

    .vy-boxes .content-box-column:hover .content-box-wrapper {
        transform: none;
    }
}

/* ---------------------------------------------------------------- receipts on mobile

    cb: "I don't mind 'The Receipts'. Let's tighten this section up a bit, maybe less space, smaller
    fonts? IDK. It takes a long time to get through it on mobile."

    Measured before changing anything: 1,175px on a 812px screen — 1.45 screens for seven numbers.
    The seven stats stack one per row at 115px each (805px of the total), and the band adds 104px of
    its own padding.

    Not restructured into two columns: Avada splits these across inner rows of 3 + 3 + 1, so a
    two-across grid would give a ragged 2+1, 2+1, 1. Tightening is what cb actually asked for and it
    does not disturb the desktop layout at all.
*/

@media (max-width: 640px) {

    #main .vy-receipts.fusion-fullwidth {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    /* the visible box inside each stat column */
    #main .vy-receipts .vy-stat > div {
        padding-top: 12px;
        padding-bottom: 12px;
    }

    #main .vy-receipts .vy-stat {
        margin-bottom: 0;
    }

    #main .vy-receipts .vy-stat__figure h4 {
        font-size: 21px;
        line-height: 1.15;
        margin: 0 0 2px;
    }

    #main .vy-receipts .vy-stat__label,
    #main .vy-receipts .vy-stat p {
        font-size: 13.5px;
        line-height: 1.35;
        margin: 0;
    }
}

/* ---------------------------------------------------------------- testimonial row

    cb's four quotes, sitting under the full-width feature quote. Four short pieces of proof read
    better side by side than stacked, but they are different lengths, so the attribution is pinned
    to the bottom of each card with margin-top:auto — otherwise the cites land at four different
    heights and the row looks accidental.

    The two cite spans are block-level: they are separate lines ("Client, Shots Show" over
    "Las Vegas"), and inline they simply ran together.
*/

/* The stretch has to run the whole way down or margin-top:auto has nothing to push against.
   Avada puts its own .fusion-text div between the column wrapper and the blockquote, and that
   div was not stretching — which left the shortest quote's attribution sitting 24px high. */
#main .vy-quotes .vy-quote-card > .fusion-column-wrapper {
    display: flex;
    height: 100%;
}

#main .vy-quotes .vy-quote-card > .fusion-column-wrapper > .fusion-text {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

#main .vy-quotes .vy-q {
    display: flex;
    flex-direction: column;
    /* flex-grow, not just height:100%. As a flex item the blockquote defaults to flex:0 1 auto, so
       it sized to its own content and stopped short of the card's full height — which left
       margin-top:auto on the attribution with no free space to push into on the shortest quote. */
    flex: 1 1 auto;
    height: 100%;
    margin: 0;
    padding: 22px 0 0;
    border-top: 1px solid hsla(var(--awb-color4-h), var(--awb-color4-s), var(--awb-color4-l), 0.35);
}

#main .vy-quotes .vy-q__text {
    font-size: 16px;
    line-height: 1.5;
    color: var(--awb-color1);
    margin: 0 0 18px;
}

/* margin-top:auto has to sit on the FLEX ITEM. wpautop wraps the <cite> in a <p> of its own, so
   the paragraph is the flex child and the cite inside it cannot push anything. Putting it on the
   cite looked right on three of four cards purely because their text happened to fill the height;
   the shortest quote left 24px of slack that nothing absorbed. */
#main .vy-quotes .vy-q > p:last-of-type {
    margin-top: auto;
    margin-bottom: 0;
}

#main .vy-quotes .vy-q__cite {
    font-style: normal;
}

#main .vy-quotes .vy-q__who,
#main .vy-quotes .vy-q__where {
    display: block;        /* they ran together as inline spans */
}

#main .vy-quotes .vy-q__who {
    font-size: 12.5px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--awb-color4);
}

#main .vy-quotes .vy-q__where {
    font-size: 12.5px;
    letter-spacing: .04em;
    color: var(--awb-color6);
    margin-top: 2px;
}

@media (max-width: 640px) {
    #main .vy-quotes .vy-q { padding-top: 16px; }
    #main .vy-quotes .vy-q__text { font-size: 15px; margin-bottom: 12px; }
}

/* ---------------------------------------------------------------------------
   cb's positioning line, on the corporate page. His words, verbatim:
   "Don't Book a Band AND a DJ. You Only Need VYNILYN. (make sure the AND is
   capitalized and bold, that's the whole point.)"

   So AND carries the emphasis and nothing else competes with it.
   --------------------------------------------------------------------------- */
.vy-band-and .vy-and-line h2 {
    margin: 0;
    font-size: 34px;
    line-height: 1.22;
    letter-spacing: -0.01em;
    text-wrap: balance;
}

/* The corporate page is dark with white headings, so the band sits on that ground and the
   accent gold does the shouting. cb: "make sure the AND is capitalized and bold, that's the
   whole point." */
.vy-band-and .vy-and-line strong {
    font-weight: 800;
    letter-spacing: .05em;
    color: var(--awb-color4, #fff4c1);
}

@media (max-width: 800px) {
    .vy-band-and .vy-and-line h2 { font-size: 25px; }
}