/*------------------------------------*\
    CCS Cleanup — Tier 1–4 cosmetic + mobile + a11y fixes

    Scope: CSS-only. No markup, copy, URL, heading, alt-text, or schema changes.
    Enqueued AFTER trumps.css to guarantee these overrides land last.

    Tier 1 — Mobile-breaking (layout, overflow, tap targets, forms)
    Tier 2 — Visual polish (buttons, spacing, contrast)
    Tier 3 — Performance-as-design (content-visibility, deferred decoration)
    Tier 4 — Accessibility polish (reduced-motion, focus-visible, contrast)
\*------------------------------------*/

/* ============================================================
   Tier 1 — Mobile-breaking
   ============================================================ */

/* T1-1: hero shadow duplicate cannot overflow narrow viewports */
.masthead__text .hero-text {
    max-width: 100%;
    overflow: hidden;
}
.masthead__text p.shadow {
    max-width: 100%;
    white-space: normal;
    word-break: normal;
    overflow-wrap: break-word;
}
@media (max-width: 420px) {
    .masthead__text h1,
    .masthead__text p.shadow {
        font-size: 30px;
        line-height: 1.1em;
        left: 2px;
        top: 2px;
    }
}

/* T1-2 / T1-3: 44px min tap targets for mobile phone icon + hamburger */
@media (max-width: 1024px) {
    .header-phone.mobile-phone a,
    .header-phone.mobile-phone {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
        padding: 10px;
    }
    .toggle-menu {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
        padding: 10px;
    }
    .js-search-toggle {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* T1-4 / new Captain Right Away portrait: let the cartoon overlay respect its
   native aspect ratio (glasses-form is ~900x1328 portrait) — the theme's
   fixed 260x247 box would squish it. */
.masthead__cartoon-image {
    height: auto !important;
    object-fit: contain;
    aspect-ratio: 900 / 1328;
}

@media (max-width: 480px) {
    .masthead__cartoon-image {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        bottom: auto !important;
        margin: 16px auto 0;
        display: block;
        max-width: 220px;
        width: 220px !important;
        height: auto !important;
    }
    .masthead__image {
        max-width: 100%;
        height: auto;
    }
    .masthead__large-image {
        height: 220px;
    }
}

@media (min-width: 768px) {
    .masthead__cartoon-image {
        max-width: 220px !important;
        width: 220px !important;
        height: auto !important;
        bottom: -20px !important;
    }
}

@media (min-width: 1200px) {
    .masthead__cartoon-image {
        max-width: 240px !important;
        width: 240px !important;
        height: auto !important;
        bottom: -20px !important;
    }
}

/* T1-5: Trust bar spacing on small phones */
@media (max-width: 400px) {
    .ccs-trust-bar {
        padding: 10px 14px;
        font-size: 12px;
        line-height: 1.55;
    }
    .ccs-trust-bar__inner {
        gap: 4px 14px;
    }
    .ccs-trust-bar__item {
        white-space: normal;
    }
}

/* T1-6: Promotion deals grid — avoid widow card on tablet */
@media (min-width: 768px) and (max-width: 1199px) {
    .deals-crads__wrap .col-sm-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* T1-7: Form inputs ≥16px to prevent iOS zoom-on-focus */
.page-content input[type="text"],
.page-content input[type="email"],
.page-content input[type="tel"],
.page-content input[type="number"],
.page-content input[type="url"],
.page-content input[type="search"],
.page-content input[type="password"],
.page-content input[type="date"],
.page-content textarea,
.page-content select,
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 input[type="number"],
.wpcf7 textarea,
.wpcf7 select,
.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="number"],
.gform_wrapper input[type="url"],
.gform_wrapper textarea,
.gform_wrapper select {
    font-size: max(16px, 1rem);
}

/* T1-8: Footer address long-line overflow protection */
.footer-link-col ul li a,
.footer-link-col ul li {
    overflow-wrap: anywhere;
    word-break: normal;
}

/* ============================================================
   Tier 2 — Visual polish
   ============================================================ */

/* T2-1: Normalize button padding across blocks */
.btn,
.btn-primary,
.btn-secondary,
.btn-tertiary {
    padding: 14px 24px;
}
@media (min-width: 768px) {
    .btn,
    .btn-primary,
    .btn-secondary,
    .btn-tertiary {
        padding: 16px 28px;
    }
}
.btn-icon {
    gap: 10px;
}

/* T2-2: Sub-heading breathing on mobile */
.sub-heading,
.sub-heading p {
    letter-spacing: 0.04em;
}
@media (max-width: 767px) {
    .sub-heading,
    .sub-heading p {
        font-size: 16px;
        line-height: 1.4;
    }
}

/* T2-3: Back-to-top contrast */
.back-to-top,
.js-back-to-top {
    color: var(--dark-blue, #042452);
}
.back-to-top:hover,
.js-back-to-top:hover,
.back-to-top a:hover,
.js-back-to-top a:hover {
    color: var(--primary-color, #FF5F1F);
}

/* T2-4: Masthead wave — prevent 1px hairline seam */
.masthead__wave {
    display: block;
    margin-top: -1px;
}

/* T2-5: Icon vertical alignment in buttons */
.btn-icon i,
.btn i[class^="icon-"] {
    vertical-align: -2px;
    line-height: 1;
}

/* T2-6: Headline wrap balance */
.deals-crad h3,
.deals-crads h3,
.masthead__text h1,
.sub-heading {
    text-wrap: balance;
}

/* T2-7: Testimonial slider arrow centering */
.testimonials .slick-arrow {
    top: calc(50% - 12px);
}

/* ============================================================
   Tier 3 — Performance-as-design (CSS-only)
   ============================================================ */

/* T3-1: GPU pre-warm for cartoon overlay */
.masthead__cartoon-image {
    will-change: transform;
}

/* T3-1 (cont): content-visibility for below-fold hero image */
.masthead__image {
    contain: layout paint;
}

/* T3-4: Don't render heavy deals graphic on small screens (and skip request below md) */
@media (max-width: 1024px) {
    .deals-crads__graphics {
        display: none !important;
    }
}

/* ============================================================
   Tier 4 — Accessibility polish
   ============================================================ */

/* ------------------------------------------------------------
   GSAP fallback: if the scroll-triggered animations haven't
   revealed .animated-content children within 4 seconds (e.g.,
   GSAP failed to initialize, or ScrollTrigger didn't fire in
   a headless crawler / AMP / low-power mode), force the
   content visible so we never ship opaque dark bands.
   If GSAP DID run, its inline styles win over this fallback.
   ------------------------------------------------------------ */
@keyframes ccs-fallback-reveal {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (min-width: 1200px) {
    body:not(.turn-off-sparkle) .animated-content > p,
    body:not(.turn-off-sparkle) .animated-content > ul > li,
    body:not(.turn-off-sparkle) .animated-content > ol > li,
    body:not(.turn-off-sparkle) .animated-content > div:not(.reviews),
    body:not(.turn-off-sparkle) .animated-content > h2,
    body:not(.turn-off-sparkle) .animated-content > h3,
    body:not(.turn-off-sparkle) .animated-content > h4,
    body:not(.turn-off-sparkle) .animated-content > h5,
    body:not(.turn-off-sparkle) .animated-content > h6,
    body:not(.turn-off-sparkle) .animated-content > blockquote,
    body:not(.turn-off-sparkle) .animated-content > article,
    body:not(.turn-off-sparkle) .animated-content > img,
    body:not(.turn-off-sparkle) .animated-content > span,
    body:not(.turn-off-sparkle) .animated-slider .slick-slide,
    body:not(.turn-off-sparkle) .animated-card .animated-card-item,
    body:not(.turn-off-sparkle) .animated-image,
    body:not(.turn-off-sparkle) .animated-image-tiles,
    body:not(.turn-off-sparkle) .animated-image-header {
        animation: ccs-fallback-reveal 0.4s ease 4s forwards;
    }
}

/* T4-1: Respect prefers-reduced-motion across theme animations */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    .js-animated-split-text *,
    .js-animated-content,
    .js-animated-image,
    .js-animated-image-header,
    .js-animated-card,
    .js-animated-card-item,
    .js-animated-image-tiles,
    .js-homepage-banner-animation {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }
}

/* T4-2: Focus-visible rings */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-tertiary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.toggle-menu:focus-visible,
.js-search-toggle:focus-visible,
.js-back-to-top:focus-visible {
    outline: 2px solid var(--secondary-color, #209AD6);
    outline-offset: 3px;
    border-radius: inherit;
}

.header-phone:focus-within {
    outline: 2px solid var(--secondary-color, #209AD6);
    outline-offset: 2px;
}

/* T4-3: Slightly darken sub-heading blue on small text contexts (AA-large already passes;
   this nudges body uses into AA-normal territory without touching the design token.) */
.sub-heading.sub-heading--body,
p .sub-heading,
.deals-crad .sub-heading {
    color: #1880B8;
}

/* T4-4: Back-to-top anchor semantics — keep visual, improve cursor hint */
.js-back-to-top a[href^="javascript"] {
    cursor: pointer;
}