/* ==========================================================================
   Regis — Global refresh
   --------------------------------------------------------------------------
   Brings the main site's shared content blocks into line with the newer page
   templates (Home Care). Loaded AFTER app.css and custom-style.css so it wins
   on equal specificity.

   Scope: .two-column-content — the shared block used on
   /aged-care-facilities/, /careers/, /costs-and-fees/, /live-with-us/,
   /aged-care-services-why-regis/ and the location pages.

   Reference values taken from style-home-care-new.css:
     section heading  Formata 400 / 30px / #1c1c1c   (24px under 640px)
     body copy        18px / #333                    (16px under 640px)
     corner radius    16px (the dominant value on the new pages)

   Deliberately NOT changed here — raise in the design audit instead:
     - body typeface stays Helvetica Neue (new pages use Formata throughout)
     - cards are not rounded
     - .map-area / .residence-map untouched
   ========================================================================== */


/* --- Images ------------------------------------------------------------- */

.two-column-content > .grid-x {
    align-items: stretch;
}

.two-column-content .img-area {
    position: relative;
    min-height: 280px;
}

.two-column-content .img-area img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 16px;
}


/* --- Block rhythm ------------------------------------------------------- */

/* The Customizer (#wp-custom-css) sets div.two-column-content to 15px, which
   outspecifies a bare class. Matched with body+div to win, and kept modest —
   these pages carry 6-8 blocks and are already ~6300px tall. */
body div.two-column-content {
    padding-top: 2rem;
    padding-bottom: 2rem;
}


/* --- Section headings --------------------------------------------------- */

.two-column-content .txt-area h2,
.two-column-content .txt-area-full h2 {
    font-family: Formata, Tahoma, Arial, Helvetica, sans-serif;
    font-weight: 400;
    font-size: 1.875rem;
    line-height: 1.25;
    letter-spacing: 0.02em;
    color: #1c1c1c;
    margin-bottom: 20px;
}

.two-column-content .txt-area h3,
.two-column-content .txt-area-full h3 {
    font-family: Formata, Tahoma, Arial, Helvetica, sans-serif;
    font-weight: 600;
    font-size: 1.25rem;
    line-height: 1.35;
    letter-spacing: 0;
    color: #1c1c1c;
    margin-bottom: 12px;
}


/* --- Body copy ---------------------------------------------------------- */

.two-column-content .txt-area p,
.two-column-content .txt-area li,
.two-column-content .txt-area-full p,
.two-column-content .txt-area-full li {
    font-size: 1.125rem;
    line-height: 1.55;
    letter-spacing: 0;
    color: #333333;
}


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

@media screen and (max-width: 640px) {

    body div.two-column-content {
        padding-top: 1.25rem;
        padding-bottom: 1.25rem;
    }

    .two-column-content .txt-area h2,
    .two-column-content .txt-area-full h2 {
        font-size: 1.5rem;
    }

    .two-column-content .txt-area p,
    .two-column-content .txt-area li,
    .two-column-content .txt-area-full p,
    .two-column-content .txt-area-full li {
        font-size: 1rem;
    }

    .two-column-content .img-area {
        min-height: 0;
    }

    .two-column-content .img-area img {
        position: static;
        width: 100%;
        height: auto;
        border-radius: 12px;
    }
}


/* ==========================================================================
   Location pages  (state pages = .parent-locations, index pages = .page-locations)
   --------------------------------------------------------------------------
   These pages use .centered-content, not .two-column-content: one narrow
   centred column (medium-8 medium-offset-2) with the heading, image, copy and
   CTA all stacked. That pushes the residence cards a long way down the page.

   Below: widen only the block that contains an image, and float the image
   beside the copy so the cards move up. Other .centered-content blocks on
   these pages (the button rows and the "Our X Locations" heading) are left
   alone. Stacks again under 640px.
   ========================================================================== */

/* Grey search panel flush under the banner (was an 80px margin plus a
   duplicate ENQUIRE NOW row above it; the same CTA sits at the foot of the page). */

