/*
Theme Name: Sunya
Theme URI: https://dadesign.it
Author: Davide Arduini
Author URI: https://dadesign.it
Description: Tema WordPress custom leggero e modulare. Nessun page builder, nessuna dipendenza. Puro codice, massime performance.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.9
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: sunya
Domain Path: /languages
Tags: custom-menu, custom-logo, featured-images, footer-widgets, translation-ready, accessibility-ready, custom-colors, custom-background
*/

/* ==========================================================================
   SUNYA THEME - Core Stylesheet
   
   Struttura CSS modulare:
   - style.css         → Reset + Base + Variabili + Layout
   - css/header.css    → Header e navigazione
   - css/footer.css    → Footer e widget
   - css/buttons.css   → Pulsanti e animazioni
   - css/cards.css     → Card e animazioni
   - css/forms.css     → Form e input
   
   Ogni foglio viene caricato condizionalmente dal suo modulo PHP.
   ========================================================================== */


/* --------------------------------------------------------------------------
   CSS Custom Properties (Variabili)
   I valori di default vengono sovrascritti dal Customizer via wp_add_inline_style
   -------------------------------------------------------------------------- */

:root {

    /* --- Colori principali --- */
    --sunya-color-primary: #1a1a2e;
    --sunya-color-secondary: #16213e;
    --sunya-color-accent: #e94560;
    --sunya-color-accent-rgb: 233, 69, 96;
    --sunya-color-accent-hover: #c73a52;
    --sunya-color-text: #2d2d2d;
    --sunya-color-text-light: #6b7280;
    --sunya-color-bg: #ffffff;
    --sunya-color-bg-alt: #f8f9fa;
    --sunya-color-border: #e5e7eb;

    /* --- Tipografia --- */
    --sunya-font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    --sunya-font-heading: var(--sunya-font-body);
    --sunya-font-size-base: 1rem;
    --sunya-font-size-sm: 0.875rem;
    --sunya-font-size-lg: 1.125rem;
    --sunya-font-size-xl: 1.25rem;
    --sunya-font-size-2xl: 1.5rem;
    --sunya-font-size-3xl: 1.875rem;
    --sunya-font-size-4xl: 2.25rem;
    --sunya-line-height-base: 1.6;
    --sunya-line-height-heading: 1.2;
    --sunya-font-weight-normal: 400;
    --sunya-font-weight-medium: 500;
    --sunya-font-weight-bold: 700;

    /* --- Spacing --- */
    --sunya-spacing-xs: 0.25rem;
    --sunya-spacing-sm: 0.5rem;
    --sunya-spacing-md: 1rem;
    --sunya-spacing-lg: 1.5rem;
    --sunya-spacing-xl: 2rem;
    --sunya-spacing-2xl: 3rem;
    --sunya-spacing-3xl: 4rem;
    --sunya-spacing-section: 5rem;

    /* --- Layout --- */
    --sunya-container-width: 1200px;
    --sunya-wide-width: 1400px;
    --sunya-content-width: 800px;
    --sunya-container-padding: 1.5rem;
    --sunya-sidebar-width: 300px;

    /* --- Border radius --- */
    --sunya-radius-sm: 4px;
    --sunya-radius-md: 8px;
    --sunya-radius-lg: 12px;
    --sunya-radius-full: 9999px;

    /* --- Shadows --- */
    --sunya-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --sunya-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
    --sunya-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    --sunya-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);

    /* --- Transizioni --- */
    --sunya-transition-fast: 150ms ease;
    --sunya-transition-base: 250ms ease;
    --sunya-transition-slow: 400ms ease;
    --sunya-transition-smooth: 300ms cubic-bezier(0.4, 0, 0.2, 1);
}


