/*
 * Magic & Villains brand theme.
 * Loaded AFTER the vendor theme.css/helper.css — overrides font + converts
 * the (originally light) source template to a dark theme with a
 * purple / aqua / pink accent palette.
 *
 * The template's single swappable "main color" (originally #0fefd7) was
 * already replaced with brand purple directly in theme.css/helper.css
 * (search-and-replace, per the template's own customization convention).
 * This file handles: font, base dark backgrounds/text, and components the
 * template didn't expose a single swappable color for.
 */

:root {
    --mv-purple: #9d00ff;
    --mv-aqua: #00dbe9;
    --mv-pink: #ffaceb;
    --mv-menu-highlight: #9d00ff;
    --mv-bg: #08080a;
    --mv-bg-alt: #120c1a;
    --mv-text: #e5e1e4;
    --mv-text-muted: #bdb8c0;
    /* Derived from --mv-purple (color-mix) so it tracks the admin's chosen
       accent instead of staying pinned to the original brand hex. */
    --mv-border: color-mix(in srgb, var(--mv-purple) 25%, transparent);
    /* Accessibility (WCAG 1.4.6, 7:1 contrast): brand purple #9d00ff is only
       3.7:1 as text on the dark background and 5.4:1 behind white text. These
       derived shades also follow the admin's chosen accent. Use -text for purple
       text/links on dark backgrounds, -fill for any background holding text. */
    --mv-purple-text: color-mix(in srgb, var(--mv-purple) 40%, #fff);
    --mv-purple-fill: color-mix(in srgb, var(--mv-purple) 75%, #000);
    --mv-font-body: 'Be Vietnam Pro', system-ui, sans-serif;
    --mv-font-heading: 'Newsreader', serif;
    --mv-font-caps: 'Space Grotesk', system-ui, sans-serif;
}

/* ---- Font (matches classic-design/: Newsreader headings, Be Vietnam Pro body) ---- */
html,
body,
.tt-ol-menu,
.btn,
input,
textarea,
select {
    font-family: var(--mv-font-body);
}

/* theme.css hardcodes 'Playfair Display' on many specific heading/title
   classes individually (not a single swappable variable) — !important is
   needed to beat those class-level declarations. */
h1,
h2,
h3,
h4,
h5,
h6,
.tt-heading,
[class*='-title'],
[class*='heading'] {
    font-family: var(--mv-font-heading) !important;
}

.label-caps,
.tt-ol-menu-text,
[class*='label-caps'] {
    font-family: var(--mv-font-caps);
}

/* ---- Base dark theme ---- */
html,
body {
    background-color: var(--mv-bg);
    color: var(--mv-text);
}

a {
    color: var(--mv-purple-text);
}
a:hover,
a:focus {
    color: var(--mv-aqua);
}

::selection {
    background: var(--mv-purple-fill);
    color: #fff;
}

hr {
    border-color: var(--mv-border);
}

blockquote {
    background-color: var(--mv-bg-alt);
    border-left: 3px solid var(--mv-purple);
    color: var(--mv-text);
}

/* theme.css:407-415 sets a bare #F4F4F4 background on figcaption (image
   captions) — same "light-theme leftover" issue as #page-content above. */
figcaption {
    background-color: var(--mv-bg-alt);
    color: var(--mv-text-muted);
}

/* ---- Sections / containers ----
 * #page-content and #page-wrap are the two elements theme.css actually
 * hardcodes to #FFF (lines 352-354 and 343 respectively) — every "plain
 * section" showing invisible light-on-white text traces back to one of
 * these two. Fixed at exactly this level, deliberately NOT on .tt-section
 * or .tt-wrap: those are layout-only utility classes (max-width/padding,
 * confirmed via grep — theme.css never sets a background on either), and
 * they're also used as transparent overlays on top of parallax/bg-image
 * parents (page-header, footer-inner, hero). Painting them opaque here
 * previously hid those background images and created a mismatched-color
 * seam in the footer — removed for that reason. */
#page-content,
#page-wrap {
    background-color: var(--mv-bg);
}

.tt-section-gray,
.section-gray,
.bg-white,
.bg-light {
    background-color: var(--mv-bg-alt) !important;
}

/* ---- Header / overlay nav ----
 * theme.css:488 hardcodes a solid white #header background unconditionally,
 * and only clears it to transparent (theme.css:559) at >=992px — leaving a
 * solid white bar on mobile/tablet before the user has scrolled, since that
 * media query never applies there. Match the already-transparent desktop
 * behavior at every width instead of just >=992px. */
#header {
    background-color: transparent;
}

