/*
Theme Name: Chromatic Light
Theme URI: https://github.com/
Author: Salvatore Maltese
Author URI: https://github.com/
Description: Tema moderno con stile Chromatic Light, glassmorphism, animazioni scroll, bottom bar compatta per smartphone, homepage libera (compatibile Elementor), page fullscreen boxed senza sidebar.
Version: 1.2.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: chromatic-light
Tags: one-column, custom-menu, custom-logo, full-width-template, blog, portfolio
*/

/* ============================================================
   CSS CUSTOM PROPERTIES
   ============================================================ */
:root {
  --bg: #f0f4ff;
  --white: #ffffff;
  --blue: #3b6ef8;
  --violet: #8b5cf6;
  --pink: #ec4899;
  --orange: #f97316;
  --green: #10b981;
  --yellow: #f59e0b;
  --text: #0f172a;
  --muted: #64748b;
  --border: rgba(0,0,0,0.07);
  --header-h: 70px;
  --bb-h: 62px;
  --content-max: 1200px;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Plus Jakarta Sans', sans-serif;
  min-height: 100vh;
  overflow-x: hidden;
  line-height: 1.6;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
ul { list-style: none; }

/* ============================================================
   BG BLOBS (sfondo fisso)
   ============================================================ */
.cl-bg-blobs {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.cl-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.25;
}
.cl-blob-1 { width: 500px; height: 500px; background: #3b6ef8; top: -100px; right: -100px; }
.cl-blob-2 { width: 400px; height: 400px; background: #ec4899; bottom: 100px; left: -80px; }
.cl-blob-3 { width: 300px; height: 300px; background: #10b981; top: 300px; right: 200px; }
.cl-blob-4 { width: 250px; height: 250px; background: #f97316; bottom: 200px; right: 100px; }

/* ============================================================
   LAYOUT WRAPPER
   ============================================================ */
#cl-wrap {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ============================================================
   HEADER (desktop + tablet)
   ============================================================ */
#cl-header {
  padding: 0 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
}

/* Logo */
/* Logo — singolo <a> con img + span inline */
.cl-site-logo {
  display: flex;
  align-items: center;
}
.cl-site-logo-link,
.cl-site-logo > a {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.cl-site-logo img,
.cl-site-logo .custom-logo {
  height: 36px;
  width: auto;
  display: block;
  flex-shrink: 0;
}
.cl-site-name {
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
  white-space: nowrap;
}
.cl-logo-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), var(--violet));
  margin-left: 4px;
  vertical-align: middle;
  margin-bottom: 2px;
}

/* ============================================================
   MENU PRINCIPALE (nav desktop)
   ============================================================ */
#cl-primary-nav {
  display: flex;
  align-items: center;
  gap: 32px;
}

#cl-primary-nav ul {
  display: flex;
  align-items: center;
  gap: 32px;
  list-style: none;
  margin: 0; padding: 0;
}

#cl-primary-nav ul li a {
  color: var(--muted);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: color .2s;
  display: flex;
  align-items: center;
  gap: 6px;
}
#cl-primary-nav ul li a:hover,
#cl-primary-nav ul li.current-menu-item > a,
#cl-primary-nav ul li.current_page_item > a {
  color: var(--text);
}

/* Icone nel menu (class "menu-icon" aggiunta dall'utente) */
#cl-primary-nav .menu-icon {
  font-size: 16px;
  line-height: 1;
}

/* Dropdown */
#cl-primary-nav ul li { position: relative; }
#cl-primary-nav ul li ul {
  display: none;
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(20px);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 8px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.1);
  min-width: 180px;
  flex-direction: column;
  gap: 2px;
}
#cl-primary-nav ul li:hover > ul { display: flex; }
#cl-primary-nav ul li ul li a {
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 14px;
  display: block;
  white-space: nowrap;
}
#cl-primary-nav ul li ul li a:hover { background: rgba(59,110,248,0.07); color: var(--blue); }

/* CTA nel menu (last item con class nav-cta) */
.cl-nav-cta {
  background: linear-gradient(135deg, var(--blue), var(--violet)) !important;
  color: #fff !important;
  padding: 9px 22px !important;
  border-radius: 100px !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  text-decoration: none !important;
  box-shadow: 0 4px 20px rgba(59,110,248,0.35);
  transition: opacity .2s !important;
}
.cl-nav-cta:hover { opacity: 0.88; }

