/*
Theme Name: Quality Audio Child
Theme URI: https://qualityaudio.it
Description: Child theme di Blocksy per Quality Audio — variante "Atelier Notturno": palette chiara, accento teal, tipografia Cormorant Garamond + Jost. Pensato per costruire le pagine con Gutenberg.
Author: Quality Audio
Template: blocksy
Version: 1.5.0
Text Domain: atelier-notturno-child
*/

/* ==========================================================================
   Atelier Notturno — variabili colore
   (aggiornate su richiesta: sfondo chiaro invece di scuro, accento #23B3C7)
   ========================================================================== */
:root {
  --an-bg: #F7F3EC;
  --an-bg-alt: #EFE6DA;
  --an-bg-footer: #120C07;
  --an-ink: #120C07;
  --an-text: #000000;
  --an-text-78: #120C07;
  --an-text-68: #4A423C;
  --an-text-66: #554D46;
  --an-text-62: #6B625A;
  --an-text-60: #756C63;
  --an-text-55: #8B8179;
  --an-text-50: #A79D93;
  --an-accent: #23B3C7;
  --an-border: rgba(18, 12, 7, 0.10);
  --an-font-display: 'Cormorant Garamond', Georgia, serif;
  --an-font-body: 'Jost', system-ui, sans-serif;
}

/* ==========================================================================
   Base
   ========================================================================== */
body {
  background-color: var(--an-bg);
  color: var(--an-text-78);
  font-family: var(--an-font-body);
}

/* Se il tuo layout Blocksy usa un contenitore centrale per l'header/contenuto,
   Blocksy applica già lo sfondo del "Site Background" dal Customizer:
   imposta lì lo stesso colore (--an-bg qui sopra, #F7F3EC) da
   Blocksy > Personalizza > Colori Generali, così anche header e footer
   costruiti col Builder restano coerenti con il resto della pagina. */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--an-font-display);
  color: var(--an-text);
  font-weight: 600;
  letter-spacing: 0.01em;
}

p, li, blockquote, figcaption {
  color: var(--an-text-78);
  line-height: 1.7;
}

a {
  color: var(--an-accent);
  text-decoration: none;
}
a:hover {
  filter: brightness(1.1);
}

/* Titolo del sito nell'header (quando non è impostato un logo immagine da
   Blocksy > Personalizza, Blocksy mostra qui il nome del sito come testo) */
.site-title a {
  color: #949494;
  font-family: var(--an-font-body);
  font-size: small;
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: 0.5px;
}

/* Eyebrow / occhiello, come "IL CATALOGO" o "QUALITY AUDIO" nella bozza */
.qa-eyebrow {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--an-accent);
  margin-bottom: 16px;
}

/* Striscia tagline sotto l'header, come nella bozza */
.qa-tagline-bar {
  border-bottom: 1px solid var(--an-border);
  padding-bottom: 18px;
  font-size: 11.5px;
  letter-spacing: 0.03em;
  color: var(--an-text-62);
}

/* ==========================================================================
   Bottoni — blocco Gutenberg "Pulsante" (wp-block-button)
   ========================================================================== */
.wp-block-button__link,
.qa-btn {
  background-color: var(--an-accent) !important;
  color: var(--an-ink) !important;
  border: none;
  border-radius: 2px;
  padding: 16px 28px;
  font-family: var(--an-font-body);
  font-size: 13px;
  letter-spacing: 0.05em;
  font-weight: 500;
  text-transform: none;
  transition: filter 0.15s ease;
}
.wp-block-button__link:hover,
.qa-btn:hover {
  filter: brightness(1.08);
  color: var(--an-ink) !important;
}

/* Variante bottone contornato — aggiungi la classe "is-style-outline"
   dal pannello Stili del blocco Pulsante */
.wp-block-button.is-style-outline .wp-block-button__link {
  background-color: transparent !important;
  color: var(--an-text) !important;
  border: 1px solid rgba(18, 12, 7, 0.25);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background-color: rgba(18, 12, 7, 0.06) !important;
}

/* ==========================================================================
   Pannelli e card — applica la classe CSS aggiuntiva "qa-card" a un blocco
   Gruppo per ottenere le card con bordo sottile della bozza
   ========================================================================== */
