/*
Theme Name: InputArena Child
Theme URI: https://inputarena.com/
Description: Astra child theme for InputArena — a mouse & keyboard specs and comparison database. Branded header, footer and SEO-optimised home page, colour-matched to the APS Products (InputArena X) plugin's mint/light design system.
Author: InputArena
Author URI: https://inputarena.com/
Template: astra
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: inputarena-child
*/

/* ============================================================
   InputArena Child — design tokens (match APS InputArena X)
   ============================================================ */
:root{
  --ia-bg:            #F6F8FC;
  --ia-bg-2:          #EEF2F9;
  --ia-surface:       #FFFFFF;
  --ia-surface-2:     #F3F6FB;
  --ia-border:        #E4E8F0;
  --ia-border-strong: #C7D0DE;
  --ia-text:          #0F131B;
  --ia-text-soft:     #45505F;
  --ia-muted:         #78838F;
  --ia-accent:        #0FA98A;
  --ia-accent-dark:   #0B8C71;
  --ia-accent-soft:   #DBF5EE;
  --ia-win:           #1FA65C;
  --ia-warn:          #C98A1E;
  --ia-danger:        #D8493F;
  --ia-gold:          #D9A93B;
  --ia-cat-mouse:     #0FA98A;
  --ia-cat-keyboard:  #6F5DE0;
  --ia-ink-on-accent: #05271F;

  --ia-footer-bg:     #0D1017;
  --ia-footer-2:      #141924;
  --ia-footer-text:   #C7CED9;
  --ia-footer-muted:  #8A93A2;

  --ia-grad:  linear-gradient(135deg,#14C2A0 0%,#0FA98A 55%,#0B8C71 100%);
  --ia-shadow-sm: 0 1px 2px rgba(15,23,42,.05), 0 8px 22px rgba(15,23,42,.06);
  --ia-shadow-md: 0 14px 40px rgba(15,23,42,.12);

  --ia-radius: 14px;
  --ia-radius-lg: 20px;
  --ia-max: 1320px;

  --ia-font:  "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ia-head:  "Sora", "Space Grotesk", "Inter", system-ui, sans-serif;
  --ia-mono:  "JetBrains Mono", "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
}

/* ============================================================
   BASE
   ============================================================ */
body.inputarena{ margin:0; }
body.inputarena *, body.inputarena *::before, body.inputarena *::after{ box-sizing:border-box; }
.ia-header *, .ia-footer *, .ia-hero *, .ia-section *{ box-sizing:border-box; }
body.inputarena{
  background: var(--ia-bg);
  color: var(--ia-text);
  font-family: var(--ia-font);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
}
.ia-container{ max-width: var(--ia-max); margin-inline:auto; padding-inline: clamp(16px,3vw,32px); width:100%; }
body.inputarena a{ color: var(--ia-accent-dark); text-decoration:none; }
body.inputarena a:hover{ color: var(--ia-accent); }
body.inputarena img{ max-width:100%; height:auto; }
.ia-visually-hidden{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.ia-skip{ position:absolute; left:-9999px; top:0; background:var(--ia-accent); color:var(--ia-ink-on-accent); padding:10px 16px; border-radius:0 0 10px 0; z-index:9999; font-weight:700; }
.ia-skip:focus{ left:0; }

/* ============================================================
   BUTTONS
   ============================================================ */
.ia-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-weight:800; font-size:.95rem; line-height:1; padding:14px 22px;
  border-radius:12px; border:1px solid transparent; cursor:pointer; transition:all .16s ease; white-space:nowrap;
}
.ia-btn-primary{ background:var(--ia-grad); color:var(--ia-ink-on-accent)!important; box-shadow:var(--ia-shadow-sm); }
.ia-btn-primary:hover{ transform:translateY(-1px); filter:brightness(1.04); box-shadow:var(--ia-shadow-md); color:var(--ia-ink-on-accent)!important; }
.ia-btn-ghost{ background:var(--ia-surface); color:var(--ia-accent-dark)!important; border-color:var(--ia-border-strong); }
.ia-btn-ghost:hover{ border-color:var(--ia-accent); color:var(--ia-accent)!important; }
.ia-btn-lg{ padding:16px 26px; font-size:1rem; }

/* ============================================================
   HEADER
   ============================================================ */
.ia-header{ position:sticky; top:0; z-index:100; background:rgba(255,255,255,.9); backdrop-filter:blur(10px); border-bottom:1px solid var(--ia-border); }
.ia-header-inner{ display:flex; align-items:center; gap:20px; height:72px; }
.ia-logo{ display:inline-flex; align-items:center; font-family:var(--ia-head); font-weight:800; font-size:1.4rem; letter-spacing:-.02em; color:var(--ia-text); flex:0 0 auto; }
.ia-logo:hover{ color:var(--ia-text); }
.ia-logo b{ color:var(--ia-accent); font-weight:800; }
.ia-logo img{ max-height:40px; width:auto; }

.ia-search{ flex:1 1 auto; max-width:460px; position:relative; }
.ia-search input{
  width:100%; height:44px; padding:0 46px 0 16px; border-radius:999px;
  border:1px solid var(--ia-border); background:var(--ia-surface-2); color:var(--ia-text); font-size:.92rem;
}
.ia-search input::placeholder{ color:var(--ia-muted); }
.ia-search input:focus{ outline:2px solid var(--ia-accent); outline-offset:1px; background:var(--ia-surface); }
.ia-search button{ position:absolute; right:5px; top:5px; width:34px; height:34px; border-radius:50%; border:0; background:var(--ia-grad); color:var(--ia-ink-on-accent); display:flex; align-items:center; justify-content:center; }

.ia-nav{ display:flex; align-items:center; gap:4px; flex:0 0 auto; }
.ia-nav a{ display:inline-flex; align-items:center; padding:10px 14px; border-radius:10px; font-weight:700; font-size:.92rem; color:var(--ia-text-soft); position:relative; }
.ia-nav a:hover{ color:var(--ia-text); background:var(--ia-surface-2); }
.ia-nav .current-menu-item > a, .ia-nav a[aria-current="page"]{ color:var(--ia-accent-dark); }
.ia-nav .current-menu-item > a::after, .ia-nav a[aria-current="page"]::after{ content:""; position:absolute; left:14px; right:14px; bottom:4px; height:2px; background:var(--ia-accent); border-radius:2px; }
.ia-nav ul{ list-style:none; margin:0; padding:0; display:flex; gap:4px; }

.ia-burger{ display:none; width:44px; height:44px; border:1px solid var(--ia-border); border-radius:10px; background:var(--ia-surface); color:var(--ia-text); align-items:center; justify-content:center; flex:0 0 auto; }
.ia-burger svg{ width:22px; height:22px; }

/* mobile drawer */
.ia-drawer{ position:fixed; inset:0; z-index:200; visibility:hidden; opacity:0; transition:opacity .2s ease, visibility .2s ease; }
.ia-drawer.is-open{ visibility:visible; opacity:1; }
.ia-drawer-scrim{ position:absolute; inset:0; background:rgba(9,12,18,.5); }
.ia-drawer-panel{ position:absolute; top:0; right:0; height:100%; width:min(84vw,340px); background:var(--ia-surface); box-shadow:-10px 0 40px rgba(0,0,0,.15); transform:translateX(100%); transition:transform .22s ease; padding:20px; display:flex; flex-direction:column; gap:8px; overflow-y:auto; }
.ia-drawer.is-open .ia-drawer-panel{ transform:none; }
.ia-drawer-close{ align-self:flex-end; width:40px; height:40px; border:1px solid var(--ia-border); border-radius:10px; background:var(--ia-surface); color:var(--ia-text); }
.ia-drawer a{ padding:14px 12px; border-radius:10px; font-weight:700; color:var(--ia-text); border-bottom:1px solid var(--ia-border); }
.ia-drawer a:hover{ background:var(--ia-surface-2); color:var(--ia-accent-dark); }
.ia-drawer ul{ list-style:none; margin:0; padding:0; }

/* ============================================================
   SECTIONS / HOME
   ============================================================ */
.ia-section{ padding: clamp(40px,6vw,72px) 0; }
.ia-section-alt{ background:var(--ia-bg-2); }
.ia-eyebrow{ font-family:var(--ia-mono); font-size:.78rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ia-accent-dark); margin:0 0 12px; }
.ia-h2{ font-family:var(--ia-head); font-size:clamp(1.5rem,3vw,2.1rem); font-weight:800; letter-spacing:-.02em; color:var(--ia-text); margin:0 0 10px; }
.ia-lead{ font-size:1.05rem; color:var(--ia-text-soft); max-width:66ch; margin:0; }
.ia-section-head{ margin-bottom:28px; }
.ia-section-head.center{ text-align:center; }
.ia-section-head.center .ia-lead{ margin-inline:auto; }
.ia-row-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:22px; flex-wrap:wrap; }
.ia-viewall{ font-weight:800; font-size:.9rem; color:var(--ia-accent-dark); display:inline-flex; align-items:center; gap:6px; }

