/* ==========================================================
   TUXEDO YACHTING HOUSE — RESTYLE
   Base: identità visiva e tipografia
   ========================================================== */

:root {
  --tuxedo-night: #07090B;
  --tuxedo-emerald: #003130;
  --tuxedo-green: #088D73;
  --tuxedo-white: #ECF4F3;
  --tuxedo-grey: #8EADB7;
  --tuxedo-grey-light: #BCDDE9;

  --tuxedo-gradient: linear-gradient(
    225deg,
    #003130 0%,
    #07090B 85%
  );

  --tuxedo-font-heading: "Clash Display", sans-serif;
  --tuxedo-font-body: "Sora", sans-serif;
  --tuxedo-font-accent: "Dancing Script", cursive;
}

/* FONT — utilizza i file già presenti negli upload */

@font-face {
  font-family: "Clash Display";
  src: url("/wp-content/uploads/fonts/ClashDisplay-Light.woff2") format("woff2");
  font-style: normal;
  font-weight: 300;
  font-display: swap;
}

@font-face {
  font-family: "Clash Display";
  src: url("/wp-content/uploads/fonts/ClashDisplay-Medium.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Clash Display";
  src: url("/wp-content/uploads/fonts/ClashDisplay-Semibold.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Sora";
  src: url("/wp-content/uploads/fonts/Sora-Light.woff2") format("woff2");
  font-style: normal;
  font-weight: 300;
  font-display: swap;
}

@font-face {
  font-family: "Sora";
  src: url("/wp-content/uploads/fonts/Sora-Medium.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Dancing Script";
  src: url("/wp-content/uploads/fonts/DancingScript-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

/* GERARCHIA TIPOGRAFICA */

body {
  font-family: var(--tuxedo-font-body);
  font-weight: 300;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--tuxedo-font-heading);
}

h1 {
  font-weight: 500;
}

h2 {
  font-weight: 300;
}

h3,
h4,
h5,
h6 {
  font-weight: 500;
}

button,
input,
select,
textarea,
.btn,
.wp-block-button__link {
  font-family: var(--tuxedo-font-body);
}

button,
.btn,
.wp-block-button__link,
input[type="submit"] {
  font-weight: 500;
}

strong,
b {
  font-weight: 500;
}
/* ==========================================================
   COLORI GLOBALI E VARIABILI BOOTSTRAP
   ========================================================== */

:root {
  --bs-primary: #088D73;
  --bs-primary-rgb: 8, 141, 115;

  --bs-light: #ECF4F3;
  --bs-light-rgb: 236, 244, 243;

  --bs-dark: #07090B;
  --bs-dark-rgb: 7, 9, 11;

  --bs-body-bg: #ECF4F3;
  --bs-body-color: #07090B;

  --bs-link-color: #088D73;
  --bs-link-hover-color: #003130;
}

body {
  background-color: var(--tuxedo-white);
  color: var(--tuxedo-night);
}

a {
  color: var(--tuxedo-green);
}

a:hover {
  color: var(--tuxedo-emerald);
}

::selection {
  background-color: var(--tuxedo-green);
  color: var(--tuxedo-white);
}
/* ==========================================================
   TIPOGRAFIA — INTEGRAZIONE CON LE CLASSI DEL TEMA
   ========================================================== */

.font-light {
  font-family: var(--tuxedo-font-body);
  font-weight: 300;
}

.font-regular,
.font-bold {
  font-family: var(--tuxedo-font-body);
  font-weight: 500;
}

/* I titoli mantengono Clash Display anche con classi del tema. */
h1.font-light, h2.font-light, h3.font-light,
h4.font-light, h5.font-light, h6.font-light,
h1.font-regular, h2.font-regular, h3.font-regular,
h4.font-regular, h5.font-regular, h6.font-regular,
h1.font-bold, h2.font-bold, h3.font-bold,
h4.font-bold, h5.font-bold, h6.font-bold {
  font-family: var(--tuxedo-font-heading);
}

/* Enfasi nei testi e nei titoli. */
b,
strong {
  font-family: inherit;
  font-weight: 500;
}

:is(h1, h2, h3, h4, h5, h6,
    .display-1, .display-2, .display-3,
    .display-4, .display-5, .display-6) :is(b, strong) {
  font-family: inherit;
  font-weight: 600;
}

/* Navigazione, pulsanti e sitemap del footer. */
.btn,
.nav-link,
.dropdown-item,
.widget ul li a {
  font-family: var(--tuxedo-font-body);
  font-weight: 500;
}
/* ==========================================================
   PULSANTI BOOTSTRAP — PALETTE TUXEDO
   ========================================================== */

.btn-primary {
  --bs-btn-color: #ECF4F3;
  --bs-btn-bg: #088D73;
  --bs-btn-border-color: #088D73;

  --bs-btn-hover-color: #ECF4F3;
  --bs-btn-hover-bg: #003130;
  --bs-btn-hover-border-color: #003130;

  --bs-btn-focus-shadow-rgb: 8, 141, 115;

  --bs-btn-active-color: #ECF4F3;
  --bs-btn-active-bg: #003130;
  --bs-btn-active-border-color: #003130;

  --bs-btn-disabled-color: #ECF4F3;
  --bs-btn-disabled-bg: #088D73;
  --bs-btn-disabled-border-color: #088D73;
}

.btn-outline-primary {
  --bs-btn-color: #088D73;
  --bs-btn-border-color: #088D73;

  --bs-btn-hover-color: #ECF4F3;
  --bs-btn-hover-bg: #003130;
  --bs-btn-hover-border-color: #003130;

  --bs-btn-focus-shadow-rgb: 8, 141, 115;

  --bs-btn-active-color: #ECF4F3;
  --bs-btn-active-bg: #003130;
  --bs-btn-active-border-color: #003130;

  --bs-btn-disabled-color: #088D73;
  --bs-btn-disabled-border-color: #088D73;
}
/* ==========================================================
   PULSANTI GUTENBERG — STILE STANDARD
   ========================================================== */

.wp-block-button:not(.is-style-outline)
.wp-block-button__link:not(.has-background) {
  background-color: #088D73;
  border-color: #088D73;
}

.wp-block-button:not(.is-style-outline)
.wp-block-button__link:not(.has-text-color) {
  color: #ECF4F3;
}

.wp-block-button:not(.is-style-outline)
.wp-block-button__link:not(.has-background):hover {
  background-color: #003130;
  border-color: #003130;
}

.wp-block-button:not(.is-style-outline)
.wp-block-button__link:focus-visible {
  outline: 2px solid #088D73;
  outline-offset: 3px;
}
/* ==========================================================
   HEADER E NAVIGAZIONE — IDENTITÀ TUXEDO
   ========================================================== */

/* Tipografia e colore dei collegamenti */
#masthead .magicnav .nav-link,
#masthead .magicnav .dropdown-item {
  font-family: var(--tuxedo-font-body);
  font-weight: 500;
  color: var(--tuxedo-white);
}

/* Voce corrente, hover e navigazione da tastiera */
#masthead .magicnav .current-menu-item > .nav-link,
#masthead .magicnav .nav-link:hover,
#masthead .magicnav .nav-link:focus-visible,
#masthead .magicnav .dropdown-item:hover,
#masthead .magicnav .dropdown-item:focus-visible {
  color: var(--tuxedo-green);
}

/* Header durante lo scorrimento */
#masthead .magicnav.stickymenu {
  background-color: var(--tuxedo-night);
}

#masthead .magicnav.stickymenu .dropdown-menu {
  background-color: var(--tuxedo-night) !important;
}