/* theme.css:507-518 pushes #page-wrap down by the header's height so fixed
 * headers don't cover content — but only the >=992px version excludes
 * transparent headers (":not(.header-transparent-on)"), since those are
 * meant to overlay the hero instead of sitting above it. The <=991px
 * version has no such exclusion, so on mobile/tablet the hero still gets
 * pushed down 64px and the "transparent" header ends up over plain body
 * background instead of the hero image. Match the desktop exclusion here. */
@media (max-width: 991px) {
    body.header-transparent-on #page-wrap {
        padding-top: 0;
    }
}

/* The header should start fully transparent over the hero image and only
 * gain a background once scrolled past ~80px, when theme.js (line 171) adds
 * the "header-filled" class — that's the template's own intended behavior.
 * theme.css:598-599 already does this, just with a white bg (rgba(255,255,
 * 255,.95)); recolor that specific state to dark instead of adding an
 * unconditional background that would defeat the transparent-on-load
 * effect entirely. */
#header.header-filled {
    background-color: rgba(8, 8, 10, 0.9) !important;
}
/* Vendor assumes a white filled-header bg and recolors these to dark
   (#000/#111) at that state — flip to light so they stay visible on ours. */
#header.header-filled .tt-ol-menu-str .str-1,
#header.header-filled .tt-ol-menu-str .str-2,
#header.header-filled .tt-ol-menu-str .str-3 {
    background-color: #fff;
}
#header.header-filled #tt-ol-menu-trigger .tt-ol-menu-text {
    color: var(--mv-text);
}

/* ---- Inline desktop nav (mirrors classic-design/ and royaldreamevents.com:
   links live in the top bar itself on desktop; hamburger + overlay below is
   mobile-only) ---- */
.mv-inline-nav {
    display: none;
}
/* Below 992px the inline nav is gone and only the hamburger trigger shows on
   the right — theme.css:626 (#header.header-alt .header-inner {padding-right:0})
   already makes it sit flush against the edge unconditionally at every
   breakpoint, so nothing extra is needed for the mobile case. */
@media (min-width: 992px) {
    /* .header-inner is a float layout (theme.css:521-529, clearfix, not flex),
       not a flexbox — #tt-ol-menu-trigger itself is float:right (theme.css:
       1285-1290). Match that mechanism rather than flex auto-margins, which
       do nothing in a non-flex parent. */
    .mv-inline-nav {
        display: flex;
        float: right;
        align-items: center;
        margin-top: 28px;
    }
    /* theme.css:626 (#header.header-alt .header-inner {padding-right:0}) has
       higher specificity (1 id + 2 classes) than a plain ".header-inner"
       rule and always wins regardless of media query — matching its exact
       selector here is what makes this override actually take effect.
       Without the inline nav this zero-right-padding is correct (hamburger
       flush to the edge); once the inline nav replaces the hamburger on
       desktop it needs real breathing room instead, hence this override
       only inside the ≥992px block.

       header.php puts "tt-wrap" on this same element (theme.css:262-267:
       max-width:1282px + margin:auto), which centers a fixed-width box in
       the middle of the viewport — on ultra-wide screens the logo/nav drift
       toward the center far more than the hero caption does (it only uses a
       plain left:7% with no max-width, theme.css:1822). Neutralizing
       max-width/margin here and using the same 7% the hero caption uses
       keeps both proportional to viewport width instead of one collapsing
       to a centered box, and left-aligns the logo with the hero caption
       title as a side effect (both now sit at the same 7% inset). This same
       selector already wins over ".tt-wrap" for padding (see above), so it
       wins for max-width/margin too. */
    #header.header-alt .header-inner {
        max-width: none;
        margin-left: 0;
        margin-right: 0;
        padding-left: 7%;
        padding-right: 7%;
    }
    /* Direct child only — must NOT match the nested .dropdown-menu <ul>,
       which needs to keep Bootstrap's own display:none/.show toggle. */
    .mv-inline-nav > ul {
        display: flex;
        align-items: center;
        gap: 2rem;
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .mv-inline-nav a {
        color: var(--mv-text);
        text-decoration: none;
        font-family: 'Playfair Display', serif;
        font-size: 0.95rem;
        letter-spacing: 0.02em;
        transition: color 0.2s ease;
    }
    .mv-inline-nav a:hover,
    .mv-inline-nav li.active > a {
        color: var(--mv-purple-text);
    }
    /* Hamburger trigger is mobile-only once the inline nav takes over */
    #tt-ol-menu-trigger {
        display: none;
    }
    .mv-inline-nav .mv-nav-phone a {
        font-family: var(--mv-font-body);
        white-space: nowrap;
    }
    .mv-inline-nav .mv-nav-phone i {
        color: var(--mv-purple-text);
        margin-right: 6px;
    }
}

