/*
Theme Name: Responsive Child - WebAppPortal
Template: responsive
Author: WebAppPortal
Version: 1.0
Description: Child theme di Responsive con l'identita visiva WebAppPortal IoT (palette, tipografia).
*/


/* Font del brand ospitati sul sito (2026-10-23): prima arrivavano da Google Fonts con @import, che bloccava il disegno della pagina.
   Solo il sottoinsieme latino; Space Grotesk e IBM Plex Sans sono font variabili (un file per tutti i pesi). Licenza SIL OFL 1.1. */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('fonts/space-grotesk-var.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: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('fonts/ibm-plex-sans-var.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: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/ibm-plex-mono-500.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: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/ibm-plex-mono-600.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 {
  --wap-ink: #10141A;
  --wap-ivory: #F7F5EF;
  --wap-copper: #E8A33D;
  --wap-copper-deep: #C77B3D;
  --wap-teal: #3FBFAE;
}

body {
  font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  letter-spacing: -0.3px;
}

pre,
code,
kbd,
samp {
  font-family: 'IBM Plex Mono', monospace;
}

pre {
  background: var(--wap-ink);
  color: var(--wap-ivory);
  padding: 16px 20px;
  border-radius: 6px;
  overflow-x: auto;
}

pre code {
  background: none;
  color: inherit;
  padding: 0;
}

code {
  background: rgba(232, 163, 61, 0.12);
  color: var(--wap-copper-deep);
  padding: 2px 6px;
  border-radius: 3px;
}

/* Override rinforzato: selettori specifici del tema Responsive */
a,
a:visited {
  color: var(--wap-copper-deep) !important;
}

a:hover,
a:focus {
  color: var(--wap-copper) !important;
}

.entry-title a,
.entry-title a:visited,
.site-title a,
h1 a, h2 a, h3 a {
  color: var(--wap-ink) !important;
}

.entry-title a:hover,
h1 a:hover, h2 a:hover, h3 a:hover {
  color: var(--wap-copper-deep) !important;
}

.entry-title {
  border-left: 3px solid var(--wap-copper);
  padding-left: 14px;
}

.adminbar-button,
.search-submit,
input[type="submit"],
input[type="button"],
button,
.button,
.wp-block-button__link {
  background-color: var(--wap-copper) !important;
  border-color: var(--wap-copper) !important;
  color: var(--wap-ink) !important;
  font-family: 'IBM Plex Mono', monospace !important;
  font-weight: 600 !important;
}

.adminbar-button:hover,
.search-submit:hover,
input[type="submit"]:hover,
button:hover,
.button:hover,
.wp-block-button__link:hover {
  background-color: var(--wap-copper-deep) !important;
  border-color: var(--wap-copper-deep) !important;
}

/* Fix: header sticky semi-trasparente che copre il contenuto durante lo scroll */
.sticky-header {
  opacity: 1 !important;
}

/* Nascondi titolo e tagline testuali del sito accanto al logo (richiesta 2026-09-21) */
.site-title,
.site-description {
  display: none !important;
}

/* Header: logo sopra, menu sotto su riga singola orizzontale (richiesta 2026-09-21) */
.site-primary-header-inner-wrap.site-header-row {
  grid-template-columns: 1fr !important;
  justify-items: center;
}
.site-header-primary-section-left,
.site-header-primary-section-right {
  width: auto;
  max-width: 100%;
}
.site-header-primary-section-right .main-navigation .menu {
  display: flex !important;
  flex-wrap: nowrap;
  justify-content: center;
  width: auto;
  margin: 0 auto;
}

/* Riduci dimensione logo header, mantenendolo centrato (richiesta 2026-09-21) */
/* L'immagine del logo non aveva alcun vincolo di larghezza CSS, quindi si espandeva alla dimensione intrinseca del file (1520px) */
.custom-logo-link .custom-logo,
img.custom-logo {
  width: 450px !important;
  max-width: 450px !important;
  height: auto !important;
}

/* Sottomenu a tendina (desktop + off-canvas mobile): font più piccolo e scroll verticale per liste lunghe, uniforme su tutto il sito (richiesta 2026-09-22) */
.main-navigation .sub-menu,
.main-navigation .children,
.off-canvas-navigation .sub-menu,
.off-canvas-navigation .children {
  max-height: 65vh;
  overflow-y: auto;
  overflow-x: hidden;
}
.main-navigation .sub-menu a,
.main-navigation .children a,
.off-canvas-navigation .sub-menu a,
.off-canvas-navigation .children a {
  font-size: 13px !important;
  padding: 10px 15px !important;
}

/* === WAP: mobile layout fix (header logo too wide, overflowing tables/code) + meta separator (2026-09-25) === */
@media (max-width: 767px) {
  .site-primary-mobile-header-inner-wrap { max-width: 100%; box-sizing: border-box; }
  .site-mobile-header-primary-section-left { min-width: 0; flex: 1 1 auto; }
  .site-mobile-header-primary-section-left .site-branding,
  .site-mobile-header-primary-section-left .site-branding-wrapper,
  .site-mobile-header-primary-section-left .custom-logo-link { min-width: 0; max-width: 100%; }
  .site-mobile-header-primary-section-left .custom-logo { width: auto !important; max-width: 190px !important; height: auto !important; }
  .entry-content table { display: block; max-width: 100%; overflow-x: auto; }
  .entry-content pre { max-width: 100%; overflow-x: auto; }
}
.entry-author::after, .entry-date::after { content: "\2022" !important; }
@media (max-width: 600px) { body .wap-cheap-news { margin: 0 12px 24px; border-radius: 14px; } }
/* === WAP: featured image band on single posts, 1/3 shorter (2026-09-25) === */
@media (min-width: 768px) {
  .single .entry-header .thumbnail img { width: 100%; height: auto; aspect-ratio: 2400 / 840; object-fit: cover; object-position: center top; border-radius: 14px; }
}

/* === WAP: l'adesivo di Cheap non deve coprire il menu (2026-10-09) ===
   Tra 1280 e 1699 px l'adesivo in alto a sinistra copriva la voce "ESP32" del menu.
   In quella fascia si mostra la scheda nella pagina (come sotto i 1280 px); l'adesivo resta da 1700 px in su. */
@media (min-width: 1280px) and (max-width: 1699px) {
  body .wap-cheap-sticker { display: none !important; }
  body .wap-cheap-news { display: flex !important; }
}

/* === WAP: sottomenu a 3 livelli (2026-10-23) ===
   Lo scroll dei sottomenu (65vh) tagliava fuori le tendine di terzo livello (ESP32 > Primi passi, ecc.).
   Un sottomenu che contiene voci con figli non scorre: scorrono solo le liste finali, che sono quelle lunghe. */
.main-navigation .sub-menu:has(> li.menu-item-has-children),
.main-navigation .children:has(> li.page_item_has_children) {
  max-height: none;
  overflow: visible;
}