/*
Theme Name: Libreria Fantastica
Theme URI: https://example.com/
Description: Child theme di Kadence per il sito "Libreria Fantastica".
Author: Gabriele
Author URI: https://example.com/
Template: kadence
Version: 1.0.0
Text Domain: libreria-fantastica
*/

/* ============================================
   LIBRERIA FANTASTICA — CSS Base per Kadence
   Palette + Tipografia — Wireframe v5
   Incolla in: Aspetto → Personalizza → CSS aggiuntivo
   ============================================ */

/* --------------------------------------------
   1. VARIABILI GLOBALI
   Modifica qui per cambiare tutto il sito
   -------------------------------------------- */
:root {
  /* Palette */
  --lf-bg:          #F7F6F3;   /* sfondo principale */
  --lf-bg-card:     #FFFFFF;   /* sfondo card */
  --lf-bg-dark:     #111111;   /* sfondo scuro (hero, footer, newsletter) */
  --lf-text:        #111111;   /* testo principale */
  --lf-text-muted:  #888888;   /* testo secondario */
  --lf-text-light:  #BBBBBB;   /* testo terziari (date, minutaggio) */
  --lf-border:      #E5E3DF;   /* bordi card e divisori */
  --lf-accent:      #111111;   /* colore accento (bottoni, tag attivi) */
  --lf-accent-text: #FFFFFF;   /* testo su accento */
  --lf-hover-bg:    #F4F1EE;   /* hover su righe e card */

  /* Tipografia */
  --lf-font-display: 'DM Serif Display', Georgia, serif;   /* titoli */
  --lf-font-body:    'DM Sans', system-ui, sans-serif;     /* corpo testo */

  /* Spaziature */
  --lf-radius-sm:   8px;
  --lf-radius-md:   12px;
  --lf-radius-lg:   16px;
  --lf-radius-full: 100px;

  /* Ombre */
  --lf-shadow-sm:   0 1px 4px rgba(0,0,0,0.06);
  --lf-shadow-md:   0 4px 16px rgba(0,0,0,0.08);
  --lf-shadow-lg:   0 12px 32px rgba(0,0,0,0.12);
}


/* --------------------------------------------
   2. FONT — import da Google Fonts
   -------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700&family=DM+Serif+Display:ital@0;1&display=swap');


/* --------------------------------------------
   3. BASE — sfondo e colore testo globali
   -------------------------------------------- */
body {
  background-color: var(--lf-bg) !important;
  color: var(--lf-text) !important;
  font-family: var(--lf-font-body) !important;
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}


/* --------------------------------------------
   4. TITOLI
   -------------------------------------------- */
h1, h2, h3, h4, h5, h6,
.entry-title,
.wp-block-post-title {
  font-family: var(--lf-font-display) !important;
  font-weight: 400 !important;
  color: var(--lf-text) !important;
  line-height: 1.15;
  letter-spacing: -0.03em;
}

h1 { font-size: clamp(32px, 5vw, 52px); }
h2 { font-size: clamp(24px, 3.5vw, 36px); }
h3 { font-size: clamp(18px, 2.5vw, 24px); }
h4 { font-size: 18px; }
h5 { font-size: 15px; letter-spacing: 0; }


/* --------------------------------------------
   5. PARAGRAFI E CORPO TESTO
   -------------------------------------------- */
p, li, td, th, label, input, textarea, select {
  font-family: var(--lf-font-body) !important;
}

p {
  color: var(--lf-text);
  line-height: 1.75;
}

.entry-content p {
  font-size: 16px;
  line-height: 1.8;
  color: #333;
}


/* --------------------------------------------
   6. LINK
   -------------------------------------------- */
a {
  color: var(--lf-text);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--lf-text-muted);
}


/* --------------------------------------------
   7. NAVBAR
   -------------------------------------------- */
.site-header,
#masthead,
.kadence-header {
  background-color: rgba(247, 246, 243, 0.92) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--lf-border) !important;
}

