/* ============================================================
   Irene Carrer Site — Design System CSS Custom Properties
   Corrisponde esattamente ai token Tailwind v4 del sito Next.js
   ============================================================ */

/* ── Font: caricati via wp_enqueue_style in functions.php ── */
/* @import come backup nel caso il <link> non si carichi in tempo */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,400;0,700;1,400;1,700&family=Plus+Jakarta+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;700&display=swap');

/* ── Material Symbols ────────────────────────────────────── */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    font-family: 'Material Symbols Outlined';
    font-style: normal;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
}

/* ── Design Tokens A.L.I.N.E.A.™ ────────────────────────── */
:root {
    /* Palette A.L.I.N.E.A.™ */
    /* Primary – Bordeaux Profondo */
    --tm-primary:                    #610C27;
    --tm-on-primary:                 #EFECE9;
    --tm-primary-container:          #E3C1B4;
    --tm-on-primary-container:       #050505;
    --tm-primary-fixed:              #F5E4DC;
    --tm-primary-fixed-dim:          #E3C1B4;
    --tm-on-primary-fixed:           #050505;
    --tm-on-primary-fixed-variant:   #610C27;
    --tm-inverse-primary:            #E3C1B4;

    /* Secondary – Tortora */
    --tm-secondary:                  #AC9C8D;
    --tm-on-secondary:               #050505;
    --tm-secondary-container:        #DDD9CE;
    --tm-on-secondary-container:     #050505;
    --tm-secondary-fixed:            #EDE8E2;
    --tm-secondary-fixed-dim:        #DDD9CE;
    --tm-on-secondary-fixed:         #050505;
    --tm-on-secondary-fixed-variant: #3A3A3A;

    /* Tertiary – Malva Profondo */
    --tm-tertiary:                   #8C6A72;
    --tm-on-tertiary:                #EFECE9;
    --tm-tertiary-container:         #E8D2D8;
    --tm-on-tertiary-container:      #050505;
    --tm-tertiary-fixed:             #F0E4E8;
    --tm-tertiary-fixed-dim:         #E8D2D8;
    --tm-on-tertiary-fixed:          #050505;
    --tm-on-tertiary-fixed-variant:  #5A3A42;

    /* Surface – Bianco Latte & Avorio Caldo */
    --tm-surface:                    #EFECE9;
    --tm-surface-dim:                #DDD9CE;
    --tm-surface-bright:             #EFECE9;
    --tm-surface-variant:            #E3C1B4;
    --tm-surface-container-lowest:   #ffffff;
    --tm-surface-container-low:      #F5F2EE;
    --tm-surface-container:          #DDD9CE;
    --tm-surface-container-high:     #CEC9BE;
    --tm-surface-container-highest:  #BEBAB0;
    --tm-surface-tint:               #610C27;
    --tm-on-surface:                 #050505;
    --tm-on-surface-variant:         #3A3A3A;
    --tm-inverse-surface:            #050505;
    --tm-inverse-on-surface:         #EFECE9;

    /* Background */
    --tm-background:                 #EFECE9;
    --tm-on-background:              #050505;

    /* Contorni */
    --tm-outline:                    #AC9C8D;
    --tm-outline-variant:            #DDD9CE;

    /* Errore + Accento – Rosso Energia */
    --tm-error:                      #A32638;
    --tm-on-error:                   #EFECE9;
    --tm-error-container:            #F5D0D6;
    --tm-on-error-container:         #6B0010;

    /* Border Radius */
    --tm-radius:                     0.125rem;
    --tm-radius-lg:                  0.25rem;
    --tm-radius-xl:                  0.5rem;
    --tm-radius-full:                0.75rem;
    --tm-radius-pill:                9999px;

    /* Font Families */
    --tm-font-headline:              'Noto Serif', 'Georgia', serif;
    --tm-font-body:                  'Plus Jakarta Sans', 'Helvetica Neue', Arial, sans-serif;
    --tm-font-label:                 'Space Grotesk', 'Arial', sans-serif;

    /* Ombre */
    --tm-shadow-sm:                  0 1px 3px rgba(0, 0, 0, 0.08);
    --tm-shadow-md:                  0 4px 12px rgba(0, 0, 0, 0.10);
    --tm-shadow-lg:                  0 8px 32px rgba(0, 0, 0, 0.12);
    --tm-shadow-glass:               0 8px 32px rgba(0, 0, 0, 0.15);

    /* Layout */
    --tm-max-width:                  1536px;
    --tm-content-width:              768px;
    --tm-wide-width:                 1280px;

    /* WordPress preset aliases */
    --wp--preset--color--primary:                 var(--tm-primary);
    --wp--preset--color--on-primary:              var(--tm-on-primary);
    --wp--preset--color--primary-container:       var(--tm-primary-container);
    --wp--preset--color--on-primary-container:    var(--tm-on-primary-container);
    --wp--preset--color--primary-fixed:           var(--tm-primary-fixed);
    --wp--preset--color--primary-fixed-dim:       var(--tm-primary-fixed-dim);
    --wp--preset--color--inverse-primary:         var(--tm-inverse-primary);
    --wp--preset--color--secondary:               var(--tm-secondary);
    --wp--preset--color--on-secondary:            var(--tm-on-secondary);
    --wp--preset--color--secondary-container:     var(--tm-secondary-container);
    --wp--preset--color--on-secondary-container:  var(--tm-on-secondary-container);
    --wp--preset--color--secondary-fixed:         var(--tm-secondary-fixed);
    --wp--preset--color--secondary-fixed-dim:     var(--tm-secondary-fixed-dim);
    --wp--preset--color--tertiary:                var(--tm-tertiary);
    --wp--preset--color--on-tertiary:             var(--tm-on-tertiary);
    --wp--preset--color--tertiary-container:      var(--tm-tertiary-container);
    --wp--preset--color--on-tertiary-container:   var(--tm-on-tertiary-container);
    --wp--preset--color--tertiary-fixed:          var(--tm-tertiary-fixed);
    --wp--preset--color--tertiary-fixed-dim:      var(--tm-tertiary-fixed-dim);
    --wp--preset--color--surface:                 var(--tm-surface);
    --wp--preset--color--surface-dim:             var(--tm-surface-dim);
    --wp--preset--color--surface-bright:          var(--tm-surface-bright);
    --wp--preset--color--surface-variant:         var(--tm-surface-variant);
    --wp--preset--color--surface-container-lowest:var(--tm-surface-container-lowest);
    --wp--preset--color--surface-container-low:   var(--tm-surface-container-low);
    --wp--preset--color--surface-container:       var(--tm-surface-container);
    --wp--preset--color--surface-container-high:  var(--tm-surface-container-high);
    --wp--preset--color--surface-container-highest: var(--tm-surface-container-highest);
    --wp--preset--color--on-surface:              var(--tm-on-surface);
    --wp--preset--color--on-surface-variant:      var(--tm-on-surface-variant);
    --wp--preset--color--inverse-surface:         var(--tm-inverse-surface);
    --wp--preset--color--inverse-on-surface:      var(--tm-inverse-on-surface);
    --wp--preset--color--background:              var(--tm-background);
    --wp--preset--color--on-background:           var(--tm-on-background);
    --wp--preset--color--outline:                 var(--tm-outline);
    --wp--preset--color--outline-variant:         var(--tm-outline-variant);
    --wp--preset--color--error:                   var(--tm-error);
    --wp--preset--color--on-error:                var(--tm-on-error);
    --wp--preset--color--error-container:         var(--tm-error-container);
    --wp--preset--color--on-error-container:      var(--tm-on-error-container);

    --wp--preset--font-family--headline:          var(--tm-font-headline);
    --wp--preset--font-family--body:              var(--tm-font-body);
    --wp--preset--font-family--label:             var(--tm-font-label);
}

