/*
Theme Name: Lefkada da Sogno - Layout ThemeLab WordPress Compatible Theme
Theme URI: https://themelab.app
Author: Themelab
Author URI: https://themelab.app
Description: Tema generato automaticamente con Themelab + Claude AI
Version: 1.20
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lefkada-da-sogno-layout-themelab-wordpress-compatible-theme
Tags: elementor, custom, ai-generated
*/

/* Tutto il CSS "di base" del tema è dentro @layer base: senza layer
   batterebbe SEMPRE le utility Tailwind (es. .p-8, .mt-3) indipendentemente
   dalla specificità — un `* { margin: 0; padding: 0; }` non a layer, ad
   esempio, azzera ogni utility di spaziatura su ogni elemento del tema,
   a prescindere da quante classi p-*/m-* vengano aggiunte. Vedi anche
   wrap_in_base_layer. */
@layer base {

:root {
  --color-primary: #1a6b9a;
  --color-secondary: #2e9dc8;
  --font-main: 'var(--font-body)', sans-serif;
}

/* Esclude #wpadminbar (la admin bar nativa di WordPress, visibile a
   qualunque utente loggato con permessi di editing anche sul front-end)
   — senza questa esclusione il reset globale rompe il suo layout
   interno (dropdown, icone, spaziature), che si basa su un proprio
   box model non azzerato. :where() mantiene specificità 0 come * da
   solo, quindi non altera nient'altro nella cascata. */
:where(*:not(#wpadminbar, #wpadminbar *)) { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-main);
  background: #020617;
  color: #f1f5f9;
  line-height: 1.6;
}

/* Safety net: caps any unclassed/oversized image (e.g. an embedded
   base64 logo with no sizing utility) so it can never blow out the
   layout width — mirrors Tailwind's own preflight reset, but applies
   even if the Tailwind CDN script fails to load. */
img, svg { max-width: 100%; height: auto; }

.elementor-section { width: 100%; }

/* ── WP Bakery fallback layout ───────────────────────────────── */
.elz-row {
  display: flex; flex-wrap: wrap;
  max-width: 1200px; margin: 0 auto; padding: 3rem 1.5rem;
  gap: 1.5rem;
}
.elz-row--full { max-width: none; }
.elz-row-inner { padding: 0; }
.elz-col { flex: 1 1 0%; min-width: 0; }
.elz-col--1-2 { flex: 0 0 calc(50% - .75rem); }
.elz-col--1-3 { flex: 0 0 calc(33.333% - 1rem); }
.elz-col--2-3 { flex: 0 0 calc(66.667% - .75rem); }
.elz-col--1-4 { flex: 0 0 calc(25% - 1.125rem); }
.elz-col--3-4 { flex: 0 0 calc(75% - .375rem); }
.elz-text { line-height: 1.7; }
.elz-text p { margin-bottom: .85rem; }
.elz-btn {
  display: inline-block; padding: .75rem 1.75rem;
  border-radius: 8px; text-decoration: none; font-weight: 700;
  background: var(--color-primary); color: #fff; transition: opacity .2s;
}
.elz-btn:hover { opacity: .85; color: #fff; }
.elz-btn--outline { background: transparent; border: 2px solid var(--color-primary); color: var(--color-primary); }
.elz-btn--sm { padding: .45rem 1rem; font-size: .85rem; }
.elz-btn--lg { padding: 1rem 2.25rem; font-size: 1.1rem; }
.elz-separator { border: none; border-top: 1px solid #e5e7eb; margin: 1rem 0; }
@media (max-width: 768px) {
  .elz-row { flex-direction: column; padding: 2rem 1rem; }
  .elz-col--1-2, .elz-col--1-3, .elz-col--2-3,
  .elz-col--1-4, .elz-col--3-4 { flex: 0 0 100%; }
}

/* ── CSS estratto dal layout HTML originale ─────────────────── */

    :root {
      --color-primary: #1a6b9a;
      --color-secondary: #2e9dc8;
      --color-accent: #e8a838;
      --color-text: #1a2332;
      --color-muted: #6b7a8d;
      --color-background: #f8f6f1;
      --color-sand: #f0e9d8;
      --color-white: #ffffff;
      --font-display: 'Playfair Display', serif;
      --font-body: 'Inter', sans-serif;
    }
    * { box-sizing: border-box; }
    body {
      font-family: var(--font-body);
      color: var(--color-text);
      background-color: var(--color-white);
      margin: 0;
    }
    h1, h2, h3, h4 { font-family: var(--font-display); }
    .font-display { font-family: var(--font-display); }
    .text-primary { color: var(--color-primary); }
    .text-secondary { color: var(--color-secondary); }
    .text-accent { color: var(--color-accent); }
    .text-muted-custom { color: var(--color-muted); }
    .bg-primary { background-color: var(--color-primary); }
    .bg-secondary { background-color: var(--color-secondary); }
    .bg-accent { background-color: var(--color-accent); }
    .bg-sand { background-color: var(--color-sand); }
    .bg-background { background-color: var(--color-background); }
    .btn-primary {
      background-color: var(--color-primary);
      color: white;
      padding: 14px 28px;
      border-radius: 8px;
      font-weight: 600;
      font-size: 15px;
      border: none;
      cursor: pointer;
      transition: background-color 0.2s, transform 0.15s;
      display: inline-block;
      text-decoration: none;
    }
    .btn-primary:hover { background-color: #155a82; transform: translateY(-1px); }
    .btn-secondary {
      background-color: transparent;
      color: var(--color-primary);
      padding: 13px 28px;
      border-radius: 8px;
      font-weight: 600;
      font-size: 15px;
      border: 2px solid var(--color-primary);
      cursor: pointer;
      transition: all 0.2s;
      display: inline-block;
      text-decoration: none;
    }
    .btn-secondary:hover { background-color: var(--color-primary); color: white; transform: translateY(-1px); }
    .btn-booking {
      background-color: #003580;
      color: white;
      padding: 12px 24px;
      border-radius: 8px;
      font-weight: 600;
      font-size: 14px;
      border: none;
      cursor: pointer;
      transition: background-color 0.2s, transform 0.15s;
      display: inline-block;
      text-decoration: none;
      text-align: center;
    }
    .btn-booking:hover { background-color: #002a6e; transform: translateY(-1px); }
    .badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 4px 10px;
      border-radius: 20px;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.3px;
    }
    .badge-blue { background-color: #dbeafe; color: #1d4ed8; }
    .badge-green { background-color: #dcfce7; color: #15803d; }
    .badge-amber { background-color: #fef3c7; color: #92400e; }
    .badge-rose { background-color: #ffe4e6; color: #9f1239; }
    .badge-purple { background-color: #f3e8ff; color: #7e22ce; }
    .star { color: #f59e0b; }
    .rating-badge {
      background-color: var(--color-primary);
      color: white;
      padding: 4px 10px;
      border-radius: 6px;
      font-size: 14px;
      font-weight: 700;
    }
    .section-label {
      font-family: var(--font-body);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--color-secondary);
    }
    .hero-gradient {
      background: linear-gradient(135deg, rgba(26,107,154,0.75) 0%, rgba(10,40,70,0.60) 100%);
    }
    .card-shadow { box-shadow: 0 4px 24px rgba(26,107,154,0.10); }
    .card-shadow-hover { transition: box-shadow 0.2s, transform 0.2s; }
    .card-shadow-hover:hover { box-shadow: 0 8px 40px rgba(26,107,154,0.18); transform: translateY(-3px); }
    .nav-link { transition: color 0.2s; }
    .nav-link:hover { color: var(--color-secondary); }
    .zone-card { border-left: 4px solid var(--color-secondary); }
    .filter-btn { transition: all 0.2s; }
    .filter-btn.active, .filter-btn:hover {
      background-color: var(--color-primary);
      color: white;
    }
    @media (prefers-color-scheme: dark) {
      body { background-color: #0f1923; color: #e8edf3; }
      .dark-card { background-color: #162030; }
      .dark-nav { background-color: #0f1923; }
    }
    input, select {
      font-family: var(--font-body);
      outline: none;
    }
    input:focus, select:focus { border-color: var(--color-primary) !important; }
    .mobile-menu { display: none; }
    .mobile-menu.open { display: block; }
    @media (max-width: 768px) {
      .nav-desktop { display: none; }
    }
    @media (min-width: 769px) {
      .hamburger { display: none; }
    }
  


/* Force visibility on all fade/reveal/appear elements after 1.5s */
.fadeIn, .fadeInUp, .fadeInDown, .fadeInLeft, .fadeInRight,
.fade-up, .fade-in, .reveal, .appear, .slide-up,
[class*="fadeIn"], [class*="fade-"], [class*="reveal"], [class*="appear"] {
  animation-fill-mode: forwards !important;
}


/* ── CSS personalizzato generato da Claude ───────────────────── */


/* ── Nav menu WordPress ──────────────────────────────────────── */
.nav-menu { list-style: none; display: flex; align-items: center; gap: 1.5rem; margin: 0; padding: 0; }
.nav-menu li { margin: 0; }
.nav-menu a {
  text-decoration: none; font-weight: 500; font-size: .95rem;
  color: inherit; transition: opacity .2s; white-space: nowrap;
}
.nav-menu a:hover { opacity: .7; }
@media (max-width: 768px) {
  .nav-menu { display: none; }
  .main-navigation.open .nav-menu { display: flex; flex-direction: column; gap: .75rem; }
}

} /* /@layer base */