/*
Theme Name: Social Power Hotel Starter
Theme URI: https://socialpower.it
Author: Social Power
Author URI: https://socialpower.it
Description: Tema starter leggero ed elegante per strutture ricettive (hotel, B&B, resort). Predisposto per Elementor, Polylang e integrazione booking esterna (es. Krossbooking). Include una sezione Suite/Camere gestibile da Custom Post Type.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: sp-hotel
*/

/* ==========================================================================
   VARIABILI DI STILE — modifica questi valori per adattare i colori
   del brand del cliente una volta ricevuto il materiale (vedi checklist).
   ========================================================================== */
:root{
  --color-bg:        #FAF8F5;   /* fondo ivory caldo */
  --color-surface:   #FFFFFF;   /* card / superfici */
  --color-dark:      #1C1F26;   /* testo scuro / header */
  --color-text:      #2B2B2B;
  --color-muted:     #6B6B6B;
  --color-accent:    #B08D57;   /* oro/bronzo elegante — accenti, bottoni */
  --color-accent-dk: #8F6F3F;
  --color-line:      #E7E1D8;

  --font-heading: 'Playfair Display', Georgia, serif;
  --font-body:    'Jost', 'Helvetica Neue', Arial, sans-serif;

  --radius: 4px;
  --container: 1180px;
}

/* ==========================================================================
   RESET DI BASE
   ========================================================================== */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color: inherit; text-decoration:none; }
h1,h2,h3,h4{
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--color-dark);
  line-height: 1.2;
  margin: 0 0 .5em;
}
.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}
.eyebrow{
  display:inline-block;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:.75rem;
  color: var(--color-accent-dk);
  font-weight:600;
  margin-bottom:.75rem;
}
.btn{
  display:inline-block;
  padding: 14px 30px;
  border-radius: var(--radius);
  background: var(--color-accent);
  color: #fff !important;
  font-size: .85rem;
  letter-spacing:.06em;
  text-transform: uppercase;
  transition: background .25s ease, transform .25s ease;
}
.btn:hover{ background: var(--color-accent-dk); transform: translateY(-1px); }
.btn-outline{
  background: transparent;
  border: 1px solid var(--color-dark);
  color: var(--color-dark) !important;
}
.btn-outline:hover{ background: var(--color-dark); color:#fff !important; }

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header{
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-line);
  position: sticky;
  top: 0;
  z-index: 100;
}
.site-header .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-top: 18px;
  padding-bottom: 18px;
}
.site-branding .custom-logo,
.site-branding img{ max-height: 52px; width:auto; }
.site-branding .site-title{
  font-family: var(--font-heading);
  font-size: 1.4rem;
  margin:0;
}
.main-navigation ul{
  list-style:none; display:flex; gap: 34px; margin:0; padding:0;
}
.main-navigation a{
  font-size: .85rem;
  letter-spacing:.04em;
  text-transform: uppercase;
  color: var(--color-dark);
}
.main-navigation a:hover{ color: var(--color-accent-dk); }
.nav-toggle{ display:none; }

@media (max-width: 780px){
  .main-navigation ul{ display:none; }
  .nav-toggle{ display:block; }
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position: relative;
  min-height: 78vh;
  display:flex;
  align-items:center;
  background: linear-gradient(180deg, rgba(28,31,38,.55), rgba(28,31,38,.55)),
              var(--color-dark) center/cover no-repeat;
}
.hero .container{ position:relative; z-index:2; text-align:center; }
.hero-eyebrow{
  color:#EFE3C8; letter-spacing:.2em; text-transform:uppercase;
  font-size:.8rem; margin-bottom: 18px; display:block;
}
.hero h1{
  color:#fff;
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  max-width: 820px;
  margin: 0 auto .6em;
}
.hero p{
  color: #EDEAE3;
  max-width: 560px;
  margin: 0 auto 2rem;
  font-size: 1.05rem;
}
.hero-actions{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }

/* ==========================================================================
   SEZIONE SUITE / CAMERE
   ========================================================================== */
.suite-section{ padding: 96px 0; }
.suite-section .section-head{
  text-align:center; max-width: 640px; margin: 0 auto 56px;
}
.suite-section .section-head h2{ font-size: clamp(1.8rem, 3.5vw, 2.6rem); }
.suite-section .section-head p{ color: var(--color-muted); }

.suite-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
@media (max-width: 980px){ .suite-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 640px){ .suite-grid{ grid-template-columns: 1fr; } }

.suite-card{
  background: var(--color-surface);
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: 0 10px 30px rgba(28,31,38,.06);
  transition: transform .3s ease, box-shadow .3s ease;
}
.suite-card:hover{ transform: translateY(-6px); box-shadow: 0 18px 40px rgba(28,31,38,.12); }
.suite-card__media{
  aspect-ratio: 4/3;
  background: linear-gradient(135deg, #EDE7DB, #D8CDB8);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.suite-card__media img{ width:100%; height:100%; object-fit:cover; }
.suite-card__media .placeholder-label{
  font-family: var(--font-heading); font-style: italic; color:#9C8E70; font-size:.9rem;
}
.suite-card__body{ padding: 24px 24px 28px; }
.suite-card__meta{
  display:flex; gap:14px; color: var(--color-muted); font-size:.8rem;
  margin-bottom:10px; letter-spacing:.03em; text-transform:uppercase;
}
.suite-card h3{ font-size: 1.25rem; margin-bottom:.35em; }
.suite-card p{ color: var(--color-muted); font-size:.92rem; margin-bottom: 18px; }
.suite-card__footer{
  display:flex; align-items:center; justify-content:space-between;
  border-top: 1px solid var(--color-line); padding-top: 16px;
}
.suite-card__price{ font-family: var(--font-heading); color: var(--color-dark); font-size:1.05rem; }
.suite-card__price span{ font-size:.75rem; color: var(--color-muted); font-family: var(--font-body); }
.suite-card__cta{
  font-size:.78rem; text-transform:uppercase; letter-spacing:.06em;
  color: var(--color-accent-dk); border-bottom: 1px solid var(--color-accent-dk);
  padding-bottom: 2px;
}
.suite-card__cta:hover{ color: var(--color-dark); border-color: var(--color-dark); }

/* ==========================================================================
   SEZIONE PRENOTAZIONE (contenitore per widget Krossbooking)
   ========================================================================== */
.booking-section{
  background: var(--color-dark);
  padding: 80px 0;
  text-align:center;
}
.booking-section h2{ color:#fff; }
.booking-section p{ color:#C9C6BE; max-width:520px; margin:0 auto 32px; }
.booking-widget-slot{
  background: rgba(255,255,255,.04);
  border: 1px dashed rgba(255,255,255,.25);
  border-radius: var(--radius);
  padding: 40px 24px;
  color:#8F8B82;
  font-size:.85rem;
  max-width: 780px;
  margin: 0 auto;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{
  background: var(--color-dark);
  color:#B9B6AF;
  padding: 56px 0 26px;
  font-size:.88rem;
}
.site-footer a{ color:#EFE3C8; }
.site-footer .footer-cols{
  display:grid; grid-template-columns: 2fr 1fr 1fr; gap: 32px; margin-bottom: 40px;
}
@media (max-width: 780px){ .site-footer .footer-cols{ grid-template-columns: 1fr; } }
.site-footer h4{ color:#fff; font-size:1rem; margin-bottom: 14px; }
.footer-bottom{
  border-top: 1px solid rgba(255,255,255,.1);
  padding-top: 20px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  font-size:.78rem; color:#8F8B82;
}