/* ============================================================
   THEME.CSS — Single source of truth for colors & fonts
   ============================================================
   Edit ONLY this file to retheme the entire website.
   Every page, the nav, and the footer all pull from here.

   ── HOW TO USE ──────────────────────────────────────────────
   • New accent color?      Change --accent (and --accent-rgb).
   • New page background?   Change the --bg-* values.
   • New footer color?       Change --bg-footer (and --bg-footer-rgb).
   • New mobile nav color?   Change --bg-nav (and --bg-nav-rgb).
   • New fonts?             Update the @import URL below AND
                            --font-heading / --font-body.
   ============================================================ */


/* ── FONT IMPORT ──────────────────────────────────────────── */
/*
   Heading  →  PT Serif  (clean classical serif, used by senadaadzem.com)
   Body     →  Lato      (crisp refined sans-serif, used by senadaadzem.com)
*/
@import url('https://fonts.googleapis.com/css2?family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&family=Lato:wght@300;400;700&display=swap');


/* ── COLORS ───────────────────────────────────────────────── */
:root {

  /* ── Page Backgrounds (LIGHT) ────────────────────────────
     Slightly cooled cream — refined, modern, still warm enough
     to avoid clinical white. High-end magazine feel.           */
  --bg-primary:     #f5f3ee;   /* main page / body background           */
  --bg-secondary:   #eae7e1;   /* alternate section background          */
  --bg-tertiary:    #d9d6cf;   /* cards, subtle dividers                */

  /* ── Footer ─────────────────────────────────────────────
     Light blue-gray — clean, airy, modern.
     Change --bg-footer to retheme the footer.               */
  --bg-footer:      #d3dadf;   /* footer background — light blue-gray   */
  --bg-footer-rgb:  211, 218, 223;

  /* ── Mobile Nav & Dark Panels (SLATE) ───────────────────
     Deep blue-gray slate — modern, high-end.
     Matches the IDX widget dark panels for a unified dark palette.
     Change --bg-nav to retheme mobile nav.                  */
  --bg-nav:         #1e2d38;   /* mobile nav — deep slate               */
  --bg-nav-mid:     #253744;   /* mega-menu dark panel, mobile sub      */
  --bg-nav-alt:     #2d4152;   /* tertiary slate                        */

  /* ── Accent / Brand Color ────────────────────────────────
     Champagne gold — refined, cool-leaning, not earthy.
     Reads on both cream pages and dark slate panels.
     Change --accent to swap every button, link & highlight.  */
  --accent:         #a89462;   /* champagne gold                        */
  --accent-hover:   #bea876;   /* lighter champagne hover               */
  --accent-pale:    #ede6d4;   /* very pale tint for backgrounds        */

  /* ── Text on Light Backgrounds ──────────────────────────── */
  --text-primary:   #1a1a18;   /* main page text — near-black, neutral  */
  --text-secondary: #767068;   /* muted page text — cool-neutral gray   */

  /* ── Text on Dark Backgrounds (nav, IDX panels) ─────────── */
  --text-on-dark:       #e2e8ec;  /* cool-light — text on dark slate    */
  --text-muted-on-dark: #8fa4b8;  /* muted blue-gray on dark slate      */

  /* ── Light Surfaces (menus, cards) ──────────────────────── */
  --bg-light:       #faf9f6;   /* lightest cream surface                */
  --surface-light:  #f0ede6;   /* mobile sub-menu light background      */
  --surface-mid:    #e4e0d8;   /* mobile area group hover               */
  --surface-dark:   #d9d5cc;   /* mobile area group sub                 */

  /* ── RGB Channels (used for rgba() transparency) ─────────
     Keep these in sync with their hex values above.          */
  --bg-primary-rgb:   245, 243, 238;
  --bg-secondary-rgb: 234, 231, 225;
  --bg-tertiary-rgb:  217, 214, 207;
  --bg-nav-rgb:       30, 45, 56;
  --bg-nav-mid-rgb:   37, 55, 68;
  --accent-rgb:       168, 148, 98;
  --accent-hover-rgb: 190, 168, 118;


  /* ── Typography ──────────────────────────────────────────── */
  --font-heading:  'PT Serif', Georgia, serif;
  --font-body:     'Lato', Arial, sans-serif;
}

/* ============================================================
   IDX WIDGET — Portal dropdown overrides
   iHomeFinder renders autocomplete dropdowns at the body level
   (outside the widget container) so these must live here.
   ============================================================ */
[role="listbox"] {
  background-color: #b2bec6 !important;
  border: 1px solid rgba(26,40,52,0.15) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12) !important;
}
[role="option"] {
  background-color: #b2bec6 !important;
  color: rgba(26,40,52,0.85) !important;
}
[role="option"]:hover,
[role="option"][aria-selected="true"],
[role="option"][data-focus="true"] {
  background-color: #9fadb6 !important;
  color: #1a2834 !important;
}
[role="option"] * {
  color: inherit !important;
  background-color: transparent !important;
}