/* ============================================================================
 * TASK-03: Design System & Palette Ufficiale Coastal Luxury - Pathos
 * Modulo Variabili CSS (:root), Tipografia, Layout Responsive e Componenti UI
 * Palette Ufficiale:
 * - SAND BEIGE:   #E7D9BF
 * - IVORY WHITE:  #FFFBF6
 * - COASTAL BLUE: #7FBBD6
 * - DEEP NAVY:    #1E2D3D
 * - WARM GOLD:    #CBA86B
 * ============================================================================ */

:root {
  /* --------------------------------------------------------------------------
   * 1. Palette Cromatica Ufficiale Coastal Luxury
   * -------------------------------------------------------------------------- */
  /* Sand Beige — Superfici secondarie, bordi morbidi e sfondi caldi */
  --color-sand-beige: #E7D9BF;
  --color-sand-beige-rgb: 231, 217, 191;

  /* Ivory White — Sfondo pagina principale e card luminose */
  --color-ivory-white: #FFFBF6;
  --color-ivory-white-rgb: 255, 251, 246;

  /* Coastal Blue — Badge, tag, pillole informative e dettagli marini */
  --color-coastal-blue: #7FBBD6;
  --color-coastal-blue-rgb: 127, 187, 214;
  --color-coastal-blue-dark: #3B7A96;

  /* Deep Navy — Testo principale, titoli, header e contrasto istituzionale */
  --color-deep-navy: #1E2D3D;
  --color-deep-navy-rgb: 30, 45, 61;
  --color-deep-navy-muted: #42566B;

  /* Warm Gold — Bottoni primari (CTA), accenti di pregio e stati attivi */
  --color-warm-gold: #CBA86B;
  --color-warm-gold-rgb: 203, 168, 107;
  --color-warm-gold-hover: #B89352;
  --color-warm-gold-dark: #9B783B;

  /* Alias ad Alto Contrasto per i moduli dell'applicazione e Pannello Admin */
  --color-slate-base: #E2E8F0;          /* Grigio Perla per bordi ben visibili */
  --color-slate-base-rgb: 226, 232, 240;
  --color-slate-hero: #FFFFFF;          /* Bianco Puro per card e superfici */
  --color-slate-hero-rgb: 255, 255, 255;
  --color-slate-surface: #F1F5F9;       /* Grigio Chiaro Esecutivo per sfondo pagina */
  --color-slate-surface-rgb: 241, 245, 249;
  --color-cyan-accent: #0369A1;         /* Blu Oceano Scuro ad alto contrasto su bianco */
  --color-cyan-accent-rgb: 3, 105, 161;
  --color-cyan-accent-hover: #075985;
  --color-neutral-light: #334155;       /* Slate 700 ad alta leggibilità per testi secondari */
  --color-neutral-light-rgb: 51, 65, 85;
  --color-white: #0F172A;               /* Navy Inchiostro (#0F172A) per titoli e testi primari */
  --color-pure-white: #FFFFFF;

  /* --------------------------------------------------------------------------
   * 2. Token Semantici Applicativi (Alta Visibilità WCAG AAA)
   * -------------------------------------------------------------------------- */
  --bg-page: #EEF2F6;                                   /* Sfondo pagina grigio-perla per staccare le card bianche */
  --bg-hero: linear-gradient(
    145deg,
    #FFFFFF 0%,
    #F8FAFC 55%,
    #E2E8F0 100%
  );
  --bg-surface: #E2E8F0;
  --bg-surface-elevated: #FFFFFF;
  --bg-card-glass: #FFFFFF;                             /* Card bianco solido ad alto contrasto */
  --bg-panel-glass: #F8FAFC;

  --text-primary: #0F172A;                              /* Testo primario scuro nettissimo */
  --text-secondary: #334155;                            /* Testo secondario ben leggibile */
  --text-on-accent: #0F172A;
  --text-accent: #B45309;                               /* Oro Ambrato Scuro ben visibile */

  --border-subtle: #CBD5E1;                             /* Bordo visibile e definito per Card & Tabelle */
  --border-default: #B45309;                            /* Bordo Oro Ambrato per Bottoni */
  --border-light: rgba(15, 23, 42, 0.16);
  --border-accent: #D97706;

  /* Effetti Glow, Ombre & Frosted Glass */
  --shadow-accent-glow: 0 8px 24px rgba(217, 119, 6, 0.32),
                        0 4px 12px rgba(15, 23, 42, 0.12);
  --shadow-card: 0 12px 32px -4px rgba(15, 23, 42, 0.12),
                 0 2px 6px rgba(15, 23, 42, 0.06);
  --backdrop-frosted: blur(14px);

  /* Badge & Tag ad Alto Contrasto */
  --badge-bg: #E0F2FE;                                  /* Sfondo Azzurro Chiaro nitido */
  --badge-text: #0C4A6E;                                /* Testo Blu Navy Scuro */
  --badge-border: #0284C7;                              /* Bordo Blu Ciano definito */

  /* --------------------------------------------------------------------------
   * 3. Tipografia & Scala Dimensionale
   * -------------------------------------------------------------------------- */
  --font-sans: "Inter", "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;

  --radius-sm: 0.5rem;
  --radius-btn: 0.625rem;
  --radius-card: 1rem;
  --radius-pill: 9999px;

  --transition-fast: 200ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Container Breakpoints & Padding */
  --container-max-sm: 640px;
  --container-max-md: 768px;
  --container-max-lg: 1024px;
  --container-max-xl: 1280px;
  --container-max-2xl: 1440px;
}

