/* kc-base.css — base layer for Kam's pages built with his layout in our brand (16 Oct 2026, roadmap #66).
   Loaded before the generated per-page CSS (assets/kam/kc/<key>.css, from _local/kam-site/build-kc.mjs), so
   his own rules win wherever he set something. Here: our fonts on his headings, undoing the theme resets his
   layout didn't expect, the light version of our header, his "book / report" card, and our floating form in his
   hero. Brand colours: aa3 green #144633 / deep #0f3527, pink #e8447f / deep #c33a68,
   cream #fff7eb. */

/* ---------- page frame: clear our fixed header ---------- */
.kc { padding-top: 128px; }
@media (max-width: 992px) { .kc { padding-top: 112px; } }
@media (max-width: 800px) { .kc { padding-top: 104px; } }

/* ---------- our fonts on his type ---------- */
/* :where(:not(.aa-cf *)) keeps these (and, via build-kc.mjs, his element rules) off our floating form in his hero.
   Poppins is wider than his Arial; matching Arial's x-height keeps his line breaks and page length on phones. */
.kc { font-size-adjust: 0.52; }
.kc :is(h1, h2, h3, h4):where(:not(.aa-cf *)) { font-family: var(--aa3-font-display, 'Hanken Grotesk'), sans-serif; font-weight: 800; text-transform: none; }
.kc :is(strong, b):where(:not(.aa-cf *)) { font-weight: 700; }
.kc a:where(:not(.aa-cf *)) { text-decoration: underline; }
.kc :is(ul, ol):where(:not(.aa-cf *)) { padding-left: 1.25em; }
.kc ul:where(:not(.aa-cf *)) { list-style: disc; }
.kc summary:where(:not(.aa-cf *)) { cursor: pointer; }

