/**
 * ToBePolo UI system — canonical shared component rules.
 * Palette, geometry and motion tokens live in tbp-tokens.css.
 */

/*
 * Canonical header brand geometry.
 * Horizontal lockup: pittogramma a sinistra, wordmark a destra.
 */
:root {
  --tbp-header-brand-mark: clamp(56px, 8vw, 72px);
  --tbp-header-brand-gap: 8px;
  --tbp-header-wordmark-size: clamp(1.25rem, 2vw, 1.85rem);
}

.tbp-brand-lockup {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: var(--tbp-header-brand-gap) !important;
  max-width: 100% !important;
  text-decoration: none !important;
  text-transform: none !important;
}

.tbp-brand-lockup__mark,
#masthead #logo .tbp-brand-lockup__mark,
#masthead #logo img.tbp-brand-lockup__mark {
  order: 1 !important;
  display: block !important;
  flex: 0 0 var(--tbp-header-brand-mark) !important;
  width: var(--tbp-header-brand-mark) !important;
  height: var(--tbp-header-brand-mark) !important;
  max-width: var(--tbp-header-brand-mark) !important;
  max-height: var(--tbp-header-brand-mark) !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: contain !important;
  object-position: center !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  content: none !important;
}

.tbp-brand-lockup .tbp-wordmark,
#masthead #logo .tbp-brand-lockup .tbp-wordmark {
  order: 2 !important;
  /* Optical centre of the artwork, below the tile's intentional white sky. */
  position: relative;
  top: .2em;
}

#masthead > .header-inner {
  align-items: center !important;
}

#masthead .header-inner.medium-logo-center #logo,
#masthead #logo,
#logo {
  order: 0 !important;
  flex: 0 1 auto !important;
  width: auto !important;
  max-width: min(430px, 42vw) !important;
  min-width: 0 !important;
  margin: 0 auto 0 0 !important;
  overflow: visible !important;
  text-align: left !important;
  align-self: center !important;
}

#masthead #logo > a,
#logo > a,
#masthead #logo > .tbp-brand-lockup,
#logo > .tbp-brand-lockup {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: var(--tbp-header-brand-gap) !important;
  max-width: 100% !important;
  margin: 0 !important;
  text-transform: none !important;
}

#masthead #logo img,
#masthead #logo a img,
.header-main #logo img,
.header-wrapper.stuck #masthead #logo img,
.header-wrapper.stuck #logo img {
  order: 1 !important;
  display: block !important;
  flex: 0 0 var(--tbp-header-brand-mark) !important;
  width: var(--tbp-header-brand-mark) !important;
  height: var(--tbp-header-brand-mark) !important;
  max-width: var(--tbp-header-brand-mark) !important;
  max-height: var(--tbp-header-brand-mark) !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: contain !important;
  object-position: center !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  content: none !important;
}

#masthead #logo img.header-logo-dark,
#masthead #logo img.header-logo-sticky,
#logo img.header-logo-dark,
#logo img.header-logo-sticky,
.header-wrapper.stuck #masthead #logo img.header-logo-dark,
#masthead #logo a > img:not(:first-of-type),
#logo a > img:not(:first-of-type) {
  display: none !important;
  flex: 0 0 0 !important;
  width: 0 !important;
  height: 0 !important;
  max-width: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

#masthead #logo a::before,
#masthead #logo a::after,
#logo a::before,
#logo a::after {
  content: none !important;
  display: none !important;
}

#masthead #logo .tbp-wordmark--header,
#logo .tbp-wordmark--header,
.tbp-brand-lockup .tbp-wordmark--header {
  order: 2 !important;
  display: inline-flex !important;
  align-items: baseline !important;
  flex: 0 0 auto !important;
  font-size: var(--tbp-header-wordmark-size) !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.off-canvas-center .mfp-content > #main-menu > .sidebar-menu > ul .html:first-child,
.off-canvas-center .sidebar-menu .html:first-child,
.off-canvas-center .html.html_topbar_left,
.mfp-content #main-menu .html:first-child {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: var(--tbp-header-brand-gap) !important;
}

