/* ============================================================================
   components.css

   Supplies only what the removed libraries used to provide:
     - slick:     absolute positioning and cross-fade of the hero slides
     - WindowCheck(): the hero height and the vertical centring of the search panel
     - Bootstrap: .tab-pane show/hide

   Everything else (colours, type, spacing, the translucent search panel border)
   already lives in style.css and is untouched.
   ============================================================================ */

/* Page layout -------------------------------------------------------------- */

/* Sticky footer: the footer ends the document with nothing after it, whatever
   the content height. #headerWrapper is absolutely positioned so it stays out
   of flow; <header> takes its height from the 135px #headerWrapperSpacer. */
html {
    height: 100%;
}

body {
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

#mainContent {
    flex: 1 0 auto;
}

#footerWrapper {
    flex-shrink: 0;
}

/* Breathing room between the fixed header and the hero. */
#homeRotatorWrapper {
    margin-top: 20px;
}

/* .footerShareIcon is 28px against #footerRight at 14px — align to the bottom
   so they share a baseline rather than the text sitting at the top. */
#footerWrapper .columns {
    align-items: flex-end;
}

/* Hero rotator ------------------------------------------------------------- */

#homeRot {
    position: relative;
    height: 600px;
    overflow: hidden;
}

/* slick used to stack the slides absolutely and animate opacity. */
#homeRot .homeRotItem {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1s linear;
}

#homeRot .homeRotItem.is-active {
    opacity: 1;
}

/* Vertical centring of the search panel, replacing the JS `top` calculation.
   Deliberately margin-based rather than transform-based: animate.css sets
   animation-fill-mode: both, so fadeInDown's final translate3d(0, 0, 0) persists
   and would permanently override any transform declared here.
   style.css handles the horizontal centring via width: 750px / margin-left: -375px. */
#rotWrapperHomeTextWrapper {
    top: 0;
    bottom: 0;
    height: fit-content;
    margin-top: auto;
    margin-bottom: auto;
}

/* Mobile: viewport height less the header. svh rather than vh, which avoids
   the iOS address-bar jump that makes 100vh taller than the visible screen. */
@media screen and (max-width: 768px) {
    #homeRot {
        height: calc(100svh - 80px);
    }
}

/* Tab panes — previously provided by Bootstrap ----------------------------- */

.tab-content > .tab-pane {
    display: none;
}

.tab-content > .tab-pane.active {
    display: block;
}

/* Mobile nav --------------------------------------------------------------- */

#mobiNavWrapper.is-open {
    display: block;
}

/* Rent range slider -------------------------------------------------------- */
/* Replaces the jQuery UI slider. Two native range inputs stacked on one track:
   native rather than a div-drag implementation so keyboard and screen-reader
   support come for free. */

.rentSlider {
    position: relative;
    height: 28px;
}

.rentSliderTrack {
    position: absolute;
    top: 12px;
    left: 0;
    right: 0;
    height: 4px;
    background: #ddd9d1;
    border-radius: 2px;
}

.rentSliderFill {
    position: absolute;
    top: 0;
    bottom: 0;
    background: #a38e5c;
    border-radius: 2px;
}

/* pointer-events off on the input body, back on for the thumbs — otherwise the
   topmost input would swallow every drag and the lower handle would be stuck. */
.rentSlider input[type="range"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 28px;
    margin: 0;
    background: none;
    -webkit-appearance: none;
    appearance: none;
    pointer-events: none;
}

.rentSlider input[type="range"]::-webkit-slider-runnable-track,
.rentSlider input[type="range"]::-moz-range-track {
    background: none;
    border: 0;
}

.rentSlider input[type="range"]::-webkit-slider-thumb {
    pointer-events: auto;
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    margin-top: 5px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #a38e5c;
    cursor: pointer;
}

.rentSlider input[type="range"]::-moz-range-thumb {
    pointer-events: auto;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #a38e5c;
    cursor: pointer;
}

.rentSlider input[type="range"]:focus-visible::-webkit-slider-thumb {
    outline: 2px solid #313131;
    outline-offset: 2px;
}

/* Read more / read less ---------------------------------------------------- */
/* Replaces jquery-expander. Clamped by line count rather than the old 250-character
   slice, which keeps every card the same height regardless of wording. */