/* ── Reset Base ──────────────────────────────────────────── */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    scroll-padding-top: 5rem; /* offset per sticky navbar */
}

/* ── Spacing utilities critiche (fallback per Tailwind CDN) ── */
.pt-0  { padding-top: 0 !important; }
.pt-4  { padding-top: 1rem !important; }
.pt-8  { padding-top: 2rem !important; }
.pt-16 { padding-top: 4rem !important; }
.pt-20 { padding-top: 5rem !important; }
.pt-24 { padding-top: 6rem !important; }
.pt-28 { padding-top: 7rem !important; }
.pt-32 { padding-top: 8rem !important; }
.pb-20 { padding-bottom: 5rem !important; }
.pb-28 { padding-bottom: 7rem !important; }
.py-20 { padding-top: 5rem !important; padding-bottom: 5rem !important; }
.py-28 { padding-top: 7rem !important; padding-bottom: 7rem !important; }
.py-32 { padding-top: 8rem !important; padding-bottom: 8rem !important; }

body {
    background-color: var(--wp--preset--color--surface, var(--tm-surface)) !important;
    color: var(--wp--preset--color--on-surface, var(--tm-on-surface)) !important;
    font-family: 'Plus Jakarta Sans', 'Helvetica Neue', Arial, sans-serif !important;
    font-size: 1rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

p, span, li, td, th, blockquote, label, input, textarea, select, button {
    font-family: 'Plus Jakarta Sans', 'Helvetica Neue', Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Noto Serif', Georgia, serif !important;
}

/* ── Tailwind custom color utility fallbacks ───────────────────────── */
.font-headline { font-family: 'Noto Serif', Georgia, serif !important; }
.font-body     { font-family: 'Plus Jakarta Sans', 'Helvetica Neue', Arial, sans-serif !important; }
.font-label    { font-family: 'Space Grotesk', Arial, sans-serif !important; }
.font-serif    { font-family: 'Noto Serif', Georgia, serif !important; }

.text-primary { color: var(--tm-primary) !important; }
.text-on-primary { color: var(--tm-on-primary) !important; }
.text-primary-container { color: var(--tm-primary-container) !important; }
.text-on-primary-container { color: var(--tm-on-primary-container) !important; }
.text-secondary { color: var(--tm-secondary) !important; }
.text-on-secondary { color: var(--tm-on-secondary) !important; }
.text-secondary-container { color: var(--tm-secondary-container) !important; }
.text-on-secondary-container { color: var(--tm-on-secondary-container) !important; }
.text-tertiary { color: var(--tm-tertiary) !important; }
.text-on-tertiary { color: var(--tm-on-tertiary) !important; }
.text-tertiary-container { color: var(--tm-tertiary-container) !important; }
.text-on-tertiary-container { color: var(--tm-on-tertiary-container) !important; }
.text-surface { color: var(--tm-surface) !important; }
.text-on-surface { color: var(--tm-on-surface) !important; }
.text-surface-variant { color: var(--tm-surface-variant) !important; }
.text-on-surface-variant { color: var(--tm-on-surface-variant) !important; }
.text-background { color: var(--tm-background) !important; }
.text-on-background { color: var(--tm-on-background) !important; }
.text-outline { color: var(--tm-outline) !important; }
.text-error { color: var(--tm-error) !important; }
.text-on-error { color: var(--tm-on-error) !important; }
.text-on-primary\/70 { color: rgba(239,236,233,0.7) !important; }
.text-on-primary\/80 { color: rgba(239,236,233,0.8) !important; }
.text-on-secondary\/70 { color: rgba(5,5,5,0.7) !important; }
.text-on-secondary\/80 { color: rgba(5,5,5,0.8) !important; }
.text-on-tertiary\/70 { color: rgba(239,236,233,0.7) !important; }
.text-on-tertiary\/80 { color: rgba(239,236,233,0.8) !important; }
.text-on-primary-container\/80 { color: rgba(5,5,5,0.8) !important; }
.text-on-secondary-container\/80 { color: rgba(5,5,5,0.8) !important; }
.text-on-tertiary-container\/80 { color: rgba(5,5,5,0.8) !important; }
.text-surface-variant\/60 { color: rgba(227,193,180,0.6) !important; }

.bg-primary { background-color: var(--tm-primary) !important; }
.bg-on-primary { background-color: var(--tm-on-primary) !important; }
.bg-primary-container { background-color: var(--tm-primary-container) !important; }
.bg-secondary { background-color: var(--tm-secondary) !important; }
.bg-secondary-container { background-color: var(--tm-secondary-container) !important; }
.bg-tertiary { background-color: var(--tm-tertiary) !important; }
.bg-tertiary-container { background-color: var(--tm-tertiary-container) !important; }
.bg-surface { background-color: var(--tm-surface) !important; }
.bg-surface-variant { background-color: var(--tm-surface-variant) !important; }
.bg-surface-container-lowest { background-color: var(--tm-surface-container-lowest) !important; }
.bg-surface-container-low { background-color: var(--tm-surface-container-low) !important; }
.bg-surface-container { background-color: var(--tm-surface-container) !important; }
.bg-surface-container-high { background-color: var(--tm-surface-container-high) !important; }
.bg-surface-container-highest { background-color: var(--tm-surface-container-highest) !important; }
.bg-background { background-color: var(--tm-background) !important; }
.bg-error { background-color: var(--tm-error) !important; }
.bg-error-container { background-color: var(--tm-error-container) !important; }
.bg-white { background-color: #ffffff !important; }
.bg-primary\/5 { background-color: rgba(97,12,39,0.05) !important; }
.bg-primary-container\/30 { background-color: rgba(227,193,180,0.3) !important; }
.bg-primary-container\/40 { background-color: rgba(227,193,180,0.4) !important; }
.bg-secondary\/10 { background-color: rgba(172,156,141,0.1) !important; }
.bg-tertiary\/10 { background-color: rgba(140,106,114,0.1) !important; }
.bg-tertiary\/90 { background-color: rgba(140,106,114,0.9) !important; }
.bg-on-primary\/10 { background-color: rgba(239,236,233,0.1) !important; }
.bg-white\/20 { background-color: rgba(255,255,255,0.2) !important; }
.bg-surface\/10 { background-color: rgba(239,236,233,0.1) !important; }
.bg-surface-container-low\/95 { background-color: rgba(245,242,238,0.95) !important; }

.border-primary { border-color: var(--tm-primary) !important; }
.border-secondary { border-color: var(--tm-secondary) !important; }
.border-outline { border-color: var(--tm-outline) !important; }
.border-outline-variant { border-color: var(--tm-outline-variant) !important; }
.border-surface { border-color: var(--tm-surface) !important; }
.border-primary\/20 { border-color: rgba(97,12,39,0.2) !important; }
.border-outline\/30 { border-color: rgba(172,156,141,0.3) !important; }
.border-outline-variant\/20 { border-color: rgba(221,217,206,0.2) !important; }
.border-surface\/30 { border-color: rgba(239,236,233,0.3) !important; }

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

a {
    color: var(--tm-primary);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: var(--tm-primary-container);
}

/* ── Tipografia ──────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Noto Serif', Georgia, serif !important;
    font-weight: 700;
    line-height: 1.15;
    color: var(--tm-on-surface);
}

/* ── Utility Classes (usate nei Bricks Custom CSS) ────────── */

/* Navigazione glass */
.tm-glass-nav {
    background: rgba(239, 236, 233, 0.92);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-bottom: 1px solid rgba(172, 156, 141, 0.25);
}

/* Utility mancanti per la navbar */
.border-white\/50   { border-color: rgba(255,255,255,0.5) !important; }
.border-transparent { border-color: transparent !important; }
.whitespace-nowrap  { white-space: nowrap !important; }
.flex-1             { flex: 1 1 0% !important; }
.justify-center     { justify-content: center !important; }

/* Glassmorphism card */
.tm-glass-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Glow testo */
.tm-text-glow {
    text-shadow: 0 0 20px rgba(97, 12, 39, 0.2);
}

/* Gradiente hero */
.tm-hero-gradient {
    background:
        radial-gradient(circle at 70% 20%, rgba(227, 193, 180, 0.30) 0%, transparent 55%),
        radial-gradient(circle at 10% 80%, rgba(220, 213, 206, 0.25) 0%, transparent 50%);
}

/* Sfondo scuro hero */
.tm-hero-dark {
    background: linear-gradient(135deg, #050505 0%, #1a0810 100%);
}

/* Orb decorativo */
.tm-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
}

.tm-orb--bordeaux {
    background: rgba(97, 12, 39, 0.15);
}

.tm-orb--malva {
    background: rgba(140, 106, 114, 0.15);
}

/* Hover immagine scala */
.tm-scale-hover {
    transition: transform 0.4s ease;
}
.tm-scale-hover:hover {
    transform: scale(1.02);
}

/* Immagine grayscale → colore su hover */
.tm-grayscale-hover img {
    filter: grayscale(100%);
    transition: filter 0.4s ease;
}
.tm-grayscale-hover:hover img {
    filter: grayscale(0%);
}

/* Bento grid editoriale (12 colonne) */
.tm-editorial-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 2rem;
}

/* Card bento */
.tm-bento-card {
    border-radius: var(--tm-radius-xl);
    overflow: hidden;
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.tm-bento-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--tm-shadow-lg);
}