.qa-card,
.wp-block-group.qa-card {
  background-color: var(--an-bg-alt);
  border: 1px solid var(--an-border);
  padding: 28px;
}

/* Riquadro immagine chiaro dentro le card prodotto, come nel catalogo */
.qa-card figure,
.qa-card .wp-block-image {
  background-color: #F7F2ED;
}

/* ==========================================================================
   Citazione — blocco Gutenberg "Citazione" (wp-block-quote)
   ========================================================================== */
.wp-block-quote {
  border: none;
  text-align: center;
  max-width: 780px;
  margin: 0 auto;
  padding: 0;
}
.wp-block-quote p {
  font-family: var(--an-font-display);
  font-style: italic;
  font-size: 28px;
  line-height: 1.55;
  font-weight: 500;
  color: var(--an-text);
}
.wp-block-quote cite {
  font-family: var(--an-font-body);
  font-style: normal;
  font-size: 13px;
  letter-spacing: 0.05em;
  color: var(--an-text-66);
}

/* ==========================================================================
   Separatore — blocco Gutenberg "Separatore"
   ========================================================================== */
.wp-block-separator {
  border-top: 1px solid var(--an-border);
  opacity: 1;
}

/* ==========================================================================
   Sfondi utili da assegnare via "Classe CSS aggiuntiva" sul blocco Gruppo/Copertina
   ========================================================================== */
.qa-bg-alt   { background-color: var(--an-bg-alt); }
.qa-bg-footer { background-color: var(--an-bg-footer); }
.qa-text-dim { color: var(--an-text-68); }

/* .qa-bg-footer resta scuro di proposito (tono "bookend" come nel footer del
   sito): il testo al suo interno va quindi forzato chiaro, visto che il
   resto della pagina ora è su sfondo chiaro. */
.qa-bg-footer,
.qa-bg-footer p,
.qa-bg-footer li,
.qa-bg-footer blockquote,
.qa-bg-footer figcaption {
  color: #C9BFB8;
}
.qa-bg-footer h1,
.qa-bg-footer h2,
.qa-bg-footer h3,
.qa-bg-footer h4,
.qa-bg-footer h5,
.qa-bg-footer h6 {
  color: #EDE6E1;
}
.qa-bg-footer a {
  color: var(--an-accent);
}

/* ==========================================================================
   Schede prodotto WooCommerce (Descrizione / Caratteristiche Tecniche /
   Contatti / Recensioni) — WooCommerce genera già il proprio markup e il
   proprio script per il cambio scheda, qui aggiungiamo solo la tinta
   dell'accento per farle combaciare con il resto del tema.
   ========================================================================== */
.woocommerce-tabs ul.tabs li.active,
.woocommerce-tabs ul.tabs li.active a {
  color: var(--an-accent);
}
.woocommerce-tabs ul.tabs li.active {
  border-bottom-color: var(--an-accent);
}

/* ==========================================================================
   Modulo contatti — [qa_contact_form]
   ========================================================================== */
.qa-contact-form {
  max-width: 560px;
}

.qa-contact-notice {
  padding: 14px 18px;
  margin-bottom: 24px;
  font-size: 13.5px;
  border: 1px solid var(--an-border);
}
.qa-contact-notice--ok {
  color: var(--an-accent);
  border-color: var(--an-accent);
}
.qa-contact-notice--error {
  color: #E39A9A;
  border-color: #E39A9A;
}

.qa-contact-form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.qa-contact-form__row {
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
}
.qa-contact-form__row label {
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--an-text-62);
  margin-bottom: 8px;
}
.qa-contact-form__row input,
.qa-contact-form__row textarea {
  background-color: var(--an-bg-alt);
  border: 1px solid var(--an-border);
  color: var(--an-text);
  font-family: var(--an-font-body);
  font-size: 14px;
  padding: 12px 14px;
  border-radius: 2px;
}
.qa-contact-form__row input:focus,
.qa-contact-form__row textarea:focus {
  outline: none;
  border-color: var(--an-accent);
}
.qa-contact-form__row textarea {
  resize: vertical;
}

.qa-contact-form__form .qa-btn {
  border: none;
  cursor: pointer;
}

.qa-contact-form__recaptcha {
  margin-bottom: 24px;
}