.off-canvas-center .mfp-content > #main-menu > .sidebar-menu > ul .html:first-child img:not(.tbp-lava-icon),
.off-canvas-center .sidebar-menu .html:first-child img:not(.tbp-lava-icon),
.off-canvas-center .html:first-child img:not(.tbp-lava-icon),
.mfp-content #main-menu .html:first-child img:not(.tbp-lava-icon),
.off-canvas-center .tbp-brand-lockup__mark {
  display: block !important;
  flex: 0 0 var(--tbp-header-brand-mark) !important;
  width: var(--tbp-header-brand-mark) !important;
  height: var(--tbp-header-brand-mark) !important;
  max-width: var(--tbp-header-brand-mark) !important;
  max-height: var(--tbp-header-brand-mark) !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: contain !important;
  object-position: center !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  order: 1 !important;
}

.off-canvas-center .html:first-child .tbp-wordmark,
.mfp-content .html:first-child .tbp-wordmark {
  order: 2 !important;
}

.off-canvas-center .tbp-wordmark,
.off-canvas-center .tbp-wordmark--header,
.mfp-content #main-menu .tbp-wordmark {
  display: inline-flex !important;
  align-items: baseline !important;
  flex: 0 0 auto !important;
  font-size: var(--tbp-header-wordmark-size) !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

@media (max-width: 849px) {
  :root {
    --tbp-header-brand-mark: 72px;
    --tbp-header-brand-gap: 8px;
    --tbp-header-wordmark-size: 1.28rem;
  }

  #masthead,
  .header-wrapper.stuck #masthead,
  .header-main {
    min-height: 80px !important;
  }

  #masthead > .header-inner,
  html body #masthead .tbp-header-inner {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    position: relative !important;
    min-height: 80px !important;
    padding-right: 0 !important;
  }

  #masthead .header-inner.medium-logo-center #logo,
  #masthead #logo,
  #logo {
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    order: 1 !important;
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: calc(100% - 72px) !important;
    margin: 0 auto !important;
    text-align: center !important;
    z-index: 1 !important;
  }

  #masthead .show-for-medium.flex-left {
    display: none !important;
  }

  #masthead .show-for-medium.flex-right,
  #masthead .mobile-nav.nav-right,
  #masthead .tbp-header-mobile-right {
    position: relative !important;
    order: 9 !important;
    flex: 0 0 auto !important;
    width: auto !important;
    margin-right: 8px !important;
    margin-left: auto !important;
    padding-right: 0 !important;
    align-self: center !important;
    z-index: 2 !important;
  }
}

@media (max-width: 360px) {
  :root {
    --tbp-header-brand-gap: 6px;
    --tbp-header-wordmark-size: 1.12rem;
    --tbp-header-brand-mark: 64px;
  }
}

/* Accesso e iscrizione: il marchio resta anche nella testata (CEO 1/10: «manca il
   logo» nella vista classica, in tutti i temi). Prima qui c'era display:none; la
   stessa regola e' ancora stampata in linea da inc/staging4-internal-surfaces.php
   (tbp-s4-auth-surfaces), quindi questa ha un «html» in piu' per vincere. A schermo
   intero la testata resta coperta dal flusso, come prima. */
html body.login #masthead #logo,
html body.registrazione #masthead #logo,
html body.registrazione-professionista #masthead #logo,
html body.registrazione-comune #masthead #logo,
html body.registrazione-confermata #masthead #logo,
html body.woocommerce-lost-password #masthead #logo,
html body.vendor-register #masthead #logo {
  display: block !important;
}

body.login main .account-container > a.logo,
body.registrazione main .account-container > a.logo,
body.registrazione-professionista main .account-container > a.logo,
body.registrazione-comune main .account-container > a.logo,
body.woocommerce-lost-password main .account-container > a.logo,
body.registrazione-confermata main .container > a.logo {
  text-decoration: none !important;
}

/* Qualcosa a runtime dipinge a.logo come pillola verde sulla pagina di
   ringraziamento: qui il lockup resta trasparente (icona + wordmark). */
