/*
 Theme Name:   Astra Child - ISOMOD (webland2000)
 Theme URI:    https://www.isomod.it
 Description:  Child theme di Astra con palette e tipografia webland2000 per il sito ISOMOD.
 Author:       webland2000
 Author URI:   https://webland2000.it
 Template:     astra
 Version:      1.0.0
 Text Domain:  astra-child-isomod
*/


/* =========================================================
   VARIABILI BRAND WEBLAND2000
   ========================================================= */

:root {

  --w2k-navy: #0B2545;
  --w2k-sky: #3AA8E0;
  --w2k-emerald: #0E9E75;
  --w2k-blue-corp: #0B4F9E;

  --w2k-bg: #FFFFFF;
  --w2k-bg-alt: #F4F7FA;
  --w2k-text: #1A1A1A;
  --w2k-text-muted: #5A6472;

  --w2k-font-heading: 'Space Grotesk', sans-serif;
  --w2k-font-body: 'Inter', sans-serif;
  --w2k-font-mono: 'IBM Plex Mono', monospace;

  --w2k-radius: 10px;
  --w2k-shadow: 0 4px 16px rgba(11, 37, 69, 0.08);
}


/* =========================================================
   TIPOGRAFIA
   ========================================================= */

body,
button,
input,
select,
textarea {
  font-family: var(--w2k-font-body);
  color: var(--w2k-text);
}

h1,
h2,
h3,
h4,
h5,
h6,
.entry-title,
.site-title {
  font-family: var(--w2k-font-heading);
  color: var(--w2k-navy);
  font-weight: 600;
  letter-spacing: -0.01em;
}


/* Etichette tecniche / nomi modulo */

.w2k-module-tag,
code,
.tag-modulo {
  font-family: var(--w2k-font-mono);
  text-transform: uppercase;
  font-size: 0.8em;
  letter-spacing: 0.05em;
  color: var(--w2k-sky);
}


/* =========================================================
   HEADER
   ========================================================= */

.site-header,
.ast-primary-header-bar {
  background-color: #FFFFFF !important;

  position: fixed !important;

  top: 0 !important;
  left: 0 !important;

  width: 100% !important;

  z-index: 9999 !important;
}


/* =========================================================
   SPAZIO PER HEADER FISSO
   ========================================================= */

body {
  padding-top: 120px !important;
}


/* =========================================================
   MENU MOBILE ASTRA
   =========================================================
   Il menu mobile di Astra utilizza il popup:
   .ast-mobile-popup-drawer
   .ast-mobile-popup-inner
   .ast-mobile-popup-content

   Il pannello deve occupare tutta l'altezza dello schermo
   e deve essere il contenitore SCORRIBILE.
   ========================================================= */

@media (max-width: 921px) {

  /*
   * Contenitore principale del popup
   */

  #ast-mobile-popup-wrapper {
    position: relative !important;
    z-index: 100000 !important;
  }


  /*
   * Drawer mobile
   */

  .ast-mobile-popup-drawer {
    position: fixed !important;

    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;

    width: 100% !important;

    z-index: 100000 !important;
  }


  /*
   * Pannello interno bianco
   *
   * È questo elemento che deve poter scorrere
   * verticalmente.
   */

  .ast-mobile-popup-drawer .ast-mobile-popup-inner {
    position: fixed !important;

    top: 120px !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;

    width: 100% !important;
    max-width: 100% !important;

    height: calc(100dvh - 120px) !important;
    max-height: calc(100dvh - 120px) !important;

    display: flex !important;
    flex-direction: column !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;

    -webkit-overflow-scrolling: touch !important;

    background-color: #FFFFFF !important;

    box-sizing: border-box !important;

    z-index: 100001 !important;
  }


  /*
   * Header del popup:
   * logo + pulsante X
   */

  .ast-mobile-popup-drawer .ast-mobile-popup-header {
    flex: 0 0 auto !important;

    width: 100% !important;

    box-sizing: border-box !important;
  }


  /*
   * Area che contiene il menu
   */

  .ast-mobile-popup-drawer .ast-mobile-popup-content {
    flex: 0 0 auto !important;

    width: 100% !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    overflow: visible !important;

    box-sizing: border-box !important;
  }


  /*
   * Contenitore del menu mobile
   */

  .ast-mobile-popup-drawer .ast-builder-menu-mobile,
  .ast-mobile-popup-drawer .main-navigation {
    width: 100% !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    overflow: visible !important;

    box-sizing: border-box !important;
  }


  /*
   * Lista delle voci del menu
   */

  .ast-mobile-popup-drawer .main-header-menu {
    width: 100% !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    overflow: visible !important;

    display: block !important;

    box-sizing: border-box !important;
  }


  /*
   * Singole voci del menu
   */

  .ast-mobile-popup-drawer .main-header-menu > li {
    height: auto !important;

    min-height: 0 !important;

    overflow: visible !important;
  }


  /*
   * Link del menu
   */

  .ast-mobile-popup-drawer .main-header-menu > li > a {
    height: auto !important;

    min-height: 0 !important;

    white-space: normal !important;
  }


  /*
   * Evita che eventuali elementi figli del menu
   * introducano un'altezza massima nascosta.
   */

  .ast-mobile-popup-drawer .ast-builder-menu-mobile *,
  .ast-mobile-popup-drawer .main-navigation * {
    box-sizing: border-box;
  }

}


/* =========================================================
   COLORI HEADER E MENU
   ========================================================= */

