/* =========================================================
   SPORTS STRIKE — WordPress core blocks inside the design system
   ========================================================= */

/* spacing reset: our blocks carry their own rhythm */
.ss body{ margin:0; background:var(--bg); color:var(--text); }
.ss .wp-site-blocks{ padding:0; }
.ss .wp-site-blocks > * + *{ margin-block-start:0; }
.ss .is-layout-flow > * + *, .ss .is-layout-constrained > * + *{ margin-block-start:var(--wp--style--block-gap, 24px); }
.ss main.wp-block-group > * + *{ margin-block-start:0; }
/* Archive and page headers: s5 between breadcrumb and title, s6 under the H1.
   Split templates stay flush so the sidebar lines up with the article. */
.ss :is(main, .wp-block-group).wrap:not(.split):not(.hdr-in) > * + *{ margin-block-start:var(--s5); }
.ss :is(main, .wp-block-group).wrap:not(.split):not(.hdr-in) > :is(h1, .wp-block-post-title, .wp-block-heading, .wp-block-query-title) + *{ margin-block-start:var(--s6); }
.ss .ss-surface{ background:var(--surface); }
.ss .wp-block-group.side{ min-width:0; }
.ss .main.stack, .ss .side.stack{ align-items:stretch; }
.ss .main.stack > *, .ss .side.stack > *{ width:100%; margin:0; }

/* header + core navigation */
.ss .hdr-in{ gap:20px; align-items:center; }
.ss .hdr-in > *{ align-self:center; margin-block:0; }
.ss .hdr .wp-block-navigation{ flex:1; min-width:0; align-items:center; }
.ss .hdr .wp-block-navigation .wp-block-navigation-item__content{ display:flex; align-items:center; min-height:44px; padding:0 12px; font:700 14px/1 var(--f-display); text-transform:uppercase; letter-spacing:.07em; color:var(--muted); white-space:nowrap; }
.ss .hdr .wp-block-navigation .wp-block-navigation-item__content:hover,
.ss .hdr .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content{ color:var(--text); }
.ss .hdr .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content{ box-shadow:inset 0 -3px 0 var(--accent); }
.ss .hdr .wp-block-navigation__container{ gap:2px; }
.ss .hdr .wp-block-navigation-submenu{ display:flex; align-items:center; gap:0; }
.ss .hdr .wp-block-navigation-submenu > .wp-block-navigation-item__content{ padding-right:4px; }
.ss .hdr .wp-block-navigation-submenu > .wp-block-navigation__submenu-icon{ margin-left:0; margin-right:14px; width:14px; height:14px; color:var(--muted); }
/* Desktop dropdown is a white panel. Top-level hover uses --text, which is near-white
   and would wipe the label out, so submenu colours are set on their own. */
.ss .hdr .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container{
  background:#fff; color:#10120E; border:1px solid #10120E; min-width:200px; padding:6px 0;
  box-shadow:0 12px 28px rgba(0,0,0,.28);
}
.ss .hdr .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item{ width:100%; }
.ss .hdr .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item__content{
  width:100%; justify-content:center; font:800 15px/1 var(--f-display); letter-spacing:.06em; text-transform:uppercase;
  color:#10120E; background:transparent; min-height:40px; padding:0 18px; box-shadow:none;
}
.ss .hdr .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.ss .hdr .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible,
.ss .hdr .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .current-menu-item > .wp-block-navigation-item__content{
  color:#10120E; background:color-mix(in srgb, var(--accent) 34%, #fff); box-shadow:inset 3px 0 0 var(--accent);
}
.ss .wp-block-navigation__responsive-container.is-menu-open{ background:var(--bg) !important; color:var(--text) !important; padding:24px var(--margin); }
.ss .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content{ font:900 32px/1.1 var(--f-display); text-transform:uppercase; color:var(--text); padding:10px 0; }
.ss .wp-block-navigation__responsive-container-open, .ss .wp-block-navigation__responsive-container-close{ width:44px; height:44px; display:inline-grid; place-items:center; color:var(--text); }
.ss .hdr .wp-block-navigation__responsive-container-open{ display:none; }
@media (max-width:1060px){
  .ss .hdr .wp-block-navigation{ flex:0 0 auto; order:3; }
  .ss .hdr .wp-block-navigation__responsive-container:not(.is-menu-open){ display:none; }
  .ss .hdr .wp-block-navigation__responsive-container-open{ display:inline-grid; }
  .ss .hdr .wp-block-ss-header-tools{ margin-left:auto; }
}
@media (max-width:480px){
  .ss .hdr-in{ gap:6px; }
  .ss .hdr .wm-line{ height:12px !important; }
  .ss .hdr .bolt{ height:28px; }
  .ss .spoil-tg{ padding:0 10px; }
}
/* The wordmark is the only piece that can give up width. Below 360px the
   burger otherwise sits past the viewport and the page scrolls sideways. */
@media (max-width:360px){
  .ss .hdr .brand{ flex:1 1 auto; min-width:0; }
  .ss .hdr .brand-mark{ flex:none; }
  .ss .hdr .wm-line{ flex:1 1 0; min-width:0; width:auto; max-width:100%; }
  .ss .hdr .wp-block-ss-header-tools{ flex:none; }
}

