/* ==========================================================================
   Athwise — site-wide fixes & polish (loaded after style.css)
   Brand colours are unchanged: #f16b28 (orange) · #0094b2 (teal)
   ========================================================================== */

:root {
    --ath-orange: #f16b28;
    --ath-teal: #0094b2;
    --ath-dark: #050709;
    --ath-light: #FFFCF8;
    --ath-header-h: 92px;
}

/* ---------- 1. No horizontal scrolling / mobile overflow ---------- */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; }
body { max-width: 100%; position: relative; }
@supports (overflow-x: clip) { body { overflow-x: clip; } } /* clip keeps the sticky header working */

img, video, iframe, svg { max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4, h5, h6, p, li, a, span, td, th {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

table { display: block; max-width: 100%; overflow-x: auto; }
pre { white-space: pre-wrap; }

/* Anchored sections land below the sticky header */
[id] { scroll-margin-top: calc(var(--ath-header-h) + 12px); }

/* ---------- 2. Sticky header + mobile menu ---------- */
.nav-bar {
    position: sticky;
    top: 0;
    z-index: 1030;
    transition: box-shadow .3s ease, background-color .3s ease;
}
.nav-bar .navbar { transition: padding .3s ease; }
.nav-bar.is-scrolled { box-shadow: 0 6px 24px rgba(5, 7, 9, .08); }
.nav-bar.is-scrolled .navbar { padding-top: .6rem !important; padding-bottom: .6rem !important; }

.navbar-brand img { width: 120px; height: 60px; object-fit: contain; }

.navbar-toggler {
    border: 1px solid rgba(0, 148, 178, .35);
    border-radius: 10px;
}
.navbar-toggler:focus { box-shadow: 0 0 0 .2rem rgba(0, 148, 178, .25); }
.navbar-toggler .fa { width: 1.1em; transition: transform .25s ease; }
.navbar-toggler[aria-expanded="true"] .fa { transform: rotate(90deg); }

/* Hover dropdown on all desktop widths (template only did ≥1200px) */
@media (min-width: 992px) {
    .navbar .nav-item .dropdown-menu {
        display: block;
        visibility: hidden;
        top: 100%;
        opacity: 0;
        transform: translateY(8px);
        transition: .25s ease;
        min-width: 190px;
        width: auto;
        border: 0;
        border-radius: 10px;
        padding: .5rem 0;
    }
    .navbar .nav-item:hover .dropdown-menu,
    .navbar .nav-item .dropdown-menu.show {
        transform: translateY(0);
        visibility: visible;
        opacity: 1;
    }
}

@media (max-width: 991.98px) {
    :root { --ath-header-h: 84px; }
    .nav-bar .navbar { padding-top: .75rem !important; padding-bottom: .75rem !important; }
    .navbar-collapse {
        max-height: calc(100vh - 90px);
        max-height: calc(100dvh - 90px);
        overflow-y: auto;
        margin-top: .75rem;
        padding: .5rem 0 1rem;
        border-top: 1px solid rgba(0, 0, 0, .06);
    }
    .navbar .navbar-nav .nav-link {
        padding: 12px 4px;
        border-bottom: 1px solid rgba(0, 0, 0, .06);
    }
    .navbar .dropdown-menu {
        position: static !important;
        width: auto;
        box-shadow: none;
        border: 0;
        margin: 0;
        padding: 0 0 .25rem 1rem;
        background: transparent !important;
        float: none;
    }
    .navbar .dropdown-menu .dropdown-item { padding: 10px 8px; border-radius: 6px; }
}

.ath-mobile-actions { gap: .6rem; padding-top: 1rem; }
.ath-mobile-actions .btn { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: .45rem; }

/* ---------- 3. Disclaimer ticker (replaces deprecated <marquee>) ---------- */
.ath-ticker {
    background: #f16b28;
    color: #fff;
    font-weight: bold;
    overflow: hidden;
    white-space: nowrap;
    padding: 12px 0;
    position: relative;
}
.ath-ticker__track {
    display: inline-block;
    padding-left: 100%;
    animation: ath-ticker 38s linear infinite;
}
.ath-ticker:hover .ath-ticker__track { animation-play-state: paused; }
@keyframes ath-ticker { from { transform: translateX(0); } to { transform: translateX(-100%); } }

/* ---------- 4. Buttons, cards, spacing ---------- */
.btn { transition: .3s ease; }
.btn:focus-visible, a:focus-visible, .form-control:focus-visible {
    outline: 3px solid rgba(0, 148, 178, .45);
    outline-offset: 2px;
}

/* Equal-height service cards with the button pinned to the bottom */
.service-item { height: 100%; }
.service-item .service-content { height: 100%; align-items: stretch !important; }
.service-item .service-content-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}
.service-item .service-content-icon img { width: 100%; max-width: 250px; height: auto; aspect-ratio: 5 / 4; object-fit: contain; }
.service-item .service-content-icon > .btn { margin-top: auto; align-self: center; }

/* Service detail pages: header image scales down on phones */
.service-content-icon > img { height: auto; }

/* Typed cursor on the home hero blinks instead of sitting still */
.typed-cursor { animation: ath-blink 1s step-end infinite; font-weight: 400; }
@keyframes ath-blink { 50% { opacity: 0; } }

.back-to-top { display: none; left: auto; }

@media (max-width: 767.98px) {
    .py-6 { padding-top: 1.5rem; padding-bottom: 3rem; }
    .my-6 { margin-top: 3rem; }
    .container-fluid.bg-light.py-6.my-6.mt-0 { padding-top: 2.5rem; padding-bottom: 2.5rem; margin-bottom: 1.5rem; }
    .display-1 { font-size: calc(1.9rem + 2.4vw); }
    .display-4 { font-size: calc(1.6rem + 2vw); }
    .display-5 { font-size: calc(1.5rem + 1.6vw); }
    .contact-form.p-5 { padding: 1.5rem !important; }
    .back-to-top { right: 16px; bottom: 16px; }
    .testimonial-item .fs-5 { font-size: 1rem !important; }
}

/* Hero CTA buttons wrap neatly on small screens */
.ath-hero-ctas { display: flex; flex-wrap: wrap; gap: .9rem; }
.ath-hero-ctas .btn { margin: 0 !important; }

/* Breadcrumb links */
.breadcrumb { flex-wrap: wrap; }
.breadcrumb a { color: var(--ath-teal); }
.breadcrumb a:hover { color: var(--ath-orange); }

/* ---------- 5. Floating WhatsApp button ---------- */
.wa-float {
    position: fixed;
    left: 20px;
    bottom: 20px;
    z-index: 999;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #25D366;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .22);
    transition: transform .25s ease, box-shadow .25s ease;
}
.wa-float:hover, .wa-float:focus { color: #fff; transform: translateY(-3px) scale(1.04); box-shadow: 0 12px 28px rgba(0, 0, 0, .28); }
.wa-float::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid #25D366;
    animation: ath-pulse 2.2s ease-out infinite;
}
@keyframes ath-pulse { from { transform: scale(1); opacity: .8; } to { transform: scale(1.55); opacity: 0; } }
@media (max-width: 767.98px) { .wa-float { left: 16px; bottom: 16px; width: 52px; height: 52px; font-size: 28px; } }

/* ---------- 6. Search ---------- */
#searchModal .modal-content { background-color: var(--ath-light) !important; }
#searchModal .modal-header { border: 0; justify-content: flex-end; padding: 1.25rem 1.5rem 0; }
#searchModal .btn-close { font-size: 1.1rem; opacity: .7; }
#searchModal .modal-body { flex-direction: column; justify-content: flex-start; padding-top: 12vh; }
#searchModal .ath-search-wrap { width: 100%; max-width: 720px; margin: 0 auto; }
#searchModal .form-control { font-size: 1.15rem; border-color: var(--ath-teal); }
#searchModal .form-control:focus { box-shadow: 0 0 0 .2rem rgba(0, 148, 178, .2); }
.ath-search-results { list-style: none; margin: 1rem 0 0; padding: 0; max-height: 55vh; overflow-y: auto; }
.ath-search-results li a {
    display: block;
    padding: .85rem 1rem;
    border-radius: 10px;
    color: var(--ath-dark);
    border: 1px solid transparent;
}
.ath-search-results li a:hover, .ath-search-results li a.is-active {
    background: #fff;
    border-color: rgba(0, 148, 178, .35);
    color: var(--ath-teal);
}
.ath-search-results small { display: block; color: #6c757d; margin-top: 2px; }
.ath-search-empty { color: #6c757d; padding: 1rem; }

/* ---------- 7. Contact form validation & messages ---------- */
.contact-form .form-control.is-invalid { border-color: #dc3545 !important; }
.contact-form .invalid-feedback { margin: -1rem 0 1rem; }
.ath-form-status { border-radius: 12px; margin-bottom: 1.25rem; }
.ath-form-status .alert-link { color: inherit; }

/* Contact cards: links inherit colour */
.contact-form a.ath-contact-link,
.footer a.ath-contact-link { color: inherit; }
.contact-form a.ath-contact-link:hover,
.footer a.ath-contact-link:hover { color: var(--ath-orange) !important; }

/* ---------- 8. Footer ---------- */
.footer .footer-item p { margin-bottom: .85rem; }
.footer-logo { max-width: 250px; height: auto; }
.footer .ath-top-service { display: block; transition: transform .25s ease; }
.footer .ath-top-service:hover { transform: translateY(-3px); }
.copyright a { color: var(--ath-orange); }
.copyright .ath-legal a { color: #fff; opacity: .85; }
.copyright .ath-legal a:hover { color: var(--ath-orange); opacity: 1; }
.copyright .ath-legal .sep { color: rgba(255, 255, 255, .35); margin: 0 .5rem; }

/* ---------- 9. 404 page ---------- */
.ath-404-code {
    font-size: clamp(5rem, 18vw, 10rem);
    line-height: 1;
    font-weight: 700;
    color: var(--ath-orange);
    font-family: "Times New Roman", Times, serif;
}

/* ---------- 10. Respect reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    .ath-ticker { white-space: normal; text-align: center; padding: 12px 16px; }
    .ath-ticker__track { padding-left: 0; }
}