/* ============================================================
   Port Douglas Luxe Tours — token + form
   ------------------------------------------------------------
   Caricato su OGNI pagina del sito (functions.php → pdlt_base_assets).
   Contiene due cose e nient'altro:

     1. i token --pdlt-* su :root — unica fonte per colori, font
        e curve di movimento del CSS che scriviamo noi
     2. lo stile dei form Fluent Forms, identico ovunque compaiano

   Il template tour ha in più il suo foglio: tour.css
   Il CSS che deve battere Themify sta in Personalizza → CSS aggiuntivo.
   ============================================================ */

/* ============================================================
 * Self-hosted webfonts — sostituiscono la richiesta a fonts.googleapis.com.
 * Sottoinsieme latin. Sono variable font: 4 file coprono tutti i 15 tagli,
 * quindi il browser scarica al massimo 4 file anche se le regole sono 15.
 * Estratti dal CSS servito da Google Fonts il 2026-08-20.
 * I percorsi sono relativi a questo file: fonts/ sta accanto a pdlt-base.css.
 * ============================================================ */

@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/cinzel.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/cinzel.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/cinzel.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/cormorant-garamond-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/cormorant-garamond-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/cormorant-garamond-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/cormorant-garamond.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/cormorant-garamond.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/cormorant-garamond.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/cormorant-garamond.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/hanken-grotesk.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/hanken-grotesk.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/hanken-grotesk.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/hanken-grotesk.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/hanken-grotesk.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{

  /* --- colori --------------------------------------------------------
     L'oro è agganciato a --theme_accent, la variabile che Themify
     Customize genera dal proprio color picker: cambiando l'accent nel
     pannello cambiano anche il tour e i form, senza toccare un file.
     Il valore dopo la virgola è solo il fallback se la variabile manca.

     Cream e ink NON hanno un equivalente in Themify: il Customize li
     scrive dentro body{} come valori letterali, che non possono essere
     letti da qui. Questi due vanno quindi tenuti uguali a mano a
     Personalizza → Themify → Colori:
         sfondo body   #FBF7EE
         testo body    #14110C
     -------------------------------------------------------------------- */
  --pdlt-gold:        var(--theme_accent, #9C8038);
  --pdlt-gold-bright: #B8964A;   /* icone su fondo scuro: l'oro pieno vi sparisce */

  /* I tre cream hanno un nome nel design system: ivory è il foglio su cui sta
     tutto, linen il gradino sopra, stone il gradino ancora sopra.
     --pdlt-panel resta #EDE5D6, che non è nessuno dei tre: è il valore nato in
     tour.css per la fascia del form. È a un soffio da stone (#E8E1D2) — da
     unificare, ma è una decisione di design, non una correzione. */
  --pdlt-paper:       #FBF7EE;   /* ivory — fondo pagina, è il body di tutto il sito */
  --pdlt-linen:       #F4EFE5;   /* linen — testo e filetti chiari sulle card scure */
  --pdlt-panel:       #EDE5D6;   /* lo stacco: fascia dei form, superfici quiete */
  --pdlt-white:       #FFFDF8;   /* superfici elevate. Mai bianco puro */
  --pdlt-line:        #D8CDB8;

  --pdlt-ink:         #14110C;
  --pdlt-ink-soft:    #5F584B;

  /* --- tipografia ----------------------------------------------------
     Cormorant Garamond per i titoli, Hanken Grotesk per il testo,
     Cinzel per le etichette dei bottoni e gli occhielli.
     Cambia una famiglia QUI e in nessun altro posto: nessuna regola,
     né qui né in tour.css, nomina un carattere direttamente.
     -------------------------------------------------------------------- */
  --pdlt-font-display: "Cormorant Garamond", Georgia, serif;
  --pdlt-font-wordmark:"Cinzel", "Cormorant Garamond", serif;
  --pdlt-font-body:    "Hanken Grotesk", -apple-system, BlinkMacSystemFont, Arial, sans-serif;

  /* --- movimento --- */
  --pdlt-ease-luxe: cubic-bezier(.16,1,.3,1);
}


/* ============================================================
   FLUENT FORMS — restyling di marca, su tutto il sito
   ------------------------------------------------------------
   Campi a filo invece che a riquadro: niente bordi, niente
   riempimenti, niente angoli arrotondati — lo spazio fa il lavoro.

   Lo scope è .fluentform, cioè il contenitore che il plugin stampa
   attorno a ogni form: qualunque form, su qualunque pagina, inserito
   in qualunque modo, eredita questo aspetto. Il giorno che il form
   finisce sulla pagina Contact non c'è niente da aggiungere.

   Fluent Forms carica il proprio CSS DOPO questo file — è l'ULTIMO dei
   sette fogli della pagina — e usa selettori della nostra stessa
   specificità (.ff-default .ff-el-form-control = 0,2,0). A parità vince
   sempre lui. Ogni proprietà su cui il plugin ha un'opinione va quindi
   marcata !important, spaziature comprese: senza, la regola si scrive
   ma non si vede. Verificato: .ff-default .ff-el-form-control impone
   padding 11px 15px, .ff-el-input--label impone margin-bottom 5px.
   Selettori Fluent Forms 4.x / 5.x — se un campo resta fuori, si
   verifica in DevTools.
   ============================================================ */

/* La fascia. Il form si porta dietro il proprio stacco di colore, così
   è uguale ovunque senza dover impostare uno sfondo dal Builder pagina
   per pagina — che sarebbe l'ennesimo colore scritto a mano. */
.fluentform{
  background:var(--pdlt-panel);
  padding:clamp(28px,4vw,44px);
  max-width:860px;
  font-family:var(--pdlt-font-body);
  color:var(--pdlt-ink)}

/* Sul tour lo stacco ce l'ha già la sezione .pdlt-enquiry: qui il form
   resta trasparente, altrimenti sarebbe un riquadro dentro un riquadro. */
.pdlt-tour .fluentform{background:none;padding:0}

.fluentform .ff-el-group{margin-bottom:16px !important}
.fluentform .ff-t-cell{padding-right:28px}
.fluentform .ff-t-cell:last-child{padding-right:0}

/* --- etichette --- */
.fluentform .ff-el-input--label{margin-bottom:0 !important}
.fluentform .ff-el-input--content{margin-top:0}
.fluentform .ff-el-input--label label{
  font-family:var(--pdlt-font-body);
  font-size:14px;
  font-weight:500;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--pdlt-ink-soft);
  margin-bottom:7px !important;
  display:block;
  line-height:1.3}