:is(.parent-locations, .page-locations) .content > .centered-content:first-of-type {
    display: none;
}

:is(.parent-locations, .page-locations) .outer-find-panel {
    margin-top: 0;
}

:is(.parent-locations, .page-locations) .content {
    margin-top: 0;
}

/* .banner.interior carries a 60px margin-bottom site-wide. Drop it so the grey
   search panel sits flush under the banner - but NOT where a .cta-panel follows
   (the state sub-nav on the home-care locations pages). That panel has a deliberate
   margin-top of -60px designed to tuck into the banner's margin; removing the margin
   there pulls it up over the banner heading. */
:is(.parent-locations, .page-locations) .banner.interior:not(:has(+ .cta-panel)) {
    margin-bottom: 0;
}

/* Full-bleed grey behind the search panel (per the Figma), with the controls
   still constrained to the 1200px container. */
:is(.parent-locations, .page-locations) .outer-find-panel {
    max-width: none;
    width: 100%;
    background-color: #efefef;
}

:is(.parent-locations, .page-locations) .outer-find-panel > .cell {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

:is(.parent-locations, .page-locations) .outer-find-panel fieldset {
    background-color: transparent;
}

:is(.parent-locations, .page-locations) .banner.interior + .content,
:is(.parent-locations, .page-locations) .banner-slim + .content {
    margin-top: 0;
    padding-top: 0;
}

/* the copy column reads left, not centred like the button rows */
:is(.parent-locations, .page-locations) .centered-content:has(img) > .grid-x > .cell.medium-8,
:is(.parent-locations, .page-locations) .centered-content:has(img) > .grid-x > .cell.medium-8 > * {
    text-align: left;
}

/* Copy block: image left, heading + copy + CTA right.
   The heading precedes the image in source order, so a float would leave it
   full-width above. Positioning the image instead lets every text element flow
   in the right-hand column in order, and height:100% makes the image track the
   text column automatically however many paragraphs a page has. */

:is(.parent-locations, .page-locations) .centered-content:has(img) > .grid-x > .cell.medium-8 {
    position: relative;
    width: 100%;
    max-width: none;
    flex: 0 0 100%;
    min-height: 340px;
    padding-left: 52%;
}

:is(.parent-locations, .page-locations) .centered-content:has(img) > .grid-x > .cell.medium-offset-2 {
    margin-left: 0;
}

:is(.parent-locations, .page-locations) .centered-content:has(img) p:has(> img) {
    position: absolute;
    left: 0;
    top: 0;
    width: 46%;
    height: 100%;
    margin: 0;
}

:is(.parent-locations, .page-locations) .centered-content:has(img) p > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 16px;
}

/* breathing room before the locations grid */
:is(.parent-locations, .page-locations) .centered-content:has(img) {
    padding-bottom: 3rem;
}

@media screen and (max-width: 640px) {

    :is(.parent-locations, .page-locations) .centered-content:has(img) > .grid-x > .cell.medium-8 {
        padding-left: 0;
        min-height: 0;
    }

    :is(.parent-locations, .page-locations) .centered-content:has(img) p:has(> img) {
        position: static;
        width: 100%;
        height: auto;
        margin: 0 0 1.25rem 0;
    }

    :is(.parent-locations, .page-locations) .centered-content:has(img) p > img {
        height: auto;
        border-radius: 12px;
    }

    :is(.parent-locations, .page-locations) .centered-content:has(img) {
        padding-bottom: 2rem;
    }
}


/* --- Type scale on location pages ---------------------------------------- */
/* .centered-content appears ONLY on location pages (residential state pages
   and /home-care/locations/), so this is safe to target directly. Same values
   as the .two-column-content rules above: was 26px/700/#58585b. */

.centered-content h2 {
    font-family: Formata, Tahoma, Arial, Helvetica, sans-serif;
    font-weight: 400;
    font-size: 1.875rem;
    line-height: 1.25;
    letter-spacing: 0.02em;
    color: #1c1c1c;
    margin-bottom: 20px;
}