/* HERO */
.ia-hero{ position:relative; padding: clamp(48px,7vw,96px) 0 clamp(40px,5vw,64px); background:
  radial-gradient(60% 70% at 80% 0%, rgba(15,169,138,.10), transparent 60%),
  radial-gradient(50% 60% at 0% 20%, rgba(111,93,224,.08), transparent 60%); }
.ia-hero h1{ font-family:var(--ia-head); font-size:clamp(2.1rem,5vw,3.6rem); line-height:1.05; font-weight:800; letter-spacing:-.03em; color:var(--ia-text); margin:0 0 18px; max-width:16ch; }
.ia-hero h1 em{ font-style:normal; color:var(--ia-accent); }
.ia-hero p{ font-size:1.15rem; line-height:1.6; color:var(--ia-text-soft); max-width:60ch; margin:0 0 28px; }
.ia-hero-cta{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:30px; }
.ia-hero-search{ max-width:560px; margin-bottom:26px; }
.ia-hero-search form{ display:flex; gap:10px; background:var(--ia-surface); border:1px solid var(--ia-border); border-radius:14px; padding:8px; box-shadow:var(--ia-shadow-sm); }
.ia-hero-search input{ flex:1; border:0; background:transparent; padding:0 14px; font-size:1rem; color:var(--ia-text); min-width:0; }
.ia-hero-search input:focus{ outline:none; }
.ia-stats{ display:flex; flex-wrap:wrap; gap:10px; }
.ia-chip{ display:inline-flex; align-items:center; gap:8px; background:var(--ia-surface); border:1px solid var(--ia-border); border-radius:999px; padding:9px 16px; font-weight:700; font-size:.86rem; color:var(--ia-text-soft); box-shadow:var(--ia-shadow-sm); }
.ia-chip b{ font-family:var(--ia-mono); color:var(--ia-accent-dark); font-size:1rem; }