/* --------------------------------------------------------------------------
   Reset & Box Model
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 100%;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    font-family: var(--sunya-font-body);
    font-size: var(--sunya-font-size-base);
    font-weight: var(--sunya-font-weight-normal);
    line-height: var(--sunya-line-height-base);
    color: var(--sunya-color-text);
    background-color: var(--sunya-color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: clip;
}


/* --------------------------------------------------------------------------
   Tipografia base
   -------------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--sunya-font-heading);
    font-weight: var(--sunya-font-weight-bold);
    line-height: var(--sunya-line-height-heading);
    color: var(--sunya-color-primary);
    margin-bottom: var(--sunya-spacing-md);
    letter-spacing: var(--sunya-heading-letter-spacing, normal);
}

h1 { font-size: var(--sunya-font-size-4xl); }
h2 { font-size: var(--sunya-font-size-3xl); }
h3 { font-size: var(--sunya-font-size-2xl); }
h4 { font-size: var(--sunya-font-size-xl); }
h5 { font-size: var(--sunya-font-size-lg); }
h6 { font-size: var(--sunya-font-size-base); }

p {
    margin-bottom: var(--sunya-spacing-md);
}

p:last-child {
    margin-bottom: 0;
}

a {
    color: var(--sunya-color-accent);
    text-decoration: none;
    transition: color var(--sunya-transition-fast);
}

a:hover,
a:focus-visible {
    color: var(--sunya-color-accent-hover);
}

a:focus-visible {
    outline: 2px solid var(--sunya-color-accent);
    outline-offset: 2px;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

ul, ol {
    padding-left: var(--sunya-spacing-xl);
    margin-bottom: var(--sunya-spacing-md);
}

blockquote {
    margin: var(--sunya-spacing-lg) 0;
}


/* --------------------------------------------------------------------------
   Contrasto automatico: elementi con sfondo proprio

   Qualsiasi elemento che dichiara un background-color esplicito (tramite
   classe Gutenberg .has-background, o blocchi core con sfondo) deve avere
   un colore del testo esplicito — altrimenti lo eredita dal contesto
   (Cover block, Group con sfondo scuro, sezioni hero, ecc.).

   La pseudo-classe :where() ha specificità 0: non sovrascrive mai una
   regola con selettore normale, né i colori impostati dall'utente
   tramite .has-text-color nell'editor.
   -------------------------------------------------------------------------- */

/* Contrasto automatico: colore scuro solo su sfondi chiari.
   Esclude classi scure Gutenberg per non forzare testo scuro su sfondo scuro. */
:where(
    .has-background:not([class*="has-black"]):not([class*="has-dark"]):not([class*="has-contrast"]):not([class*="has-midnight"]):not([class*="has-deep"]),
    .wp-block-group.has-background:not([class*="has-black"]):not([class*="has-dark"]):not([class*="has-contrast"])
):not(.has-text-color) {
    color: var(--sunya-color-primary);
}

/* Cover is-light con immagine scura: WP imposta testo nero via :where() —
   forziamo bianco con selettori normali (specificità > 0). */
.wp-block-cover.is-light:not(.has-text-color) h1,
.wp-block-cover.is-light:not(.has-text-color) h2,
.wp-block-cover.is-light:not(.has-text-color) h3,
.wp-block-cover.is-light:not(.has-text-color) h4,
.wp-block-cover.is-light:not(.has-text-color) h5,
.wp-block-cover.is-light:not(.has-text-color) h6,
.wp-block-cover.is-light:not(.has-text-color) p {
    color: #ffffff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* Citazione dentro Cover: bianco su overlay scuro */
.wp-block-cover .wp-block-quote:not(.has-text-color),
.wp-block-cover .wp-block-pullquote:not(.has-text-color) {
    color: #ffffff;
}

.wp-block-cover .wp-block-quote:not(.has-text-color) cite,
.wp-block-cover .wp-block-pullquote:not(.has-text-color) cite {
    color: rgba(255, 255, 255, 0.75);
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--sunya-spacing-lg);
}

th, td {
    padding: var(--sunya-spacing-sm) var(--sunya-spacing-md);
    border-bottom: 1px solid var(--sunya-color-border);
    text-align: left;
}

