/*
Theme Name: NicheFinderHub
Theme URI: https://nichefinderhub.com/
Author: Your Name
Author URI: https://nichefinderhub.com/
Description: WordPress theme for NicheFinderHub YouTube niche finder tool
Version: 1.0
Text Domain: nichefinderhub
*/

/* Your original CSS with some WordPress-specific additions */
:root{
  --bg:#0b1220; --panel:#0f172a; --text:#e7eef7; --muted:#9fb2d2; --border:#1c2941;
  --brand:#22c55e; --brand2:#16a34a; --accent:#2563eb;
}
:root[data-theme="light"]{
  --bg:#f6f8fc; --panel:#ffffff; --text:#0b1220; --muted:#3b4760; --border:#e5eaf3;
  --brand:#16a34a; --brand2:#22c55e; --accent:#1d4ed8;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
a{color:inherit;text-decoration:none}
.header{position:sticky;top:0;z-index:60;border-bottom:1px solid var(--border);background:rgba(255,255,255,.86)}
:root:not([data-theme="light"]) .header{background:rgba(7,12,22,.86);backdrop-filter:blur(10px)}
.nav{max-width:1100px;margin:0 auto;padding:8px 16px;display:flex;align-items:center;justify-content:space-between;min-height:56px}
.menu-left{display:flex;align-items:center;gap:10px}
.brand{display:flex;align-items:center;gap:8px}
.brand img{height:30px}
.brand-name{font-weight:800;line-height:1;white-space:nowrap}
.menu-right{display:flex;align-items:center;gap:10px}
.links{display:flex;align-items:center;gap:8px}
.links a{padding:8px 10px;border-radius:8px;text-decoration:none;display:inline-block}
.links a:hover,.links a.active{background:rgba(100,116,139,.15)}
.icon-btn,.menu-toggle{width:38px;height:38px;border-radius:999px;border:1px solid var(--border);background:transparent;color:var(--text);display:grid;place-items:center;cursor:pointer}
.menu-toggle{display:none}
@media (max-width:900px){
  .menu-toggle{display:grid}
  .links{position:absolute;top:56px;right:12px;left:12px;background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:10px;display:none;flex-direction:column;z-index:1000}
  .links.open{display:flex}
  .links a{width:100%;text-align:center;margin:5px 0}
}
.container{max-width:1100px;margin:0 auto;padding:16px}
.hero{display:flex;justify-content:center;padding:18px 16px 0}
.card{width:100%;max-width:880px;background:var(--panel);border:1px solid var(--border);border-radius:16px;box-shadow:0 12px 30px rgba(0,0,0,.25);padding:22px;margin:0 auto 14px}
h1{margin:0 0 10px;font-size:28px}
.lead{color:var(--muted);margin:0 0 14px}
.controls{display:grid;grid-template-columns:1fr 180px;gap:10px}
@media (max-width:640px){.controls{grid-template-columns:1fr}}
input,button,select,textarea{width:100%;padding:12px;border-radius:12px;border:1px solid var(--border);background:#0a1528;color:var(--text)}
:root[data-theme="light"] input,:root[data-theme="light"] select,:root[data-theme="light"] textarea{background:#fff;color:#0b1220}
button.primary{cursor:pointer;font-weight:800;background:linear-gradient(90deg,var(--brand),var(--brand2));border:none;color:#071018}
button.primary:hover{filter:saturate(1.08) brightness(1.05)}
.small{color:var(--muted);font-size:12px}
.results{display:none}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media (max-width:900px){.grid{grid-template-columns:1fr}}
.kpi{border:1px solid var(--border);border-radius:14px;padding:14px;background:linear-gradient(180deg,#0b1324,#0a1221)}
:root[data-theme="light"] .kpi{background:#f8fafc}
.kpi .label{color:var(--muted);font-size:12px}
.kpi .value{font-size:20px;font-weight:800;margin-top:6px}
.kpi .desc{font-size:12px;color:var(--muted);margin-top:6px}
.table-wrap{overflow:auto;margin-top:12px}
table{width:100%;border-collapse:separate;border-spacing:0 8px}
th,td{text-align:left;padding:10px 8px;font-size:14px}
thead th{color:#94a3b8}
:root[data-theme="light"] thead th{color:#334155}
tbody td{background:linear-gradient(180deg,#0b1324,#0a1221);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
:root[data-theme="light"] tbody td{background:#f8fafc}
tbody td:first-child{border-left:1px solid var(--border);border-top-left-radius:12px;border-bottom-left-radius:12px}
tbody td:last-child{border-right:1px solid var(--border);border-top-right-radius:12px;border-bottom-right-radius:12px}
.badge{display:inline-block;padding:4px 8px;border-radius:999px;border:1px solid var(--border);font-size:12px}
.badge.low{background:#08331e;color:#7fe2a8}
.badge.med{background:#2b2b13;color:#e8e89a}
.badge.high{background:#331212;color:#f4a2a2}
footer{border-top:1px solid var(--border);text-align:center;color:#a3b5d4;padding:22px}
.footer-links{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.footer-links a{padding:6px 10px;border-radius:8px}
.footer-links a:hover{background:rgba(100,116,139,.15)}
.modal{position:fixed;inset:0;display:none;background:rgba(0,0,0,.6);z-index:60}
.modal .sheet{max-width:900px;margin:6vh auto;background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:18px}
.modal .close{float:right;border:1px solid var(--border);border-radius:10px;padding:6px 10px;background:transparent;color:var(--text);cursor:pointer}

/* WordPress-specific styles */
.alignwide { max-width: 1100px; }
.alignfull { max-width: 100%; }
.wp-block-group { margin-bottom: 20px; }

/* WordPress editor styles */
.wp-block { max-width: 880px; }
.wp-block[data-align=wide] { max-width: 1100px; }
.wp-block[data-align=full] { max-width: none; }

/* Ensure menu items are styled correctly */
.links a {
    display: inline-block;
    padding: 8px 10px;
    border-radius: 8px;
    color: var(--text);
    text-decoration: none;
    font-size: 14px;
    transition: background-color 0.2s ease;
}

.links a:hover,
.links a.active {
    background: rgba(100, 116, 139, 0.15);
}

/* Make sure theme button is styled correctly */
.icon-btn {
    width: 38px;
    height: 38px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text);
    display: grid;
    place-items: center;
    cursor: pointer;
    margin-left: 5px;
}

/* Fix for WordPress menu list items */
.links ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.links li {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Ensure menu items are styled correctly */
.links a,
.links li a {
    display: inline-block;
    padding: 8px 10px;
    border-radius: 8px;
    color: var(--text);
    text-decoration: none;
    font-size: 14px;
    transition: background-color 0.2s ease;
}

.links a:hover,
.links a.active,
.links li a:hover,
.links li.active a {
    background: rgba(100, 116, 139, 0.15);
}

/* Mobile menu styles */
@media (max-width: 900px) {
    .menu-toggle {
        display: grid;
    }
    
    .links ul {
        flex-direction: column;
        gap: 0;
    }
    
    .links {
        position: absolute;
        top: 56px;
        right: 12px;
        left: 12px;
        background: var(--panel);
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 10px;
        display: none;
        flex-direction: column;
        z-index: 1000;
    }
    
    .links.open {
        display: flex;
    }
    
    .links a,
    .links li a {
        width: 100%;
        text-align: center;
        margin: 5px 0;
    }
}

/* Fix search results positioning */
.results {
    display: none;
    position: relative;
    z-index: 10;
    margin-top: 20px;
}

/* Ensure container has proper layout */
.container {
    display: flex;
    flex-direction: column;
    min-height: 70vh;
    position: relative;
    z-index: 1;
}

/* Fix footer positioning */
html, body {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex: 1;
}

footer {
    margin-top: auto;
    position: relative;
    z-index: 5;
}

/* Ensure header stays above content */
.header {
    position: sticky;
    top: 0;
    z-index: 100;
}

/* Fix table responsiveness */
.table-wrap {
    overflow-x: auto;
    margin-top: 20px;
    width: 100%;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid var(--border);
}

/* Center the search section */
.search-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    width: 100%;
}

/* Footer links styling */
.footer-links {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.footer-links a {
    color: var(--muted);
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-links a:hover {
    color: var(--text);
}

/* === NicheFinderHub WP fix: prevent results overlapping header/footer === */

/* Let normal document flow control stacking — remove artificial z-indexes */
.container,
.results,
header.header,
footer {
  position: static !important;
  z-index: auto !important;
}

/* Make the main content push the footer down */
main,
.container {
  display: block !important;
  min-height: unset !important;   /* avoid forcing a short "frame" */
  overflow: visible !important;
  clear: both;
}

/* Results should just flow, not float or stack */
.results {
  display: block !important;
  margin-top: 20px !important;
}

/* The card that holds the results should be block-level and full width of container */
.results .card {
  position: static !important;
  z-index: auto !important;
  width: 100%;
}

/* Keep the sticky header on top (visually) but not covering content */
.header {
  position: sticky !important;
  top: 0;
  z-index: 100; /* above content */
}

/* Footer should be in normal flow, not layered */
footer {
  position: static !important;
  margin-top: 24px;
}

/* Hero shrink behavior: only change min-height, never force absolute/fixed */
.hero {
  position: static !important;
}
.hero.compact {
  min-height: 20vh; /* was okay; ensures hero collapses when results show */
}

/* Safety: tables/cards never cause horizontal scroll */
.table-wrap { overflow-x: auto; }
.card { max-width: 880px; margin: 0 auto 14px; }

/* Make sure nothing inside results floats out of flow */
.results::after {
  content: "";
  display: block;
  clear: both;
}

/* Images & embeds never push layout sideways */
img, svg, video, canvas {
  max-width: 100%;
  height: auto;
  display: block;
}


.nfh-ad{max-width:100%;text-align:center;margin:16px auto}
.nfh-ad iframe{max-width:100%}
.nfh-ad--native{padding:8px 0}

/* =========================
   MOBILE FIX PACK (override)
   ========================= */

/* 1) Define a sensible header height and make main account for it */
.header{ --hdr-h: 56px; }
@media (max-width: 768px){
  .header{ --hdr-h: 60px; }
}
main{ padding-top: calc(var(--hdr-h,56px) * 0.2); } /* small breathing room */

/* 2) Compact, aligned top bar on phones */
@media (max-width: 768px){
  .nav{
    max-width: 100%;
    padding: 8px 12px;
    min-height: var(--hdr-h);
    gap: 8px;
  }
  .menu-left{ gap: 8px; }
  .brand{ gap: 6px; align-items:center; }
  .brand img{ height: 22px; }
  .brand-name{ font-size: 15px; font-weight: 800; line-height: 1; }
  .menu-right{ gap: 6px; }
  .icon-btn{ width:34px; height:34px; }
}

/* 3) Mobile nav drawer: full-width, no overlap with hero */
@media (max-width: 900px){
  .links{
    position: absolute;
    top: calc(var(--hdr-h,56px) + 6px);
    right: 12px; left: 12px;
    border-radius: 12px;
    padding: 10px;
    display: none;
  }
  .links.open{ display: flex; }
  .links ul{ flex-direction: column; gap: 0; width: 100%; }
  .links li, .links a{ width: 100%; text-align: center; }
}

/* 4) Hero centered and “above the fold” on phones */
.hero{
  position: static !important;
  display: flex; align-items: center; justify-content: center;
  padding: 16px 12px 0;
}
@media (max-width: 768px){
  .hero{ min-height: calc(100dvh - var(--hdr-h,56px) - 140px); } /* fills screen nicely */
}
.hero.compact{ min-height: 26dvh; } /* after results appear */

/* 5) Card + controls readable on small screens */
@media (max-width: 768px){
  .card{
    width: 100%;
    max-width: 640px;
    margin: 0 auto 14px;
    padding: 16px 14px;
    border-radius: 14px;
  }
  h1{ font-size: 22px; margin-bottom: 8px; }
  .lead{ font-size: 14px; }
  .controls{ grid-template-columns: 1fr; gap: 10px; }
  input,select,button,textarea{ font-size: 16px; padding: 12px; } /* avoids iOS zoom */
  button.primary{ padding: 14px 12px; font-size: 16px; }
}

/* 6) Results flow under hero, never overlap header/footer */
.results{
  display: block !important;
  position: static !important;
  z-index: auto !important;
  margin: 16px auto 0 !important;
  width: 100%;
}
.results .card{
  position: static !important;
  width: 100%;
  max-width: 880px;
  margin: 0 auto 14px;
}

/* 7) Tables: no sideways scroll on phones */
.table-wrap{ overflow-x: auto; -webkit-overflow-scrolling: touch; }
table{ width: 100%; border-collapse: separate; border-spacing: 0 8px; }
th,td{ padding: 10px 8px; font-size: 13px; }
@media (max-width: 480px){
  th:nth-child(3), td:nth-child(3){ display: none; } /* hide “Channel” on very small screens */
  th:nth-child(5), td:nth-child(5){ display: none; } /* hide “Age” if needed */
}

/* 8) Footer stays in flow, centered, touch-friendly */
footer{
  position: static !important;
  border-top: 1px solid var(--border);
  margin-top: 24px;
  padding: 18px 12px;
  z-index: 5;
}
.footer-links{
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
.footer-links a{ padding: 6px 10px; font-size: 14px; }

/* 9) Misc safety guards */
img, svg, canvas, video{ max-width: 100%; height: auto; }
.container{ max-width: 1100px; margin: 0 auto; padding: 12px; }
body{ overflow-x: hidden; }