/*
Theme Name:  GradeHub Pro
Theme URI:   https://deployfasthub.com
Description: Student & Teacher Grade Calculator Tools - USA/UK Focused
Version:     1.3
Author:      DeployFastHub
Author URI:  https://deployfasthub.com
Text Domain: gradehub
*/

/* ============================================================
   RESET & ROOT VARIABLES
   ============================================================ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --bg:            #f8faff;
    --bg2:           #f0f4ff;
    --white:         #ffffff;
    --card:          #ffffff;
    --border:        #e2e8f0;
    --border2:       #cbd5e1;

    --blue:          #3b5bdb;
    --blue-light:    #eef2ff;
    --blue-mid:      #4c6ef5;
    --blue-dark:     #2f4ac0;
    --blue-glow:     rgba(59, 91, 219, 0.15);

    --green:         #0ca678;
    --green-light:   #e6fcf5;

    --amber:         #f59f00;
    --amber-light:   #fff9db;

    --red:           #f03e3e;
    --red-light:     #fff5f5;

    --purple:        #7048e8;
    --purple-light:  #f3f0ff;

    --text:          #1a202c;
    --text2:         #4a5568;
    --text3:         #a0aec0;

    --shadow-sm:     0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --shadow:        0 4px 16px rgba(0,0,0,0.08), 0 1px 4px rgba(0,0,0,0.04);
    --shadow-lg:     0 10px 40px rgba(0,0,0,0.10), 0 2px 8px rgba(0,0,0,0.06);
}

html {
    scroll-behavior: smooth;
}

body {
    background:   var(--bg);
    font-family:  'Inter', sans-serif;
    color:        var(--text);
    min-height:   100vh;
    overflow-x:   hidden;
    font-size:    15px;
    line-height:  1.6;
}

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
    position:        sticky;
    top:             0;
    z-index:         100;
    background:      rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    border-bottom:   1px solid var(--border);
    box-shadow:      var(--shadow-sm);
}

.header-inner {
    max-width:       1200px;
    margin:          0 auto;
    padding:         0 28px;
    height:          66px;
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             20px;
}

/* Logo */
.site-logo {
    display:         flex;
    align-items:     center;
    gap:             10px;
    text-decoration: none;
    flex-shrink:     0;
}

.logo-mark {
    width:            36px;
    height:           36px;
    background:       linear-gradient(135deg, var(--blue), var(--blue-mid));
    border-radius:    10px;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    font-size:        18px;
    box-shadow:       0 2px 10px var(--blue-glow);
}

.logo-text {
    font-family:  'Space Grotesk', sans-serif;
    font-size:    18px;
    font-weight:  700;
    color:        var(--text);
}

.logo-text span {
    color: var(--blue);
}

/* Navigation */
.main-nav {
    list-style:  none;
    display:     flex;
    align-items: center;
    gap:         2px;
}

.main-nav li a {
    display:         block;
    padding:         7px 13px;
    border-radius:   8px;
    font-size:       13px;
    font-weight:     500;
    color:           var(--text2);
    text-decoration: none;
    transition:      all 0.18s;
    white-space:     nowrap;
}

.main-nav li a:hover {
    color:      var(--blue);
    background: var(--blue-light);
}

.main-nav li.current-menu-item > a {
    color:       var(--blue);
    background:  var(--blue-light);
    font-weight: 600;
}

/* CTA nav button */
.nav-cta {
    background:  var(--blue) !important;
    color:       #fff !important;
    font-weight: 600 !important;
    box-shadow:  0 2px 10px var(--blue-glow) !important;
}

.nav-cta:hover {
    background: var(--blue-dark) !important;
    color:      #fff !important;
}

/* Mobile hamburger */
.menu-toggle {
    display:      none;
    background:   none;
    border:       1px solid var(--border);
    color:        var(--text);
    cursor:       pointer;
    padding:      7px 10px;
    border-radius: 8px;
    font-size:    18px;
    line-height:  1;
}

/* ============================================================
   SITE CONTENT WRAPPER
   ============================================================ */
.site-content {
    min-height: calc(100vh - 66px - 280px);
}

/* ============================================================
   HERO SECTION
   ============================================================ */
