@charset "utf-8";
/* ============================================================
   FILE: /sites/mhl/assets/css/ads.css
   The ad slots — their label, their reserved sizes, their places (2.6.5.2)
   ------------------------------------------------------------
   DEV_PLAN_Stage3 §4.18 (Ben, 26 October 2026). Loaded by the layout on
   pages with ads only (AdSlots::on()), right after main.css. Each slot
   keeps its height, so the page never jumps when an ad loads; none stays
   in view while scrolling (AdSense's programme policies). The grey
   placeholder is wpdev's mode, to judge the places.
   ============================================================ */

/* ⚠ width, never margin:auto, on .ad-slot: in a flex column (.sidebar-stack) auto margins shrink
   the slot to its label's width. The space inside is what is centred. */
.ad-slot {
  box-sizing: border-box;
  width: 100%;
  text-align: center;
}
.ad-slot__label {
  margin: 0 0 .35rem;
  color: #5b6270;   /* 5.9:1 on the page background */
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .14em;
  line-height: 1.4;
  text-transform: uppercase;
}
.ad-slot__space {
  box-sizing: border-box;
  width: 100%;
  margin: 0 auto;
}

/* The reserved sizes (AdSlots::SLOTS) */
.ad-slot--a1 .ad-slot__space { max-width: 300px; height: 250px; }
.ad-slot--a2 .ad-slot__space { max-width: 300px; height: 600px; }
.ad-slot--a3 .ad-slot__space { height: 250px; }
.ad-slot--a4 .ad-slot__space,
.ad-slot--a5 .ad-slot__space { height: 280px; }
.ad-slot--a7 .ad-slot__space { max-width: 728px; height: 90px; }

/* Where they show: the sidebar's two on a computer only (the sidebar stacks under the page at
   900px); the top bar on a computer and a tablet — a phone has Google's anchor instead. */
@media only screen and (max-width: 900px) {
  .ad-slot--computer { display: none; }
}
@media only screen and (max-width: 767px) {
  .ad-slot--wide { display: none; }
}

/* The placeholder (mode 'placeholder', wpdev) */
.ad-slot--placeholder .ad-slot__space {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .2rem;
  border: 2px dashed #aab4c3;
  border-radius: 10px;
  background: #e9edf3;
}
.ad-slot__name { color: #1d2433; font-size: .95rem; font-weight: 700; }
.ad-slot__size { color: #5b6270; font-size: .85rem; }

/* Live (mode 'live', 2.7.4.5 — components/ad_slot.php, ads.js). The responsive units (A3–A5) may come
   taller than the space they keep, so there the space is a minimum; the fixed ones fit theirs. A slot
   Google leaves empty ("unfilled") folds away, label and all. */
.ad-slot--live.ad-slot--a3 .ad-slot__space { height: auto; min-height: 250px; }
.ad-slot--live.ad-slot--a4 .ad-slot__space,
.ad-slot--live.ad-slot--a5 .ad-slot__space { height: auto; min-height: 280px; }
.ad-slot--live:not(.ad-slot--a7):has(ins[data-ad-status="unfilled"]) { display: none; }
/* ⚠ Not the top bar: main.js measures #topBar's height ONCE, at load, for the header's fixing point —
   folding it afterwards would make the header jump. An unfilled A7 keeps its space. */

/* ------------------------------------------------------------
   The places
------------------------------------------------------------ */

/* A7, the top bar above the menu (layouts/default.php). ⚠ #topBar itself carries NO padding,
   border or margin: main.js measures it with .height() to know when to fix the header, so its
   height must be all of it — the strip's look is on .ad-top__strip inside. */
#topBar { margin: 0; padding: 0; border: 0; }
.ad-top__strip {
  padding: .5rem 0 .65rem;
  border-bottom: 1px solid #dde2ea;
  background: #eef1f6;
}
@media only screen and (max-width: 767px) {
  #topBar { display: none; }
}
/* 2.7.4.5: the live 728px unit must FIT (an ad is never cropped — AdSense). .padding-x's sides are
   4.1vw, which at 768–~810px leave less than 728px, so the strip's sides are 10px up to 900px: even a
   768px window with a 17px scrollbar leaves 731px. */
@media only screen and (max-width: 900px) {
  .ad-top__strip .padding-x { padding-left: 10px; padding-right: 10px; }
}

/* A3 on home and country: a .home-block, so the reviews after it keep their divider; no divider
   above it (home.css's ".home-block + .home-block" — this outranks it). */
.home-sections .home-block.home-ad {
  margin-top: 2.5rem;
  padding-top: 0;
  border-top: 0;
}

/* A3 in a listing: a whole row of the grid, after the 6th card */
.grid-ad { grid-column: 1 / -1; }

/* A4 and A5 in a post; A4 on a review page */
.post-ad   { margin: 2rem 0 2.25rem; }
.review-ad { margin: 2.5rem 0 0; }