/* Hamburger (tablet 768px–1024px) */
.cl-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 4px;
}
.cl-hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: all .3s;
}
.cl-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.cl-hamburger.open span:nth-child(2) { opacity: 0; }
.cl-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile nav (tablet slide-down) */
#cl-mobile-nav {
  display: none;
  position: fixed;
  top: var(--header-h);
  left: 0; right: 0;
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  z-index: 99;
  flex-direction: column;
  padding: 20px 24px;
  gap: 8px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.08);
}
#cl-mobile-nav.open { display: flex; }
#cl-mobile-nav ul { display: flex; flex-direction: column; gap: 4px; }
#cl-mobile-nav ul li a {
  color: var(--text);
  text-decoration: none;
  font-size: 16px;
  font-weight: 600;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
}
#cl-mobile-nav .cl-nav-cta {
  display: block;
  text-align: center;
  margin-top: 8px;
  border-bottom: none !important;
}

/* ============================================================
   BOTTOM BAR — solo smartphone (≤768px)
   Compatta: brand | tab MENU | tab voci rapide
   ============================================================ */
#cl-bottom-bar {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 200;
  height: var(--bb-h);
  background: rgba(255,255,255,0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--border);
  box-shadow: 0 -2px 16px rgba(0,0,0,0.08);
  align-items: stretch;
}

/* Brand — sezione sinistra: logo + nome sito */
.cl-bb-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text);
  padding: 0 14px 0 16px;
  flex: 1.6;
  min-width: 0;
  border-right: 1px solid var(--border);
}
.cl-bb-logo-img {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  object-fit: contain;
  flex-shrink: 0;
}
.cl-bb-logo-fallback {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--blue), var(--violet));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.5px;
}
.cl-bb-name {
  font-size: 12px;
  font-weight: 800;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

/* Tab generica nella bottombar */
.cl-bb-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  flex: 1;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0 2px;
  border-right: 1px solid var(--border);
  text-decoration: none;
  color: var(--muted);
  font-family: inherit;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  transition: color .2s, background .2s;
  -webkit-tap-highlight-color: transparent;
  line-height: 1;
}
.cl-bb-tab:last-child { border-right: none; }
.cl-bb-tab:hover,
.cl-bb-tab.current { color: var(--blue); background: rgba(59,110,248,0.05); }
.cl-bb-tab .cl-bb-icon {
  font-size: 19px;
  margin-bottom: 1px;
  line-height: 1;
}

/* Tab MENU con hamburger animato */
.cl-bb-tab-menu { flex: 1; }
.cl-bb-hlines {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  margin-bottom: 2px;
}
.cl-bb-hlines span {
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: all .28s;
}
.cl-bb-tab-menu.open .cl-bb-hlines span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.cl-bb-tab-menu.open .cl-bb-hlines span:nth-child(2) { opacity: 0; }
.cl-bb-tab-menu.open .cl-bb-hlines span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.cl-bb-tab-menu.open { color: var(--blue); background: rgba(59,110,248,0.05); }

/* Drawer — sempre nel DOM, animato con transform */
#cl-bb-drawer {
  position: fixed;
  bottom: var(--bb-h);
  left: 0; right: 0;
  z-index: 199;
  background: rgba(255,255,255,0.99);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-top: 1px solid var(--border);
  box-shadow: 0 -8px 32px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  padding: 6px 0;
  transform: translateY(110%);
  transition: transform 0.3s cubic-bezier(.4,0,.2,1);
  pointer-events: none;
  max-height: 70vh;
  overflow-y: auto;
}
#cl-bb-drawer.open {
  transform: translateY(0);
  pointer-events: all;
}
#cl-bb-drawer ul { display: flex; flex-direction: column; }
#cl-bb-drawer ul li a {
  color: var(--text);
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  padding: 13px 24px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 12px;
  transition: background .15s, color .15s;
}
#cl-bb-drawer ul li:last-child a { border-bottom: none; }
#cl-bb-drawer ul li a:hover { background: rgba(59,110,248,0.06); color: var(--blue); }
#cl-bb-drawer ul li.menu-item-has-children > a::after {
  content: '›';
  margin-left: auto;
  font-size: 18px;
  color: var(--muted);
}
#cl-bb-drawer ul li ul { padding-left: 20px; }
#cl-bb-drawer ul li ul li a { font-size: 14px; font-weight: 500; padding: 10px 24px; }
/* CTA nel drawer */
#cl-bb-drawer ul li.nav-cta > a,
#cl-bb-drawer .cl-bb-drawer-cta {
  margin: 10px 20px 4px;
  background: linear-gradient(135deg, var(--blue), var(--violet));
  color: #fff !important;
  border-radius: 100px;
  justify-content: center;
  padding: 13px 24px;
  border-bottom: none !important;
  box-shadow: 0 4px 20px rgba(59,110,248,0.3);
}