.site-header .main-header-menu a,
.site-header .site-title a {
  color: var(--w2k-navy) !important;
}


.site-header .main-header-menu a:hover,
.site-header .current-menu-item > a {
  color: var(--w2k-sky) !important;
}


/* Colori specifici del menu mobile */

.ast-mobile-popup-drawer .main-header-menu a {
  color: var(--w2k-navy) !important;
}


.ast-mobile-popup-drawer .main-header-menu a:hover,
.ast-mobile-popup-drawer .main-header-menu .current-menu-item > a {
  color: var(--w2k-sky) !important;
}


/* =========================================================
   BOTTONI / CTA
   ========================================================= */

.ast-button,
button,
.wp-block-button__link,
input[type="submit"] {
  background-color: var(--w2k-emerald) !important;
  border-color: var(--w2k-emerald) !important;
  color: #FFFFFF !important;

  border-radius: var(--w2k-radius);

  font-family: var(--w2k-font-heading);
  font-weight: 600;

  transition:
    background-color 0.2s ease,
    transform 0.15s ease;
}


.ast-button:hover,
button:hover,
.wp-block-button__link:hover {
  background-color: var(--w2k-sky) !important;

  transform: translateY(-1px);
}


/* =========================================================
   BOTTONI SECONDARI / OUTLINE
   ========================================================= */

.w2k-btn-outline {
  background: transparent !important;

  border: 2px solid var(--w2k-sky) !important;

  color: var(--w2k-sky) !important;
}


/* =========================================================
   LINK
   ========================================================= */

a {
  color: var(--w2k-sky);

  text-decoration: none;
}


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


/* =========================================================
   CARD PRODOTTO / MODULO
   ========================================================= */

.w2k-card {
  background: var(--w2k-bg);

  border-radius: var(--w2k-radius);

  box-shadow: var(--w2k-shadow);

  padding: 24px;

  border-top: 4px solid var(--w2k-emerald);

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}


.w2k-card:hover {
  transform: translateY(-4px);

  box-shadow: 0 8px 24px rgba(11, 37, 69, 0.14);
}


.w2k-card h3 {
  margin-top: 0;
}


/* =========================================================
   SEZIONI ALTERNATE
   ========================================================= */

.w2k-section-alt {
  background-color: var(--w2k-bg-alt);
}


/* =========================================================
   FOOTER
   ========================================================= */

.site-footer,
footer.site-footer {
  background-color: var(--w2k-navy);

  color: #C9D6E3;
}


.site-footer a {
  color: var(--w2k-sky);
}


/* =========================================================
   HERO ISOMOD
   ========================================================= */

.isomod-hero {
  width: 100%;
  max-width: 100%;

  overflow: hidden;

  box-sizing: border-box;

  margin-top: -120px !important;
  padding-top: 120px !important;
}

@media (max-width: 921px) {
  .isomod-hero {
    margin-top: -130px !important;
    padding-top: 130px !important;
  }
}


/* Titolo principale */

.isomod-hero-title {
  font-family: var(--w2k-font-heading);

  font-size: clamp(42px, 5vw, 72px) !important;

  line-height: 1.05 !important;

  letter-spacing: -0.025em;

  max-width: 1150px;

  margin-left: auto;
  margin-right: auto;

  box-sizing: border-box;
}


/* Testo sotto il titolo */

.isomod-hero-subtitle {
  font-family: var(--w2k-font-body);

  font-size: clamp(18px, 2vw, 26px) !important;

  line-height: 1.35 !important;

  max-width: 1100px;

  margin-left: auto;
  margin-right: auto;

  box-sizing: border-box;
}


/* CTA */

.isomod-hero .wp-block-button {
  max-width: 100%;
}


.isomod-hero .wp-block-button__link {
  white-space: normal;

  text-align: center;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1024px) {

  .isomod-hero-title {
    font-size: 52px !important;
  }


  .isomod-hero-subtitle {
    font-size: 21px !important;
  }

}


/* =========================================================
   SMARTPHONE
   ========================================================= */

@media (max-width: 767px) {

  .isomod-hero {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }


  .isomod-hero-title {
    font-size: 40px !important;

    line-height: 1.08 !important;

    letter-spacing: -0.02em;

    max-width: 100%;
  }


  .isomod-hero-subtitle {
    font-size: 18px !important;

    line-height: 1.4 !important;

    max-width: 100%;
  }


  .isomod-hero .wp-block-button__link {
    width: 100% !important;

    box-sizing: border-box;
  }

}


/* =========================================================
   SMARTPHONE PICCOLI
   ========================================================= */

@media (max-width: 400px) {

  .isomod-hero-title {
    font-size: 34px !important;
  }


  .isomod-hero-subtitle {
    font-size: 17px !important;
  }

}


/* =========================================================
   FIX MENU MOBILE ASTRA - IL MENU ERA SOTTO L'HEADER
   ========================================================= */

/* Porta il menu mobile sopra tutto */
.ast-header-break-point .ast-mobile-popup-drawer {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    z-index: 999999 !important;
    background: #ffffff !important;
}

/* Abbassa lo sticky header di Astra */
.ast-header-break-point .main-header-bar,
.ast-header-break-point .site-header,
.ast-header-break-point .ast-mobile-header-wrap {
    z-index: 1 !important;
}

/* Evita che il logo o il toggle si sovrappongano */
.ast-header-break-point .main-header-bar .site-branding,
.ast-header-break-point .main-header-bar .ast-mobile-menu-buttons {
    position: relative !important;
    z-index: 2 !important;
}