/* Transizione pagina */
.tm-page-transition {
    animation: tmFadeSlideIn 0.35s ease-out both;
}

@keyframes tmFadeSlideIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Etichetta / tag in maiuscolo */
.tm-label {
    font-family: var(--tm-font-label);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* Separatore hairline */
.tm-hairline {
    border: none;
    border-top: 1px solid var(--tm-outline-variant);
}

/* Bottone primario */
.tm-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.75rem;
    background-color: var(--tm-primary);
    color: var(--tm-on-primary);
    font-family: var(--tm-font-label);
    font-weight: 600;
    font-size: 0.875rem;
    letter-spacing: 0.05em;
    border: none;
    border-radius: var(--tm-radius-pill);
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.2s ease, transform 0.2s ease;
    white-space: nowrap;
}
.tm-btn-primary:hover {
    background-color: var(--tm-primary-container);
    color: var(--tm-on-primary-container);
    transform: translateY(-1px);
}

/* Bottone outline */
.tm-btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.75rem;
    background-color: transparent;
    color: var(--tm-on-surface);
    font-family: var(--tm-font-label);
    font-weight: 600;
    font-size: 0.875rem;
    letter-spacing: 0.05em;
    border: 1.5px solid var(--tm-outline);
    border-radius: var(--tm-radius-pill);
    cursor: pointer;
    text-decoration: none;
    transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
    white-space: nowrap;
}
.tm-btn-outline:hover {
    border-color: var(--tm-primary);
    color: var(--tm-primary);
    transform: translateY(-1px);
}

