/* ============================================================
   FIXES.CSS | every change to the staging stylesheets.
   style.css, pages-extra.css and pd-css.css are byte-for-byte copies
   of the staging files. This file loads after them (and before
   motion.css). Each block says what it fixes; CHANGES.md has the list.
   ============================================================ */


/* ------------------------------------------------------------
   Skip link (new): hidden until it has keyboard focus.
   ------------------------------------------------------------ */
.skip-link {
    position: absolute;
    left: 16px;
    top: -100px;
    z-index: 100001;
    padding: 10px 18px;
    border-radius: 4px;
    background: var(--panel-dark);
    color: var(--panel-ink);
    font-size: 14px;
    font-weight: 600;
}

.skip-link:focus {
    top: 16px;
}


/* ------------------------------------------------------------
   Focus ring on dark areas. The template's maroon outline is
   invisible on the dark panels (hero, page banners, header bar,
   mobile menu, CTA band, footer, modal intro), so use the light
   panel colour there.
   ------------------------------------------------------------ */
header a:focus-visible,
header button:focus-visible,
.hero a:focus-visible,
.pg-hero a:focus-visible,
.cta a:focus-visible,
footer a:focus-visible,
.enquire-modal__intro a:focus-visible,
.enquire-modal__close:focus-visible,
.skip-link:focus-visible {
    outline-color: var(--panel-ink);
}


/* ------------------------------------------------------------
   Header: the see-through fade under the bar no longer blocks
   clicks on the page underneath it.
   ------------------------------------------------------------ */
header {
    pointer-events: none;
}

header > .wrap {
    pointer-events: auto;
}


/* ------------------------------------------------------------
   Property pages: the header sits over the cream breadcrumb band,
   so it gets the solid dark bar from the first paint.
   With JavaScript the bar is motion.css's scrolled bar, shown from
   the start; it is 24px taller at the top of the page so the logo
   row stays centred, and settles to the normal bar once the page
   scrolls and motion.js moves the logo row up.
   ------------------------------------------------------------ */
html:not(.motion) .page-detail header {
    background: var(--panel-dark);
    padding-bottom: 26px;
}

html.motion .page-detail header::before {
    opacity: .97;
    height: calc(var(--mo-bar, 74px) + 24px);
    transition: opacity .4s ease, transform .5s var(--mo-ease, ease);
}

@media (prefers-reduced-motion: no-preference) {
    html.motion .page-detail header.mo-scrolled::before {
        transform: translate3d(0, -24px, 0);
    }
}


/* ------------------------------------------------------------
   Mobile menu (960px and below).
   The toggle was under the open panel (z-index without position),
   so the menu could not be closed. It now sits above the panel and
   turns into a close icon while the menu is open.
   ------------------------------------------------------------ */
