/*
Theme Name: Elevate L.I.F.E. Services Child
Theme URI: https://elevatelifeservices.org
Description: Kadence child theme for Elevate L.I.F.E. Services. Brand: blue + green + sun yellow. Warm, professional, person-first.
Author: Flashcloud
Template: kadence
Version: 1.1.8
*/

/* ========================================================================
   1. Brand tokens (mirror of brand-tokens.css)
   ======================================================================== */
:root {
  --el-blue:        #1A4F9C;
  --el-blue-deep:   #0D3D7A;
  --el-blue-soft:   #5C8FCF;
  --el-green:       #4FA931;
  --el-green-deep:  #2E7A1B;
  --el-green-soft:  #8BC97A;
  --el-yellow:      #F5C400;
  --el-yellow-soft: #FFE89A;
  --el-ink:         #1F2937;
  --el-ink-soft:    #4B5563;
  --el-ink-mute:    #6B7280;
  --el-line:        #E5E7EB;
  --el-cream:       #FBFAF6;
  --el-white:       #FFFFFF;
  --el-font-serif:  "Source Serif 4", Georgia, "Times New Roman", serif;
  --el-font-sans:   "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --el-r-sm:        8px;
  --el-r-md:        12px;
  --el-r-lg:        16px;
  --el-r-xl:        24px;
}

/* ========================================================================
   2. Frame killers — neutralise Kadence's default content frame
   ======================================================================== */
body {
  background: var(--el-white);
  color: var(--el-ink);
  font-family: var(--el-font-sans);
}
.wp-site-blocks { background: var(--el-white); }
.entry-content,
.content-container,
.site-container { max-width: none; padding: 0; }
.wp-site-blocks > main { flex: 0 0 auto !important; }
.page .entry-title,
.single .entry-title { display: none; }

/* Kill Kadence's default content-area top/bottom margin so hero sits flush under header */
.content-area { margin-top: 0 !important; margin-bottom: 0 !important; }
/* Hide the empty page-hero placeholder Kadence renders even when not used */
.entry-hero.page-hero-section { display: none !important; }

/* ========================================================================
   3. Typography
   ======================================================================== */
body, p { font-family: var(--el-font-sans); color: var(--el-ink-soft); line-height: 1.65; }
h1, h2, h3, h4, h5, h6 { font-family: var(--el-font-serif); color: var(--el-ink); line-height: 1.2; font-weight: 600; }
h1 { font-size: clamp(2.25rem, 4vw, 3.5rem); }
h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); }
h3 { font-size: 1.5rem; }
a { color: var(--el-blue); text-decoration: none; }
a:hover { color: var(--el-blue-deep); text-decoration: underline; }

/* ========================================================================
   4. Eyebrow
   ======================================================================== */
.el-eyebrow {
  display: block;
  font-family: var(--el-font-sans);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--el-blue);
  margin: 0 0 0.75rem 0;
}

/* ========================================================================
   5. Section wrappers
   ======================================================================== */
.el-section { padding: 4rem 0; }
@media (min-width: 768px) { .el-section { padding: 5rem 0; } }
.el-section-cream { background: var(--el-cream); }
.el-section-blue { background: var(--el-blue); color: var(--el-white); }
.el-section-blue h1, .el-section-blue h2, .el-section-blue h3 { color: var(--el-white); }
.el-section-blue p { color: rgba(255, 255, 255, 0.88); }