/* Asterisco dei campi obbligatori.
   La catena di classi è ripetuta per intero perché la regola di Fluent
   Forms è .fluentform .ff-el-input--label.ff-el-is-required.asterisk-right
   label:after — quattro classi. Un selettore più corto perde il colore e
   applica solo l'opacità, ed è così che l'asterisco restava slavato.
   Oro e non rosso: il rosso è un allarme, e questa pagina non alza mai
   la voce. */
.fluentform .ff-el-input--label.ff-el-is-required.asterisk-right label:after,
.fluentform .ff-el-input--label.ff-el-is-required.asterisk-left label:before{
  color:var(--pdlt-gold);
  opacity:1;
  font-size:1.15em;   /* il glifo resta minuscolo in un'etichetta maiuscola spaziata */
  font-weight:600;
  line-height:0;      /* e senza questo aggiungerebbe altezza alla riga */
  vertical-align:middle}

/* --- campi --- */
.fluentform .ff-el-form-control{
  width:100%;
  background:transparent !important;
  border:0 !important;
  border-bottom:1px solid rgba(18,16,12,.28) !important;
  border-radius:0 !important;
  box-shadow:none !important;
  padding:9px 2px !important;
  font-family:var(--pdlt-font-body);
  font-size:16px;
  color:var(--pdlt-ink);
  transition:border-color .32s var(--pdlt-ease-luxe)}

.fluentform .ff-el-form-control:hover{border-bottom-color:rgba(18,16,12,.5) !important}

/* Niente blu da nessuna parte: sia il contorno del browser sia l'anello
   del plugin vengono spenti, il campo risponde in oro. */
.fluentform .ff-el-form-control:focus,
.fluentform .ff-el-form-control:focus-visible{
  outline:none !important;
  border-bottom-color:var(--pdlt-gold) !important;
  box-shadow:0 1px 0 0 var(--pdlt-gold) !important}

