/* ============================================================
   SeoPro.Tools — SITE-WIDE design system (Phase 0 foundation)
   Loaded on ALL pages under body.sp-site. Brings the homepage
   design language (Sora+Inter, emerald accent, thin lines,
   light/dark) to every page. Homepage-specific rules stay in
   home.css (body.home-min), which loads AFTER this and wins there.
   ============================================================ */

/* tokens come from :root in home.css; redefine here so site.css is self-sufficient */
:root{
  --hx-ink:#0b1020; --hx-mut:#52607a; --hx-soft:#8a94a6;
  --hx-line:#e8eaf0; --hx-bg:#fbfbfd; --hx-card:#ffffff;
  --hx-accent:#10b981; --hx-accent-d:#059669;
  --hx-head:'Sora',-apple-system,Segoe UI,Roboto,sans-serif;
  --hx-body:'Inter',-apple-system,Segoe UI,Roboto,sans-serif;
}

/* ---------- base ---------- */
body.sp-site{background:var(--hx-bg) !important; color:var(--hx-ink); font-family:var(--hx-body);}
body.sp-site h1,body.sp-site h2,body.sp-site h3,body.sp-site h4,body.sp-site h5,
body.sp-site .pageTitle,body.sp-site .footer-title{font-family:var(--hx-head); letter-spacing:-.01em;}
body.sp-site a{color:var(--hx-accent); transition:color .15s;}
body.sp-site a:hover,body.sp-site a:focus{color:var(--hx-accent-d); text-decoration:none;}
body.sp-site p,body.sp-site li{line-height:1.6;}

/* kill the legacy purple/blue gradient backgrounds site-wide */
body.sp-site .section,
body.sp-site [class*="gradient"],
body.sp-site .bg-primary-color,
body.sp-site .secHead{background:transparent !important; background-image:none !important;}
body.sp-site .footerbg, body.sp-site .texture-overlay{display:none !important;}