/* Phone number in the overlay menu, on the same row as the close "X" but
   left-aligned. Mirrors .tt-ol-menu-close's offsets (theme.css:1254-1267:
   top 40/right 60, top 20/right 30 at ≤992px); the X glyph is 28px tall with
   a 6px top offset, so a 40px-tall flex row shares its vertical center. */
#tt-overlay-menu .mv-ol-phone {
    position: absolute;
    top: 40px;
    left: 60px;
    height: 40px;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 9;
    color: #fff;
    font-size: 17px;
    text-decoration: none;
}
#tt-overlay-menu .mv-ol-phone i {
    color: var(--mv-purple-text);
}
#tt-overlay-menu .mv-ol-phone:hover,
#tt-overlay-menu .mv-ol-phone:focus {
    color: var(--mv-aqua);
}
@media (max-width: 992px) {
    #tt-overlay-menu .mv-ol-phone {
        top: 20px;
        left: 30px;
    }
}

/* Reset native <button> chrome so the "More" toggle matches the plain <a> links.
   Buttons don't pick up the ".mv-inline-nav a" color rule (not an <a>), so without
   an explicit color here it renders in the browser's default black button text —
   invisible against the dark header. */
.mv-inline-nav .dropdown-toggle {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    font-family: 'Playfair Display', serif;
    letter-spacing: inherit;
    color: var(--mv-text);
    cursor: pointer;
}
.mv-inline-nav .dropdown-toggle:hover,
.mv-inline-nav .dropdown-toggle:focus,
.mv-inline-nav li.dropdown.active .dropdown-toggle {
    color: var(--mv-purple-text);
}

/* Bootstrap's default dropdown-menu is light-themed; recolor the "More" flyout */
.mv-inline-nav .dropdown-menu {
    background-color: var(--mv-bg-alt);
    border: 1px solid var(--mv-border);
    padding: 0.5rem 0;
}
.mv-inline-nav .dropdown-item {
    color: var(--mv-text);
}
.mv-inline-nav .dropdown-item:hover,
.mv-inline-nav .dropdown-item:focus {
    /* Static fallback first for browsers without color-mix() support (pre-2023
       Chrome/Safari/Firefox) — invalid color-mix() there would otherwise drop
       the declaration entirely and the hover highlight would just vanish.
       color-mix() lets the admin's chosen highlight color (a plain solid hex,
       same as the other three accent colors) still render as a translucent
       wash here rather than a flat opaque block. */
    background-color: rgba(157, 0, 255, 0.15);
    background-color: color-mix(in srgb, var(--mv-menu-highlight) 15%, transparent);
    color: var(--mv-aqua);
}

#tt-overlay-menu {
    background-color: var(--mv-bg) !important;
}
#tt-overlay-menu::before {
    background-color: rgba(8, 8, 10, 0.9) !important;
}
.tt-ol-menu-list > li > a {
    color: var(--mv-text);
}
.tt-ol-menu-list > li.active > a,
.tt-ol-menu-list > li:hover > a,
.tt-ol-sub-menu a:hover {
    color: var(--mv-aqua);
}

/* theme.css:711 sets margin-top: 21px on #logo — nudged down slightly. */
#logo {
    margin-top: 25px;
}

/* Skip-to-content link — invisible until keyboard-focused (Bootstrap's
   .visually-hidden-focusable handles the show/hide), pinned above the
   fixed header (#header z-index tops out at 99999, theme.css:499) so it's
   never obscured. */