th {
    font-weight: var(--sunya-font-weight-bold);
    color: var(--sunya-color-primary);
}

code, pre {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: var(--sunya-font-size-sm);
}

code {
    background-color: var(--sunya-color-bg-alt);
    padding: 0.125em 0.375em;
    border-radius: var(--sunya-radius-sm);
}

pre {
    background-color: var(--sunya-color-bg-alt);
    padding: var(--sunya-spacing-lg);
    border-radius: var(--sunya-radius-md);
    overflow-x: auto;
    margin-bottom: var(--sunya-spacing-lg);
}

pre code {
    background: none;
    padding: 0;
}

hr {
    border: none;
    border-top: 1px solid var(--sunya-color-border);
    margin: var(--sunya-spacing-xl) 0;
}


/* --------------------------------------------------------------------------
   Layout - Container
   -------------------------------------------------------------------------- */

.sunya-container {
    width: 100%;
    max-width: var(--sunya-container-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--sunya-container-padding);
    padding-right: var(--sunya-container-padding);
}

.sunya-container--narrow {
    max-width: 800px;
}

.sunya-container--wide {
    max-width: 1400px;
}

.sunya-container--full {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
}


/* --------------------------------------------------------------------------
   Gutenberg Alignments

   WordPress 6.9+ con theme.json genera il layout automaticamente:
   - .is-layout-constrained → max-width da contentSize/wideSize
   - .has-global-padding    → padding body con margin negativi su alignfull
   - useRootPaddingAwareAlignments → WP gestisce padding e full-width

   Queste regole CSS sono FALLBACK per contenuto che non passa
   dal block editor (shortcode, plugin, contenuto classico).
   Quando WP applica is-layout-constrained, le sue regole hanno
   già la specificità corretta e queste non interferiscono.

   Gerarchia delle larghezze:
   - Blocchi normali  → max-width: 1200px  (da theme.json contentSize)
   - .alignwide       → max-width: 1400px  (da theme.json wideSize)
   - .alignfull       → 100% viewport, nessun vincolo
   -------------------------------------------------------------------------- */

/*
 * Fallback per contenuto NON gestito dal layout engine di WP.
 * Quando WP applica .is-layout-constrained, le sue regole inline
 * (con specificità più alta via .wp-container-*) prevalgono.
 * Usiamo :not() per escludere i blocchi con allineamento esplicito.
 */
.sunya-entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.sunya-breadcrumb-wrap) {
    max-width: var(--sunya-container-width, 1200px);
    margin-left: auto;
    margin-right: auto;
}

/* Wide: più largo del contenuto ma non full-viewport */
.sunya-entry-content > .alignwide {
    max-width: var(--sunya-wide-width, 1400px);
    margin-left: auto;
    margin-right: auto;
}

/* Full: tutta la larghezza del viewport, nessun vincolo */
.sunya-entry-content > .alignfull {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}

/* Immagini full-width: stretch completo */
.sunya-entry-content > .alignfull img {
    width: 100%;
    height: auto;
    border-radius: 0;
}

/* Fix: l'immagine di sfondo del Cover block usa position: absolute
   e deve riempire il contenitore — la regola generica height: auto
   sopra non si applica a questo caso (specificità 0,3,1 > 0,2,1) */
.sunya-entry-content > .alignfull img.wp-block-cover__image-background {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
    position: absolute;
    inset: 0;
}

/* Cover full-width: padding interno per il testo, nessun bordo */
.sunya-entry-content > .wp-block-cover.alignfull {
    border-radius: 0;
    padding-left: var(--sunya-container-padding, 1.5rem);
    padding-right: var(--sunya-container-padding, 1.5rem);
}

/*
 * Blocchi full-width con contenuto interno: il contenuto resta centrato.
 * Copre sia il vecchio wrapper (__inner-container) sia il nuovo
 * sistema layout di WP 6.x.
 */