.site-hero {
    background:  linear-gradient(160deg, #f0f4ff 0%, #e8f0fe 50%, #f5f3ff 100%);
    border-bottom: 1px solid var(--border);
    padding:     72px 28px 64px;
    text-align:  center;
    position:    relative;
    overflow:    hidden;
}

/* Decorative blobs */
.site-hero::before {
    content:        '';
    position:       absolute;
    top:            -100px;
    right:          -100px;
    width:          400px;
    height:         400px;
    border-radius:  50%;
    background:     radial-gradient(circle, rgba(59,91,219,0.08) 0%, transparent 70%);
    pointer-events: none;
}

.site-hero::after {
    content:        '';
    position:       absolute;
    bottom:         -80px;
    left:           -80px;
    width:          300px;
    height:         300px;
    border-radius:  50%;
    background:     radial-gradient(circle, rgba(112,72,232,0.07) 0%, transparent 70%);
    pointer-events: none;
}

.hero-inner {
    max-width: 680px;
    margin:    0 auto;
    position:  relative;
    z-index:   1;
}

.hero-badge {
    display:       inline-flex;
    align-items:   center;
    gap:           6px;
    background:    var(--blue-light);
    border:        1px solid rgba(59,91,219,0.2);
    border-radius: 20px;
    padding:       5px 14px;
    font-size:     12px;
    font-weight:   600;
    color:         var(--blue);
    letter-spacing: 0.04em;
    margin-bottom: 22px;
}

.hero-title {
    font-family:    'Space Grotesk', sans-serif;
    font-size:      clamp(32px, 5.5vw, 52px);
    font-weight:    700;
    line-height:    1.15;
    color:          var(--text);
    margin-bottom:  16px;
    letter-spacing: -0.02em;
}

.hero-title span {
    color: var(--blue);
}

.hero-sub {
    font-size:     16px;
    font-weight:   400;
    color:         var(--text2);
    line-height:   1.65;
    margin-bottom: 32px;
}

/* Hero pills row */
.hero-pills {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             10px;
    flex-wrap:       wrap;
}

.hero-pill {
    display:         inline-flex;
    align-items:     center;
    gap:             6px;
    background:      var(--white);
    border:          1px solid var(--border);
    border-radius:   20px;
    padding:         7px 14px;
    font-size:       13px;
    font-weight:     500;
    color:           var(--text2);
    box-shadow:      var(--shadow-sm);
}

.hero-pill .icon {
    font-size: 14px;
}

/* ============================================================
   STATS STRIP
   ============================================================ */
.stats-strip {
    background: var(--blue);
    padding:    24px 28px;
}

.stats-inner {
    max-width:             1200px;
    margin:                0 auto;
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   16px;
    text-align:            center;
}

.strip-stat .val {
    font-family:   'Space Grotesk', sans-serif;
    font-size:     26px;
    font-weight:   700;
    color:         #fff;
    display:       block;
    line-height:   1;
    margin-bottom: 4px;
}

.strip-stat .lbl {
    font-size:   12px;
    color:       rgba(255, 255, 255, 0.7);
    font-weight: 500;
}

/* ============================================================
   TOOLS SECTION (homepage)
   ============================================================ */
.tools-section {
    max-width: 1200px;
    margin:    0 auto;
    padding:   48px 28px 80px;
}

/* Section label row */
.sec-label {
    display:     flex;
    align-items: center;
    gap:         10px;
    margin-bottom: 20px;
}

.sec-label-text {
    font-size:      11px;
    font-weight:    700;
    color:          var(--text3);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    white-space:    nowrap;
}

.sec-line {
    flex:       1;
    height:     1px;
    background: var(--border);
}

.sec-count {
    font-size:     11px;
    font-weight:   600;
    color:         var(--text3);
    background:    var(--bg2);
    border:        1px solid var(--border);
    padding:       2px 8px;
    border-radius: 20px;
    white-space:   nowrap;
}

/* Tools grid */
.tools-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap:                   16px;
    margin-bottom:         48px;
}

/* Tool Card */
.tool-card {
    display:         flex;
    flex-direction:  column;
    background:      var(--card);
    border:          1.5px solid var(--border);
    border-radius:   16px;
    padding:         22px;
    text-decoration: none;
    color:           var(--text);
    transition:      all 0.22s;
    position:        relative;
    overflow:        hidden;
    box-shadow:      var(--shadow-sm);
}

.tool-card:hover {
    border-color: var(--blue);
    box-shadow:   var(--shadow), 0 0 0 1px rgba(59,91,219,0.08);
    transform:    translateY(-3px);
}

.tool-card-top {
    display:         flex;
    align-items:     flex-start;
    justify-content: space-between;
    margin-bottom:   14px;
}

.tool-icon-wrap {
    width:            46px;
    height:           46px;
    border-radius:    12px;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    font-size:        22px;
    flex-shrink:      0;
}

.icon-blue   { background: var(--blue-light); }
.icon-green  { background: var(--green-light); }
.icon-purple { background: var(--purple-light); }
.icon-amber  { background: var(--amber-light); }

