/*
Theme Name: Need Help Today - GeneratePress Child
Theme URI: https://needhelptoday.org/
Description: A focused GeneratePress child theme for NeedHelpToday.org.
Author: Need Help Today
Template: generatepress
Version: 1.2.0
Text Domain: needhelptoday
*/

:root {
  --nht-ink: #17202a;
  --nht-muted: #56626f;
  --nht-line: #dfe5e9;
  --nht-bg: #f6f8f9;
  --nht-card: #ffffff;
  --nht-primary: #0b5f73;
  --nht-primary-dark: #084758;
  --nht-warm: #f3b949;
  --nht-danger-bg: #fff5e8;
  --nht-radius: 16px;
  --nht-shadow: 0 10px 30px rgba(21, 40, 52, .08);
  --nht-max: 1120px;
}

html { scroll-behavior: smooth; }
body {
  color: var(--nht-ink);
  background: #fff;
  font-size: 18px;
  line-height: 1.65;
}

body, button, input, select, textarea { font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; }
a { color: var(--nht-primary); text-underline-offset: 3px; }
a:hover, a:focus { color: var(--nht-primary-dark); }

.site-header { border-bottom: 1px solid var(--nht-line); }
.site-branding .main-title a,
.site-logo a { font-weight: 800; letter-spacing: -.03em; }
.main-navigation .main-nav ul li a { font-weight: 700; }

.nht-shell { width: min(calc(100% - 40px), var(--nht-max)); margin-inline: auto; }
.nht-home { background: #fff; }
.nht-home *, .nht-page * { box-sizing: border-box; }

.nht-hero {
  padding: 64px 0 44px;
  background: linear-gradient(180deg, #eef8fa 0%, #fff 100%);
  border-bottom: 1px solid var(--nht-line);
}
.nht-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--nht-primary-dark);
  margin-bottom: 12px;
}
.nht-kicker::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--nht-warm); }
.nht-hero h1 {
  max-width: 780px;
  margin: 0 0 18px;
  font-size: clamp(42px, 7vw, 74px);
  line-height: 1.02;
  letter-spacing: -.055em;
  font-weight: 850;
}
.nht-hero p {
  max-width: 710px;
  margin: 0;
  color: var(--nht-muted);
  font-size: clamp(19px, 2.3vw, 24px);
  line-height: 1.5;
}