.fluentform .ff-el-form-control::placeholder{color:#9C9080;opacity:1}
.fluentform textarea.ff-el-form-control{min-height:130px;resize:vertical;line-height:1.6}

/* select: via la grafica di sistema, il chevron ce lo disegniamo noi */
.fluentform select.ff-el-form-control{
  appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:28px;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235F584B' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important;
  background-position:right 2px center !important;
  background-size:16px !important}

/* Il giallo dell'autofill di Chrome distruggerebbe il campo a filo.
   Il riempimento finto usa --pdlt-panel, che è anche il fondo della
   fascia: combacia ovunque, tour compreso, perché lì la fascia è la
   stessa tinta. */
.fluentform .ff-el-form-control:-webkit-autofill{
  -webkit-text-fill-color:var(--pdlt-ink);
  -webkit-box-shadow:0 0 0 40px var(--pdlt-panel) inset;
  transition:background-color 9999s ease-in-out 0s}

/* --- caselle e scelte --- */
.fluentform .ff-el-form-check{margin-bottom:10px}
.fluentform .ff-el-form-check label,
.fluentform .ff-el-form-check-label{
  font-size:14px;color:var(--pdlt-ink-soft);line-height:1.55;
  text-transform:none;letter-spacing:0}
.fluentform .ff-el-form-check input[type=checkbox],
.fluentform .ff-el-form-check input[type=radio]{
  accent-color:var(--pdlt-gold);width:16px;height:16px;margin-right:9px}
.fluentform .ff-el-form-check a{
  color:var(--pdlt-gold);text-decoration:underline;text-underline-offset:3px}

/* --- invio ---
   L'unica pillola della pagina, come vuole la regola sui CTA.
   In hover incrocia il proprio riempimento: non si ingrandisce e non si
   solleva mai. */
.fluentform .ff-btn-submit,
.fluentform .ff_submit_btn_wrapper button{
  background:var(--pdlt-gold) !important;
  color:var(--pdlt-white) !important;
  border:1px solid var(--pdlt-gold) !important;
  font-family:var(--pdlt-font-wordmark);
  font-size:12px;font-weight:500;
  letter-spacing:.25em;text-transform:uppercase;
  padding:17px 42px;
  border-radius:999px !important;
  cursor:pointer;margin-top:14px;
  box-shadow:none !important;
  transition:background-color .32s var(--pdlt-ease-luxe),color .32s var(--pdlt-ease-luxe)}

.fluentform .ff-btn-submit:hover,
.fluentform .ff_submit_btn_wrapper button:hover{
  background:transparent !important;
  color:var(--pdlt-gold) !important}

/* --- errori e conferma ---
   Terracotta spento, non rosso da semaforo. */
.fluentform .ff-el-is-error .ff-el-form-control,
.fluentform .ff-el-form-control.ff-el-is-error{
  border-bottom-color:#B98A7A !important;box-shadow:none !important}

.fluentform .error.text-danger,
.fluentform .error-text,
.fluentform .ff-el-form-control+.text-danger{
  color:#A96F5B;font-size:12.5px;margin-top:7px;
  letter-spacing:0;text-transform:none}

.ff-message-success{
  background:var(--pdlt-white) !important;
  border:0 !important;
  border-left:3px solid var(--pdlt-gold) !important;
  border-radius:0 !important;
  box-shadow:none !important;
  padding:22px 26px !important;
  margin-top:0;
  color:var(--pdlt-ink);
  font-size:15.5px}

@media (max-width:600px){
  .fluentform .ff-t-cell{padding-right:0}
  .fluentform .ff-btn-submit,
  .fluentform .ff_submit_btn_wrapper button{width:100%}
}

@media (prefers-reduced-motion:reduce){
  .fluentform .ff-el-form-control,
  .fluentform .ff-btn-submit,
  .fluentform .ff_submit_btn_wrapper button{transition:none}
}

/* Il focus da tastiera deve restare visibile (WCAG 2.4.7) */
.fluentform :focus-visible{outline:2px solid var(--pdlt-gold);outline-offset:3px}