/* CATEGORY CARDS */
.ia-cat-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.ia-cat-card{ display:flex; align-items:center; gap:18px; background:var(--ia-surface); border:1px solid var(--ia-border); border-radius:var(--ia-radius-lg); padding:26px; box-shadow:var(--ia-shadow-sm); transition:all .16s ease; position:relative; overflow:hidden; }
.ia-cat-card::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; }
.ia-cat-card.is-mouse::before{ background:var(--ia-cat-mouse); }
.ia-cat-card.is-keyboard::before{ background:var(--ia-cat-keyboard); }
.ia-cat-card:hover{ transform:translateY(-3px); border-color:var(--ia-border-strong); box-shadow:var(--ia-shadow-md); }
.ia-cat-ic{ width:64px; height:64px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; border-radius:16px; font-size:2rem; }
.ia-cat-card.is-mouse .ia-cat-ic{ background:var(--ia-accent-soft); }
.ia-cat-card.is-keyboard .ia-cat-ic{ background:rgba(111,93,224,.12); }
.ia-cat-body{ flex:1; min-width:0; }
.ia-cat-body h3{ font-family:var(--ia-head); font-size:1.3rem; font-weight:800; margin:0 0 4px; color:var(--ia-text); }
.ia-cat-body p{ margin:0; color:var(--ia-muted); font-size:.9rem; }
.ia-cat-count{ font-family:var(--ia-mono); font-weight:800; font-size:1.4rem; color:var(--ia-text); flex:0 0 auto; }
.ia-cat-count span{ display:block; font-size:.66rem; font-family:var(--ia-font); font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--ia-muted); }

/* PRODUCT / COMPARISON CARDS */
.ia-grid{ display:grid; gap:16px; }
.ia-grid-3{ grid-template-columns:repeat(3,1fr); }
.ia-grid-4{ grid-template-columns:repeat(4,1fr); }

