/* =====================================================================
   Naija Sports — 02 layout: topbar, masthead, nav, header, footer
   ===================================================================== */

/* --------------------------------------------------------------- *
   1. Top bar
   --------------------------------------------------------------- */
.topbar {
  background: var(--ink); color: rgba(255,255,255,.78);
  font-size: .82rem; border-bottom: 1px solid rgba(255,255,255,.07);
}
[data-theme="dark"] .topbar { background: #0d141b; }
.topbar .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; min-height: 42px;
}
.topbar-left, .topbar-right { display: flex; align-items: center; gap: 10px; }
.topbar-date { font-family: var(--font); font-weight: 700; color: #fff; }
.tb-clock {
  font-family: var(--font); font-weight: 600; color: rgba(255,255,255,.78);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.topbar a { color: rgba(255,255,255,.78); }
.topbar a:hover { color: #fff; }
.tb-icon {
  width: 30px; height: 30px; display: grid; place-items: center;
  border-radius: 50%; transition: background .2s, color .2s;
}
.tb-icon:hover { background: rgba(255,255,255,.13); color: #fff; }
.tb-icon svg { width: 15px; height: 15px; fill: currentColor; }
.tb-sep { width: 1px; height: 18px; background: rgba(255,255,255,.16); margin: 0 4px; }
.tb-live {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font); font-weight: 700; color: #fff;
}
.tb-live::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--danger); animation: pulse 2s infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(227,107,107,.6); }
  70%  { box-shadow: 0 0 0 8px rgba(227,107,107,0); }
  100% { box-shadow: 0 0 0 0 rgba(227,107,107,0); }
}

/* --------------------------------------------------------------- *
   2. Masthead
   --------------------------------------------------------------- */
.masthead { background: var(--surface); border-bottom: 1px solid var(--line); }
.masthead .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding-block: 20px;
}
.brand { display: inline-flex; align-items: center; gap: 13px; }
.brand-mark {
  width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
  box-shadow: 0 8px 20px rgba(43,181,142,.32); flex-shrink: 0;
}
.brand-mark svg { width: 25px; height: 25px; fill: #fff; }
.brand-logo {
  display: block; height: 50px; width: auto; max-width: 270px;
  object-fit: contain;
}
.site-footer .brand-logo {
  height: 46px; max-width: 220px; background: #fff;
  padding: 5px 9px; border-radius: 12px;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.12; }
.brand-name {
  font-family: var(--font); font-weight: 700; font-size: 1.62rem;
  color: var(--ink); letter-spacing: -.025em;
}
.brand-tag { font-size: .73rem; color: var(--muted); font-family: var(--font); font-weight: 500; }
.masthead-actions { display: flex; align-items: center; gap: 12px; min-width: 0; }
.masthead-search { display: flex; align-items: center; gap: 12px; }

.searchbox { position: relative; min-width: 0; }
.searchbox input {
  width: 240px; font-family: var(--font); font-size: .9rem; font-weight: 500;
  padding: 10px 40px 10px 16px; border-radius: 999px; font-family: var(--font-body);
  border: 1px solid var(--line); background: var(--surface-2); color: var(--ink);
  transition: width .25s ease, border-color .2s, box-shadow .2s, background .2s;
}
.searchbox input::placeholder { color: var(--muted); }
.searchbox input:focus {
  width: 290px; outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft); background: var(--surface);
}
.searchbox button {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; border: 0; border-radius: 50%;
  background: transparent; color: var(--muted); cursor: pointer;
  display: grid; place-items: center;
}
.searchbox button:hover { color: var(--accent-dark); background: var(--accent-soft); }
.searchbox svg { width: 16px; height: 16px; fill: currentColor; }

/* The masthead runs out of room well before the page does, because the brand
   tagline and the 240px search field are both wide and neither wraps. Shed the
   widest non-essential piece at each step instead of letting the row overflow:
   tagline, then the search field (the top bar keeps a search icon at every
   width), then the button label. Subscribe stays reachable either as this
   button or as the newsletter form in the footer. */
@media (max-width: 1000px) {
  .searchbox { flex: 1 1 auto; }
  .searchbox input, .searchbox input:focus { width: 100%; }
  .brand-tag { display: none; }
}
@media (max-width: 760px) {
  .masthead .searchbox { display: none; }
}
@media (max-width: 460px) {
  .masthead .wrap { gap: 12px; padding-block: 14px; }
  .masthead-actions { gap: 8px; }
  .brand { gap: 10px; min-width: 0; }
  .brand-mark { width: 40px; height: 40px; border-radius: 13px; }
  .brand-mark svg { width: 21px; height: 21px; }
  .brand-logo { height: 40px; max-width: 190px; }
  .brand-name { font-size: 1.22rem; }
  .brand-text { min-width: 0; }
  .subscribe-label { display: none; }
  .subscribe-btn { padding: 7px 10px; }
}
/* Six 30px icons plus the date no longer fit. Search, dashboard and the theme
   toggle stay; the social links remain in the footer. */
