/* ============================================================
   MyCMS public theme — token-driven, multi-theme engine.

   ALL colors live in CSS custom properties. :root holds the
   default "Developer" dark palette (indigo/violet) AND every
   structural token a theme can override. New themes are added
   as `[data-theme="x"]` blocks at the BOTTOM of this file that
   override only the palette tokens — never the rules above.

   The active theme is chosen in Admin → Settings and applied as
   <html data-theme="x"> in layouts/public.php. The admin Pages
   live preview loads this same file so editing matches render.

   ── THEME CONTRACT (the only tokens a new theme should set) ──
   Surfaces : --bg --surface --surface-2 --band
   Lines    : --border --border-soft
   Text     : --ink --heading --muted
   Accents  : --accent --accent-2 --accent-strong
              --accent-soft --accent-soft-2 --accent-border
   Links    : --link --link-hover
   On-color : --on-accent (text on solid accent) --on-soft (text on soft accent)
   Code     : --code-ink --code-bg  Badge: --badge-ink
   Media    : --media-bg --fallback-1 --fallback-2
   Shadow   : --shadow-card --shadow-hover --brand-glow
   Select   : --selection-bg --selection-ink
   Navbar   : --navbar-bg --navbar-ink --navbar-link --navbar-link-hover
              --navbar-border --navbar-shadow --navbar-toggler-border --navbar-toggler-icon
   Hero band: --hero-ink --hero-subink --hero-title-ink --hero-subtitle-ink
              --hero-glow --hero-grad-top --hero-grad-bottom
              --hero-overlay-top --hero-overlay-bottom --hero-overlay-plain
              --hero-shadow --hero-grid
   Footer   : --footer-heading
   (The hero/page-hero is intentionally a rich "feature band" with light
    text in every theme — even light themes — so a light site still gets a
    bold banner. Themes set the band's gradient via --hero-grad-*.)
   ============================================================ */
:root{
    /* ---- Developer (default dark) palette ---- */
    --bg:#0d1117;            /* page canvas               */
    --surface:#161b22;       /* cards                     */
    --surface-2:#1b212b;     /* nested / hover / code      */
    --band:#10141d;          /* subtle alternating band    */
    --border:#2a313c;        /* card + control borders     */
    --border-soft:#222831;
    --ink:#e6edf3;           /* primary text               */
    --heading:#f4f6fb;       /* headings inside content     */
    --muted:#9aa6b6;         /* dates / meta only          */
    --accent:#a78bfa;        /* violet — headings, accents */
    --accent-2:#818cf8;      /* indigo — buttons / glow    */
    --accent-strong:#c4b5fd; /* brighter accent (hovers)   */
    --accent-soft:rgba(167,139,250,.14);
    --accent-soft-2:rgba(167,139,250,.24);
    --accent-border:rgba(167,139,250,.40);
    --link:#93b4ff;          /* links                      */
    --link-hover:#bcd0ff;
    --on-accent:#0d1117;     /* text on a solid accent fill */
    --on-soft:#ffffff;       /* text on a soft-accent hover */
    --badge-ink:#d8ccff;     /* text inside accent badges   */
    --code-ink:#d8ccff;      /* inline code text            */
    --code-bg:#0f1420;       /* code blocks / media bg      */
    --media-bg:#0f1420;
    --fallback-1:#6d5bd0;    /* post-card image fallback grad */
    --fallback-2:#9b7cf0;
    --selection-bg:rgba(129,140,248,.40);
    --selection-ink:#ffffff;
    --shadow-card:0 1px 2px rgba(0,0,0,.4);
    --shadow-hover:0 14px 30px rgba(0,0,0,.55);
    --brand-glow:0 2px 10px rgba(124,93,237,.45);

    /* Navbar */
    --navbar-bg:#0d1117;
    --navbar-ink:#ffffff;
    --navbar-link:var(--muted);
    --navbar-link-hover:#ffffff;
    --navbar-border:var(--border);
    --navbar-shadow:0 1px 0 rgba(0,0,0,.4);
    --navbar-toggler-border:rgba(255,255,255,.10);
    --navbar-toggler-icon:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,0.6)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");

    /* Hero / page-hero feature band */
    --hero-ink:#ffffff;
    --hero-subink:rgba(230,237,243,.85);
    --hero-title-ink:#f4f6fb;
    --hero-subtitle-ink:#c4cdda;
    --hero-glow:rgba(129,140,248,.25);
    --hero-grad-top:#10131c;
    --hero-grad-bottom:var(--bg);
    --hero-overlay-top:rgba(8,10,18,.35);
    --hero-overlay-bottom:rgba(8,10,18,.78);
    --hero-overlay-plain:rgba(8,10,18,.25);
    --hero-shadow:0 2px 28px rgba(124,93,237,.45);
    --hero-grid:rgba(255,255,255,.025);

    /* Footer */
    --footer-heading:#c4cdda;

    --mono:'JetBrains Mono','Cascadia Code','SFMono-Regular',ui-monospace,Consolas,'Liberation Mono',monospace;

    /* Fonts — overridable in Admin → Appearance (defaults preserve the original look). */
    --font-body:'Inter',-apple-system,Segoe UI,Roboto,sans-serif;
    --font-heading:'Fraunces','Georgia',serif;

    /* Aliases so the Author page's --d-* rules share this palette. */
    --d-bg:var(--bg); --d-surface:var(--surface); --d-surface-2:var(--surface-2);
    --d-border:var(--border); --d-border-soft:var(--border-soft);
    --d-text:var(--ink); --d-muted:var(--muted);
    --d-accent:var(--accent); --d-accent-2:var(--accent-2);
    --d-accent-soft:var(--accent-soft); --d-link:var(--link);
}
/* Clip (not hide) horizontal overflow so the 100vw full-bleed bands
   never create a horizontal scrollbar — `clip` keeps position:sticky working. */
html, body{ overflow-x:clip; max-width:100%; }
body{ font-family:var(--font-body); color:var(--ink); background:var(--bg); }
body.bg-light{ background:var(--bg) !important; }
h1,h2,h3,.navbar-brand,.display-3,.display-4,.hero__heading{ font-family:var(--font-heading); }
.navbar-brand{ font-weight:700; letter-spacing:-.01em; }
::selection{ background:var(--selection-bg); color:var(--selection-ink); }

/* Background / surface utility remaps so Bootstrap helpers follow the theme. */
.bg-light{ background-color:var(--band) !important; }
.bg-white{ background-color:var(--surface) !important; }
.text-muted{ color:var(--muted) !important; }
.text-primary{ color:var(--accent) !important; }
hr{ border-top-color:var(--border); }
.border,.border-top,.border-bottom,.border-left,.border-right{ border-color:var(--border) !important; }