.skip-link:focus {
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 999999;
    padding: 12px 20px;
    background-color: var(--mv-bg, #08080a);
    color: #fff;
    border-radius: 4px;
    text-decoration: none;
}

/* ---- Hero slider static title ----
 * Stays fixed over every slide instead of rotating with the per-slide
 * caption (mirrors royaldreamevents.com's masthead: centered title + small
 * divider + "by L&L" subtitle, plain white text, over its own rotating
 * background). Centered via absolute + transform rather than flexbox since
 * .tt-hero-slider's only children are this and the owl-carousel itself. */
.tt-hero-slider .mv-hero-static-title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9;
    text-align: center;
    padding: 40px 60px;
    /* Guarantees contrast against bright hero photography — the
       text-shadow alone isn't reliable over light backgrounds. */
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 70%);
}
.tt-hero-slider .mv-hero-static-title-text {
    margin: 0;
    font-family: var(--mv-font-heading);
    font-weight: 700;
    font-style: italic;
    /* Matches css/styles.css:11331/11396 (.masthead-title) exactly: 3rem
       base, 5rem at >=992px. */
    font-size: 3rem;
    line-height: 3rem;
    color: #fff;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}
@media (min-width: 992px) {
    .tt-hero-slider .mv-hero-static-title-text {
        font-size: 5rem;
        line-height: 5rem;
    }
}
/* Mobile: the per-slide caption (.hero-slider-caption) is anchored to
   bottom: 10% (theme.css:1828), so a vertically-centered static title can
   grow tall enough (wrapped h1 + subtitle) to collide with it on short
   viewports. Anchor the title near the top instead of centering it, so it
   only grows downward and away from the bottom caption. */
@media (max-width: 768px) {
    .tt-hero-slider .mv-hero-static-title {
        top: 12%;
        transform: translate(-50%, 0);
        padding: 20px 30px 0;
    }
}
/* Matches theme.css:1906 (.hesl-caption-divider, the same divider the
   per-slide hero caption uses below its own title) exactly — same plain
   <div> pattern (not an <hr>, which would silently inherit Bootstrap's
   reboot "hr { opacity: 0.25 }" default and wash out the color) — just
   centered instead of left-aligned. */
.tt-hero-slider .mv-hero-static-divider {
    width: 35px;
    height: 4px;
    background-color: var(--mv-purple);
    margin: 25px auto;
}
/* .hesl-caption-subtitle is an <h2>, so it's swept into the h1-h6 rule
   above (font-family: var(--mv-font-heading) !important) despite not
   declaring a font-family of its own — match that rendered font here too,
   even though this is a <div>, not an <h2>. */
.tt-hero-slider .mv-hero-static-subtitle {
    font-family: var(--mv-font-heading);
    font-size: 1.25rem;
    color: #fff;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}
.tt-hero-slider .hesl-caption-title {
    font-size: 30px;
}

/* ---- Short viewports: keep the static title block (title + divider +
   "The Midnight Collection by Jade") clear of the header and of the
   bottom-anchored slide caption, without shrinking the title font.
   left:50% caps this absolutely-positioned box's shrink-to-fit width at half
   the hero, which wraps the title onto extra lines; max-content removes that
   cap. Pinned blocks sit below the header chrome (80px desktop nav; 64px
   mobile Menu button), and spacing/caption offsets tighten to make room.
   Measured on fresh page loads with every slide settled, using the live
   captions: clear of the header and >=16px above the caption at 320-1920px
   wide on real device shapes (portrait/landscape phones, tablets, desktops),
   320-900px tall; still >=11px in artificially narrow+short windows.
   Order matters: these must follow the base divider/caption rules above. */
@media (min-width: 769px) and (max-height: 900px) {
    .tt-hero-slider .mv-hero-static-title {
        width: max-content;
        max-width: calc(100% - 40px);
    }
}
@media (min-width: 769px) and (max-height: 760px) {
    .tt-hero-slider .mv-hero-static-title {
        top: 84px;
        transform: translate(-50%, 0);
        padding-top: 0;
    }
    .tt-hero-slider .mv-hero-static-divider {
        margin: 16px auto;
    }
    .tt-hero-slider .hero-slider-caption {
        bottom: 8%;
    }
}
@media (max-width: 768px) and (max-height: 700px) {
    .tt-hero-slider .mv-hero-static-title {
        width: max-content;
        max-width: calc(100% - 40px);
        top: max(12%, 66px);
        padding: 0 10px;
    }
    .tt-hero-slider .mv-hero-static-divider {
        margin: 8px auto;
    }
    .tt-hero-slider .hero-slider-caption {
        bottom: 7%;
    }
}
.tt-hero-slider .mv-hero-autoplay-toggle {
    position: absolute;
    bottom: 25px;
    right: 25px;
    z-index: 10;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.35);
    color: #fff;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
}
.tt-hero-slider .mv-hero-autoplay-toggle:hover,
.tt-hero-slider .mv-hero-autoplay-toggle:focus-visible {
    background: rgba(0, 0, 0, 0.6);
}

/* Text logo (replaces template's image logo) */
.mv-logo-text {
    font-family: var(--mv-font-heading);
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--mv-purple-text) !important;
    text-shadow: 0 0 12px rgba(157, 0, 255, 0.6);
    text-shadow: 0 0 12px color-mix(in srgb, var(--mv-purple) 60%, transparent);
    text-decoration: none;
}
.mv-logo-text-sm {
    font-size: 1.15rem;
}

