/*
Theme Name: Little Mighty
Theme URI: https://blittlemighty.org
Author: Little Mighty
Description: Accessible, faceless WordPress theme for Little Mighty child-development resources.
Version: 1.0.0
Text Domain: little-mighty
Requires at least: 6.4
Requires PHP: 8.0
*/

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@600;700&family=Jost:wght@400;500;600&display=swap');

:root {
  --lm-cream: #fbf9f6;
  --lm-clay: #b98a6a;
  --lm-clay-dark: #9f7457;
  --lm-espresso: #2e2e2e;
  --lm-warm-gray: #8c8377;
  --lm-white: #ffffff;
  --lm-border: rgba(46, 46, 46, 0.16);
  --lm-shadow: 0 18px 50px rgba(46, 46, 46, 0.08);
  --lm-serif: 'Cormorant Garamond', Georgia, serif;
  --lm-sans: 'Jost', Arial, sans-serif;
  --lm-content: 1200px;
  --lm-reading: 760px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--lm-espresso);
  background: var(--lm-cream);
  font-family: var(--lm-sans);
  font-size: 16px;
  line-height: 1.7;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--lm-espresso); text-decoration-color: var(--lm-clay); text-underline-offset: 0.2em; }
a:hover { color: var(--lm-clay-dark); }
:focus-visible { outline: 3px solid var(--lm-clay); outline-offset: 4px; }

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 0.55em;
  color: var(--lm-espresso);
  font-family: var(--lm-serif);
  line-height: 1.08;
}
h1 { font-size: clamp(2.5rem, 5.2vw, 4.35rem); font-weight: 700; }
h2 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; }
h3 { font-size: clamp(1.55rem, 3vw, 2rem); font-weight: 600; }
p, ul, ol, blockquote { margin: 0 0 1.25rem; }

.lm-container { width: min(calc(100% - 120px), var(--lm-content)); margin-inline: auto; }
.lm-reading-width { width: min(calc(100% - 120px), var(--lm-reading)); margin-inline: auto; }
.lm-section { padding-block: clamp(4.25rem, 8vw, 7rem); }
.lm-section--white { background: var(--lm-white); }
.lm-section--clay-wash { background: rgba(185, 138, 106, 0.09); }
.lm-eyebrow {
  display: inline-block;
  margin-bottom: 1rem;
  color: var(--lm-clay-dark);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.lm-lede { max-width: 760px; color: var(--lm-warm-gray); font-size: clamp(1.05rem, 2vw, 1.25rem); }

.lm-skip-link {
  position: fixed;
  z-index: 9999;
  top: 12px;
  left: 12px;
  transform: translateY(-160%);
  padding: 0.75rem 1rem;
  color: var(--lm-white);
  background: var(--lm-espresso);
}
.lm-skip-link:focus { transform: translateY(0); }

.lm-site-header { position: relative; z-index: 20; border-bottom: 1px solid var(--lm-border); background: rgba(251,249,246,0.97); }
.lm-header-inner { display: flex; align-items: center; justify-content: space-between; min-height: 92px; gap: 2rem; }
.lm-brand { display: inline-flex; align-items: center; gap: 0.75rem; font-family: var(--lm-serif); font-size: 1.65rem; font-weight: 700; text-decoration: none; }
.lm-brand img { width: 52px; height: 52px; object-fit: contain; }
.lm-primary-menu { display: flex; align-items: center; gap: clamp(1rem, 2.6vw, 2rem); margin: 0; padding: 0; list-style: none; }
.lm-primary-menu a { font-size: 0.84rem; font-weight: 600; letter-spacing: 0.08em; text-decoration: none; text-transform: uppercase; }
.lm-menu-toggle { display: none; border: 1px solid var(--lm-border); border-radius: 4px; padding: 0.65rem 0.8rem; color: var(--lm-espresso); background: transparent; font: 600 0.9rem var(--lm-sans); }

.lm-button, .wp-block-button__link, input[type='submit'], button[type='submit'] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  border: 2px solid var(--lm-clay);
  border-radius: 4px;
  padding: 0.85rem 1.8rem;
  color: var(--lm-cream) !important;
  background: var(--lm-clay);
  font-family: var(--lm-sans);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 180ms ease, border-color 180ms ease, transform 180ms ease;
}
.lm-button:hover, .wp-block-button__link:hover, input[type='submit']:hover, button[type='submit']:hover {
  border-color: var(--lm-clay-dark);
  background: var(--lm-clay-dark);
  transform: translateY(-2px);
}
.lm-button--secondary, .is-style-outline .wp-block-button__link { color: var(--lm-clay-dark) !important; background: transparent; }

.lm-hero { display: grid; align-items: center; min-height: 66vh; }
.lm-hero-content { max-width: 900px; padding-block: clamp(5rem, 12vw, 9rem); }
.lm-hero h1 { max-width: 920px; }
.lm-hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }

.lm-grid { display: grid; gap: 1.5rem; }
.lm-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lm-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lm-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.lm-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.lm-card {
  height: 100%;
  border: 1px solid var(--lm-border);
  border-radius: 8px;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--lm-white);
  box-shadow: var(--lm-shadow);
}
.lm-card h3 { margin-bottom: 0.5rem; }
.lm-card p:last-child { margin-bottom: 0; }
.lm-card h3 a { color: inherit; text-decoration: none; }
.lm-card h3 a:hover, .lm-card h3 a:focus-visible { color: var(--lm-clay-dark); }
.lm-card-link { display: block; height: 100%; color: inherit; text-decoration: none; }
.lm-card-link:hover .lm-card { border-color: var(--lm-clay); transform: translateY(-2px); }
.lm-topic-nav { display: flex; flex-wrap: wrap; gap: 0.75rem; padding-block: 1.25rem; }
.lm-topic-nav a { display: inline-flex; min-height: 44px; align-items: center; border: 1px solid var(--lm-clay); border-radius: 999px; padding: 0.55rem 1rem; text-decoration: none; }
.lm-anchor { display: block; position: relative; top: -6rem; visibility: hidden; }

.lm-prose { font-size: 1.05rem; }
.lm-prose > * + * { margin-top: 1.35rem; }
.lm-prose h2 { margin-top: 3.25rem; }
.lm-prose h3 { margin-top: 2.4rem; }
.lm-prose ul, .lm-prose ol { padding-left: 1.4rem; }
.lm-prose li + li { margin-top: 0.55rem; }
.lm-prose blockquote, .lm-takeaway {
  margin: 2.5rem 0;
  border-left: 5px solid var(--lm-clay);
  border-radius: 0 8px 8px 0;
  padding: 1.4rem 1.6rem;
  background: rgba(185, 138, 106, 0.11);
  font-size: 1.08rem;
}
.lm-article-header { padding-block: clamp(4.5rem, 9vw, 7rem) clamp(2.5rem, 5vw, 4rem); }
.lm-article-header h1 { max-width: 950px; }
.lm-article-meta { color: var(--lm-warm-gray); font-size: 0.9rem; }
.lm-related { margin-top: 3.5rem; border-top: 1px solid var(--lm-border); padding-top: 2rem; }
.lm-disclaimer { margin-top: 3rem; border-top: 1px solid var(--lm-border); padding-top: 1.25rem; color: var(--lm-warm-gray); font-size: 0.9rem; }

.lm-form { display: grid; gap: 1.1rem; max-width: 720px; }
.lm-field { display: grid; gap: 0.4rem; }
.lm-field label { font-weight: 600; }
.lm-field input, .lm-field textarea, .lm-field select {
  width: 100%;
  border: 1px solid var(--lm-warm-gray);
  border-radius: 4px;
  padding: 0.8rem 1rem;
  color: var(--lm-espresso);
  background: var(--lm-cream);
  font: 1rem var(--lm-sans);
}
.lm-field input:focus, .lm-field textarea:focus, .lm-field select:focus { border-color: var(--lm-clay); box-shadow: 0 0 0 3px rgba(185,138,106,0.14); outline: none; }
.lm-checkbox { display: flex; align-items: flex-start; gap: 0.7rem; }
.lm-honeypot { position: absolute !important; left: -9999px !important; }
.lm-notice { border-left: 4px solid var(--lm-clay); padding: 1rem 1.2rem; background: var(--lm-white); }

.lm-site-footer { margin-top: 4rem; padding-block: 4rem 2rem; color: var(--lm-cream); background: var(--lm-espresso); }
.lm-footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 2.5rem; }
.lm-site-footer h2, .lm-site-footer h3, .lm-site-footer a { color: var(--lm-cream); }
.lm-site-footer a { text-decoration-color: var(--lm-clay); }
.lm-footer-menu { margin: 0; padding: 0; list-style: none; }
.lm-footer-menu li + li { margin-top: 0.55rem; }
.lm-footer-bottom { display: flex; justify-content: space-between; gap: 1rem; margin-top: 3rem; border-top: 1px solid rgba(255,255,255,0.2); padding-top: 1.25rem; color: rgba(255,255,255,0.7); font-size: 0.85rem; }

@media (max-width: 900px) {
  .lm-container, .lm-reading-width { width: min(calc(100% - 40px), var(--lm-content)); }
  .lm-grid--3, .lm-grid--4, .lm-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lm-menu-toggle { display: inline-flex; }
  .lm-primary-menu { display: none; position: absolute; top: 92px; right: 20px; left: 20px; flex-direction: column; align-items: stretch; border: 1px solid var(--lm-border); border-radius: 8px; padding: 1rem; background: var(--lm-white); box-shadow: var(--lm-shadow); }
  .lm-primary-menu.is-open { display: flex; }
}

@media (max-width: 640px) {
  .lm-grid--2, .lm-grid--3, .lm-grid--4, .lm-card-grid, .lm-footer-grid { grid-template-columns: 1fr; }
  .lm-section { padding-block: 3.5rem; }
  .lm-header-inner { min-height: 78px; }
  .lm-primary-menu { top: 78px; }
  .lm-footer-bottom { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}