.nav-toggle-close {
    display: none;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-open {
    display: none;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-close {
    display: block;
}

@media (max-width: 960px) {
    .nav-toggle {
        position: relative;
    }

    /* The closed panel is off screen; hide it from Tab and screen readers too. */
    nav ul {
        visibility: hidden;
        transition: transform .4s ease, visibility 0s linear .4s;
    }

    nav ul.open {
        visibility: visible;
        transition: transform .4s ease;
    }

    html.nav-open,
    html.nav-open body {
        overflow: hidden;
    }
}


/* ------------------------------------------------------------
   Without JavaScript (motion.js adds html.motion in <head>, so
   these rules never apply when scripts run).
   The header scrolls away with the page instead of sitting over
   cream sections, and on small screens the menu shows as a plain
   row of links because the toggle needs a script.
   ------------------------------------------------------------ */
html:not(.motion) header {
    position: absolute;
}

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

    html:not(.motion) header .wrap {
        flex-wrap: wrap;
        row-gap: 14px;
    }

    html:not(.motion) nav ul {
        position: static;
        height: auto;
        width: auto;
        transform: none;
        transition: none;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        padding: 0;
        gap: 12px 22px;
        background: none;
        border: 0;
        visibility: visible;
    }

    html:not(.motion) .page-detail .pd-breadcrumb-band {
        padding-top: 160px;
    }
}


/* ------------------------------------------------------------
   Breadcrumb side padding. pd-css.css set "padding: 20px 0",
   which removed the .wrap side padding, so the breadcrumb touched
   the screen edge below 1200px and sat 44px out of line above it.
   ------------------------------------------------------------ */
.wrap.pd-breadcrumb {
    padding-left: 44px;
    padding-right: 44px;
}

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


/* ------------------------------------------------------------
   Heading order. Some headings changed level so the outline no
   longer skips (h1, h2, h3). These rules copy the old sizes so
   nothing looks different.
   ------------------------------------------------------------ */
.value h2 {                     /* was .value h4 (home values) */
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px;
    color: var(--ink);
}

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

.prop-card h2 {                 /* Properties page cards (h3 elsewhere) */
    font-size: 23px;
    font-weight: 500;
    margin-bottom: 10px;
    color: var(--ink);
}

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

.ab-principle h3 {              /* was .ab-principle h4 (About) */
    font-size: 17.5px;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 10px;
}

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

.foot-col h2 {                  /* was .foot-col h5 */
    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;
}


/* ------------------------------------------------------------
   Suburb tiles: five real suburbs now (staging had six tiles that
   mixed suburbs and property names). The column count comes from
   the page (--hoods) so there is no empty slot, the photo is
   centred, and on phones an odd last tile spans the row.
   ------------------------------------------------------------ */
.hood-tile {
    background-position: center;
}

@media (min-width: 961px) {
    .hoods-grid {
        grid-template-columns: repeat(var(--hoods, 6), 1fr);
    }
}

@media (max-width: 640px) {
    .hoods-grid .hood-tile:last-child:nth-child(odd) {
        grid-column: span 2;
        aspect-ratio: 2 / 1;
    }
}

/* Tablets (641 to 960px): staging's three columns. With five tiles
   the second row had an empty slot, so the grid is split into six
   narrow columns: a full row of three tiles spans two columns each,
   and a last row of two (or one) spans the rest. The last row keeps
   the height of the rows above it (equal rows, no square ratio). */
@media (min-width: 641px) and (max-width: 960px) {
    .hoods-grid {
        grid-template-columns: repeat(6, 1fr);
        grid-auto-rows: 1fr;
    }

    .hoods-grid .hood-tile {
        grid-column: span 2;
    }

    .hoods-grid .hood-tile:nth-child(3n+4):nth-last-child(2),
    .hoods-grid .hood-tile:nth-child(3n+5):last-child {
        grid-column: span 3;
        aspect-ratio: auto;
    }

    .hoods-grid .hood-tile:nth-child(3n+4):last-child {
        grid-column: span 6;
        aspect-ratio: auto;
    }
}


/* ------------------------------------------------------------
   Properties page filter. Chips now filter with the hidden
   attribute (and work without JavaScript through ?suburb=).
   Cards that come back fade up with the template's own "rise".
   ------------------------------------------------------------ */
.pg-grid .prop-card[hidden] {
    display: none;
}

.pg-grid .prop-card.is-shown {
    animation: rise .6s ease both;
}

.pg-filters {
    scroll-margin-top: 110px;
}


/* ------------------------------------------------------------
   About banner. Staging's About page loaded pages-extra.css
   before style.css, so style.css's ".wrap { max-width }" won over
   pages-extra.css's ".pg-hero-inner { max-width: 700px }" and the
   banner text ran the full width from the left edge. This build
   loads style.css first on every page, so the About page gets the
   staging result back here. It is the only rule the two files
   disagree on for this page (every other computed style on the
   About page is the same in either order).
   ------------------------------------------------------------ */
.page-about .pg-hero-inner {
    max-width: var(--wrap);
}


/* ------------------------------------------------------------
   Page banner actions (404 page), reusing the hero button row.
   The solid button is maroon on the maroon banner, so it takes
   the white style of the CTA band's Instagram button instead.
   ------------------------------------------------------------ */
.pg-hero .hero-actions {
    margin-top: 34px;
}

.page-404 .pg-hero .btn-solid {
    background: #fff;
    color: var(--maroon);
    border-color: #fff;
}

.page-404 .pg-hero .btn-solid:hover {
    background: var(--bg);
    border-color: var(--bg);
    color: var(--maroon);
}


/* ------------------------------------------------------------
   Home hero video.
   Pause button (new, WCAG 2.2.2): a small round button in the
   bottom right corner. site.js shows it (it needs a script) and
   swaps the icon and label. Not shown when the video is hidden.
   With reduced motion the video is hidden (staging rule) and never
   downloads, so the banner shows the video's first frame instead,
   under the same tinted overlay.
   ------------------------------------------------------------ */
.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(46, 0, 11, 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(46, 0, 11, 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 {
        background: #500116 url("../img/homeVid-poster.jpg") center / cover no-repeat;
    }

    .hero-video-toggle {
        display: none;
    }
}


/* ------------------------------------------------------------
   Privacy page text (new page).
   ------------------------------------------------------------ */
.legal-section {
    background: var(--bg);
}

.legal {
    max-width: 720px;
}

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

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

.legal p,
.legal li {
    font-size: 15.5px;
    line-height: 1.7;
    color: var(--ink-dim);
}

.legal p + p,
.legal p + ul,
.legal ul + p {
    margin-top: 14px;
}

.legal ul {
    list-style: disc;
    padding-left: 22px;
}

.legal li + li {
    margin-top: 6px;
}

.legal a {
    color: var(--maroon);
    border-bottom: 1px solid currentColor;
}

.legal a:hover {
    color: var(--maroon-bright);
}

.legal-updated {
    margin-top: 44px;
    font-size: 13px;
    color: var(--ink-dim);
}


/* ------------------------------------------------------------
   About page with the stats strip hidden (fewer than two stats
   published): the story and "How we work" sections are both
   cream and now touch, so drop the doubled padding between them.
   The rule stops applying as soon as the strip is back.
   ------------------------------------------------------------ */
.ab-story + .ab-approach-section {
    padding-top: 0;
}


/* ------------------------------------------------------------
   Booking card (booking/assets/booking.css, loaded before this
   file). The staging card's fields were a <span> on the body's
   16px / 1.65 line; the module's date buttons and guests list are
   a few pixels shorter. Same line height, so the card keeps the
   staging proportions.
   ------------------------------------------------------------ */
.mb-card .mb-field .mb-value {
    line-height: 26.4px;
}

.mb-card .mb-guests select {
    height: 26.4px;
    line-height: 26.4px;
}


/* ------------------------------------------------------------
   Property page map: a Google map of the suburb in place of the
   staging placeholder (the pin and label it had). Taller than the
   placeholder so the map can be read; the tone colour shows while
   it loads. The note under it says the map is the neighbourhood.
   ------------------------------------------------------------ */
.pd-map {
    height: 320px;
}

.pd-map-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.pd-map-note {
    margin-top: 12px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--ink-dim);
}

.pd-map-note a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    white-space: nowrap;
}

.pd-map-note a:hover {
    color: var(--ink);
}

@media (max-width: 600px) {
    .pd-map {
        height: 260px;
    }
}

/* Footer credit: small and quiet, after the copyright line. */
.foot-copy .foot-credit {
    margin-left: 10px;
    color: rgba(255, 255, 255, 0.4);
    text-decoration: none;
    white-space: nowrap;
    transition: color .25s;
}

.foot-copy .foot-credit:hover {
    color: #fff;
}