body.registrazione-confermata main .container > a.logo {
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  width: auto !important;
  height: auto !important;
  box-shadow: none !important;
}

/* Authentication masthead: one asset, one size, one title treatment. */
body.scegli-ruolo main .account-container .logo,
body.login main .account-container .logo,
body.registrazione main .account-container .logo,
body.registrazione-professionista main .account-container .logo,
body.registrazione-comune main .account-container .logo,
body.registrazione-confermata main .container .logo,
body.woocommerce-account main .account-container .logo,
body.woocommerce-lost-password main .account-container .logo {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  overflow: visible !important;
}

body.scegli-ruolo main .account-container .logo .pittogramma,
body.login main .account-container .logo .pittogramma,
body.registrazione main .account-container .logo .pittogramma,
body.registrazione-professionista main .account-container .logo .pittogramma,
body.registrazione-comune main .account-container .logo .pittogramma,
body.registrazione-confermata main .container .logo .pittogramma,
body.woocommerce-account main .account-container .logo .pittogramma,
body.woocommerce-lost-password main .account-container .logo .pittogramma,
body.scegli-ruolo main .account-container .logo .tbp-brand-lockup__mark,
body.login main .account-container .logo .tbp-brand-lockup__mark,
body.registrazione main .account-container .logo .tbp-brand-lockup__mark {
  display: block !important;
  width: 88px !important;
  height: 88px !important;
  max-width: 88px !important;
  max-height: 88px !important;
  object-fit: contain !important;
  order: 1 !important;
}

body.scegli-ruolo main .account-container .logo .tbp-account-logotype,
body.login main .account-container .logo .tbp-account-logotype,
body.registrazione main .account-container .logo .tbp-account-logotype {
  order: 2 !important;
}

body.login .account-container h1.tbp-auth-title--gold,
body.registrazione .account-container h1.tbp-auth-title--gold,
body.registrazione-professionista .account-container h1.tbp-auth-title--gold,
body.registrazione-comune .account-container h1.tbp-auth-title--gold {
  display: block !important;
  width: max-content !important;
  max-width: 100% !important;
  margin: 22px auto 16px !important;
  font-family: Manrope, "DM Sans", sans-serif !important;
  font-size: clamp(15px, 4vw, 20px) !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: -.035em !important;
  white-space: nowrap !important;
  text-wrap: nowrap !important;
  text-align: center !important;
  background: none !important;
  color: var(--tbp-gold) !important;
  -webkit-text-fill-color: var(--tbp-gold) !important;
}

