/*
Theme Name:  SemanticSEO Child
Theme URI:   https://semanticseo.io
Description: GeneratePress child theme for SemanticSEO.io. Semantically optimised, security-hardened, and plugin-friendly. Aligns with Google CompositeDoc structure, SAFT entity parsing, and topical authority embedding principles.
Author:      SemanticSEO.io
Author URI:  https://semanticseo.io
Template:    generatepress
Version:     1.0.0
Text Domain: semanticseo-child
Tags:        semantic-seo, dark, ai-agents, entity-optimised
*/

/* ============================================================
   DESIGN TOKENS
   All visual changes happen here. GeneratePress Customizer
   settings take precedence for typography and layout.
   These tokens cover brand colours, spacing, and radius.
   ============================================================ */

:root {
  /* Brand Colours */
  --ss-bg:          #07090F;
  --ss-bg-card:     #0D1120;
  --ss-bg-card-alt: #111827;
  --ss-border:      rgba(255, 255, 255, 0.07);
  --ss-border-hl:   rgba(99, 102, 241, 0.4);
  --ss-text:        #EEF2FF;
  --ss-muted:       #6B7A99;
  --ss-accent:      #6366F1;
  --ss-accent2:     #8B5CF6;
  --ss-cta:         #F59E0B;
  --ss-cta-hover:   #FBBF24;
  --ss-green:       #34D399;
  --ss-grad:        linear-gradient(135deg, #6366F1 0%, #8B5CF6 50%, #A78BFA 100%);

  /* Typography */
  --ss-font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --ss-size-h1:      clamp(32px, 5vw, 56px);
  --ss-size-h2:      clamp(24px, 3.5vw, 40px);
  --ss-size-h3:      clamp(20px, 2.5vw, 28px);
  --ss-size-h4:      clamp(17px, 2vw, 22px);
  --ss-size-body:    17px;
  --ss-line-body:    1.75;

  /* Spacing */
  --ss-section-y:    96px;
  --ss-section-y-sm: 64px;
  --ss-content-max:  1200px;
  --ss-radius:       12px;
  --ss-radius-lg:    20px;
}

/* ============================================================
   BASE OVERRIDES
   Only override what GeneratePress does not cover in
   Customizer. Do not add layout rules here — use GP settings.
   ============================================================ */

body {
  background-color: var(--ss-bg);
  color: var(--ss-text);
  font-family: var(--ss-font-body);
  font-size: var(--ss-size-body);
  line-height: var(--ss-line-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Heading scale — semantic hierarchy enforcement */
h1 { font-size: var(--ss-size-h1); font-weight: 900; line-height: 1.1; letter-spacing: -0.03em; }
h2 { font-size: var(--ss-size-h2); font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; }
h3 { font-size: var(--ss-size-h3); font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; }
h4 { font-size: var(--ss-size-h4); font-weight: 600; line-height: 1.3; }
h5, h6 { font-weight: 600; }

a { color: #A5B4FC; }
a:hover { color: var(--ss-text); }

/* ============================================================
   NAVIGATION
   Semantic nav — prevents NavBoost navDemotion.
   ============================================================ */

.main-navigation a { color: var(--ss-text); }
.main-navigation a:hover { color: var(--ss-accent); }

/* ============================================================
   SITE HEADER
   ============================================================ */

.site-header {
  background-color: rgba(7, 9, 15, 0.9);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--ss-border);
}

/* ============================================================
   CONTENT AREAS
   ============================================================ */

.entry-content,
.page-content {
  color: var(--ss-text);
}

.entry-content a,
.page-content a {
  color: #A5B4FC;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ============================================================
   BREADCRUMBS
   Aligns with BreadcrumbList schema — visual matches schema.
   ============================================================ */

.ss-breadcrumbs {
  padding: 12px 0;
  font-size: 13px;
  color: var(--ss-muted);
  border-bottom: 1px solid var(--ss-border);
  margin-bottom: 32px;
}

.ss-breadcrumbs a { color: var(--ss-muted); text-decoration: none; }
.ss-breadcrumbs a:hover { color: var(--ss-accent); }
.ss-breadcrumbs .sep { margin: 0 6px; opacity: 0.4; }
.ss-breadcrumbs .current { color: var(--ss-text); }

/* ============================================================
   CARDS / ARTICLE BLOCKS
   ============================================================ */

.post-card {
  background: var(--ss-bg-card);
  border: 1px solid var(--ss-border);
  border-radius: var(--ss-radius-lg);
  padding: 28px 24px;
  transition: border-color 0.2s, transform 0.2s;
}

.post-card:hover {
  border-color: var(--ss-border-hl);
  transform: translateY(-3px);
}

/* ============================================================
   BUTTONS — maps to CTA conversion (NavBoost goodClicks)
   ============================================================ */

.wp-block-button__link,
.button,
.btn {
  background-color: var(--ss-cta);
  color: #000;
  font-weight: 700;
  border-radius: 8px;
  border: none;
  transition: background-color 0.2s, transform 0.2s;
}

.wp-block-button__link:hover,
.button:hover,
.btn:hover {
  background-color: var(--ss-cta-hover);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(245, 158, 11, 0.3);
}

/* ============================================================
   SIDEBAR
   ============================================================ */

.widget-title { color: var(--ss-text); font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
.widget { border-bottom: 1px solid var(--ss-border); padding-bottom: 24px; margin-bottom: 24px; }

/* ============================================================
   FOOTER
   ============================================================ */

.site-footer {
  background-color: var(--ss-bg);
  border-top: 1px solid var(--ss-border);
  color: var(--ss-muted);
}

/* ============================================================
   ACCESSIBILITY — skip link (WCAG 2.1)
   ============================================================ */

.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--ss-accent);
  color: #fff;
  padding: 8px 16px;
  z-index: 9999;
  border-radius: 0 0 8px 0;
  font-size: 14px;
  font-weight: 600;
  transition: top 0.2s;
}

.skip-link:focus { top: 0; }

/* ============================================================
   GUTENBERG BLOCK OVERRIDES
   Ensure core blocks inherit brand colours and structure.
   ============================================================ */

.wp-block-quote {
  border-left: 3px solid var(--ss-accent);
  background: var(--ss-bg-card);
  padding: 20px 24px;
  border-radius: 0 var(--ss-radius) var(--ss-radius) 0;
  font-style: normal;
  color: var(--ss-text);
}

.wp-block-code,
pre {
  background: var(--ss-bg-card);
  border: 1px solid var(--ss-border);
  border-radius: var(--ss-radius);
  color: #A5B4FC;
  font-size: 14px;
  padding: 20px;
  overflow-x: auto;
}

.wp-block-table td,
.wp-block-table th {
  border: 1px solid var(--ss-border);
  padding: 12px;
}

.wp-block-table th {
  background: var(--ss-bg-card);
  font-weight: 700;
}

/* ============================================================
   MOBILE
   Prevent violatesMobileInterstitialPolicy signals.
   ============================================================ */

@media (max-width: 600px) {
  :root {
    --ss-section-y: 48px;
    --ss-section-y-sm: 32px;
  }

  /* No full-screen overlays on mobile */
  .popup-overlay,
  .cookie-overlay {
    max-height: 60vh;
  }
}