/* ============================================================
   FirenzeMeteo — Raccordo tema (WordPress + nav reale + iframe meteo)
   Caricato DOPO tokens/base/components. Sovrascrive il vecchio skin.
   ============================================================ */

/* ---- Offset header sticky con admin bar di WP ---- */
.admin-bar .site-header { top: 32px; }
@media screen and (max-width: 782px){ .admin-bar .site-header { top: 46px; } }

/* ---- Nav reale (wp_nav_menu, walker default: ul.nav-menu) ---- */
.main-nav .nav-menu { display: flex; gap: var(--sp-1); align-items: center; flex-wrap: wrap; }
.main-nav .nav-menu li { position: relative; }
.main-nav .nav-menu a {
  display: block; padding: .55rem 1rem; border-radius: var(--radius-pill);
  color: var(--c-ink); font-weight: 700; font-size: 1.125rem; white-space: nowrap;
  transition: background .15s, color .15s;
}
.main-nav .nav-menu > li > a:hover,
.main-nav .nav-menu > li.current-menu-item > a,
.main-nav .nav-menu > li.current-menu-ancestor > a { background: var(--c-blue-050); color: var(--c-blue-700); }

/* submenu (dropdown) in puro CSS, niente jQuery */
.main-nav .sub-menu {
  position: absolute; top: 100%; left: 0; min-width: 220px; z-index: 60;
  background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: var(--sp-2); display: none;
}
.main-nav .menu-item-has-children:hover > .sub-menu,
.main-nav .menu-item-has-children:focus-within > .sub-menu { display: block; }
.main-nav .sub-menu a { border-radius: var(--radius-sm); }
.main-nav .sub-menu a:hover { background: var(--c-blue-050); color: var(--c-blue-700); }
.main-nav .sub-menu .sub-menu { top: 0; left: 100%; }

/* menu mobile */
@media (max-width: 860px){
  .main-nav { position: fixed; inset: var(--header-h) 0 auto 0; background: #fff; border-bottom: 1px solid var(--c-line);
    box-shadow: var(--shadow); padding: var(--sp-3); display: none; max-height: calc(100vh - var(--header-h)); overflow:auto; }
  .main-nav.open { display: block; }
  .main-nav .nav-menu { flex-direction: column; align-items: stretch; gap: 2px; }
  .main-nav .sub-menu { position: static; display: block; box-shadow: none; border: 0; padding-left: var(--sp-4); }
  .nav-toggle { display: inline-block; }
}

