/*
Theme Name: Andrea Foundation for EDS
Theme URI: https://theandreafoundationforeds.org/
Author: OzoneWebs
Author URI: https://ozonewebs.com
Description: Custom WordPress theme for The Andrea Foundation For EDS — a nonprofit raising awareness, education, advocacy, community and hope for individuals and families affected by Ehlers-Danlos syndromes.
Version: 1.2.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: andrea-eds
*/

/* ==========================================================================
   Design tokens
   ========================================================================== */
:root{
  --color-bg:            #faf6f0;   /* warm paper */
  --color-bg-alt:        #f1e6da;   /* blush sand, section alternate */
  --color-ink:           #2e2438;   /* deep plum-ink, headings + footer */
  --color-ink-soft:      #4a3f52;   /* body text on light bg */
  --color-amber:         #d79a3b;   /* sunbeam gold — hope accent */
  --color-amber-deep:    #b97e26;   /* hover state for amber */
  --color-clay:          #c1704f;   /* dusty clay-rose — warmth accent */
  --color-line:          #e3d6c6;   /* hairline on warm bg */
  --color-cream-on-ink:  #f3ead9;   /* text on dark ink background */

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body:    "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --measure: 64ch;
  --radius: 3px;
}

/* ==========================================================================
   Reset
   ========================================================================== */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--color-bg);
  color: var(--color-ink-soft);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; height:auto; }
