/* ════════════════════════════════════════════════════════════
   RENMORE HOMES — Main Stylesheet
   ════════════════════════════════════════════════════════════

   To change the heading font:  update --font-heading below.
   To change brand colours:     update the colour variables below.

   All page-specific styles are scoped to their body class:
     body.rh-home         → Homepage
     body.rh-contact      → Contact / Register Interest
     body.rh-confirmation → Enquiry Confirmation
   ════════════════════════════════════════════════════════════ */


/* ── 1. ROOT VARIABLES ─────────────────────────────────────── */
:root {
    /* Colours */
    --navy:      #001138;
    --gold:      #ccba78;
    --cream:     #fffbcc;
    --off-white: #f9fbee;
    --border:    rgba(0, 17, 56, 0.12);

    /* Fonts
     * TO SWITCH TO THAN: once uploaded via the WordPress fonts
     * plugin, replace 'Cormorant Garamond' with the exact font
     * family name shown in the plugin (e.g. 'Than').
     * That single change will update headings across all 3 pages.
     */
    --font-heading: 'Than', serif;
    --font-body:    'Montserrat', sans-serif;

    /* Montserrat weights — brand guidelines: Light / Medium / Semi-Bold
     * TO SWITCH TO THAN: update --font-heading above.
     * Font weights remain the same regardless of which heading font is used.
     */
    --weight-light:    300; /* body copy, general text          */
    --weight-medium:   500; /* sub-headlines, secondary UI text */
    --weight-semibold: 600; /* buttons, labels, navigation      */
}


/* ── 2. RESET ──────────────────────────────────────────────── */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html { scroll-behavior: smooth; }

body.rh-home,
body.rh-contact,
body.rh-confirmation {
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
}


/* ══════════════════════════════════════════════════════════════
   3. HOMEPAGE  (body.rh-home)
══════════════════════════════════════════════════════════════ */
body.rh-home {
    background: var(--navy);
    width: 100%;
    height: 100%;
    overflow: hidden; /* nothing below the fold */
}

/* Hero wrapper */
.rh-hero {
    position: relative;
    width: 100%;
    height: 100vh;
}

/* Swiper */
.rh-swiper {
    position: absolute;
    inset: 0;
}

.rh-swiper .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* General gradient overlay */
.rh-overlay {
    position: absolute;
    inset: 0;
    z-index: 10;
    background: linear-gradient(
        160deg,
        rgba(0, 17, 56, 0.52) 0%,
        rgba(0, 17, 56, 0.15) 45%,
        rgba(0, 17, 56, 0.58) 100%
    );
    pointer-events: none;
}

/* Top fade — keeps logo legible over any carousel image */
.rh-top-fade {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 340px;
    z-index: 11;
    background: linear-gradient(
        to bottom,
        rgba(0, 17, 56, 0.96) 0%,
        rgba(0, 17, 56, 0.60) 55%,
        transparent 100%
    );
    pointer-events: none;
}

/* Logo — top centre */
.rh-header {
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2.2rem 3rem 0;
}

.rh-logo {
    height: clamp(42px, 5.5vw, 64px);
    width: auto;
}

/* "Website Coming Soon" beneath logo */
.rh-coming-soon {
    color: rgba(255, 255, 255, 0.75);
    font-family: var(--font-body);
    font-weight: var(--weight-light);
    font-size: clamp(0.68rem, 1.4vw, 0.88rem);
    letter-spacing: 0.35em;
    text-transform: uppercase;
    margin-top: 32px;
}

/* Gold rule beneath coming soon text */
.rh-header-rule {
    width: 42px;
    height: 1px;
    background: var(--gold);
    margin-top: 0.75rem;
}

/* Centre content area */
.rh-center {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    pointer-events: none; /* pass clicks through to nav/pagination */
}