/* Sezione padding standard */
.tm-section {
    padding-block: 6rem;
}

@media (max-width: 768px) {
    .tm-section {
        padding-block: 4rem;
    }
    .tm-editorial-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

/* ── Stili output wysiwyg ACF (classe .tm-prose) ────────── */
.tm-prose,
.tm-prose p,
.tm-prose li,
.tm-prose ul,
.tm-prose ol,
.tm-prose span,
.tm-prose blockquote {
    font-family: 'Plus Jakarta Sans', 'Helvetica Neue', Arial, sans-serif !important;
}
.tm-prose p {
    font-size: 1.125rem;
    line-height: 1.75;
    color: var(--tm-on-surface-variant);
    margin-bottom: 1.25rem;
}
.tm-prose p:last-child { margin-bottom: 0; }
.tm-prose ul,
.tm-prose ol {
    margin: 0.75rem 0 1rem 1.5rem !important;
    padding-left: 0 !important;
    list-style: disc !important;
}
.tm-prose ol {
    list-style: decimal !important;
}
.tm-prose li {
    font-size: 1.125rem;
    line-height: 1.75;
    color: var(--tm-on-surface-variant);
    margin-bottom: 0.35rem;
    list-style: disc !important;
    display: list-item !important;
}
.tm-prose strong { color: var(--tm-on-surface); font-weight: 600; }
.tm-prose em { font-style: italic; }
.tm-prose a { color: var(--tm-primary); }

/* Variante su sfondo scuro */
.tm-prose-light p,
.tm-prose-light li { color: rgba(239,236,233,0.85); }
.tm-prose-light strong { color: #EFECE9; }