/* Card badges */
.tool-badge {
    font-size:      10px;
    font-weight:    700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding:        3px 8px;
    border-radius:  20px;
}

.badge-free    { background: var(--green-light);  color: var(--green);  border: 1px solid rgba(12,166,120,0.2); }
.badge-popular { background: var(--amber-light);  color: var(--amber);  border: 1px solid rgba(245,159,0,0.2); }
.badge-new     { background: var(--purple-light); color: var(--purple); border: 1px solid rgba(112,72,232,0.2); }

.tool-name {
    font-family:   'Space Grotesk', sans-serif;
    font-size:     16px;
    font-weight:   700;
    color:         var(--text);
    margin-bottom: 6px;
    line-height:   1.3;
}

.tool-desc {
    font-size:   13px;
    color:       var(--text2);
    line-height: 1.55;
    flex:        1;
}

.tool-footer {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    margin-top:      16px;
    padding-top:     14px;
    border-top:      1px solid var(--border);
}

.tool-use {
    font-size:   12px;
    font-weight: 600;
    color:       var(--blue);
    display:     flex;
    align-items: center;
    gap:         4px;
}

.tool-users {
    font-size:   11px;
    color:       var(--text3);
    display:     flex;
    align-items: center;
    gap:         4px;
}

/* ============================================================
   WHY SECTION (homepage)
   ============================================================ */
.why-section {
    background:    var(--white);
    border-top:    1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding:       64px 28px;
}

.why-inner {
    max-width: 1200px;
    margin:    0 auto;
}

.why-header {
    text-align:    center;
    margin-bottom: 44px;
}

.why-title {
    font-family:    'Space Grotesk', sans-serif;
    font-size:      clamp(24px, 3.5vw, 34px);
    font-weight:    700;
    color:          var(--text);
    letter-spacing: -0.02em;
    margin-bottom:  10px;
}

.why-title span {
    color: var(--blue);
}

.why-sub {
    font-size: 15px;
    color:     var(--text2);
}

.why-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap:                   20px;
}

.why-card {
    background:    var(--bg);
    border:        1.5px solid var(--border);
    border-radius: 16px;
    padding:       24px 20px;
    transition:    all 0.2s;
}

.why-card:hover {
    border-color: var(--blue);
    box-shadow:   var(--shadow-sm);
    transform:    translateY(-2px);
}

.why-icon-wrap {
    width:           48px;
    height:          48px;
    border-radius:   12px;
    background:      var(--blue-light);
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       22px;
    margin-bottom:   14px;
}

.why-heading {
    font-size:     15px;
    font-weight:   700;
    color:         var(--text);
    margin-bottom: 8px;
}

.why-text {
    font-size:   13px;
    color:       var(--text2);
    line-height: 1.6;
}

/* ============================================================
   TOOL PAGE LAYOUT
   ============================================================ */
.tool-page-wrap {
    max-width: 1100px;
    width:     100%;
    margin:    0 auto;
    padding:   40px 32px 80px;
}

.tool-breadcrumb {
    font-size:    13px;
    color:        var(--text3);
    margin-bottom: 14px;
    display:      flex;
    align-items:  center;
    gap:          6px;
}

.tool-breadcrumb a {
    color:           var(--blue);
    text-decoration: none;
    font-weight:     500;
}

.tool-breadcrumb a:hover {
    text-decoration: underline;
}

.tool-breadcrumb .sep {
    color: var(--border2);
}

.tool-page-title {
    font-family:    'Space Grotesk', sans-serif;
    font-size:      clamp(26px, 4vw, 40px);
    font-weight:    700;
    color:          var(--text);
    letter-spacing: -0.02em;
    margin-bottom:  8px;
    line-height:    1.2;
}

.tool-page-desc {
    font-size:     15px;
    color:         var(--text2);
    line-height:   1.65;
    margin-bottom: 28px;
    max-width:     680px;
}

/* Force embedded tools full width */
.tool-content > * { max-width: 100% !important; }
.tool-content > div,
.tool-content [class*="wrap"],
.tool-content [class*="page"],
.tool-content [class*="calc"] {
    max-width: 100% !important;
    width:     100% !important;
}

/* ── Prose inside tool pages ── */
.tool-content h2 {
    font-family:    'Space Grotesk', sans-serif;
    font-size:      20px;
    font-weight:    700;
    color:          var(--text);
    margin:         36px 0 12px;
    padding-bottom: 10px;
    border-bottom:  2px solid var(--border);
}

.tool-content h3 {
    font-size:    16px;
    font-weight:  600;
    color:        var(--text);
    margin:       22px 0 8px;
}

