/*
 * Header e footer del sito — Carolina de Almeida
 *
 * Prefisso dedicato: .dc-lay-*. Non condivide nulla con dc-pagine.css, cosi'
 * i due fogli non si pescano gli elementi a vicenda.
 *
 * Nessun selettore generico su elementi: ogni link ha la sua classe.
 *
 * Token letti dal CSS dei mockup. Sono ripetuti qui invece di ereditarli da
 * dc-pagine.css perche' li' vivono dentro .dc-pg, e header e footer stanno
 * fuori da quel wrapper.
 */

:root {
    --dc-lay-crema: #F6EEE9;
    --dc-lay-bordo: #E8D8CF;
    --dc-lay-accento: #C99A8E;
    --dc-lay-accento-scuro: #B98A7D;
    --dc-lay-terra: #8F5D52;
    --dc-lay-testo: #3A3330;
    --dc-lay-scuro: #3A3330;
    --dc-lay-scuro-testo: #D9CFC8;
    --dc-lay-scuro-chiaro: #F6EEE9;
    --dc-lay-cont: 1120px;
    --dc-lay-gutter: 24px;
    --dc-lay-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    --dc-lay-font: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Il tema e' disattivato: nessun foglio di tema imposta lo sfondo della pagina.
 *
 * Il selettore e' html body, non body: global-settings.css di Oxygen viene
 * servito dopo qualunque foglio del plugin e contiene
 * body{background-color:var(--bde-background-color)}. A parita' di specificita'
 * vincerebbe lui. Il posto giusto per questo colore restano le impostazioni
 * globali del builder: finche' non ci sono, questa riga tiene. */
html body {
    margin: 0;
    background: var(--dc-lay-crema);
    font-family: var(--dc-lay-font);
}

/* Oxygen avvolge ogni nodo Shortcode in un <div>. Dentro un div alto quanto la
 * barra, position:sticky non ha spazio per scorrere e l'header non si attacca
 * mai in cima. Con display:contents il <nav> torna figlio diretto del body.
 * Il selettore e' agganciato alla nostra classe, non a quella di Oxygen. */
.oxy-shortcode:has(> .dc-lay-bar),
.oxy-shortcode:has(> .dc-lay-pie) {
    display: contents;
}

/* --- contenitore condiviso ----------------------------------------------- */
.dc-lay-bar .dc-lay-cont,
.dc-lay-pie .dc-lay-cont {
    box-sizing: border-box;
    max-width: 100%;
    padding-inline: max(var(--dc-lay-gutter), (100% - var(--dc-lay-cont)) / 2);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

/* --- barra --------------------------------------------------------------- */
.dc-lay-bar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(246, 238, 233, 0.92);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--dc-lay-bordo);
    font-family: var(--dc-lay-font);
}

.dc-lay-bar .dc-lay-cont {
    padding-block: 16px;
    gap: 28px;
}

.dc-lay-marchio {
    font-family: var(--dc-lay-display);
    font-size: 22px;
    font-weight: 600;
    color: var(--dc-lay-testo);
    letter-spacing: 0.02em;
    text-decoration: none;
}

.dc-lay-voci {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    margin-left: auto;
    align-items: center;
    font-size: 15px;
}

.dc-lay-voce {
    color: var(--dc-lay-testo);
    text-decoration: none;
    transition: color 0.25s;
}

.dc-lay-voce:hover,
.dc-lay-voce:focus-visible {
    color: var(--dc-lay-terra);
}

.dc-lay-voce--bottone {
    background: var(--dc-lay-accento);
    color: var(--dc-lay-testo);
    padding: 10px 22px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 14px;
    transition: background 0.25s, color 0.25s;
}

.dc-lay-voce--bottone:hover,
.dc-lay-voce--bottone:focus-visible {
    background: var(--dc-lay-accento-scuro);
    color: var(--dc-lay-testo);
}

/* Sotto i 560px le voci vanno a capo sotto il marchio invece di schiacciarsi:
 * il mockup non ha un menu a scomparsa, e non se ne inventa uno qui.
 *
 * A quel punto la barra e' alta ~180px: lasciata sticky si mangerebbe un terzo
 * dello schermo su ogni scroll, quindi su telefono scorre via. E' una scelta
 * fatta qui: il mockup e' stato disegnato solo a larghezza desktop. */
@media (max-width: 560px) {
    .dc-lay-bar {
        position: static;
    }

    .dc-lay-bar .dc-lay-cont {
        gap: 14px;
    }

    .dc-lay-voci {
        margin-left: 0;
        width: 100%;
        gap: 16px;
        font-size: 14px;
    }
}

/* --- footer -------------------------------------------------------------- */
.dc-lay-pie {
    background: var(--dc-lay-scuro);
    color: var(--dc-lay-scuro-testo);
    font-family: var(--dc-lay-font);
}

.dc-lay-pie .dc-lay-cont {
    padding-block: 40px;
    gap: 24px;
    justify-content: space-between;
    font-size: 13px;
}

.dc-lay-pie-marchio {
    font-family: var(--dc-lay-display);
    font-size: 18px;
    color: var(--dc-lay-scuro-chiaro);
}

.dc-lay-pie-voci {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    align-items: center;
}

.dc-lay-pie-link {
    color: var(--dc-lay-scuro-testo);
    text-decoration: none;
    transition: color 0.25s;
}

.dc-lay-pie-link:hover,
.dc-lay-pie-link:focus-visible {
    color: var(--dc-lay-scuro-chiaro);
}

.dc-lay-pie-testo {
    color: var(--dc-lay-scuro-testo);
}

/* --- link di salto di Oxygen --------------------------------------------- */
/* Oxygen stampa il proprio skip link prima dell'header: senza stile resta
 * visibile in cima alla pagina. */
.oxy-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    background: var(--dc-lay-crema);
    color: var(--dc-lay-terra);
    padding: 12px 20px;
    border-radius: 0 0 8px 0;
    font-family: var(--dc-lay-font);
    font-size: 14px;
    text-decoration: none;
}

.oxy-skip-link:focus {
    left: 0;
}