/*
Theme Name: Emberwire
Author: Rune Ashworth
Description: Game reviews magazine theme. Trending strip, colour-bar navigation and an asymmetric mosaic front page. Built for ignitionent.com.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: voltmark
Tags: blog, magazine, news, two-columns, custom-logo, featured-images
*/

/* ==========================================================================
   Design tokens — ember red + warm highlight, taken from the Ignition Ent mark
   ==========================================================================
   The flame disc is #DC2626 with a #FDBA74 highlight, so the nav bar and
   accents match the logo rather than fighting it. Variable names stay as this
   theme family uses them (--navy simply means "the primary"), which keeps
   every shared rule working without a rename. */
:root{
  --navy:#DC2626;
  --navy-deep:#991B1B;
  --gold:#FDBA74;
  --gold-deep:#F59E0B;
  --ink:#171214;
  --muted:#6f6a6d;
  --bg:#f7f4f4;
  --surface:#ffffff;
  --line:#e8e0e0;
  --footer:#1a1113;

  --f-display:'Barlow Condensed','Arial Narrow',Impact,sans-serif;
  --f-body:'Rubik',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;

  --maxw:1280px;
  --gutter:22px;
  --radius:3px;
}

*,*::before,*::after{box-sizing:border-box}

body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--f-body);font-size:16px;line-height:1.62;
  -webkit-font-smoothing:antialiased;
}

/* Sentence case, unlike the rest of this theme family. Game-review headlines
   run long ("What Makes Herospin Casino a Top Contender Today?") and set in
   all caps they turn into a wall. */
h1,h2,h3,h4{
  font-family:var(--f-display);font-weight:600;line-height:1.14;
  margin:0 0 .45em;letter-spacing:.01em;
}
h1{font-size:clamp(1.9rem,4vw,3rem)}
h2{font-size:clamp(1.4rem,2.6vw,2.05rem)}
h3{font-size:1.16rem}

a{color:var(--navy);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto;display:block}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:8px;top:8px;background:#fff;padding:10px 16px;z-index:999;border:2px solid var(--navy)}

/* ==========================================================================
   Trending strip — the row of small thumbs pinned above everything.
   This is Voltmark's loudest signature and the thing a card grid never has.
   ========================================================================== */
