/*
Theme Name: WebHero Collectibles
Theme URI: https://webherocollectibles.com/
Author: Jerrile
Description: Classic dark-navy and red theme for WebHero Collectibles, an Amazon affiliate site for superhero collectibles, toys and gifts. Matches the approved homepage mockup. Swap hero and category photos by dropping jpg files into /assets (see README).
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: webhero
*/

:root{
  --navy:#001232;
  --navy-2:#00183d;
  --navy-deep:#000c22;
  --ink:#0b1228;
  --muted:#5c6578;
  --red:#e1061a;
  --red-bar:#d40c16;
  --red-dark:#b10514;
  --yellow:#ffc400;
  --yellow-2:#f5b400;
  --yellow-edge:#c48a00;
  --line:#e8eaef;
  --bg:#ffffff;
  --card:#faf8f9;
  --max:1160px;
  --rad:16px;
  --font:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font);line-height:1.55;color:var(--ink);background:var(--bg)}
img{max-width:100%;height:auto;display:block}
a{color:var(--red-dark)}
a:hover{color:var(--red)}
:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 22px}
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal!important}
.screen-reader-text:focus{clip:auto;clip-path:none;height:auto;width:auto;background:#fff;color:#000;padding:8px 12px;z-index:100000;left:8px;top:8px}
svg.ic{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.15em}

/* —— Sitewide disclosure bar —— */
.wh-disc-bar{background:#000a1c;color:#c9d0e0;font-size:.78rem;line-height:1.4;text-align:center;padding:6px 16px;border-bottom:1px solid rgba(225,6,26,.35)}
.wh-disc-bar p{margin:0}
.wh-disc-bar a{color:#fff;text-decoration:underline;text-underline-offset:2px;font-weight:600}
.wh-disc-bar a:hover{color:var(--yellow)}

/* —— Header —— */
.site-header{background:var(--navy) url("assets/header-web.svg") no-repeat left top / 520px auto;color:#fff}
.hdr{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:16px 22px 12px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:#fff;min-width:0}
.brand-web,.brand img.custom-logo{width:58px;height:58px;color:var(--red);flex:none}
.brand-name{display:block;font-weight:900;font-style:italic;font-size:clamp(1.35rem,2.7vw,2.15rem);line-height:.95;letter-spacing:-.03em}
.brand-name .w{color:#fff}
.brand-name .r{color:var(--red)}
.brand-name .c{font-size:.62em;color:#fff;letter-spacing:-.02em;margin-left:.02em;vertical-align:.12em}
.tagline{display:block;font-style:normal;font-weight:500;font-size:.92rem;color:#c5cde0;margin-top:5px;letter-spacing:.01em}
.amz-btn{flex:none;background:#fff;color:#111;border-radius:999px;padding:8px 22px 9px;text-decoration:none;font-weight:700;line-height:1.05;text-align:center;box-shadow:0 3px 10px rgba(0,0,0,.35)}
.amz-btn span{display:block;font-size:.78rem;font-weight:700;color:#222}
.amz-btn b{display:block;font-size:1.42rem;font-weight:800;letter-spacing:-.03em;color:#111}
.amz-btn:hover{color:#111;transform:translateY(-1px);box-shadow:0 5px 14px rgba(0,0,0,.4)}

/* Nav — dark navy bar, Home is the only red pill */
.nav-bar{background:transparent}
.nav-in{display:flex;align-items:center;gap:8px;padding-bottom:10px}
.menu-toggle{display:none;background:none;border:0;color:#fff;font-size:1.55rem;padding:8px;cursor:pointer}
.main-nav{flex:1;min-width:0}
.main-nav .menu,.main-nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:2px}
.main-nav a{display:inline-flex;align-items:center;gap:6px;color:#fff;text-decoration:none;font-weight:700;font-size:.95rem;padding:9px 14px;border-radius:999px}
.main-nav a:hover{background:rgba(255,255,255,.08);color:#fff}
.main-nav .menu-item-home>a,
.main-nav li:first-child>a{background:var(--red);color:#fff;padding:8px 16px;box-shadow:0 2px 0 rgba(0,0,0,.25)}
.main-nav .menu-item-home>a:hover,
.main-nav li:first-child>a:hover{background:var(--red-dark);color:#fff}
.main-nav .current-menu-item:not(.menu-item-home):not(:first-child)>a{box-shadow:inset 0 -2px 0 #fff}
.main-nav .ic{width:1.05em;height:1.05em;stroke-width:2.2}
.nav-search{margin-left:auto;position:relative;flex:none}
.nav-search__btn{background:none;border:0;color:#fff;font-size:1.25rem;padding:8px;cursor:pointer}
.nav-search form{display:none;position:absolute;right:0;top:calc(100% + 4px);background:#fff;padding:8px;border-radius:10px;z-index:30;box-shadow:0 8px 24px rgba(0,0,0,.3)}
.nav-search.is-open form{display:block}
.nav-search input[type="search"]{padding:8px 10px;border:1px solid var(--line);border-radius:8px;width:220px;font:inherit}

/* —— Hero —— */
.hero{position:relative;color:#fff;background:#060d22 left center/cover no-repeat;overflow:hidden;min-height:460px}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,12,32,0) 0%,rgba(4,12,32,0) 42%,rgba(4,10,28,.45) 58%,rgba(3,8,22,.88) 78%,rgba(3,8,22,.92) 100%);pointer-events:none}
.hero-in{position:relative;z-index:1;min-height:460px;display:flex;align-items:center;justify-content:flex-end;padding:28px 0 36px}
.hero-txt{width:min(460px,42%);max-width:460px;text-align:center;padding:8px 0 8px 12px;flex:none}
.hero h1{margin:0;font-weight:900;font-style:italic;line-height:.92;font-size:clamp(2.35rem,5.1vw,3.85rem);letter-spacing:-.03em;text-shadow:0 3px 0 rgba(0,0,0,.45),0 8px 24px rgba(0,0,0,.35)}
.hero h1 .r{display:block;color:var(--red);font-size:1.22em;letter-spacing:-.025em;-webkit-text-stroke:1.2px #fff;paint-order:stroke fill;text-shadow:0 3px 0 rgba(0,0,0,.35)}
.hero-sub{font-style:normal;font-weight:500;font-size:1.18rem;color:#e8edf8;margin:18px 0 22px;line-height:1.4;text-shadow:0 1px 8px rgba(0,0,0,.5)}
.btn-y{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(#ffe24a,#ffc400 45%,#f0b400);color:#111;font-weight:800;text-decoration:none;padding:12px 26px;border-radius:999px;box-shadow:0 4px 0 #b88700,0 8px 18px rgba(0,0,0,.35);font-size:1.05rem}
.btn-y:hover{color:#111;filter:brightness(1.05)}
.btn-y .ic{width:1.15em;height:1.15em;stroke-width:2.4}
.btn-r{display:inline-flex;align-items:center;gap:8px;background:var(--red);color:#fff;font-weight:700;text-decoration:none;padding:10px 20px;border-radius:999px;font-size:1rem;box-shadow:0 2px 0 #8a0a12}
.btn-r:hover{color:#fff;background:var(--red-dark)}

/* —— Trust strip —— */
.trust{background:var(--navy);color:#fff;border-top:0}
.trust ul{list-style:none;margin:0 auto;padding:16px 22px;display:grid;grid-template-columns:repeat(4,1fr);gap:0;max-width:var(--max)}
.trust li{display:flex;align-items:center;gap:12px;font-size:.92rem;line-height:1.25;font-weight:600;justify-content:center;padding:4px 12px}
.trust li+li{border-left:1px solid rgba(255,255,255,.2)}
.trust svg.ic{font-size:1.85rem;flex:none;stroke-width:1.8}

/* —— Sections —— */
.sec{padding:34px 0 8px}
.sec-title{font-size:1.65rem;font-weight:800;margin:0 0 20px;padding-left:14px;border-left:6px solid var(--red-bar);line-height:1.15;color:var(--ink)}
.cats{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.cat{display:flex;flex-direction:column;border-radius:14px;overflow:hidden;background:#111;box-shadow:0 4px 16px rgba(11,22,48,.16);text-decoration:none;color:#fff;transition:transform .15s ease,box-shadow .15s ease}
.cat:hover{transform:translateY(-3px);box-shadow:0 8px 22px rgba(11,22,48,.22);color:#fff}
.cat-img{aspect-ratio:1/1;object-fit:cover;width:100%;background:#121824}
.cat-label{display:flex;justify-content:space-between;align-items:center;background:var(--red-bar);color:#fff;font-weight:700;padding:9px 12px;font-size:.95rem;margin-top:auto}
.cat-label .ic{flex:none}

/* Gift + latest */
.duo{display:grid;grid-template-columns:1.12fr .88fr;gap:22px;padding:28px 0 48px}
.gift{position:relative;border-radius:18px;color:#fff;padding:36px 32px;background:var(--navy) right center / cover no-repeat;overflow:hidden;min-height:280px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;box-shadow:0 4px 18px rgba(11,22,48,.14)}
.gift::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,18,44,.96) 0%,rgba(7,18,44,.78) 42%,rgba(7,18,44,.15) 72%,rgba(7,18,44,0) 100%);pointer-events:none}
.gift>*{position:relative;z-index:1}
.gift h2{margin:0;font-size:clamp(2rem,3.2vw,2.7rem);line-height:1.05;font-weight:800;letter-spacing:-.02em;max-width:11ch}
.gift p{max-width:250px;color:#d5dced;margin:14px 0 22px;font-size:1.02rem;line-height:1.45}
.latest{background:var(--card);border-radius:18px;padding:22px 22px 10px;box-shadow:0 4px 16px rgba(11,22,48,.1)}
.latest .sec-title{font-size:1.35rem;margin-bottom:8px}
.latest ul{list-style:none;margin:0;padding:0}
.latest li+li{border-top:1px solid #ece8ea}
.latest a{display:flex;align-items:center;gap:14px;padding:14px 2px;text-decoration:none;color:var(--ink);font-weight:700;font-size:.98rem}
.latest a:hover{color:var(--red)}
.latest img,.latest .ph{width:78px;height:56px;object-fit:cover;border-radius:8px;flex:none;background:#13224a}
.latest .ph{display:block;background:linear-gradient(135deg,#13224a 0%,#0b1630 60%,#3a0a14 100%)}
.latest .arr{margin-left:auto;color:#9aa3b5;flex:none;font-size:1.15rem}

/* —— Inner pages —— */
.page-main{padding:28px 0 56px}
.content,.entry{background:#fff;border-radius:16px;padding:32px 36px;margin:0 auto;box-shadow:0 2px 14px rgba(11,22,48,.08);max-width:800px}
.entry h1,.content h1,.page-title{font-size:clamp(1.7rem,3vw,2.15rem);line-height:1.2;margin:0 0 12px;color:var(--ink);letter-spacing:-.02em}
.entry-meta{color:var(--muted);font-size:.9rem;margin:0 0 16px}
.entry-meta a{color:var(--muted);text-decoration:none}
.entry-meta a:hover{color:var(--red)}
.entry-disc{background:#fff6d6;border:1px solid #f0e0a0;padding:10px 14px;border-radius:8px;font-size:.88rem;margin:0 0 22px;color:#3a3418}
.entry-disc a{font-weight:700}
.entry-thumb{border-radius:12px;margin:0 0 22px;width:100%;height:auto}
.entry-body{font-size:1.05rem;line-height:1.7;color:#1c2233}
.entry-body>*:first-child{margin-top:0}
.entry-body h2,.entry-body h3{color:var(--ink);line-height:1.25;margin:1.6em 0 .5em}
.entry-body h2{font-size:1.4rem;padding-left:12px;border-left:5px solid var(--red-bar)}
.entry-body h3{font-size:1.15rem}
.entry-body a{font-weight:600}
.entry-body ul,.entry-body ol{padding-left:1.25em}
.entry-body img{border-radius:10px;margin:1em 0}
.entry-body blockquote{margin:1.2em 0;padding:8px 16px;border-left:4px solid var(--red-bar);color:#333;background:#faf7f8}
.entry-body table{width:100%;border-collapse:collapse;margin:1.2em 0}
.entry-body th,.entry-body td{border:1px solid var(--line);padding:8px 10px;text-align:left}
.entry-body th{background:#f4f5f8}

.post-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:22px;margin:8px 0 28px}
.post-card{background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 2px 12px rgba(11,22,48,.1);display:flex;flex-direction:column}
.post-card a.card-link{color:var(--ink);text-decoration:none;display:flex;flex-direction:column;flex:1}
.post-card a.card-link:hover h2{color:var(--red)}
.post-card img{aspect-ratio:16/10;object-fit:cover;width:100%;background:var(--navy-2)}
.post-card h2{font-size:1.12rem;margin:14px 16px 6px;line-height:1.3}
.post-card p{margin:0 16px 16px;color:var(--muted);font-size:.92rem}
.pagination{margin:8px 0 20px}
.pagination .nav-links{display:flex;flex-wrap:wrap;gap:8px}
.pagination a,.pagination span{display:inline-block;padding:6px 12px;border-radius:8px;background:#fff;box-shadow:0 1px 4px rgba(11,22,48,.1);text-decoration:none;color:var(--ink);font-weight:700}
.pagination .current{background:var(--red);color:#fff}

.search-form-block{margin-top:16px}
.search-form-block input[type="search"]{padding:10px 12px;border:1px solid var(--line);border-radius:8px;width:min(100%,320px);font:inherit}
.empty{padding:12px 0}

/* —— Footer —— */
.site-footer{background:var(--navy-deep) url("assets/footer-web.svg") no-repeat top center / 100% 90px;color:#c5cce0;padding:70px 0 20px;font-size:.9rem;position:relative}
.site-footer a{color:#fff;text-decoration:none}
.site-footer a:hover{color:var(--yellow);text-decoration:underline}
.ft-grid{display:grid;grid-template-columns:1.7fr .95fr .9fr .95fr;gap:28px;padding-bottom:24px;align-items:start}
.ft-brand .brand-name{font-size:1.35rem}
.ft-brand .tagline{color:#9aa6c0;font-size:.85rem;margin:8px 0 0;max-width:22em}
.ft-brand .brand-web{width:42px;height:42px;color:var(--red);display:block;margin-bottom:8px}
.ft h2{color:#fff;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;margin:0 0 10px}
.ft ul{list-style:none;margin:0;padding:0}
.ft li{margin:0 0 6px}
.ft-legal{margin-top:6px;padding-top:18px;border-top:1px solid rgba(255,255,255,.12);font-size:.82rem;color:#a8b0c4;line-height:1.55}
.ft-legal p{margin:0 0 8px}
.ft-copy{margin:10px 0 0;color:#8a93a8}

/* —— Responsive —— */
@media (max-width:980px){
  .cats{grid-template-columns:repeat(3,1fr)}
  .duo{grid-template-columns:1fr}
  .ft-grid{grid-template-columns:1fr 1fr;gap:22px}
  .hero-in,.hero{min-height:400px}
  .hero-txt{width:auto;max-width:460px}
}
@media (max-width:720px){
  .wh-disc-bar{font-size:.62rem;padding:6px 8px;line-height:1.35;letter-spacing:-.01em}
  .tagline{display:none}
  .hdr{gap:10px;padding:12px 16px 8px}
  .brand{gap:8px;min-width:0;flex:1}
  .brand-name{font-size:1.12rem;white-space:nowrap}
  .brand-name .c{display:none}
  .brand-web,.brand img.custom-logo{width:40px;height:40px}
  .amz-btn{padding:5px 12px}
  .amz-btn span{font-size:.62rem}
  .amz-btn b{font-size:.95rem}
  .menu-toggle{display:block}
  .main-nav{display:none;width:100%;order:3}
  .main-nav.is-open{display:block}
  .nav-in{flex-wrap:wrap}
  .main-nav .menu,.main-nav ul{flex-direction:column;align-items:stretch;padding:6px 0 10px}
  .main-nav a{border-radius:8px}
  .main-nav li:first-child>a,.main-nav .menu-item-home>a{border-radius:8px}
  .hero::after{background:linear-gradient(180deg,rgba(4,10,28,.2) 0%,rgba(4,10,28,.72) 55%,rgba(4,10,28,.82) 100%)}
  .hero-in{justify-content:center;min-height:400px;text-align:center}
  .hero-txt{padding:20px 0;width:auto;max-width:100%}
  .trust ul{grid-template-columns:repeat(2,1fr);padding:10px 8px}
  .trust li{justify-content:flex-start;padding:10px 8px;font-size:.85rem}
  .trust li+li{border-left:0}
  .trust li:nth-child(odd){border-right:1px solid rgba(255,255,255,.15)}
  .cats{grid-template-columns:repeat(2,1fr);gap:12px}
  .gift{min-height:0;padding:28px 22px}
  .gift::before{background:linear-gradient(180deg,rgba(7,18,44,.88) 0%,rgba(7,18,44,.55) 100%)}
  .gift h2{max-width:none}
  .gift p{max-width:none}
  .content,.entry{padding:22px 18px}
  .ft-grid{grid-template-columns:1fr}
  .wh-disc-bar{font-size:.72rem;padding:7px 10px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .cat,.amz-btn{transition:none}
}