/* ---- Cornice moderna per gli iframe meteo (meteoproject / meteogiuliacci) ---- */
.wx-frame { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; margin-bottom: var(--gap); }
.wx-frame__head { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); background: var(--grad-sky); color: #fff; font-weight: 800; }
.wx-frame__head .dot { width: 8px; height: 8px; border-radius: 50%; background: #7CFFB2; box-shadow: 0 0 0 4px rgba(124,255,178,.25); }
.wx-frame__head .small { margin-left: auto; font-weight: 600; font-size: var(--fs-300); opacity: .9; }
.wx-frame__body { padding: var(--sp-5); }
.responsive-iframe-container { position: relative; width: 100%; }
.responsive-iframe-container iframe, .responsive-iframe-container .responsive-iframe { width: 100%; border: 0; display: block; }

/* ---- Compat contenuti WordPress (the_content) ---- */
.prose img.alignleft, .post-content img.alignleft { float: left; margin: .3rem 1.2rem .8rem 0; }
.prose img.alignright, .post-content img.alignright { float: right; margin: .3rem 0 .8rem 1.2rem; }
.aligncenter { display: block; margin-inline: auto; }
.wp-caption { max-width: 100%; }
.wp-caption-text, .wp-element-caption { font-size: var(--fs-300); color: var(--c-ink-soft); padding: var(--sp-2) 0; }
.post-content { max-width: 760px; }
.post-content > * + * { margin-top: var(--sp-4); }
.post-content h2 { font-size: var(--fs-700); margin-top: var(--sp-6); }
.post-content h3 { font-size: var(--fs-600); margin-top: var(--sp-5); }
.post-content p, .post-content li { line-height: 1.7; color: #243240; }
.post-content ul, .post-content ol { padding-left: 1.3em; }
.post-content a { text-decoration: underline; text-underline-offset: 2px; }
.screen-reader-text { position:absolute!important; width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0); }

/* ---- Override: neutralizza relitti del vecchio skin/Bootstrap dove serve ---- */
#page { overflow-x: hidden; }
.navbar, .navbar-default { background: transparent; border: 0; margin: 0; min-height: 0; }
img#logo, .navbar-brand > #logo { height: 56px; width: auto; }

/* ---- Sicurezze dopo la rimozione del vecchio skin ---- */
html { background: var(--c-bg); font-size: 16px !important; }  /* garantisce 1rem = 16px */
body { background: var(--c-bg) !important; color: var(--c-ink); font-size: var(--fs-400); }
#page { background: transparent; }
/* il footer deve avere SEMPRE testo chiaro su sfondo blu */
.site-footer, .site-footer p, .site-footer span, .site-footer li, .site-footer h4, .site-footer a { color: #cfe3f3; }
.site-footer h4 { color: #ffffff; }
/* eventuali titoli legacy non devono rimpicciolire */
.home-tempo-reale { text-transform: none; font-size: var(--fs-900); font-weight: 800; }
.home-tempo-reale span { color: var(--c-sun); font-style: normal; }
/* contenitori legacy a tutta larghezza: niente fondali strani */
.container.bg-white, .container.bg-blue { background: transparent; padding: 0; }

/* ---- Widget WordPress della sidebar (.widget > .widget-inner > h3) ---- */
.widget { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius); box-shadow: var(--shadow-sm); margin-bottom: var(--gap); overflow: hidden; }
.widget .widget-inner { padding: var(--sp-4) var(--sp-5) var(--sp-5); }
.widget .widget-inner > h3,
.widget .widget-title h3 { margin: 0 0 var(--sp-3); color: var(--c-blue-900); font-size: var(--fs-500); font-weight: 800; }
.widget img { border-radius: var(--radius-sm); }
.widget ul { display: block; }
.widget li { padding: var(--sp-2) 0; border-bottom: 1px solid var(--c-line); }
.widget li:last-child { border-bottom: 0; }
/* form di ricerca dentro un widget (gestisce sia il form classico con <label> sia il blocco) */
.widget form, .widget .search-form, .widget form[role="search"], .widget .wp-block-search__inside-wrapper {
  display: flex; gap: var(--sp-2); align-items: stretch; flex-wrap: nowrap; width: 100%;
}
.widget .search-form label, .widget form[role="search"] label { flex: 1 1 auto; min-width: 0; margin: 0; display: block; }
.widget input[type="text"], .widget input[type="search"], .widget .search-field {
  flex: 1 1 auto; width: 100%; min-width: 0; box-sizing: border-box;
  padding: .55rem .7rem; border: 1px solid var(--c-line); border-radius: var(--radius-sm); font-size: var(--fs-400);
}
.widget input[type="submit"], .widget button[type="submit"], .widget .search-submit, .widget .wp-block-search__button {
  flex: 0 0 auto; white-space: nowrap; padding: .55rem .9rem; border: 0; border-radius: var(--radius-sm);
  background: var(--grad-sky); color: #fff; font-weight: 700; cursor: pointer;
}

/* ---- Paginazione (the_posts_pagination) ---- */
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: center; align-items: center; }
.pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 .8rem;
  border: 1px solid var(--c-line); border-radius: var(--radius-sm); background: #fff; color: var(--c-ink); font-weight: 700; text-decoration: none;
}
.pagination a.page-numbers:hover { border-color: var(--c-cyan-500); color: var(--c-cyan-600); }
.pagination .page-numbers.current { background: var(--grad-sky); color: #fff; border-color: transparent; }
.pagination .page-numbers.dots { border: 0; background: transparent; }

/* ---- Webcam (pagina singola): scatti live ---- */
.webcam-shots { display: flex; flex-direction: column; gap: var(--gap); }
.webcam-shot { position: relative; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; }
.webcam-shot > a, .webcam-shot > img { display: block; }
.webcam-shot img { width: 100%; height: auto; }
.webcam-shot .live { position: absolute; top: 12px; left: 12px; background: var(--c-alert); color: #fff; font-size: 12px; font-weight: 800; padding: 3px 9px; border-radius: var(--radius-pill); letter-spacing: .06em; display: flex; align-items: center; gap: 5px; }
.webcam-shot .live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: blink 1.4s infinite; }
.webcam-shot figcaption { padding: var(--sp-3) var(--sp-4); font-weight: 700; color: var(--c-blue-900); }

/* ---- Contenitori AdSense (altezza riservata: no CLS) ---- */
.fm-ad { position: relative; display: flex; align-items: center; justify-content: center; margin-block: var(--sp-5); }
.fm-ad__label { position: absolute; top: 2px; left: 8px; font-size: 10px; color: #b6c4d2; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; }
.fm-ad ins { max-width: 100%; }
.fm-ad--sidebar { margin: 0 0 var(--gap); }