/* 4bmeteo cleanup: defense-in-depth for anything that slips past server-side stripping. */

/* Ad slots */
#skn_n, #skn, #skn_b, #admasthead, #adv_nativ_sopracartina, #adv_outbrain_AR_1_sottocartina,
#adv_outbrain_footer, #adv_outbrain_interstitial, #adoutofpageC, #adv_adsense_300_dx,
#adv_autopromo_interstitial, #ads_container, #mpu_t, #newscarousel, #topnews,
[id^="adv_"], [id^="ad_"], [id^="gpt_"], [id^="mpu"], [id^="div-gpt"],
.gpt_top, .mastheadc, .skeletonSoprac, .OUTBRAIN, .outbrain_widget,
.adv-container, .pubblicita, .sponsored {
  display: none !important;
}

/* Right-column video player + AdSense rail */
#sidebar-video-fixed, #content_video_sidebar, video, .video-js,
.col-md-1-4 .ads, aside.adv, aside.right-ad, .sidebar-ads {
  display: none !important;
}

/* Empty containers left behind */
.row > div:empty, .container > div:empty, ul:empty, nav:empty, aside:empty {
  display: none !important;
}

/* City sub-nav (weekend/mese/storico/pollini/aria/allerte/webcam) — none of those work */
ul.nav-top-loc {
  display: none !important;
}

/* The site header is position:fixed (height 60px) on the mobile breakpoint. Without
   this padding the page content slides under the bar and "Meteo {city} Oggi" gets
   covered. The desktop layout doesn't show that fixed header, so keep it untouched. */
@media (max-width: 767px) {
  body { padding-top: 60px; }

  /* The header now contains only the logo + search box (hamburger + main nav gone),
     so let the search bar fill the remaining width. The archived CSS still has rules
     that make #search absolutely positioned with a 15px vertical padding band — we
     need to undo all of those so our flex layout actually controls the geometry. */
  header#main-header {
    display: flex; align-items: center; padding: 0 10px; gap: 10px; height: 60px;
    box-sizing: border-box;
  }
  header#main-header > a#bhanc { flex: 0 0 auto; }
  header#main-header > a#bhanc img { height: 30px; width: auto; display: block; }
  header#main-header > #search {
    flex: 1 1 auto; min-width: 0; display: block;
    /* Defeat the mobile archive rule: #search { position:absolute; top/left/right;
       padding:15px 5px; height:60px; background:#1461a1 }. */
    position: static; left: auto; right: auto; top: auto;
    padding: 0; margin: 0; height: auto; background: transparent;
  }
  header#main-header #search form {
    padding: 0 36px 0 0; margin: 0; position: relative;
    display: block; height: 32px;
  }
  header#main-header #search-text {
    width: 100%; height: 32px; box-sizing: border-box; padding: 4px 10px;
    /* font-size MUST be ≥ 16px or iOS Safari auto-zooms when the input is
       focused. Keep it at 16px and reduce line-height instead. */
    font-size: 16px; font-weight: 400; line-height: 22px; float: none;
    border-radius: 4px 0 0 4px; vertical-align: top; display: block;
  }
  /* The archived stylesheet points the button at /images/layout/mSearch-mobile.png,
     which 404s in our mirror — replace with an inline SVG magnifying glass. */
  header#main-header #search-button {
    position: absolute; right: 0; top: 0; height: 32px; width: 36px;
    background-color: #588fbd; border: 0; padding: 0;
    border-radius: 0 4px 4px 0; float: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='m21 21-4.3-4.3'/></svg>");
    background-repeat: no-repeat; background-position: center center; background-size: 18px 18px;
  }
  header#main-header #h-3loc { display: none; }
}

/* Day-strip prev/next arrows. The archive CSS used Unicode triangles (\25C0 / \25B6),
   which iOS Safari + recent Android render as colored emoji glyphs. Override with
   crisp inline SVG chevrons. */
.sliderControls.prev-slide:before,
.sliderControls.next-slide:before {
  content: "" !important;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 14px 14px;
  height: 22px !important;
  margin-top: -11px;
}
.sliderControls.prev-slide:before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='15 18 9 12 15 6'/></svg>");
}
.sliderControls.next-slide:before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 18 15 12 9 6'/></svg>");
}

/* Same treatment for the back-to-top arrow (▲ in the archive). */
a.back-top {
  text-indent: -9999px; overflow: hidden;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 15 12 9 18 15'/></svg>");
  background-repeat: no-repeat; background-position: center center; background-size: 18px 18px;
}