a{ color: var(--color-clay); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover{ color: var(--color-amber-deep); }
ul{ padding-left: 1.25em; }
h1,h2,h3,h4{
  font-family: var(--font-display);
  color: var(--color-ink);
  line-height: 1.15;
  margin: 0 0 0.5em;
  font-weight: 600;
  letter-spacing: -0.01em;
}
h1{ font-size: clamp(2.2rem, 4.4vw, 3.4rem); font-weight: 500; }
h2{ font-size: clamp(1.6rem, 2.8vw, 2.1rem); }
h3{ font-size: 1.2rem; }
p{ margin: 0 0 1.1em; max-width: var(--measure); }
.container p{ max-width: var(--measure); }

:focus-visible{
  outline: 3px solid var(--color-amber);
  outline-offset: 2px;
}

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

/* ==========================================================================
   Layout helpers
   ========================================================================== */
.container{
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: 24px;
}
.section{ padding: clamp(48px, 7vw, 96px) 0; }
.section--alt{ background: var(--color-bg-alt); }
.section--ink{ background: var(--color-ink); color: var(--color-cream-on-ink); }
.section--ink h1, .section--ink h2, .section--ink h3{ color: var(--color-cream-on-ink); }
.section--ink a{ color: var(--color-amber); }
.section-head{ max-width: 46ch; margin-bottom: 2.25rem; }
.section-head p{ font-size: 1.15rem; }

.stack{ display:flex; flex-direction:column; }
.gap-sm{ gap: 0.75rem; }
.gap-md{ gap: 1.5rem; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{
  display:inline-flex;
  align-items:center;
  gap:0.5em;
  padding: 0.85em 1.6em;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.98rem;
  text-decoration:none;
  border: 1.5px solid transparent;
  cursor:pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.btn:hover{ transform: translateY(-1px); }
.btn.btn-primary{ background: var(--color-amber); color: var(--color-ink); }
.btn.btn-primary:hover{ background: var(--color-amber-deep); color: var(--color-ink); }
.btn.btn-outline{ background: transparent; border-color: currentColor; color: inherit; }
.btn.btn-outline:hover{ background: rgba(0,0,0,0.05); color: inherit; }
.section--ink .btn.btn-outline{ color: #fff; }
.section--ink .btn.btn-outline:hover{ background: rgba(255,255,255,0.08); color:#fff; }
.btn.btn-donate{
  background: var(--color-clay);
  color: #fff;
}
.btn.btn-donate:hover{ background: #a95c3d; color:#fff; }
.btn-row{ display:flex; flex-wrap:wrap; gap: 0.9rem; margin-top: 1.5rem; }

/* ==========================================================================
   Site header
   ========================================================================== */
.site-header{
  position: sticky;
  top:0;
  z-index: 40;
  background: rgba(250,246,240,0.92);
  backdrop-filter: saturate(140%) blur(6px);
  border-bottom: 1px solid var(--color-line);
}
.site-header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 1.5rem;
  padding-block: 12px;
}
.site-logo img{ height: 44px; width:auto; }
.site-logo{ display:inline-flex; align-items:center; }

.primary-nav ul{
  list-style:none;
  display:flex;
  align-items:center;
  gap: 1.6rem;
  margin:0;
  padding:0;
  flex-wrap:wrap;
}
.primary-nav a{
  color: var(--color-ink);
  text-decoration:none;
  font-weight: 500;
  font-size: 0.98rem;
  padding: 0.4em 0.1em;
  border-bottom: 2px solid transparent;
}
.primary-nav a:hover,
.primary-nav .current-menu-item > a{
  border-bottom-color: var(--color-amber);
  color: var(--color-ink);
}
.primary-nav .menu-item-donate a{
  background: var(--color-clay);
  color:#fff;
  padding: 0.55em 1.1em;
  border-radius: var(--radius);
  border-bottom: none;
}
.primary-nav .menu-item-donate a:hover{ background:#a95c3d; color:#fff; }

.nav-toggle{
  display:none;
  background:none;
  border: 1.5px solid var(--color-ink);
  border-radius: var(--radius);
  padding: 0.5em 0.7em;
  cursor:pointer;
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--color-ink);
}

@media (max-width: 860px){
  .nav-toggle{ display:inline-flex; }
  .primary-nav{
    position:absolute;
    inset-inline:0;
    top: 100%;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-line);
    display:none;
  }
  .primary-nav.is-open{ display:block; }
  .primary-nav ul{ flex-direction:column; align-items:flex-start; gap:0; padding: 0.5rem 24px 1.25rem; }
  .primary-nav li{ width:100%; }
  .primary-nav a{ display:block; padding: 0.7em 0; border-bottom: 1px solid var(--color-line); }
  .primary-nav .menu-item-donate{ margin-top: 0.6rem; }
  .primary-nav .menu-item-donate a{ display:inline-block; border-bottom:none; }
}

/* ==========================================================================
   Hero / slider (Home)
   ========================================================================== */
.hero{
  position: relative;
  min-height: max(480px, 62vh);
  display:flex;
  align-items: flex-end;
  overflow:hidden;
  background: var(--color-ink);
}
.hero__slides{
  position:absolute;
  inset:0;
}
.hero__slide{
  position:absolute;
  inset:0;
  opacity:0;
  transition: opacity 1.1s ease;
}
.hero__slide.is-active{ opacity:1; }
.hero__slide img{
  width:100%;
  height:100%;
  object-fit: cover;
  object-position: center 25%;
}
.hero__slide::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(0deg, rgba(23,17,29,0.86) 0%, rgba(23,17,29,0.35) 46%, rgba(23,17,29,0.15) 100%);
}
.hero__content{
  position:relative;
  z-index:2;
  color: var(--color-cream-on-ink);
  padding-block: 56px 64px;
  max-width: 720px;
}
.hero__eyebrow{
  display: inline-block;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-amber);
  margin-bottom: 0.9rem;
  letter-spacing: 0.01em;
  padding: 0.5em 1.15em;
  background: rgba(18, 13, 24, 0.45);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  backdrop-filter: blur(4px);
  box-shadow: 0 8px 22px rgba(0,0,0,0.22);
}
.hero h1{ color:#fff; margin-bottom: 0.7em; }
.hero__body{ margin: 0.6em 0 0; }
.hero__body p{
  color: var(--color-cream-on-ink);
  opacity: 0.92;
  font-size: 1.05rem;
  max-width: 58ch;
  margin: 0 0 0.6em;
}
.hero__content--center{
  margin-inline: auto;
  text-align: center;
}
.hero__content--center .hero__body p{ margin-inline: auto; }
.hero__content--center .btn-row{ justify-content: center; }
.hero__dots{
  position:absolute;
  right: 24px;
  bottom: 28px;
  z-index:3;
  display:flex;
  gap: 8px;
}
.hero__dots button{
  width:9px; height:9px; border-radius:50%;
  border: 1.5px solid rgba(255,255,255,0.8);
  background: transparent;
  padding:0;
  cursor:pointer;
}
.hero__dots button.is-active{ background: var(--color-amber); border-color: var(--color-amber); }

/* Single-image page hero (no slider) — used on every page except Contact */
.hero--page{
  min-height: max(400px, 44vh);
  align-items: flex-end;
}
.hero--page .hero__content{ padding-block: 44px 48px; }
.hero--page h1{ color:#fff; }
.hero__subtitle{
  color: var(--color-cream-on-ink);
  opacity: 0.92;
  font-size: 1.15rem;
  max-width: 56ch;
  margin: 0.4em 0 0;
}

/* Placeholder shown until the real photo is uploaded */
.hero-missing{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding: 2rem;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.05) 0 14px, transparent 14px 28px),
    linear-gradient(160deg, #3a2f47 0%, var(--color-ink) 70%);
}
.hero-missing span{
  max-width: 34ch;
  color: var(--color-cream-on-ink);
  opacity: 0.75;
  font-size: 0.95rem;
  border: 1.5px dashed rgba(255,255,255,0.35);
  border-radius: var(--radius);
  padding: 1.2em 1.4em;
}
.hero-missing code{
  background: rgba(255,255,255,0.12);
  padding: 0.1em 0.4em;
  border-radius: 2px;
  font-size: 0.9em;
}

/* ==========================================================================
   Page hero (interior pages)
   ========================================================================== */
.page-hero{
  padding: 64px 0 40px;
  border-bottom: 1px solid var(--color-line);
}
.page-hero h1{ margin-bottom: 0.3em; }
.page-hero__lede{ font-size: 1.2rem; color: var(--color-ink-soft); }

/* ==========================================================================
   What we stand for / What we do — asymmetric list, not identical cards
   ========================================================================== */
.pillars{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 0;
  border-top: 1px solid var(--color-line);
}
.pillar{
  padding: 1.9rem 1.6rem 1.9rem 1.4rem;
  border-bottom: 1px solid var(--color-line);
  border-left: 3px solid var(--pillar-accent, var(--color-amber));
  transition: background-color .25s ease, transform .25s ease;
}
.pillar:hover{ background: rgba(255,255,255,0.5); transform: translateX(4px); }
.pillar h3{ margin-bottom: 0.4rem; }
.pillar p{ margin:0; font-size: 0.98rem; }

/* Core values — six boxes, on ink section */
.values-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1px;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.14);
}
.value{
  background: var(--color-ink);
  padding: 1.8rem 1.6rem;
  transition: background-color .25s ease, transform .25s ease;
}
.value:hover{ background: #3a2f47; transform: translateY(-3px); }
.value h3{ color: var(--color-amber); margin-bottom:0.4rem; font-size: 1.05rem; }
.value p{ color: var(--color-cream-on-ink); opacity:0.9; margin:0; font-size:0.96rem; }

/* ==========================================================================
   Quote / message block
   ========================================================================== */
.quote-block{
  border-left: 3px solid var(--color-clay);
  padding-left: 1.4rem;
  margin: 1.6rem 0;
}
.quote-block p{ font-family: var(--font-display); font-size: 1.4rem; color: var(--color-ink); line-height:1.35; }
.section--ink .quote-block p{ color: var(--color-amber); }

.two-col{
  display:grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items:center;
}
@media (max-width: 780px){ .two-col{ grid-template-columns:1fr; } }
.two-col img{ border-radius: var(--radius); overflow: hidden; transition: transform .4s ease; }
.two-col:hover img{ transform: scale(1.02); }

/* ==========================================================================
   Lists / who we serve / involvement
   ========================================================================== */
.checklist{ list-style:none; padding:0; margin:0; display:grid; gap:0.6rem; }
.checklist li{ padding-left: 1.6em; position:relative; }
.checklist li::before{
  content:"";
  position:absolute; left:0; top:0.55em;
  width:8px; height:8px;
  background: var(--color-amber);
}

.involve-list{ display:grid; gap: 2.5rem; }
.involve-item h3{ margin-bottom:0.3rem; }
.involve-item .btn{ margin-top: 0.9rem; }

/* Prep list on Resources page */
.prep-list{ list-style:none; padding:0; display:grid; gap:0.7rem; }
.prep-list li{ padding: 0.75rem 1rem; background: #fff; border: 1px solid var(--color-line); border-radius: var(--radius); }

.callout{
  background: var(--color-bg-alt);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: 1.6rem 1.8rem;
  margin: 1.6rem 0;
}
.callout--disclaimer{ border-color: #d8c4a8; }

/* ==========================================================================
   Donate page
   ========================================================================== */
.donate-panel{
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: 2.4rem;
  text-align:center;
}
.donate-panel p{ margin-inline:auto; }
.donate-form-placeholder{
  border: 1.5px dashed var(--color-clay);
  border-radius: var(--radius);
  padding: 2.4rem 1.5rem;
  margin: 1.8rem 0;
  color: var(--color-ink-soft);
  background: var(--color-bg-alt);
}
.donate-cant{ display:grid; gap:0.5rem; list-style:none; padding:0; }

/* ==========================================================================
   Contact form
   ========================================================================== */
.contact-form{ display:grid; gap: 1.25rem; max-width: 640px; }
.contact-form label{ display:block; font-weight:600; margin-bottom: 0.4rem; color: var(--color-ink); }
.contact-form input[type=text],
.contact-form input[type=email],
.contact-form select,
.contact-form textarea{
  width:100%;
  padding: 0.75em 0.9em;
  border: 1.5px solid var(--color-line);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 1rem;
  background:#fff;
  color: var(--color-ink);
}
.contact-form textarea{ min-height: 140px; resize:vertical; }
.contact-form .btn{ justify-self:start; }

/* ==========================================================================
   FAQ (footer-linked page, not in main nav)
   ========================================================================== */
.faq-item{ border-bottom: 1px solid var(--color-line); padding: 1.4rem 0; }
.faq-item h3{ margin-bottom: 0.5rem; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{
  background: var(--color-ink);
  color: var(--color-cream-on-ink);
  padding: 56px 0 28px;
}
.site-footer a{ color: var(--color-cream-on-ink); }
.site-footer a:hover{ color: var(--color-amber); }
.footer-top{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap: 2.5rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(255,255,255,0.16);
}
.footer-brand h2{ color:#fff; font-size:1.3rem; margin-bottom:0.4rem; }
.footer-tagline{ color: var(--color-amber); font-size:0.95rem; margin-bottom:0.6rem; }
.footer-motto{ max-width: 34ch; opacity:0.85; font-size:0.95rem; }
.footer-links ul{ list-style:none; padding:0; margin:0; display:grid; gap:0.55rem; }
.footer-links a{ text-decoration:none; font-size:0.95rem; }
.footer-social{ display:flex; gap:0.9rem; margin-top:0.8rem; }
.footer-social a{
  width:36px; height:36px;
  border: 1px solid rgba(255,255,255,0.35);
  border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:0.8rem;
}
.footer-bottom{
  padding-top: 1.6rem;
  display:flex;
  flex-wrap:wrap;
  gap: 0.6rem 1.6rem;
  justify-content:space-between;
  font-size: 0.85rem;
  opacity: 0.85;
}
.footer-nonprofit{ font-size:0.82rem; opacity:0.7; margin-top:1rem; max-width: 60ch; }
.footer-disclaimer{ font-size:0.82rem; opacity:0.7; margin-top:0.5rem; max-width: 70ch; }

/* ==========================================================================
   Scroll reveal — subtle fade-up applied via JS (IntersectionObserver)
   ========================================================================== */
.reveal{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* ==========================================================================
   Mobile bottom action bar
   ========================================================================== */
.bottom-nav{ display:none; }

@media (max-width: 860px){
  body{ padding-bottom: 64px; }

  .bottom-nav{
    display:flex;
    position:fixed;
    left:0; right:0; bottom:0;
    z-index:60;
    background: var(--color-ink);
    border-top: 1px solid rgba(255,255,255,0.14);
    justify-content: space-around;
    align-items:center;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
  }
  .bottom-nav a,
  .bottom-nav button{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap: 3px;
    background:none;
    border:none;
    color: var(--color-cream-on-ink);
    opacity: 0.8;
    font-family: var(--font-body);
    font-size: 0.66rem;
    padding: 5px 8px;
    text-decoration:none;
    cursor:pointer;
  }
  .bottom-nav a:hover,
  .bottom-nav a:active,
  .bottom-nav button:hover,
  .bottom-nav button:active,
  .bottom-nav a.is-active{
    opacity: 1;
    color: var(--color-amber);
  }
  .bottom-nav svg{ width: 20px; height: 20px; }
}

/* ==========================================================================
   Utility
   ========================================================================== */
.skip-link{
  position:absolute; left:-999px; top:auto;
  background: var(--color-ink); color:#fff; padding: 0.8em 1.2em; z-index:100;
}
.skip-link:focus{ left: 16px; top: 16px; }
.text-center{ text-align:center; }
.mt-0{ margin-top:0; }