/* long-form text */
.ss .prose{ font-size:18px; line-height:1.65; max-width:720px; }
.ss .prose:empty{ display:none; }
.ss .prose > *{ margin-block:0 1.1em; }
.ss .prose h2{ font:800 clamp(28px,3vw,38px)/1 var(--f-display); text-transform:uppercase; margin-top:1.6em; }
.ss .prose h3{ font:800 clamp(22px,2.2vw,28px)/1.05 var(--f-display); text-transform:uppercase; margin-top:1.4em; }
.ss .prose a{ color:var(--accent-ink); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
.ss .prose blockquote{ margin-inline:0; padding-left:20px; border-left:4px solid var(--accent); font:700 22px/1.35 var(--f-body); }
.ss .prose .wp-block-embed-twitter{ max-width:100%; min-width:0; }
.ss .prose blockquote.twitter-tweet{ max-width:100%; overflow-wrap:anywhere; }
.ss .prose figure{ margin-inline:0; }
.ss .prose figcaption{ font-size:14px; color:var(--muted); }
.ss .prose ul, .ss .prose ol{ padding-left:1.25em; }
.ss .prose li{ margin:0.35em 0; }
.ss .prose h2, .ss .prose h3{ color:var(--text); letter-spacing:.005em; }
.ss .prose a:hover{ color:var(--accent); }
.ss .photo-credits{ list-style:none; padding-left:0; }
.ss .photo-credits li{ display:flex; gap:12px; align-items:flex-start; margin:0 0 16px; }
.ss .photo-credits-thumb{ flex:0 0 64px; width:64px; height:64px; background:var(--ink-2, #1c1f18); }
.ss .photo-credits-img{ width:64px; height:64px; object-fit:cover; display:block; }
.ss .photo-credits-name{ font-weight:700; }
.ss .photo-credits-uses{ display:block; margin-top:4px; }
.ss .photo-credits-uses a{ margin-right:10px; }
.ss .prose table{ width:100%; border-collapse:collapse; font-size:15px; }
.ss .prose th, .ss .prose td{ padding:10px 12px; border-bottom:1px solid var(--hair); text-align:left; }
.ss .prose .wp-block-embed, .ss .prose iframe{ max-width:100%; }

/* query loop cards (news archives, search, author) */
.ss .ss-query .wp-block-post-template{ gap:var(--gutter); }
.ss .ss-query .card{ gap:12px; }
.ss .ss-query .wp-block-post-featured-image{ margin:0; background:var(--raised); }
.ss .ss-query .wp-block-post-featured-image img{ width:100%; height:100%; object-fit:cover; }
.ss .ss-query .wp-block-post-title{ font:700 clamp(18px,1.5vw,22px)/1.22 var(--f-display); text-transform:none; margin:0; }
.ss .ss-query .wp-block-post-title a:hover{ color:var(--accent-ink); }
.ss .wp-block-post-terms.kicker a{ color:var(--accent-ink); }
.ss .wp-block-post-terms.kicker .wp-block-post-terms__separator{ color:var(--muted); }
.ss .wp-block-query-pagination{ margin-top:40px; gap:8px; font-weight:700; }
.ss .wp-block-query-pagination a, .ss .wp-block-query-pagination .current{ display:inline-grid; place-items:center; min-width:44px; min-height:44px; padding:0 12px; border:1px solid var(--border); }
.ss .wp-block-query-pagination .current{ background:var(--accent); color:var(--on-accent); border-color:var(--accent); }
.ss .ss-tags a{ display:inline-flex; align-items:center; min-height:32px; padding:0 12px; border:1px solid var(--border); font:700 13px/1 var(--f-body); }
.ss .ss-tags .wp-block-post-terms__separator{ display:none; }
.ss .ss-tags{ display:flex; flex-wrap:wrap; gap:8px; }

/* search block */
.ss .ss-search .wp-block-search__inside-wrapper{ gap:8px; border:0; padding:0; }
.ss .ss-search .wp-block-search__input{ min-height:52px; padding:0 16px; background:var(--surface); color:var(--text); border:1px solid var(--border); border-radius:2px; font-size:17px; }
.ss .ss-search .wp-block-search__button{ min-height:52px; padding:0 22px; margin:0; background:var(--accent); color:var(--on-accent); border:0; font:800 15px/1 var(--f-display); text-transform:uppercase; letter-spacing:.06em; }

/* headings from core blocks keep the display style */
.ss .wp-block-post-title.disp, .ss .wp-block-query-title.disp, .ss .wp-block-heading.disp{ font-size:clamp(52px,7.4vw,112px); line-height:.88; }

/* toast */
.ss-toast{ position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:100; background:var(--text); color:var(--bg); padding:12px 18px; font:700 14px/1.2 var(--f-body); border-radius:2px; box-shadow:0 12px 32px rgba(0,0,0,.4); }

/* countdown glitch off (Sports Strike → Fan features) */
html.no-glitch .cd .cd-n, html.no-glitch .cd .cd-n::before, html.no-glitch .cd .cd-n::after{ animation:none !important; }

/* video facade button + iframes */
.ss .ph iframe, .ss .ph video{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.ss .ph > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ss .card .ph img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* images inside .fav */
.ss img.fav{ background:none; }

/* skip link */
.ss .skip-link:focus{ background:var(--accent); color:var(--on-accent); padding:12px 16px; z-index:1000; }

/* admin bar offset for sticky header */
.admin-bar .ss .hdr{ top:32px; }
@media (max-width:782px){ .admin-bar .ss .hdr{ top:0; } }

/* hidden attribute always wins over component display rules */
.ss [hidden]{ display:none !important; }
.ss .wtw-type{ width:auto; min-width:46px; padding:0 6px; }