/* The Parenting King — theparentingking.com
   Generated by _fix/theme.js. Do not edit by hand: edit the profile in
   _fix/profiles.js and re-run, or the next build will overwrite this.

   Personality : softcard
   Accent      : #0ea5e9
   Typefaces   : Poppins / Nunito Sans
   Loaded after the site's original stylesheet and overrides it additively. */

:root {
  --font-display: 'Poppins', system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-body: 'Nunito Sans', system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* The base stylesheets consume these, so re-declaring them re-skins the
     page without touching a single original rule. */
  --accent: #0ea5e9;
  --accent-light: #47f5e0;
  --accent-dark: #0b83b9;
  --accent-text: #0b7caf;
  --accent-soft: #e2f4fc;
  --bg-primary: #f6fafb;
  --bg-secondary: #ffffff;
  --bg-card: #ffffff;
  --bg-glass: rgba(22,30,34,0.04);
  --text-primary: #161e22;
  --text-secondary: #516067;
  --text-muted: #819198;
  --border: rgba(22,30,34,0.12);
  --radius: 22px;
  --radius-sm: 16px;
  --shadow: 0 10px 34px rgba(22,30,34,0.08);
  --gold: #47f5e0;
  --sakura: #0ea5e9;
}

/* Several base sheets hard-code Noto Sans JP — Japanese faces that were copied
   from newintokyo.com onto English-language sites. Override the family rather
   than the elements, so anything the base sheet styles inherits it. */
body, input, select, textarea, button { font-family: var(--font-body); }
h1, h2, h3, h4, h5, h6,
.section-title, .site-logo span, .logo-text-group span:first-child,
.hero h1, .blog-card h3, .card h3, .la-title {
  font-family: var(--font-display);
}