.el-container {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ========================================================================
   6. Hero
   ======================================================================== */
.el-hero {
  position: relative;
  background: linear-gradient(135deg, var(--el-blue) 0%, var(--el-blue-deep) 100%);
  color: var(--el-white);
  padding: 5rem 0 6rem;
  overflow: hidden;
}
.el-hero::before {
  content: "";
  position: absolute;
  top: -120px; right: -120px;
  width: 480px; height: 480px;
  background: radial-gradient(circle at center, rgba(245, 196, 0, 0.25), transparent 70%);
  pointer-events: none;
}
.el-hero h1 { color: var(--el-white); margin: 0 0 1.25rem; }
.el-hero p { color: rgba(255, 255, 255, 0.92); font-size: 1.125rem; max-width: 36rem; }
.el-hero .el-eyebrow { color: var(--el-yellow-soft); }
.el-hero-ctas { margin-top: 2rem; display: flex; gap: 0.75rem; flex-wrap: wrap; }

/* ========================================================================
   7. Buttons
   ======================================================================== */
.wp-block-button.el-btn-primary .wp-block-button__link {
  background: var(--el-green);
  color: var(--el-white);
  border-radius: var(--el-r-md);
  padding: 0.85rem 1.75rem;
  font-weight: 600;
  border: none;
  transition: background 0.18s ease, transform 0.18s ease;
}
.wp-block-button.el-btn-primary .wp-block-button__link:hover {
  background: var(--el-green-deep);
  text-decoration: none;
  transform: translateY(-1px);
}
.wp-block-button.el-btn-secondary .wp-block-button__link {
  background: rgba(255, 255, 255, 0.12);
  color: var(--el-white);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--el-r-md);
  padding: 0.85rem 1.75rem;
  font-weight: 600;
  transition: background 0.18s ease;
}
.wp-block-button.el-btn-secondary .wp-block-button__link:hover {
  background: rgba(255, 255, 255, 0.2);
  text-decoration: none;
}
.wp-block-button.el-btn-outline .wp-block-button__link {
  background: transparent;
  color: var(--el-blue);
  border: 1.5px solid var(--el-blue);
  border-radius: var(--el-r-md);
  padding: 0.85rem 1.75rem;
  font-weight: 600;
  transition: background 0.18s ease, color 0.18s ease;
}
.wp-block-button.el-btn-outline .wp-block-button__link:hover {
  background: var(--el-blue);
  color: var(--el-white);
  text-decoration: none;
}

/* ========================================================================
   8. Service cards (used on Home + Services pages)
   ======================================================================== */
.el-service-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 700px) { .el-service-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .el-service-grid { grid-template-columns: 1fr 1fr 1fr; } }

.el-service-card {
  background: var(--el-white);
  border: 1px solid var(--el-line);
  border-radius: var(--el-r-lg);
  padding: 1.75rem;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.el-service-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -8px rgba(15, 23, 42, 0.12);
  border-color: var(--el-blue-soft);
}
.el-service-card .el-service-icon {
  width: 48px; height: 48px;
  border-radius: var(--el-r-md);
  background: linear-gradient(135deg, var(--el-blue) 0%, var(--el-green) 100%);
  display: flex; align-items: center; justify-content: center;
  color: var(--el-white);
  font-weight: 700;
  font-family: var(--el-font-serif);
  font-size: 1.125rem;
  margin-bottom: 0.5rem;
  flex-shrink: 0;
}
.el-service-card .el-service-icon svg {
  width: 24px;
  height: 24px;
  display: block;
}
.el-service-card h3 {
  font-size: 1.125rem;
  margin: 0;
  color: var(--el-ink);
  line-height: 1.3;
}
.el-service-card p {
  margin: 0;
  font-size: 0.95rem;
  color: var(--el-ink-soft);
  line-height: 1.6;
}

/* Theme groupings on Services page */
.el-service-theme {
  margin-top: 3rem;
}
.el-service-theme:first-child { margin-top: 0; }
.el-service-theme h2 {
  display: flex; align-items: baseline; gap: 0.75rem;
  border-bottom: 1px solid var(--el-line);
  padding-bottom: 0.75rem;
  margin-bottom: 1.5rem;
}
.el-service-theme h2::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--el-green);
}

/* ========================================================================
   9. Team cards (placeholders with initials, real photos later)
   ======================================================================== */
.el-team-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 768px) { .el-team-grid { grid-template-columns: 1fr 1fr; } }
.el-team-card {
  background: var(--el-cream);
  border-radius: var(--el-r-lg);
  padding: 2rem;
  text-align: center;
}
.el-team-avatar {
  width: 96px; height: 96px;
  border-radius: 50%;
  margin: 0 auto 1.25rem;
  background: linear-gradient(135deg, var(--el-blue) 0%, var(--el-green) 100%);
  display: flex; align-items: center; justify-content: center;
  color: var(--el-white);
  font-family: var(--el-font-serif);
  font-size: 2rem;
  font-weight: 700;
}
.el-team-card h3 { margin: 0 0 0.25rem; font-size: 1.25rem; }
.el-team-card .el-team-role {
  color: var(--el-blue);
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  margin: 0 0 1rem;
}
.el-team-card p { margin: 0; font-size: 0.95rem; line-height: 1.6; }