/* Overlay */
#cl-bb-overlay {
  position: fixed;
  inset: 0;
  z-index: 198;
  background: rgba(0,0,0,0.18);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
#cl-bb-overlay.open { opacity: 1; pointer-events: all; }

/* Spacer */
.cl-bb-spacer { display: none; height: var(--bb-h); }

/* ============================================================
   MAIN CONTENT
   ============================================================ */
#cl-main { flex: 1; }

/* ============================================================
   HOMEPAGE — nessuno stile imposto, libera per Elementor
   ============================================================ */
.page-template-default.page #cl-main .entry-content,
.home #cl-main .entry-content {
  /* Libera, non toccare */
}

/* ============================================================
   PAGE STANDARD — fullscreen boxed, nessuna sidebar
   ============================================================ */
.cl-page-content {
  width: 100%;
  min-height: 60vh;
}

.cl-page-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 60px 40px 80px;
}

/* Titolo pagina */
.cl-page-title {
  font-size: 42px;
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 32px;
  background: linear-gradient(135deg, var(--blue) 0%, var(--violet) 60%, var(--pink) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Contenuto pagina */
.cl-entry-content {
  font-size: 16px;
  line-height: 1.75;
  color: var(--text);
}
.cl-entry-content h2 { font-size: 28px; font-weight: 800; margin: 2em 0 .6em; }
.cl-entry-content h3 { font-size: 22px; font-weight: 700; margin: 1.6em 0 .5em; }
.cl-entry-content h4 { font-size: 18px; font-weight: 700; margin: 1.4em 0 .4em; }
.cl-entry-content p { margin-bottom: 1.2em; }
.cl-entry-content ul, .cl-entry-content ol { padding-left: 1.6em; margin-bottom: 1.2em; }
.cl-entry-content ul li { list-style: disc; margin-bottom: .4em; }
.cl-entry-content ol li { list-style: decimal; margin-bottom: .4em; }
.cl-entry-content blockquote {
  border-left: 4px solid var(--blue);
  padding: 12px 20px;
  margin: 1.5em 0;
  color: var(--muted);
  font-style: italic;
  background: rgba(59,110,248,0.05);
  border-radius: 0 12px 12px 0;
}
.cl-entry-content a { color: var(--blue); text-decoration: underline; }
.cl-entry-content a:hover { color: var(--violet); }
.cl-entry-content img {
  border-radius: 16px;
  margin: 1.5em 0;
  box-shadow: 0 8px 30px rgba(0,0,0,0.08);
}
.cl-entry-content code {
  font-family: 'Fira Code', monospace;
  background: rgba(59,110,248,0.08);
  color: var(--blue);
  padding: 2px 8px;
  border-radius: 6px;
  font-size: .9em;
}
.cl-entry-content pre {
  background: #0f172a;
  color: #e2e8f0;
  padding: 24px;
  border-radius: 16px;
  overflow-x: auto;
  margin: 1.5em 0;
  font-family: 'Fira Code', monospace;
  font-size: 14px;
}

/* Glass card attorno alla page */
.cl-page-glass {
  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border);
  border-radius: 28px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.06);
  padding: 48px 56px;
  margin-bottom: 40px;
}

/* ============================================================
   SINGLE POST
   ============================================================ */
.cl-post-header { margin-bottom: 40px; }
.cl-post-cats { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.cl-post-cat {
  font-size: 11px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 100px;
  background: rgba(59,110,248,0.1);
  color: var(--blue);
  text-transform: uppercase;
  letter-spacing: .5px;
  text-decoration: none;
}
.cl-post-cat:hover { background: var(--blue); color: #fff; }
.cl-post-title {
  font-size: 38px;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 20px;
}
.cl-post-meta {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 13px;
  color: var(--muted);
  flex-wrap: wrap;
}
.cl-post-meta span { display: flex; align-items: center; gap: 5px; }
.cl-post-thumbnail {
  width: 100%;
  height: 400px;
  object-fit: cover;
  border-radius: 20px;
  margin-bottom: 40px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.1);
}

/* ============================================================
   FOOTER — fullscreen 100%, nessun hardcoded
   ============================================================ */
#cl-footer {
  width: 100%;
  border-top: 1px solid var(--border);
  background: rgba(255,255,255,0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-size: 13px;
  color: var(--muted);
}

.cl-footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 48px 64px 32px;
  gap: 40px;
  flex-wrap: wrap;
}