.expander {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

    .expander.is-open {
        display: block;
        -webkit-line-clamp: unset;
        overflow: visible;
    }

.expanderToggle {
    background: none;
    border: 0;
    padding: 4px 0;
    font: inherit;
    font-size: .9em;
    color: #a38e5c;
    cursor: pointer;
}

/* Lightbox ----------------------------------------------------------------- */
/* Replaces magnific-popup. A native <dialog>, which supplies focus trapping and
   Escape-to-close without any of it being written by hand. */

.lightbox {
    border: 0;
    padding: 0;
    background: transparent;
    max-width: 92vw;
    max-height: 92vh;
    overflow: visible;
}

    .lightbox::backdrop {
        background: rgba(0, 0, 0, .85);
    }

.lightboxImage {
    display: block;
    width: auto;
    height: auto;
    max-width: 92vw;
    max-height: 82vh;
}

.lightboxClose,
.lightboxNav {
    position: absolute;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    border: 0;
    cursor: pointer;
    line-height: 1;
}

.lightboxClose {
    top: -14px;
    right: -14px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 22px;
}

.lightboxNav {
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 64px;
    font-size: 30px;
}

.lightboxPrev {
    left: -52px;
}

.lightboxNext {
    right: -52px;
}

.lightboxCount {
    margin: 10px 0 0;
    text-align: center;
    color: #edeae3;
    font-size: 13px;
}

@media screen and (max-width: 768px) {
    .lightboxClose {
        top: 0;
        right: 0;
    }

    .lightboxPrev {
        left: 0;
    }

    .lightboxNext {
        right: 0;
    }
}

/* Controls that changed element type -------------------------------------- */
/* "Add To Compare" is a <button> where it used to be a <div>, and "Clear Search"
   is an <a> where it was a div with an onclick — both for keyboard access. These
   strip the default control styling so they still match their siblings. */

button.resultNav {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    text-align: inherit;
    cursor: pointer;
}

a.searchFormReset {
    display: block;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

/* Respect a stated preference for reduced motion --------------------------- */

@media (prefers-reduced-motion: reduce) {
    #homeRot .homeRotItem {
        transition: none;
    }
}

/* Visually hidden ---------------------------------------------------------- */
/* Keeps the page's <h1> in the accessibility tree and readable by search engines
   while taking it out of the visual design. Deliberately not display:none, which
   would hide it from screen readers and strip its heading value along with it. */

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Search map --------------------------------------------------------------- */
/* The map also gives .resultCompareHolder its backdrop — that element is
   position: absolute with top: -50px, so without something above the search bar
   it floats up into the header. */

#mapWrapper {
    width: 100%;
    height: 400px;
    margin-top: 20px;
}

@media screen and (max-width: 768px) {
    #mapWrapper {
        height: 260px;
    }
}

/* Info window ------------------------------------------------------------- */
/* Google builds the bubble's chrome from its own internal classes, so overriding
   them is the only way to reach it. These gm-* names are Google's, not ours: an
   API update can rename them, and the popup would fall back to Google's default
   styling rather than break outright. Everything below is defensive on that
   basis — no layout here depends on the overrides landing. */

/* Google sets max-height inline on the content div, which is what produced the
   scrollbar. The content below is sized to fit, so it can simply not scroll. */
.gm-style-iw-d {
    overflow: hidden !important;
    max-height: none !important;
}

/* Bubble padding moves inside .iWindow so the photo can run edge to edge. */
.gm-style-iw-c {
    padding: 0 !important;
    border-radius: 2px;
}

/* The header band holding the close button. Google gives it around 40px of its
   own; this trims it and pulls it back over the photo with a negative margin,
   which reclaims the whole band rather than just shrinking it. */
.gm-style-iw-chr {
    position: relative;
    z-index: 1;
    height: 26px;
    margin-bottom: -26px;
}

.gm-style-iw-ch {
    padding: 0 !important;
}

    .gm-style-iw-chr .gm-ui-hover-effect {
        width: 26px !important;
        height: 26px !important;
        margin: 2px !important;
        opacity: 1;
        background: rgba(255, 255, 255, .85) !important;
        border-radius: 50%;
    }

        .gm-style-iw-chr .gm-ui-hover-effect > span {
            width: 14px !important;
            height: 14px !important;
            margin: 6px !important;
        }

/* Sized so the whole card fits without scrolling: 120 photo + title + two text
   lines + link lands near 220px, well inside the bubble's natural height. */
.iWindow {
    width: 230px;
    padding-bottom: 10px;
    font-family: 'Raleway', Arial, Helvetica, sans-serif;
    font-size: 13px;
    line-height: 18px;
    color: #313131;
}

.iWindowPhoto {
    display: block;
    width: 100%;
    height: 120px;
    object-fit: cover;
    margin-bottom: 8px;
}

.iWindowTitle {
    padding: 0 12px;
    font-family: 'Oswald-Medium', Arial, Helvetica, sans-serif;
    font-size: 15px;
    line-height: 20px;
}

.iWindowText {
    padding: 0 12px;
}

.iWindowLink {
    display: inline-block;
    margin-top: 6px;
    padding: 0 12px;
    color: #a38e5c;
    text-decoration: none;
}

