/*
Theme Name: Kerr Village Towns
Theme URI: https://kerrvillagetownhomes.ca/
Author: Kerr Village Towns
Author URI: https://kerrvillagetownhomes.ca/
Description: Standalone landing-page theme for Kerr Village Towns, Oakville. Faithful replica of the Brightstone community page with VIP registration form and WhatsApp contact.
Version: 1.2.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kerr-village-towns
*/

/* ============ TOKENS ============ */
:root{
  --ink:#3d3935;        /* warm dark brown text */
  --navy:#004770;       /* brand navy */
  --navy-deep:#003253;
  --gold:#9a7b3f;       /* crest / button gold */
  --gold-soft:#b89a5e;
  --cream:#f3eeee;      /* page background */
  --panel:#b9c4cc;      /* form panel blue-grey */
  --line:#d8d2cd;
  --white:#ffffff;
  --serif:"Source Serif 4", Georgia, serif;
  --sans:"Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
html,body{overflow-x:hidden;max-width:100%;}
body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--cream);
  font-weight:300;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;text-decoration:none;}
.wrap{max-width:1280px;margin:0 auto;padding:0 28px;}

/* ============ HEADER ============ */
.site-header{
  position:sticky;top:0;z-index:90;
  background:var(--cream);
  border-bottom:1px solid rgba(0,0,0,.06);
}
.site-header .bar{
  display:flex;align-items:center;justify-content:space-between;
  height:74px;
}
.brand-logo{font-family:var(--serif);font-size:26px;letter-spacing:.18em;color:var(--navy);font-weight:600;}
.brand-logo img{height:30px;width:auto;}
.main-nav{display:flex;gap:34px;}
.main-nav a{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);transition:color .2s;}
.main-nav a:hover{color:var(--gold);}

/* sub nav */
.sub-bar{display:flex;align-items:center;justify-content:space-between;padding:14px 0;}
.pill{
  display:inline-block;border:1px solid var(--ink);border-radius:30px;
  padding:11px 22px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;
}
.sub-nav{display:flex;gap:34px;}
.sub-nav a{font-size:13px;letter-spacing:.14em;text-transform:uppercase;transition:color .2s;}
.sub-nav a:hover{color:var(--gold);}

/* ============ HERO ============ */
.hero{display:grid;grid-template-columns:1fr 1fr;min-height:80vh;}
.hero-left{padding:40px 60px 70px 0;}
.hero-logo{max-width:230px;margin:10px 0 28px;}
.hero-addr{font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);margin:0 0 18px;}
.hero h1{font-family:var(--sans);font-weight:400;font-size:clamp(38px,4.4vw,62px);line-height:1.04;margin:0 0 26px;color:var(--ink);}
.hero h1 .accent{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--navy);display:block;}
.hero-lede{font-size:18px;max-width:430px;color:#5a554f;margin:0 0 34px;}
.hero-price{font-size:26px;font-weight:400;margin:0 0 22px;color:var(--ink);}

.btn-gold{
  display:inline-flex;align-items:center;gap:16px;
  background:var(--gold);color:var(--white);
  border:none;border-radius:40px;padding:14px 30px 14px 14px;
  font-size:14px;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;
  transition:background .25s;
}
.btn-gold:hover{background:var(--gold-soft);}
.btn-gold .circ{
  width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.7);
  display:flex;align-items:center;justify-content:center;font-size:20px;
}

/* hero right – form panel */
.hero-right{
  background:var(--panel) url('https://kerrvillagetownhomes.ca/wp-content/uploads/2026/06/bg-pattern.png');
  background-size:340px;
  display:flex;align-items:flex-start;justify-content:center;
  padding:54px 46px;margin-right:max(calc((100% - 1280px)/2 * -1), -28px);
}

