/* ===============================
   FOR LARGER SCREENS
   =============================== */

/* Utility padding for L (lg) breakpoint */
@media (min-width: 992px) {
    .px-lg-140 {
        padding-left: 140px !important;
        padding-right: 140px !important;
    }
}

@media (min-width: 768px) {


    /* ===============================
       1) Top Bar
       =============================== */
    .top-bar {
        height: 98px;              /* restore fixed height */
        padding: 0;                /* remove mobile padding */
        text-align: left;          /* align text container left again */
    }

    .top-bar .container-fluid .d-flex {
        justify-content: flex-start; /* logo back to the left */
    }

    .top-bar .centered-text {
        position: absolute;          /* re-enable overlay centering */
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 0;
        padding: 0 16px;
        font-size: 1.25em;
        pointer-events: none;        /* like original */
        text-align: center;
    }

    .top-bar .centered-text a {
        pointer-events: auto; /* make link clickable again */
    }
    /* ===============================
       2) Hero
       =============================== */
    .hero {
        position: relative;
        width: 100%;
        height: 55vh; /* default */
        overflow: hidden;
    }

    @media (min-width: 992px) {
        .hero {
            height: 724px;
        }
    }

    .hero img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }


    /* ===============================
       3) Two-Column White Content
       =============================== */
    .square-img {
        width: 100%;
        max-width: 420px;
        aspect-ratio: 1 / 1;
        object-fit: cover;
        display: block;
    }


    .section-title-red {
        color: var(--brand-red);
    }

    h1.section-title-red {
        font-size:6em;
        line-height: 1em;
    }

    .btn-red {
        background: var(--brand-red);
        color: #fff;
        border: none;
    }

    .btn-red:hover,
    .btn-red:focus {
        background: var(--brand-red);
        filter: brightness(0.85);
        color: #fff;
    }


    /* ===============================
       4) Two-Column Red Content
       =============================== */
    .bg-brand-red {
        background: var(--brand-red);
    }

    .tall-right-img {
        width: 100%;
        height: 100%;
        max-height: 560px;
        object-fit: cover;
        display: block;
    }


    form, .text-small {
        font-size: .66em;
    }

    input {
        font-size: 1em;
    }

    .form-box,
    .form-submitted {
        opacity: 1;
        transition: opacity 0.25s ease;
    }

    .form-submitted {
        opacity: 0;
        transition: opacity 0.5s ease;
    }

    .hidden {
        display: none !important;
    }

    /* Make invalid feedback text white */
    .invalid-feedback {
        background: #fff;
        padding: 4px;
        font-size: 1em;
        color: var(--brand-red);
    }

    /* Form controls & selects: white borders when invalid */
    .form-control.is-invalid,
    .form-select.is-invalid {
        border-color: #fff !important;
        box-shadow: none !important;
    }

    /* Checkboxes/radios: white border & no green check */
    .form-check-input.is-invalid {
        border-color: #fff !important;
        box-shadow: none !important;
    }

    /* Keep the checkmark the normal browser color, not Bootstrap's green/red */
    .form-check-input.is-invalid:checked {
        background-color: inherit !important;
        border-color: #fff !important;
    }

    /* Keep checkbox/radio label text WHITE regardless of validity */
    .was-validated .form-check-input:invalid ~ .form-check-label,
    .form-check-input.is-invalid ~ .form-check-label,
    .was-validated .form-check-input:valid ~ .form-check-label,
    .form-check-input.is-valid ~ .form-check-label {
        color: #fff !important;
    }

    /* If the label contains links, keep them white too */
    .form-check-label a {
        color: #fff !important;
        text-decoration: underline;
    }

    /* Optional: keep helper texts white as well */
    .invalid-feedback,
    .valid-feedback {
        color: var(--brand-red);
    }

    /* Prevent green/red fills and borders on checks when valid/invalid */
    .form-check-input.is-valid,
    .was-validated .form-check-input:valid,
    .form-check-input.is-invalid,
    .was-validated .form-check-input:invalid {
        border-color: #fff !important;
        box-shadow: none !important;
        background-color: transparent !important; /* stops green fill on :valid */
    }

    /* And when the checkbox is checked, keep it neutral (no green/red) */
    .form-check-input.is-valid:checked,
    .was-validated .form-check-input:valid:checked,
    .form-check-input.is-invalid:checked,
    .was-validated .form-check-input:invalid:checked {
        background-color: transparent !important;
        border-color: #fff !important;
    }

    /* Optional: white focus ring to match the red panel */
    .form-check-input:focus {
        box-shadow: 0 0 0 .2rem rgba(255, 255, 255, 0.35) !important;
        border-color: #fff !important;
    }

    /* ===============================
       5) Single Column Giant Heading
       =============================== */
    .giant-text img {
        width:421px;
    }

    .giant-heading {
        font-size: 8em;
        line-height: 1;
        color: var(--brand-red);
    }

    .giant-heading-all {
        font-size: 7.5em;
        line-height: 1;
        color: var(--brand-red);
    }


    /* ===============================
       6) Feature Section w/ Scroll Trap
       =============================== */
    .feature-trap {
        position: relative;
        height: 500px;
        overflow: hidden; /* lock the section’s viewport */
        background: transparent;
    }

    .feature-trap::before {

    }

    .trap-inner {
        position: relative;
        z-index: 1;
        height: 100%;
        overflow-y: auto; /* scroll inside only */
        -webkit-overflow-scrolling: touch;
        display: flow-root;
    }

    .trap-content {
        min-height: 1000px;
        width: 375px;
        margin: 50px auto;
        box-sizing: border-box;

        /* Warm off-white paper tone */
        background-color: #f9f9f7;

        /* Subtle diagonal tone shift (fibers) */
        background-image: linear-gradient(135deg, #f9f9f7 0%, #fefefe 50%, #f9f9f7 100%),
            /* Faint vertical striations to mimic tape texture */ repeating-linear-gradient(
                90deg,
                rgba(0, 0, 0, 0.02) 0px,
                rgba(0, 0, 0, 0.02) 1px,
                transparent 1px,
                transparent 4px
        );

        background-blend-mode: multiply;

        /* Tiny shadow only on the left edge */
        box-shadow: -3px 0 5px rgba(0, 0, 0, 0.35);
    }

    .trap-content-inner {
        border: 2px solid var(--brand-red);
        border-bottom: none;
        min-height: 100%;
        color: var(--brand-red);
    }

    .tip {
        position: relative;
        border-bottom: 2px solid var(--brand-red);
    }

    .hash {
        position: absolute;
        top: 10px;
        left: 10px;
        font-size: 3em;
        font-weight: bold;
    }

    .tip-number {
        font-size: 10em;
    }

    .tip-category {
        text-transform: uppercase;
        border-top: 2px solid var(--brand-red);
        border-bottom: 2px solid var(--brand-red);
    }

    .tip-category span {
        font-size: 1.2em;
        display: inline-block;
        width: 100%;
        border: 2px solid var(--brand-red);
        border-radius: 50%;
    }

    /* ===============================
       7) Two-Column Red with Inverse Btn
       =============================== */



    /* ===============================
       8) Footer
       =============================== */
    .site-footer {
        height: 288px;
        background: #fff;
        color: var(--brand-red);
    }

    .site-footer a {
        color: var(--brand-red);
    }

    .site-footer a:hover {
        text-decoration: underline;
    }

    .footer-logo {
        width: 100px;
        height: auto;
        display: block;
    }
    .long-legal {
        width: 50%;
    }

    /* ===============================
       9) Cookie Notice
       =============================== */
    .cookie-notice {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1080;
        background: #fff;
        color: #000;
        border-top: 3px solid var(--brand-red);
        padding: 12px 16px;
        box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.06);
    }

}