/* Semi-transparent navy content panel */
.rh-panel {
    pointer-events: auto; /* restore clicks for the CTA button */
    background: rgba(0, 17, 56, 0.62);
    border: 1px solid rgba(204, 186, 120, 0.28);
    padding: clamp(2rem, 4vw, 3.5rem) clamp(2rem, 6vw, 5.5rem);
    max-width: 680px;
    width: 100%;
    text-align: center;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

/* Headline */
.rh-title {
    font-family: var(--font-heading);
    color: #fff;
    font-size: clamp(2rem, 4.5vw, 4rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: 0.03em;
    margin-bottom: 1rem;
}

/* Sub-headline */
.rh-subtitle {
    color: rgba(255, 255, 255, 0.75);
    font-family: var(--font-body);
    font-weight: var(--weight-medium);
    font-size: clamp(0.68rem, 1.4vw, 0.88rem);
    letter-spacing: 0.24em;
    text-transform: uppercase;
    margin-bottom: 2.6rem;
}

/* CTA button */
.rh-cta {
    display: inline-block;
    padding: 1rem 3.2rem;
    background: transparent;
    border: 1px solid var(--gold);
    color: #fff;
    text-decoration: none;
    font-family: var(--font-body);
    font-weight: var(--weight-semibold);
    font-size: 0.72rem;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    transition: background 0.3s, color 0.3s;
}

.rh-cta:hover {
    background: var(--gold);
    color: var(--navy);
}

/* Swiper navigation — lives at hero level, above all overlays */
.rh-nav-prev,
.rh-nav-next {
    position: absolute;
    z-index: 40;
    color: rgba(255, 255, 255, 0.60);
    transition: color 0.2s;
    cursor: pointer;
}

.rh-nav-prev:hover,
.rh-nav-next:hover { color: var(--gold); }

.rh-nav-prev::after,
.rh-nav-next::after { font-size: 1.3rem; }

/* Swiper pagination — lives at hero level, above all overlays */
.rh-pagination {
    position: absolute;
    z-index: 40;
    bottom: 2rem !important;
    left: 0;
    right: 0;
    text-align: center;
}

.rh-pagination .swiper-pagination-bullet {
    width: 7px;
    height: 7px;
    background: rgba(255, 255, 255, 0.40);
    opacity: 1;
    transition: background 0.3s, transform 0.3s;
}

.rh-pagination .swiper-pagination-bullet-active {
    background: var(--gold);
    transform: scale(1.35);
}


/* ══════════════════════════════════════════════════════════════
   4. CONTACT PAGE  (body.rh-contact)
══════════════════════════════════════════════════════════════ */
body.rh-contact {
    background: var(--navy);
    color: #fff;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Page header — navy, centred logo + title */
.rh-contact-header {
    position: relative;
    width: 100%;
    padding: 4rem 2rem 3.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Back to home link */
.rh-back {
    position: absolute;
    top: 1.8rem;
    left: 2.5rem;
    color: rgba(255, 255, 255, 0.55);
    text-decoration: none;
    font-family: var(--font-body);
    font-weight: var(--weight-medium);
    font-size: 0.68rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    transition: color 0.2s;
}

.rh-back:hover { color: var(--gold); }

.rh-back svg {
    width: 13px;
    height: 13px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Header content */
.rh-contact-header__content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.rh-contact-header__logo {
    height: clamp(40px, 5vw, 60px);
    width: auto;
    margin-bottom: 2rem;
}

.rh-contact-header__title {
    font-family: var(--font-heading);
    color: #fff;
    font-size: clamp(1.8rem, 3.5vw, 3rem);
    font-weight: 700;
    letter-spacing: 0.03em;
    margin-bottom: 0.6rem;
}

.rh-contact-header__sub {
    color: rgba(255, 255, 255, 0.55);
    font-family: var(--font-body);
    font-weight: var(--weight-medium);
    font-size: clamp(0.65rem, 1.1vw, 0.78rem);
    letter-spacing: 0.24em;
    text-transform: uppercase;
}

.rh-contact-header__rule {
    width: 42px;
    height: 1px;
    background: var(--gold);
    margin: 1.2rem auto 0;
}

/* Form section */
.rh-form-section {
    flex: 1;
    display: flex;
    justify-content: center;
    padding: 2rem 1.5rem 5rem;
}

.rh-form-card {
    background: #f9fbee;
    width: 100%;
    max-width: 720px;
    padding: 3rem 3.5rem;
}

/* WPForms placeholder */
.rh-placeholder {
    border: 2px dashed rgba(204, 186, 120, 0.3);
    padding: 4rem 2rem;
    text-align: center;
    color: rgba(255, 255, 255, 0.4);
}

.rh-placeholder p {
    font-size: 0.82rem;
    font-weight: var(--weight-light);
    line-height: 1.8;
    margin-bottom: 0.5rem;
}

.rh-placeholder code {
    font-size: 0.78rem;
    background: rgba(255, 255, 255, 0.08);
    padding: 0.2rem 0.5rem;
    color: var(--gold);
}

/* ── WPForms brand overrides ───────────────────────────────── */

/* Field labels — navy on off-white card */
.renmore-homes-form .wpforms-field-label {
    font-family: var(--font-body) !important;
    font-size: 0.68rem !important;
    font-weight: var(--weight-semibold) !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: var(--navy) !important;
    margin-bottom: 0.5rem !important;
}

/* Text / email / tel / budget inputs and textarea
   NOTE: input[type="checkbox"] is deliberately excluded here */
.renmore-homes-form .enquiry-form-name input[type="text"],
.renmore-homes-form .enquiry-form-email input[type="email"],
.renmore-homes-form .enquiry-form-phone input[type="tel"],
.renmore-homes-form .enquiry-form-phone input[type="text"],
.renmore-homes-form .enquiry-form-developments input[type="text"],
.renmore-homes-form .enquiry-form-developments select,
.renmore-homes-form .enquiry-form-bedrooms input[type="text"],
.renmore-homes-form .enquiry-form-bedrooms select,
.renmore-homes-form .enquiry-form-text-area textarea,
.renmore-homes-form input[type="text"]:not([type="checkbox"]),
.renmore-homes-form input[type="email"],
.renmore-homes-form input[type="tel"] {
    font-family: var(--font-body) !important;
    font-weight: var(--weight-light) !important;
    font-size: 0.85rem !important;
    width: 100% !important;
    background: #fff !important;
    border: 1px solid var(--border) !important;
    border-radius: 0 !important;
    color: var(--navy) !important;
    padding: 0.85rem 1rem !important;
    box-shadow: none !important;
    transition: border-color 0.2s !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

/* Phone field — extra left padding (e.g. for flag/dial-code prefix) */
.renmore-homes-form .enquiry-form-phone input[type="tel"],
.renmore-homes-form .enquiry-form-phone input[type="text"] {
    padding-left: 45px !important;
}

/* Placeholder */
.renmore-homes-form input::placeholder,
.renmore-homes-form textarea::placeholder {
    color: rgba(0, 17, 56, 0.30) !important;
}

/* Focus — gold border */
.renmore-homes-form input[type="text"]:focus,
.renmore-homes-form input[type="email"]:focus,
.renmore-homes-form input[type="tel"]:focus,
.renmore-homes-form select:focus,
.renmore-homes-form textarea:focus {
    border-color: var(--gold) !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Textarea */
.renmore-homes-form .enquiry-form-text-area textarea {
    min-height: 130px !important;
    resize: vertical !important;
}

/* ── Checkboxes — 42.98 × 42.98 px square tiles ───────────── */
.renmore-homes-form .enquiry-form-developments .wpforms-field-label-inline,
.renmore-homes-form .enquiry-form-bedrooms .wpforms-field-label-inline {
    font-family: var(--font-body) !important;
    font-size: 0.82rem !important;
    font-weight: var(--weight-light) !important;
    color: var(--navy) !important;
    vertical-align: middle !important;
}

.renmore-homes-form .enquiry-form-developments ul,
.renmore-homes-form .enquiry-form-bedrooms ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 0.5rem !important;
}

.renmore-homes-form .enquiry-form-developments ul li,
.renmore-homes-form .enquiry-form-bedrooms ul li {
    display: flex !important;
    align-items: center !important;
    gap: 0.6rem !important;
}

/* Kill WPForms' default ::before pseudo-element (causes rogue box in top-left).
   We use ::after for our own gold tick so ::before is safe to wipe entirely. */
.renmore-homes-form .enquiry-form-developments input[type="checkbox"]::before,
.renmore-homes-form .enquiry-form-bedrooms input[type="checkbox"]::before {
    display: none !important;
    content: none !important;
}

/* The checkbox itself */
.renmore-homes-form .enquiry-form-developments input[type="checkbox"],
.renmore-homes-form .enquiry-form-bedrooms input[type="checkbox"] {
    width: 42.98px !important;
    height: 42.98px !important;
    min-width: 42.98px !important;
    min-height: 42.98px !important;
    background: #fff !important;
    border: 1px solid var(--border) !important;
    border-radius: 0 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    cursor: pointer !important;
    position: relative !important;
    flex-shrink: 0 !important;
    transition: background 0.2s, border-color 0.2s !important;
    padding: 0 !important;
    box-shadow: none !important;
}

/* Checked state — navy fill with gold tick */
.renmore-homes-form .enquiry-form-developments input[type="checkbox"]:checked,
.renmore-homes-form .enquiry-form-bedrooms input[type="checkbox"]:checked {
    background: var(--navy) !important;
    border-color: var(--navy) !important;
}

.renmore-homes-form .enquiry-form-developments input[type="checkbox"]:checked::after,
.renmore-homes-form .enquiry-form-bedrooms input[type="checkbox"]:checked::after {
    content: '✓' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    color: var(--gold) !important;
    font-size: 1.1rem !important;
    line-height: 1 !important;
    /* Override WPForms' border-based checkmark */
    border: none !important;
    height: auto !important;
    width: auto !important;
}

/* Hover state */
.renmore-homes-form .enquiry-form-developments input[type="checkbox"]:hover,
.renmore-homes-form .enquiry-form-bedrooms input[type="checkbox"]:hover {
    border-color: var(--gold) !important;
}

/* ── Submit button ──────────────────────────────────────────── */
.renmore-homes-submit-btn {
    font-family: var(--font-body) !important;
    font-size: 0.72rem !important;
    font-weight: var(--weight-semibold) !important;
    letter-spacing: 0.26em !important;
    text-transform: uppercase !important;
    background: transparent !important;
    color: var(--navy) !important;
    border: 1px solid var(--navy) !important;
    border-radius: 0 !important;
    padding: 1rem 3.2rem !important;
    cursor: pointer !important;
    transition: background 0.3s, color 0.3s, border-color 0.3s !important;
}

.renmore-homes-submit-btn:hover {
    background: var(--gold) !important;
    border-color: var(--gold) !important;
    color: var(--navy) !important;
}

/* Footer */
.rh-footer {
    background: transparent;
    border-top: 1px solid rgba(204, 186, 120, 0.34);
    padding: 1.5rem 3rem;
    text-align: center;
}

.rh-footer p {
    color: rgba(255, 255, 255, 1);
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}


/* ══════════════════════════════════════════════════════════════
   5. CONFIRMATION PAGE  (body.rh-confirmation)
══════════════════════════════════════════════════════════════ */
body.rh-confirmation {
    background: var(--navy);
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 2rem;
    text-align: center;
}

.rh-conf-logo {
    height: clamp(38px, 5vw, 56px);
    width: auto;
    margin-bottom: 3rem;
}

.rh-tick {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 1.5px solid var(--gold);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 2rem;
}

.rh-tick svg {
    width: 26px;
    height: 26px;
    stroke: var(--gold);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.rh-rule {
    width: 44px;
    height: 1px;
    background: var(--gold);
    margin: 0 auto 2rem;
}

.rh-conf-title {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 5vw, 3.4rem);
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.03em;
    margin-bottom: 1rem;
}

.rh-message {
    font-family: var(--font-body);
    font-weight: var(--weight-light);
    font-size: clamp(0.8rem, 1.5vw, 0.95rem);
    color: rgba(255, 255, 255, 0.60);
    line-height: 1.9;
    max-width: 480px;
    margin: 0 auto 3rem;
    letter-spacing: 0.04em;
}

.rh-btn {
    display: inline-block;
    padding: 1rem 3.2rem;
    background: transparent;
    border: 1px solid var(--gold);
    color: #fff;
    text-decoration: none;
    font-family: var(--font-body);
    font-weight: var(--weight-semibold);
    font-size: 0.72rem;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    transition: background 0.3s, color 0.3s;
}

.rh-btn:hover {
    background: var(--gold);
    color: var(--navy);
}

.rh-copyright {
    position: fixed;
    bottom: 1.8rem;
    left: 0; right: 0;
    text-align: center;
    color: rgba(255, 255, 255, 1);
    font-size: 0.58rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}


/* ══════════════════════════════════════════════════════════════
   6. TERMS & CONDITIONS PAGE  (body.rh-terms)
══════════════════════════════════════════════════════════════ */
body.rh-terms {
    background: var(--navy);
    color: #fff;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Main content area — off-white for long-form readability */
.rh-terms-main {
    flex: 1;
    background: var(--off-white);
    padding: 4rem 1.5rem 5rem;
    display: flex;
    justify-content: center;
}

.rh-terms-content {
    width: 100%;
    max-width: 780px;
}

/* Individual section */
.rh-terms-section {
    margin-bottom: 2.8rem;
    padding-bottom: 2.8rem;
    border-bottom: 1px solid var(--border);
}

.rh-terms-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* Section heading */
.rh-terms-heading {
    font-family: var(--font-heading);
    font-size: clamp(1.2rem, 2.5vw, 1.7rem);
    font-weight: 700;
    color: var(--navy);
    letter-spacing: 0.02em;
    margin-bottom: 1.2rem;
}

/* Body text */
.rh-terms-content p {
    font-family: var(--font-body);
    font-weight: var(--weight-light);
    font-size: 0.92rem;
    color: var(--navy);
    line-height: 1.85;
    margin-bottom: 1rem;
}

.rh-terms-content p:last-child { margin-bottom: 0; }

.rh-terms-content strong {
    font-weight: var(--weight-semibold);
    color: var(--navy);
}

/* Bulleted list */
.rh-terms-list {
    list-style: none;
    padding: 0;
    margin: 1rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.rh-terms-list li {
    font-family: var(--font-body);
    font-weight: var(--weight-light);
    font-size: 0.92rem;
    color: var(--navy);
    line-height: 1.75;
    padding-left: 1.4rem;
    position: relative;
}

.rh-terms-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.65em;
    width: 5px;
    height: 1px;
    background: var(--gold);
}

/* Email link */
.rh-terms-link {
    color: var(--navy);
    font-weight: var(--weight-semibold);
    text-decoration: underline;
    text-decoration-color: var(--gold);
    text-underline-offset: 3px;
    transition: color 0.2s;
}

.rh-terms-link:hover { color: var(--gold); }


/* ── 7. RESPONSIVE ─────────────────────────────────────────── */
@media (max-width: 600px) {
    .swiper-button-prev,
    .swiper-button-next { display: none; }

    .rh-cta  { padding: 0.85rem 2rem; }

    .rh-panel { border-left: none; border-right: none; }

    .rh-back { left: 1.5rem; top: 1.4rem; }

    .rh-form-card { padding: 2rem 1.5rem; }
}