/* ============ FORM ============ */
.reg-card{background:var(--white);width:100%;max-width:620px;padding:46px 46px 40px;box-shadow:0 30px 70px rgba(0,0,0,.10);}
.reg-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 34px;}
.field{position:relative;margin-bottom:22px;}
.field.full{grid-column:1 / -1;}
.field label{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#8a857f;margin-bottom:8px;}
.field label .req{color:var(--gold);}
.field input[type=text],.field input[type=email],.field input[type=tel],.field select{
  width:100%;border:none;border-bottom:1px solid #cfc9c3;background:transparent;
  padding:8px 0;font-family:var(--sans);font-size:15px;color:var(--ink);outline:none;
}
.field input:focus,.field select:focus{border-bottom-color:var(--gold);}
.field select{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238a857f' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>");background-repeat:no-repeat;background-position:right center;}
.consent{display:flex;gap:12px;align-items:flex-start;margin:6px 0 22px;}
.consent input{margin-top:4px;}
.consent label{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#8a857f;line-height:1.7;}
.btn-submit{
  background:var(--gold);color:#fff;border:none;border-radius:40px;
  padding:15px 54px;font-size:14px;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;transition:background .25s;
}
.btn-submit:hover{background:var(--gold-soft);}
.form-note{font-size:12px;color:#8a857f;margin-top:14px;}
.form-success{background:#eef4ef;border:1px solid #b9d4bf;color:#2f6b40;padding:18px 22px;border-radius:6px;margin-bottom:24px;font-size:14px;}

/* ============ CONTACT FORM 7 OVERRIDES ============ */
/* Inputs/selects rendered by CF7 share the .field underline style */
.reg-card .wpcf7-form-control-wrap{display:block;}
.reg-card input.cf7-input,
.reg-card .field input[type=text],
.reg-card .field input[type=email],
.reg-card .field input[type=tel],
.reg-card select.cf7-select{
  width:100%;border:none;border-bottom:1px solid #cfc9c3;background:transparent;
  padding:8px 0;font-family:var(--sans);font-size:15px;color:var(--ink);outline:none;border-radius:0;
}
.reg-card input.cf7-input:focus,
.reg-card select.cf7-select:focus{border-bottom-color:var(--gold);}
.reg-card select.cf7-select{
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238a857f' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat;background-position:right center;
}
/* CF7 fields: label first, control below */
.reg-card .field{display:flex;flex-direction:column;}
/* checkbox / consent */
.reg-card .consent .wpcf7-list-item{margin:0;display:flex;gap:12px;align-items:flex-start;}
.reg-card .consent .wpcf7-list-item-label{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#8a857f;line-height:1.7;}
.reg-card .consent input[type=checkbox]{margin-top:4px;width:auto;}
/* CF7 response + validation messages */
.reg-card .wpcf7-response-output{
  margin:18px 0 0 !important;padding:14px 18px !important;border-radius:6px;font-size:14px;border-width:1px;
}
.reg-card .wpcf7-mail-sent-ok{background:#eef4ef;border-color:#b9d4bf !important;color:#2f6b40;}
.reg-card .wpcf7-validation-errors,
.reg-card .wpcf7-mail-sent-ng{background:#fdf0f0;border-color:#e3b9b9 !important;color:#9a3b3b;}
.reg-card .wpcf7-not-valid-tip{color:#c0392b;font-size:11px;letter-spacing:.04em;margin-top:4px;}
.reg-card .wpcf7-spinner{margin:14px auto 0;display:block;}
.reg-card form.submitting .btn-submit{opacity:.6;}

/* ============ SECTIONS ============ */
.section{padding:78px 0;}

/* video section */
.video-sec{padding-top:0;}
.video-frame{
  position:relative;width:100%;padding-top:56.25%;
  border-radius:2px;overflow:hidden;background:#000;
  box-shadow:0 30px 70px rgba(0,0,0,.16);
}
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.banner-water{
  height:360px;background-size:cover;background-position:center;
  display:flex;align-items:center;justify-content:center;
}
.banner-water img{max-width:360px;filter:drop-shadow(0 6px 18px rgba(0,0,0,.35));}
.center-head{text-align:center;max-width:880px;margin:0 auto;}
.h-lux{font-family:var(--sans);font-weight:400;font-size:clamp(30px,3.6vw,52px);line-height:1.12;color:var(--ink);margin:0;}
.h-lux .it{font-family:var(--serif);font-style:italic;color:var(--navy);}
.full-img{width:100%;border-radius:2px;}
.split{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center;}

/* amenities list */
.amen-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:42px 50px;margin-top:10px;}
.amen{display:flex;gap:18px;align-items:flex-start;}
.amen .ic{flex:0 0 46px;height:46px;border-radius:50%;border:1px solid var(--gold);display:flex;align-items:center;justify-content:center;color:var(--gold);}
.amen h3{font-family:var(--sans);font-weight:400;font-size:17px;margin:0 0 4px;color:var(--ink);line-height:1.3;}
.amen p{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin:0;}

.lede-para{font-size:18px;line-height:1.85;color:#5a554f;max-width:520px;}
.lede-para b{font-weight:500;color:var(--ink);}

.gallery-two{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:24px;}

/* register section */
.register-sec{background:#ece6e3;}
.register-sec .reg-card{box-shadow:0 20px 50px rgba(0,0,0,.07);max-width:100%;}
.reg-head{margin-bottom:30px;}
.reg-head h2{font-family:var(--serif);font-style:italic;font-weight:400;font-size:30px;color:var(--navy);margin:0 0 8px;}
.reg-head p{font-size:15px;color:#6a655f;margin:0;max-width:560px;}

/* ============ FOOTER ============ */
.site-footer{background:var(--cream);border-top:1px solid rgba(0,0,0,.07);padding:34px 0;}
.foot-bar{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;}
.foot-nav{display:flex;gap:30px;}
.foot-nav a{font-size:12px;letter-spacing:.14em;text-transform:uppercase;}
.foot-contact{font-size:13px;letter-spacing:.06em;color:#6a655f;}
.foot-contact a{color:var(--navy);}
.copy{font-family:var(--serif);font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:#8a857f;}

/* ============ WHATSAPP ============ */
.wa-float{
  position:fixed;right:22px;bottom:22px;z-index:200;
  display:flex;align-items:center;gap:0;
  background:#25D366;color:#fff;border-radius:50px;
  height:60px;width:60px;overflow:hidden;
  box-shadow:0 8px 24px rgba(0,0,0,.25);
  transition:width .35s ease,padding .35s ease;
  white-space:nowrap;
}
.wa-float svg{flex:0 0 60px;width:60px;height:60px;padding:15px;}
.wa-float .wa-text{opacity:0;font-size:14px;font-weight:500;letter-spacing:.02em;transition:opacity .3s ease .1s;padding-right:0;}
.wa-float:hover{width:248px;}
.wa-float:hover .wa-text{opacity:1;padding-right:22px;}

/* ============ RESPONSIVE ============ */
@media(max-width:980px){
  .hero{grid-template-columns:1fr;}
  .hero-left{padding:30px 0 50px;}
  .hero-right{margin:0 -28px;padding:40px 28px;}
  .split{grid-template-columns:1fr;gap:28px;}
  .amen-grid{grid-template-columns:1fr 1fr;}
  .main-nav,.sub-nav{display:none;}
}
@media(max-width:600px){
  .reg-grid{grid-template-columns:1fr;}
  .amen-grid{grid-template-columns:1fr;}
  .gallery-two{grid-template-columns:1fr;}
  .foot-bar{flex-direction:column;text-align:center;}
  .wrap{padding:0 18px;}
}