/*
Theme Name: Areton (TT4 Child)
Theme URI: https://example.com/
Description: Child theme minimal per landing wireframe.
Author: Local
Template: twentytwentyfour
Requires at least: 6.4
Version: 0.1.0
Text Domain: areton
*/

/* Local Sora font (woff2) to avoid external requests on the frontend. */
@font-face {
	font-family: "Sora";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("assets/fonts/sora/Sora-latin-wght-normal.woff2") format("woff2-variations");
}

/* Global typography: use Sora for all the site UI text. */
:where(html, body, button, input, textarea, select, .wp-block-button__link, .wp-block-navigation a) {
	font-family: "Sora", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* Light bordered cards used by the Home layout (kept intentionally minimal). */
.areton-outline-card {
	border: 1px solid var(--wp--preset--color--contrast-2);
}


.areton-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: var(--wp--preset--color--primary, #0b2942);
  border-radius: 999px;
}

/* Scroll morbido quando clicchi link con ancora, es. #contatti */
html {
  scroll-behavior: smooth;
}

/* Evita che l'ancora finisca nascosta sotto header/menu fisso */
:target {
  scroll-margin-top: 96px;
}

/* Transizioni più morbide sui link */
a {
  transition:
    color 220ms ease,
    background-color 220ms ease,
    border-color 220ms ease,
    opacity 220ms ease,
    transform 220ms ease;
}

/* Hover leggero, elegante */
a:hover {
  opacity: 0.82;
}

/* Accessibilità: rispetta chi ha disattivato le animazioni */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  a {
    transition: none;
  }
}


/* Voce Contattaci nel menu: nascosta di default */
.mobile-menu-contact {
  display: none !important;
}

/* Bottone desktop visibile di default */
.desktop-header-contact {
  display: inline-flex !important;
}

/* Mobile */
@media (max-width: 781px) {
  .desktop-header-contact {
    display: none !important;
  }

  .mobile-menu-contact {
    display: flex !important;
    justify-content: center !important;
    margin-top: 18px !important;
  }

  .mobile-menu-contact a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px 22px !important;
    border-radius: 8px !important;
    background: #6688ff !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-decoration: none !important;
  }

  .mobile-menu-contact a:hover {
    background: #4f73f5 !important;
    color: #ffffff !important;
  }
}
@media (max-width: 781px) {
  header .wp-block-navigation {
    margin-left: auto !important;
  }

  header .wp-block-navigation__responsive-container-open {
    margin-left: auto !important;
    display: flex !important;
    justify-content: flex-end !important;
  }
}


/* Menu mobile Gutenberg / Twenty Twenty-Four */
@media (max-width: 781px) {

  .wp-block-navigation__responsive-container.is-menu-open {
    background-color: rgba(255, 255, 255, 0.70) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
    min-height: 100vh !important;
    position: relative !important;
  }

  .wp-block-navigation__responsive-container-close {
    position: absolute !important;
    top: 28px !important;
    right: 28px !important;
    z-index: 10 !important;
  }

  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
    min-height: 100vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
  }

  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 28px !important;
    text-align: center !important;
  }

  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #111111 !important;
    text-decoration: none !important;
    outline: none !important;
    box-shadow: none !important;
  }

  .wp-block-navigation__responsive-container.is-menu-open .mobile-menu-contact .wp-block-navigation-item__content {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 14px 28px !important;
    border-radius: 8px !important;
    background: #6688ff !important;
    color: #ffffff !important;
    line-height: 1 !important;
  }
}


.wp-block-html:has(.areton-marquee-wrapper) {
  background: transparent !important;
  background-color: transparent !important;
  overflow: hidden !important;
}

.wp-block-html:has(.areton-marquee-wrapper) > * {
  background: transparent !important;
  background-color: transparent !important;
}

.areton-marquee-wrapper,
.areton-logo-marquee {
  width: 100%;
  max-width: none !important;
  overflow: hidden;
  background: transparent !important;
  background-color: transparent !important;
  padding: 28px 0;
}

.areton-logo-marquee-track {
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
  animation: areton-marquee-loop 18s linear infinite;
  will-change: transform;
}

.areton-logo-marquee-set {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 28px;
  flex: 0 0 auto;
  padding-right: 28px;
}

.areton-logo-card {
  width: 190px;
  height: 86px;
  border-radius: 22px;
  background: #ffffff !important;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.12);

  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;

  padding: 14px 26px;
  box-sizing: border-box;
}

.areton-logo-card img {
  display: block;
  max-width: 100%;
  max-height: 52px;
  width: auto;
  height: auto;
  object-fit: contain;
}

@keyframes areton-marquee-loop {
  0% {
    transform: translate3d(0, 0, 0);
  }

  100% {
    transform: translate3d(-50%, 0, 0);
  }
}