/* Generic placeholder logo image in the top nav (header.php) — footer.php
   keeps its own .mv-logo-text mark, untouched. */
.mv-logo-mark {
    height: 40px;
    width: auto;
    display: block;
}

/* ---- Footer ---- */
#footer.tt-footer {
    background-color: var(--mv-bg-alt);
    border-top: 1px solid var(--mv-border);
    color: var(--mv-text-muted);
}
#footer .f-block-links a,
#footer .footer-simple-copyright a {
    color: var(--mv-text-muted);
}
#footer .f-block-links a:hover,
#footer .footer-simple-copyright a:hover {
    color: var(--mv-aqua);
}
#footer .btn-social-min {
    background-color: transparent;
    border: 1px solid var(--mv-border);
    color: var(--mv-text);
}
#footer .btn-social-min:hover {
    border-color: var(--mv-aqua);
    color: var(--mv-aqua);
}

/* ---- Forms ---- */
.form-control,
.form-select,
textarea.form-control {
    background-color: var(--mv-bg-alt);
    border-color: var(--mv-border);
    color: var(--mv-text);
}
.form-control:focus,
.form-select:focus {
    background-color: var(--mv-bg-alt);
    border-color: var(--mv-purple);
    color: var(--mv-text);
    box-shadow: 0 0 0 0.2rem rgba(157, 0, 255, 0.25);
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--mv-purple) 25%, transparent);
}
.form-control::placeholder {
    color: var(--mv-text-muted);
}

/* ---- Pink accent utility (aqua utility already provided by vendor via .text-main swap) ---- */
.text-aqua {
    color: var(--mv-aqua) !important;
}
.bg-aqua {
    background-color: var(--mv-aqua) !important;
}
.text-pink {
    color: var(--mv-pink) !important;
}
.bg-pink {
    background-color: var(--mv-pink) !important;
}

/* ---- Component-specific dark-theme fixes ----
 * theme.css is a light-mode template with many component-specific hardcoded
 * text colors (not just the swappable "main color"). Each rule below targets
 * a specific vendor selector confirmed (via grep) to set dark-on-dark or
 * near-invisible text against our dark page background.
 */

/* Contact form (tt-form-minimal): vendor sets focused input text to #222,
   which is invisible against our dark input background while typing. */
.tt-form-minimal .form-control:focus,
.tt-form-minimal .form-select:focus {
    color: var(--mv-text);
}

/* Portfolio single "Book Your Event" CTA: vendor .btn-primary sets #222
   text, which is hard to read on brand purple. */
.btn-primary.mv-cta-book,
.btn-primary.mv-cta-book:hover,
.btn-primary.mv-cta-book:focus {
    color: #fff;
    padding: 20px 34px;
    box-shadow: 0 0 24px color-mix(in srgb, var(--mv-purple) 45%, transparent);
}

/* Portfolio single info list (Event Type / Our Role / Deliverable etc.):
   vendor sets value text to #666 and linked values to #333. */
.portfolio-info-list .pi-list-cont {
    color: var(--mv-text-muted);
}
.portfolio-info-list .pi-list-cont a {
    color: var(--mv-text);
}

