/*
Theme Name: Artesicura
Description: Tema proprietario Artesicura.
Version: 0.1.0
Requires PHP: 7.4
Text Domain: artesicura
*/

/* Foundation only: visual components follow in their assigned plans. */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
img { max-width: 100%; height: auto; }
.site-main { max-width: 820px; margin-inline: auto; padding: 24px; overflow-wrap: anywhere; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.screen-reader-text:focus { position: fixed; inset: 8px auto auto 8px; width: auto; height: auto; padding: 12px; clip-path: none; background: white; color: black; z-index: 1000; }

.site-header { --artesicura-nav-breakpoint: 62rem; min-height: 88px; padding: 0 64px; display: flex; align-items: center; justify-content: space-between; gap: 32px; background: #F2F0E9; color: #23282A; }
.site-logo { flex: 0 0 auto; display: block; }
.site-logo img { display: block; width: 183px; height: 30px; }
.nav-list, .nav-panel { list-style: none; margin: 0; padding: 0; }
.nav-list { display: flex; align-items: center; flex-wrap: wrap; gap: 24px; font-family: Inter, sans-serif; font-size: 15px; font-weight: 500; letter-spacing: .02em; }
.nav-list a { display: block; color: inherit; text-decoration: none; padding: 12px 0; }
/* The gold CTA is excluded: it is a button, not a text link (D03 rev.3). */
.nav-list a:not(.nav-quote):hover, .nav-list a:not(.nav-quote)[aria-current="page"] { text-decoration: underline; text-underline-offset: .25em; }
/* «Scopri» is a button, not a link (no page of its own): on hover it underlines like «Servizi» (Jp, 13/10). */
.nav-heading button[data-nav-toggle]:not([hidden]):hover { text-decoration: underline; text-underline-offset: .25em; }
.nav-group { position: relative; }
.nav-heading { display: flex; align-items: center; }
.nav-heading button { font: inherit; color: inherit; background: transparent; border: 0; min-height: 44px; min-width: 44px; cursor: pointer; padding: 10px 0; }
/* No chevrons (Jp, 28/09). The Servizi toggle has no label of its own: hidden, so it is not an invisible tab stop; the panel still opens on hover and on focus. */
.nav-heading a + button[data-nav-toggle] { display: none; }
.nav-heading:has(button:not([hidden])) .nav-no-js-label { display: none; }
.nav-panel { padding: 8px 16px; background: #F2F0E9; width: 288px; max-width: calc(100vw - 44px); }
/* Feedback v5 (Silvia, 13/10): the panel opens right under the item that opens it (it was right-aligned to
   the item, so it slid 250px to the left and the pointer lost it). It starts at the item's bottom edge, so
   there is no gap to cross with the mouse. */
.nav-group:has(button:not([hidden])) .nav-panel { position: absolute; z-index: 20; top: 100%; inset-inline-start: 0; box-shadow: 0 8px 16px #003D3420; }
.nav-panel a { padding: 11px 0; line-height: 1.4; overflow-wrap: anywhere; }
/* Fill, radius, padding and label typography are the Figma primary button, in buttons.css. */
/* CTA colours come from the tokens; D03 was decided and applied in 01-08. */
.site-header :focus-visible { outline: 3px solid #003D34; outline-offset: 3px; }
.site-header [hidden] { display: none !important; }
/* CSS supplies the breakpoint to matchMedia; JS alone changes the mode attribute.
   62rem (992px at default size) exceeds measured 971px header width with final Inter. */
.site-header[data-nav-mode="mobile"] { min-height: 62px; padding: 9px 22px; }
.site-header[data-nav-mode="mobile"] .site-logo img { width: 159px; height: 26px; }
.site-header[data-nav-mode="mobile"] .site-logo { flex: 0 1 159px; min-width: 0; }
.site-header[data-nav-mode="mobile"] .site-logo img { height: auto; }
.site-header[data-nav-mode="mobile"] .nav-open { flex: 0 0 44px; }
.nav-open, .nav-close { width: 44px; height: 44px; display: grid; place-content: center; color: #23282A; background: transparent; border: 0; cursor: pointer; }
.nav-open span { width: 24px; height: 2px; background: currentColor; box-shadow: 0 -7px currentColor, 0 7px currentColor; }
.nav-dialog { inset: 0; width: 100%; max-width: none; height: 100vh; height: 100dvh; max-height: 100dvh; margin: 0; border: 0; padding: 0 22px 32px; background: #F2F0E9; color: #23282A; overflow-y: auto; overscroll-behavior: contain; }
.nav-dialog:not([open]) { display: none; }
.nav-dialog::backdrop { background: #F2F0E9; }
.nav-dialog-bar { height: 62px; display: flex; align-items: center; justify-content: flex-end; }
.nav-close { font: 32px/1 sans-serif; }
.nav-mobile-list, .nav-mobile-list ul { list-style: none; margin: 0; padding: 0; font-family: Inter, sans-serif; }
.nav-mobile-list a, .nav-mobile-list button { font: inherit; color: inherit; width: 100%; text-align: start; overflow-wrap: anywhere; }
.nav-mobile-list button { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 57px; padding: 12px 0; border: 0; background: transparent; cursor: pointer; }
.nav-mobile-list a { display: block; min-height: 54px; padding: 16px 0; text-decoration: none; }
.nav-mobile-list ul a { min-height: 40px; padding: 10px 0; line-height: 1.3; }
.nav-mobile-list a:not(.nav-quote):hover, .nav-mobile-list a:not(.nav-quote)[aria-current="page"] { text-decoration: underline; }
/* Overlay CTA: the Figma primary button, but full width at 346×48 in the mobile menu
   (content-manifest.md §1.4). Only the box differs; fill and label come from buttons.css. */
.nav-mobile-list .nav-quote { margin-top: 16px; min-height: 48px; display: flex; align-items: center; justify-content: center; text-align: center; }
.site-header:not([data-nav-mode]), .site-header[data-nav-mode="fallback"] { flex-wrap: wrap; padding: 18px 22px; }
.site-header[data-nav-mode="fallback"] .nav-panel { position: static; box-shadow: none; }