/* ==========================================================================
   ALBASTONE — WHITE & GOLD THEME
   Loaded AFTER css/styles.css. The dark version of the site is untouched: remove the
   <link> to this file (or use the dark Deployment folder) to go back to black & gold.

   How it works
   1. The palette variables in :root are remapped to a light, warm-white scheme with gold accents.
   2. Areas that sit on photographs (hero banners, lightbox, image badges…) re-declare the DARK
      palette locally (`.on-photo` scope below), so text over images stays white and readable.
   3. A small number of hard-coded dark surfaces are restyled explicitly.
   Gold used for TEXT is a deeper gold (≥ 4.5:1 on white); the bright gold is kept for fills,
   buttons, borders and focus rings.
   ========================================================================== */

:root{
  color-scheme:light;
  /* surfaces */
  --black:#ffffff;            /* page background */
  --near-black:#f8f5ee;       /* inset fields, chips, muted blocks */
  --panel:#ffffff;            /* cards, panels */
  --panel-2:#fffdf8;          /* menus, popovers */
  --line:#e6dfce;
  --line-soft:#f0eadc;
  /* gold: fills & borders stay rich, text variants are deeper for contrast */
  --gold:#c99a3b;
  --gold-bright:#9a6f12;      /* text/accents on white (5:1) */
  --gold-light:#86610f;       /* text on white (6:1) */
  --gold-dim:#d9bd7e;         /* soft borders */
  /* text */
  --white:#15120b;            /* strongest text (was white on dark) */
  --ink:#2c261b;
  --muted:#675f4e;
  --muted-2:#7a7058;
  --shadow-1:0 4px 18px rgba(87,66,16,.10);
  --shadow-2:0 16px 44px rgba(87,66,16,.18);
  --success:#2f8a5b;
  --danger:#b8402f;
  /* dark-on-photo palette, used by the .on-photo scope */
  --photo-white:#f7f5f1; --photo-ink:#e9e6df; --photo-muted:#cfc8ba; --photo-gold:#ecc88a;
}
html,body{background:#fff;color:var(--ink)}
::selection{background:rgba(201,154,59,.28);color:#15120b}

/* ---------- areas that sit on photographs keep the light-on-dark palette ---------- */
.on-photo,
.hero,.hero-slider,.hero-content,.hs-slide,
.prj2-hero,.page-hero,.page-banner,.about-hero,.about-op-hero,.dev-hero,.prj-hero,
.lightbox,.gstage,.modal-video,
.card-community,.dev-tile .dev-hover,.prj-loc-box,
.card-media .card-tag,.photo-count,.video-chip,.pr-tag,.mini-badge,.project-status-badge,
.slider-btn,.hero-ctrl button,.gcar-btn,.card-fav,.fav-btn,.media-btn,.media-actions button,.gal2-open{
  --white:var(--photo-white); --ink:var(--photo-ink); --muted:var(--photo-muted); --muted-2:#b7ae9d;
  --gold-light:var(--photo-gold); --gold-bright:#e4b866; --line:rgba(255,255,255,.28); --line-soft:rgba(255,255,255,.16);
  --panel:rgba(18,19,21,.72); --near-black:rgba(12,13,15,.55);
  color-scheme:dark;
}
.gal2-open{color:#101113;--white:#101113}

/* ---------- header ---------- */
.site-header{background:rgba(255,255,255,.94);border-bottom:1px solid var(--line);backdrop-filter:blur(10px)}
.nav-desktop>a,.nav-desktop summary{color:var(--ink)}
.nav-desktop>a:hover,.nav-desktop summary:hover,.nav-desktop>a.active{color:var(--gold-light)}
.nav-panel{background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-2)}
.nav-panel a{color:var(--ink)}
.nav-panel a:hover{background:var(--near-black);color:var(--gold-light)}
.icon-btn{border-color:var(--line);color:var(--ink);background:#fff}
.icon-btn:hover{border-color:var(--gold);color:var(--gold-light)}
.btn-outline.header-cta{background:#fff}
.mobile-nav,.mobile-nav-head{background:#fff;color:var(--ink)}
.mobile-nav a,.mobile-nav summary{color:var(--ink)}
/* transparent header over the photo hero (home + project page), solid white once scrolled */
[data-page="home"] .site-header:not(.is-solid),[data-page="project-detail"] .site-header:not(.is-solid){background:linear-gradient(180deg,rgba(8,9,10,.62),rgba(8,9,10,0));border-bottom-color:transparent;backdrop-filter:none}
[data-page="home"] .site-header:not(.is-solid) :is(.nav-desktop>a,.nav-desktop summary,.icon-btn),
[data-page="project-detail"] .site-header:not(.is-solid) :is(.nav-desktop>a,.nav-desktop summary,.icon-btn){color:#fff}
[data-page="home"] .site-header:not(.is-solid) .icon-btn,[data-page="project-detail"] .site-header:not(.is-solid) .icon-btn{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.4)}
[data-page="home"] .site-header:not(.is-solid) .header-cta,[data-page="project-detail"] .site-header:not(.is-solid) .header-cta{color:#f1d9a6;border-color:rgba(241,217,166,.8);background:rgba(8,9,10,.25)}
[data-page="home"] .site-header.is-solid,[data-page="project-detail"] .site-header.is-solid{background:rgba(255,255,255,.96);border-bottom-color:var(--line)}
@media (max-width:900px){[data-page="home"] .site-header,[data-page="project-detail"] .site-header{background:rgba(255,255,255,.97)!important;border-bottom-color:var(--line)!important}
  [data-page="home"] .site-header :is(.nav-desktop>a,.icon-btn),[data-page="project-detail"] .site-header :is(.icon-btn){color:var(--ink)!important;background:#fff!important;border-color:var(--line)!important}}

/* ---------- buttons ---------- */
.btn-gold,.fk-search{background:linear-gradient(135deg,#efd196 0%,#d6a747 52%,#b88a2c 100%);color:#1a1205;border:1px solid #b88a2c}
.btn-gold:hover,.fk-search:hover{filter:brightness(1.05);box-shadow:0 6px 18px rgba(184,138,44,.35)}
.btn-outline{background:#fff;color:var(--gold-light);border-color:var(--gold)}
.btn-outline:hover{background:rgba(201,154,59,.1)}
.btn-ghost,.btn-mail{background:#fff;color:var(--ink);border:1px solid var(--line)}
.btn-ghost:hover,.btn-mail:hover{border-color:var(--gold);color:var(--gold-light)}
.btn-call{background:#fff;color:var(--gold-light);border:1px solid var(--gold)}
.btn-call:hover{background:rgba(201,154,59,.1)}
.btn-whatsapp{background:#eaf6ef;color:#1d7a4a;border:1px solid #9fd3b6}
.btn-whatsapp:hover{background:#dcf0e5}
.btn-black{background:#1b1710;color:#fff;border:1px solid #1b1710}
.btn-black:hover{background:#2b251a;color:#fff;border-color:#2b251a}
.btn-glass{background:rgba(8,9,10,.45);color:#fff;border:1px solid rgba(255,255,255,.55)}
.btn-wa-icon{background:#eaf6ef;color:#1d7a4a;border:1px solid #9fd3b6}
.link-arrow,.link-button{color:var(--gold-light)}
.link-arrow:hover{color:var(--gold-bright)}

/* ---------- surfaces & cards ---------- */
.card,.panel,.side-card,.stat-row,.card-listing,.property-list-card,.team-card,.dev-card2,.rel-card,.pr-card,.prj-banner,.faq-item,.lyp-step,.fee-group,
.fact,.amen,.pay2-list li,.qr-row,.pd-box,.info-toggle,.reg-inline,.calc-panel,.cm-topic .info-toggle,.crow-pill,.fk-chip,.agent-meta div,.fact-list div,.report-card,.inv-point,.inv-tool,.cf-in input{
  background:#fff;border-color:var(--line)}
.card,.card-listing,.property-list-card,.team-card,.dev-card2,.rel-card,.pr-card,.panel,.side-card,.amen,.fact{box-shadow:0 1px 2px rgba(87,66,16,.06)}
.card:hover,.property-list-card:hover,.team-card:hover,.dev-card2:hover,.rel-card:hover{box-shadow:var(--shadow-1);border-color:var(--gold-dim)}
.property-list-media,.gcar-item,.gal2-item,.gal .g,.team-card .t-photo,.gal,.lb-thumbs button{background:#f1ede2}
.gal{background:#fff}
.spec-bar,.stat-row{background:#fff}
.divider{background:var(--line)}
.notice{background:#fff8e6;border-color:#ecd49a;color:#5b4710}
.badge,.type-pill{background:var(--near-black);color:var(--ink);border-color:var(--line)}
.eyebrow{color:var(--gold-light)}
.eyebrow::before,.eyebrow>span{background:var(--gold)}
table,.calc-row{border-color:var(--line)}

/* ---------- forms ---------- */
.af-field>label,.ff label,.cf label{color:#3a3324}
.af-field input:not([type=checkbox]),.af-field select,.af-field textarea,.cf-in input,.ff,.field-dark,.fk-btn,.fk-ac,.hsb-field,.hsb-tx{background:#fff;color:var(--white);border-color:#dccfae;color-scheme:light}
.af-field input::placeholder,.af-field textarea::placeholder,.fk-ac input::placeholder,.field-dark::placeholder{color:#8a8068;opacity:1}
.af-field select.is-empty{color:#8a8068}.af-field select:not(.is-empty){color:var(--white)}
.af-field .phone-group select,.af-field .phone-group select:not(.is-empty){color:#4b4332;background:#f8f5ee}
.af-field select option{background:#fff;color:var(--white)}.af-field select option[value=""]{color:#8a8068}
.af-field input:focus,.af-field select:focus,.af-field textarea:focus,.cf-in input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,154,59,.2)}
.af-field.invalid input:not([type=checkbox]),.af-field.invalid select,.af-field.invalid textarea{border-color:var(--danger);box-shadow:0 0 0 2px rgba(184,64,47,.12)}
.af-err,.cf-err,.fk-msg{color:#b8402f}
.af-legal,.af-legal a,.af-consent a{color:var(--muted)}
.af-legal a,.af-consent a{color:var(--gold-light);text-decoration:underline}
.af-hp{display:none}
.fk-val{color:var(--muted)}.has-value .fk-val{color:var(--white)}
.fk-ac input{color:var(--white)}
.fk-chev{color:var(--muted)}
.fk-btn:hover{border-color:var(--gold)}
.has-value>.fk-btn,.fk-ac.has-value{border-color:var(--gold-dim)}
.fk-menu{background:#fff;border-color:var(--line);box-shadow:var(--shadow-2)}
.fk-menu li{color:var(--ink)}.fk-menu li.act,.fk-menu li:hover{background:var(--near-black)}
.fk-menu li.fk-head{background:rgba(201,154,59,.16);color:var(--gold-light)}
.fk-menu li.sel{color:var(--gold-light)}
.fk-chip.on{background:rgba(201,154,59,.2);color:var(--gold-light);border-color:var(--gold)}
.fk-panel{background:#fff}.fk-ph{border-color:var(--line)}.fk-pf{background:#fff;border-color:var(--line)}
.fk-x{color:var(--ink)}.fk-x:hover{background:var(--near-black)}
.filter-bar,.fk-shell{background:#fff;border-color:var(--line);box-shadow:var(--shadow-1)}
.crow-pill{color:var(--ink)}.crow-pill.on{background:rgba(201,154,59,.2);color:var(--gold-light);border-color:var(--gold)}
.af-chip{background:rgba(201,154,59,.16);color:var(--gold-light);border-color:var(--gold-dim)}
.seg,.segmented{background:var(--near-black);border-color:var(--line)}
.seg button.active{background:linear-gradient(135deg,#efd196,#c99a3b);color:#1a1205}
.ac-list{background:#fff;border-color:var(--line);box-shadow:var(--shadow-2)}

/* ---------- homepage search + hero ---------- */
.hsb{background:rgba(255,255,255,.97);border-color:rgba(255,255,255,.6);box-shadow:0 18px 50px rgba(0,0,0,.28)}
.hsb-tx{background:#f8f5ee;border-color:var(--line)}
.hsb-tx button{color:var(--muted)}.hsb-tx button.active{background:rgba(201,154,59,.18);border-color:var(--gold);color:var(--gold-light)}
.hsb-field{background:#fff;border-color:#dccfae}.hsb-div{background:var(--line)}
.hsb .fk-btn,.hsb .fk-ac{background:transparent;border:0}
.hsb .fk-btn .fk-val{color:var(--white)}
.hero-slider .search-module,.search-module{background:rgba(255,255,255,.97);border-color:rgba(255,255,255,.6)}
.hero-scrim,.prj2-hero::after,.page-hero::after,.about-hero::after,.prj-hero::after,.hero-media::after{filter:none}
.hs-title em{color:#f0cf8c}
.hero-dots button{background:rgba(255,255,255,.55)}.hero-dots button.active{background:#e8bd62}

/* ---------- promo / banner blocks (were dark gradients) ---------- */
.promo-project,.promo-mortgage,.cta-band,.advisory-banner,.report-banner{background:linear-gradient(120deg,#fffaf0,#fbf1da);border:1px solid var(--gold-dim)}
.promo-project .pr-body h3,.promo-mortgage h2,.cta-band h2,.advisory-banner h2,.report-banner h2{color:var(--white)}
.pr-desc,.pm-body p,.cta-band p,.advisory-banner p,.report-banner p{color:var(--muted)}
.promo-list{background:linear-gradient(120deg,#fbf1da,#fffaf0);border:1px solid var(--gold-dim)}
.promo-list h3{color:var(--white)}.promo-list p{color:var(--muted)}
.promo-offplan .section-head p,.promo-featured .section-head p{color:var(--muted)}
.pr-card-body{color:var(--muted)}.pr-card-body b{color:var(--ink)}
.pr-tag{color:#f3efe6}
.prj2-lead{background:linear-gradient(120deg,#fffaf0,#fbf1da);border-color:var(--gold-dim)}
.prj2-lead-text p{color:var(--muted)}

/* ---------- property / project pages ---------- */
.pd-head,.spec-bar{background:#fff}
.loc-overlay{background:rgba(255,255,255,.96);border-color:var(--line);box-shadow:0 10px 30px rgba(87,66,16,.25)}
.loc-map::after{background:rgba(255,255,255,.1)}
.loc-map2-link span{background:#fff;color:var(--white);border-color:var(--line)}
.prj2-bar{background:#fff;border-bottom-color:var(--line)}
.prj2-intro p{color:var(--ink)}
.pay2-bar .pay2-seg.s2,.pay2-bar .pay2-seg.s3{color:#fff}
.pay2-list li{border-left-color:var(--gold)}
.pay2-n{background:rgba(201,154,59,.16);color:var(--gold-light)}
.guide-step .n,.lyp-step .n{background:rgba(201,154,59,.16);color:var(--gold-light)}
.faq-q{color:var(--white)}.faq-a{color:var(--muted)}
.faq-item.open,.faq-item:hover{border-color:var(--gold-dim)}
.info-toggle{color:var(--white)}
.qr-img{background:#fff;border:1px solid var(--line)}
.tab-nav,.sticky-cta,.mobile-bar{background:rgba(255,255,255,.97);border-color:var(--line);box-shadow:0 -6px 20px rgba(87,66,16,.1)}
.tab-nav a{color:var(--muted)}.tab-nav a.active{color:var(--gold-light)}
.share-menu{background:#fff;border-color:var(--line);box-shadow:var(--shadow-2)}
.share-menu a:hover,.share-menu button:hover{background:var(--near-black)}
.modal,.modal-box{background:#fff;border-color:var(--line);color:var(--ink)}
.modal-back{background:rgba(35,28,12,.62)}
.modal-close{background:#fff;color:var(--ink);border:1px solid var(--line)}
.cookie-banner,#cookie-banner{background:#fff;border-color:var(--gold-dim);box-shadow:var(--shadow-2);color:var(--ink)}
.toast{background:#1b1710;color:#fff}
.fee-row b,.calc-big{color:var(--white)}.calc-big{color:var(--gold-light)}
.fee-note.warn{background:#fff8e6;color:#7a5a0a;border-color:#ecd49a}
.cf-in input{color:var(--white)}
.notice strong{color:#5b4710}

/* ---------- team / developers / misc ---------- */
.dc-logo,.dev-logo,.dev-chip,.dv-intro img{background:#fff;border:1px solid var(--line)}
.dev-tile{background:#fff;border-color:var(--line)}
.team-card h3 a,.dc-body strong,.rel-card strong{color:var(--white)}
.agent-hero img{border-color:var(--gold-dim)}
.back-link,.prj2-back{color:var(--muted)}
.ag-tabs button,.about-tabs button{background:#fff;color:var(--ink);border-color:var(--line)}
.ag-tabs button.active,.about-tabs button.active{background:rgba(201,154,59,.18);color:var(--gold-light);border-color:var(--gold)}
.inv-ic,.amen-ic{color:var(--gold-bright)}
.inv-points,.inv-tool{background:#fff}
.stat .value,.inv-point h3{color:var(--gold-light)}

/* ---------- footer ---------- */
.site-footer{background:#faf7ef;border-top:1px solid var(--line);color:var(--muted)}
.site-footer a{color:var(--ink)}.site-footer a:hover{color:var(--gold-light)}
.footer-col h4{color:var(--gold-light)}
.footer-bottom{border-top:1px solid var(--line);color:var(--muted-2)}
.footer-social a{border-color:var(--line);color:var(--ink);background:#fff}
.footer-actions .btn-outline{background:#fff}

/* ---------- misc: scrollbars, tables, code ---------- */
*{scrollbar-color:#d9bd7e #f4efe2}
hr{border-color:var(--line)}

/* ---------- light surfaces that live INSIDE a photo hero: restore the light palette ---------- */
.hsb,.hsb-wrap .hsb,.hero-slider .search-module,.search-module{
  --white:#15120b; --ink:#2c261b; --muted:#675f4e; --muted-2:#7a7058;
  --gold-light:#7c580b; --gold-bright:#94690f; --line:#e6dfce; --line-soft:#f0eadc;
  --panel:#ffffff; --near-black:#f8f5ee; color-scheme:light;
}
.hsb :is(.fk-menu){--white:#15120b}

/* contrast polish */
:root{--gold-light:#7c580b}
.card-tag,.project-status-badge,.photo-count,.video-chip,.mini-badge,.badge-extra,.media-btn,.media-actions button,.pr-tag{background:rgba(12,13,15,.66)!important;color:#fbf8f1!important}
.card-tag.status-rent,.status-rent{color:#c8f0da!important}

/* secondary buttons on light cream banners (the translucent "glass" style is only for photos) */
.promo-project .btn-glass,.promo-mortgage .btn-glass,.cta-band .btn-glass,.inv-banner .btn-glass{background:#fff;color:var(--white);border:1px solid var(--gold)}
.promo-project .btn-glass:hover,.cta-band .btn-glass:hover{background:rgba(201,154,59,.12)}

/* lightbox controls stay light-on-dark */
.lightbox button,.lightbox .lb-close,.lightbox .lb-nav{color:#fff}
.lightbox .lb-close,.lightbox .lb-nav,.lightbox button.lb-close{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.4)}
.lightbox .lb-close:hover,.lightbox .lb-nav:hover{background:var(--gold);color:#1a1205;border-color:var(--gold)}
.lightbox .lb-thumbs button{background:#2a2a2a;border:1px solid transparent}
.lightbox .lb-thumbs button.active{border-color:var(--gold)}
.lightbox .modal-close{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.4)}
.lightbox .modal-close:hover{background:var(--gold);color:#1a1205;border-color:var(--gold)}