/*
Theme Name: GeneratePress Child SEO Reports
Theme URI: https://seo-reports.net
Author: Digital Turtle
Author URI: https://digitalturtle.com
Description: Child theme for the SEO Reports marketing microsite (seo-reports.net). Wraps the SEO Dave portal and hosts the public-facing product pages. Built on GeneratePress.
Template: generatepress
Version: 1.1.0
Text Domain: gp-child-seo-reports
*/

/* -----------------------------------------------------------------
 * SEO Reports brand tokens
 * Neutral palette chosen for a professional SaaS microsite. Tune once
 * Tom signs off on brand direction.
 * -------------------------------------------------------------- */
:root {
    --sr-fg:         #0f172a; /* slate-900 */
    --sr-fg-muted:   #475569; /* slate-600 */
    --sr-bg:         #ffffff;
    --sr-bg-alt:     #f8fafc; /* slate-50 */
    --sr-bg-dark:    #0f172a;
    --sr-fg-dark:    #e2e8f0; /* slate-200 */
    --sr-accent:     #2563eb; /* blue-600, primary CTA */
    --sr-accent-hi:  #1d4ed8; /* blue-700, hover */
    --sr-accent-bg:  #eff6ff; /* blue-50, subtle fill */
    --sr-success:    #059669; /* emerald-600 */
    --sr-warning:    #d97706; /* amber-600 */
    --sr-border:     #e2e8f0; /* slate-200 */
    --sr-radius:     8px;
    --sr-radius-lg:  14px;
    --sr-shadow-sm:  0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04);
    --sr-shadow-md:  0 4px 6px rgba(15, 23, 42, 0.07), 0 2px 4px rgba(15, 23, 42, 0.06);
    --sr-maxw:       1120px;
}

/* -----------------------------------------------------------------
 * Base typography + layout
 * Inter for body + display, IBM Plex Mono for numeric callouts.
 * Fonts are loaded via wp_enqueue_style('sr-google-fonts') in
 * functions.php with preconnect hints.
 * -------------------------------------------------------------- */
:root {
    --sr-font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --sr-font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
body {
    font-family: var(--sr-font-sans);
    color: var(--sr-fg);
    background: var(--sr-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6 {
    font-family: var(--sr-font-sans);
    color: var(--sr-fg);
    letter-spacing: -0.015em;
    font-weight: 600;
}
h1 { font-size: clamp(2.1rem, 4.5vw, 3.25rem); line-height: 1.08; letter-spacing: -0.02em; font-weight: 700; }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.15; }
h3 { font-size: 1.25rem; line-height: 1.3; }
p  { color: var(--sr-fg); line-height: 1.6; }
.lede { font-size: 1.15rem; color: var(--sr-fg-muted); max-width: 64ch; }
a { color: var(--sr-accent); text-decoration: none; }
a:hover, a:focus { color: var(--sr-accent-hi); text-decoration: underline; }

/* Monospace numeric callouts. Use on any number that would otherwise
 * read as plain text: "$75", "15-20 hrs", "+18% traffic", etc.  */
.sr-stat, .sr-mono { font-family: var(--sr-font-mono); font-weight: 500; }

/* -----------------------------------------------------------------
 * Reusable microsite components
 * Can be applied to Gutenberg blocks via the Advanced > Additional CSS
 * class field, or used directly from page templates.
 * -------------------------------------------------------------- */
.sr-container { max-width: var(--sr-maxw); margin: 0 auto; padding: 0 24px; }

.sr-hero {
    padding: 80px 24px 72px;
    background: var(--sr-bg);
    text-align: center;
    border-bottom: 1px solid var(--sr-border);
}
.sr-hero h1 { margin: 0 0 18px; max-width: 22ch; margin-left: auto; margin-right: auto; }
.sr-hero .lede { margin: 0 auto 28px; max-width: 60ch; }
.sr-hero p:last-child { margin-bottom: 0; }

/* Belt-and-suspenders: if the GP filter ever fails to run, still hide
 * the GP entry-title / entry-header on Pages. Each page template
 * already supplies its own H1 in the .sr-hero block. */
body.page .entry-header,
body.page .entry-title { display: none !important; }

.sr-btn {
    display: inline-block;
    padding: 12px 22px;
    border-radius: var(--sr-radius);
    background: var(--sr-accent);
    color: #ffffff !important;
    font-weight: 600;
    text-decoration: none !important;
    box-shadow: var(--sr-shadow-sm);
    transition: background 120ms ease, transform 120ms ease;
}
.sr-btn:hover, .sr-btn:focus {
    background: var(--sr-accent-hi);
    color: #ffffff !important;
    transform: translateY(-1px);
}
.sr-btn--ghost {
    background: transparent;
    color: var(--sr-accent) !important;
    border: 1px solid var(--sr-border);
    box-shadow: none;
}
.sr-btn--ghost:hover, .sr-btn--ghost:focus {
    background: var(--sr-accent-bg);
    color: var(--sr-accent-hi) !important;
}

.sr-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
}
.sr-card {
    background: var(--sr-bg);
    border: 1px solid var(--sr-border);
    border-radius: var(--sr-radius-lg);
    padding: 24px;
    box-shadow: var(--sr-shadow-sm);
}
.sr-card h3 { margin-top: 0; }

.sr-section { padding: 72px 0; }
.sr-section--alt { background: var(--sr-bg-alt); }
.sr-section--dark {
    background: var(--sr-bg-dark);
    color: var(--sr-fg-dark);
}
.sr-section--dark h1, .sr-section--dark h2, .sr-section--dark h3,
.sr-section--dark p { color: var(--sr-fg-dark); }

/* --------------------------------------------------------