a.skip-link,
a.skip-link.screen-reader-text {
  position: absolute !important;
  left: -9999px !important;
  top: 0 !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

a.skip-link:focus,
a.skip-link.screen-reader-text:focus {
  left: 12px !important;
  top: 12px !important;
  width: auto !important;
  height: auto !important;
  clip: auto !important;
  clip-path: none !important;
  padding: 8px 12px !important;
  background: #084828 !important;
  color: #fff !important;
  z-index: 100010 !important;
}

.account-container a.logo.tbp-brand-lockup,
.account-register-inner > a.logo.tbp-brand-lockup,
.account-login-inner > a.logo.tbp-brand-lockup {
  display: flex !important;
  justify-content: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
}

.off-canvas-center li.tbp-drawer-login {
  display: none !important;
}

/* A common focus language for the rebuilt components. */
:where(.tbp-app-bar__item, #iubenda-cs-banner button, #iubenda-cs-banner a):focus-visible {
  outline: 3px solid var(--tbp-focus-color, rgba(201, 162, 39, .42)) !important;
  outline-offset: 3px !important;
}

@media (max-width: 359px) {
  body.login .account-container h1.tbp-auth-title--gold,
  body.registrazione .account-container h1.tbp-auth-title--gold,
  body.registrazione-professionista .account-container h1.tbp-auth-title--gold,
  body.registrazione-comune .account-container h1.tbp-auth-title--gold {
    font-size: 14px !important;
    letter-spacing: -.045em !important;
  }
}

/* Etichette della card su una riga: in colonna stretta «Professionista»
   si spezzava in «Professioni / sta». Il testo si stringe, non va a capo. */
html body .tbp-exp-card__tags .tbp-exp-card__tag {
  white-space: nowrap !important;
  max-width: 100%;
  padding-left: 7px !important;
  padding-right: 7px !important;
  font-size: clamp(.58rem, 2.5vw, .7rem) !important;
  letter-spacing: -.01em;
}

/* Campo data della ricerca in home: il testo deve leggersi appena entri nel
   campo, l'anello di messa a fuoco è quello del marchio e l'icona calendario
   è un bersaglio comodo, non il quadratino grigio del browser. */
html body form.tbp-home-search .tbp-home-search__date-control input[type="date"] {
  transition: none !important;
  accent-color: var(--tbp-green, #084828);
  color-scheme: light;
  box-shadow: none !important;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}
html body form.tbp-home-search .tbp-home-search__date-control input[type="date"]:focus {
  outline: none !important;
  box-shadow: none !important;
  color: var(--tbp-green, #084828) !important;
}

html body form.tbp-home-search .tbp-home-search__date-control input[type="date"]:focus-visible {
  outline: 2px solid rgb(100 116 139) !important;
  outline-offset: 2px !important;
}
html body form.tbp-home-search .tbp-home-search__date-control input[type="date"]::-webkit-datetime-edit {
  padding: 0;
}
html body form.tbp-home-search .tbp-home-search__date-control input[type="date"]:focus::-webkit-datetime-edit {
  color: var(--tbp-green, #084828) !important;
}
html body form.tbp-home-search .tbp-home-search__date-control input[type="date"]::-webkit-datetime-edit-fields-wrapper {
  padding: 0;
}
html body form.tbp-home-search .tbp-home-search__date-control input[type="date"]::-webkit-datetime-edit-text,
html body form.tbp-home-search .tbp-home-search__date-control input[type="date"]::-webkit-datetime-edit-day-field,
html body form.tbp-home-search .tbp-home-search__date-control input[type="date"]::-webkit-datetime-edit-month-field,
html body form.tbp-home-search .tbp-home-search__date-control input[type="date"]::-webkit-datetime-edit-year-field {
  border-radius: 4px;
}
html body form.tbp-home-search .tbp-home-search__date-control input[type="date"]::-webkit-datetime-edit-day-field:focus,
html body form.tbp-home-search .tbp-home-search__date-control input[type="date"]::-webkit-datetime-edit-month-field:focus,
html body form.tbp-home-search .tbp-home-search__date-control input[type="date"]::-webkit-datetime-edit-year-field:focus {
  background: var(--tbp-green, #084828);
  color: #fff;
}
html body form.tbp-home-search .tbp-home-search__date-control input[type="date"]::-webkit-calendar-picker-indicator {
  width: 22px; height: 22px; padding: 2px; margin-inline-start: 6px;
  border-radius: 6px; cursor: pointer; opacity: .85;
  filter: invert(19%) sepia(28%) saturate(2246%) hue-rotate(120deg) brightness(93%) contrast(96%);
}
html body form.tbp-home-search .tbp-home-search__date-control input[type="date"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1; background: rgb(8 72 40 / 10%);
}
html body form.tbp-home-search .tbp-home-search__date-hint { cursor: pointer; }
/* Niente bordo verde scuro sui riquadri Dove e Quando: regola R13, un solo
   bordo neutro. Il fuoco da tastiera resta visibile con un contorno grigio. */
html body form.tbp-home-search .tbp-home-search__field:focus-within {
  border-color: rgb(148 163 184) !important;
}
html body form.tbp-home-search .tbp-home-search__date-control input[type="date"]::selection {
  background: var(--tbp-green, #084828); color: #fff;
}

/* Header artwork backing belongs to the initial CSS, not a delayed JS repaint. */
@layer tbp-appearance {
  #masthead img.tbp-brand-lockup__mark, .header-main img.tbp-brand-lockup__mark {
    background-color:#fff !important;
    border-radius:22% !important;
    padding:5px !important;
    box-sizing:border-box !important;
    aspect-ratio:1 / 1 !important;
    object-fit:contain !important;
  }
}