/* ============================================================
   fixes.css | every CSS change from the staging design lives here.
   style.css and pages-extra.css are the staging files, byte for byte.
   Load order: style.css, pages-extra.css, fixes.css, motion.css.
   Each block says what it fixes; CHANGES.md has the full list.
   ============================================================ */

/* ---------- 1. Heading levels ----------
   Headings were re-levelled for a correct outline (h1 > h2 > h3, no skips).
   These rules copy the staging rules for the old tags so nothing looks different. */

/* home values: h4 -> h2 (copy of .value h4) */
.value h2 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px;
    color: var(--ink);
}

/* home "What's included": h4 -> h3 (copy of .am-item h4) */
.am-item h3 {
    font-size: 15.5px;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--ink);
}

/* properties page cards sit straight under the h1: h3 -> h2 (copy of .prop-card h3) */
.prop-card h2 {
    font-size: 23px;
    font-weight: 500;
    margin-bottom: 10px;
    color: var(--ink);
}

/* properties page note: h4 -> h2 (copy of .pg-note h4) */
.pg-note h2 {
    font-family: var(--display);
    font-size: 21px;
    font-weight: 500;
    color: var(--ink);
    margin-bottom: 10px;
}

/* about principles: h4 -> h3 (copy of .ab-principle h4) */
.ab-principle h3 {
    font-size: 17.5px;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 10px;
}

/* property page sections: h3 -> h2 (copy of .pd-section h3) */
.pd-section h2 {
    font-size: 20px;
    font-weight: 500;
    color: var(--ink);
    margin-bottom: 20px;
}

/* footer column headings: h5 -> h2 (copy of .foot-col h5, and undo the display font h2 gets) */
.foot-col h2 {
    font-family: var(--sans);
    font-size: 12px;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 18px;
    font-weight: 600;
}

/* ---------- 2. Header ---------- */

/* The header's transparent lower padding no longer blocks clicks on what sits under it
   (the top of the property page breadcrumb was unclickable on phones). */
header {
    pointer-events: none;
}

header .wrap {
    pointer-events: auto;
}

/* ...but the solid bar itself still catches clicks, so nothing hidden under it can be clicked by accident. */
html.motion header.mo-scrolled::before,
html.motion header.is-solid::before {
    pointer-events: auto;
}

/* Mobile menu: the open panel covered its own button, so it could not be closed.
   z-index only works on a positioned element. */
@media (max-width: 960px) {
    .nav-toggle {
        position: relative;
    }
}

/* Property page: the breadcrumb band is cream, so the dark header bar shows from first paint
   (motion.js adds the same bar on every page once you scroll). The two variables are
   first-paint values; motion.js measures the real ones straight after. */
header.is-solid {
    --mo-bar: 83px;
    --mo-shift: -8px;
}

html.motion header.is-solid::before {
    opacity: .97;
}

@media (prefers-reduced-motion: no-preference) and (min-width: 961px) {
    html.motion header.is-solid > .wrap {
        transform: translate3d(0, var(--mo-shift, -8px), 0);
    }
}

@media (prefers-reduced-motion: no-preference) and (max-width: 960px) {
    html.motion header.is-solid .logo,
    html.motion header.is-solid .nav-toggle {
        transform: translate3d(0, var(--mo-shift, -8px), 0);
    }
}

/* No motion layer (JavaScript off, or motion.js failed): a solid header everywhere,
   so the white links never sit on cream. Same size as the motion layer's bar. */
html:not(.motion) header {
    background: var(--panel-dark);
    padding: 14px 0;
    pointer-events: auto;
}

/* ---------- 3. Property page breadcrumb ----------
   .pd-breadcrumb { padding: 20px 0 } wiped the .wrap side padding (text touched the screen
   edge on phones and sat 44px left of the grid on desktop). */
.wrap.pd-breadcrumb {
    padding: 20px 44px;
}

@media (max-width: 960px) {
    .wrap.pd-breadcrumb {
        padding: 20px 24px;
    }
}

/* ---------- 4. Card photos fill the frame ----------
   Card images were not object-fit, so wide cards showed coloured bars beside the photo. */
.prop-photo .prop-photo-tag img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Filtered out by the properties page chips */
.prop-card[hidden] {
    display: none;
}

/* ---------- 5. Footer privacy link and the modal's privacy line ---------- */
.foot-bottom .foot-legal {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.55);
    transition: color .25s;
}

.foot-bottom .foot-legal:hover {
    color: #fff;
}