/* Menu espanso su smartphone e tablet */
@media (max-width: 1199.98px) {
  #masthead .magicnav .navbar-collapse {
    background-color: rgba(7, 9, 11, 0.96);
  }
}

/* Mantiene trasparente il contenitore del menu su desktop */
@media (min-width: 1200px) {
  #masthead .magicnav .navbar-collapse {
    background-color: transparent;
  }
}
/* ==========================================================
   CORREZIONE PULSANTI — CONTRASTO E COMPATIBILITÀ TEMA
   ========================================================== */

.btn.btn-primary {
  --bs-btn-bg: #087A65;
  --bs-btn-border-color: #087A65;
  --bs-btn-disabled-bg: #087A65;
  --bs-btn-disabled-border-color: #087A65;

  background-color: var(--bs-btn-bg);
  border-color: var(--bs-btn-border-color);
  color: #ECF4F3;
}

.btn.btn-primary:not(:disabled):is(:hover, :focus, :active) {
  background-color: #003130;
  border-color: #003130;
  color: #ECF4F3;
}

.wp-block-button:not(.is-style-outline)
.wp-block-button__link:not(.has-background) {
  background-color: #087A65;
  border-color: #087A65;
}
/* ==========================================================
   FOOTER — IDENTITÀ TUXEDO
   ========================================================== */