/* Search result spacing ---------------------------------------------------- */
/* style.css already sets this page's vertical rhythm. Bulma then pads every
   .column by .75rem on all four sides, so the two systems stack and the rows
   read loose. Drop Bulma's vertical padding here and keep its horizontal gutter,
   which is what stops the photo butting against the text beside it. */

#searchWrapper .column,
.searchPad > .column,
.searchPad .columns > .column,
.searchHRRow > .column {
    padding-top: 0;
    padding-bottom: 0;
}

.searchPad {
    padding-top: 16px;
    padding-bottom: 16px;
}

/* Uniform result-row width.
   The inner row is a flex container, which makes it a block formatting context.
   A BFC box refuses to overlap the floats in the title above it, so instead of
   filling its parent it collapsed to fit-content — and fit-content tracks the
   longest unbreakable line, which is the street address. That is why every row
   came out a different width and why the action links wrapped to two lines on
   some rows and not others. A definite width stops it being content-driven;
   clear ends the float interaction that caused it. Measured: all rows now land
   on the same 727.91px inner / 485.27px text column. */
.resultBody {
    clear: both;
    width: 100%;
}

/* The three action links, centred under the description. At 18px inherited from
   style.css they were wider than the column and spilled sideways under the rent
   panel; 14px with fa-lg icons fits all three on one line. Wrap stays enabled as
   the narrow-screen safety valve — nowrap is what made the overflow visible
   instead of letting them stack. */
.resultNavWrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px 16px;
    font-size: 14px;
    line-height: 24px;
    margin-bottom: 8px;
}

    .resultNavWrapper .resultNav {
        float: none;
        margin-right: 0;
        margin-bottom: 0;
        white-space: nowrap;
    }

.resultViewMap a {
    font-family: 'Raleway', Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #a38e5c;
    text-decoration: none;
}

/* Compare -------------------------------------------------------------------
   Properties are columns and attributes are rows, so every value sits on a
   common line. The legacy page used a grid of self-contained cards, which meant
   nothing lined up across properties — the one thing a comparison has to do. */

.compareTableWrapper {
    overflow-x: auto;
    margin-top: 20px;
}

.compareTable {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Raleway', Arial, Helvetica, sans-serif;
    font-size: 15px;
    color: #313131;
}

    .compareTable th,
    .compareTable td {
        padding: 10px 14px;
        text-align: left;
        vertical-align: top;
        border-bottom: 1px solid #d6d6d6;
    }

    /* The attribute labels down the left. Narrow and fixed so the property
       columns share the remaining width evenly however long the values are —
       the same content-driven-width trap the search rows fell into. */
    .compareTable tbody th[scope="row"] {
        width: 150px;
        font-family: 'Oswald-Medium', Arial, Helvetica, sans-serif;
        font-weight: normal;
        white-space: nowrap;
        background: #f7f6f3;
    }

    .compareTable thead th {
        width: auto;
        border-bottom: 1px solid #d6d6d6;
    }

    .compareTable .compareCorner {
        width: 150px;
        border-bottom: 1px solid #d6d6d6;
    }

.compareName {
    margin-top: 8px;
    font-family: 'Oswald-Medium', Arial, Helvetica, sans-serif;
    font-size: 19px;
    line-height: 24px;
}

.comparePicHolder {
    position: relative;
    box-sizing: border-box;
    border: 1px solid #d6d6d6;
    width: 100%;
}

.compareResize {
    display: block;
    width: 100%;
    height: auto;
}

.compareRent {
    font-family: 'Oswald-Medium', Arial, Helvetica, sans-serif;
    font-size: 17px;
}

.compareSocial {
    display: flex;
    gap: 12px;
    font-size: 18px;
}

    .compareSocial a {
        color: #313131;
    }