/* Colonna brand */
.cl-footer-brand {
  flex: 1;
  min-width: 200px;
}
.cl-footer-logo img {
  height: 40px;
  width: auto;
  margin-bottom: 12px;
}
.cl-footer-site-name {
  font-size: 20px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 10px;
}
.cl-footer-desc {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.6;
  max-width: 280px;
}

/* Colonne menu footer */
.cl-footer-menus {
  display: flex;
  gap: 48px;
  flex-wrap: wrap;
}
.cl-footer-menu-col h4 {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 16px;
}
.cl-footer-menu-col ul { display: flex; flex-direction: column; gap: 10px; }
.cl-footer-menu-col ul li a {
  color: var(--muted);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: color .2s;
}
.cl-footer-menu-col ul li a:hover { color: var(--blue); }

/* Bottom bar footer */
.cl-footer-bottom {
  border-top: 1px solid var(--border);
  padding: 20px 64px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 13px;
  color: var(--muted);
}
.cl-footer-copy { }
.cl-footer-links { display: flex; gap: 20px; }
.cl-footer-links a {
  color: var(--muted);
  text-decoration: none;
  font-weight: 500;
  transition: color .2s;
}
.cl-footer-links a:hover { color: var(--blue); }

/* ============================================================
   SEZIONE REVEAL — animazioni scroll (usate anche nelle page)
   ============================================================ */
.cl-reveal {
  opacity: 0;
  will-change: opacity, transform;
}
.cl-reveal.in-view {
  animation: clRevealUp 0.75s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes clRevealUp {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}

[data-anim] {
  opacity: 0;
  will-change: opacity, transform;
}
[data-anim].anim-in {
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(.22,1,.36,1);
  animation-duration: 0.7s;
}
[data-anim="hero-child"].anim-in   { animation-name: childUp; }
[data-anim="hero-card"].anim-in    { animation-name: childCard; }
[data-anim="stat"].anim-in         { animation-name: childPop; }
[data-anim="svc-left"].anim-in     { animation-name: childSlideLeft; }
[data-anim="svc-right"].anim-in    { animation-name: childSlideRight; }
[data-anim="flip"].anim-in         { animation-name: childFlipIn; animation-duration: 0.8s; }
[data-anim="blog-top"].anim-in     { animation-name: childUp; }
[data-anim="blog-bottom"].anim-in  { animation-name: childDown; }
[data-anim="sec-label"].anim-in    { animation-name: childFade; }
[data-anim="sec-title"].anim-in    { animation-name: childUp; }
[data-anim="sec-sub"].anim-in      { animation-name: childFade; }
[data-anim="footer-item"].anim-in  { animation-name: childUp; }

@keyframes childUp    { from{opacity:0;transform:translateY(36px)} to{opacity:1;transform:translateY(0)} }
@keyframes childDown  { from{opacity:0;transform:translateY(-28px)} to{opacity:1;transform:translateY(0)} }
@keyframes childCard  { from{opacity:0;transform:scale(0.88)translateY(20px)} to{opacity:1;transform:scale(1)translateY(0)} }
@keyframes childPop   { 0%{opacity:0;transform:scale(0.7)} 70%{opacity:1;transform:scale(1.06)} 100%{opacity:1;transform:scale(1)} }
@keyframes childSlideLeft  { from{opacity:0;transform:translateX(-48px)} to{opacity:1;transform:translateX(0)} }
@keyframes childSlideRight { from{opacity:0;transform:translateX(48px)} to{opacity:1;transform:translateX(0)} }
@keyframes childFlipIn{ from{opacity:0;transform:rotateY(-90deg)scale(0.8)} to{opacity:1;transform:rotateY(0)scale(1)} }
@keyframes childFade  { from{opacity:0;filter:blur(4px)} to{opacity:1;filter:blur(0)} }

/* ============================================================
   ELEMENTOR COMPATIBILITY — pagina libera
   ============================================================ */
.page-template-elementor_canvas #cl-header,
.page-template-elementor_canvas #cl-footer,
.page-template-elementor_canvas #cl-bottom-bar,
.page-template-elementor_canvas .cl-bb-spacer { display: none !important; }

.elementor-section,
.elementor-container { max-width: 100% !important; }

/* Quando Elementor è attivo sulla homepage non aggiunge padding inutili */
.home .cl-page-content { padding: 0; }
.home .cl-page-inner { max-width: 100%; padding: 0; }

/* Homepage fullwidth — Elementor (template normale e canvas) */
.home #cl-main {
  width: 100%;
  max-width: 100%;
  padding: 0;
}
.home .cl-page-content,
.home .cl-page-inner {
  max-width: 100%;
  padding: 0;
  width: 100%;
}
.home .elementor,
.home .elementor-section-wrap {
  width: 100% !important;
  max-width: 100% !important;
}