.nht-emergency-strip {
  margin-top: 28px;
  max-width: 850px;
  background: var(--nht-danger-bg);
  border: 1px solid #f0d6ae;
  border-left: 5px solid var(--nht-warm);
  border-radius: 12px;
  padding: 14px 17px;
  color: #513b1f;
  font-size: 15px;
}
.nht-emergency-strip strong { color: #3f2d15; }

.nht-section { padding: 54px 0; }
.nht-section--soft { background: var(--nht-bg); border-block: 1px solid var(--nht-line); }
.nht-section h2,
.nht-page h1 { margin-top: 0; letter-spacing: -.035em; line-height: 1.12; }
.nht-section h2 { font-size: clamp(30px, 4vw, 44px); margin-bottom: 10px; }
.nht-lead { max-width: 760px; color: var(--nht-muted); margin: 0 0 28px; }

.nht-problem-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.nht-problem {
  display: block;
  min-height: 178px;
  padding: 22px;
  border: 1px solid var(--nht-line);
  border-radius: var(--nht-radius);
  background: var(--nht-card);
  box-shadow: 0 2px 0 rgba(21,40,52,.02);
  color: var(--nht-ink);
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.nht-problem:hover, .nht-problem:focus { transform: translateY(-2px); box-shadow: var(--nht-shadow); border-color: #bfd7dd; color: var(--nht-ink); }
.nht-problem__icon { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 12px; background: #eaf5f7; font-size: 23px; margin-bottom: 19px; }
.nht-problem h3 { margin: 0 0 6px; font-size: 21px; line-height: 1.2; letter-spacing: -.02em; }
.nht-problem p { margin: 0; font-size: 15px; color: var(--nht-muted); line-height: 1.45; }

.nht-start-box {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 24px;
  align-items: stretch;
}
.nht-start-main,
.nht-trust-box {
  border: 1px solid var(--nht-line);
  border-radius: var(--nht-radius);
  padding: 28px;
  background: #fff;
}
.nht-start-main { box-shadow: var(--nht-shadow); }
.nht-start-main h3, .nht-trust-box h3 { margin: 0 0 12px; font-size: 25px; letter-spacing: -.025em; }
.nht-start-main ol { margin: 18px 0 0 22px; }
.nht-start-main li { margin-bottom: 10px; }
.nht-trust-list { list-style: none; padding: 0; margin: 12px 0 0; }
.nht-trust-list li { position: relative; padding-left: 28px; margin: 11px 0; }
.nht-trust-list li::before { content: "✓"; position: absolute; left: 0; top: 0; font-weight: 900; color: var(--nht-primary); }

.nht-search {
  margin-top: 24px;
  display: flex;
  gap: 10px;
  max-width: 680px;
}
.nht-search input[type="search"] {
  flex: 1;
  min-width: 0;
  border: 2px solid #b7c7cd;
  border-radius: 10px;
  padding: 13px 14px;
  font-size: 17px;
  background: #fff;
}
.nht-button, .nht-search button, .nht-contact-form button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 11px 20px;
  border: 0;
  border-radius: 10px;
  background: var(--nht-primary);
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
}
.nht-button:hover, .nht-button:focus, .nht-search button:hover, .nht-contact-form button:hover { background: var(--nht-primary-dark); color: #fff; }

.nht-bottom-cta {
  background: var(--nht-primary-dark);
  color: #fff;
  padding: 42px 0;
}
.nht-bottom-cta h2 { color: #fff; margin: 0 0 10px; font-size: 34px; }
.nht-bottom-cta p { color: #dcecef; margin: 0; max-width: 760px; }

.nht-page { width: min(calc(100% - 40px), 860px); margin: 0 auto; padding: 55px 0 80px; }
.nht-page h1 { font-size: clamp(38px, 6vw, 58px); margin-bottom: 16px; }
.nht-page .nht-page-intro { color: var(--nht-muted); font-size: 20px; margin-bottom: 34px; }
.nht-page h2 { margin-top: 36px; font-size: 28px; letter-spacing: -.025em; }
.nht-page h3 { margin-top: 28px; font-size: 22px; }
.nht-page p, .nht-page li { max-width: 76ch; }
.nht-page hr { border: 0; border-top: 1px solid var(--nht-line); margin: 36px 0; }
.nht-notice { padding: 16px 18px; border: 1px solid var(--nht-line); background: var(--nht-bg); border-radius: 12px; }

.nht-contact-form { margin-top: 26px; padding: 26px; border: 1px solid var(--nht-line); border-radius: var(--nht-radius); background: var(--nht-bg); }
.nht-contact-form label { display: block; font-weight: 800; margin: 0 0 6px; }
.nht-contact-form input[type="text"],
.nht-contact-form input[type="email"],
.nht-contact-form textarea {
  width: 100%;
  border: 1px solid #aebbc1;
  background: #fff;
  border-radius: 9px;
  padding: 11px 12px;
  font-size: 16px;
}
.nht-contact-form textarea { min-height: 170px; resize: vertical; }
.nht-field { margin-bottom: 18px; }
.nht-hp { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
.nht-form-status { padding: 13px 15px; margin: 0 0 20px; border-radius: 9px; font-weight: 700; }
.nht-form-status--success { background: #e9f7ef; color: #1e5937; border: 1px solid #b8dfc8; }
.nht-form-status--error { background: #fff1ef; color: #74322c; border: 1px solid #efc1bb; }

.site-footer { border-top: 1px solid var(--nht-line); }
.site-info { font-size: 14px; }

@media (max-width: 900px) {
  .nht-problem-grid { grid-template-columns: repeat(2, 1fr); }
  .nht-start-box { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  body { font-size: 17px; }
  .nht-shell, .nht-page { width: min(calc(100% - 28px), var(--nht-max)); }
  .nht-hero { padding: 44px 0 34px; }
  .nht-problem-grid { grid-template-columns: 1fr; }
  .nht-problem { min-height: 0; }
  .nht-search { flex-direction: column; }
  .nht-search button { width: 100%; }
  .nht-section { padding: 42px 0; }
  .nht-start-main, .nht-trust-box, .nht-contact-form { padding: 20px; }
}

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

/* Evergreen guide posts */
.single-post .site-content { max-width: 900px; margin: 0 auto; }
.single-post .entry-header .entry-title { font-size: clamp(34px, 5vw, 52px); line-height: 1.08; letter-spacing: -.035em; }
.single-post .entry-content { font-size: 18px; line-height: 1.72; }
.single-post .entry-content h2 { margin-top: 38px; font-size: 28px; letter-spacing: -.025em; }
.nht-guide-intro { font-size: 21px; line-height: 1.6; color: var(--nht-muted); }
.nht-guide-box,
.nht-guide-note { margin: 26px 0; padding: 18px 20px; border-radius: 12px; border: 1px solid var(--nht-line); background: var(--nht-bg); }
.nht-guide-note { background: #fff8e7; border-color: #ead59b; }
.nht-guide-steps { margin-left: 24px; }
.nht-guide-steps li { margin-bottom: 16px; padding-left: 4px; }
.nht-guides-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 24px; }
.nht-guide-card { display: block; padding: 22px; border: 1px solid var(--nht-line); border-radius: var(--nht-radius); background: #fff; color: var(--nht-ink); text-decoration: none; }
.nht-guide-card:hover, .nht-guide-card:focus { box-shadow: var(--nht-shadow); color: var(--nht-ink); transform: translateY(-2px); }
.nht-guide-card__cat { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--nht-primary); }
.nht-guide-card h3 { font-size: 20px; line-height: 1.3; margin: 8px 0 8px; }
.nht-guide-card p { margin: 0; color: var(--nht-muted); font-size: 15px; line-height: 1.5; }
.nht-guides-more { margin-top: 24px; }
@media (max-width: 900px) { .nht-guides-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .nht-guides-grid { grid-template-columns: 1fr; } }

/* Guides directory */
.nht-guides-page h1 { max-width: 900px; font-size: clamp(38px, 6vw, 58px); line-height: 1.08; letter-spacing: -.04em; margin: 8px 0 16px; }
.nht-guides-group { margin-top: 44px; }
.nht-guides-group h2 { font-size: 28px; margin-bottom: 16px; }
.nht-guides-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.nht-guides-list a { display: block; border: 1px solid var(--nht-line); border-radius: 12px; padding: 18px; text-decoration: none; color: var(--nht-ink); background: #fff; }
.nht-guides-list a:hover, .nht-guides-list a:focus { box-shadow: var(--nht-shadow); color: var(--nht-ink); }
.nht-guides-list strong { display: block; font-size: 18px; line-height: 1.35; margin-bottom: 6px; }
.nht-guides-list span { display: block; color: var(--nht-muted); font-size: 15px; line-height: 1.5; }
@media (max-width: 700px) { .nht-guides-list { grid-template-columns: 1fr; } }

/* Long-form guide readability */
.single-post .site-content { max-width: 920px; margin-left: auto; margin-right: auto; }
.single-post .inside-article { padding-top: 42px; padding-bottom: 56px; }
.single-post .entry-title { font-size: clamp(34px, 5vw, 52px); line-height: 1.08; letter-spacing: -.04em; }
.single-post .entry-content { font-size: 18px; line-height: 1.72; }
.single-post .entry-content h2 { margin-top: 42px; margin-bottom: 14px; font-size: 27px; line-height: 1.2; letter-spacing: -.02em; }
.single-post .entry-content p { margin-bottom: 18px; }
.single-post .entry-content ul, .single-post .entry-content ol { margin-bottom: 22px; }
.single-post .entry-content li { margin-bottom: 8px; }
@media (max-width: 600px) {
  .single-post .inside-article { padding-top: 28px; padding-bottom: 38px; }
  .single-post .entry-content { font-size: 17px; }
  .single-post .entry-content h2 { margin-top: 34px; font-size: 24px; }
}