@media (max-width: 430px) {
  .topbar-left { min-width: 0; }
  .topbar-date { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tb-clock { display: none; }
  .topbar .tb-sep, .topbar-right .tb-social { display: none; }
}

.ad-slot {
  background: var(--surface-2); border: 1px dashed var(--line);
  border-radius: var(--radius); color: var(--muted);
  font-family: var(--font); font-weight: 600; font-size: .76rem;
  letter-spacing: .08em; text-transform: uppercase;
  display: grid; place-items: center; text-align: center;
}
.ad-slot-728 { height: 92px; }
.ad-slot-300 { height: 260px; }
.ad-slot-inline { height: 120px; margin: 26px 0; }

/* Rendered ad units (see ad_slot() in includes/queries.php). */
.ad-unit img { display: block; max-width: 100%; height: auto; }
.ad-unit-header-top { display: flex; justify-content: center; padding: 10px 0 6px; }
.ad-unit-header { display: flex; justify-content: center; padding: 18px 0 4px; }
.ad-unit-footer { display: flex; justify-content: center; padding: 6px 0 0; }
.ad-unit-footer-bottom { display: flex; justify-content: center; padding: 10px 0 0; }
.ad-unit-in-article { margin: 26px 0; text-align: center; }
.ad-unit-in-article img { margin: 0 auto; }
.ad-unit-article-end { margin: 2px 0 26px; text-align: center; }
.ad-unit-article-end img { margin: 0 auto; }

/* --------------------------------------------------------------- *
   3. Primary navigation
   --------------------------------------------------------------- */
.mainnav {
  background: var(--surface); border-bottom: 1px solid var(--line);
  position: relative; z-index: 60;
}
.mainnav .wrap { display: flex; align-items: center; }
.nav-list {
  display: flex; align-items: center; gap: 2px;
  list-style: none; margin: 0; padding: 0; flex: 1; flex-wrap: wrap;
}
.nav-list > li { position: relative; }
.nav-list > li > a,
.nav-list > li > button {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font); font-weight: 600; font-size: .915rem;
  color: var(--ink); background: none; border: 0; cursor: pointer;
  padding: 15px 12px; white-space: nowrap;
}
.nav-list > li > a::after,
.nav-list > li > button::after {
  content: ''; position: absolute; left: 12px; right: 12px; bottom: 9px;
  height: 3px; background: var(--accent); border-radius: 3px;
  transform: scaleX(0); transform-origin: left; transition: transform .22s ease;
}
.nav-list > li:hover > a::after,
.nav-list > li:hover > button::after,
.nav-list > li.is-open > button::after,
.nav-list > li > a.active::after { transform: scaleX(1); }
.nav-list > li > a:hover,
.nav-list > li > button:hover,
.nav-list > li > a.active { color: var(--accent-dark); }
.caret { width: 9px; height: 9px; fill: currentColor; opacity: .5; transition: transform .2s; }
.nav-list > li.is-open > .has-sub .caret { transform: rotate(180deg); }

.submenu {
  position: absolute; top: 100%; left: 0; min-width: 236px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  padding: 8px; list-style: none; margin: 0;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.nav-list > li:hover > .submenu,
.nav-list > li:focus-within > .submenu,
.nav-list > li.is-open > .submenu { opacity: 1; visibility: visible; transform: translateY(0); }
/* set by Escape: hover must not spring the panel back open while the pointer
   is still parked on the button. Cleared on mouseleave. */
.nav-list > li[data-nav-dismissed]:hover > .submenu,
.nav-list > li[data-nav-dismissed]:focus-within > .submenu {
  opacity: 0; visibility: hidden; transform: translateY(8px);
}
.submenu a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 14px; border-radius: var(--radius-sm);
  font-family: var(--font); font-weight: 600; font-size: .89rem; color: var(--ink-2);
}
.submenu a:hover { background: var(--accent-soft); color: var(--accent-dark); }
.submenu a.active { background: var(--accent-soft); color: var(--accent-dark); }
.submenu .sub-count { font-size: .72rem; color: var(--muted); font-weight: 600; }
.submenu .divider { height: 1px; background: var(--line); margin: 6px 10px; }

/* Categories panel: one column, each category with its children indented
   beneath it. The list grows as categories are added, so the panel is
   capped and scrolls internally rather than running off the screen. */
.submenu-cats {
  min-width: 264px; max-width: 360px;
  max-height: min(72vh, 580px); overflow-y: auto; overscroll-behavior: contain;
}
.submenu-cats > li { margin: 0; }
.submenu-cats .cat-parent {
  display: block; padding: 10px 14px 5px;
  font-size: .8rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink);
}
.submenu-cats > li.is-active > .cat-parent { color: var(--accent-dark); }
.submenu .cat-children {
  list-style: none; margin: 0 0 6px 14px; padding: 0 0 0 10px;
  border-left: 2px solid var(--line);
}
.submenu .cat-children a { padding: 7px 12px; font-size: .875rem; }

