/*
Theme Name:   Salient Child
Theme URI:    https://justcausecharity.org
Description:  Child theme for Just Cause Charity — Design 1: Warm Editorial
Author:       Purple AI https://gopurple.ai
Template:     salient
Version:      1.0.0
Text Domain:  salient-child
*/

/* ============================================================
   DESIGN SYSTEM — WARM EDITORIAL
   Matches Design 1: Navy / Gold / Cream / Playfair + Lato
   ============================================================ */

/* ─── GOOGLE FONTS ─── */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,800;1,400&family=Lato:wght@300;400;700&display=swap');

/* ─── CSS VARIABLES ─── */
:root {
  --jcc-navy:       #1a2744;
  --jcc-gold:       #c9973f;
  --jcc-gold-light: #e8c16a;
  --jcc-cream:      #faf6ef;
  --jcc-warm-white: #fffdf9;
  --jcc-text-dark:  #1a1a2e;
  --jcc-text-mid:   #4a4a6a;
  --jcc-text-light: #8a8aaa;

  --jcc-font-serif: 'Playfair Display', Georgia, serif;
  --jcc-font-sans:  'Lato', sans-serif;
}

/* ─── GLOBAL RESET / BASE ─── */
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: var(--jcc-font-sans);
  background-color: var(--jcc-warm-white);
  color: var(--jcc-text-dark);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ─── TYPOGRAPHY ─── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--jcc-font-serif);
  color: var(--jcc-navy);
  line-height: 1.2;
  font-weight: 700;
}

h1 { font-size: clamp(38px, 5vw, 64px); font-weight: 800; }
h2 { font-size: clamp(28px, 3.5vw, 44px); }
h3 { font-size: clamp(20px, 2.5vw, 28px); }
h4 { font-size: 20px; }
h5 { font-size: 16px; font-family: var(--jcc-font-sans); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }

p {
  font-family: var(--jcc-font-sans);
  font-size: 16px;
  line-height: 1.8;
  color: var(--jcc-text-mid);
}

a {
  color: var(--jcc-navy);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(201, 151, 63, 0.4);
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

a:hover {
  color: var(--jcc-gold);
  text-decoration-color: var(--jcc-gold);
}

strong, b {
  font-weight: 700;
  color: var(--jcc-navy);
}

blockquote {
  border-left: 3px solid var(--jcc-gold);
  padding: 8px 0 8px 28px;
  margin: 32px 0;
  font-family: var(--jcc-font-serif);
  font-style: italic;
  font-size: 20px;
  line-height: 1.65;
  color: var(--jcc-navy);
}

blockquote p {
  font-family: var(--jcc-font-serif);
  font-style: italic;
  font-size: 20px;
  line-height: 1.65;
  color: var(--jcc-navy);
}

/* ─── NAVIGATION ─── */
#header-outer {
  background: rgba(26, 39, 68, 0.97) !important;
  backdrop-filter: blur(10px);
  border-bottom: none !important;
}

#header-outer header#top {
  background: transparent !important;
}

/* Nav logo */
#logo img {
  filter: brightness(0) invert(1);
}

/* Nav links */
#top nav > ul > li > a,
#top .sf-menu > li > a {
  font-family: var(--jcc-font-sans) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.82) !important;
  transition: color 0.2s !important;
}

#top nav > ul > li > a:hover,
#top .sf-menu > li > a:hover,
#top nav > ul > li.current-menu-item > a {
  color: var(--jcc-gold-light) !important;
}

/* Donate nav button */
#top nav > ul > li.button_bordered > a,
#top .sf-menu > li.button_bordered > a {
  background: var(--jcc-gold) !important;
  color: #fff !important;
  border-radius: 3px !important;
  padding: 10px 22px !important;
  border: none !important;
  transition: background 0.2s !important;
}

#top nav > ul > li.button_bordered > a:hover {
  background: var(--jcc-gold-light) !important;
  color: var(--jcc-navy) !important;
}

/* Dropdown menu */
#top .sf-menu ul {
  background: var(--jcc-navy) !important;
  border-top: 2px solid var(--jcc-gold) !important;
}

#top .sf-menu ul li a {
  color: rgba(255, 255, 255, 0.75) !important;
  font-size: 13px !important;
  letter-spacing: 0.06em !important;
}

#top .sf-menu ul li a:hover {
  color: var(--jcc-gold-light) !important;
  background: rgba(201, 151, 63, 0.08) !important;
}

/* Mobile nav */
#mobile-menu {
  background: var(--jcc-navy) !important;
}

.slide-out-widget-area {
  background: var(--jcc-navy) !important;
}

/* ─── BUTTONS ─── */
.button-styled,
input[type="submit"],
.wpcf7-submit,
a.button,
.btn {
  font-family: var(--jcc-font-sans) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  background: var(--jcc-gold) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 3px !important;
  padding: 14px 32px !important;
  text-decoration: none !important;
  transition: all 0.25s ease !important;
  display: inline-block !important;
  cursor: pointer !important;
}

.button-styled:hover,
input[type="submit"]:hover,
.wpcf7-submit:hover,
a.button:hover,
.btn:hover {
  background: var(--jcc-gold-light) !important;
  color: var(--jcc-navy) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(201, 151, 63, 0.3) !important;
}

/* Secondary / outline button */
a.button.secondary,
.btn-secondary {
  background: transparent !important;
  border: 1.5px solid rgba(26, 39, 68, 0.3) !important;
  color: var(--jcc-navy) !important;
}

a.button.secondary:hover,
.btn-secondary:hover {
  background: var(--jcc-cream) !important;
  border-color: var(--jcc-gold) !important;
  color: var(--jcc-navy) !important;
  box-shadow: none !important;
  transform: none !important;
}