.centered-content p,
.centered-content li {
    font-size: 1.125rem;
    line-height: 1.55;
    letter-spacing: 0;
    color: #333333;
}

@media screen and (max-width: 640px) {

    .centered-content h2 { font-size: 1.5rem; }

    .centered-content p,
    .centered-content li { font-size: 1rem; }
}


/* --- Plain text pages ----------------------------------------------------- */
/* A third content wrapper: section.content > div.grid-container.content, used on
   /about-regis/, /short-term-care/ and /retirement-villages/ for straight copy with
   no image block. These pages were left on the old scale (16px / #58585b) while
   block-based pages moved to 18px / #333, which is the inconsistency between pages.
   Same values as the two blocks above. */

.grid-container.content h2 {
    font-family: Formata, Tahoma, Arial, Helvetica, sans-serif;
    font-weight: 400;
    font-size: 1.875rem;
    line-height: 1.25;
    letter-spacing: 0.02em;
    color: #1c1c1c;
    margin-bottom: 20px;
}

.grid-container.content h3 {
    font-family: Formata, Tahoma, Arial, Helvetica, sans-serif;
    font-weight: 600;
    font-size: 1.25rem;
    line-height: 1.35;
    letter-spacing: 0;
    color: #1c1c1c;
    margin-bottom: 12px;
}

.grid-container.content p,
.grid-container.content li {
    font-size: 1.125rem;
    line-height: 1.55;
    letter-spacing: 0;
    color: #333333;
}

@media screen and (max-width: 640px) {

    .grid-container.content h2 { font-size: 1.5rem; }

    .grid-container.content p,
    .grid-container.content li { font-size: 1rem; }
}


/* --- Body typeface -------------------------------------------------------- */
/* Formata is a signage face (Spiekermann, 1984) - legible, but designed for print
   and wayfinding rather than screen paragraphs. Body copy moves to Open Sans, which
   is screen-hinted; headings stay Formata so the brand voice is unchanged.
   This also resolves an existing split where body was Helvetica Neue site-wide but
   Formata inside content blocks. */

.two-column-content .txt-area p,
.two-column-content .txt-area li,
.two-column-content .txt-area-full p,
.two-column-content .txt-area-full li,
.centered-content p,
.centered-content li,
.grid-container.content p,
.grid-container.content li {
    font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* --- Hierarchy correction -------------------------------------------------- */
/* h3 at 20px over 18px body is a 1.11x step, which does not register as a level.
   22px gives a legible sub-heading against the 30px section head. */

.two-column-content .txt-area h3,
.two-column-content .txt-area-full h3,
.grid-container.content h3 {
    font-size: 1.375rem;
}

@media screen and (max-width: 640px) {

    .two-column-content .txt-area h3,
    .two-column-content .txt-area-full h3,
    .grid-container.content h3 {
        font-size: 1.1875rem;
    }
}


/* --- Page-title hierarchy -------------------------------------------------- */
/* Interior templates render the banner H1 at 30px — identical to the section H2,
   so a sighted reader cannot tell page title from section heading. Landing pages
   are 40px and stay. Bespoke hero headings (the .rhc-* home care template) are a
   separate component and are deliberately untouched. */

.interior .banner .heading-secondary,
.interior .banner h1 {
    font-size: 2.125rem;   /* 34px — clears the 30px H2 */
    line-height: 1.2;
}

.landing .banner .heading-secondary,
.landing .banner h1 {
    font-size: 2.5rem;     /* 40px — unchanged, stated for the record */
    line-height: 1.2;
}

@media screen and (max-width: 640px) {

    .interior .banner .heading-secondary,
    .interior .banner h1 { font-size: 1.75rem; }   /* 28px */

    .landing .banner .heading-secondary,
    .landing .banner h1 { font-size: 2rem; }       /* 32px */
}


/* --- Form controls --------------------------------------------------------- */
/* Search and enquiry inputs render at 14px. Anything under 16px makes iOS Safari
   auto-zoom the whole page on focus, which is disorienting and hard to undo —
   worse for the older readers this site is built for. 16px is the floor. */

.outer-find-panel input[type="text"],
.outer-find-panel input[type="search"],
.outer-find-panel select,
.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="number"],
.gform_wrapper select,
.gform_wrapper textarea {
    font-size: 1rem;   /* 16px */
}


