/*
Theme Name:   JustSEOTools Child
Theme URI:    https://justseotools.com
Description:  Lightweight child theme for justseotools.com — built on top of Hello Elementor. Adds the JustSEOTools brand palette, typography, and helper classes used by Elementor pages and the JustSEOTools Core plugin.
Author:       JustSEOTools
Author URI:   https://justseotools.com
Template:     hello-elementor
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:  justseotools-child
*/

/* -------------------------------------------------------------------------- */
/* 1. BRAND TOKENS — change these to recolor the whole site                   */
/* -------------------------------------------------------------------------- */
:root {
    --jst-primary:        #6366f1;   /* indigo */
    --jst-primary-dark:   #4f46e5;
    --jst-primary-light:  #818cf8;
    --jst-accent:         #8b5cf6;   /* violet */
    --jst-accent-2:       #06b6d4;   /* cyan, for secondary accents */

    --jst-success:        #10b981;
    --jst-warning:        #f59e0b;
    --jst-danger:         #ef4444;

    --jst-ink:            #0f172a;   /* near-black for headings */
    --jst-ink-2:          #1f2937;
    --jst-text:           #374151;
    --jst-text-muted:     #6b7280;
    --jst-text-subtle:    #9ca3af;

    --jst-bg:             #ffffff;
    --jst-bg-soft:        #f9fafb;
    --jst-bg-mute:        #f3f4f6;
    --jst-border:         #e5e7eb;
    --jst-border-strong:  #d1d5db;

    --jst-radius-sm: 6px;
    --jst-radius:    10px;
    --jst-radius-lg: 16px;
    --jst-radius-xl: 24px;

    --jst-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
    --jst-shadow:    0 4px 12px rgba(15, 23, 42, 0.08);
    --jst-shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.12);

    --jst-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --jst-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/* -------------------------------------------------------------------------- */
/* 2. BASE TYPOGRAPHY                                                         */
/* -------------------------------------------------------------------------- */
body {
    font-family: var(--jst-font-sans);
    color: var(--jst-text);
    background: var(--jst-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.65;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--jst-font-sans);
    color: var(--jst-ink);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
}
h1 { font-size: clamp(2rem, 4vw, 3.25rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.25rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); }

a { color: var(--jst-primary); text-decoration: none; transition: color .15s; }
a:hover { color: var(--jst-primary-dark); }

/* -------------------------------------------------------------------------- */
/* 3. ELEMENTOR HELPERS — utility classes you can drop on any widget          */
/* -------------------------------------------------------------------------- */

/* Gradient background block */
.jst-bg-gradient {
    background: linear-gradient(135deg, var(--jst-primary) 0%, var(--jst-accent) 100%);
    color: #fff;
}
.jst-bg-gradient h1,
.jst-bg-gradient h2,
.jst-bg-gradient h3 { color: #fff; }

.jst-bg-soft  { background: var(--jst-bg-soft); }
.jst-bg-mute  { background: var(--jst-bg-mute); }

/* Section padding */
.jst-section { padding: 80px 0; }
.jst-section-sm { padding: 48px 0; }

/* Card */
.jst-card-elementor {
    background: #fff;
    border: 1px solid var(--jst-border);
    border-radius: var(--jst-radius-lg);
    padding: 28px;
    box-shadow: var(--jst-shadow-sm);
    transition: transform .2s, box-shadow .2s, border-color .2s;
}
.jst-card-elementor:hover {
    transform: translateY(-3px);
    border-color: var(--jst-primary-light);
    box-shadow: var(--jst-shadow);
}

/* Pill / badge */
.jst-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(99, 102, 241, 0.1);
    color: var(--jst-primary);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

/* CTA button overrides for Elementor buttons */
.elementor-button.jst-cta {
    background: linear-gradient(135deg, var(--jst-primary) 0%, var(--jst-accent) 100%);
    color: #fff;
    border-radius: var(--jst-radius);
    padding: 14px 32px;
    font-weight: 600;
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.35);
    transition: transform .15s, box-shadow .15s;
}
.elementor-button.jst-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(99, 102, 241, 0.45);
}

/* Header tweaks for Hello Elementor */
.site-header { box-shadow: 0 1px 0 var(--jst-border); }

/* Improve default content width readability */
.entry-content { max-width: 760px; margin: 0 auto; }

/* -------------------------------------------------------------------------- */
/* 4. HERO PATTERNS                                                           */
/* -------------------------------------------------------------------------- */
.jst-hero {
    position: relative;
    overflow: hidden;
    padding: 96px 0 80px;
    background:
        radial-gradient(900px circle at 90% 10%, rgba(139, 92, 246, 0.12), transparent 50%),
        radial-gradient(700px circle at 10% 80%, rgba(6, 182, 212, 0.10), transparent 50%),
        var(--jst-bg);
}

/* -------------------------------------------------------------------------- */
/* 5. RESPONSIVE                                                              */
/* -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .jst-section { padding: 56px 0; }
    .jst-hero    { padding: 64px 0 48px; }
}