/* ─── PAGE / SECTION BACKGROUNDS ─── */
.dark-bg,
section.dark-bg {
  background-color: var(--jcc-navy) !important;
  color: #fff;
}

.dark-bg h1, .dark-bg h2, .dark-bg h3,
.dark-bg h4, .dark-bg h5 {
  color: #fff;
}

.dark-bg p {
  color: rgba(255, 255, 255, 0.7);
}

.cream-bg,
section.cream-bg {
  background-color: var(--jcc-cream) !important;
}

.gold-accent {
  color: var(--jcc-gold) !important;
}

/* ─── SECTION LABELS (eyebrow text) ─── */
.section-label,
.eyebrow-text,
span.label {
  font-family: var(--jcc-font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--jcc-gold);
  display: block;
  margin-bottom: 14px;
}

/* ─── DIVIDER / SEPARATOR ─── */
hr,
.divider {
  border: none;
  border-top: 1px solid rgba(201, 151, 63, 0.18);
  margin: 48px 0;
}

/* ─── CARDS ─── */
.card,
.jcc-card {
  background: var(--jcc-cream);
  border: 1px solid rgba(201, 151, 63, 0.18);
  border-radius: 8px;
  padding: 32px;
}

.card-dark,
.jcc-card-dark {
  background: var(--jcc-navy);
  border-radius: 8px;
  padding: 32px;
  color: #fff;
}

.card-dark h2, .card-dark h3, .card-dark h4 { color: #fff; }
.card-dark p { color: rgba(255, 255, 255, 0.7); }

/* ─── STAT NUMBERS ─── */
.stat-number,
.jcc-stat-num {
  font-family: var(--jcc-font-serif);
  font-size: 64px;
  font-weight: 800;
  color: var(--jcc-navy);
  line-height: 1;
}

.stat-number .suffix,
.jcc-stat-num sup {
  font-size: 36px;
  color: var(--jcc-gold);
  vertical-align: super;
}

/* ─── FORMS ─── */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
select,
textarea {
  font-family: var(--jcc-font-sans) !important;
  font-size: 15px !important;
  color: var(--jcc-text-dark) !important;
  background: #fff !important;
  border: 1.5px solid rgba(26, 39, 68, 0.18) !important;
  border-radius: 4px !important;
  padding: 12px 16px !important;
  width: 100% !important;
  transition: border-color 0.2s !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
textarea:focus {
  border-color: var(--jcc-gold) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(201, 151, 63, 0.12) !important;
}

/* Contact form 7 */
.wpcf7-form label {
  font-family: var(--jcc-font-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--jcc-navy);
  display: block;
  margin-bottom: 6px;
}

/* ─── FOOTER ─── */
footer#footer,
footer.footer-wrapper,
#footer-outer {
  background: var(--jcc-text-dark) !important;
  color: rgba(255, 255, 255, 0.5);
}

#footer-outer h3,
#footer-outer h4,
footer#footer h3,
footer#footer h4 {
  font-family: var(--jcc-font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--jcc-gold-light);
  margin-bottom: 18px;
}

#footer-outer a,
footer#footer a {
  color: rgba(255, 255, 255, 0.45);
  font-size: 13px;
  text-decoration: none;
  transition: color 0.2s;
}

#footer-outer a:hover,
footer#footer a:hover {
  color: var(--jcc-gold-light);
  text-decoration: none;
}

#footer-outer p,
footer#footer p {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.4);
  line-height: 1.6;
}

/* Copyright bar */
#footer-outer #copyright,
.footer-copyright {
  background: var(--jcc-text-dark) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.28);
}

/* ─── BREADCRUMBS ─── */
.breadcrumbs,
.breadcrumb {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
}

.breadcrumbs a,
.breadcrumb a {
  color: rgba(255, 255, 255, 0.4);
  text-decoration: none;
}

.breadcrumbs a:hover,
.breadcrumb a:hover {
  color: var(--jcc-gold-light);
}

.breadcrumbs span.current,
.breadcrumb .current {
  color: var(--jcc-gold);
}

/* ─── LISTS ─── */
ul.jcc-list {
  list-style: none;
  padding: 0;
}

ul.jcc-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(201, 151, 63, 0.1);
  font-size: 15px;
  color: var(--jcc-text-mid);
  line-height: 1.5;
}

ul.jcc-list li::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--jcc-gold);
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 7px;
}

/* ─── IMAGES ─── */
img {
  max-width: 100%;
  height: auto;
}

.rounded-img {
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

/* ─── ANIMATIONS ─── */
@keyframes jcc-fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.jcc-fade-in   { animation: jcc-fadeUp 0.6s ease both; }
.jcc-fade-in-2 { animation: jcc-fadeUp 0.6s 0.12s ease both; }
.jcc-fade-in-3 { animation: jcc-fadeUp 0.6s 0.24s ease both; }

/* ─── UTILITY CLASSES ─── */
.text-gold       { color: var(--jcc-gold) !important; }
.text-navy       { color: var(--jcc-navy) !important; }
.text-white      { color: #fff !important; }
.bg-navy         { background-color: var(--jcc-navy) !important; }
.bg-cream        { background-color: var(--jcc-cream) !important; }
.bg-gold         { background-color: var(--jcc-gold) !important; }
.font-serif      { font-family: var(--jcc-font-serif) !important; }
.font-sans       { font-family: var(--jcc-font-sans) !important; }
.uppercase       { text-transform: uppercase; letter-spacing: 0.1em; }
.text-center     { text-align: center; }
.mt-0  { margin-top: 0 !important; }
.mb-0  { margin-bottom: 0 !important; }
.mt-lg { margin-top: 64px !important; }
.mb-lg { margin-bottom: 64px !important; }