.nav-cta { display: flex; align-items: center; gap: 8px; padding-left: 12px; }
.nav-toggle { display: none; }
.nav-backdrop {
  display: none; position: fixed; inset: 0;
  background: rgba(15,23,32,.5); z-index: 150; backdrop-filter: blur(2px);
}
.nav-backdrop.is-open { display: block; }

@media (max-width: 1100px) {
  .nav-toggle { display: inline-flex; }
  .nav-list {
    position: fixed; top: 0; right: 0; bottom: 0; width: 330px; max-width: 88vw;
    background: var(--surface); flex-direction: column; align-items: stretch;
    padding: 18px 14px; overflow-y: auto; box-shadow: var(--shadow-lg);
    transform: translateX(100%); transition: transform .28s ease; z-index: 200;
    flex-wrap: nowrap;
  }
  .nav-list.is-open { transform: translateX(0); }
  .nav-list > li > a,
  .nav-list > li > button {
    width: 100%; justify-content: space-between; padding: 13px 14px;
    border-radius: var(--radius-sm);
  }
  .nav-list > li > a::after, .nav-list > li > button::after { display: none; }
  .submenu {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: 0; border-left: 2px solid var(--line);
    border-radius: 0; margin: 0 0 0 12px; padding: 0 0 0 6px; display: none;
  }
  .nav-list > li.is-open > .submenu { display: block; }
  /* the drawer already scrolls end-to-end; a second scroll area inside it
     would trap the gesture on small screens */
  .submenu-cats { max-height: none; overflow: visible; max-width: none; }
  .nav-cta { display: none; }
  body.nav-open { overflow: hidden; }

  /* The drawer is a descendant of .mainnav, which is its own stacking
     context (z-index: 60). A descendant's z-index is resolved *inside*
     that context, so .nav-list's z-index: 200 never lifts it past the
     backdrop - the backdrop is a sibling of .mainnav at z-index 150, so
     150 beat the whole bar and the drawer rendered underneath it,
     swallowing every tap (and dimming it via the backdrop's blur).
     Lift the entire bar above the backdrop while the drawer is open.
     On mobile .mainnav has no in-flow content (the drawer is fixed and
     .nav-cta is hidden), so this paints nothing extra - just the drawer. */
  body.nav-open .mainnav { z-index: 200; }
}

/* --------------------------------------------------------------- *
   4. Page header (interior pages)
   --------------------------------------------------------------- */
.page-head {
  background: var(--surface); border-bottom: 1px solid var(--line);
  padding: 30px 0 26px;
}
.page-head h1 { margin: 0 0 6px; }
.page-head .page-sub { color: var(--muted); font-size: .95rem; margin: 0; }
.crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
  font-family: var(--font); font-size: .82rem; color: var(--muted);
  margin-bottom: 12px; list-style: none; padding: 0;
}
.crumbs a { color: var(--muted); font-weight: 600; }
.crumbs a:hover { color: var(--accent-dark); }
.crumbs li { display: flex; align-items: center; gap: 7px; }
.crumbs li + li::before { content: '/'; opacity: .5; }
.crumbs .sep { opacity: .5; }

/* --------------------------------------------------------------- *
   5. Footer
   --------------------------------------------------------------- */
.site-footer {
  background: var(--ink); color: rgba(255,255,255,.7);
  margin-top: 60px; padding: 52px 0 0; font-size: .92rem;
}
[data-theme="dark"] .site-footer { background: #0d141b; }
.footer-grid {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr;
  gap: 34px; padding-bottom: 40px;
}
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; gap: 26px; } }
.site-footer h4 {
  color: #fff; font-family: var(--font); font-size: .82rem;
  letter-spacing: .12em; text-transform: uppercase; margin: 0 0 16px; font-weight: 700;
}
.site-footer a { color: rgba(255,255,255,.7); }
.site-footer a:hover { color: #fff; }
.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links li { margin-bottom: 9px; }
.footer-about p { margin: 0 0 16px; max-width: 42ch; }
.footer-social { display: flex; gap: 9px; }
.footer-social a {
  width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%;
  background: rgba(255,255,255,.08); color: #fff; transition: background .2s, transform .2s;
}
.footer-social a:hover { background: var(--accent); color: #fff; transform: translateY(-2px); }
.footer-social svg { width: 16px; height: 16px; fill: currentColor; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.1); padding: 18px 0;
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; font-size: .84rem; color: rgba(255,255,255,.55);
}
.footer-bottom a { color: rgba(255,255,255,.75); }
.footer-bottom a:hover { color: #fff; }

/* back-to-top */
.to-top {
  position: fixed; right: 22px; bottom: 22px; z-index: 90;
  width: 46px; height: 46px; border-radius: 50%; border: 0;
  background: var(--accent); color: #fff; cursor: pointer;
  display: grid; place-items: center; box-shadow: 0 10px 26px rgba(43,181,142,.4);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity .25s, transform .25s, visibility .25s, background .2s;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: var(--accent-dark); }
.to-top svg { width: 18px; height: 18px; fill: currentColor; }

.main-content { padding: 34px 0 10px; }