/* ═══════════════════════════════════════════════════════════════
   ADS & MONETISATION  — f2n-theme
   Works with Google AdSense, any ad network, or custom HTML.
═══════════════════════════════════════════════════════════════ */

/* ── Base ad container ───────────────────────────────────────── */
.f2n-ad {
  text-align: center;
  clear: both;
}

/* "Advertisement" label — small, muted, above every ad */
.f2n-ad::before {
  content: 'Advertisement';
  display: block;
  font-family: var(--font-ui, sans-serif);
  font-size: var(--f2n-font-xs);
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted, #9ca3af);
  margin-bottom: 6px;
  text-align: center;
}

.f2n-ad__inner {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Header ad ───────────────────────────────────────────────── */
/* Sits between the main nav and breaking ticker.
   728×90 leaderboard on desktop → responsive on mobile.        */
.f2n-ad--header {
  background: var(--bg, #f8f9fa);
  border-bottom: 1px solid var(--line, #e5e7eb);
  padding: 10px 24px;
}

.f2n-ad--header .f2n-ad__inner {
  max-width: var(--container, 1240px);
  margin: 0 auto;
  padding: 0 20px;
  min-height: 50px;   /* prevent layout shift while ad loads */
}

/* AdSense ins tag — block display */
.f2n-ad--header ins.adsbygoogle {
  display: block;
  margin: 0 auto;
}

/* ── In-article ad ───────────────────────────────────────────── */
/* Injected after paragraph N inside single post content.       */
.f2n-ad--article {
  margin: 28px auto;
  max-width: 100%;
  overflow: hidden;
}

.f2n-ad--article .f2n-ad__inner {
  min-height: 90px;   /* prevent collapse */
}

.f2n-ad--article ins.adsbygoogle {
  display: block;
  margin: 0 auto;
}

/* ── Sidebar ad ──────────────────────────────────────────────── */
/* Shown at top of every sidebar (index, archive, single etc).  */
.f2n-ad--sidebar {
  margin-bottom: 24px;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 8px;
  padding: 10px;
  background: var(--white, #fff);
}

.f2n-ad--sidebar .f2n-ad__inner {
  min-height: 250px;  /* 300×250 rectangle typical size */
  flex-direction: column;
}

.f2n-ad--sidebar ins.adsbygoogle {
  display: block;
  margin: 0 auto;
}

/* ── Footer ad ───────────────────────────────────────────────── */
/* Full-width banner above the footer section.                  */
.f2n-ad--footer {
  background: var(--bg, #f8f9fa);
  border-top: 1px solid var(--line, #e5e7eb);
  border-bottom: 1px solid var(--line, #e5e7eb);
  padding: 12px 0;
}

.f2n-ad--footer .f2n-ad__inner {
  min-height: 50px;
}

.f2n-ad--footer ins.adsbygoogle {
  display: block;
  margin: 0 auto;
}

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 768px) {
  .f2n-ad--header { padding: 8px 0; }
  .f2n-ad--header .f2n-ad__inner { min-height: 50px; }
  .f2n-ad--sidebar .f2n-ad__inner { min-height: 100px; }
  .f2n-ad--article { margin: 20px auto; }
  .f2n-ad--footer { padding: 8px 0; }
}

/* ── Hide ads for print ───────────────────────────────────────── */
@media print {
  .f2n-ad { display: none !important; }
}

/* ── Dummy / placeholder ads (testing only) ──────────────────
   Add class f2n-ad--dummy to any .f2n-ad div to show a
   coloured placeholder instead of real ad code.
   Remove in production.
─────────────────────────────────────────────────────────────── */
.f2n-ad--dummy .f2n-ad__inner {
  background: repeating-linear-gradient(
    -45deg,
    #f0f0f0,
    #f0f0f0 10px,
    #e8e8e8 10px,
    #e8e8e8 20px
  );
  border: 2px dashed #bbb;
  border-radius: 6px;
  color: #888;
  font-family: var(--font-ui, sans-serif);
  font-size: var(--f2n-font-xs);
  font-weight: 600;
  letter-spacing: .04em;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}
.f2n-ad--dummy.f2n-ad--header .f2n-ad__inner    { height: 90px;  min-width: 728px; max-width: 100%; }
.f2n-ad--dummy.f2n-ad--article .f2n-ad__inner   { height: 90px;  width: 100%; }
.f2n-ad--dummy.f2n-ad--sidebar .f2n-ad__inner   { height: 250px; width: 300px; max-width: 100%; }
.f2n-ad--dummy.f2n-ad--footer .f2n-ad__inner    { height: 90px;  min-width: 728px; max-width: 100%; }
.f2n-ad--dummy .f2n-ad__dummy-size {
  font-size: var(--f2n-font-xs);
  opacity: .6;
  font-weight: 400;
}
@media (max-width: 768px) {
  .f2n-ad--dummy.f2n-ad--header .f2n-ad__inner,
  .f2n-ad--dummy.f2n-ad--footer .f2n-ad__inner { min-width: unset; height: 60px; }
}