.tool-content p {
    font-size:     15px;
    color:         var(--text2);
    line-height:   1.75;
    margin-bottom: 14px;
}

.tool-content ul,
.tool-content ol {
    padding-left:  22px;
    margin-bottom: 16px;
}

.tool-content li {
    font-size:     15px;
    color:         var(--text2);
    line-height:   1.7;
    margin-bottom: 6px;
}

/* Tables */
.tool-content table {
    width:           100%;
    border-collapse: collapse;
    margin:          20px 0;
    font-size:       14px;
    border-radius:   12px;
    overflow:        hidden;
    box-shadow:      var(--shadow-sm);
}

.tool-content table th {
    background:     var(--blue);
    color:          #fff;
    font-size:      12px;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding:        12px 16px;
    text-align:     left;
}

.tool-content table td {
    padding:       11px 16px;
    border-bottom: 1px solid var(--border);
    color:         var(--text2);
}

.tool-content table tr:hover td {
    background: var(--blue-light);
}

.tool-content table tr:last-child td {
    border-bottom: none;
}

/* ── FAQ ── */
.faq-item {
    background:    var(--white);
    border:        1.5px solid var(--border);
    border-radius: 12px;
    padding:       18px 22px;
    margin-bottom: 10px;
    transition:    border-color 0.2s;
}

.faq-item:hover {
    border-color: var(--blue);
}

.faq-q {
    font-size:     15px;
    font-weight:   700;
    color:         var(--text);
    margin-bottom: 8px;
    display:       flex;
    align-items:   flex-start;
    gap:           8px;
}

.faq-q::before {
    content:     'Q';
    color:       var(--blue);
    font-weight: 800;
    flex-shrink: 0;
}

.faq-a {
    font-size:   14px;
    color:       var(--text2);
    line-height: 1.65;
    padding-left: 20px;
}

/* ============================================================
   STATIC PAGES (About, Contact, Privacy, Disclaimer)
   ============================================================ */
.static-page-wrap {
    max-width: 820px;
    margin:    0 auto;
    padding:   48px 32px 80px;
}

.static-hero {
    background:    linear-gradient(135deg, var(--blue-light), var(--purple-light));
    border-radius: 20px;
    padding:       36px;
    margin-bottom: 36px;
    text-align:    center;
    border:        1.5px solid rgba(59,91,219,0.15);
}

.static-hero h1 {
    font-family:    'Space Grotesk', sans-serif;
    font-size:      clamp(26px, 4vw, 38px);
    font-weight:    700;
    color:          var(--text);
    letter-spacing: -0.02em;
    margin-bottom:  10px;
}

.static-hero p {
    font-size:   15px;
    color:       var(--text2);
    line-height: 1.6;
}

.info-box {
    background:    var(--blue-light);
    border:        1.5px solid rgba(59,91,219,0.2);
    border-radius: 12px;
    padding:       16px 20px;
    margin-bottom: 24px;
    font-size:     13px;
    color:         var(--blue);
    font-weight:   500;
}

.warn-box {
    background:    var(--amber-light);
    border:        1.5px solid rgba(245,159,0,0.25);
    border-radius: 12px;
    padding:       16px 20px;
    margin-bottom: 24px;
    font-size:     13px;
    color:         #b45309;
    font-weight:   500;
}

.static-content h2 {
    font-family:    'Space Grotesk', sans-serif;
    font-size:      20px;
    font-weight:    700;
    color:          var(--text);
    margin:         32px 0 12px;
    padding-bottom: 10px;
    border-bottom:  2px solid var(--border);
}

.static-content h3 {
    font-size:    16px;
    font-weight:  600;
    color:        var(--text);
    margin:       20px 0 8px;
}

.static-content p {
    font-size:     15px;
    color:         var(--text2);
    line-height:   1.75;
    margin-bottom: 14px;
}

.static-content ul,
.static-content ol {
    padding-left:  22px;
    margin-bottom: 16px;
}

.static-content li {
    font-size:     15px;
    color:         var(--text2);
    line-height:   1.7;
    margin-bottom: 7px;
}

.static-content a {
    color:           var(--blue);
    text-decoration: none;
}

.static-content a:hover {
    text-decoration: underline;
}

/* Contact form */
.contact-form-wrap {
    background:    var(--white);
    border:        1.5px solid var(--border);
    border-radius: 16px;
    padding:       32px;
    margin-bottom: 36px;
}

.cf-row {
    display:       grid;
    grid-template-columns: 1fr 1fr;
    gap:           16px;
    margin-bottom: 16px;
}