/* ---- Header: theme bar with a hairline + accent brand mark. ---- */
.site-navbar{ background:var(--navbar-bg) !important; border-bottom:1px solid var(--navbar-border);
    box-shadow:var(--navbar-shadow); }
.site-navbar .navbar-brand{ color:var(--navbar-ink); }
.brand-logo{ display:inline-block; vertical-align:middle; border-radius:7px;
    box-shadow:var(--brand-glow); }
/* Match Bootstrap's own `.navbar-dark .navbar-nav .nav-link` specificity (0,3,0)
   so our token wins by source order — otherwise navbar-dark forces white links,
   which vanish on a light theme's light navbar. */
.site-navbar .navbar-nav .nav-link{ color:var(--navbar-link); }
.site-navbar .navbar-nav .nav-link:hover,.site-navbar .navbar-nav .nav-link:focus{ color:var(--navbar-link-hover); }
.site-navbar .navbar-toggler{ border-color:var(--navbar-toggler-border); }
.site-navbar .navbar-toggler-icon{ background-image:var(--navbar-toggler-icon); }

/* Full-bleed escape from the centered content column. Uses calc with 50%
   so it centers on the content box (not the scrollbar-inclusive 100vw edge). */
.fullbleed{ width:100vw; position:relative; left:50%; right:50%; margin-left:-50vw; margin-right:-50vw; }

/* ---- Flush hero ----
   <main> keeps py-5 (3rem top) so non-hero pages get comfortable spacing.
   The homepage emits `home-flush`; interior pages with a top hero band emit
   `page-flush`. Both zero main's top padding so the band touches the header
   with NO gap. Bootstrap's .py-5 is !important, so this must be too. */
body.home-flush main,
body.page-flush main{ padding-top:0 !important; }

/* ---- Optional fixed header (Settings: header_fixed) ----
   The offset lives on <body> and must equal the navbar height EXACTLY
   (56px) so the flush hero sits right under the bar with no gap. Non-hero
   pages keep their breathing room via main's own py-5. */
body.has-fixed-header{ padding-top:56px; }

/* ---- Hero (homepage) — feature band with a soft accent glow ---- */
.hero{ position:relative; color:var(--hero-ink); overflow:hidden;
    background:
        radial-gradient(1000px 460px at 50% -15%, var(--hero-glow), transparent 70%),
        linear-gradient(180deg,var(--hero-grad-top) 0%, var(--hero-grad-bottom) 100%);
    background-size:cover; background-position:center; }
.hero__overlay{ position:absolute; inset:0;
    background:linear-gradient(180deg,var(--hero-overlay-top) 0%,var(--hero-overlay-bottom) 100%); }
.hero--plain .hero__overlay{ background:var(--hero-overlay-plain); }
.hero__inner{ position:relative; z-index:1; max-width:820px;
    padding:6rem 1.25rem; margin:0 auto; }
.hero--left .hero__inner{ margin-left:max(1.25rem,calc((100vw - 1140px)/2)); text-align:left; }
.hero--center .hero__inner{ text-align:center; }
.hero__heading{ font-weight:700; font-size:clamp(2.4rem,6vw,4rem); line-height:1.05;
    letter-spacing:-.02em; margin-bottom:1rem; text-shadow:var(--hero-shadow); }
.hero__subheading{ font-size:clamp(1.05rem,2.2vw,1.35rem); color:var(--hero-subink);
    max-width:46ch; margin-bottom:2rem; }
.hero--center .hero__subheading{ margin-left:auto; margin-right:auto; }
.hero .btn{ border-radius:50rem; padding:.75rem 1.9rem; font-weight:600; }
.hero .btn-primary{ background:var(--accent-2); border-color:var(--accent-2); color:var(--on-accent); }
.hero .btn-primary:hover{ background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
.hero .btn-outline-light{ border-width:2px; }
@media (max-width:575.98px){ .hero__inner{ padding:4rem 1.25rem; } }

/* ---- Page hero (shorter banner for Blog / Pages / Author / Project) ----
   Same feature-band family as the homepage hero, less tall, with a faint
   grid texture. Sits flush under the header via page-flush. */
.page-hero{ position:relative; color:var(--hero-ink); overflow:hidden;
    background:
        radial-gradient(900px 380px at 50% -10%, var(--hero-glow), transparent 70%),
        linear-gradient(180deg,var(--hero-grad-top) 0%, var(--hero-grad-bottom) 100%); }
.page-hero::after{ content:""; position:absolute; inset:0;
    background-image:
        linear-gradient(var(--hero-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--hero-grid) 1px, transparent 1px);
    background-size:42px 42px; opacity:.6; }
.page-hero__inner{ position:relative; z-index:1; max-width:1140px; margin:0 auto;
    padding:3.25rem 1.25rem; text-align:center; }
.page-hero__title{ font-weight:700; font-size:clamp(1.9rem,4.5vw,2.9rem); line-height:1.1;
    letter-spacing:-.02em; margin:0; color:var(--hero-title-ink); text-shadow:var(--hero-shadow); }
.page-hero__subtitle{ color:var(--hero-subtitle-ink); margin:.6rem 0 0; font-size:1.05rem; }
@media (max-width:575.98px){ .page-hero__inner{ padding:2.5rem 1.25rem; } }

/* ---- Cards ---- */
.card{ background:var(--surface); border:1px solid var(--border); border-radius:.7rem;
    color:var(--ink); box-shadow:var(--shadow-card); }
.card-header{ background:var(--surface); border-bottom:1px solid var(--border-soft); color:var(--ink); }
.card-header.bg-white{ background:var(--surface) !important; }

/* ---- Post card grid ---- */
.post-card{ border:1px solid var(--border); border-radius:1rem; overflow:hidden; height:100%;
    background:var(--surface); box-shadow:var(--shadow-card);
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.post-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-hover);
    border-color:var(--accent); }
.post-card__media{ position:relative; aspect-ratio:16/9; background:var(--media-bg); overflow:hidden; }
.post-card__media img{ width:100%; height:100%; object-fit:cover; }
.post-card__media--fallback{ display:flex; align-items:center; justify-content:center;
    color:#fff; font-size:2rem;
    background:linear-gradient(135deg,var(--fallback-1),var(--fallback-2)); }
