/* Theme layer for hotel-grade UI */
:root {
  --brand-900: #1b2a41;
  --brand-700: #2f4363;
  --brand-500: #c7a35a;
  --brand-100: #f5f0e6;
  --ink-900: #111827;
  --ink-700: #374151;
  --ink-500: #6b7280;
  --line-200: #e6e8eb;
  --line-100: #f1f3f5;
  --shadow-sm: 0 6px 20px rgba(17, 24, 39, 0.08);
  --shadow-xs: 0 2px 8px rgba(17, 24, 39, 0.06);
  --radius-xl: 20px;
  --radius-lg: 16px;
  --radius-md: 12px;
  --radius-sm: 10px;
  --space-1: 8px;
  --space-2: 12px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
  --container-max: 1140px;
  --heading-font: "Playfair Display", "Times New Roman", serif;
  --body-font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

body { font-family: var(--body-font); color: var(--ink-900); background-color: #fff; line-height: 1.6; }
h1, h2, h3, .display-hero { font-family: var(--heading-font); color: var(--brand-900); letter-spacing: -0.02em; }
h1, .display-hero { font-size: clamp(2.3rem, 2vw + 1.5rem, 3.5rem); line-height: 1.15; }
h2 { font-size: clamp(1.8rem, 1.2vw + 1.2rem, 2.5rem); line-height: 1.2; }
h3 { font-size: clamp(1.25rem, 0.8vw + 1rem, 1.6rem); line-height: 1.3; }
.text-muted { color: var(--ink-500) !important; }
.container { max-width: var(--container-max); }
.section { padding: var(--space-7) 0; }
.section-tight { padding: var(--space-6) 0; }
.section-soft { background-color: var(--line-100); }
.eyebrow { text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.75rem; color: var(--ink-500); }
.btn-primary { background-color: var(--brand-900); border-color: var(--brand-900); box-shadow: var(--shadow-xs); }
.btn-primary:hover, .btn-primary:focus { background-color: #111c2e; border-color: #111c2e; }
.btn-outline-primary { color: var(--brand-900); border-color: var(--brand-900); }
.btn-outline-primary:hover, .btn-outline-primary:focus { background-color: var(--brand-900); border-color: var(--brand-900); }
.btn-ghost { color: var(--brand-900); background: transparent; border: 1px solid transparent; }
.btn-ghost:hover, .btn-ghost:focus { border-color: var(--line-200); background: var(--line-100); }
.card { border-radius: var(--radius-lg); border: 1px solid var(--line-200); box-shadow: var(--shadow-xs); }
.card-muted { background: #fff; border: 1px solid var(--line-200); }
.card-body { padding: var(--space-4); }
.badge-soft { background: var(--brand-100); color: var(--brand-700); border: 1px solid rgba(199, 163, 90, 0.2); }
.divider { border-top: 1px solid var(--line-200); }
.ratio-4x3 { position: relative; width: 100%; padding-top: 75%; }
.ratio-4x3 > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-md); }
.thumb-img { width: 100%; height: 72px; object-fit: cover; border-radius: var(--radius-sm); }
.line-clamp-2, .line-clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-2 { -webkit-line-clamp: 2; }
.line-clamp-3 { -webkit-line-clamp: 3; }
.safe-area-bottom { padding-bottom: env(safe-area-inset-bottom); }
.nav-link { color: var(--ink-700); font-weight: 500; }
.nav-link:hover { color: var(--brand-900); }
.footer-link { color: var(--ink-500); text-decoration: none; }
.footer-link:hover { color: var(--brand-900); }
.sticky-cta { background: #fff; border-top: 1px solid var(--line-200); box-shadow: var(--shadow-sm); }
@media (max-width: 991px) { .section { padding: var(--space-6) 0; } .container { padding-left: var(--space-4); padding-right: var(--space-4); } }

/* Header: topbar + mainbar, condensed on scroll. Fallback #1b2a41 se var non definita (deploy vecchi). */
.site-header { position: sticky; top: 0; z-index: 100; background: var(--brand-900, #1b2a41); color: #fff; box-shadow: var(--shadow-xs); }
.site-topbar { padding: var(--space-2) 0; font-size: 0.9rem; max-height: 5rem; overflow: hidden; opacity: 1; transition: max-height 0.35s ease, opacity 0.3s ease, padding 0.35s ease; }
.site-topbar .container a { color: rgba(255,255,255,0.9); text-decoration: none; }
.site-topbar .container a:hover { color: #fff; }
.site-topbar .topbar-icon { color: var(--brand-500); }
.site-mainbar { padding: var(--space-3) 0; border-top: 1px solid rgba(255,255,255,0.1); transition: border-color 0.25s ease; background: var(--brand-900, #1b2a41); }
.site-header.is-condensed .site-topbar { max-height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; border: none; }
.site-header.is-condensed .site-mainbar { border-top: none; }
.site-mainbar .nav-link { color: rgba(255,255,255,0.9); }
.site-mainbar .nav-link:hover { color: #fff; }
.site-mainbar .btn-primary { background: #fff; color: var(--brand-900); border-color: #fff; }
.site-mainbar .btn-primary:hover { background: var(--line-100); color: var(--brand-900); border-color: var(--line-100); }

/* Logo (13.b) */
.site-logo { display: inline-flex; align-items: center; font-family: var(--heading-font, inherit); font-weight: 700; font-size: 1.15rem; letter-spacing: 0.02em; color: #fff; }
.site-logo:hover { color: #fff; opacity: 0.9; }
.site-logo-img { max-height: 2.25rem; width: auto; object-fit: contain; display: block; }
.site-logo:not(.has-logo) .site-logo-img { display: none; }
.site-logo.has-logo .site-logo-fallback { display: none; }
body.editor-active .site-logo:not(.has-logo) .site-logo-img { display: block; }
body.editor-active .site-logo:not(.has-logo) .site-logo-fallback { display: none; }

/* Trustbar + amenity icons (13.c) */
.trustbar-icon { font-size: 1.5rem; color: var(--brand-700, #0f766e); line-height: 1; }
.amenity-icon { width: 2.5rem; height: 2.5rem; color: var(--brand-700); font-size: 1.25rem; }

/* Menu mobile (13.d) - theme-mobile-nav integrato */
.nav-toggler { display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; padding: 0; border: 1px solid var(--line-200); border-radius: var(--radius-sm); background: #fff; color: var(--brand-900); cursor: pointer; transition: background 0.2s, color 0.2s; }
.nav-toggler:hover { background: var(--line-100); color: var(--brand-900); }
.nav-toggler-icon { display: block; width: 1.25rem; height: 2px; background: currentColor; box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor; }
@media (min-width: 992px) { .nav-toggler { display: none !important; } }
@media (max-width: 991px) { .site-nav, .nav-cta-btn { display: none !important; } }
.nav-overlay { position: fixed; inset: 0; z-index: 1000; background: rgba(17,24,39,0.4); opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; }
body.nav-open .nav-overlay { opacity: 1; visibility: visible; }
@media (max-width: 991px) { body.nav-open { overflow: hidden; } }
.nav-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 1001; width: min(320px, 85vw); max-width: 100%; background: #fff; box-shadow: -4px 0 24px rgba(17,24,39,0.12); transform: translateX(100%); transition: transform 0.3s ease; overflow-y: auto; }
body.nav-open .nav-drawer { transform: translateX(0); }
.nav-drawer__inner { display: flex; flex-direction: column; align-items: stretch; min-height: 100%; padding: var(--space-5) var(--space-4); padding-top: calc(var(--space-5) + env(safe-area-inset-top)); }
.nav-drawer__logo { margin-bottom: var(--space-5); font-size: 1.25rem; }
.nav-drawer__logo .site-logo-img { max-height: 2.5rem; }
.nav-drawer__nav { display: flex; flex-direction: column; gap: 0.25rem; flex: 1; }
.nav-drawer__link { display: block; padding: 0.75rem 0; font-size: 1.1rem; font-weight: 500; color: var(--ink-700); text-decoration: none; border-bottom: 1px solid var(--line-100); transition: color 0.2s; }
.nav-drawer__link:hover { color: var(--brand-900); }
.nav-drawer__cta { margin-top: var(--space-4); padding: 0.75rem 1rem; }
.nav-drawer__close { position: absolute; top: var(--space-4); right: var(--space-4); display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; padding: 0; border: none; border-radius: var(--radius-sm); background: var(--line-100); color: var(--ink-700); cursor: pointer; transition: background 0.2s, color 0.2s; }
.nav-drawer__close:hover { background: var(--line-200); color: var(--ink-900); }

/* Footer */
.footer-brand { font-weight: 700; font-family: var(--heading-font); color: var(--brand-900); }
.footer-title { font-weight: 600; color: var(--ink-900); margin-bottom: 0.5rem; }
.footer-links li { margin-bottom: 0.25rem; }