/*
Theme Name:   BabySwing Child
Theme URI:    https://babyswingclub.example/
Description:  Conversion-focused, safety-first Amazon Associates micro-niche child theme for baby swings. Built on GeneratePress. Author persona: Marcus Reid. Interactive Fit & Longevity Calculator, "Find Your Perfect Swing" Quiz, and a reusable review system.
Author:       Marcus Reid
Author URI:   https://babyswingclub.example/about/
Template:     generatepress
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:  babyswing-child
Tags:         affiliate, reviews, baby, blog
*/

/* =====================================================================
   BabySwing Child Theme — GLOBAL / THEME-LEVEL STYLES ONLY
   ---------------------------------------------------------------------
   HOUSE RULE: In-content widgets (calculator, quiz, review blocks,
   tables, callouts) are styled 100% INLINE so WordPress/GeneratePress
   never strips them. The rules below only theme the chrome: nav,
   footer, body type, links, headings, hero shell, generic page wrap.
   Design tokens are mirrored as CSS custom properties for theme use,
   but content widgets must NOT depend on them.
   ===================================================================== */

:root {
  --bs-primary:        #5b8a72; /* sage / calm green */
  --bs-primary-dark:   #2f4a3e; /* headings / nav */
  --bs-accent:         #e07a5f; /* warm coral CTA */
  --bs-accent-hover:   #c8624a;
  --bs-bg:             #faf6f0; /* warm cream */
  --bs-card:           #ffffff;
  --bs-text:           #3a3a3a;
  --bs-muted:          #6b6b6b;
  --bs-border:         #e8e0d6;
  --bs-radius:         14px;
  --bs-radius-sm:      12px;
  --bs-shadow:         0 6px 24px rgba(47, 74, 62, 0.10);
  --bs-shadow-sm:      0 2px 10px rgba(47, 74, 62, 0.08);
  --bs-font-head:      "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;
  --bs-font-body:      "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ---- Base ---- */
body {
  font-family: var(--bs-font-body);
  color: var(--bs-text);
  background-color: var(--bs-bg);
  line-height: 1.7;
  font-size: 17px;
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.site-title {
  font-family: var(--bs-font-head);
  color: var(--bs-primary-dark);
  line-height: 1.25;
  font-weight: 700;
}

h1 { font-size: 2.1rem; margin-bottom: 0.5em; }
h2 { font-size: 1.6rem; margin-top: 1.6em; }
h3 { font-size: 1.25rem; margin-top: 1.3em; }

a {
  color: var(--bs-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}
a:hover { color: var(--bs-primary-dark); }

/* ---- Layout wrap ---- */
.inside-article,
.entry-content { max-width: 100%; }

.entry-content img { height: auto; }

/* ---- Header / Nav (GeneratePress chrome) ---- */
.site-header {
  background-color: var(--bs-card);
  border-bottom: 1px solid var(--bs-border);
}
.main-navigation,
.main-navigation ul {
  background-color: var(--bs-primary-dark);
}
.main-navigation .main-nav ul li a {
  font-family: var(--bs-font-head);
  font-weight: 600;
  color: #f3efe8;
  letter-spacing: 0.2px;
}
.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li.current-menu-item > a {
  background-color: var(--bs-primary);
  color: #ffffff;
}
.site-logo, .site-branding .site-title a {
  color: var(--bs-primary-dark);
  font-family: var(--bs-font-head);
  font-weight: 700;
}

/* ---- Buttons (theme-level; in-content CTAs remain inline) ---- */
.bs-btn {
  display: inline-block;
  font-family: var(--bs-font-head);
  font-weight: 600;
  background-color: var(--bs-accent);
  color: #ffffff !important;
  text-decoration: none;
  padding: 14px 26px;
  border-radius: var(--bs-radius-sm);
  border: none;
  box-shadow: var(--bs-shadow-sm);
  transition: background-color .15s ease, transform .15s ease;
}
.bs-btn:hover { background-color: var(--bs-accent-hover); transform: translateY(-1px); }
.bs-btn--ghost {
  background-color: transparent;
  color: var(--bs-primary-dark) !important;
  border: 2px solid var(--bs-primary);
}
.bs-btn--ghost:hover { background-color: var(--bs-primary); color: #fff !important; }

/* ---- Footer ---- */
.site-footer,
.footer-widgets,
.site-info {
  background-color: var(--bs-primary-dark);
  color: #d9e2dc;
}
.site-info a, .footer-widgets a { color: #f3efe8; }
.site-info a:hover { color: #ffffff; }

/* ---- Hero shell (the inner SVG + content is inline-styled in templates) ---- */
.bs-hero {
  background: linear-gradient(160deg, #f3efe8 0%, var(--bs-bg) 100%);
  border-bottom: 1px solid var(--bs-border);
}

/* ---- FTC disclosure bar (theme-level; templates also carry inline copy) ---- */
.bs-ftc-bar {
  background-color: #fff7ed;
  border-bottom: 1px solid #f1d9c4;
  color: #7a5a3a;
  font-size: 0.85rem;
}

/* ---- Generic content cards used inside theme templates ---- */
.bs-card {
  background-color: var(--bs-card);
  border: 1px solid var(--bs-border);
  border-radius: var(--bs-radius);
  box-shadow: var(--bs-shadow-sm);
}

/* ---- Accessibility helpers ---- */
.bs-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
:focus-visible { outline: 3px solid var(--bs-accent); outline-offset: 2px; }

/* ---- Reduced motion: pause the hero swing animation ---- */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; }
}

/* ---- Responsive type ---- */
@media (max-width: 768px) {
  body { font-size: 16px; }
  h1 { font-size: 1.7rem; }
  h2 { font-size: 1.4rem; }
}
@media (max-width: 360px) {
  body { font-size: 15.5px; }
}