.post-card .card-body{ padding:1.25rem 1.35rem 1.45rem; }
.post-card__title{ font-size:1.2rem; line-height:1.3; margin:.35rem 0 .5rem; }
.post-card__title a{ color:var(--ink); }
.post-card__title a:hover{ color:var(--accent); text-decoration:none; }
.post-card__excerpt{ color:var(--muted); font-size:.95rem; }
.read-more{ font-weight:600; color:var(--accent); }
.read-more:hover{ color:var(--accent-strong); }

/* ---- Badges / chips ---- */
.badge-primary{ background:var(--accent-soft) !important; color:var(--badge-ink) !important;
    border:1px solid var(--accent-border); font-weight:600; }
a.badge-primary:hover{ background:var(--accent-soft-2) !important; color:var(--on-soft) !important; text-decoration:none; }
.badge-light{ background:var(--surface-2) !important; color:var(--muted) !important;
    border-color:var(--border) !important; }

/* ---- Buttons ---- */
.btn-primary{ background:var(--accent-2); border-color:var(--accent-2); color:var(--on-accent); font-weight:600; }
.btn-primary:hover,.btn-primary:focus{ background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
.btn-outline-secondary{ color:var(--muted); border-color:var(--border); background:var(--surface-2); }
.btn-outline-secondary:hover,.btn-outline-secondary:focus{ color:var(--on-soft); border-color:var(--accent); background:var(--accent-soft); }
.btn-link{ color:var(--link); }
.btn-link:hover{ color:var(--link-hover); }

/* ---- List groups (blog category sidebar, recent posts) ---- */
.list-group-item{ background:var(--surface); border-color:var(--border-soft); color:var(--ink); }
.list-group-item-action{ color:var(--ink); }
.list-group-item-action:hover,.list-group-item-action:focus{ background:var(--surface-2); color:var(--on-soft); }
.list-group-item.active{ background:var(--accent-2) !important; border-color:var(--accent-2) !important;
    color:var(--on-accent) !important; font-weight:600; }
.list-group-item a{ color:var(--link); }
.list-group-item a:hover{ color:var(--link-hover); }

/* ---- Alerts / thumbnails ---- */
.alert-info{ background:var(--surface); color:var(--ink);
    border:1px solid var(--border); border-left:3px solid var(--accent); }
.alert-info strong{ color:var(--accent); }
.img-thumbnail{ background:var(--surface-2); border-color:var(--border); }

/* ---- Footer ---- */
footer.bg-white{ background-color:var(--bg) !important; }
footer{ border-color:var(--border) !important; color:var(--muted); }
footer .border-top{ border-color:var(--border) !important; }
footer h6{ color:var(--footer-heading) !important; }
footer .text-muted,footer a.text-muted{ color:var(--muted) !important; }
footer a,footer a.text-muted:hover{ color:var(--link) !important; }

.section-title{ font-size:1.6rem; letter-spacing:-.01em; color:var(--ink); }

/* ---- Readable long-form content (posts & pages) ---- */
.content-body, .home-body{ font-size:1.0625rem; line-height:1.7; max-width:70ch; margin-left:auto; margin-right:auto; color:var(--ink); }
.content-body p, .home-body p{ margin:0 0 1.25em; }
.content-body h2, .home-body h2{ font-size:1.6rem; line-height:1.25; margin:2rem 0 .75rem; color:var(--heading); }
.content-body h3, .home-body h3{ font-size:1.3rem; line-height:1.3; margin:1.6rem 0 .5rem; color:var(--heading); }
.content-body h4, .home-body h4{ color:var(--heading); }
.content-body ul, .content-body ol{ margin:0 0 1.25em 1.25em; }
.content-body li{ margin-bottom:.4em; }
.content-body li::marker, .home-body li::marker{ color:var(--accent); }
.content-body blockquote, .home-body blockquote{ margin:1.5em 0; padding:.25em 1.25em; border-left:4px solid var(--accent); color:var(--muted); font-style:italic; }
.content-body img, .home-body img{ max-width:100%; height:auto; border-radius:.5rem; margin:1.5em 0; }
.content-body a, .home-body a{ color:var(--link); }
.content-body a:hover, .home-body a:hover{ color:var(--link-hover); }
.content-body code, .home-body code{ font-family:var(--mono); font-size:.9em;
    background:var(--surface-2); color:var(--code-ink); padding:.12em .4em; border-radius:.3rem; }
.content-body pre, .home-body pre{ background:var(--code-bg); border:1px solid var(--border);
    border-radius:.6rem; padding:1rem 1.15rem; overflow:auto; margin:1.5em 0; }
.content-body pre code, .home-body pre code{ background:transparent; color:var(--ink); padding:0; }
.content-body table, .home-body table{ width:100%; margin-bottom:1.25em; }
.content-body th, .content-body td, .home-body th, .home-body td{
    border:1px solid var(--border); padding:.5rem .65rem; }
.content-body th, .home-body th{ background:var(--surface-2); }

/* ============================================================
   THEME PALETTES — each block overrides ONLY contract tokens.
   Developer (default) lives in :root above. The three below are
   added via Admin → Settings → Theme. (Palettes designed by Cha,
   WCAG-AA contrast verified.)
   ============================================================ */

/* ============================================================
   THEME: Daylight — clean LIGHT, cool royal-blue accent.
   ============================================================ */
[data-theme="daylight"]{
    /* Surfaces — light canvas, white cards */
    --bg:#f7f9fc;
    --surface:#ffffff;
    --surface-2:#eef2f8;      /* nested / hover / inline-code bg */
    --band:#eef2f8;           /* alternating band */
    /* Lines */
    --border:#dde3ec;
    --border-soft:#e7ecf3;
    /* Text — dark on light */
    --ink:#1f2733;
    --heading:#0f1623;
    --muted:#586679;          /* AA-safe meta grey */
    /* Accents — royal blue */
    --accent:#2563eb;
    --accent-2:#1d4ed8;
    --accent-strong:#1e40af;  /* darker for hover on light bg */
    --accent-soft:rgba(37,99,235,.14);
    --accent-soft-2:rgba(37,99,235,.24);
    --accent-border:rgba(37,99,235,.40);
    /* Links — dark enough for white & band */
    --link:#1d4ed8;
    --link-hover:#1e3a8a;
    /* On-color */
    --on-accent:#ffffff;      /* white on solid blue */
    --on-soft:#1d4ed8;        /* dark accent on translucent soft tint */
    --badge-ink:#1d4ed8;
    /* Code */
    --code-ink:#1e40af;
    --code-bg:#eef2f8;        /* soft tint, not dark */
    /* Media + fallback (stays saturated — white text is hardcoded on it) */
    --media-bg:#e7ecf3;
    --fallback-1:#2563eb;
    --fallback-2:#60a5fa;
    /* Shadows — light-theme soft */
    --shadow-card:0 1px 2px rgba(0,0,0,.06);
    --shadow-hover:0 14px 30px rgba(0,0,0,.12);
    --brand-glow:0 2px 10px rgba(37,99,235,.22);
    /* Selection */
    --selection-bg:rgba(37,99,235,.22);
    --selection-ink:#0f1623;

    /* Navbar — LIGHT bar, dark text, dark-stroke toggler */
    --navbar-bg:#ffffff;
    --navbar-ink:#0f1623;
    --navbar-link:#586679;
    --navbar-link-hover:#0f1623;
    --navbar-border:#dde3ec;
    --navbar-shadow:0 1px 0 rgba(0,0,0,.06);
    --navbar-toggler-border:rgba(33,37,41,.18);
    --navbar-toggler-icon:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(33,37,41,0.75)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");

    /* Hero band — stays DARK with light text even in a light theme */
    --hero-ink:#ffffff;
    --hero-subink:rgba(235,242,255,.88);
    --hero-title-ink:#ffffff;
    --hero-subtitle-ink:#c9d8f5;
    --hero-glow:rgba(96,165,250,.30);
    --hero-grad-top:#1e3a8a;
    --hero-grad-bottom:#0f1f54;
    --hero-overlay-top:rgba(8,18,48,.30);
    --hero-overlay-bottom:rgba(8,18,48,.72);
    --hero-overlay-plain:rgba(8,18,48,.22);
    --hero-shadow:0 2px 28px rgba(15,31,84,.45);
    --hero-grid:rgba(255,255,255,.05);   /* faint light line on dark band */

    /* Footer */
    --footer-heading:#0f1623;
}

/* ============================================================
   THEME: Sandstone — warm LIGHT, terracotta / amber accent.
   ============================================================ */
[data-theme="sandstone"]{
    /* Surfaces — warm cream */
    --bg:#fbf7f1;
    --surface:#ffffff;
    --surface-2:#f4ece1;
    --band:#f4ece1;
    /* Lines */
    --border:#e7dccb;
    --border-soft:#efe6d8;
    /* Text — warm dark on cream */
    --ink:#2b2723;
    --heading:#1c1813;
    --muted:#6b5d4f;          /* AA-safe warm grey */
    /* Accents — terracotta + amber */
    --accent:#c2410c;
    --accent-2:#b45309;
    --accent-strong:#9a3412;  /* darker for hover on light bg */
    --accent-soft:rgba(194,65,12,.14);
    --accent-soft-2:rgba(194,65,12,.24);
    --accent-border:rgba(194,65,12,.40);
    /* Links */
    --link:#b45309;
    --link-hover:#7c2d12;
    /* On-color */
    --on-accent:#ffffff;      /* white on solid terracotta/amber */
    --on-soft:#9a3412;        /* dark accent on translucent soft tint */
    --badge-ink:#9a3412;
    /* Code */
    --code-ink:#9a3412;
    --code-bg:#f4ece1;        /* soft warm tint */
    /* Media + fallback (saturated — white text hardcoded on it) */
    --media-bg:#efe6d8;
    --fallback-1:#c2410c;
    --fallback-2:#f59e0b;
    /* Shadows — light-theme soft */
    --shadow-card:0 1px 2px rgba(60,40,20,.06);
    --shadow-hover:0 14px 30px rgba(60,40,20,.12);
    --brand-glow:0 2px 10px rgba(194,65,12,.22);
    /* Selection */
    --selection-bg:rgba(194,65,12,.20);
    --selection-ink:#1c1813;

    /* Navbar — LIGHT cream bar, dark text, dark-stroke toggler */
    --navbar-bg:#ffffff;
    --navbar-ink:#1c1813;
    --navbar-link:#6b5d4f;
    --navbar-link-hover:#1c1813;
    --navbar-border:#e7dccb;
    --navbar-shadow:0 1px 0 rgba(60,40,20,.06);
    --navbar-toggler-border:rgba(33,37,41,.18);
    --navbar-toggler-icon:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(33,37,41,0.75)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");

    /* Hero band — stays DARK warm with light text */
    --hero-ink:#fff7ed;
    --hero-subink:rgba(255,237,213,.90);
    --hero-title-ink:#fff7ed;
    --hero-subtitle-ink:#fcd9b6;
    --hero-glow:rgba(245,158,11,.30);
    --hero-grad-top:#7c2d12;
    --hero-grad-bottom:#451a03;
    --hero-overlay-top:rgba(40,16,4,.28);
    --hero-overlay-bottom:rgba(40,16,4,.72);
    --hero-overlay-plain:rgba(40,16,4,.22);
    --hero-shadow:0 2px 28px rgba(69,26,3,.45);
    --hero-grid:rgba(255,255,255,.05);   /* faint light line on dark band */

    /* Footer */
    --footer-heading:#1c1813;
}

/* ============================================================
   THEME: Midnight Teal — rich DARK, teal / emerald accent.
   ============================================================ */
[data-theme="midnight-teal"]{
    /* Surfaces — near-black, teal-tinted */
    --bg:#0c1417;
    --surface:#10211f;
    --surface-2:#16302c;
    --band:#0e1b1a;
    /* Lines */
    --border:#1f3a36;
    --border-soft:#1a322e;
    /* Text — light on dark */
    --ink:#e3efed;
    --heading:#f2faf8;
    --muted:#8aa6a2;
    /* Accents — teal / emerald */
    --accent:#2dd4bf;
    --accent-2:#14b8a6;
    --accent-strong:#5eead4;  /* brighter for hover on dark bg */
    --accent-soft:rgba(45,212,191,.14);
    --accent-soft-2:rgba(45,212,191,.24);
    --accent-border:rgba(45,212,191,.40);
    /* Links */
    --link:#5eead4;
    --link-hover:#99f6e4;
    /* On-color */
    --on-accent:#062b27;      /* deep teal-black on luminous accent */
    --on-soft:#ffffff;        /* white on dark translucent soft tint */
    --badge-ink:#a7f3e8;
    /* Code */
    --code-ink:#a7f3e8;
    --code-bg:#0a1816;
    /* Media + fallback */
    --media-bg:#0a1816;
    --fallback-1:#0f766e;
    --fallback-2:#2dd4bf;
    /* Shadows — dark-theme depth */
    --shadow-card:0 1px 2px rgba(0,0,0,.45);
    --shadow-hover:0 14px 30px rgba(0,0,0,.6);
    --brand-glow:0 2px 10px rgba(20,184,166,.40);
    /* Selection */
    --selection-bg:rgba(45,212,191,.38);
    --selection-ink:#062b27;

    /* Navbar — dark bar, light text, white-stroke toggler */
    --navbar-bg:#0c1417;
    --navbar-ink:#ffffff;
    --navbar-link:#8aa6a2;
    --navbar-link-hover:#ffffff;
    --navbar-border:#1f3a36;
    --navbar-shadow:0 1px 0 rgba(0,0,0,.4);
    --navbar-toggler-border:rgba(255,255,255,.10);
    --navbar-toggler-icon:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,0.6)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");

    /* Hero band — deep teal gradient, light text */
    --hero-ink:#ffffff;
    --hero-subink:rgba(227,239,237,.86);
    --hero-title-ink:#f2faf8;
    --hero-subtitle-ink:#bfe0db;
    --hero-glow:rgba(45,212,191,.28);
    --hero-grad-top:#0c2a27;
    --hero-grad-bottom:#0c1417;
    --hero-overlay-top:rgba(4,18,16,.35);
    --hero-overlay-bottom:rgba(4,18,16,.80);
    --hero-overlay-plain:rgba(4,18,16,.28);
    --hero-shadow:0 2px 28px rgba(20,184,166,.40);
    --hero-grid:rgba(255,255,255,.03);

    /* Footer */
    --footer-heading:#bfe0db;
}