.sunya-entry-content > .alignfull > .wp-block-cover__inner-container,
.sunya-entry-content > .alignfull > .wp-block-group__inner-container {
    max-width: var(--sunya-container-width, 1200px);
    margin-left: auto;
    margin-right: auto;
}

/* Allineamento sinistro e destro */
.sunya-entry-content > .alignleft {
    float: left;
    margin-right: var(--sunya-spacing-lg);
    margin-bottom: var(--sunya-spacing-md);
    max-width: 50%;
}

.sunya-entry-content > .alignright {
    float: right;
    margin-left: var(--sunya-spacing-lg);
    margin-bottom: var(--sunya-spacing-md);
    max-width: 50%;
}

.sunya-entry-content > .aligncenter {
    clear: both;
    text-align: center;
}

/* Fallback: .alignwide dentro .sunya-container (template legacy) */
.sunya-container .alignwide {
    max-width: var(--sunya-wide-width, 1400px);
    margin-left: auto;
    margin-right: auto;
}


/* --------------------------------------------------------------------------
   Integrazione WordPress 6.x Layout Engine

   Con useRootPaddingAwareAlignments: true in theme.json, WP gestisce:
   - Padding laterale sul <body> via --wp--style--root--padding-*
   - Classe .has-global-padding sui container constrained
   - Margin negativi su .alignfull per compensare il padding body

   NON aggiungiamo padding ai figli di .is-layout-constrained
   perché WP lo gestisce già via body padding. Aggiungere padding
   qui causerebbe un doppio margine laterale.

   Le regole sotto servono solo per casi edge e per assicurare
   che il sistema Sunya e quello WP non confliggano.
   -------------------------------------------------------------------------- */

/*
 * Quando WP applica is-layout-constrained, i blocchi normali
 * ricevono max-width e margin auto dal CSS generato da WP.
 * Il padding laterale è gestito dal body (.has-global-padding).
 * Non serve aggiungere nulla qui — le regole fallback sopra
 * si attivano solo dove WP non interviene.
 */

/*
 * Fallback: se WP NON applica is-layout-constrained
 * (contenuto da plugin, shortcode, editor classico)
 * E il contenitore non ha il global-padding di WP,
 * aggiungiamo il padding laterale noi.
 */
.sunya-entry-content:not(.is-layout-constrained):not(.is-layout-flow):not(.has-global-padding) > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator) {
    padding-left: var(--sunya-container-padding, 1.5rem);
    padding-right: var(--sunya-container-padding, 1.5rem);
}


/* --------------------------------------------------------------------------
   Layout - Site structure
   -------------------------------------------------------------------------- */

/*
 * Layout sito: Flexbox colonna.
 * - TopBar, Header e Footer occupano la loro altezza naturale
 * - Main riempie lo spazio rimanente (flex: 1)
 * - Footer resta sempre in fondo anche con pagine corte
 * - L'ordine visivo segue sempre l'ordine DOM
 */
.sunya-site {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.sunya-main {
    flex: 1;
}

.sunya-content-area {
    padding-top: var(--sunya-spacing-section);
    padding-bottom: var(--sunya-spacing-section);
}

/* Layout con sidebar */
.sunya-layout--sidebar-right {
    display: grid;
    grid-template-columns: 1fr var(--sunya-sidebar-width);
    gap: var(--sunya-spacing-2xl);
}

.sunya-layout--sidebar-left {
    display: grid;
    grid-template-columns: var(--sunya-sidebar-width) 1fr;
    gap: var(--sunya-spacing-2xl);
}

.sunya-layout--full-width {
    max-width: 100%;
}


/* --------------------------------------------------------------------------
   Accessibilità
   -------------------------------------------------------------------------- */

/* Skip link */
.sunya-skip-link {
    position: absolute;
    top: -100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--sunya-color-primary);
    color: #ffffff;
    padding: var(--sunya-spacing-sm) var(--sunya-spacing-lg);
    z-index: 100000;
    border-radius: 0 0 var(--sunya-radius-md) var(--sunya-radius-md);
    font-weight: var(--sunya-font-weight-medium);
    transition: top var(--sunya-transition-fast);
}