/* ---------- header / nav (solid, sticky on inner pages) ---------- */
body.sp-site:not(.home-min) .wrapper-header{position:sticky !important; top:0 !important; z-index:1000; background:rgba(251,251,253,.92); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-bottom:1px solid var(--hx-line); box-shadow:none;}
body.sp-site .main-header{padding:12px 0;}
body.sp-site .logo img{filter:brightness(0); max-height:34px; width:auto;}
body.sp-site .desktop-nav .main-nav{float:right; margin:0; display:flex; align-items:center; gap:4px;}
body.sp-site .desktop-nav .main-nav > li{float:none; display:inline-flex; align-items:center;}
body.sp-site .desktop-nav .main-nav > li > a{color:var(--hx-mut); font-weight:500; font-size:14.5px; padding:8px 12px; border-radius:8px;}
body.sp-site .desktop-nav .main-nav > li > a:hover,
body.sp-site .desktop-nav .main-nav > li.active > a{color:var(--hx-ink); background:rgba(16,185,129,.06);}
/* login / signup pills + theme toggle + lang (in .hx-actions) */
body.sp-site .hx-actions{display:flex; align-items:center; gap:8px;}
body.sp-site .hx-actions > li{float:none; display:inline-flex; align-items:center;}
body.sp-site .signin,body.sp-site .hx-actions .signin{border:1px solid var(--hx-line) !important; border-radius:999px !important; padding:7px 16px !important; color:var(--hx-ink) !important; background:transparent !important; font-weight:600; font-size:13.5px;}
body.sp-site .signin:hover{background:#f1f5f9 !important;}
body.sp-site .signup,body.sp-site .hx-actions .signup{background:var(--hx-accent) !important; border:0 !important; border-radius:999px !important; padding:8px 18px !important; color:#fff !important; font-weight:700; font-size:13.5px;}
body.sp-site .signup:hover{background:var(--hx-accent-d) !important;}
body.sp-site .hx-theme-toggle{background:transparent; border:1px solid var(--hx-line); border-radius:999px; width:38px; height:38px; cursor:pointer; color:var(--hx-ink); font-size:15px; display:inline-flex; align-items:center; justify-content:center; padding:0; transition:.2s;}
body.sp-site .hx-theme-toggle:hover{background:#f1f5f9;}
body.sp-site .navbar-toggle{background:#fff !important; border:1px solid var(--hx-line) !important; border-radius:10px; padding:8px 11px;}
body.sp-site .navbar-toggle .fa{color:var(--hx-ink) !important; font-size:20px;}
/* dropdowns (account / language) */
body.sp-site .dropdown-menu{border:1px solid var(--hx-line); border-radius:12px; box-shadow:0 16px 44px rgba(11,16,32,.10); padding:6px; min-width:180px;}
body.sp-site .dropdown-menu > li > a{padding:9px 14px; border-radius:8px; color:var(--hx-ink); font-size:14px;}
body.sp-site .dropdown-menu > li > a:hover{background:#f1f5f9; color:var(--hx-ink);}

/* ---------- page-title banner ---------- */
body.sp-site .page-block{padding:48px 0 8px; background:transparent !important;}
body.sp-site .pageTitle{color:var(--hx-ink); font-weight:800; font-size:clamp(28px,4vw,42px); margin:0;}

/* ---------- buttons ---------- */
body.sp-site .btn{border-radius:10px; font-weight:600; border:1px solid transparent; transition:.15s;}
body.sp-site .btn-primary,body.sp-site .btn-success,body.sp-site .btn-green{background:var(--hx-accent) !important; border-color:var(--hx-accent) !important; color:#fff !important;}
body.sp-site .btn-primary:hover,body.sp-site .btn-success:hover,body.sp-site .btn-green:hover{background:var(--hx-accent-d) !important; border-color:var(--hx-accent-d) !important;}
body.sp-site .btn-default{background:#fff !important; border-color:var(--hx-line) !important; color:var(--hx-ink) !important;}
body.sp-site .btn-default:hover{background:#f1f5f9 !important;}

/* ---------- cards / thumbnails / panels ---------- */
body.sp-site .thumbnail,body.sp-site .panel,body.sp-site .well,body.sp-site .card{background:var(--hx-card); border:1px solid var(--hx-line); border-radius:16px; box-shadow:none; transition:.18s;}
body.sp-site .thumbnail:hover,body.sp-site .panel:hover{box-shadow:0 16px 40px rgba(11,16,32,.08); transform:translateY(-3px); opacity:1;}
body.sp-site .thumbnail .caption{color:var(--hx-ink); font-weight:600;}
body.sp-site .thumbnail img,body.sp-site .imageres{max-height:64px; width:auto;}   /* shrink oversized tool icons */
body.sp-site .panel-heading{background:transparent; border-bottom:1px solid var(--hx-line); font-family:var(--hx-head); font-weight:700; color:var(--hx-ink); border-radius:16px 16px 0 0;}
body.sp-site .panel-default,body.sp-site .panel-primary{border-color:var(--hx-line);}

/* ---------- tables ---------- */
body.sp-site .table{border-collapse:separate; border-spacing:0;}
body.sp-site .table > thead > tr > th{border-bottom:2px solid var(--hx-line); color:var(--hx-mut); font-weight:600;}
body.sp-site .table > tbody > tr > td{border-top:1px solid var(--hx-line);}
body.sp-site .table-striped > tbody > tr:nth-of-type(odd){background:#f8fafc;}

/* ---------- forms ---------- */
body.sp-site .form-control,body.sp-site .form-input,body.sp-site input[type=text],
body.sp-site input[type=email],body.sp-site input[type=password],body.sp-site input[type=url],
body.sp-site textarea,body.sp-site select{border:1px solid var(--hx-line); border-radius:10px; box-shadow:none; color:var(--hx-ink); background:#fff;}
body.sp-site .form-control:focus,body.sp-site input:focus,body.sp-site textarea:focus,body.sp-site select:focus{border-color:var(--hx-accent); box-shadow:0 0 0 3px rgba(16,185,129,.12); outline:0;}

/* ---------- alerts ---------- */
body.sp-site .alert{border-radius:12px; border:1px solid var(--hx-line);}
body.sp-site .alert-success{background:#ecfdf5; border-color:#a7f3d0; color:#065f46;}
body.sp-site .alert-danger{background:#fef2f2; border-color:#fecaca; color:#991b1b;}

/* ---------- sidebar (ad/promo blocks) ---------- */
body.sp-site .sidebar,body.sp-site .side-bar,body.sp-site aside{font-size:14px;}
body.sp-site .sidebar a,body.sp-site aside a{color:var(--hx-mut);}

/* ============================================================
   FOOTER (site-wide — moved here so every page gets it)
   ============================================================ */
body.sp-site footer{background:var(--hx-bg) !important; border-top:1px solid var(--hx-line); color:var(--hx-mut); padding:48px 0 0; font-size:13.5px;}
body.sp-site footer [class*="footer"]{background:transparent !important;}
body.sp-site footer a{color:var(--hx-mut) !important;}
body.sp-site footer a:hover{color:var(--hx-ink) !important;}
body.sp-site footer p,body.sp-site footer li,body.sp-site footer span,
body.sp-site .footer-about,body.sp-site .single p,body.sp-site .navigation a{color:var(--hx-mut) !important;}
body.sp-site .footer-title{color:var(--hx-ink) !important; font-size:18px; margin-bottom:16px; white-space:normal;}
body.sp-site .footer-title::after{display:none !important;}
body.sp-site .right-border,body.sp-site .left-border{border:0 !important;}
body.sp-site footer .fa,body.sp-site .single .fa{color:var(--hx-accent) !important; background:transparent !important;}
body.sp-site .single{margin-bottom:10px;}
/* 3 columns in a row (row has 2 children: About + wrapper[Contact|Nav]) */
body.sp-site footer .row{display:flex !important; flex-wrap:nowrap; align-items:flex-start; gap:32px; margin:0;}
body.sp-site footer .row > .col-md-6{float:none !important; width:auto !important; padding:0 !important; margin:0 !important; min-width:0;}
body.sp-site footer .row > .col-md-6:first-child{flex:1 1 0;}
body.sp-site footer .row > .col-md-6:last-child{flex:2 1 0; display:flex; gap:32px;}
body.sp-site footer .row > .col-md-6:last-child > .col-md-6{flex:1 1 0; float:none !important; width:auto !important; padding:0 !important; min-width:0;}
body.sp-site footer .row > .clearfix{display:none !important;}
/* social icons: clean squares, not rotated diamonds */
body.sp-site .social-icon{margin-top:22px; clear:both; overflow:hidden;}
body.sp-site .social-icon .list-inline{margin:0; padding:0;}
body.sp-site .social-icon li a{transform:none !important; width:38px; height:38px; line-height:36px !important; border:1px solid var(--hx-line) !important; border-radius:10px !important; text-align:center; display:inline-block; color:var(--hx-mut) !important;}
body.sp-site .social-icon li a i{transform:none !important; line-height:36px !important;}
body.sp-site .copyright{background:var(--hx-bg) !important; color:var(--hx-soft) !important; border-top:1px solid var(--hx-line); margin-top:32px; padding:18px 16px 26px !important; line-height:1.6 !important;}

/* ============================================================
   DARK THEME (site-wide) — body.sp-site.theme-dark
   ============================================================ */
body.sp-site.theme-dark{background:#0b1020 !important; color:#c7d0e0;}
body.sp-site.theme-dark h1,body.sp-site.theme-dark h2,body.sp-site.theme-dark h3,
body.sp-site.theme-dark h4,body.sp-site.theme-dark .pageTitle,body.sp-site.theme-dark .footer-title{color:#fff !important;}
body.sp-site.theme-dark p,body.sp-site.theme-dark li,body.sp-site.theme-dark .footer-about,
body.sp-site.theme-dark .single p,body.sp-site.theme-dark .navigation a,
body.sp-site.theme-dark .thumbnail .caption{color:#c7d0e0 !important;}
body.sp-site.theme-dark:not(.home-min) .wrapper-header{background:rgba(11,16,32,.92) !important; border-bottom-color:rgba(255,255,255,.08);}
body.sp-site.theme-dark .thumbnail,body.sp-site.theme-dark .panel,body.sp-site.theme-dark .well,
body.sp-site.theme-dark .card{background:#141a2b !important; border-color:rgba(255,255,255,.08) !important;}
body.sp-site.theme-dark .panel-heading{background:transparent; border-bottom-color:rgba(255,255,255,.08);}
body.sp-site.theme-dark .desktop-nav .main-nav > li > a{color:#c7d0e0;}
body.sp-site.theme-dark .desktop-nav .main-nav > li > a:hover,
body.sp-site.theme-dark .desktop-nav .main-nav > li.active > a{color:#fff; background:rgba(255,255,255,.06);}
body.sp-site.theme-dark .signin{color:#c7d0e0 !important; border-color:rgba(255,255,255,.18) !important;}
body.sp-site.theme-dark .signin:hover{background:rgba(255,255,255,.08) !important;}
body.sp-site.theme-dark .hx-theme-toggle{color:#c7d0e0; border-color:rgba(255,255,255,.18);}
body.sp-site.theme-dark .hx-theme-toggle:hover{background:rgba(255,255,255,.08);}
body.sp-site.theme-dark .navbar-toggle{background:#141a2b !important; border-color:rgba(255,255,255,.12) !important;}
body.sp-site.theme-dark .navbar-toggle .fa{color:#fff !important;}
body.sp-site.theme-dark .dropdown-menu{background:#141a2b !important; border-color:rgba(255,255,255,.12) !important;}
body.sp-site.theme-dark .dropdown-menu > li > a{color:#c7d0e0 !important;}
body.sp-site.theme-dark .dropdown-menu > li > a:hover{background:rgba(255,255,255,.07) !important; color:#fff !important;}
body.sp-site.theme-dark .form-control,body.sp-site.theme-dark input[type=text],
body.sp-site.theme-dark input[type=email],body.sp-site.theme-dark input[type=password],
body.sp-site.theme-dark input[type=url],body.sp-site.theme-dark textarea,body.sp-site.theme-dark select{background:#141a2b; border-color:rgba(255,255,255,.12); color:#e6ebf5;}
body.sp-site.theme-dark .table > tbody > tr > td{border-top-color:rgba(255,255,255,.08);}
body.sp-site.theme-dark .table-striped > tbody > tr:nth-of-type(odd){background:rgba(255,255,255,.03);}
body.sp-site.theme-dark .btn-default{background:#141a2b !important; border-color:rgba(255,255,255,.12) !important; color:#e6ebf5 !important;}
body.sp-site.theme-dark footer,body.sp-site.theme-dark .copyright{background:#0b1020 !important; border-top-color:rgba(255,255,255,.08) !important;}
body.sp-site.theme-dark .logo img{filter:brightness(0) invert(1);}
body.sp-site.theme-dark .social-icon li a{border-color:rgba(255,255,255,.12) !important; color:#c7d0e0 !important;}

/* ============================================================
   MOBILE (<768px) — clean stacked nav + footer
   ============================================================ */
@media (max-width:767px){
  body.sp-site .desktop-nav .main-nav{float:none; flex-direction:column; align-items:stretch; width:100%; text-align:center; gap:0;}
  body.sp-site .desktop-nav .main-nav > li{display:block; width:100%;}
  body.sp-site .desktop-nav .main-nav > li > a{display:block; padding:11px;}
  body.sp-site .hx-actions{flex-direction:column; align-items:stretch; width:100%; border-top:1px solid var(--hx-line); margin-top:8px; padding-top:10px;}
  body.sp-site .hx-actions > li{display:block; width:100%; text-align:center; margin:5px 0;}
  body.sp-site .signin,body.sp-site .signup{display:block; width:100%;}
  body.sp-site footer .row{flex-direction:column; flex-wrap:nowrap; gap:30px;}
  body.sp-site footer .row > .col-md-6,
  body.sp-site footer .row > .col-md-6:last-child > .col-md-6{flex:0 0 auto !important; width:100% !important;}
  body.sp-site footer .row > .col-md-6:last-child{flex-direction:column; gap:30px;}
}