/* --- Tap targets ----------------------------------------------------------- */
/* WCAG 2.2 SC 2.5.8 asks for 24x24 CSS px minimum. The header phone link already
   clears it; this guarantees the floor for tel: links elsewhere (footer, banners,
   in-copy) where they can render as plain inline text. */

a[href^="tel:"] {
    display: inline-block;
    min-height: 24px;
    line-height: 24px;
}


/* ==========================================================================
   Residential Care parent page  (/aged-care-facilities/)
   --------------------------------------------------------------------------
   Presentation alignment with the Home Care template — NOT the full rebuild.
   Scoped to .page-aged-care-facilities so the other landing-template pages
   (/home-care/, /about-regis/, /short-term-care/) are untouched.

   Values lifted from /home-care-new/:
     section padding   100px  (dialled to 72px here — six blocks, not four)
     button radius     4px, 16px text, 13px 28px padding, sentence case
     tinted sections   alternating white / #E9F8FC (blue) / #D6EAC7 (green)
   ========================================================================== */

/* --- Section rhythm: alternate tints so blocks read as distinct sections --- */

.page-aged-care-facilities .two-column-content {
    padding-top: 4.5rem;
    padding-bottom: 4.5rem;
}

.page-aged-care-facilities .two-column-content:nth-of-type(even) {
    background-color: #e9f8fc;
}

/* Third tinted band picks up the green from the Home Care steps section so the
   page does not read as a single flat blue wash top to bottom. */

.page-aged-care-facilities .two-column-content:nth-of-type(6) {
    background-color: #d6eac7;
}

/* --- Even out image heights ------------------------------------------------ */
/* Block images currently render 355px to 650px tall depending on source aspect,
   so the column rhythm is ragged. object-fit is already cover (theme), so a fixed
   height crops rather than distorts. */

.page-aged-care-facilities .two-column-content .img-area img {
    height: 420px;
    object-fit: cover;
}

/* --- Buttons: match the Home Care pill ------------------------------------- */
/* Navy is kept — cyan is the Home Care accent and this is the residential brand. */

.page-aged-care-facilities .two-column-content a.button {
    border-radius: 4px;
    font-size: 1rem;
    padding: 13px 28px;
    letter-spacing: 0.5px;
    text-transform: none;
}

@media screen and (max-width: 900px) {

    .page-aged-care-facilities .two-column-content .img-area img {
        height: 300px;
    }
}

@media screen and (max-width: 640px) {

    .page-aged-care-facilities .two-column-content {
        padding-top: 2.5rem;
        padding-bottom: 2.5rem;
    }

    .page-aged-care-facilities .two-column-content .img-area img {
        height: 240px;
    }
}


/* --- Section headings: match the Home Care display treatment ------------- */
/* Measured on the two pages: this template renders block headings at #1c1c1c
   with 0.6px tracking, the Home Care template at #0f1818 with 1.5px. The looser
   tracking is what makes the newer pages read as airier at the same size, so it
   is the single highest-value type change here. Size and weight are left alone
   (both templates are already 30px / 400). */

.page-aged-care-facilities .two-column-content h2 {
    color: #0f1818;
    letter-spacing: 1.5px;
}

/* Sub-headings keep their heavier weight but pick up the same ink colour so a
   block does not mix two near-blacks. */

.page-aged-care-facilities .two-column-content h3 {
    color: #0f1818;
}

@media screen and (max-width: 640px) {

    .page-aged-care-facilities .two-column-content h2 {
        letter-spacing: 1px;
    }
}