.sunya-skip-link:focus {
    top: 0;
    color: #ffffff;
    outline: 2px solid var(--sunya-color-accent);
    outline-offset: 2px;
}

/* Screen reader text */
.sunya-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.sunya-sr-only:focus {
    position: static;
    width: auto;
    height: auto;
    padding: var(--sunya-spacing-sm);
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

/* Focus visibile migliorato */
:focus-visible {
    outline: 2px solid var(--sunya-color-accent);
    outline-offset: 2px;
}

/* Rispetta prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}


/* --------------------------------------------------------------------------
   Utility classes
   -------------------------------------------------------------------------- */

.sunya-text-center { text-align: center; }
.sunya-text-left { text-align: left; }
.sunya-text-right { text-align: right; }

.sunya-hidden { display: none !important; }
.sunya-visible { display: block !important; }

.sunya-flex { display: flex; }
.sunya-flex-center { display: flex; align-items: center; justify-content: center; }
.sunya-flex-between { display: flex; align-items: center; justify-content: space-between; }
.sunya-flex-wrap { flex-wrap: wrap; }
.sunya-flex-column { flex-direction: column; }
.sunya-gap-sm { gap: var(--sunya-spacing-sm); }
.sunya-gap-md { gap: var(--sunya-spacing-md); }
.sunya-gap-lg { gap: var(--sunya-spacing-lg); }

.sunya-grid { display: grid; }
.sunya-grid-2 { grid-template-columns: repeat(2, 1fr); }
.sunya-grid-3 { grid-template-columns: repeat(3, 1fr); }
.sunya-grid-4 { grid-template-columns: repeat(4, 1fr); }

.sunya-mt-0 { margin-top: 0; }
.sunya-mb-0 { margin-bottom: 0; }
.sunya-mt-md { margin-top: var(--sunya-spacing-md); }
.sunya-mb-md { margin-bottom: var(--sunya-spacing-md); }
.sunya-mt-lg { margin-top: var(--sunya-spacing-lg); }
.sunya-mb-lg { margin-bottom: var(--sunya-spacing-lg); }
.sunya-mt-xl { margin-top: var(--sunya-spacing-xl); }
.sunya-mb-xl { margin-bottom: var(--sunya-spacing-xl); }
.sunya-mt-section { margin-top: var(--sunya-spacing-section); }
.sunya-mb-section { margin-bottom: var(--sunya-spacing-section); }

.sunya-pt-0 { padding-top: 0; }
.sunya-pb-0 { padding-bottom: 0; }
.sunya-pt-section { padding-top: var(--sunya-spacing-section); }
.sunya-pb-section { padding-bottom: var(--sunya-spacing-section); }


/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media screen and (max-width: 1024px) {

    .sunya-layout--sidebar-right,
    .sunya-layout--sidebar-left {
        grid-template-columns: 1fr;
    }

    .sunya-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Su schermi medi, wide = full width disponibile */
    .sunya-entry-content > .alignwide {
        max-width: 100%;
    }

    /* Float annullati su tablet */
    .sunya-entry-content > .alignleft,
    .sunya-entry-content > .alignright {
        float: none;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    /* Su tablet, il padding laterale dei blocchi si riduce con la variabile */
    .sunya-entry-content.is-layout-constrained > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright) {
        padding-left: var(--sunya-container-padding);
        padding-right: var(--sunya-container-padding);
    }
}

@media screen and (max-width: 768px) {

    :root {
        --sunya-font-size-4xl: 1.875rem;
        --sunya-font-size-3xl: 1.5rem;
        --sunya-font-size-2xl: 1.25rem;
        --sunya-spacing-section: 3rem;
        --sunya-container-padding: 1rem;
    }

    .sunya-grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 480px) {

    .sunya-grid-2,
    .sunya-grid-3 {
        grid-template-columns: 1fr;
    }
}