.ia-pcard{ display:flex; flex-direction:column; background:var(--ia-surface); border:1px solid var(--ia-border); border-radius:var(--ia-radius); overflow:hidden; box-shadow:var(--ia-shadow-sm); transition:all .16s ease; }
.ia-pcard:hover{ transform:translateY(-3px); border-color:var(--ia-border-strong); box-shadow:var(--ia-shadow-md); }
.ia-pcard-thumb{ aspect-ratio:1/1; background:var(--ia-surface-2); display:flex; align-items:center; justify-content:center; padding:18px; position:relative; }
.ia-pcard-thumb img{ max-width:100%; max-height:100%; object-fit:contain; }
.ia-pcard-badge{ position:absolute; top:10px; left:10px; font-size:.62rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; padding:3px 9px; border-radius:999px; background:var(--ia-accent-soft); color:var(--ia-accent-dark); }
.ia-pcard-badge.is-keyboard{ background:rgba(111,93,224,.12); color:var(--ia-cat-keyboard); }
.ia-pcard-rating{ position:absolute; top:10px; right:10px; font-family:var(--ia-mono); font-weight:800; font-size:.8rem; background:var(--ia-surface); border:1px solid var(--ia-border); color:var(--ia-accent-dark); padding:3px 8px; border-radius:8px; box-shadow:var(--ia-shadow-sm); }
.ia-pcard-body{ padding:14px 16px 16px; display:flex; flex-direction:column; gap:8px; flex:1; }
.ia-pcard-title{ font-family:var(--ia-head); font-weight:700; font-size:1rem; color:var(--ia-text); line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.ia-pcard:hover .ia-pcard-title{ color:var(--ia-accent-dark); }
.ia-pcard-meta{ margin-top:auto; display:flex; align-items:center; gap:8px; font-size:.76rem; color:var(--ia-muted); }

/* comparison card */
.ia-ccard{ display:flex; flex-direction:column; gap:14px; background:var(--ia-surface); border:1px solid var(--ia-border); border-radius:var(--ia-radius); padding:18px; box-shadow:var(--ia-shadow-sm); transition:all .16s ease; }
.ia-ccard:hover{ transform:translateY(-3px); border-color:var(--ia-accent); box-shadow:var(--ia-shadow-md); }
.ia-ccard-vs{ display:flex; align-items:center; justify-content:center; gap:12px; }
.ia-ccard-thumb{ width:74px; height:74px; background:var(--ia-surface-2); border:1px solid var(--ia-border); border-radius:12px; display:flex; align-items:center; justify-content:center; padding:8px; flex:0 0 auto; }
.ia-ccard-thumb img{ max-width:100%; max-height:100%; object-fit:contain; }
.ia-vs{ font-family:var(--ia-mono); font-size:.68rem; font-weight:800; color:var(--ia-ink-on-accent); background:var(--ia-grad); border-radius:999px; padding:4px 8px; flex:0 0 auto; }
.ia-ccard-title{ font-family:var(--ia-head); font-weight:800; font-size:1rem; text-align:center; color:var(--ia-text); line-height:1.3; }
.ia-ccard:hover .ia-ccard-title{ color:var(--ia-accent-dark); }
.ia-ccard-cta{ margin-top:auto; text-align:center; font-weight:800; font-size:.84rem; color:var(--ia-accent-dark); }

/* TOOLS CTA */
.ia-tools{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.ia-tool{ background:var(--ia-surface); border:1px solid var(--ia-border); border-radius:var(--ia-radius); padding:22px; box-shadow:var(--ia-shadow-sm); transition:all .16s ease; display:flex; flex-direction:column; gap:8px; }
.ia-tool:hover{ transform:translateY(-3px); border-color:var(--ia-border-strong); box-shadow:var(--ia-shadow-md); }
.ia-tool-ic{ width:46px; height:46px; border-radius:12px; background:var(--ia-accent-soft); display:flex; align-items:center; justify-content:center; font-size:1.5rem; margin-bottom:4px; }
.ia-tool h3{ font-family:var(--ia-head); font-weight:800; font-size:1.05rem; margin:0; color:var(--ia-text); }
.ia-tool p{ margin:0; font-size:.9rem; color:var(--ia-text-soft); }
.ia-tool span{ margin-top:6px; font-weight:800; font-size:.84rem; color:var(--ia-accent-dark); }

/* WHY / trust */
.ia-why{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.ia-why-item{ background:var(--ia-surface); border:1px solid var(--ia-border); border-radius:var(--ia-radius); padding:24px; box-shadow:var(--ia-shadow-sm); }
.ia-why-item .ia-cat-ic{ margin-bottom:12px; background:var(--ia-accent-soft); }
.ia-why-item h3{ font-family:var(--ia-head); font-weight:800; font-size:1.1rem; margin:0 0 6px; color:var(--ia-text); }
.ia-why-item p{ margin:0; color:var(--ia-text-soft); font-size:.94rem; }

/* FAQ */
.ia-faq{ display:flex; flex-direction:column; gap:10px; max-width:820px; margin-inline:auto; }
.ia-faq details{ background:var(--ia-surface); border:1px solid var(--ia-border); border-radius:12px; padding:2px 18px; }
.ia-faq summary{ cursor:pointer; list-style:none; padding:16px 0; font-weight:700; color:var(--ia-text); display:flex; justify-content:space-between; align-items:center; gap:14px; }
.ia-faq summary::-webkit-details-marker{ display:none; }
.ia-faq summary::after{ content:"+"; font-family:var(--ia-mono); font-size:1.3rem; color:var(--ia-accent); flex:0 0 auto; }
.ia-faq details[open] summary::after{ content:"\2212"; }
.ia-faq details p{ margin:0 0 16px; color:var(--ia-text-soft); line-height:1.65; }

/* CTA band */
.ia-cta-band{ background:var(--ia-grad); border-radius:var(--ia-radius-lg); padding:clamp(28px,5vw,48px); text-align:center; color:var(--ia-ink-on-accent); box-shadow:var(--ia-shadow-md); }
.ia-cta-band h2{ font-family:var(--ia-head); font-size:clamp(1.4rem,3vw,2rem); font-weight:800; color:var(--ia-ink-on-accent); margin:0 0 10px; }
.ia-cta-band p{ color:rgba(5,39,31,.82); margin:0 auto 22px; max-width:56ch; font-weight:600; }
.ia-cta-band .ia-btn{ background:#05271F; color:#EAFBF6!important; }
.ia-cta-band .ia-btn:hover{ background:#0a352b; }

/* ============================================================
   FOOTER
   ============================================================ */
.ia-footer{ background:var(--ia-footer-bg); color:var(--ia-footer-text); margin-top:auto; }
.ia-footer-top{ padding: clamp(40px,5vw,64px) 0 32px; display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr 1.4fr; gap:32px; }
.ia-footer h4{ font-family:var(--ia-head); font-size:.82rem; text-transform:uppercase; letter-spacing:.08em; color:#fff; margin:0 0 16px; font-weight:800; }
.ia-footer ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.ia-footer ul a{ color:var(--ia-footer-text); font-size:.92rem; }
.ia-footer ul a:hover{ color:var(--ia-accent); }
.ia-footer-brand .ia-logo{ color:#fff; margin-bottom:12px; }
.ia-footer-brand p{ color:var(--ia-footer-muted); font-size:.9rem; line-height:1.6; max-width:34ch; }
.ia-news p{ color:var(--ia-footer-muted); font-size:.9rem; margin:0 0 12px; }
.ia-news form{ display:flex; gap:8px; }
.ia-news input{ flex:1; min-width:0; height:44px; border-radius:10px; border:1px solid var(--ia-footer-2); background:var(--ia-footer-2); color:#fff; padding:0 14px; font-size:.9rem; }
.ia-news input::placeholder{ color:var(--ia-footer-muted); }
.ia-news button{ height:44px; padding:0 16px; border:0; border-radius:10px; background:var(--ia-grad); color:var(--ia-ink-on-accent); font-weight:800; cursor:pointer; }
.ia-social{ display:flex; gap:10px; margin-top:16px; }
.ia-social a{ width:40px; height:40px; border-radius:10px; background:var(--ia-footer-2); display:flex; align-items:center; justify-content:center; color:var(--ia-footer-text); }
.ia-social a:hover{ background:var(--ia-accent); color:var(--ia-ink-on-accent); }
.ia-social svg{ width:18px; height:18px; }
.ia-footer-bottom{ border-top:1px solid var(--ia-footer-2); padding:20px 0; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.ia-footer-bottom p{ margin:0; color:var(--ia-footer-muted); font-size:.86rem; }
.ia-footer-bottom nav{ display:flex; gap:18px; flex-wrap:wrap; }
.ia-footer-bottom nav a{ color:var(--ia-footer-muted); font-size:.86rem; }
.ia-footer-bottom nav a:hover{ color:var(--ia-accent); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* ============================================================
   RESPONSIVE — hardened (scoped + !important so it wins over the
   parent theme, and can't be defeated by viewport-expanding overflow)
   ============================================================ */
html{ overflow-x:hidden; }
body.inputarena{ max-width:100%; }
body.inputarena .ia-container{ max-width:min(var(--ia-max),100%); }

/* Logo never blows up (custom-logo image included) */
body.inputarena .ia-logo img,
body.inputarena .ia-logo .custom-logo,
body.inputarena .ia-header .custom-logo{ max-height:40px !important; width:auto !important; }
body.inputarena .ia-footer .ia-logo img,
body.inputarena .ia-footer .custom-logo{ max-height:42px !important; width:auto !important; }

/* Search button can't balloon */
body.inputarena .ia-search{ position:relative !important; }
body.inputarena .ia-search button{ width:34px !important; height:34px !important; padding:0 !important; border-radius:50% !important; flex:0 0 auto !important; }

@media (max-width: 1024px){
  body.inputarena .ia-footer-top{ grid-template-columns:1fr 1fr 1fr; }
  body.inputarena .ia-footer-brand, body.inputarena .ia-news{ grid-column:span 3; }
  body.inputarena .ia-grid-4{ grid-template-columns:repeat(3,1fr); }
}

@media (max-width: 900px){
  body.inputarena .ia-nav{ display:none !important; }
  body.inputarena .ia-burger{ display:inline-flex !important; }
  body.inputarena .ia-header-inner .ia-search{ display:none !important; }
  body.inputarena .ia-tools, body.inputarena .ia-why{ grid-template-columns:1fr !important; }
  body.inputarena .ia-grid-3{ grid-template-columns:1fr 1fr; }
  body.inputarena .ia-grid-4{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width: 680px){
  body.inputarena .ia-cat-grid{ grid-template-columns:1fr !important; }
  body.inputarena .ia-grid-3{ grid-template-columns:1fr !important; }
  body.inputarena .ia-footer-top{ grid-template-columns:1fr 1fr !important; }
  body.inputarena .ia-footer-brand, body.inputarena .ia-news{ grid-column:span 2 !important; }
}

@media (max-width: 520px){
  body.inputarena .ia-grid-4{ grid-template-columns:1fr 1fr !important; }
  body.inputarena .ia-cat-card{ padding:18px; gap:12px; }
  body.inputarena .ia-cat-ic{ width:52px; height:52px; font-size:1.6rem; }
  body.inputarena .ia-footer-top{ grid-template-columns:1fr !important; }
  body.inputarena .ia-footer-brand, body.inputarena .ia-news{ grid-column:span 1 !important; }
  body.inputarena .ia-footer-bottom{ flex-direction:column; align-items:flex-start; }
  body.inputarena .ia-hero h1{ font-size:2rem; }
  body.inputarena .ia-hero-search form{ flex-direction:column; }
  body.inputarena .ia-hero-search .ia-btn{ width:100%; }
}

/* Astra scroll-to-top: brand it + keep clear of footer links */
#ast-scroll-top{ background:var(--ia-accent) !important; color:var(--ia-ink-on-accent) !important; }
body.inputarena .ia-footer-bottom{ padding-right:56px; }

/* ============================================================
   THEME FIXES v1.1 — mobile header/drawer, footer, hero visual
   (scoped + !important so the parent theme / Elementor kit can't
   override; appended last to win the cascade)
   ============================================================ */

/* ---- Mobile header: burger button must be visible & right-aligned ---- */
body.inputarena .ia-burger{
  background: var(--ia-surface) !important;
  border: 1px solid var(--ia-border-strong) !important;
  color: var(--ia-text) !important;
  border-radius: 10px !important;
  width: 44px !important; height: 44px !important; padding: 0 !important;
  align-items: center !important; justify-content: center !important;
  box-shadow: none !important; cursor: pointer;
}
body.inputarena .ia-burger:hover{ border-color: var(--ia-accent) !important; color: var(--ia-accent) !important; }
body.inputarena .ia-burger svg{ width: 24px !important; height: 24px !important; display: block !important; stroke: currentColor !important; fill: none !important; }
@media (max-width: 900px){
  body.inputarena .ia-logo{ margin-right: auto !important; }
  body.inputarena .ia-burger{ margin-left: auto !important; display: inline-flex !important; }
}

/* ---- Header search button: brand circle, never Astra's default ---- */
body.inputarena .ia-search button{
  background: var(--ia-grad) !important; color: var(--ia-ink-on-accent) !important;
  border: 0 !important; box-shadow: none !important;
}
body.inputarena .ia-search button svg{ stroke: var(--ia-ink-on-accent) !important; fill: none !important; }

/* ---- Mobile drawer: force a clean vertical menu (kill Astra dropdowns) ---- */
body.inputarena .ia-drawer-panel{ justify-content: flex-start !important; gap: 4px !important; }
body.inputarena .ia-drawer-panel .menu,
body.inputarena .ia-drawer-panel ul{
  display: block !important; position: static !important;
  margin: 0 !important; padding: 0 !important; width: 100% !important;
  list-style: none !important; background: none !important; box-shadow: none !important;
  transform: none !important; opacity: 1 !important; visibility: visible !important;
}
body.inputarena .ia-drawer-panel li{
  display: block !important; width: 100% !important; position: static !important;
  margin: 0 !important; padding: 0 !important; float: none !important;
}
body.inputarena .ia-drawer-panel a{
  display: block !important; width: 100% !important;
  padding: 14px 12px !important; border-radius: 10px !important;
  font-weight: 700 !important; color: var(--ia-text) !important;
  border-bottom: 1px solid var(--ia-border) !important; text-decoration: none !important;
}
body.inputarena .ia-drawer-panel a:hover{ background: var(--ia-surface-2) !important; color: var(--ia-accent-dark) !important; }
/* hide any nested sub-menu flyouts inside the drawer */
body.inputarena .ia-drawer-panel .sub-menu{ display: none !important; }
body.inputarena .ia-drawer-panel > *{ flex: 0 0 auto !important; }

/* ---- Footer: nicer dark, full-width, high-contrast logo ---- */
body.inputarena .ia-footer{ background: #10141E !important; }
body.inputarena .ia-footer-bottom-wrap{ background: #0B0E16 !important; }
body.inputarena .ia-footer .ia-container{ width: 100% !important; margin-inline: auto !important; padding-inline: clamp(16px,3vw,32px) !important; }
/* text logo in footer for guaranteed contrast on dark */
body.inputarena .ia-footer .ia-logo img,
body.inputarena .ia-footer .ia-logo .custom-logo{ display: none !important; }
body.inputarena .ia-footer .ia-logo::before{
  content: "Input"; color: #fff; font-family: var(--ia-head); font-weight: 800; font-size: 1.5rem; letter-spacing: -.02em;
}
body.inputarena .ia-footer .ia-logo::after{
  content: "Arena"; color: var(--ia-accent); font-family: var(--ia-head); font-weight: 800; font-size: 1.5rem; letter-spacing: -.02em;
}
@media (max-width: 680px){
  body.inputarena .ia-footer-top{ gap: 24px !important; }
}

/* ============================================================
   HERO — clean 2-column with a contained "review card" visual
   ============================================================ */
body.inputarena .ia-hero{ overflow: hidden; }
body.inputarena .ia-hero .ia-container{
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 44px; align-items: center;
}
body.inputarena .ia-hero-copy{ min-width: 0; }
body.inputarena .ia-hero-visual{
  position: relative; min-width: 0;
  display: flex; align-items: center; justify-content: center;
}

body.inputarena .ia-hv-glow{
  position: absolute; inset: -6% -4%; z-index: 0; pointer-events: none;
  background: radial-gradient(46% 46% at 55% 45%, rgba(15,169,138,.18), transparent 70%);
}
body.inputarena .ia-hv-card{
  position: relative; z-index: 1; width: 100%; max-width: 380px;
  background: var(--ia-surface); border: 1px solid var(--ia-border);
  border-radius: var(--ia-radius-lg); box-shadow: var(--ia-shadow-md); padding: 22px;
}
body.inputarena .ia-hv-card::before{
  content: ""; position: absolute; left: 22px; right: 22px; top: 0; height: 3px; border-radius: 0 0 3px 3px; background: var(--ia-grad);
}
body.inputarena .ia-hv-top{ display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
body.inputarena .ia-hv-badge{ font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; padding: 4px 10px; border-radius: 999px; background: var(--ia-accent-soft); color: var(--ia-accent-dark); }
body.inputarena .ia-hv-name{ font-family: var(--ia-head); font-weight: 800; font-size: 1.02rem; color: var(--ia-text); margin-left: auto; }
body.inputarena .ia-hv-shot{ height: 116px; border-radius: 12px; background: var(--ia-surface-2); display: flex; align-items: center; justify-content: center; font-size: 3.2rem; margin-bottom: 14px; }
body.inputarena .ia-hv-rate{ display: flex; align-items: center; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
body.inputarena .ia-hv-score{ font-family: var(--ia-mono); font-weight: 800; font-size: 1.9rem; line-height: 1; color: var(--ia-accent-dark); }
body.inputarena .ia-hv-den{ font-family: var(--ia-mono); color: var(--ia-muted); font-size: .9rem; }
body.inputarena .ia-hv-stars{ color: var(--ia-gold); letter-spacing: 2px; font-size: .95rem; }
body.inputarena .ia-hv-verdict{ margin-left: auto; font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--ia-ink-on-accent); background: var(--ia-accent); padding: 4px 10px; border-radius: 999px; }
body.inputarena .ia-hv-rows{ display: grid; gap: 8px; }
body.inputarena .ia-hv-row{ display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; background: var(--ia-surface-2); border: 1px solid var(--ia-border); border-radius: 10px; }
body.inputarena .ia-hv-row span{ font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ia-muted); font-weight: 700; }
body.inputarena .ia-hv-row b{ font-family: var(--ia-mono); font-weight: 700; font-size: .82rem; color: var(--ia-text); }

/* Hero responsive */
@media (max-width: 980px){
  body.inputarena .ia-hero .ia-container{ grid-template-columns: 1fr; gap: 28px; }
  body.inputarena .ia-hero-visual{ order: 2; }
  body.inputarena .ia-hv-card{ max-width: 400px; margin-inline: auto; }
}
@media (max-width: 600px){
  body.inputarena .ia-hero-visual{ display: none; }
}

/* Breadcrumb (tool pages) */
body.inputarena .ia-crumbs{ font-size: .82rem; color: var(--ia-muted); margin: 0 0 14px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
body.inputarena .ia-crumbs a{ color: var(--ia-accent-dark); font-weight: 600; }
body.inputarena .ia-crumbs span{ color: var(--ia-border-strong); }

/* ============================================================
   TOOLS PAGE (template-tools.php)
   ============================================================ */
body.inputarena .ia-tools-hub{ display: grid; gap: 22px; }
body.inputarena .ia-tool-block{ background: var(--ia-surface); border: 1px solid var(--ia-border); border-radius: var(--ia-radius-lg); box-shadow: var(--ia-shadow-sm); padding: clamp(18px,3vw,28px); }
body.inputarena .ia-tool-block > h2{ font-family: var(--ia-head); font-size: 1.25rem; font-weight: 800; margin: 0 0 6px; display: flex; align-items: center; gap: 10px; color: var(--ia-text); }
body.inputarena .ia-tool-block > p{ margin: 0 0 18px; color: var(--ia-text-soft); }
body.inputarena .ia-tool-anchor{ scroll-margin-top: 90px; }

/* ============================================================
   THEME FIXES v1.2 — footer logo removed, newsletter responsive
   ============================================================ */
/* footer logo fully removed from markup; drop the old pseudo-logo rules */
body.inputarena .ia-footer .ia-logo{ display: none !important; }
body.inputarena .ia-footer-tagline{ color: var(--ia-footer-muted); font-size: .92rem; line-height: 1.6; max-width: 34ch; margin: 0 0 4px; }

/* newsletter: stack on small screens so it never overflows */
@media (max-width: 520px){
  body.inputarena .ia-news form{ flex-direction: column; }
  body.inputarena .ia-news input, body.inputarena .ia-news button{ width: 100%; }
  body.inputarena .ia-footer-bottom{ padding-right: 0; }
}
/* tool blocks: let embedded tool UIs breathe / never overflow */
body.inputarena .ia-tool-block > *{ max-width: 100%; }
body.inputarena .apt-wrap{ max-width: 100%; }

/* ============================================================
   CONTENT PAGES (.ia-prose) + CONTACT FORM
   ============================================================ */
body.inputarena .ia-page-hero{ padding: clamp(32px,5vw,56px) 0 8px; }
body.inputarena .ia-prose{ max-width: 800px; color: var(--ia-text-soft); font-size: 1.02rem; line-height: 1.75; }
body.inputarena .ia-prose > *:first-child{ margin-top: 0; }
body.inputarena .ia-prose h2{ font-family: var(--ia-head); font-size: 1.4rem; font-weight: 800; letter-spacing: -.01em; color: var(--ia-text); margin: 34px 0 12px; }
body.inputarena .ia-prose h3{ font-family: var(--ia-head); font-size: 1.12rem; font-weight: 800; color: var(--ia-text); margin: 26px 0 10px; }
body.inputarena .ia-prose p{ margin: 0 0 16px; }
body.inputarena .ia-prose a{ color: var(--ia-accent-dark); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
body.inputarena .ia-prose a:hover{ color: var(--ia-accent); }
body.inputarena .ia-prose ul, body.inputarena .ia-prose ol{ margin: 0 0 16px; padding-left: 22px; }
body.inputarena .ia-prose li{ margin: 6px 0; }
body.inputarena .ia-prose strong{ color: var(--ia-text); }
body.inputarena .ia-prose blockquote{ margin: 0 0 16px; padding: 12px 18px; border-left: 3px solid var(--ia-accent); background: var(--ia-surface-2); border-radius: 8px; }

/* Contact form */
body.inputarena .ia-form{ margin: 8px 0 24px; max-width: 720px; display: grid; gap: 16px; }
body.inputarena .ia-form-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
body.inputarena .ia-form label{ display: flex; flex-direction: column; gap: 7px; font-weight: 700; font-size: .9rem; color: var(--ia-text); }
body.inputarena .ia-form input, body.inputarena .ia-form textarea{
  width: 100%; font: inherit; font-weight: 500; color: var(--ia-text);
  background: var(--ia-surface); border: 1px solid var(--ia-border); border-radius: 12px;
  padding: 12px 14px; transition: border-color .15s ease, box-shadow .15s ease;
}
body.inputarena .ia-form input:focus, body.inputarena .ia-form textarea:focus{
  outline: none; border-color: var(--ia-accent); box-shadow: 0 0 0 3px rgba(15,169,138,.15);
}
body.inputarena .ia-form textarea{ resize: vertical; min-height: 120px; }
body.inputarena .ia-form .ia-btn{ justify-self: start; }
body.inputarena .ia-form-ok{ max-width: 720px; background: var(--ia-accent-soft); border: 1px solid color-mix(in srgb, var(--ia-accent) 30%, transparent); border-radius: 14px; padding: 20px 22px; margin: 8px 0 20px; }
body.inputarena .ia-form-ok strong{ display: block; color: var(--ia-accent-dark); font-size: 1.05rem; margin-bottom: 4px; }
body.inputarena .ia-form-ok p{ margin: 0; color: var(--ia-text-soft); }
body.inputarena .ia-form-err{ max-width: 720px; background: color-mix(in srgb, var(--ia-danger) 10%, transparent); border: 1px solid color-mix(in srgb, var(--ia-danger) 35%, transparent); color: var(--ia-danger); border-radius: 12px; padding: 12px 16px; margin: 0 0 16px; font-weight: 600; }
@media (max-width: 560px){
  body.inputarena .ia-form-row{ grid-template-columns: 1fr; }
}