/* ============================================================================
 * Reset & Tipografia Globale ad Alta Leggibilità
 * ============================================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-secondary);
  background-color: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  max-width: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--bg-page);
  color: var(--text-secondary);
  overflow-x: hidden;
  max-width: 100%;
}

img,
video,
svg {
  max-width: 100%;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--text-primary);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin-top: 0;
}

p {
  color: var(--text-secondary);
  margin-top: 0;
}

a {
  color: var(--color-warm-gold-dark);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-deep-navy);
}

/* ============================================================================
 * Layout & Container Responsive Fluidi (Desktop, Tablet, Mobile)
 * ============================================================================ */
.pathos-container,
.container-fluid {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(1rem, 4vw, 3rem);
  padding-right: clamp(1rem, 4vw, 3rem);
  max-width: var(--container-max-2xl);
}

@media (max-width: 639px) {
  .pathos-container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

@media (min-width: 640px) and (max-width: 1023px) {
  .pathos-container {
    max-width: var(--container-max-lg);
    padding-left: 1.75rem;
    padding-right: 1.75rem;
  }
}

@media (min-width: 1024px) {
  .pathos-container {
    max-width: var(--container-max-xl);
  }
}

@media (min-width: 1440px) {
  .pathos-container {
    max-width: var(--container-max-2xl);
  }
}

/* Hero Surface */
.hero-surface {
  background: var(--bg-hero);
  border-bottom: 1px solid var(--border-subtle);
}

/* ============================================================================
 * Componenti UI Base (TASK-03) — Coastal Luxury
 * ============================================================================ */

/* 1. Bottoni Primari (CTA):
 *    Sfondo Warm Gold (#CBA86B), testo Deep Navy (#1E2D3D), hover con bagliore dorato */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background-color: var(--color-warm-gold);            /* #CBA86B */
  color: var(--color-deep-navy);                       /* #1E2D3D */
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.25;
  padding: 0.6875rem 1.375rem;
  border-radius: var(--radius-btn);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn-primary:hover,
.btn-primary:focus-visible {
  background-color: var(--color-warm-gold-hover);      /* #B89352 */
  color: var(--color-deep-navy);
  box-shadow: var(--shadow-accent-glow);
  transform: translateY(-1px);
  outline: none;
}

.btn-primary:active {
  transform: translateY(0);
}

/* 2. Bottoni Secondari / Outline:
 *    Bordo Warm Gold (#CBA86B), testo Deep Navy (#1E2D3D), hover Sand Beige (#E7D9BF) */
.btn-secondary,
.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background-color: rgba(255, 251, 246, 0.80);
  color: var(--color-deep-navy);                       /* #1E2D3D */
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.25;
  padding: 0.6875rem 1.375rem;
  border-radius: var(--radius-btn);
  border: 1px solid var(--color-warm-gold);            /* #CBA86B */
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn-secondary:hover,
.btn-secondary:focus-visible,
.btn-outline:hover,
.btn-outline:focus-visible {
  background-color: var(--color-sand-beige);           /* #E7D9BF */
  color: var(--color-deep-navy);                       /* #1E2D3D */
  border-color: var(--color-deep-navy);
  outline: none;
}

/* 3. Card Immobili & Pannelli:
 *    Background Ivory White (#FFFBF6) semitrasparente con frosted glass e bordi in Sand Beige (#E7D9BF) */
.card-glass,
.property-card,
.glass-panel {
  background-color: var(--bg-card-glass);
  backdrop-filter: var(--backdrop-frosted);
  -webkit-backdrop-filter: var(--backdrop-frosted);
  border: 1px solid var(--border-subtle);              /* #E7D9BF */
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  color: var(--text-secondary);
  transition: border-color var(--transition-fast),
              transform var(--transition-fast),
              box-shadow var(--transition-fast);
}

.property-card:hover {
  border-color: var(--color-warm-gold);
  transform: translateY(-2px);
}

/* 4. Badge & Tag:
 *    Sfondo Coastal Blue (#7FBBD6) desaturato con bordo Coastal Blue e testo Deep Navy (#1E2D3D) */
.badge-accent,
.tag-cyan {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  background-color: var(--badge-bg);
  color: var(--badge-text);                            /* #1E2D3D */
  border: 1px solid var(--badge-border);               /* #7FBBD6 */
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.025em;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-pill);
}