.cf-field {
    display:       flex;
    flex-direction: column;
    gap:           6px;
}

.cf-field.full {
    grid-column: 1 / -1;
}

.cf-field label {
    font-size:   13px;
    font-weight: 600;
    color:       var(--text2);
}

.cf-field input,
.cf-field textarea,
.cf-field select {
    background:    var(--bg);
    border:        1.5px solid var(--border);
    border-radius: 10px;
    padding:       11px 14px;
    font-family:   'Inter', sans-serif;
    font-size:     14px;
    color:         var(--text);
    outline:       none;
    transition:    border-color 0.2s, box-shadow 0.2s;
    width:         100%;
}

.cf-field input:focus,
.cf-field textarea:focus {
    border-color: var(--blue);
    box-shadow:   0 0 0 3px var(--blue-glow);
}

.cf-field textarea {
    min-height: 130px;
    resize:     vertical;
}

.cf-submit {
    background:    var(--blue);
    color:         #fff;
    border:        none;
    border-radius: 10px;
    padding:       13px 28px;
    font-family:   'Space Grotesk', sans-serif;
    font-size:     15px;
    font-weight:   700;
    cursor:        pointer;
    transition:    background 0.18s, transform 0.1s;
    margin-top:    8px;
}

.cf-submit:hover {
    background: var(--blue-dark);
    transform:  translateY(-1px);
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
    background: #1a202c;
    color:      #e2e8f0;
    padding:    56px 28px 28px;
}

.footer-inner {
    max-width: 1200px;
    margin:    0 auto;
}

.footer-top {
    display:               grid;
    grid-template-columns: 1.4fr repeat(3, 1fr);
    gap:                   48px;
    padding-bottom:        40px;
    border-bottom:         1px solid rgba(255,255,255,0.08);
    margin-bottom:         28px;
}

.footer-logo {
    font-family:     'Space Grotesk', sans-serif;
    font-size:       20px;
    font-weight:     700;
    color:           #fff;
    text-decoration: none;
    display:         flex;
    align-items:     center;
    gap:             9px;
    margin-bottom:   12px;
}

.footer-logo-mark {
    width:           32px;
    height:          32px;
    border-radius:   8px;
    background:      linear-gradient(135deg, var(--blue), var(--blue-mid));
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       15px;
}

.footer-logo span {
    color: #748ffc;
}

.footer-tagline {
    font-size:   13px;
    color:       #718096;
    line-height: 1.65;
}

.footer-col h4 {
    font-size:      11px;
    font-weight:    700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:          #718096;
    margin-bottom:  16px;
}

.footer-col a {
    display:         block;
    font-size:       13px;
    font-weight:     500;
    color:           #a0aec0;
    text-decoration: none;
    margin-bottom:   10px;
    transition:      color 0.18s;
}

.footer-col a:hover {
    color: #748ffc;
}

.footer-bottom {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    flex-wrap:       wrap;
    gap:             10px;
}

.footer-copy {
    font-size: 12px;
    color:     #4a5568;
}

.footer-copy a {
    color:           #748ffc;
    text-decoration: none;
}

.footer-links {
    display: flex;
    gap:     16px;
}

.footer-links a {
    font-size:       12px;
    color:           #4a5568;
    text-decoration: none;
    transition:      color 0.18s;
}

.footer-links a:hover {
    color: #748ffc;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
    .footer-top {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
    }
}

@media (max-width: 768px) {
    /* Mobile nav */
    .main-nav {
        display:        none;
        position:       absolute;
        top:            66px;
        left:           0;
        right:          0;
        background:     #fff;
        border-bottom:  1px solid var(--border);
        padding:        12px 16px;
        flex-direction: column;
        box-shadow:     var(--shadow);
        z-index:        99;
    }

    .main-nav.open {
        display: flex;
    }

    .menu-toggle {
        display: block;
    }

    .header-inner {
        flex-wrap: wrap;
        height:    auto;
        padding:   12px 16px;
    }

    .stats-inner {
        grid-template-columns: repeat(2, 1fr);
    }

    .tools-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }

    .site-hero {
        padding: 48px 20px 44px;
    }

    .tool-page-wrap {
        padding: 28px 20px 60px;
    }

    .static-page-wrap {
        padding: 28px 20px 60px;
    }

    .footer-top {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .cf-row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .tools-grid {
        grid-template-columns: 1fr;
    }

    .why-grid {
        grid-template-columns: 1fr 1fr;
    }

    .stats-inner {
        grid-template-columns: repeat(2, 1fr);
    }

    .hero-pills {
        gap: 7px;
    }
}