.footer-area .widget-area {
  background-color: var(--tuxedo-night) !important;
  color: var(--tuxedo-white);
  font-family: var(--tuxedo-font-body);
  font-weight: 300;
}

.footer-area .widget-area .widget-title {
  color: var(--tuxedo-white);
  font-family: var(--tuxedo-font-heading);
  font-weight: 500;
}

.footer-area .widget-area a,
.footer-area .widget-area a:visited {
  color: var(--tuxedo-white);
}

.footer-area .widget-area a:hover,
.footer-area .widget-area a:focus-visible {
  color: var(--tuxedo-green);
}

.footer-area .widget-area a:focus-visible {
  outline: 2px solid var(--tuxedo-green);
  outline-offset: 3px;
}
/* ==========================================================
   MODULI CONTACT FORM 7 — IDENTITÀ TUXEDO
   ========================================================== */

/* Campi di testo */
.wpcf7 :is(
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="url"],
  textarea,
  select
) {
  font-family: var(--tuxedo-font-body);
  font-weight: 300;
  border-color: var(--tuxedo-grey);
}

/* Campo attivo: preserva il bordo rosso dei campi non validi */
.wpcf7 :is(
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="url"],
  textarea,
  select
):not(.wpcf7-not-valid):focus {
  border-color: #087A65;
  box-shadow: 0 0 0 0.2rem rgba(8, 122, 101, 0.18);
  outline: 0;
}

/* Invio */
.wpcf7 input[type="submit"] {
  font-family: var(--tuxedo-font-body);
  font-weight: 500;
  background-color: #087A65;
  border-color: #087A65;
  color: var(--tuxedo-white);
}

.wpcf7 input[type="submit"]:not(:disabled):is(:hover, :focus, :active) {
  background-color: var(--tuxedo-emerald);
  border-color: var(--tuxedo-emerald);
  color: var(--tuxedo-white);
}
/* TITOLI MINORI — ALLINEAMENTO AL NUOVO DESIGN */

h4,
h5,
h6 {
  text-transform: none;
  letter-spacing: normal;
}
/* ==========================================================
   DETTAGLI GLOBALI — ELIMINAZIONE VERDE FLUORESCENTE
   ========================================================== */

/* Selezione del testo, incluso Firefox */
::-moz-selection,
::selection {
  background-color: #088D73;
  color: #ECF4F3;
}

/* Navigazione tra articoli */
.nav-previous > a,
.nav-next > a {
  background-color: #087A65;
  color: #ECF4F3;
}

.nav-previous > a:hover,
.nav-next > a:hover {
  background-color: #003130;
  color: #ECF4F3;
}

/* Transizione tra le pagine */
.overlay-change {
  background-color: #07090B;
}

.overlay-loader {
  background: linear-gradient(
    to right,
    #088D73 10%,
    rgba(8, 141, 115, 0) 42%
  );
}

.overlay-loader::before {
  background-color: #088D73;
}

.overlay-loader::after {
  background-color: #07090B;
}
/* ==========================================================
   STORIA — TIMELINE NEL VERDE TUXEDO
   ========================================================== */

