/* ===================================================================
   Serenity Centre — custom overrides (2026 upgrade)
   Loaded last so it wins over the theme CSS. Keep theme files untouched.
   =================================================================== */

/* --- Robustness: never leave scroll-animation content permanently hidden ---
   WOW.js sets `.wow { visibility:hidden }` and only reveals elements when they
   scroll into view. That blanks whole sections for no-JS visitors, search/AI
   crawlers, and fast scrolls. Force visible; the fade animations still play. */
.wow { visibility: visible !important; }

/* --- Accessibility: clear keyboard focus indicator (WCAG 2.4.7) --- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.theme-btn:focus-visible,
.nav-menu a:focus-visible {
    outline: 3px solid #1a7a3c;
    outline-offset: 2px;
    border-radius: 2px;
}

/* --- Skip-to-content link (keyboard / screen-reader users) --- */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100000;
    background: #1a7a3c;
    color: #fff;
    padding: 10px 18px;
    border-radius: 0 0 6px 0;
    font-weight: 600;
}
.skip-link:focus {
    left: 0;
    color: #fff;
}

/* --- Screen-reader-only utility --- */
.sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --- Touch targets: ensure topbar/footer social icons are tappable --- */
.top-link a,
.footer-social a {
    min-width: 36px;
    min-height: 36px;
}

/* --- Honeypot anti-spam field (paired with form validation) --- */
.hp-field { position: absolute !important; left: -9999px; top: -9999px; }

/* --- CLS FIX: owl-carousel rebuilds the hero DOM after JS loads, which changed
   the hero's height and pushed every section below it down (large Cumulative
   Layout Shift on desktop). Lock the hero AREA to a fixed height with overflow
   hidden so whatever owl does inside (stacking slides before init, building its
   stage after) never changes the outer height — content below stays put.
   Desktop only; the mobile hero is content-height and already shift-free. --- */
.hero-area { height: 700px; overflow: hidden; }                 /* matches theme .single-slider:700px */
@media (min-width: 1200px) { .hero-area { height: 760px; } }    /* taller hero on large screens */
@media (max-width: 991px)  { .hero-area { height: 500px; } }    /* matches theme .single-slider:500px */

/* --- Hero slider: always cover, framed on the subjects (fixes the
   "image chopped from the top/bottom" look and the mobile background-size:auto
   theme bug where the hero photo failed to fill on small screens). --- */
.hero-area .single-slider {
    background-size: cover !important;
    background-position: center 30% !important;
    background-repeat: no-repeat !important;
}
/* Give the hero a touch more height on large screens so tall subjects
   (e.g. the bishop's mitre) aren't clipped, and keep it comfortable on phones. */
@media (min-width: 1200px) {
    .hero-area .single-slider { min-height: 760px; }
}
@media (max-width: 767px) {
    .hero-area .single-slider { background-position: center 25% !important; }
}

/* --- Show email / phone in their real case (theme capitalises topbar text)
   and use white for sufficient contrast on the dark top bar (WCAG AA). --- */
.topbar-detail a { text-transform: none; color: #fff; }
.topbar-detail a:hover { color: #d7f3e0; }