/*
Theme Name: Design is Open - Arrotondato
Theme URI: https://designisopen.it
Author: Orografie
Description: Tema one-page per Design is Open (Orografie). Testi e immagini della Home si modificano dai campi nella pagina impostata come Home.
Version: 1.9.4
Requires at least: 6.0
Requires PHP: 7.4
License: GPLv2 or later
Text Domain: designisopen-arrotondato
*/

@font-face{font-family:"DF Dejavu";font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/df-dejavu.woff2) format("woff2")}
@font-face{font-family:"DF Camino";font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/df-camino.woff2) format("woff2")}
body{margin:0;padding:0}
[hidden]{display:none!important}


:root{
  --ink:#0a0b0a; --card:#111311; --line:#2a2d2a; --paper:#f3f3ee; --muted:#a7a9a3;
  --yellow:#ffec00; --yellow-hi:#fff34d;
  --f-display:"DF Camino","Arial Narrow",system-ui,sans-serif;
  --f-body:"DF Dejavu",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-logo:"DF Camino","Arial Narrow",system-ui,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--ink);color:var(--paper);font:400 1.0625rem/1.55 var(--f-body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
.wrap{max-width:1320px;margin:0 auto;padding-inline:clamp(16px,3vw,40px)}
.disp{font-family:var(--f-display);font-weight:400;font-synthesis:none;line-height:.9;letter-spacing:-.01em;text-wrap:balance;margin:0}
.pill{display:inline-flex;align-items:center;gap:.5em;font:800 .78rem/1 var(--f-body);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;border:2px solid currentColor;border-radius:999px;padding:.8em 1.25em;transition:background .15s,color .15s}
.pill:hover{background:var(--yellow);border-color:var(--yellow);color:var(--ink)}
.pill.solid{background:var(--yellow);border-color:var(--yellow);color:var(--ink)}
.pill.solid:hover{background:var(--yellow-hi);border-color:var(--yellow-hi)}
.on-yellow .pill:hover{background:var(--ink);border-color:var(--ink);color:var(--yellow)}

/* nav */
nav.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:rgba(10,11,10,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
nav.top .wrap{display:flex;align-items:center;gap:24px;min-height:64px}
.brand{display:block;font:400 1.55rem/.78 var(--f-logo);color:var(--yellow);text-decoration:none;letter-spacing:.005em;padding-block:8px}
.brand span{display:block}
.links{display:flex;gap:22px;margin-right:auto;font-size:.88rem;font-weight:600}
.links a{text-decoration:none;color:var(--muted)}
.links a:hover{color:var(--paper)}
.ctas{display:flex;gap:10px}
@media (max-width:860px){.links{display:none}.brand{margin-right:auto}.ctas .pill:not(.solid){display:none}}

/* hero */
.hero{position:relative;height:min(66.667vw,calc(100vh - 72px));min-height:300px;overflow:hidden;background:var(--ink)}
.slide{position:absolute;inset:0;opacity:0;transition:opacity 1.2s ease}
.slide.on{opacity:1}
.slide .bg{position:absolute;inset:-40px;width:calc(100% + 80px);height:calc(100% + 80px);object-fit:cover;filter:blur(28px) brightness(.45);transform:scale(1.05)}
.slide .fg{position:relative;width:100%;height:100%;object-fit:contain}
.dots{position:absolute;right:clamp(16px,3vw,40px);bottom:clamp(28px,5vw,56px);z-index:3;display:flex;gap:8px}
.dots button{width:12px;height:12px;border-radius:50%;border:2px solid var(--paper);background:transparent;padding:0;cursor:pointer}
.dots button[aria-current="true"]{background:var(--yellow);border-color:var(--yellow)}

/* ticker */
.ticker{background:var(--yellow);padding-block:14px;overflow:hidden}
.ticker-track{display:flex;gap:12px;width:max-content;animation:tick 60s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker img{height:clamp(120px,16vw,190px);width:auto;border-radius:14px}
@keyframes tick{to{transform:translateX(-50%)}}
.words{background:var(--ink);color:var(--yellow);overflow:hidden;border-block:1px solid var(--line);padding-block:14px}
.words .ticker-track{animation-duration:38s;animation-direction:reverse;gap:0}
.words span{font:400 clamp(1.3rem,2.6vw,2rem)/1 var(--f-display);font-synthesis:none;text-transform:uppercase;white-space:nowrap;padding-inline:.6em}
.words span:nth-child(even){color:var(--paper)}
@media (prefers-reduced-motion:reduce){.ticker-track{animation:none}.slide{transition:none}html{scroll-behavior:auto}}

section{padding-block:clamp(64px,9vw,120px)}
.head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:20px 40px;margin-bottom:clamp(28px,4vw,48px)}
.head h2{font-size:clamp(2.4rem,6.5vw,5.6rem)}
.head p{max-width:46ch;font-size:1.1rem}

/* moments (cards) */
.on-yellow{background:var(--yellow);color:var(--ink)}
.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.card{display:grid;gap:14px;align-content:start}
.card .ph{aspect-ratio:4/5;border-radius:18px;overflow:hidden;background:var(--ink)}
.card .ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.card:hover .ph img{transform:scale(1.04)}
.card h3{font:400 1.5rem/1.05 var(--f-display);font-synthesis:none;margin:0}
.card p{margin:0;font-size:.98rem;max-width:34ch}
.card .pill{justify-self:start}
@media (max-width:980px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.cards{grid-template-columns:minmax(0,1fr)}}

/* about */
.strip{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.strip img{flex:0 0 auto;width:clamp(180px,22vw,280px);aspect-ratio:4/5;object-fit:cover;border-radius:16px;scroll-snap-align:start}
.about{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(28px,6vw,96px);margin-top:clamp(40px,6vw,72px);align-items:start}
.about h2{font-size:clamp(2.2rem,5vw,4.4rem)}
.about .txt{display:grid;gap:1em;font-size:1.15rem;max-width:58ch}
.about .txt .pill{justify-self:start;margin-top:.4em}
.facts{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.facts span{border:1px solid var(--line);border-radius:999px;padding:.45em .9em;font-size:.88rem;font-weight:600}
.facts b{color:var(--yellow)}
@media (max-width:860px){.about{grid-template-columns:minmax(0,1fr)}}

.mail{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.mail code{font:600 1rem var(--f-body);background:var(--card);border:1px solid var(--line);border-radius:10px;padding:.55em .8em}
.copy{font:700 .8rem/1 var(--f-body);letter-spacing:.06em;text-transform:uppercase;background:transparent;color:var(--paper);border:2px solid var(--paper);border-radius:999px;padding:.7em 1em;cursor:pointer}
.copy:hover{background:var(--paper);color:var(--ink)}

.gal-head{display:flex;justify-content:space-between;align-items:end;gap:16px;margin:clamp(56px,8vw,96px) 0 20px}
.gal-head h3{font:400 clamp(1.4rem,3vw,2.2rem)/1.05 var(--f-display);font-synthesis:none;margin:0}
.arrows{display:flex;gap:8px}
.arrows button{width:48px;height:48px;border-radius:50%;border:2px solid var(--paper);background:transparent;color:var(--paper);font:700 1.2rem/1 var(--f-body);cursor:pointer}
.arrows button:hover{background:var(--yellow);border-color:var(--yellow);color:var(--ink)}
.carousel{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(200px,19vw,250px);gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding-bottom:10px;scrollbar-width:none}
.carousel::-webkit-scrollbar{display:none}
.carousel figure{margin:0;scroll-snap-align:start;display:grid;gap:8px}
.carousel img{aspect-ratio:4/5;width:100%;object-fit:cover;border-radius:14px}
.carousel figcaption{font-size:.85rem;color:var(--muted)}

/* footer */
footer{background:var(--yellow);color:var(--ink);padding-block:clamp(48px,7vw,88px) 28px;overflow:hidden}
.foot-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:28px;margin-bottom:clamp(36px,6vw,72px)}
.foot-top nav{display:flex;flex-wrap:wrap;gap:10px}
.foot-top p{max-width:32ch;font-weight:600;font-size:1.1rem;margin:0}
.wordmark{font:400 clamp(3rem,10vw,8.75rem)/.78 var(--f-logo);letter-spacing:-.005em;margin:0;padding-bottom:.16em}
.wordmark span{display:block}
.foot-bot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;margin-top:28px;padding-top:18px;border-top:2px solid var(--ink);font-size:.85rem;font-weight:600}

/* WordPress */
.admin-bar nav.top{top:32px}
@media (max-width:782px){.admin-bar nav.top{top:46px}}
@media (max-width:600px){.admin-bar nav.top{top:0}}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.page-content{padding-block:clamp(48px,7vw,96px)}
.page-content h1{font:400 clamp(2.4rem,6vw,5rem)/.95 var(--f-display);margin:0 0 .6em}
.page-content .entry{max-width:68ch;font-size:1.1rem}
.page-content .entry a{color:var(--yellow)}
.page-content .entry img{height:auto;border-radius:14px}
.page-content .entry h2{margin:2em 0 .5em;font:400 1.6rem/1.2 var(--f-display);color:var(--yellow)}
.page-content .entry h3{margin:1.6em 0 .4em;font:400 1.25rem/1.25 var(--f-display);color:var(--paper)}
.page-content .entry p{margin:0 0 .9em}
.page-content .entry ul{margin:0 0 .9em;padding-left:1.3em}
.page-content .entry li{margin-bottom:.4em}
.page-content .entry a{text-decoration:underline;text-underline-offset:2px}
.page-content .entry .doc-updated{margin-top:2.2em;padding-top:1.1em;border-top:1px solid var(--line);color:var(--muted);font-size:1rem}
.legal{display:flex;flex-wrap:wrap;gap:6px 18px}
.legal a{text-decoration:underline;text-underline-offset:2px}
.legal a:hover{text-decoration-thickness:2px}

/* Pulsanti nella sezione Com'è andata */
.about .txt .pill .screen-reader-text{position:absolute}

/* Modulo Resta aggiornato */
.contact{margin-top:.6em;display:grid;gap:14px}
.contact h3{font:400 clamp(1.6rem,3vw,2.3rem)/1.05 var(--f-display);font-synthesis:none;margin:0;color:var(--yellow)}
.contact-intro{margin:0;max-width:52ch;color:var(--paper)}
.form{display:grid;gap:16px;margin-top:6px}
.form .row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media (max-width:560px){.form .row{grid-template-columns:minmax(0,1fr)}}
.fld{display:grid;gap:6px}
.fld label{font-size:.9rem;font-weight:600;color:var(--muted)}
.fld input[type=text],.fld input[type=email],.fld input[type=tel],.fld textarea{width:100%;font:400 1rem/1.4 var(--f-body);color:var(--paper);background:var(--card);border:1px solid var(--line);border-radius:12px;padding:.8em .95em;transition:border-color .15s,box-shadow .15s}
.fld textarea{resize:vertical;min-height:7.5em}
.fld input:focus,.fld textarea:focus{outline:none;border-color:var(--yellow);box-shadow:0 0 0 3px rgba(255,236,0,.18)}
.fld.has-error input,.fld.has-error textarea{border-color:#ff6b5b}
.fld .err-msg{font-size:.85rem;color:#ff8b7e}
.fld.check{grid-template-columns:auto minmax(0,1fr);align-items:start;gap:12px}
.fld.check input{width:22px;height:22px;margin:1px 0 0;accent-color:var(--yellow);cursor:pointer}
.fld.check label{font-weight:400;font-size:.95rem;line-height:1.45;color:var(--paper);cursor:pointer}
.fld.check label a{color:var(--yellow);text-decoration:underline;text-underline-offset:2px}
.fld.check .err-msg{grid-column:2}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin-top:4px}
.actions .pill{cursor:pointer;font-size:.85rem;padding:1em 1.6em}
.actions .pill[disabled]{opacity:.6;cursor:wait}
.req{font-size:.85rem;color:var(--muted)}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-msg{margin:0;padding:14px 18px;border-radius:12px;font-weight:600;background:var(--card);border:1px solid var(--line)}
.form-msg.ok{border-color:var(--yellow);color:var(--yellow)}
.form-msg.err{border-color:#ff6b5b;color:#ff8b7e}

/* Sezione contatti: testo a sinistra, modulo a destra (stessi spazi di "Com'è andata") */
#showroom{padding-top:0}
.stay{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,6vw,96px);align-items:start;border-top:1px solid var(--line);padding-top:clamp(64px,9vw,120px)}
.stay-side{display:grid;gap:28px;align-content:start}
.stay-side h2{font-size:clamp(2.4rem,5.4vw,4.8rem);line-height:.95}
.stay-text{font-size:1.2rem;line-height:1.6;max-width:54ch}
.stay-text p{margin:0 0 .8em}
.stay-text p:last-child{margin:0}
.stay-text strong{font-weight:700;color:var(--paper)}
.stay address{font-style:normal;font-size:1.2rem;line-height:1.6}
.stay address strong{font-weight:700}
.stay-photo{aspect-ratio:4/3;border-radius:18px;overflow:hidden;background:var(--card);margin-top:8px}
.stay-photo img{width:100%;height:100%;object-fit:cover}
@media (max-width:860px){.stay{grid-template-columns:minmax(0,1fr)}.stay-photo img{object-position:50% 30%}}

/* Modulo: campi in colonna, pulsante a tutta larghezza */
.contact{margin-top:0}
.form{gap:22px;margin-top:0}
.form .row{grid-template-columns:minmax(0,1fr)!important;gap:22px}
.fld{gap:8px}
.fld label{font-size:.95rem;font-weight:400;color:var(--muted)}
.fld input[type=text],.fld input[type=email],.fld input[type=tel],.fld textarea{border-radius:4px;padding:1em;min-height:56px;background:#0f100f;border-color:#2a2d2a}
.fld textarea{min-height:138px}
.fld.check{align-items:center;gap:14px}
.fld.check input{width:16px;height:16px;margin:0}
.fld.check label{font-size:1rem;color:var(--muted)}
.fld.check label a{color:var(--muted)}
.fld.check label a:hover{color:var(--paper)}
.actions{display:grid;gap:14px;margin-top:6px}
.actions .pill{width:100%;justify-content:center;min-height:50px;font-size:.9rem;letter-spacing:.12em}
.req{font-size:1rem;color:var(--paper)}

/* Pulsanti squadrati (nessun arrotondamento) */
.pill,.copy,.arrows button,.actions .pill{border-radius:0}
#serata .about:first-child{margin-top:0}

/* Revisione: testo della sezione contatti allineato alla larghezza del modulo. */
#contatti .stay-text, #contatti .stay-text p { width:100%; max-width:none; text-align:left; }
#contatti .stay-side, #contatti .stay-form { min-width:0; }
/* Immagini senza angoli arrotondati in tutte le sezioni. */
img, .ticker img, .card .ph, .card .ph img, .strip img,
.carousel img, .page-content .entry img, .stay-photo, .stay-photo img { border-radius:0; }

/* Variante arrotondata: immagini, contenitori, campi e tutti i pulsanti. */
:root { --radius-ui: 18px; }
img, .ticker img, .card .ph, .card .ph img, .strip img, .carousel img,
.page-content .entry img, .stay-photo, .stay-photo img { border-radius:var(--radius-ui); }
.pill, .copy, .actions .pill, button, input[type="submit"], input[type="button"],
input[type="reset"], .button, .wp-block-button__link { border-radius:999px; }
.arrows button, .dots button { border-radius:50%; }
.fld input[type=text], .fld input[type=email], .fld input[type=tel],
.fld textarea, .form-msg, .mail code { border-radius:14px; }

/* Allinea il testo della serata al bordo sinistro e destro del form sottostante. */
#serata .about { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(36px,6vw,96px); }
#serata .about .txt { max-width:none; min-width:0; width:100%; }
@media (max-width:860px) { #serata .about { grid-template-columns:minmax(0,1fr); } }

/* Sezione contatti: il modulo finisce alla stessa altezza della foto a sinistra. */
#contatti .stay-text a{color:var(--yellow);text-decoration:underline;text-underline-offset:2px}
@media (min-width:861px){
  #contatti.stay{align-items:stretch}
  #contatti .stay-side{display:flex;flex-direction:column;gap:28px}
  #contatti .stay-photo{flex:1 1 auto;aspect-ratio:auto;min-height:320px;position:relative;margin-top:8px}
  #contatti .stay-photo img{position:absolute;inset:0;width:100%;height:100%;object-position:50% 22%}
  #contatti .stay-form{display:flex;flex-direction:column}
  #contatti .contact{flex:1 1 auto;display:flex;flex-direction:column}
  #contatti .form:not([hidden]){flex:1 1 auto;display:flex;flex-direction:column}
  #contatti .fld-msg{flex:1 1 auto;display:flex;flex-direction:column}
  #contatti .fld-msg textarea{flex:1 1 auto;resize:none}
}