body { background: #f6fafb; color: #161e22; }
a { color: #0b7caf; }
a:hover { color: #085a7f; }

/* The masthead wordmark. Most templates render the name as text beside the
   badge; a few had an image-only logo and get the text injected by
   _fix/apply.js, so both paths land on the same styling here. */
.site-logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.site-logo img { max-height: 42px; width: auto; flex-shrink: 0; }
/* Six sites hide the wordmark with display:none !important, because their
   old logo image had the name drawn into it. The mark is now a square badge,
   so the name has to come back as text — which takes !important to undo. */
.logo-text-group, .site-logo .logo-text-group {
  display: flex !important; flex-direction: column; line-height: 1.15; min-width: 0;
}
.logo-text-group span:first-child {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.16rem; letter-spacing: -.01em; color: #161e22;
  white-space: nowrap;
  /* Some base sheets paint the wordmark with a clipped gradient plus
     -webkit-text-fill-color: transparent. Left alone that beats the color
     declaration above and the name renders invisible or in the old palette. */
  background: none; -webkit-background-clip: border-box; -webkit-text-fill-color: currentColor;
}
.header-tagline { font-size: .72rem; color: #819198; font-weight: 500; white-space: nowrap; }

/* ============ PERSONALITY: softcard ============ */

.site-header { background:rgba(255,255,255,0.9); border-bottom:1px solid rgba(22,30,34,0.12); }
.main-nav > a { border-radius:999px; padding:8px 14px; font-weight:600; }
.main-nav > a:hover, .main-nav > a.active { background:#e2f4fc; color:#0b7caf; }
.blog-card, .card, .la-card, .sidebar-widget, .toc-container {
  border:1px solid rgba(22,30,34,0.12); box-shadow:0 8px 26px rgba(22,30,34,0.07); background:#ffffff; }
.blog-card:hover, .card:hover { transform:translateY(-6px); box-shadow:0 18px 44px rgba(14,165,233,0.2); }
.section-title { font-weight:700; letter-spacing:-.01em; }

/* ============ INFO & LEGAL PAGES ============
   About / Contact / Privacy / Terms / Editorial Policy / Disclaimer are
   generated by _fix/pages.js against this markup. */
.page-hero {
  padding: calc(var(--header-h, 72px) + 56px) 0 44px;
  background: linear-gradient(135deg, rgba(14,165,233,0.12), rgba(71,245,224,0.05));
  border-bottom: 1px solid rgba(22,30,34,0.12);
}
.page-hero .container { max-width: 820px; }
.page-hero h1 { font-family: var(--font-display); font-size: clamp(1.9rem, 4.4vw, 2.9rem); line-height: 1.14; margin-bottom: 14px; color: #161e22; }
.page-hero p { color: #516067; font-size: 1.06rem; max-width: 62ch; }
.page-hero .page-eyebrow {
  display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: #0b7caf; margin-bottom: 14px;
}

.legal-wrap { padding: 52px 0 72px; }
.legal-wrap .container { max-width: 820px; }
.legal-body { color: #516067; font-size: 1.02rem; line-height: 1.8; }
.legal-body h2 {
  font-family: var(--font-display); color: #161e22;
  font-size: clamp(1.25rem, 2.6vw, 1.55rem); margin: 40px 0 14px; line-height: 1.3;
}
.legal-body h3 { color: #161e22; font-size: 1.08rem; margin: 26px 0 10px; font-weight: 700; }
.legal-body p { margin-bottom: 16px; }
.legal-body ul, .legal-body ol { margin: 0 0 18px 22px; }
.legal-body li { margin-bottom: 9px; }
.legal-body strong { color: #161e22; }
.legal-body a { color: #0b7caf; text-decoration: underline; text-underline-offset: 3px; }
.legal-updated {
  display: inline-block; padding: 7px 14px; border-radius: 999px;
  background: #e2f4fc; color: #0b7caf;
  font-size: .8rem; font-weight: 600; margin-bottom: 8px;
}
.legal-note {
  border-left: 4px solid #0ea5e9; background: #e2f4fc;
  padding: 16px 20px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; margin: 26px 0;
}
.legal-note p:last-child { margin-bottom: 0; }
.legal-toc {
  background: #ffffff; border: 1px solid rgba(22,30,34,0.12);
  border-radius: var(--radius-sm); padding: 20px 24px; margin: 0 0 36px;
}
.legal-toc h2 { margin: 0 0 12px; font-size: 1rem; }
.legal-toc ol { margin: 0 0 0 20px; }
.legal-toc li { margin-bottom: 6px; }

.contact-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px; margin: 0 0 42px;
}
.contact-card {
  background: #ffffff; border: 1px solid rgba(22,30,34,0.12);
  border-radius: var(--radius-sm); padding: 24px;
}
.contact-card .card-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 12px;
  background: #e2f4fc; color: #0b7caf;
  font-size: 1.15rem; margin-bottom: 14px;
}
.contact-card h3 { font-family: var(--font-display); font-size: 1.02rem; margin-bottom: 8px; color: #161e22; }
.contact-card p { color: #516067; font-size: .95rem; margin: 0; line-height: 1.65; }
.contact-card a { color: #0b7caf; word-break: break-word; }

.contact-form {
  background: #ffffff; border: 1px solid rgba(22,30,34,0.12);
  border-radius: var(--radius-sm); padding: clamp(22px, 4vw, 34px);
}
.contact-form h2 { font-family: var(--font-display); margin-bottom: 6px; color: #161e22; }
.contact-form > p { color: #819198; margin-bottom: 22px; font-size: .95rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-weight: 600; font-size: .87rem; margin-bottom: 7px; color: #161e22; }
.form-group input, .form-group select, .form-group textarea {
  width: 100%; padding: 12px 14px; border-radius: var(--radius-sm);
  border: 1px solid rgba(22,30,34,0.12); background: #fff;
  color: #161e22; font-family: var(--font-body); font-size: .97rem;
}
.form-group textarea { min-height: 140px; resize: vertical; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  outline: none; border-color: #0ea5e9; box-shadow: 0 0 0 3px rgba(14,165,233,0.18);
}
.form-submit {
  background: #0ea5e9; color: #fff; border: 0; cursor: pointer;
  padding: 14px 30px; border-radius: var(--radius-sm);
  font-family: var(--font-body); font-weight: 700; font-size: .98rem;
  min-height: 46px; transition: var(--transition, .2s);
}
.form-submit:hover { background: #0c8ac3; }
.form-status { margin-top: 14px; font-size: .93rem; font-weight: 600; color: #0b7caf; }

@media (max-width: 620px) {
  .form-row { grid-template-columns: 1fr; }
  .page-hero { padding: calc(var(--header-h, 60px) + 34px) 0 30px; }
  .legal-wrap { padding: 34px 0 52px; }
}

/* ============ HUB PAGES ============
   The 1,016 hub pages carry their own inline <style> with hardcoded navy
   (#1e3a5f / #2a5298 on #f8f9fa) and Segoe UI — identical on all 81 sites and
   unrelated to any of them. theme.css is linked after that block, so these
   rules win and the hubs finally match the site they belong to. */
.hub-header {
  background: linear-gradient(135deg, #0ea5e9, #47f5e0) !important;
  color: #fff !important;
  padding: clamp(38px, 7vw, 64px) 20px !important;
  margin-top: var(--header-h, 72px) !important;
  text-align: center;
}
.hub-header h1 {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 4.5vw, 2.5rem) !important;
  line-height: 1.15; margin-bottom: 10px; color: #fff;
}
.hub-header p { color: rgba(255,255,255,0.86); font-size: 1rem; }

.hub-grid {
  max-width: var(--max-width, 1200px) !important;
  padding: 0 20px !important;
  margin: clamp(26px, 5vw, 44px) auto !important;
  gap: clamp(16px, 2.4vw, 26px) !important;
}
.hub-card {
  background: #ffffff !important;
  border: 1px solid rgba(22,30,34,0.12) !important;
  border-radius: var(--radius) !important;
  box-shadow: 0 6px 22px rgba(22,30,34,0.07) !important;
  overflow: hidden;
}
.hub-card:hover { transform: translateY(-4px); border-color: #0ea5e9 !important; }
.hub-card img { height: clamp(160px, 22vw, 210px) !important; object-fit: cover; }
.hub-card-body h2 { font-family: var(--font-display); font-size: 1.1rem !important; line-height: 1.32; }
.hub-card-body h2 a { color: #161e22 !important; text-decoration: none; }
.hub-card-body h2 a:hover { color: #0b7caf !important; }
.hub-card-body p { color: #516067 !important; }
.hub-card-meta { border-top: 1px solid rgba(22,30,34,0.12) !important; color: #819198 !important; }

/* Taboola units placed on the hubs by _fix/hubads.js. Reserve height so the
   listing does not jump when a unit fills. */
.tb-unit { min-height: 90px; }

@media (max-width: 560px) {
  .hub-header { margin-top: var(--header-h, 60px) !important; }
}

/* Footer — shared shape, brand colours. */
.site-footer { background: #151c20; color: rgba(255,255,255,0.8); }
.site-footer h3 { color: #fff; font-family: var(--font-display); font-size: 1rem; letter-spacing: .02em; }
.site-footer a { color: rgba(255,255,255,0.78); }
.site-footer a:hover { color: #47f5e0; }
.footer-links-bar { border-top: 1px solid rgba(255,255,255,0.14); border-bottom: 1px solid rgba(255,255,255,0.14); }
.footer-bottom { color: rgba(255,255,255,0.55); }


/* ============ RESPONSIVE / MOBILE ============
   The base sheets only swap the nav at 768px. Between 769px and ~900px the
   full desktop nav (up to 29 category links on some sites) overflowed the
   header and forced the whole page into horizontal scroll. The switch happens
   at 1000px here, and every multi-column grid collapses with it. */

/* Nothing may push the page sideways. */
html, body { max-width: 100%; overflow-x: hidden; }
img, video, iframe, table, pre, canvas { max-width: 100%; }
img, video { height: auto; }
pre, code { white-space: pre-wrap; word-wrap: break-word; overflow-wrap: anywhere; }
table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
h1, h2, h3, .section-title, .blog-card h3, .card h3 { overflow-wrap: break-word; hyphens: auto; }

/* Taboola injects fixed-width units on some templates; keep them in the column. */
[id^="taboola"], .trc_rbox_container { max-width: 100%; overflow: hidden; }

/* A grid or flex item defaults to min-width:auto, which means it refuses to
   shrink below the intrinsic width of its content. On a 390px screen the hero
   tiles were therefore ~520px wide and the headline ran off the right edge
   even though the grid had correctly collapsed to a single column. This is the
   actual cause of the horizontal overflow on every one of these templates. */
.hero-grid > *, .blog-grid > *, .la-top-row > *, .la-list > *,
.cat-spotlight-grid > *, .bottom-banner-grid > *, .footer-grid > *,
.featured-card > *, .content-with-sidebar > *, .contact-grid > * { min-width: 0; }

.hero-tile, .hero-tile-overlay, .card-body, .blog-card, .la-card { max-width: 100%; }
.hero-tile h1, .hero-tile h2, .hero-tile h3, .hero-tile-overlay h2, .hero-tile-overlay h3 {
  overflow-wrap: anywhere;
}

/* The masthead is a flex row of [logo] [nav] [toggle]. The logo must be
   allowed to shrink, or on a narrow screen it holds the row open and pushes
   the menu button off the edge — which left mobile visitors with no
   navigation at all once the desktop nav was hidden. */
.header-inner { gap: 12px; }
.site-logo { min-width: 0; flex: 0 1 auto; overflow: hidden; }
.logo-text-group { min-width: 0; }
.menu-toggle { flex: 0 0 auto; margin-left: auto; }

/* The header has a fixed height, so a nav item that wraps to a second line
   spills out of it and lands on the page. Some of these sites carry two-word
   category labels ("Mental Health") in a nav of eight items, which wraps at
   anything under about 1250px. Keep every label on one line and tighten the
   row instead. */
.main-nav > a, .nav-dropdown > a { white-space: nowrap; }
.main-nav { min-width: 0; flex-wrap: nowrap; }

@media (min-width: 1001px) and (max-width: 1279px) {
  .main-nav { gap: 12px; }
  .main-nav > a, .nav-dropdown > a { font-size: .78rem; letter-spacing: 0; }
  .header-tagline { display: none; }
}

@media (max-width: 1000px) {
  .main-nav { display: none !important; }
  .menu-toggle { display: flex !important; align-items: center; justify-content: center;
    width: 44px; height: 44px; font-size: 1.5rem; background: none; border: 0;
    color: inherit; cursor: pointer; border-radius: 8px; }
  .menu-toggle:hover { background: #e2f4fc; }
  .content-with-sidebar { grid-template-columns: 1fr !important; }
  .sidebar { position: static !important; width: auto !important; }
}

/* The slide-down panel the toggle opens. The markup and the JS already exist on
   these templates; only the styling was missing outside the 768px block. */
.mobile-nav {
  display: none; position: fixed; left: 0; right: 0; top: var(--header-h, 72px);
  background: #ffffff; border-bottom: 1px solid rgba(22,30,34,0.12);
  box-shadow: 0 18px 40px rgba(22,30,34,0.16);
  padding: 10px 16px calc(14px + env(safe-area-inset-bottom));
  max-height: calc(100vh - var(--header-h, 72px)); overflow-y: auto;
  -webkit-overflow-scrolling: touch; z-index: 999;
}
.mobile-nav.open { display: flex !important; flex-direction: column; gap: 2px; }
.mobile-nav a {
  display: block; padding: 13px 12px; border-radius: 10px;
  color: #161e22; font-weight: 600; font-size: .98rem; text-decoration: none;
  min-height: 44px; line-height: 1.3;
}
.mobile-nav a:hover, .mobile-nav a:focus { background: #e2f4fc; color: #0b7caf; }
body.nav-open { overflow: hidden; }

@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr !important; grid-template-rows: auto !important; height: auto !important; }
  .hero-tile { min-height: 210px; border-radius: var(--radius-sm) !important; }
  .la-top-row, .la-list, .blog-grid, .cat-spotlight-grid, .bottom-banner-grid,
  .featured-card, .footer-grid, .footer-grid-new {
    grid-template-columns: 1fr !important;
  }
  .la-card { height: auto !important; min-height: 200px; }
  .featured-card .card-image { min-height: 190px; }
  .section { padding: 40px 0 !important; }
  .footer-links-bar { flex-wrap: wrap; justify-content: center; gap: 10px 18px; }
  .footer-bottom { flex-direction: column; gap: 10px; text-align: center; }
}

@media (max-width: 560px) {
  :root { --header-h: 60px; }
  .site-header { height: 60px; }
  .container { padding-left: 16px; padding-right: 16px; }
  .site-logo img { max-height: 34px; }
  .header-tagline { display: none; }
  /* Shrink-and-ellipsis rather than wrap: a two-line brand name does not fit
     the 60px mobile header, and wrapping it crowds the menu button. Paired
     with min-width:0 on .site-logo above, this lets the name give way first. */
  .logo-text-group span:first-child {
    font-size: 1.02rem; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; max-width: 100%;
  }
  .section-title { font-size: clamp(1.25rem, 5.4vw, 1.6rem); }
  .hero h1, .article-header h1, .contact-hero h1, .page-hero h1 { font-size: clamp(1.55rem, 7vw, 2.1rem); line-height: 1.22; }
  .article-content { font-size: 1rem; }
  .article-content h2 { font-size: 1.25rem; }
  .blog-card h3, .card h3 { font-size: 1.02rem; }
  .pagination { flex-wrap: wrap; gap: 6px; }
  .scroll-top { width: 44px; height: 44px; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); }
  .contact-cards, .contact-grid { grid-template-columns: 1fr !important; }
}

/* iOS zooms the page when a focused input is under 16px. */
@media (max-width: 860px) {
  input, select, textarea { font-size: 16px !important; }
}

/* Touch targets. WCAG asks for 44px; the base sheets had ~28px nav links. */
@media (hover: none) {
  .footer-links-bar a, .pagination a, .category-nav a { min-height: 44px; display: inline-flex; align-items: center; }
}

/* Respect the OS setting — several base sheets animate the body background
   forever, which is costly on a phone and unpleasant if you asked it to stop. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  body::before { animation: none !important; }
}

/* Visible keyboard focus — none of the base sheets defined one. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid #0ea5e9; outline-offset: 2px; border-radius: 3px;
}