@media (min-width: 780px) {
  .wp-block-cover.is-style-half-right-timeline::after,
  .wp-block-cover.is-style-half-left-timeline::after {
    background-image:
      radial-gradient(
        circle at center,
        #088D73 0 6px,
        transparent 6.5px 17px,
        #088D73 17.5px 18.5px,
        transparent 19px
      ),
      linear-gradient(
        to right,
        transparent calc(50% - 0.5px),
        #088D73 calc(50% - 0.5px),
        #088D73 calc(50% + 0.5px),
        transparent calc(50% + 0.5px)
      );
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
}
/* CONTATTI — TUXEDO CARE SU MOBILE */

@media (max-width: 781px) {

  #tuxedo-care .tuxedo-contact-care-cover {
    display: block;
    padding: 0;
    background-color: #ECF4F3;
  }

  /* Immagine sopra il testo, a tutta larghezza */
  #tuxedo-care .tuxedo-contact-care-cover
  > .wp-block-cover__image-background {
    display: block !important;
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: clamp(230px, 65vw, 360px) !important;
    background-size: cover;
    background-position: center center !important;
    background-attachment: scroll !important;
  }

  /* Rimuove la copertura bianca dall'immagine */
  #tuxedo-care .tuxedo-contact-care-cover
  > .wp-block-cover__background {
    display: none !important;
  }

}

/* VENOBOX — chiusura e caricamento */

/* Pulsante a riposo */
.vbox-overlay .vbox-close {
    background: #07090B !important;
    border-color: transparent !important;
    box-shadow: none !important;
    color: #088D73 !important;
}

/* Rettangolo scuro e X chiara all'hover */
.vbox-overlay .vbox-close:hover,
.vbox-overlay .vbox-close:focus-visible {
    background: #003130 !important;
    border-color: transparent !important;
    box-shadow: none !important;
    color: #ECF4F3 !important;
}

/* L'icona SVG segue il colore del pulsante */
.vbox-overlay .vbox-close svg {
    fill: currentColor !important;
}

/* Animazione circolare di caricamento */
.vbox-overlay {
    --sk-color: #088D73 !important;
}
/* ==========================================================
   SPLIT RIGHT COVER — layout stabile al primo caricamento
   ========================================================== */

@media (min-width: 782px) {

    .wp-block-cover.is-style-split-right
    .wp-block-columns {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 0 !important;
        align-items: stretch !important;
    }

    .wp-block-cover.is-style-split-right
    .wp-block-columns > .wp-block-column {
        flex: 0 0 50% !important;
        width: 50% !important;
        max-width: 50% !important;
        min-width: 0 !important;
    }
}
/* ==========================================================
   HOME — MEDIA TEXT stabile al primo caricamento
   ========================================================== */

@media (min-width: 993px) {

    body.home .wp-block-media-text.is-style-incline-media {
        display: grid !important;
        grid-template-rows: auto !important;
    }

    /* Immagine a destra */
    body.home
    .wp-block-media-text.is-style-incline-media.has-media-on-the-right
    > .wp-block-media-text__content {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }

    body.home
    .wp-block-media-text.is-style-incline-media.has-media-on-the-right
    > .wp-block-media-text__media {
        grid-column: 2 !important;
        grid-row: 1 !important;
    }

    /* Immagine a sinistra */
    body.home
    .wp-block-media-text.is-style-incline-media:not(.has-media-on-the-right)
    > .wp-block-media-text__media {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }

    body.home
    .wp-block-media-text.is-style-incline-media:not(.has-media-on-the-right)
    > .wp-block-media-text__content {
        grid-column: 2 !important;
        grid-row: 1 !important;
    }
}
/* ==========================================================
   SPLIT RIGHT COVER — mobile a larghezza piena
   ========================================================== */

@media (max-width: 781px) {

    .wp-block-cover.is-style-split-right
    .wp-block-columns {
        display: block !important;
        width: 100% !important;
    }

    /* La prima colonna è solo lo spazio vuoto usato su desktop */
    .wp-block-cover.is-style-split-right
    .wp-block-columns > .wp-block-column:first-child {
        display: none !important;
    }

    /* Il contenuto occupa tutta la larghezza su mobile */
    .wp-block-cover.is-style-split-right
    .wp-block-columns > .wp-block-column:last-child {
        display: block !important;
        flex-basis: 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
}
/* ==========================================================
   HERITAGE — timeline stabile al primo caricamento
   ========================================================== */

@media (min-width: 782px) {

    #history
    .wp-block-cover[class*="timeline"]
    .wp-block-columns {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 0 !important;
        align-items: stretch !important;
    }

    #history
    .wp-block-cover[class*="timeline"]
    .wp-block-columns > .wp-block-column {
        flex: 0 0 50% !important;
        width: 50% !important;
        max-width: 50% !important;
        min-width: 0 !important;
    }
}