/* ---------- our header in its light version (his pages are light; the white logo would vanish) ---------- */
body.aa-kc .header,
body.aa-kc .header.transparent { background: rgba(255, 255, 255, 0.92); border-color: rgba(20, 70, 51, 0.12); box-shadow: 0 8px 28px rgba(15, 53, 39, 0.1); }
body.aa-kc .header .logo-white { display: none !important; }
body.aa-kc .header .logo-black { display: block !important; opacity: 1 !important; transform: none !important; }
body.aa-kc .header .menu-item a,
body.aa-kc .header.transparent .menu-item a,
body.aa-kc .header .nav-menu li a { color: #144633; }
body.aa-kc .header .menu-item a:hover { color: #c33a68; }
body.aa-kc .hamburger-line { background: #144633; }

/* ---------- his inline forms → one card that opens our form ---------- */
.kc .kc-formcard { background: #fff; border: 1px solid rgba(20, 70, 51, 0.14); border-radius: 16px; padding: 22px; display: grid; gap: 14px; }
.kc .kc-formcard-lead { font-size: 15px; color: #40574d; margin: 0; }
.kc .kc-formcard-actions { display: grid; gap: 10px; justify-items: start; }
.kc .kc-formcard-report { font-weight: 700; font-size: 15px; color: #144633; }
/* its button styled here too: the campaign pages (overseas, stalled sellers, ...) have no .button of their own */
.kc .kc-formcard .kc-button-primary { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 13px 22px; border-radius: 10px; background: linear-gradient(135deg, #ef4a81 0%, #c33a68 100%); color: #fff; font: 700 16px/1.25 'Poppins', sans-serif; text-decoration: none; }
.kc .kc-formcard .kc-button-primary:hover { color: #fff; filter: brightness(1.05); }

/* ---------- our floating form, exactly as on our other pages (sections/campaign-form.php) ---------- */
/* It sits at the end of his hero inside div.hero.kc-hero-wrap (build-kc.mjs), so the site's own floating-form
   behaviour (main.css + gsap-animations.js) runs unchanged: in the page under his hero content, the pink pill at the
   bottom once you scroll past, opening on hover / tap. Here only: the wrapper drops main.css's dark .hero look, the
   form sits in his hero's flow, and it keeps the frosted green it has over our photo heroes (white glass vanishes on
   his light pages). Phones: hidden until a book / report button is tapped (campaign-form.js adds .aa-cf-open). */
.kc .hero.kc-hero-wrap { min-height: 0; padding: 0 !important; background: none; overflow: visible; }
.kc .hero.kc-hero-wrap::before,
.kc .hero.kc-hero-wrap::after { content: none; display: none; }
body.aa-kc .kc-hero .property-search-container:not(.compact) { position: static !important; left: auto !important; bottom: auto !important; transform: none !important; width: min(1000px, calc(100% - 64px)) !important; max-width: 1000px !important; margin: 36px auto 0 !important; }
/* what it would inherit from body on our other pages, not from his page root (.kc) */
body.aa-kc .kc .aa-cf { font-family: var(--font-body); font-size: 16px; line-height: 1.6; color: var(--text-color); font-size-adjust: none; overflow-wrap: normal; -webkit-font-smoothing: auto; }
body.aa-kc .property-search-container:not(.compact),
body.aa-kc .property-search-container.compact.expanded { background: rgba(78, 115, 101, 0.97) !important; border-color: rgba(255, 255, 255, 0.3) !important; }
/* Opened from the pill it is as wide as in the hero (main.css caps it at 800px, too narrow for the call / report and
   Selling / Letting buttons plus four fields: they overlapped); narrower screens put Selling / Letting on a second line. */
body.aa-kc .property-search-container.compact.expanded:not(.step-2-active) { width: min(1000px, calc(100% - 64px)) !important; max-width: 1000px !important; }
@media (min-width: 801px) {
    body.aa-kc .aa-cf .aa-cf-top { flex-wrap: wrap; }
    body.aa-kc .aa-cf .aa-cf-modes { flex: 2 1 420px; }
    body.aa-kc .aa-cf .aa-cf-intent { flex: 1 1 200px; }
}
@media (min-width: 801px) and (max-width: 1060px) {
    body.aa-kc .aa-cf .aa-cf-row .aa-cf-address { flex: 1.1 1 0; }
    body.aa-kc .aa-cf .aa-cf-row .form-group input { padding-left: 10px !important; padding-right: 8px !important; }
    body.aa-kc .aa-cf .aa-cf-row { gap: 8px; }
    body.aa-kc .property-search-container.compact.expanded { padding: 20px !important; }
}
@media (max-width: 800px) {
    body.aa-kc .kc-hero .property-search-container:not(.compact):not(.aa-cf-open) { display: none !important; }
    body.aa-kc .kc-hero .property-search-container.aa-cf-open { animation-delay: 0s !important; }
    body.aa-kc .kc-hero .property-search-container:not(.compact) { width: calc(100% - 32px) !important; margin-top: 24px !important; }
    /* the two mode buttons fit side by side (their labels ran past the form edge) */
    body.aa-kc #strategy-form .aa-cf-modes .sc-intent-btn { padding: 10px 6px; white-space: normal; line-height: 1.25; }
}

/* ---------- photo frames: the photo inside its box ---------- */
/* His design set each photo off its backing box (padding top/left only, box short at right/bottom), so the photo hung
   over the box edge (Rokas, 16 Oct: "images do not fit inside the boxes"). Same box, the photo now sits inside it. */
body.aa-kc .kc:not(.kc-page-portfolio-landlords) .kc-hero-photo,
body.aa-kc .kc .kc-hero-visual,
body.aa-kc .kc .kc-photo-frame { padding: 12px !important; }
body.aa-kc .kc .kc-hero-photo::before,
body.aa-kc .kc .kc-hero-visual::before,
body.aa-kc .kc .kc-photo-frame::before { inset: 0 !important; }
body.aa-kc .kc .kc-hero-visual .kc-photo-frame { padding: 0 !important; }
body.aa-kc .kc .kc-hero-visual { isolation: isolate; } /* its box sits at z-index -1: keep it above the section background */

/* ---------- Kam's founder film (Why AA), opened by kc.js ---------- */
.kc-film { width: min(960px, calc(100% - 32px)); max-width: none; margin: auto; padding: 0; border: 0; border-radius: 16px; background: #0f3527; overflow: visible; }
.kc-film::backdrop { background: rgba(15, 53, 39, 0.82); }
.kc-film video { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; max-height: calc(100vh - 120px); border-radius: 16px; background: #0f3527; }
.kc-film-close { position: absolute; top: -48px; right: 0; width: 40px; height: 40px; margin: 0; padding: 0; border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 50%; background: transparent; color: #fff; font: 400 26px/1 'Poppins', sans-serif; cursor: pointer; }

/* ---------- close (×) on the form opened from the pill (campaign-form.js adds it on these pages) ---------- */
/* Rokas, 16 Oct: the opened form stays 20s after the mouse leaves; this folds it back into the pill straight away. */
body.aa-kc .aa-cf-fold { display: none; }
body.aa-kc .property-search-container.compact.expanded .aa-cf-fold { display: flex; align-items: center; justify-content: center; position: absolute; top: -14px; right: -14px; z-index: 3; width: 34px; height: 34px; margin: 0; padding: 0; border: 2px solid #fff; border-radius: 50%; background: #144633; color: #fff; font: 400 22px/1 'Poppins', sans-serif; cursor: pointer; box-shadow: 0 4px 14px rgba(15, 53, 39, 0.35); }
body.aa-kc .property-search-container.compact.expanded .aa-cf-fold:hover { background: #e8447f; }

/* ---------- fee tags on his pink fee cards (sell or let, ...) ---------- */
/* His rule makes all text in the pink card white, the light "Fixed fee" tag included: unreadable (Kam, 16 Oct). */
body.aa-kc .kc .kc-fee-card .kc-fee-badge { color: #144633 !important; background: #fff !important; }

/* ---------- example area market report pop-up (sections/kc-report-example.php, kc.js) ---------- */
.kc-example { width: min(640px, calc(100% - 32px)); max-height: calc(100vh - 48px); margin: auto; padding: 32px; border: 0; border-radius: 18px; background: #fff; color: #0f3527; font: 400 16px/1.55 'Poppins', sans-serif; box-shadow: 0 30px 80px rgba(15, 53, 39, 0.35); overflow-y: auto; }
.kc-example::backdrop { background: rgba(15, 53, 39, 0.72); }
.kc-example-close { position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; margin: 0; padding: 0; border: 1px solid #d7e0d8; border-radius: 50%; background: #fff; color: #144633; font: 400 24px/1 'Poppins', sans-serif; cursor: pointer; }
.kc-example-close:hover { border-color: #e8447f; color: #e8447f; }
.kc-example-kicker { margin: 0 0 6px; color: #c33a68; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.kc-example h2 { margin: 0; color: #144633; font: 800 34px/1.1 var(--aa3-font-display, 'Hanken Grotesk'), sans-serif; text-transform: none; }
.kc-example h2 span { color: #e8447f; }
.kc-example-date { margin: 4px 0 0; color: #607268; font-size: 14px; font-weight: 600; }
.kc-example-intro { margin: 12px 0 0; color: #40574d; }
.kc-example h3 { margin: 26px 0 10px; color: #144633; font: 800 20px/1.2 var(--aa3-font-display, 'Hanken Grotesk'), sans-serif; text-transform: none; }
.kc-example table { width: 100%; border-collapse: collapse; font-size: 15px; }
.kc-example th, .kc-example td { padding: 10px 8px; border-bottom: 1px solid #d7e0d8; text-align: right; }
.kc-example th[scope="row"], .kc-example thead th:first-child { text-align: left; font-weight: 500; color: #40574d; }
.kc-example thead th { color: #607268; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.kc-example td:nth-child(2) { color: #144633; font-weight: 700; }
.kc-example td:nth-child(3) { color: #607268; }
.kc-example-note { margin: 12px 0 0; color: #607268; font-size: 14px; }
.kc-example-next { margin-top: 24px; padding: 22px; border-radius: 14px; background: #edf3ed; }
.kc-example-next h3 { margin: 0 0 12px; }
.kc-example-button { display: inline-flex; align-items: center; gap: 10px; min-height: 50px; padding: 12px 22px; border-radius: 10px; background: linear-gradient(135deg, #ef4a81 0%, #c33a68 100%); color: #fff; font: 700 16px/1.25 'Poppins', sans-serif; text-decoration: none; }
.kc-example-button:hover { color: #fff; filter: brightness(1.05); }
.kc-example-next p { margin: 10px 0 0; color: #607268; font-size: 14px; }
@media (min-width: 761px) {
    .kc-example { width: min(900px, calc(100% - 48px)); }
    .kc-example-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
    .kc-example th, .kc-example td { padding: 8px 6px; }
}
.kc-example-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 600px) {
    .kc-example { padding: 24px 18px; }
    .kc-example h2 { font-size: 28px; padding-right: 40px; }
    .kc-example table { font-size: 14px; }
    .kc-example th, .kc-example td { padding: 9px 4px; }
    .kc-example-button { width: 100%; justify-content: center; }
}