/*
Theme Name: Lots of Help
Theme URI: https://lotsofhelp.org
Author: Ultrathink
Author URI: https://lotsofhelp.org
Description: A theme that honors the truth: breakthroughs come from networks of support, not single sources. Crafted with obsessive attention to detail, warmth, and accessibility. Every pixel serves the purpose of making it inevitable for people to share their stories of help.
Version: 1.0.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lotsofhelp
Tags: accessibility-ready, custom-colors, custom-menu, featured-images, flexible-header, microformats, post-formats, rtl-language-support, sticky-post, threaded-comments, translation-ready

This theme, like all great work, is not done.
We ship only what we are proud of.
*/

/* ============================================
   FOUNDATIONS — The Inevitable Starting Point
   ============================================ */

:root {
  /* Color Palette — Warm, Human, Intentional */
  --color-cream: #FAF8F5;
  --color-charcoal: #1A1A1A;
  --color-terracotta: #E07A5F;
  --color-sage: #81B29A;
  --color-soft-gray: #6B6B6B;

  /* Typography Scale — Musical Harmony */
  --font-primary: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-secondary: Georgia, "Times New Roman", serif;

  --text-xs: 0.875rem;    /* 14px */
  --text-sm: 1rem;        /* 16px */
  --text-base: 1.125rem;  /* 18px */
  --text-lg: 1.375rem;    /* 22px */
  --text-xl: 1.75rem;     /* 28px */
  --text-2xl: 2.25rem;    /* 36px */
  --text-3xl: 3rem;       /* 48px */

  /* Spacing — Rhythmic Breathing Room */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;

  /* Layout */
  --content-width: 720px;
  --wide-width: 1200px;

  /* Transitions — Smooth, Never Jarring */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;
}

/* ============================================
   RESET — Remove the Unnecessary
   ============================================ */

*, *::before, *::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  line-height: 1.7;
  font-family: var(--font-primary);
  font-size: var(--text-base);
  color: var(--color-charcoal);
  background-color: var(--color-cream);
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

input, button, textarea, select {
  font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* ============================================
   TYPOGRAPHY — The Soul of the Design
   ============================================ */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-primary);
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-charcoal);
  margin-bottom: var(--space-md);
}

h1 {
  font-size: var(--text-3xl);
  letter-spacing: -0.02em;
}

h2 {
  font-size: var(--text-2xl);
  letter-spacing: -0.01em;
}

h3 {
  font-size: var(--text-xl);
}

h4 {
  font-size: var(--text-lg);
}

h5, h6 {
  font-size: var(--text-base);
}

p {
  margin-bottom: var(--space-md);
}

a {
  color: var(--color-terracotta);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-sage);
}

a:focus-visible {
  outline: 2px solid var(--color-terracotta);
  outline-offset: 2px;
  border-radius: 2px;
}

blockquote {
  margin: var(--space-lg) 0;
  padding-left: var(--space-lg);
  border-left: 4px solid var(--color-sage);
  font-family: var(--font-secondary);
  font-size: var(--text-lg);
  font-style: italic;
  color: var(--color-soft-gray);
}

code {
  font-family: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, monospace;
  font-size: 0.9em;
  background: rgba(0, 0, 0, 0.05);
  padding: 0.2em 0.4em;
  border-radius: 3px;
}

/* ============================================
   LAYOUT — Structure that Breathes
   ============================================ */