/* Related posts / news teaser titles: vendor sets title + link to #333. */
.related-posts-item .rp-item-title,
.related-posts-item .rp-item-title a {
    color: var(--mv-text);
}
.related-posts-item .rp-item-title a:hover {
    color: var(--mv-aqua);
}

/* Blog/news byline author link: vendor sets it to #333. */
.bs-meta-posted-by a {
    color: var(--mv-text);
}

/* Blog/news tags: vendor sets the "Tags:" label to #333 and tag chip text
   to #111 on a near-transparent chip background. */
.blog-single-tags span {
    color: var(--mv-text-muted);
}
.blog-single-tags a {
    color: var(--mv-text);
    background-color: rgba(157, 0, 255, 0.14);
    background-color: color-mix(in srgb, var(--mv-purple) 14%, transparent);
}
.blog-single-tags a:hover {
    color: #fff;
}

/* Portfolio single "All Projects" nav block: vendor hardcodes a light-gray
   card (#efefef) with black text, meant to contrast against sibling dark/
   purple nav blocks that we don't use here. */
.ps-nav-all {
    background-color: var(--mv-bg-alt);
}
.ps-nav-all .ps-nav-item {
    color: var(--mv-text);
}

/* ---- Accessibility (WCAG 2.2 AA + 1.4.6 enhanced contrast) ----
 * theme.css strips the focus outline from every link and button
 * (a:focus / button:focus / .btn:focus { outline: none }), leaving keyboard
 * users no way to see where they are (2.4.7). :focus-visible restores a ring
 * for keyboard focus only, so mouse clicks look the same as before. Each
 * selector matches the specificity of the theme.css rule it undoes and wins
 * by loading later; page-specific :focus-visible styles (quote-builder.css)
 * are more specific and keep their own look. Light-background pages set
 * --mv-focus-ring to a dark ink so the ring stays at least 3:1. */
:root {
    --mv-focus-ring: var(--mv-aqua);
}
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
[role='button']:focus-visible,
[tabindex]:focus-visible,
ul.isotope-filter-links > li > a:focus-visible,
.owl-carousel .owl-nav button.owl-prev:focus-visible,
.owl-carousel .owl-nav button.owl-next:focus-visible,
.owl-dots button.owl-dot:focus-visible,
.form-btn-inside button:focus-visible {
    outline: 3px solid var(--mv-focus-ring);
    outline-offset: 2px;
}
/* <main tabindex="-1"> is only focusable so the skip link can move focus
   into it; it doesn't need a ring around the whole page. */
#main-content:focus {
    outline: none;
}
.mm-page,
.mm-book {
    --mv-focus-ring: #0d4a6e;
}
.mv-book .panel,
.ct-page .ct-cuisine,
.ct-page .ct-bar-option,
.ct-page .ct-extra {
    --mv-focus-ring: #111;
}

/* Bootstrap's .text-muted (#888 here) is 5.6:1 on the dark background. */
.text-muted {
    color: var(--mv-text-muted) !important;
}

/* Carousel dots: 24x24px minimum touch target (2.5.8) without changing the
   visible dot size. */
.owl-dots button.owl-dot {
    min-width: 24px;
    min-height: 24px;
}

/* Giant decorative "ghost" words behind the About page split boxes. Drawn
   from data-ghost via ::before so they aren't page text: they're decoration
   by design (~1.1:1 contrast), and as real text they fail automated
   contrast scanners even with aria-hidden. */
.split-box-content-ghost::before {
    content: attr(data-ghost);
}

/* The header slides away on scroll; bring it back whenever something inside
   it (skip link, nav) has keyboard focus so focus is never hidden (2.4.11). */
#header.header-show-hide-on-scroll.fly-up:focus-within {
    transform: none;
}

/* Links inside running text need more than color to stand out from the
   surrounding text (1.4.1). */
#main-content p a:not([class]) {
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

/* Booking forms style focus on the field wrapper (the input itself has
   outline: 0); the faint border/glow change alone was as low as 2.5:1.
   theme.css also strips the outline from Bootstrap fields (contact form). */
.mv-bk .mv-bk-field:focus-within,
.mm-book .mm-field:focus-within,
.mv-book .field:focus-within,
.form-control:focus-visible,
.form-select:focus-visible {
    outline: 3px solid var(--mv-focus-ring);
    outline-offset: 2px;
}