/* ========================================================================
   10. Funding cards (Eligibility page)
   ======================================================================== */
.el-funding-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 768px) { .el-funding-grid { grid-template-columns: 1fr 1fr 1fr; } }
.el-funding-card {
  background: var(--el-white);
  border: 1px solid var(--el-line);
  border-left: 4px solid var(--el-green);
  border-radius: var(--el-r-md);
  padding: 1.5rem;
}
.el-funding-card h3 { font-size: 1.125rem; margin: 0 0 0.5rem; color: var(--el-blue); }
.el-funding-card p { margin: 0; font-size: 0.95rem; }

/* ========================================================================
   11. Pre-footer CTA
   ======================================================================== */
.el-prefooter {
  background: var(--el-blue);
  color: var(--el-white);
  padding: 3.5rem 0;
  text-align: center;
}
.el-prefooter h2 { color: var(--el-white); margin: 0 0 0.75rem; }
.el-prefooter p { color: rgba(255, 255, 255, 0.92); margin: 0 0 1.5rem; }
.el-prefooter .wp-block-buttons { justify-content: center; }

/* ========================================================================
   12. Contact form (WPForms dark/light)
   ======================================================================== */
.wpforms-form { background: var(--el-cream); border-radius: var(--el-r-lg); padding: 2rem !important; }
.wpforms-form input,
.wpforms-form select,
.wpforms-form textarea {
  background: var(--el-white) !important;
  border: 1px solid var(--el-line) !important;
  border-radius: var(--el-r-md) !important;
  color: var(--el-ink) !important;
  padding: 0.75rem !important;
}
.wpforms-form input:focus,
.wpforms-form textarea:focus,
.wpforms-form select:focus {
  border-color: var(--el-blue) !important;
  outline: 3px solid rgba(26, 79, 156, 0.18) !important;
}
.wpforms-form button[type=submit] {
  background: var(--el-green) !important;
  color: var(--el-white) !important;
  border-radius: var(--el-r-md) !important;
  font-weight: 600 !important;
  padding: 0.85rem 1.75rem !important;
  border: none !important;
}
.wpforms-form button[type=submit]:hover {
  background: var(--el-green-deep) !important;
}

/* ========================================================================
   12.5 Header tweaks — mark on left, typographic wordmark on right
   ======================================================================== */
/* Hide tagline; keep the site title as our typographic wordmark */
.site-description { display: none !important; }

/* Mark sizing — square mark next to the typographic wordmark */
.site-branding .custom-logo-link { display: inline-block; line-height: 0; }
.site-branding img.custom-logo {
  max-height: 56px !important;
  width: auto !important;
  height: auto !important;
  display: block;
}
@media (min-width: 768px) {
  .site-branding img.custom-logo { max-height: 64px !important; }
}

/* Brand block: mark + wordmark side-by-side, tight spacing */
.site-header-item.site-header-focus-item .brand,
.site-branding {
  display: flex !important;
  align-items: center !important;
  gap: 0.875rem !important;
}

/* Typographic wordmark (replaces the bitmap "Elevate LIFE Services") */
.site-title-wrap { display: block !important; }
.site-title,
.site-branding .site-title {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--el-font-serif) !important;
  font-weight: 700 !important;
  font-size: 1.375rem !important;
  line-height: 1.05 !important;
  letter-spacing: -0.005em !important;
  color: var(--el-blue) !important;
}
.site-title a,
.site-branding .site-title a {
  color: var(--el-blue) !important;
  text-decoration: none !important;
}
@media (min-width: 768px) {
  .site-title,
  .site-branding .site-title { font-size: 1.5rem !important; }
}
/* Color "L.I.F.E." in green to echo the logo. We can't target inner text directly,
   so we replace the entire site title with rendered HTML via ::after sub-styling. */
.site-title a::first-letter { color: var(--el-blue) !important; }

/* Constrain header inner to the same container width as page content
   so the logo aligns with the eyebrow + body text below */