.site {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.site-content {
  flex: 1;
  padding: var(--space-md);
}

/* Front page specific - reduce top padding */
.front-page-content {
  padding-top: 0;
}

.container {
  max-width: var(--content-width);
  margin: 0 auto;
}

.wide-container {
  max-width: var(--wide-width);
  margin: 0 auto;
}

/* ============================================
   HEADER — Identity and Navigation
   ============================================ */

.site-header {
  background: var(--color-cream);
  border-bottom: 1px solid rgba(26, 26, 26, 0.1);
  padding: var(--space-lg) 0;
}

.site-header .container {
  max-width: var(--wide-width);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  gap: var(--space-xl);
  padding: 0 var(--space-md);
}

.site-branding {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-shrink: 0;
}

.site-title {
  font-size: var(--text-xl);
  font-weight: 700;
  margin: 0;
}

.site-title a {
  color: var(--color-charcoal);
  transition: color var(--transition-base);
}

.site-title a:hover {
  color: var(--color-terracotta);
}

.site-description {
  font-size: var(--text-sm);
  color: var(--color-soft-gray);
  margin: var(--space-xs) 0 0 0;
}

.main-navigation {
  position: relative;
}

.main-navigation ul {
  list-style: none;
  display: flex;
  gap: var(--space-md);
  flex-wrap: nowrap;
  white-space: nowrap;
}

.main-navigation li {
  position: relative;
}

.main-navigation a {
  color: var(--color-charcoal);
  font-weight: 500;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: color var(--transition-fast);
  display: block;
  padding: var(--space-xs) 0;
}

.main-navigation a:hover {
  color: var(--color-terracotta);
}

/* Dropdown / Submenu Styles */
.main-navigation ul ul {
  position: absolute;
  top: 100%;
  left: 0;
  display: none;
  flex-direction: column;
  gap: 0;
  background: var(--color-cream);
  border: 1px solid rgba(26, 26, 26, 0.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  min-width: 200px;
  padding: var(--space-xs) 0;
  margin-top: 0;
  z-index: 1000;
  white-space: normal;
}

.main-navigation li:hover > ul {
  display: flex;
}

.main-navigation ul ul li {
  width: 100%;
}

.main-navigation ul ul a {
  padding: var(--space-sm) var(--space-md);
  font-size: var(--text-sm);
  text-transform: none;
  letter-spacing: 0;
  border-bottom: 1px solid rgba(26, 26, 26, 0.05);
}

.main-navigation ul ul li:last-child a {
  border-bottom: none;
}

.main-navigation ul ul a:hover {
  background: rgba(224, 122, 95, 0.05);
  color: var(--color-terracotta);
}

/* Nested dropdown positioning */
.main-navigation ul ul ul {
  top: 0;
  left: 100%;
  margin-left: 1px;
}

/* ============================================
   CONTENT — Where Stories Live
   ============================================ */

.entry-header {
  margin-bottom: var(--space-xl);
  text-align: center;
}

.entry-title {
  margin-bottom: var(--space-sm);
}

.entry-meta {
  font-size: var(--text-sm);
  color: var(--color-soft-gray);
  display: flex;
  gap: var(--space-md);
  justify-content: center;
  flex-wrap: wrap;
}

.entry-content {
  margin-bottom: var(--space-2xl);
}

.entry-content > * + * {
  margin-top: var(--space-md);
}

.entry-content img {
  border-radius: 4px;
  margin: var(--space-lg) 0;
}

.entry-footer {
  padding-top: var(--space-lg);
  border-top: 1px solid rgba(26, 26, 26, 0.1);
  font-size: var(--text-sm);
}

/* ============================================
   ARCHIVE — Collection of Stories
   ============================================ */

.posts-list {
  display: grid;
  gap: var(--space-xl);
}

.post-card {
  padding-bottom: var(--space-xl);
  border-bottom: 1px solid rgba(26, 26, 26, 0.1);
}

.post-card:last-child {
  border-bottom: none;
}

.post-card-title {
  margin-bottom: var(--space-sm);
}

.post-card-excerpt {
  color: var(--color-soft-gray);
  margin-bottom: var(--space-md);
}

.read-more {
  display: inline-block;
  color: var(--color-terracotta);
  font-weight: 600;
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ============================================
   FOOTER — Grounding Element
   ============================================ */

.site-footer {
  background: var(--color-charcoal);
  color: var(--color-cream);
  padding: var(--space-xl) var(--space-md);
  text-align: center;
}

.site-footer a {
  color: var(--color-sage);
}

.site-footer a:hover {
  color: var(--color-terracotta);
}

.site-info {
  font-size: var(--text-sm);
}

/* ============================================
   ACCESSIBILITY — Respect Every Human
   ============================================ */

.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  word-wrap: normal !important;
}

.screen-reader-text:focus {
  background-color: var(--color-cream);
  border-radius: 3px;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
  clip: auto !important;
  color: var(--color-charcoal);
  display: block;
  font-size: var(--text-sm);
  font-weight: bold;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
}

/* ============================================
   RESPONSIVE — Works Everywhere
   ============================================ */

@media (max-width: 640px) {
  :root {
    --text-3xl: 2rem;
    --text-2xl: 1.5rem;
    --space-xl: 2.5rem;
    --space-2xl: 3.5rem;
  }

  .site-header .container {
    flex-direction: column;
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .main-navigation ul {
    flex-direction: column;
    gap: var(--space-sm);
  }

  /* Mobile dropdown positioning */
  .main-navigation ul ul {
    position: relative;
    top: 0;
    left: 0;
    box-shadow: none;
    border: none;
    padding-left: var(--space-md);
    margin-top: var(--space-xs);
    background: transparent;
  }

  .main-navigation ul ul ul {
    left: 0;
    margin-left: var(--space-md);
  }

  .entry-header {
    text-align: left;
  }

  .entry-meta {
    justify-content: flex-start;
  }
}

/* ============================================
   UTILITY — Helpful, Not Clever
   ============================================ */

.alignwide {
  max-width: var(--wide-width);
  margin-left: auto;
  margin-right: auto;
}

.alignfull {
  max-width: 100vw;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.text-center {
  text-align: center;
}

.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }

/* ============================================
   FRONT PAGE — First Impression Excellence
   ============================================ */

.front-page-content-wrapper {
  padding: var(--space-md) 0 var(--space-xl);
}

/* Hide the page title on front page - we don't need it */
.front-page-article .entry-header,
.front-page-article .entry-title,
.page .entry-header {
  display: none;
}

.front-page-content-wrapper h1:first-child {
  font-size: var(--text-3xl);
  line-height: 1.1;
  margin-bottom: var(--space-lg);
  color: var(--color-charcoal);
}

.front-page-content-wrapper p:first-of-type {
  font-size: var(--text-lg);
  line-height: 1.6;
  color: var(--color-soft-gray);
  margin-bottom: var(--space-xl);
}

/* Add subtle visual interest to the homepage */
.front-page-article {
  background: linear-gradient(135deg, var(--color-cream) 0%, rgba(129, 178, 154, 0.05) 100%);
  border-radius: 8px;
  padding: var(--space-xl);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

/* Hero image styling if present */
.front-page-hero {
  margin: calc(var(--space-xl) * -1) calc(var(--space-xl) * -1) var(--space-xl);
  border-radius: 8px 8px 0 0;
  overflow: hidden;
}

.front-page-hero img {
  width: 100%;
  height: auto;
  object-fit: cover;
  max-height: 400px;
}