/* ============================================================
   BUTTONS UTILITY
   ============================================================ */
.cl-btn-grad {
  display: inline-block;
  background: linear-gradient(135deg, var(--blue), var(--violet));
  color: #fff;
  padding: 13px 28px;
  border-radius: 100px;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  box-shadow: 0 8px 30px rgba(59,110,248,0.3);
  transition: opacity .2s;
}
.cl-btn-grad:hover { opacity: .88; }

.cl-btn-white {
  display: inline-block;
  background: var(--white);
  color: var(--text);
  padding: 13px 28px;
  border-radius: 100px;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  border: 1px solid var(--border);
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
  transition: box-shadow .2s;
}
.cl-btn-white:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.1); }

/* ============================================================
   RESPONSIVE — TABLET (≤1024px)
   ============================================================ */
@media (max-width: 1024px) {
  #cl-header { padding: 0 32px; }
  #cl-primary-nav ul { gap: 20px; }

  .cl-footer-inner { padding: 40px 40px 28px; }
  .cl-footer-bottom { padding: 18px 40px; }

  .cl-page-inner { padding: 48px 28px 60px; }
  .home .cl-page-inner { padding: 0; }
  .cl-page-glass { padding: 36px 40px; }
  .cl-page-title { font-size: 34px; }
}

/* ============================================================
   RESPONSIVE — SMARTPHONE (≤768px)
   ============================================================ */
@media (max-width: 768px) {
  /* Header e hamburger tablet nascosti, mostra bottombar */
  #cl-header { display: none; }
  #cl-mobile-nav { display: none !important; }
  #cl-bottom-bar { display: flex; }
  .cl-bb-spacer { display: block; }

  /* Footer compatto */
  .cl-footer-inner {
    padding: 32px 24px 24px;
    flex-direction: column;
    gap: 28px;
  }
  .cl-footer-menus { gap: 28px; }
  .cl-footer-bottom {
    padding: 16px 24px;
    flex-direction: column;
    text-align: center;
    gap: 8px;
  }

  /* Page */
  .cl-page-inner { padding: 32px 20px 48px; }
  .home .cl-page-inner { padding: 0; }
  .cl-page-glass { padding: 24px 24px; }
  .cl-page-title { font-size: 26px; }
  .cl-post-title { font-size: 26px; }
  .cl-post-thumbnail { height: 220px; }

  /* Blobs ridotti */
  .cl-blob-1 { width: 260px; height: 260px; }
  .cl-blob-2 { width: 220px; height: 220px; }
  .cl-blob-3 { width: 180px; height: 180px; }
  .cl-blob-4 { width: 150px; height: 150px; }
}

@media (max-width: 480px) {
  .cl-footer-menus { flex-direction: column; }
  .cl-page-glass { padding: 20px 16px; }
}

/* ============================================================
   TABLET HAMBURGER (769px–1024px)
   ============================================================ */
@media (min-width: 769px) and (max-width: 1024px) {
  #cl-primary-nav { display: none; }
  .cl-hamburger { display: flex; }
}

/* ============================================================
   ADMIN BAR COMPENSATION
   ============================================================ */
.admin-bar #cl-header { top: 32px; }
.admin-bar #cl-mobile-nav { top: calc(32px + var(--header-h)); }
@media screen and (max-width: 782px) {
  .admin-bar #cl-header { top: 46px; }
}