.trending-strip{background:var(--ink);padding:9px 0;overflow:hidden}
.trending-inner{display:flex;align-items:center;gap:14px}
.trending-label{
  flex:0 0 auto;background:var(--gold);color:var(--ink);
  font-family:var(--f-display);font-size:.72rem;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;padding:6px 12px;
}
.trending-items{display:flex;gap:16px;overflow-x:auto;scrollbar-width:none}
.trending-items::-webkit-scrollbar{display:none}
.trending-item{flex:0 0 auto;display:flex;align-items:center;gap:9px;max-width:290px}
.trending-item img{width:44px;height:34px;object-fit:cover;flex:0 0 auto}
.trending-item a{
  color:rgba(255,255,255,.9);font-size:.79rem;font-weight:500;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.trending-item a:hover{color:var(--gold);text-decoration:none}

/* ==========================================================================
   Masthead + colour nav bar
   ========================================================================== */
.site-header{background:var(--surface)}
.masthead{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 0}

.site-brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.site-brand img{max-height:58px;width:auto}
.brand-text .name{
  font-family:var(--f-display);font-size:1.85rem;font-weight:600;
  color:var(--navy);text-transform:uppercase;display:block;line-height:1;
}
.brand-text .tagline{font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}

.header-search form{display:flex;border:2px solid var(--line)}
.header-search input[type=search]{border:0;padding:9px 13px;font:inherit;font-size:.88rem;outline:0;min-width:180px}
.header-search button{border:0;background:var(--navy);color:#fff;padding:0 15px;cursor:pointer;font-family:var(--f-display);text-transform:uppercase;font-size:.78rem;letter-spacing:.08em}
.header-search button:hover{background:var(--navy-deep)}

.nav-bar{background:var(--navy)}
.nav-bar-inner{display:flex;align-items:center;justify-content:space-between;gap:16px}
.nav-toggle{display:none;background:none;border:0;color:#fff;padding:13px 0;font-size:1.15rem;cursor:pointer}

.main-nav ul{list-style:none;display:flex;margin:0;padding:0}
.main-nav a{
  display:block;color:#fff;font-family:var(--f-display);font-size:.86rem;
  font-weight:500;letter-spacing:.09em;text-transform:uppercase;
  padding:14px 18px;transition:background .18s;
}
.main-nav a:hover,
.main-nav .current-menu-item > a{background:var(--navy-deep);color:var(--gold);text-decoration:none}

/* ==========================================================================
   Mosaic — one tall lead tile plus a stack of smaller ones.
   Deliberately asymmetric so the page has a focal point, unlike an even grid.
   ========================================================================== */
.mosaic{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:repeat(2,minmax(190px,1fr));gap:12px;margin:26px 0}
.tile{position:relative;overflow:hidden;background:var(--ink);display:block}
.tile:first-child{grid-row:span 2}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.tile:hover img{transform:scale(1.05)}
.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(6,9,16,.88))}
.tile-body{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:20px}
.tile-body .badge{
  display:inline-block;background:var(--gold);color:var(--ink);
  font-family:var(--f-display);font-size:.66rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;padding:4px 9px;margin-bottom:9px;
}
.tile-body h3{margin:0;font-size:1.02rem}
.tile:first-child .tile-body h3{font-size:clamp(1.3rem,2.4vw,1.95rem)}
.tile-body h3 a{color:#fff}
.tile-body h3 a:hover{color:var(--gold);text-decoration:none}
.tile-body .meta{color:rgba(255,255,255,.72);font-size:.76rem;margin-top:7px}

/* ==========================================================================
   Section headers — thick rule + offset label
   ========================================================================== */
.section{padding:34px 0}
.section-head{display:flex;align-items:center;gap:14px;margin-bottom:22px;border-bottom:3px solid var(--ink);padding-bottom:0}
.section-head h2{
  margin:0;background:var(--ink);color:#fff;
  font-size:.92rem;letter-spacing:.13em;padding:9px 16px;
}
.section-head .rule{flex:1}
.section-head .more{
  font-family:var(--f-display);font-size:.76rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--navy);padding-bottom:8px;
}

/* ==========================================================================
   Layout + list cards (horizontal, not a uniform square grid)
   ========================================================================== */
.content-layout{display:grid;grid-template-columns:minmax(0,1fr) 316px;gap:36px;padding:10px 0 40px}

.list-item{display:grid;grid-template-columns:220px 1fr;gap:18px;background:var(--surface);border:1px solid var(--line);padding:14px;margin-bottom:16px}
.list-item .thumb{overflow:hidden;background:var(--bg);aspect-ratio:16/10}
.list-item .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.list-item:hover .thumb img{transform:scale(1.04)}
.list-item .cat{
  color:var(--navy);font-family:var(--f-display);font-size:.7rem;
  font-weight:600;letter-spacing:.12em;text-transform:uppercase;
}
.list-item h3{margin:7px 0 8px;font-size:1.2rem}
.list-item h3 a{color:var(--ink)}
.list-item h3 a:hover{color:var(--navy);text-decoration:none}
.list-item .excerpt{color:var(--muted);font-size:.9rem;margin-bottom:9px}
.list-item .meta{font-size:.78rem;color:var(--muted)}

/* Ranked hot-list — numbered, no thumbnails. Another shape a card grid lacks. */
.hot-list{counter-reset:hot;list-style:none;margin:0;padding:0}
.hot-list li{counter-increment:hot;display:flex;gap:14px;align-items:flex-start;padding:13px 0;border-bottom:1px solid var(--line)}
.hot-list li::before{
  content:counter(hot);flex:0 0 auto;
  font-family:var(--f-display);font-size:1.5rem;font-weight:600;
  color:var(--gold);line-height:1;min-width:30px;
}
.hot-list a{color:var(--ink);font-size:.93rem;font-weight:500;line-height:1.4}
.hot-list a:hover{color:var(--navy)}
.hot-list .meta{display:block;font-size:.75rem;color:var(--muted);margin-top:3px}

/* ==========================================================================
   Entry
   ========================================================================== */
.entry-header{margin-bottom:24px}
.entry-header .cat{color:var(--navy);font-family:var(--f-display);font-size:.74rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase}
.entry-header h1{margin:10px 0 12px}
.entry-meta{color:var(--muted);font-size:.85rem}
.entry-thumb{margin-bottom:26px}
.entry-content{background:var(--surface);border:1px solid var(--line);padding:30px;font-size:1.02rem}
.entry-content p{margin:0 0 1.45em}
.entry-content h2,.entry-content h3{margin-top:1.7em}
.entry-content blockquote{margin:1.8em 0;padding:14px 22px;background:var(--bg);border-left:4px solid var(--gold);font-size:1.08rem}
.entry-content ul,.entry-content ol{margin:0 0 1.45em;padding-left:1.35em}
.entry-content a{text-decoration:underline}

/* Sidebar */
.sidebar .widget{background:var(--surface);border:1px solid var(--line);padding:18px;margin-bottom:20px}
.sidebar .widget-title{
  font-family:var(--f-display);font-size:.82rem;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:#fff;background:var(--navy);
  margin:-18px -18px 15px;padding:11px 16px;
}
.sidebar ul{list-style:none;margin:0;padding:0}
.sidebar li{padding:8px 0;border-bottom:1px solid var(--line)}
.sidebar li:last-child{border-bottom:0}
.sidebar li a{color:var(--ink);font-size:.91rem}
.sidebar li a:hover{color:var(--navy)}

/* Pagination */
.pagination{display:flex;gap:6px;justify-content:center;padding:26px 0;flex-wrap:wrap}
.pagination .page-numbers{
  padding:9px 15px;background:var(--surface);border:1px solid var(--line);
  color:var(--ink);font-family:var(--f-display);font-size:.86rem;letter-spacing:.06em;
}
.pagination .page-numbers:hover{border-color:var(--navy);text-decoration:none}
.pagination .current{background:var(--navy);border-color:var(--navy);color:#fff}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{background:var(--footer);color:rgba(255,255,255,.7);padding:42px 0 22px;margin-top:40px}
.footer-top{display:flex;justify-content:space-between;align-items:center;gap:22px;flex-wrap:wrap;padding-bottom:22px;border-bottom:1px solid rgba(255,255,255,.12)}
.site-footer .brand-text .name{color:#fff}
.site-footer a{color:rgba(255,255,255,.8)}
.site-footer a:hover{color:var(--gold)}
.footer-nav ul{list-style:none;display:flex;gap:22px;margin:0;padding:0;flex-wrap:wrap}
.footer-bottom{padding-top:20px;font-size:.83rem;text-align:center}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media(max-width:1000px){
  .content-layout{grid-template-columns:1fr;gap:30px}
}
@media(max-width:820px){
  .mosaic{grid-template-columns:1fr;grid-template-rows:none}
  .mosaic .tile{min-height:220px}
  .mosaic .tile:first-child{grid-row:auto;min-height:300px}
}
@media(max-width:700px){
  .nav-toggle{display:block}
  .main-nav{display:none;width:100%}
  .main-nav.open{display:block}
  .nav-bar-inner{flex-wrap:wrap}
  .main-nav ul{flex-direction:column;width:100%}
  .main-nav a{padding:12px 0;border-top:1px solid rgba(255,255,255,.14)}
  .masthead{flex-direction:column;align-items:flex-start;gap:14px}
  .list-item{grid-template-columns:1fr}
  .footer-top{flex-direction:column;text-align:center}
}

/* PBN-HDRVAR-START */
/* Header arrangement — see the Customizer, "Header arrangement" */
body.hdrv-2 .site-header{display:flex;flex-direction:column}
body.hdrv-2 .nav-bar{order:-1}

body.hdrv-3 .masthead{flex-direction:column;align-items:center;gap:14px;padding:20px 0}
body.hdrv-3 .header-search form{min-width:min(420px,90vw)}
body.hdrv-3 .header-search input[type=search]{flex:1 1 auto}

body.hdrv-4 .masthead{flex-direction:row-reverse}

body.hdrv-5 .masthead{flex-direction:column;align-items:center;gap:14px;padding:20px 0}
body.hdrv-5 .nav-bar-inner{justify-content:center}
body.hdrv-5 .main-nav ul{justify-content:center}

body.hdrv-6 .nav-bar-inner{justify-content:flex-end}

body.hdrv-7 .trending-strip{background:var(--bg);border-bottom:1px solid var(--line)}
body.hdrv-7 .trending-item a{color:var(--ink)}
body.hdrv-7 .trending-item a:hover{color:var(--navy)}
body.hdrv-7 .masthead{padding:14px 0}
body.hdrv-7 .site-brand img{max-height:46px}
body.hdrv-7 .nav-bar-inner{justify-content:flex-start}

body.hdrv-8 .site-header{display:flex;flex-direction:column}
body.hdrv-8 .nav-bar{order:-1}
body.hdrv-8 .masthead{flex-direction:column;align-items:stretch;gap:12px;padding:18px 0}
body.hdrv-8 .site-brand{align-self:flex-start}
body.hdrv-8 .header-search form{width:100%}
body.hdrv-8 .header-search input[type=search]{flex:1 1 auto}

body.hdrv-9 .trending-strip{background:var(--bg);border-bottom:1px solid var(--line)}
body.hdrv-9 .trending-item a{color:var(--ink)}
body.hdrv-9 .trending-item a:hover{color:var(--navy)}
body.hdrv-9 .masthead{flex-direction:column;align-items:center;gap:16px;padding:26px 0}
body.hdrv-9 .site-brand img{max-height:74px}
body.hdrv-9 .nav-bar-inner{justify-content:center}
body.hdrv-9 .main-nav ul{justify-content:center}
body.hdrv-9 .main-nav a{letter-spacing:.14em}

/* Only this site uses arrangement 10, and its whole point is showing the mark,
   so the brand gets real size here rather than the family's compact default. */
body.hdrv-10 .masthead{flex-direction:row-reverse;padding:18px 0;align-items:center}
body.hdrv-10 .site-brand{flex:0 0 auto}
body.hdrv-10 .site-brand img{max-height:74px}
body.hdrv-10 .header-search{flex:0 1 380px}
body.hdrv-10 .header-search form{width:100%}
body.hdrv-10 .header-search input[type=search]{flex:1 1 auto;min-width:0}
body.hdrv-10 .nav-bar-inner{justify-content:flex-end}
@media(max-width:700px){
  body.hdrv-10 .site-brand img{max-height:52px}
  body.hdrv-10 .header-search{flex:1 1 auto}
}

/* Same flex-column caveat as the grid family: .masthead is a .wrap, so once
   .site-header becomes a flex column its auto margins collapse it. */
body.hdrv-2 .site-header > .wrap,
body.hdrv-8 .site-header > .wrap{width:100%}

@media(max-width:700px){
  body[class*="hdrv-"] .site-header{display:block}
  body[class*="hdrv-"] .masthead{flex-direction:column;align-items:flex-start;gap:14px;padding:16px 0}
  body[class*="hdrv-"] .site-brand{align-self:flex-start}
  body[class*="hdrv-"] .site-brand img{max-height:52px}
  body[class*="hdrv-"] .header-search form{width:100%;min-width:0}
  body[class*="hdrv-"] .nav-bar-inner{justify-content:flex-start}
  body[class*="hdrv-"] .main-nav ul{justify-content:flex-start;flex-direction:column}
  body[class*="hdrv-"] .main-nav a{letter-spacing:normal}
}
/* PBN-HDRVAR-END */

/* PBN-LAYOUT-START */
/* --- Sidebar position ----------------------------------------------------
   sb-left puts the narrow track first. The columns are then pinned explicitly,
   because only index.php has the sidebar moved ahead of the article in markup
   -- single.php and page.php still emit it last. Relying on source order put
   the article in the 300px track and the sidebar in the wide one on every
   single post. Pinning works whichever order the template uses.

   sb-below collapses the grid to one column, which drops the sidebar
   underneath, and spreads its widgets across a band so it does not become a
   long stack. */
body.sb-left .content-layout,
body.sb-left .layout{grid-template-columns:300px minmax(0,1fr)}
body.sb-left .sidebar{grid-column:1;grid-row:1}
body.sb-left .main-column{grid-column:2;grid-row:1}

body.sb-below .content-layout,
body.sb-below .layout{grid-template-columns:minmax(0,1fr)}
/* The sidebar is moved out of the grid and into its own band after it, so it
   needs the wrap's own max-width back when the layout div was the wrap. */
.sidebar-band{padding-bottom:10px}
body.sb-below .sidebar{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;
  align-items:start;margin-top:10px;padding-top:30px;border-top:1px solid var(--line);
}
body.sb-below .sidebar .widget{margin-bottom:0}

/* --- Footer arrangements ------------------------------------------------- */
.footer-stack{text-align:center;padding-bottom:18px;border-bottom:1px solid rgba(255,255,255,.12)}
.footer-stack .brand-text{display:block;margin-bottom:14px}
.footer-stack .footer-nav ul{justify-content:center}

.footer-cols{
  display:grid;gap:30px;padding-bottom:24px;
  border-bottom:1px solid rgba(255,255,255,.12);align-items:start;
}
.footer-cols.c2{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
.footer-cols.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.footer-cols.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.footer-cols .footer-nav ul{flex-direction:column;gap:7px;align-items:flex-start}

.footer-rail{padding:16px 0;border-bottom:1px solid rgba(255,255,255,.12)}
.footer-rail .footer-nav ul{justify-content:center}
.footer-rail .footer-cats ul{display:flex;flex-wrap:wrap;gap:8px 18px}
.footer-rail .footer-cats .footer-head{display:none}

.footer-head{
  font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.55);margin:0 0 10px;font-weight:600;
}
.footer-cats ul,.footer-recent ul{list-style:none;margin:0;padding:0}
.footer-cats li,.footer-recent li{padding:4px 0}
.footer-cats a,.footer-recent a{color:rgba(255,255,255,.78);font-size:.88rem}
.footer-cats a:hover,.footer-recent a:hover{color:#fff;text-decoration:none}

@media(max-width:860px){
  body.sb-left .content-layout,
  body.sb-left .layout,
  body.sb-below .content-layout,
  body.sb-below .layout{grid-template-columns:minmax(0,1fr)}
  body.sb-left .sidebar,
  body.sb-left .main-column{grid-column:auto;grid-row:auto}
  body.sb-below .sidebar{grid-template-columns:minmax(0,1fr);gap:0}
  body.sb-below .sidebar .widget{margin-bottom:22px}
  .footer-cols.c2,.footer-cols.c3,.footer-cols.c4{grid-template-columns:minmax(0,1fr);gap:22px}
}
/* PBN-LAYOUT-END */

/* PBN-CARD-START */
/* Card markup varies per site. These keep the reordered versions looking
   intentional: .thumb may now be a <figure>, and variant 2 puts the image
   after the text, which flips which grid/flex slot it lands in. */
.list-item figure.thumb{margin:0}
body.cardv-2 .list-item{flex-direction:column-reverse}
body.cardv-2 .list-item .body{padding-bottom:0}
/* PBN-CARD-END */