/* Shared visual chrome for the blog, tools, support and guide pages.
   Deliberately avoids global resets so legacy calculators keep their layout. */
:root {
  --secondary-ink: #142638;
  --secondary-muted: #5a6876;
  --secondary-blue: #2452a9;
  --secondary-navy: #122a50;
  --secondary-paper: #f7f6f1;
  --secondary-cream: #efeee6;
  --secondary-yellow: #efc759;
  --secondary-line: #d9dfdf;
  --forest-deep: #f7f6f1;
  --sage-light: #142638;
  --sage: #5a6876;
  --gold: #efc759;
}
body {
  color: var(--secondary-ink);
  background-color: var(--secondary-paper) !important;
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}
body :focus-visible {
  outline: 3px solid var(--secondary-yellow) !important;
  outline-offset: 3px;
}
.site-header, body > header, #navbar {
  position: sticky !important;
  top: 0;
  z-index: 50;
  color: var(--secondary-ink) !important;
  background: rgba(247, 246, 241, .96) !important;
  border-bottom: 1px solid rgba(20, 38, 56, .12) !important;
  box-shadow: 0 8px 26px rgba(20, 38, 56, .06);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.site-header-inner, .header-inner {
  width: min(1240px, calc(100% - 40px));
  min-height: 76px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 24px;
  padding: 10px 0;
}
.site-brand, .logo-link, .logo-link * {
  color: var(--secondary-navy) !important;
  font-family: 'Outfit', system-ui, sans-serif;
  font-weight: 700;
  text-decoration: none;
}
.site-brand img, .logo-img { object-fit: contain; }
.site-nav, .site-language-switcher, .site-language-switcher a,
.site-locale, .header-right, .lang-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.site-nav a, .site-back-link, .back-link, .header-right a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 999px;
  color: #3d5060 !important;
  font-weight: 650;
  text-decoration: none;
}
.site-nav a:hover, .site-back-link:hover, .back-link:hover,
.header-right a:hover { color: var(--secondary-blue) !important; background: #e9eef9; }
.site-language-switcher a, .site-locale, .lang-btn {
  min-width: 44px;
  min-height: 44px;
  justify-content: center;
  border: 1px solid var(--secondary-line);
  border-radius: 999px;
  color: var(--secondary-muted) !important;
  background: transparent;
  text-decoration: none;
}
.lang-group { background: #fff !important; border-color: var(--secondary-line) !important; border-radius: 999px; }
.lang-btn:not(.active) { color: #344b5e !important; }
.site-language-switcher [aria-current="page"], .site-locale[aria-current="page"],
.lang-btn.active, .lang-btn[aria-pressed="true"] {
  color: #fff !important;
  border-color: var(--secondary-navy);
  background: var(--secondary-navy);
}
.tools-hero, .art-hero, body > .container, body > main,
body > section:not(.tools-hero) {
  color: var(--secondary-ink);
}
.tools-hero { padding: clamp(48px, 8vw, 100px) 20px 38px; }
.tools-hero h1, .art-hero h1, body > main h1, body > .container h1 {
  color: var(--secondary-navy);
  font-family: 'Outfit', Georgia, serif;
  letter-spacing: -.035em;
  line-height: 1.08;
}
.tools-grid, .cards-grid {
  width: min(1160px, calc(100% - 40px));
  margin-inline: auto;
  padding-block: 24px 72px;
}
.tool-card, .card, .article-content, .guide-card {
  border: 1px solid var(--secondary-line) !important;
  border-radius: 22px !important;
  color: var(--secondary-ink) !important;
  background: #fff !important;
  box-shadow: 0 14px 36px rgba(20, 38, 56, .07);
}
.tool-card, .card { transition: transform .2s ease, box-shadow .2s ease; }
.tool-card:hover, .card:hover { transform: translateY(-3px); box-shadow: 0 20px 42px rgba(20, 38, 56, .12); }
.tool-card h2, .tool-card h3, .card-title, .article-content h2,
.article-content h3 { color: var(--secondary-navy) !important; font-family: 'Outfit', Georgia, serif; }
.tool-badge, .btn-primary, .button-primary {
  color: #fff !important;
  background: var(--secondary-blue) !important;
  border-color: var(--secondary-blue) !important;
}
footer, .footer-forest {
  color: #eaf0f7 !important;
  background: var(--secondary-navy) !important;
  border-top: 4px solid var(--secondary-yellow) !important;
}
footer a, .footer-forest a { color: #fff !important; text-decoration-color: var(--secondary-yellow); }
.skip-to-content, .skip-link {
  z-index: 100;
  background: var(--secondary-yellow) !important;
  color: var(--secondary-ink) !important;
}
@media (max-width: 720px) {
  .site-header-inner, .header-inner { width: calc(100% - 28px); gap: 8px 12px; }
  .site-brand-name, .logo-text { font-size: .95rem; }
  .site-nav { width: 100%; order: 3; justify-content: flex-start; }
  .site-nav a, .site-back-link, .back-link { padding-inline: 9px; }
  .tools-grid, .cards-grid { width: calc(100% - 28px); }
  .tool-card, .card, .article-content { min-width: 0; max-width: 100%; }
  .article-content { padding: clamp(20px, 6vw, 34px) !important; }
  .tools-hero { padding-inline: 14px; }
}
@media (max-width: 380px) {
  .site-header-inner, .header-inner { width: calc(100% - 20px); }
  .site-brand img, .logo-img { width: 34px !important; height: 34px !important; }
  .site-language-switcher, .lang-group { gap: 4px; }
  .site-language-switcher a, .site-locale, .lang-btn { min-width: 40px; min-height: 40px; }
  .site-nav a, .site-back-link, .back-link { font-size: .84rem; }
}
@media (prefers-reduced-motion: reduce) {
  body *, body *::before, body *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Re-map the older forest/glass tokens to the new paper-and-ink palette.
   The stylesheet is linked only by the secondary public-page families. */
:root {
  --forest-mid: #efeee6;
  --leaf-dark: #122a50;
  --leaf-mid: #2452a9;
  --leaf-light: #2452a9;
  --sage: #5a6876;
  --sage-light: #142638;
  --gold: #2452a9;
  --gold-light: #2452a9;
  --gold-glow: #d9e4fb;
  --glass-bg: #fff;
  --glass-border: #d9dfdf;
  --glass-border-hover: #efc759;
  --tip-bg: #e9eef9;
  --tip-border: #b8c9eb;
  --warning-bg: #fbf4d9;
  --warning-border: #e8d27d;
  --premium-bg: #fbf4d9;
  --premium-border: #e8d27d;
}
/* Legacy particle backgrounds are decorative and carried fixed navy overlays. */
.bg-layer, .orb, .particles, .page-curtain { display: none !important; }
/* Blog index navigation uses utility classes and a gold inline brand color. */
#navbar .font-extrabold { color: var(--secondary-navy) !important; }
#navbar .nav-link {
  color: #3d5060 !important;
  background: transparent !important;
}
#navbar .nav-link:hover, #navbar .nav-link:focus-visible {
  color: var(--secondary-blue) !important;
}
.blog-search-premium {
  padding-left: 3rem !important;
  color: var(--secondary-ink) !important;
  background: #fff !important;
  border-color: var(--secondary-line) !important;
  box-shadow: 0 6px 20px rgba(20, 38, 56, .07) !important;
}
.blog-search-premium::placeholder { color: var(--secondary-muted) !important; opacity: 1; }
.blog-search-premium:focus {
  border-color: var(--secondary-blue) !important;
  box-shadow: 0 0 0 3px rgba(36, 82, 169, .14) !important;
}
.filter-btn-premium {
  color: #3d5060 !important;
  background: #fff !important;
  border-color: var(--secondary-line) !important;
  box-shadow: none !important;
}
.filter-btn-premium:hover { color: var(--secondary-blue) !important; background: #e9eef9 !important; }
.filter-btn-premium.active {
  color: #fff !important;
  background: var(--secondary-blue) !important;
  border-color: var(--secondary-blue) !important;
}
.blog-card, .blog-card.glass-panel, .glass-panel {
  color: var(--secondary-ink) !important;
  background: #fff !important;
  border-color: var(--secondary-line) !important;
  box-shadow: 0 14px 36px rgba(20, 38, 56, .07) !important;
}
.blog-card h2, .blog-card h3, .blog-card .text-white,
.blog-card .text-sage-light { color: var(--secondary-navy) !important; }
.blog-card p, .blog-card .text-sage, .blog-card .text-gray-300 { color: var(--secondary-muted) !important; }
/* Support and guide page primitives with hard-coded dark surfaces. */
.glass-card, .topic-card, .detail-panel,
.category-chip, .search-input, .detail-callout, .detail-step {
  color: var(--secondary-ink) !important;
  background-color: #fff !important;
  border-color: var(--secondary-line) !important;
  box-shadow: 0 12px 30px rgba(20, 38, 56, .06);
}
.icon-wrap, .topic-icon-wrap { color: var(--secondary-blue); background: #e9eef9 !important; border-color: var(--secondary-line) !important; }
.page-title, .category-title, .topic-title, .card-title, .detail-title,
.detail-section-title, .section-title, .legal-title {
  color: var(--secondary-navy) !important;
  -webkit-text-fill-color: var(--secondary-navy) !important;
  background: none !important;
}
.page-subtitle, .card-desc, .topic-subtitle, .guide-stat-label,
.search-result-count, .search-result-count strong, .detail-breadcrumb-current,
.detail-step, .detail-callout { color: var(--secondary-muted) !important; }
.category-chip, .search-input { color: var(--secondary-ink) !important; }
.category-chip:hover, .category-chip.active {
  color: var(--secondary-blue) !important;
  background: #e9eef9 !important;
  border-color: var(--secondary-blue) !important;
}
.search-input::placeholder { color: var(--secondary-muted) !important; opacity: 1; }
.search-result-count strong, .guide-stat-value, .category-count,
.category-chip-count, .premium-badge { color: var(--secondary-blue) !important; }
.topic-category-badge, .step-badge { color: var(--secondary-blue) !important; background: #e9eef9 !important; border-color: #cbd8ef !important; }
.detail-overlay { background: rgba(18, 42, 80, .62) !important; }
.detail-panel { max-height: calc(100vh - 48px); overflow-y: auto !important; }
@media (prefers-reduced-motion: reduce) {
  .badge-dot, .guide-stat-value, .page-title { animation: none !important; }
}
#searchContainer > div { min-width: 0; }
#searchContainer svg { left: 1rem !important; right: auto !important; }
.blog-card * { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }

/* Calculator styles were written for a dark canvas. Give their controls and
   result panels a coherent light surface after the page palette changes. */
:root { color-scheme: light; }
.calc-container { color: var(--secondary-ink) !important; }
.calc-header h1 { color: var(--secondary-navy) !important; }
.calc-header p { color: var(--secondary-muted) !important; }
.genetics-scope, .preset-panel, .parent-box, .results-card, .calc-card {
  color: var(--secondary-ink) !important;
  background: #fff !important;
  border: 1px solid var(--secondary-line) !important;
  box-shadow: 0 14px 36px rgba(20, 38, 56, .07) !important;
}
.genetics-scope summary, .preset-panel label, .section-label,
.form-group label, .section-title, .results-card h2 {
  color: var(--secondary-navy) !important;
}
.parent-title.male { color: var(--secondary-blue) !important; }
.parent-title.female { color: #a83468 !important; }
.pill-checkboxes label, .milestone-card, .sex-total, .offspring-item {
  color: var(--secondary-ink) !important;
  background: #f4f7fb !important;
  border-color: var(--secondary-line) !important;
}
.pill-checkboxes select, #male-base, #female-base, .preset-panel select,
.form-control {
  color: var(--secondary-ink) !important;
  background: #fff !important;
  border-color: #b9c6d1 !important;
}
.pill-checkboxes select option, .preset-panel select option { color: var(--secondary-ink); }
.calc-container button:not(.secondary-button), .btn-gold {
  color: #fff !important;
  background: var(--secondary-blue) !important;
  border-color: var(--secondary-blue) !important;
}
.calc-container button.secondary-button {
  color: var(--secondary-blue) !important;
  background: #fff !important;
  border-color: var(--secondary-blue) !important;
}
.calc-container button:disabled { opacity: .55; cursor: not-allowed; }
.milestone-title, .related-title, .offspring-item h3 {
  color: var(--secondary-navy) !important;
}
.milestone-desc, .days-badge, .related-copy, .offspring-gender,
.hidden-traits, .probability-note, #female-sl-note, .genetics-scope p {
  color: var(--secondary-muted) !important;
}
.date-badge, .related-kicker, .offspring-pct { color: var(--secondary-blue) !important; }
.calendar-note { color: var(--secondary-muted) !important; background: #f4f7fb !important; }
.app-cta-banner { background: #e9eef9 !important; border-color: #b8c9eb !important; }
.app-cta-banner a { color: var(--secondary-blue) !important; }
.download-card p { color: #dce7f5 !important; }

/* The three original Turkish-only utility pages contain dark inline colors. */
.foods-header h1, .guide-header h1,
.calc-container .calc-card h2[style], .guide-container .content-card h2[style] {
  color: var(--secondary-navy) !important;
}
.search-box-card, .food-card, .guide-container .content-card {
  color: var(--secondary-ink) !important;
  background: #fff !important;
  border: 1px solid var(--secondary-line) !important;
  box-shadow: 0 14px 36px rgba(20, 38, 56, .07);
}
.foods-container .food-name { color: var(--secondary-navy) !important; }
.foods-container .food-tip {
  color: #36495a !important;
  background: #eef2f7 !important;
  border-left-color: var(--secondary-blue) !important;
}
.foods-container .chip {
  color: #344b5e !important;
  background: #fff !important;
  border-color: var(--secondary-line) !important;
}
.foods-container .chip:hover { color: var(--secondary-blue) !important; background: #e9eef9 !important; }
.foods-container .chip.active { color: #fff !important; background: var(--secondary-blue) !important; }
.foods-container .status-safe { color: #167248 !important; }
.foods-container .status-caution { color: #8a6310 !important; }
.foods-container .status-toxic { color: #b23149 !important; }
.calc-container .result-box, .calc-container .tips-list {
  color: var(--secondary-ink) !important;
  background: #eef2f7 !important;
  border-color: var(--secondary-line) !important;
}
.calc-container .result-val, .calc-container .tips-list h3 { color: var(--secondary-blue) !important; }
.calc-container .result-label, .calc-container .tips-list li { color: var(--secondary-muted) !important; }
.guide-container .data-table td,
.guide-container .data-table td[style],
.guide-container .data-table tr:hover td,
.guide-container .color-card div[style],
.guide-container .step-item div[style],
.guide-container .related-article div[style] {
  color: var(--secondary-ink) !important;
}
.guide-container .color-card, .guide-container .step-item,
.guide-container .related-article {
  color: var(--secondary-ink) !important;
  background: #f4f7fb !important;
  border-color: var(--secondary-line) !important;
}
.guide-container .data-table tr:hover td { background: #e9eef9 !important; }
.guide-container .color-card div[style*="var(--sage)"],
.guide-container .step-item div[style*="var(--sage)"],
.guide-container .related-article div[style*="var(--sage)"] {
  color: var(--secondary-muted) !important;
}
.guide-container #app-download p[style] { color: #dce7f5 !important; }
@media (max-width: 720px) {
  .footer-forest > .max-w-6xl > .py-4 > p {
    min-width: 0;
    max-width: 100%;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }
}