/* Logo */
.site-branding .site-title,
.kadence-logo-title {
  font-family: var(--lf-font-display) !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  color: var(--lf-text) !important;
  letter-spacing: -0.3px;
}

/* Voci di menu */
.main-navigation a,
.kadence-navigation a,
#site-navigation a {
  font-family: var(--lf-font-body) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--lf-text-muted) !important;
  padding: 6px 14px !important;
  border-radius: var(--lf-radius-sm) !important;
  transition: color 0.2s, background 0.2s !important;
}

.main-navigation a:hover,
.kadence-navigation a:hover {
  color: var(--lf-text) !important;
  background: var(--lf-hover-bg) !important;
}


/* Header: inline search form */
.lf-header-search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #F0EEE9;
  border-radius: 8px;
  padding: 7px 14px;
  transition: background 0.2s;
}
.lf-header-search:focus-within {
  background: #E8E5DF;
}
.lf-header-search svg {
  flex-shrink: 0;
  color: #777;
}
.lf-header-search input[type="search"] {
  border: none !important;
  background: transparent !important;
  outline: none !important;
  box-shadow: none !important;
  font-family: var(--lf-font-body) !important;
  font-size: 13px !important;
  color: #333 !important;
  width: 120px;
  transition: width 0.25s ease;
  padding: 0 !important;
}
.lf-header-search input[type="search"]:focus {
  width: 200px;
}
.lf-header-search input[type="search"]::placeholder {
  color: #aaa;
}
/* hide native search clear button */
.lf-header-search input[type="search"]::-webkit-search-decoration,
.lf-header-search input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

/* Header: Newsletter button (Kadence header button) */
.header-button-wrap .header-button,
.kadence-header-button-wrap a {
  background: #111 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 7px 18px !important;
  font-family: var(--lf-font-body) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  transition: background 0.2s !important;
}
.header-button-wrap .header-button:hover,
.kadence-header-button-wrap a:hover {
  background: #333 !important;
}

/* --------------------------------------------
   8. BOTTONI
   -------------------------------------------- */
.wp-block-button__link,
.button,
button[type="submit"],
.kb-button {
  font-family: var(--lf-font-body) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  border-radius: var(--lf-radius-full) !important;
  padding: 10px 24px !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
}

/* Bottone primario (scuro) */
.wp-block-button.is-style-fill .wp-block-button__link,
.btn-primary,
.kb-button.kb-btn-global-outline {
  background: var(--lf-bg-dark) !important;
  color: var(--lf-accent-text) !important;
  border: none !important;
}

.wp-block-button.is-style-fill .wp-block-button__link:hover {
  background: #333 !important;
  transform: translateY(-1px);
  box-shadow: var(--lf-shadow-md);
}

/* Bottone secondario (outline) */
.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent !important;
  color: var(--lf-text) !important;
  border: 1.5px solid var(--lf-border) !important;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
  border-color: var(--lf-text) !important;
}


/* --------------------------------------------
   9. CARD GENERICHE
   -------------------------------------------- */
.wp-block-kadence-card,
.kb-card,
.post-card,
.lf-card {
  background: var(--lf-bg-card) !important;
  border: 1px solid var(--lf-border) !important;
  border-radius: var(--lf-radius-md) !important;
  box-shadow: var(--lf-shadow-sm) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
  overflow: hidden;
}

.wp-block-kadence-card:hover,
.kb-card:hover,
.post-card:hover,
.lf-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--lf-shadow-lg) !important;
}


/* --------------------------------------------
   10. TAG / PILL
   -------------------------------------------- */
.lf-tag,
.wp-block-post-terms a,
.post-tag {
  display: inline-block;
  background: var(--lf-hover-bg);
  color: #555;
  border-radius: 6px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 500;
  font-family: var(--lf-font-body);
  transition: background 0.15s, color 0.15s;
}