/* ============================================================================
 * 5. Header & Menu ad Hamburger Responsive (Coastal Luxury)
 * ============================================================================ */
.pathos-hamburger-btn {
  display: none;
  appearance: none;
  -webkit-appearance: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 0.6rem;
  border: 1.5px solid #1E2D3D;
  background-color: rgba(255, 251, 246, 0.85);
  color: #1E2D3D;
  cursor: pointer;
  position: relative;
  z-index: 120;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.pathos-hamburger-btn:hover,
.pathos-hamburger-btn:focus-visible {
  background-color: rgba(203, 168, 107, 0.35);
  outline: none;
}

.pathos-hamburger-btn .hamburger-bar {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background-color: #1E2D3D;
  pointer-events: none;
  transition: transform 220ms ease, opacity 180ms ease, background-color 180ms ease;
}

.pathos-hamburger-btn.is-open {
  background-color: #CBA86B !important;
  border-color: #1E2D3D !important;
}

.pathos-hamburger-btn.is-open .hamburger-bar {
  background-color: #1E2D3D !important;
}

.pathos-hamburger-btn.is-open .hamburger-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.pathos-hamburger-btn.is-open .hamburger-bar:nth-child(2) {
  opacity: 0;
}

.pathos-hamburger-btn.is-open .hamburger-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.pathos-nav-menu {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

@media (max-width: 980px) {
  .pathos-hamburger-btn {
    display: inline-flex;
  }

  .pathos-nav-menu {
    display: none !important;
    position: absolute;
    top: calc(100% + 0.35rem);
    left: 1rem;
    right: 1rem;
    z-index: 110;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.5rem !important;
    padding: 0.95rem 1.1rem 1.1rem;
    max-height: calc(100dvh - 100px);
    overflow-y: auto;
    background-color: #cbd9f7;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(30, 45, 61, 0.2);
    border-bottom: 2px solid #CBA86B;
    border-radius: 0.85rem;
    box-shadow: 0 18px 36px rgba(30, 45, 61, 0.28);
  }

  .pathos-nav-menu.is-open {
    display: flex !important;
  }

  .pathos-nav-menu a {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.72rem 0.95rem !important;
    border-radius: 0.55rem;
    background-color: rgba(255, 251, 246, 0.82);
    border: 1px solid rgba(30, 45, 61, 0.16);
    font-size: 0.92rem !important;
    text-align: left;
    box-sizing: border-box;
  }

  .pathos-nav-menu a:hover {
    background-color: rgba(203, 168, 107, 0.22);
    border-color: #CBA86B;
  }

  .pathos-nav-menu a.btn-primary {
    justify-content: center;
    background-color: #CBA86B !important;
    color: #1E2D3D !important;
    border-color: #CBA86B;
    font-weight: 700;
    margin-top: 0.25rem;
  }
}