.compareNavWrapper {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.compareNav {
    color: #313131;
    text-decoration: none;
    white-space: nowrap;
}

    .compareNav:hover {
        color: #a38e5c;
    }

.compareEmpty {
    text-align: center;
    padding: 60px 20px;
}

.compareActions {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin: 24px 0 40px;
}

.compareBtnInt {
    display: inline-block;
    padding: 10px 22px;
    background: #a38e5c;
    border: 0;
    color: #fff;
    font-family: 'Oswald-Medium', Arial, Helvetica, sans-serif;
    font-size: 15px;
    text-decoration: none;
    cursor: pointer;
}

    .compareBtnInt:hover {
        background: #8a7749;
        color: #fff;
    }

/* Compare cap -------------------------------------------------------------- */
/* Search's Add To Compare buttons past the limit. aria-disabled rather than the
   disabled attribute: the button keeps its place in the tab order and its title
   explains why it does nothing, instead of silently vanishing from the page. */

.compareClick[aria-disabled="true"] {
    opacity: .45;
    cursor: not-allowed;
}

/* Print -------------------------------------------------------------------- */
/* Replaces the legacy PrintView page, which was a 370-line duplicate of Compare
   with Layout = null and its own inlined <head>. One page, one set of markup. */

@media print {
    #headerWrapper,
    #headerWrapperSpacer,
    #footerWrapper,
    #navWrapper,
    #mobiNavWrapper,
    #mapWrapper,
    .noPrint,
    .resultNavPhoto {
        display: none !important;
    }

    body {
        background: #fff;
        color: #000;
    }

    .compareTableWrapper {
        overflow-x: visible;
        margin-top: 0;
    }

    .compareTable {
        font-size: 11pt;
    }

        /* Keep a property's column intact across a page break rather than
           splitting a row's cells over two sheets. */
        .compareTable tr {
            page-break-inside: avoid;
        }

        .compareTable tbody th[scope="row"] {
            background: none;
        }

    a[href]::after {
        content: none;
    }
}

/* Privacy policy page ------------------------------------------------------ */

.policyWrapper {
    max-width: 820px;      /* ~75 characters — long legal prose needs a measure */
    margin: 30px auto 50px;
    padding: 0 20px;
    font-family: 'Raleway', Arial, Helvetica, sans-serif;
    font-size: 15px;
    line-height: 24px;
    color: #313131;
}

    .policyWrapper p {
        margin-bottom: 18px;
    }

.policyTitle {
    font-family: 'Oswald-Medium', Arial, Helvetica, sans-serif;
    font-size: 30px;
    line-height: 38px;
    margin-bottom: 20px;
}

.cookieChoices {
    margin-top: 40px;
    padding: 24px;
    border: 1px solid #d6d6d6;
    background: #f7f6f3;
    scroll-margin-top: 150px;   /* clears the fixed header when linked to by #cookies */
}

    .cookieChoices h2 {
        font-family: 'Oswald-Medium', Arial, Helvetica, sans-serif;
        font-size: 22px;
        line-height: 28px;
        margin-bottom: 14px;
    }

.cookieStatus {
    padding: 12px 14px;
    background: #fff;
    border-left: 3px solid #a38e5c;
}

.cookieSaved {
    padding: 10px 14px;
    background: #eaf3ea;
    border-left: 3px solid #4a7c4a;
}

.cookieForm {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 16px;
}

.cookieDeny {
    background: #6b6b6b;
}

    .cookieDeny:hover {
        background: #545454;
    }

/* Footer links ------------------------------------------------------------- */

.footerLinks {
    margin-top: 6px;
    font-size: 13px;
}

    .footerLinks a {
        color: inherit;
        text-decoration: underline;
    }

    .footerLinks span {
        margin: 0 6px;
        opacity: .6;
    }

/* First-visit cookie banner ------------------------------------------------ */
/* z-index clears #headerWrapper, which sits at 10. Fixed to the bottom rather
   than the top so it never covers the logo or nav. */

.cookieBanner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 200;
    background: rgba(49, 49, 49, .97);
    color: #f2f0eb;
    font-family: 'Raleway', Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 20px;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, .25);
}

.cookieBannerInner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
    max-width: 1265px;
    margin: 0 auto;
    padding: 14px 20px;
}

.cookieBannerText {
    flex: 1 1 320px;
    margin: 0;
}

    .cookieBannerText a {
        color: #d8c9a3;
        text-decoration: underline;
    }

.cookieBannerForm {
    display: flex;
    flex-shrink: 0;
    gap: 10px;
}

.cookieBannerBtn {
    padding: 8px 18px;
    background: #a38e5c;
    border: 0;
    color: #fff;
    font-family: 'Oswald-Medium', Arial, Helvetica, sans-serif;
    font-size: 14px;
    white-space: nowrap;
    cursor: pointer;
}

    .cookieBannerBtn:hover {
        background: #8a7749;
    }

.cookieBannerBtnDeny {
    background: none;
    border: 1px solid #8d8d8d;
}

    .cookieBannerBtnDeny:hover {
        background: #4a4a4a;
    }

/* The banner is fixed, so without this it would sit on top of the last of the
   footer for anyone who ignores it rather than answering. */
.hasCookieBanner #footerWrapper {
    padding-bottom: 90px;
}

@media screen and (max-width: 768px) {
    .hasCookieBanner #footerWrapper {
        padding-bottom: 140px;
    }
}

@media print {
    .cookieBanner {
        display: none !important;
    }

    .hasCookieBanner #footerWrapper {
        padding-bottom: 0;
    }
}