/* ============================================================
   THEME: ACS Concrete — industrial LIGHT, black & safety-amber.
   Built for Asia Concrete Solutions, Inc. Text-level accents use
   amber-700 (AA on white); solid fills use amber-500 with black ink.
   ============================================================ */
[data-theme="acs-concrete"]{
    /* Surfaces — cool slate-white */
    --bg:#f8fafc;
    --surface:#ffffff;
    --surface-2:#f1f5f9;
    --band:#f1f5f9;
    /* Lines */
    --border:#e2e8f0;
    --border-soft:#f1f5f9;
    /* Text */
    --ink:#0f172a;
    --heading:#000000;
    --muted:#475569;
    /* Accents — amber */
    --accent:#b45309;         /* text-safe amber (links, markers)  */
    --accent-2:#f59e0b;       /* solid amber fill (buttons, bars)  */
    --accent-strong:#92400e;
    --accent-soft:rgba(245,158,11,.16);
    --accent-soft-2:rgba(245,158,11,.28);
    --accent-border:rgba(245,158,11,.55);
    /* Links */
    --link:#b45309;
    --link-hover:#78350f;
    /* On-color */
    --on-accent:#000000;      /* black on amber */
    --on-soft:#78350f;
    --badge-ink:#78350f;
    /* Code */
    --code-ink:#92400e;
    --code-bg:#f1f5f9;
    /* Media + fallback */
    --media-bg:#e2e8f0;
    --fallback-1:#0f172a;
    --fallback-2:#f59e0b;
    /* Shadows */
    --shadow-card:0 1px 2px rgba(15,23,42,.06);
    --shadow-hover:0 14px 30px rgba(15,23,42,.14);
    --brand-glow:0 1px 3px rgba(15,23,42,.18);
    /* Selection */
    --selection-bg:rgba(245,158,11,.35);
    --selection-ink:#000000;

    /* Navbar — white bar, black text */
    --navbar-bg:#ffffff;
    --navbar-ink:#000000;
    --navbar-link:#334155;
    --navbar-link-hover:#000000;
    --navbar-border:#e2e8f0;
    --navbar-shadow:0 1px 3px rgba(15,23,42,.08);
    --navbar-toggler-border:rgba(15,23,42,.18);
    --navbar-toggler-icon:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(15,23,42,0.8)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");

    /* Hero band — slate-950 → black with amber glow */
    --hero-ink:#ffffff;
    --hero-subink:#cbd5e1;
    --hero-title-ink:#ffffff;
    --hero-subtitle-ink:#fbbf24;
    --hero-glow:rgba(245,158,11,.22);
    --hero-grad-top:#0f172a;
    --hero-grad-bottom:#020617;
    --hero-overlay-top:rgba(15,23,42,.82);
    --hero-overlay-bottom:rgba(15,23,42,.88);
    --hero-overlay-plain:rgba(15,23,42,.60);
    --hero-shadow:none;
    --hero-grid:rgba(255,255,255,.04);

    /* Footer */
    --footer-heading:#ffffff;
}
[data-theme="acs-concrete"] .page-hero{ border-bottom:4px solid var(--accent-2); }
[data-theme="acs-concrete"] .page-hero__title{ text-transform:uppercase; font-weight:900; }