.enquire-privacy a {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* The close control is a link (so it also works without JavaScript) */
a.enquire-close {
    display: block;
}

/* ---------- 6. Without JavaScript ----------
   site.js adds class "js" to <html> in <head>. Without it:
   - Enquire links go to #enquireModal and the form shows via :target (the close link goes to #enquire);
   - the phone menu shows as a plain row of links instead of a slide-out panel. */
html:not(.js) .enquire-modal:target {
    visibility: visible;
    opacity: 1;
}

html:not(.js) .enquire-modal:target .enquire-dialog {
    transform: none;
}

@media (max-width: 960px) {
    html:not(.js) .nav-toggle {
        display: none;
    }

    html:not(.js) header .wrap {
        flex-wrap: wrap;
        gap: 10px 16px;
    }

    html:not(.js) nav ul {
        position: static;
        transform: none;
        height: auto;
        width: auto;
        background: none;
        border: 0;
        padding: 0;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px 18px;
    }
}

/* ---------- 7. New pages: privacy and 404 ---------- */
.pg-hero-actions {
    margin-top: 32px;
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.pv-section {
    background: var(--bg);
}

.pv-copy {
    max-width: 680px;
}

.pv-copy h2 {
    font-size: clamp(22px, 2.4vw, 26px);
    line-height: 1.3;
    color: var(--ink);
    margin: 44px 0 4px;
}

.pv-copy h2:first-child {
    margin-top: 0;
}

.pv-copy p {
    margin-top: 12px;
    font-size: 15.5px;
    color: var(--ink-dim);
    max-width: 620px;
}

.pv-copy a {
    color: var(--brown);
    border-bottom: 1px solid currentColor;
}

.pv-copy .pv-updated {
    margin-top: 44px;
    font-size: 13px;
}

.pv-copy a[href^="tel:"] {
    white-space: nowrap;
}

/* ---------- 8. Booking card (booking/assets/booking.css builds on the staging .pd-card) ----------
   The card's date fields are buttons and its guests field is a real list, so their text no longer sits
   in a 16px line as the staging <span>s did, and each row came out 3px shorter than staging.
   These put the staging row heights back (16px x 1.65 line height). booking.css loads after this file,
   hence the extra .pd-card in each selector. */
.pd-card.mb-card .mb-field .mb-value {
    line-height: calc(16px * 1.65);
}

.pd-card.mb-card .mb-guests select {
    height: calc(16px * 1.65);
    line-height: normal;
}

/* ---------- 9. Stats strip and reviews when only some are published ----------
   Content policy 2d: only published stats and reviews are shown. Staging's strip is a fixed four-column
   grid and its reviews a two-column grid, so two or three stats sat in the left of the strip, and a single
   (or third) review left an empty grey cell beside it. With four stats or two reviews, as on staging,
   nothing changes. about.php adds ab-stats-2 or ab-stats-3 when fewer than four stats are published. */
@media (min-width: 769px) {
    .ab-stats.ab-stats-2 {
        grid-template-columns: repeat(2, 1fr);
    }

    .ab-stats.ab-stats-3 {
        grid-template-columns: repeat(3, 1fr);
    }
}

.voice-grid > .voice:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}


/* ------------------------------------------------------------
   Home hero video: pause button (new, WCAG 2.2.2), the same as the
   Myora site. A small round button in the bottom right corner.
   site.js shows it once the video plays and swaps icon and label.
   Never shown with reduced motion or Save-Data, when motion.js
   holds the video still on its poster.
   ------------------------------------------------------------ */
.hero-video-toggle {
    position: absolute;
    right: 24px;
    bottom: 24px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 50%;
    background: rgba(31, 18, 4, 0.35);
    color: #fff;
    cursor: pointer;
    opacity: .75;
    transition: opacity .25s ease, background .25s ease;
}

.hero-video-toggle:hover,
.hero-video-toggle:focus-visible {
    opacity: 1;
    background: rgba(31, 18, 4, 0.6);
}

.hero-video-toggle:focus-visible {
    outline-color: var(--panel-ink);
}

.hero-video-toggle[hidden] {
    display: none;
}

.hero-video-toggle svg {
    width: 14px;
    height: 14px;
}

.hero-video-toggle .hero-video-play,
.hero-video-toggle.is-paused .hero-video-pause {
    display: none;
}

.hero-video-toggle.is-paused .hero-video-play {
    display: block;
}

@media (min-width: 961px) {
    .hero-video-toggle {
        right: 44px;
        bottom: 36px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-video-toggle {
        display: none;
    }
}