.site-main-header-wrap > .site-header-row-container-inner > .site-container {
  max-width: 1180px !important;
  margin: 0 auto !important;
  padding: 0 1.5rem !important;
}

/* Pack the navigation closer to the brand block */
.site-main-header-inner-wrap.site-header-row {
  grid-template-columns: auto 1fr !important;
  column-gap: 1.5rem !important;
}
.site-header-main-section-right {
  justify-content: flex-start !important;
}
.site-header-item-main-navigation { margin-left: 0 !important; }

/* Header nav link styling */
.main-navigation .menu > li > a {
  color: var(--el-ink) !important;
  font-weight: 500;
  font-family: var(--el-font-sans);
}
.main-navigation .menu > li > a:hover,
.main-navigation .menu > li.current-menu-item > a {
  color: var(--el-blue) !important;
}

/* ========================================================================
   13. Footer
   ======================================================================== */
.site-footer { background: var(--el-blue) !important; color: rgba(255,255,255,0.92) !important; }
.site-footer p,
.site-footer li { color: rgba(255,255,255,0.92) !important; line-height: 1.7; }
.site-footer a { color: rgba(255,255,255,0.92) !important; text-decoration: none !important; }
.site-footer a:hover { color: var(--el-yellow-soft) !important; }
.site-footer .site-top-footer-wrap,
.site-footer .site-bottom-footer-wrap { background: var(--el-blue) !important; }
.site-footer .site-bottom-footer-wrap .site-footer-row-container-inner { padding: 1rem 0 !important; }
.site-footer .site-bottom-footer-wrap p { color: rgba(255,255,255,0.78) !important; font-size: 0.875rem; margin: 0; }
.site-footer h4 {
  color: var(--el-white) !important;
  font-family: var(--el-font-serif);
  font-weight: 600;
  font-size: 1rem;
  margin: 0 0 0.625rem !important;
  letter-spacing: 0.01em;
}
.site-top-footer-wrap { padding: 2rem 0 1.5rem !important; }
.site-top-footer-inner-wrap { gap: 8rem !important; }
.site-footer .footer-widget-area-inner { padding: 0 !important; }
.site-footer .footer-widget-area-inner > p { margin-top: 0.4rem !important; margin-bottom: 0.4rem !important; }

/* Constrain footer rows to the same container width as page content */
.site-footer .site-footer-row-container-inner > .site-container {
  max-width: 1180px !important;
  margin: 0 auto !important;
  padding: 0 1.5rem !important;
}

/* Wrap the footer brand image in a rounded white card so it reads against blue */
.site-footer .footer-widget-area-inner .wp-block-image {
  display: inline-block !important;
  background: var(--el-white) !important;
  padding: 0.6rem 0.8rem !important;
  border-radius: var(--el-r-md) !important;
  margin: 0 0 0.875rem 0 !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}
.site-footer .footer-widget-area-inner .wp-block-image img {
  max-width: 260px !important;
  height: auto !important;
  display: block !important;
}

/* ========================================================================
   14. Page-title hide (per-page meta sets _kad_post_title_hide)
   ======================================================================== */
.page .entry-header { display: none; }

/* Image block: clip rounded corners. Editor mirrors this rule. */
.wp-block-image.has-custom-border figure,
figure.wp-block-image.has-custom-border { overflow: hidden; }
.wp-block-image figure[style*="border-radius"] { overflow: hidden; }

/* ========================================================================
   12.6 Header tagline — Live It Fully Every Day under the wordmark (2026-05-20)
   ======================================================================== */
/* Reveal the site description and style it as the small tagline below the wordmark */
.site-description {
  display: block !important;
  margin: 2px 0 0 !important;
  padding: 0 !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
  font-size: 0.66rem !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--el-gray, #6c7280) !important;
  line-height: 1.1 !important;
}
@media (min-width: 768px) {
  .site-description { font-size: 0.72rem !important; }
}

/* Slight wordmark scale-down so the two-line stack feels balanced */
.site-title,
.site-branding .site-title {
  font-size: 1.18rem !important;
  line-height: 1.05 !important;
}
@media (min-width: 768px) {
  .site-title,
  .site-branding .site-title { font-size: 1.32rem !important; }
}

/* Keep wordmark stack tight */
.site-branding .site-title-wrap {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}