.lf-tag:hover,
.wp-block-post-terms a:hover {
  background: var(--lf-text) !important;
  color: #fff !important;
}


/* --------------------------------------------
   11. FOOTER
   -------------------------------------------- */
.site-footer,
#colophon {
  background: var(--lf-bg-card) !important;
  border-top: 1px solid var(--lf-border) !important;
  color: var(--lf-text-muted) !important;
}

.site-footer a,
#colophon a {
  color: var(--lf-text-muted) !important;
  font-size: 13px;
  font-weight: 500;
}

.site-footer a:hover,
#colophon a:hover {
  color: var(--lf-text) !important;
}


/* --------------------------------------------
   12. SEZIONE NEWSLETTER SCURA
   Aggiungila con un blocco Kadence Group
   e assegnagli la classe "lf-newsletter"
   -------------------------------------------- */
.lf-newsletter {
  background: var(--lf-bg-dark) !important;
  border-radius: var(--lf-radius-lg);
  padding: 64px 56px;
}

.lf-newsletter h2,
.lf-newsletter h3 {
  color: #ffffff !important;
}

.lf-newsletter p {
  color: rgba(255,255,255,0.45) !important;
}

.lf-newsletter input[type="email"] {
  background: rgba(255,255,255,0.07) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: var(--lf-radius-sm) !important;
  color: #fff !important;
  padding: 12px 16px !important;
  font-family: var(--lf-font-body) !important;
  width: 100%;
}

.lf-newsletter input[type="email"]::placeholder {
  color: rgba(255,255,255,0.3) !important;
}


/* --------------------------------------------
   13. UTILITY CLASSES
   Usale nei blocchi Kadence come "CSS class"
   -------------------------------------------- */

/* Testo muted */
.lf-muted { color: var(--lf-text-muted) !important; }

/* Label sezione (es. "LISTE CONSIGLIATE") */
.lf-label {
  font-family: var(--lf-font-body) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 1px !important;
  color: var(--lf-text-muted) !important;
  text-transform: uppercase;
}

/* Separatore */
.lf-divider {
  border: none;
  border-top: 1px solid var(--lf-border);
  margin: 32px 0;
}

/* Card hover semplice */
.lf-hover:hover {
  background: var(--lf-hover-bg) !important;
  cursor: pointer;
}

/* Testo italic display */
.lf-italic {
  font-family: var(--lf-font-display) !important;
  font-style: italic !important;
  color: var(--lf-text-muted) !important;
}


/* --------------------------------------------
   14. RESPONSIVE
   -------------------------------------------- */
@media (max-width: 768px) {
  h1 { font-size: 28px; }
  h2 { font-size: 22px; }
  h3 { font-size: 18px; }

  .lf-newsletter {
    padding: 32px 24px;
  }
}

/* ----------------------------------------
   STICKY HEADER
   ---------------------------------------- */

   .site-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 9999 !important;
    width: 100% !important;
    left: 0 !important;
  }
}

/* ----------------------------------------
   SITE TITLE — stile E
   ---------------------------------------- */
.site-branding .site-title,
.kadence-logo-title {
    font-family: 'DM Serif Display', Georgia, serif !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    color: var(--lf-text) !important;
    letter-spacing: -0.2px !important;
    line-height: 1.1 !important;
}

.site-branding .site-title::after,
.kadence-logo-title::after {
    content: 'FANTASY · FANTASCIENZA · LETTURE';
    display: block;
    font-family: 'DM Sans', sans-serif !important;
    font-size: 8px !important;
    font-weight: 500 !important;
    letter-spacing: 2px !important;
    color: var(--lf-muted) !important;
    margin-top: 2px !important;
}


/* ---- Voto nascosto (parametro interno) — rimuovi questa regola per mostrarlo ---- */
.lf-stars, .lf-star, .lf-stars-wrap, .lf-libro-rating, .lf-book-rating, .lf-rating-value { display: none !important; }