/* =====================================================================
   ACS components — used by the ACS header/footer templates and the
   ACS page content (Admin → Pages). Token-driven so they follow the
   active theme; tuned for the "ACS Concrete" theme.
   ===================================================================== */

/* --- Top announcement bar + header --- */
.acs-topbar{ background:#020617; color:#fff; font-size:.75rem; font-weight:600;
  border-bottom:1px solid rgba(245,158,11,.3); }
.acs-topbar .container{ display:flex; justify-content:space-between; align-items:center;
  gap:.75rem; padding-top:.6rem; padding-bottom:.6rem; }
.acs-topbar__badge{ background:var(--accent-2); color:#000; padding:.1rem .5rem; border-radius:.25rem;
  font-size:.625rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; margin-right:.75rem; }
.acs-topbar__text{ color:#cbd5e1; }
.acs-topbar a{ color:#fff; font-weight:700; white-space:nowrap; }
.acs-topbar a:hover{ color:#fbbf24; text-decoration:none; }

.acs-navbar{ min-height:80px; }
.acs-brand{ display:flex; align-items:center; color:#000 !important; }
.acs-brand:hover{ text-decoration:none; }
.acs-brand__logo{ height:56px; width:auto; border-radius:.25rem; box-shadow:var(--brand-glow); margin-right:.75rem; }
.acs-brand__name{ display:block; font-size:1.125rem; font-weight:800; letter-spacing:-.01em; line-height:1; color:var(--navbar-ink); }
.acs-brand__sub{ display:block; font-size:.625rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#64748b; margin-top:.2rem; }
.acs-navbar .navbar-nav .nav-link{ font-size:.875rem; font-weight:700; text-transform:uppercase;
  padding:.35rem 0; margin:0 .9rem; border-bottom:2px solid transparent; }
.acs-navbar .navbar-nav .nav-link:hover{ color:#d97706; }
.acs-navbar .navbar-nav .nav-link.active{ color:#000; border-bottom-color:var(--accent-2); }
.acs-cta{ display:inline-block; background:#000; color:#fbbf24 !important; border:1px solid var(--accent-2);
  font-weight:700; font-size:.75rem; text-transform:uppercase; padding:.6rem 1.25rem; border-radius:.25rem;
  letter-spacing:.03em; white-space:nowrap; }
.acs-cta:hover{ background:#1e293b; text-decoration:none; }
@media (max-width:991.98px){
  .acs-navbar .navbar-nav .nav-link{ margin:0; }
  .acs-navbar .navbar-collapse{ padding-bottom:1rem; }
}

/* --- Footer --- */
.acs-footer{ background:#000; color:#94a3b8; border-top:4px solid var(--accent-2); font-size:.8rem; }
.acs-footer h6{ color:#fff !important; font-weight:800; letter-spacing:.06em; }
.acs-footer a{ color:#cbd5e1 !important; }
.acs-footer a:hover{ color:#fbbf24 !important; text-decoration:none; }
.acs-footer__name{ color:#e2e8f0; font-weight:700; }
.acs-footer__tag{ color:#fbbf24; font-weight:600; }
.acs-footer__bottom{ border-top:1px solid #1e293b; }

/* --- Newsletter sign-up box (footer) --- */
.newsletter-signup{ scroll-margin-top:7rem; }
.newsletter-signup__text{ font-size:.85rem; }
.newsletter-signup__msg{ font-size:.85rem; font-weight:600; }
.newsletter-signup__msg--ok{ color:var(--accent); }
.newsletter-signup__msg--err{ color:#dc2626; }
.acs-footer .newsletter-signup__text{ color:#94a3b8; }
.acs-footer .newsletter-signup__msg--ok{ color:#fbbf24; }
.acs-footer .newsletter-signup__msg--err{ color:#fca5a5; }
.acs-footer .newsletter-signup .form-control{ background:#0f172a; border-color:#334155; color:#fff; }
.acs-footer .newsletter-signup .form-control::placeholder{ color:#64748b; }
.acs-footer .newsletter-signup .btn-primary{ background:var(--accent-2); border-color:var(--accent-2); color:#000; font-weight:800; text-transform:uppercase; font-size:.75rem; letter-spacing:.04em; }
.acs-footer .newsletter-signup .btn-primary:hover{ background:#fbbf24; border-color:#fbbf24; }

/* --- Page content building blocks --- */
.acs{ font-size:1rem; line-height:1.6; }
.home-body .acs, .home-body .acs-section{ max-width:none; }
.acs p{ margin:0 0 1rem; }
.acs img{ margin:0; border-radius:.5rem; }
.acs h2, .acs h3{ font-family:var(--font-heading); margin:0; color:var(--heading); }
.acs ul{ margin:0; padding:0; list-style:none; }
.acs li{ margin:0; }
.acs li::marker{ content:none; }

.acs-section{ padding:4rem 0; background:var(--bg); border-bottom:1px solid var(--border); }
.acs-section--white{ background:var(--surface); }
.acs-section:last-child{ border-bottom:0; }
.acs-section-head{ text-align:center; margin-bottom:3rem; }
.acs .acs-title{ font-size:1.875rem; font-weight:900; text-transform:uppercase; letter-spacing:-.02em; color:#000; }
.acs-section-head p{ color:var(--muted); font-size:.9rem; max-width:36rem; margin:.5rem auto 0; }
/* Amber rule under section titles (a pseudo-element, so the rich-text
   editor has no empty tag to strip). */
.acs-section-head::after{ content:""; display:block; width:4rem; height:4px; background:var(--accent-2); margin:1rem auto 0; }

/* Hero (image band) */
.acs-hero{ position:relative; overflow:hidden; color:#fff; padding:6rem 0; text-align:center;
  border-bottom:4px solid var(--accent-2); background:#0f172a; }
/* The background photo is a real <img> (so it can be swapped in the page
   editor), covered by the dark overlay; the text sits above both. */
.acs .acs-hero__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:0; }
.acs-hero::before{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(rgba(15,23,42,.82),rgba(15,23,42,.88)); }
.acs-hero > .container{ position:relative; z-index:2; }
.acs-hero .acs-pill{ display:inline-flex; align-items:center; background:#1e293b; border:1px solid #334155;
  padding:.35rem 1rem; border-radius:999px; margin-bottom:1.5rem; }
.acs-pill::before{ content:""; width:.5rem; height:.5rem; border-radius:50%; background:#fbbf24; margin-right:.5rem; }
.acs-pill__text{ font-size:.75rem; font-weight:700; color:#fbbf24; text-transform:uppercase; letter-spacing:.06em; }
.acs .acs-hero h1{ font-size:clamp(2.25rem,6vw,3.75rem); font-weight:900; text-transform:uppercase;
  letter-spacing:-.02em; line-height:1.05; margin:0 auto 1.5rem; color:#fff; max-width:56rem; }
.acs-hero h1 span{ color:#fbbf24; }
.acs .acs-hero p{ font-size:clamp(1.05rem,2vw,1.25rem); color:#cbd5e1; max-width:48rem; margin:0 auto 2rem; }
.acs-actions{ display:flex; flex-wrap:wrap; justify-content:center; gap:1rem; }

/* Buttons */
.acs-btn{ display:inline-block; font-weight:800; font-size:.875rem; text-transform:uppercase; letter-spacing:.06em;
  padding:.9rem 2rem; border-radius:.25rem; border:1px solid transparent; transition:background .15s; }
.acs-btn:hover{ text-decoration:none; }
.acs .acs-btn--amber, .acs-btn--amber{ background:var(--accent-2); color:#000 !important; box-shadow:0 10px 15px -3px rgba(0,0,0,.25); }
.acs-btn--amber:hover{ background:#fbbf24; }
.acs .acs-btn--black, .acs-btn--black{ background:#000; color:#fff !important; border-color:#334155; font-weight:700; }
.acs-btn--black:hover{ background:#1e293b; }

/* Stat ribbon */
.acs-stats{ background:var(--surface); border-bottom:1px solid var(--border); padding:2rem 0; text-align:center; }
.acs-stat__value{ font-size:1.875rem; font-weight:900; color:#000; line-height:1.2; margin:0 !important; }
.acs-stat__value--amber{ color:var(--accent-2); }
.acs-stat__label{ font-size:.75rem; font-weight:700; color:#64748b; text-transform:uppercase; letter-spacing:.06em; margin:.25rem 0 0 !important; }
.acs-statbar{ background:#0f172a; color:#fff; border-radius:.5rem; padding:1.25rem 1.5rem; margin-bottom:2.5rem; text-align:center; }
.acs-statbar .acs-stat__value{ font-size:1.5rem; color:#fbbf24; }
.acs-statbar .acs-stat__label{ color:#cbd5e1; font-size:.7rem; }

/* Cards */
.acs-card{ background:var(--surface); padding:2rem; border-radius:.5rem; border:2px solid #f1f5f9;
  box-shadow:var(--shadow-card); height:100%; transition:border-color .15s; }
.acs-card--thin{ border-width:1px; border-color:var(--border); }
.acs-card--hover:hover{ border-color:var(--accent-2); }
.acs .acs-card h3{ font-size:1.25rem; font-weight:700; color:#000; margin-bottom:.75rem; }
.acs-card__head{ display:flex; align-items:center; gap:.75rem; border-bottom:1px solid #f1f5f9;
  padding-bottom:.5rem; margin-bottom:.75rem; }
.acs .acs-card__head h2, .acs .acs-card h2{ font-size:1.25rem; font-weight:700; color:#000; }
.acs-card > h2{ border-bottom:1px solid #f1f5f9; padding-bottom:.5rem; margin-bottom:1rem !important; }
.acs .acs-card p{ color:#334155; }
.acs-card__text{ color:#475569; font-size:.875rem; line-height:1.65; margin:0 !important; }
.acs-num{ width:3rem; height:3rem; display:flex; align-items:center; justify-content:center; border-radius:.25rem;
  font-weight:900; font-size:1.25rem; margin-bottom:1rem; background:var(--accent-2); color:#000; }
.acs-num--black{ background:#000; color:#fbbf24; }
.acs-num--slate{ background:#1e293b; color:#fbbf24; font-size:.75rem; }

/* Tags / badges */
.acs-tag{ display:inline-block; font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.03em;
  padding:.2rem .6rem; border-radius:.25rem; background:var(--accent-2); color:#000; margin-bottom:.75rem; }
.acs-tag--sm{ font-size:.625rem; padding:.1rem .5rem; margin:0; }
.acs-tag--black{ background:#000; color:#fbbf24; }
.acs-tag--slate{ background:#1e293b; color:#fbbf24; }
.acs-tag--ink{ background:#0f172a; color:#fff; }

/* Lists */
.acs-dots li{ display:flex; align-items:center; color:#334155; font-size:.875rem; padding:.3rem 0; }
.acs-dots--bold li{ font-weight:600; }
.acs-dots li::before{ content:""; flex:0 0 auto; width:.5rem; height:.5rem; border-radius:50%;
  background:var(--accent-2); margin-right:.5rem; }
.acs-bullets li{ color:#334155; font-size:.875rem; padding:.25rem 0; }
.acs-bullets li::before{ content:"• "; }
.acs-times li{ display:flex; justify-content:space-between; align-items:center; padding:.5rem 0;
  border-bottom:1px solid #f1f5f9; font-size:.875rem; }
.acs-times li:last-child{ border-bottom:0; }
.acs-times li span:first-child{ font-weight:600; color:#1e293b; }
.acs-times li span:last-child{ font-weight:700; color:#d97706; font-size:.75rem; }
.acs-subhead{ font-size:.75rem; font-weight:700; color:#64748b; text-transform:uppercase; letter-spacing:.06em; margin:0 0 .5rem !important; }
.acs-count{ font-size:.75rem; padding:.1rem .5rem; border-radius:.25rem; margin-right:.5rem; background:var(--accent-2); color:#000; }
.acs-count--black{ background:#0f172a; color:#fbbf24; }
.acs .acs-card h3.acs-card__title{ display:flex; align-items:center; font-size:1.125rem; font-weight:900; text-transform:uppercase; margin-bottom:1rem; }
.acs-note{ text-align:center; font-size:.75rem; color:#94a3b8; margin:1.5rem 0 0 !important; }

/* Photos + placeholders */
.acs-photo{ width:100%; object-fit:cover; border:1px solid var(--border); border-radius:.5rem; }
.acs-photo--video{ aspect-ratio:16/9; }
.acs-photo--banner{ height:16rem; margin-bottom:1rem !important; }
.acs-placeholder{ aspect-ratio:16/9; background:#f1f5f9; border:2px dashed #cbd5e1; border-radius:.5rem;
  display:flex; flex-direction:column; align-items:center; justify-content:center; color:#94a3b8;
  text-align:center; padding:0 1rem; margin-bottom:1rem; font-size:.625rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.06em; }
.acs-placeholder::before{ content:"\f03e"; font-family:"Font Awesome 6 Free"; font-weight:400;
  font-size:1.75rem; margin-bottom:.5rem; }
.acs-placeholder small{ font-size:.625rem; font-weight:400; text-transform:none; letter-spacing:0; margin-top:.25rem; }
.acs-gallery figure{ margin:0; }
.acs-gallery figcaption{ font-size:.75rem; font-weight:700; color:#475569; text-transform:uppercase;
  letter-spacing:.06em; text-align:center; margin-top:.5rem; }
.acs-gallery .acs-placeholder{ margin-bottom:0; }

/* Page-level wrapper for interior pages (sits under the page-hero band) */
.acs-page{ padding:0 0 1rem; }
.acs-narrow{ max-width:56rem; }
.acs-form-title{ font-size:1.25rem !important; font-weight:900; text-transform:uppercase; color:#000 !important; margin:1rem 0 1rem !important; }
.acs-page .acs-card + .acs-card{ margin-top:2rem; }
.acs-contact-line{ font-size:.875rem; font-weight:700; color:#000; margin:0 0 .25rem !important; }

/* =====================================================================
   CMS modes — Store & Realty components (token-driven, theme-agnostic)
   ===================================================================== */

/* --- Store: product cards --- */
.product-card .card-body{ display:flex; flex-direction:column; }
.product-card__media{ aspect-ratio:1/1; }          /* square imagery reads "shop" */
.price-tag{ font-weight:700; font-size:1.15rem; color:var(--accent-strong); }
.price-tag--old{ font-weight:500; font-size:.9rem; color:var(--muted); text-decoration:line-through; margin-left:.4rem; }
.sale-ribbon{ position:absolute; top:.75rem; left:.75rem; z-index:1;
  background:var(--accent); color:var(--on-accent); font-weight:700; font-size:.72rem;
  letter-spacing:.06em; text-transform:uppercase; padding:.25rem .6rem; border-radius:999px; }
.stock-pill{ display:inline-block; font-size:.75rem; font-weight:600; padding:.2rem .6rem;
  border-radius:999px; border:1px solid var(--border); color:var(--muted); }
.stock-pill--in{ color:var(--on-soft); background:var(--accent-soft); border-color:var(--accent-border); }
.stock-pill--low{ color:#b45309; background:rgba(245,158,11,.15); border-color:rgba(245,158,11,.4); }
.stock-pill--out{ color:#dc2626; background:rgba(220,38,38,.12); border-color:rgba(220,38,38,.35); }
.sku-code{ font-family:var(--font-mono, monospace); font-size:.8rem; color:var(--muted);
  background:var(--code-bg); padding:.15rem .5rem; border-radius:.4rem; }

/* --- Realty: project cards + unit specs --- */
.property-card__media{ aspect-ratio:4/3; }         /* wider imagery reads "property" */
.property-status{ position:absolute; top:.75rem; left:.75rem; z-index:1; font-weight:700;
  font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; padding:.25rem .6rem;
  border-radius:999px; background:var(--accent); color:var(--on-accent); }
.property-location{ color:var(--muted); font-size:.9rem; }
.spec-chip{ display:inline-flex; align-items:center; gap:.35rem; font-size:.82rem;
  color:var(--ink); background:var(--surface-2, var(--accent-soft)); border:1px solid var(--border);
  padding:.25rem .65rem; border-radius:999px; }
.spec-chip i{ color:var(--accent); }
.unit-status{ display:inline-block; font-size:.75rem; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; padding:.22rem .65rem; border-radius:999px; }
.unit-status--available{ color:#047857; background:rgba(16,185,129,.15); border:1px solid rgba(16,185,129,.4); }
.unit-status--reserved{ color:#b45309; background:rgba(245,158,11,.15); border:1px solid rgba(245,158,11,.4); }
.unit-status--sold{ color:#dc2626; background:rgba(220,38,38,.12); border:1px solid rgba(220,38,38,.35); }
.unit-table{ border:1px solid var(--border); border-radius:1rem; overflow:hidden; }
.unit-table .table{ margin-bottom:0; color:var(--ink); }
.unit-table .table td, .unit-table .table th{ border-color:var(--border-soft); vertical-align:middle; }
.unit-table .table thead th{ background:var(--band); color:var(--muted); border-bottom:1px solid var(--border);
  font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; }
.unit-thumb{ width:56px; height:42px; object-fit:cover; border-radius:.4rem; background:var(--media-bg); }

/* --- Realty: listings page (centered head, type filters, listing cards) --- */
.listing-head{ text-align:center; max-width:720px; margin:0 auto 2rem; }
.listing-head__title{ font-size:clamp(2rem,5vw,2.9rem); color:var(--heading); margin-bottom:.35rem; }
.listing-head__sub{ color:var(--muted); font-size:1.02rem; margin:0; }
.type-filters{ display:flex; flex-wrap:wrap; justify-content:center; gap:1.7rem 2.1rem; margin:0 0 2.4rem; }
.type-filter{ display:flex; flex-direction:column; align-items:center; gap:.45rem;
  color:var(--muted); font-size:.9rem; min-width:60px; }
.type-filter i{ font-size:1.35rem; color:var(--ink); opacity:.72; transition:color .15s, opacity .15s; }
.type-filter:hover{ color:var(--accent); text-decoration:none; }
.type-filter:hover i{ color:var(--accent); opacity:1; }
.type-filter--active{ color:var(--accent); font-weight:600; }
.type-filter--active i{ color:var(--accent); opacity:1; }
.listing-card__pill{ position:absolute; top:.75rem; left:.75rem; z-index:1; font-size:.72rem;
  font-weight:600; padding:.28rem .7rem; border-radius:999px;
  background:rgba(13,17,23,.72); color:#fff; }
.listing-card__status{ position:absolute; top:.75rem; right:.75rem; z-index:1; }
.listing-price{ font-weight:700; font-size:1.08rem; color:var(--accent-strong); margin-bottom:.15rem; }
.listing-specs{ display:flex; flex-wrap:wrap; gap:.4rem 1.1rem; font-size:.84rem; color:var(--muted);
  border-top:1px solid var(--border-soft); padding-top:.65rem; margin-top:.65rem; }
.listing-specs b{ color:var(--ink); font-weight:600; }

/* --- Realty: project page (carousel, amenities, map, agent card) --- */
.property-carousel{ border:1px solid var(--border); border-radius:1rem; overflow:hidden;
  background:var(--media-bg); }
.property-carousel .carousel-item img{ width:100%; aspect-ratio:16/9; object-fit:cover; }
.property-carousel .carousel-caption{ background:rgba(13,17,23,.55); border-radius:.5rem;
  padding:.4rem 1rem; left:50%; right:auto; transform:translateX(-50%); bottom:1rem; max-width:90%; }
.amenity-chips{ display:flex; flex-wrap:wrap; gap:.55rem; }
.map-embed{ border:1px solid var(--border); border-radius:1rem; overflow:hidden; background:var(--media-bg); }
.map-embed iframe{ display:block; width:100%; height:320px; border:0; }
.agent-card{ border:1px solid var(--border); border-radius:1rem; background:var(--surface);
  box-shadow:var(--shadow-card); padding:1.25rem; }
.agent-card__photo{ width:72px; height:72px; border-radius:50%; object-fit:cover;
  border:2px solid var(--accent-border); }
.agent-card__photo--fallback{ display:inline-flex; align-items:center; justify-content:center;
  background:var(--accent-soft); color:var(--accent); font-size:1.5rem; }
.agent-card__role{ display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:var(--badge-ink); background:var(--accent-soft);
  border:1px solid var(--accent-border); padding:.15rem .6rem; border-radius:999px; }
.unit-gallery-btn{ cursor:pointer; border:0; padding:0; background:none; position:relative; }
.unit-gallery-btn::after{ content:"\f03e"; font-family:"Font Awesome 6 Free"; font-weight:900;
  position:absolute; right:.15rem; bottom:.15rem; font-size:.6rem; color:#fff;
  background:rgba(13,17,23,.65); border-radius:.3rem; padding:.1rem .25rem; }

/* --- Builder Container: Grid layout (WordPress-style, responsive) --- */
.blk-grid{ display:grid; }
.blk-grid-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.blk-grid-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.blk-grid-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.blk-grid-6{ grid-template-columns:repeat(6,minmax(0,1fr)); }
/* Tablets: dense grids drop to 2 columns */
@media (min-width:576px) and (max-width:767.98px){
  .blk-grid-3,.blk-grid-4,.blk-grid-6{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
/* Phones: everything stacks */
@media (max-width:575.98px){
  .blk-grid-2,.blk-grid-3,.blk-grid-4,.blk-grid-6{ grid-template-columns:1fr; }
}