/*
 Theme Name:   Kadence Child
 Theme URI:    https://systemsforministry.com
 Description:  Child theme for Kadence — Systems for Ministry. Canonical home of the SFM design-system CSS.
 Author:       Remi Shores
 Author URI:   https://systemsforministry.com
 Template:     kadence
 Version:      2.0.6
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
*/

/* ================================================================
   Systems for Ministry — Design System v2
   systemsforministry.com

   CANONICAL HOME: this file (child theme style.css), enqueued by
   functions.php. The Simple Custom CSS & JS plugin entry should
   stay EMPTY — if you need a quick hotfix, put it there temporarily
   and fold it into this file afterward.

   Montserrat is enqueued by functions.php — no @import here.

   Sections:
   1.  Brand Variables & Rhythm Tokens
   2.  Global Typography & Heading Scale
   3.  Buttons
   4.  Desktop Navigation
   5.  Mobile Nav Drawer
   6.  Section Backgrounds & Spacing
   7.  Hero Section
   8.  Service Cards
   9.  Blog (index + single post)
   10. Case Studies / Accordions (AI Work)
   11. Footer
   12. Layout Fixes
   13. Responsive
   ================================================================ */


/* ================================================================
   1. BRAND VARIABLES & RHYTHM TOKENS
   ================================================================ */

:root {
  /* Brand palette */
  --sfm-purple:        #cd73e7;
  --sfm-purple-dark:   #a84ec4;
  --sfm-purple-deeper: #7a2d96;
  --sfm-purple-faint:  #f5eeff;
  --sfm-purple-light:  #e8b8f5;

  --sfm-blue:          #aed1ff;
  --sfm-blue-dark:     #6aaade;
  --sfm-blue-faint:    #eef6ff;

  /* Surfaces */
  --sfm-white:         #ffffff;
  --sfm-surface:       #f5f0ff;
  --sfm-border:        #e8e0f5;

  /* Text */
  --sfm-text:          #1a1a2e;
  --sfm-text-muted:    #4a4a6a;
  --sfm-text-subtle:   #8a8aaa;

  /* Shadows */
  --sfm-shadow-sm:     0 2px 8px rgba(205, 115, 231, 0.10);
  --sfm-shadow-md:     0 4px 24px rgba(205, 115, 231, 0.15);
  --sfm-shadow-lg:     0 8px 48px rgba(205, 115, 231, 0.20);

  /* Radii */
  --sfm-radius-md:     14px;
  --sfm-radius-lg:     20px;
  --sfm-radius-pill:   999px;

  /* Section rhythm — the only sanctioned vertical paddings.
     Page markup should reference these values (as px) until
     inline styles are replaced in the Phase 4 refactor. */
  --sfm-pad-hero-top:     72px;
  --sfm-pad-hero-bottom:  56px;
  --sfm-pad-section:      56px;
  --sfm-pad-cta-top:      72px;
  --sfm-pad-cta-bottom:   80px;
}


/* ================================================================
   2. GLOBAL TYPOGRAPHY & HEADING SCALE
   ================================================================ */

body,
body .site,
.entry-content,
.entry-content p,
.wp-block-paragraph,
h1, h2, h3, h4, h5, h6,
.wp-block-heading {
  font-family: 'Montserrat', sans-serif !important;
}

/* Heading weights */
h1, .wp-block-heading.wp-block-heading.is-style-default { font-weight: 800 !important; }
h2 { font-weight: 700 !important; }
h3 { font-weight: 600 !important; }

/* Canonical heading scale.
   Deliberately NOT !important: pages that still carry inline
   font-size/color styles keep them until the Phase 4 markup
   refactor removes them. Unstyled headings (blog, new pages)
   pick up the scale immediately.
   `body` prefix outranks Kadence base h1-h4 sizes, which load
   after this stylesheet at equal specificity. */
body h1 {
  font-size: clamp(2.2rem, 4vw, 3rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--sfm-text);
}
body h2 {
  font-size: clamp(1.6rem, 2.6vw, 2rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--sfm-text);
}
body h3 {
  font-size: 1.25rem;
  line-height: 1.35;
  color: var(--sfm-text);
}
body h4 {
  font-size: 1.05rem;
  line-height: 1.4;
  color: var(--sfm-text);
}

/* Body text color */
body, p, .entry-content { color: var(--sfm-text); }

/* Body links */
.entry-content a,
.wp-block-paragraph a,
.wp-block-list a {
  color: var(--sfm-purple-dark);
  text-decoration: underline;
}
.entry-content a:hover,
.wp-block-paragraph a:hover {
  color: var(--sfm-purple);
}

/* Focus ring */
:focus-visible { outline-color: var(--sfm-purple); }


/* ================================================================
   3. BUTTONS
   Pill-shaped, soft shadow, smooth transitions.
   ================================================================ */

.wp-block-button__link,
.wp-block-button__link:visited {
  border-radius: var(--sfm-radius-pill) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em;
  box-shadow: var(--sfm-shadow-md) !important;
  transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease !important;
  text-shadow: none !important;
  text-decoration: none !important;
}

.wp-block-button__link:hover,
.wp-block-button__link:focus {
  background-color: var(--sfm-purple-dark) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--sfm-shadow-lg) !important;
  text-decoration: none !important;
  text-shadow: none !important;
  opacity: 1 !important;
}

/* Outline / secondary buttons */
.wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-button.is-style-outline .wp-block-button__link:visited {
  background-color: transparent !important;
  color: var(--sfm-purple) !important;
  border: 2px solid var(--sfm-purple) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:focus {
  background-color: var(--sfm-purple-faint) !important;
  color: var(--sfm-purple-dark) !important;
  border-color: var(--sfm-purple-dark) !important;
  transform: translateY(-2px) !important;
}


/* ================================================================
   4. DESKTOP NAVIGATION
   ================================================================ */

.header-navigation .nav-menu > li > a {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 500;
}

.header-navigation .nav-menu > li > a:hover,
.header-navigation .nav-menu > li.current-menu-item > a,
.header-navigation .nav-menu > li.current-menu-ancestor > a {
  color: var(--sfm-purple) !important;
}

/* "Book a Call" nav CTA — pill button */
#primary-menu li:last-child > a {
  background-color: var(--sfm-purple) !important;
  color: #ffffff !important;
  border-radius: var(--sfm-radius-pill) !important;
  padding: 7px 18px !important;
  font-weight: 600 !important;
  font-family: 'Montserrat', sans-serif !important;
  box-shadow: var(--sfm-shadow-sm) !important;
  transition: background-color 0.2s ease, box-shadow 0.2s ease !important;
}
#primary-menu li:last-child > a:hover {
  background-color: var(--sfm-purple-dark) !important;
  box-shadow: var(--sfm-shadow-md) !important;
}


/* ================================================================
   5. MOBILE NAV DRAWER
   ================================================================ */

#mobile-drawer,
#mobile-drawer .drawer-inner,
#mobile-drawer .mobile-nav-inner-wrap {
  background-color: #ffffff !important;
  color: var(--sfm-text) !important;
}

#mobile-drawer a,
#mobile-drawer .mobile-nav-inner-wrap a {
  color: var(--sfm-text) !important;
  font-family: 'Montserrat', sans-serif !important;
}

#mobile-drawer a:hover,
#mobile-drawer .current-menu-item > a {
  color: var(--sfm-purple) !important;
}

#mobile-drawer .drawer-toggle svg,
#mobile-drawer .drawer-toggle path {
  fill: var(--sfm-text) !important;
  stroke: var(--sfm-text) !important;
}


/* ================================================================
   6. SECTION BACKGROUNDS & SPACING
   ================================================================ */

/* Tinted section — add class "sfm-section-alt" in block editor */
.sfm-section-alt,
.wp-block-group.sfm-section-alt {
  background-color: var(--sfm-surface) !important;
}

/* Auto-tint even sections (legacy — remove once every page uses
   explicit .sfm-section-alt classes after Phase 4) */
.entry-content > .wp-block-group:nth-child(even) {
  background-color: var(--sfm-surface);
}

/* Generous section vertical padding */
.wp-block-group.alignfull {
  padding-top: 72px !important;
  padding-bottom: 72px !important;
}

/* Overline label style (add class "sfm-overline") */
.sfm-overline,
.wp-block-heading.sfm-overline {
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: var(--sfm-blue-dark) !important;
  margin-bottom: 8px !important;
}

/* Purple accent inside headings (wrap key words in <strong>) */
.entry-content h2 strong,
.wp-block-heading strong {
  color: var(--sfm-purple);
  font-weight: inherit;
}


/* ================================================================
   7. HERO SECTION
   ================================================================ */

.home .entry-content > .wp-block-group:first-child,
.wp-block-group.sfm-hero {
  background: linear-gradient(180deg, #ffffff 0%, #f5f0ff 60%, #eef6ff 100%) !important;
}

.home .entry-content > .wp-block-group:first-child h1,
.wp-block-group.sfm-hero h1 {
  font-size: clamp(2rem, 4vw, 3.2rem) !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.02em !important;
  color: var(--sfm-text) !important;
}

.home .entry-content > .wp-block-group:first-child p,
.wp-block-group.sfm-hero p {
  font-size: 1.05rem !important;
  line-height: 1.75 !important;
  color: var(--sfm-text-muted) !important;
}


/* ================================================================
   8. SERVICE CARDS
   ================================================================ */

.sfm-card-icon {
  width: 48px;
  height: 48px;
  background: var(--sfm-purple-faint);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.sfm-service-card {
  background: #ffffff;
  border-radius: var(--sfm-radius-md) !important;
  border: 1px solid var(--sfm-border);
  padding: 24px !important;
  box-shadow: var(--sfm-shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.sfm-service-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sfm-shadow-lg) !important;
}

.wp-block-column {
  border-radius: var(--sfm-radius-md);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Card-style column blocks — add class "sfm-card" in editor */
.wp-block-column.sfm-card {
  background: #ffffff !important;
  border: 1px solid var(--sfm-border) !important;
  border-radius: var(--sfm-radius-md) !important;
  padding: 28px !important;
  box-shadow: var(--sfm-shadow-sm) !important;
}

.wp-block-column.sfm-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--sfm-shadow-md) !important;
}

.sfm-service-card h3,
.wp-block-column.sfm-card h3 {
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: var(--sfm-text) !important;
  margin-bottom: 10px !important;
}


/* ================================================================
   9. BLOG (index + single post)
   ================================================================ */

/* Hide taxonomy labels (all posts are uncategorized) */
.entry-taxonomies,
.cat-links,
.entry-footer .cat-links {
  display: none;
}

/* Hide the "Similar Posts" carousel — with a young blog it reads
   as clutter. Re-enable from the Customizer once there are enough
   posts for it to earn its place. */
.entry-related {
  display: none;
}

/* Blog index cards */
.wp-block-post,
article.type-post {
  border-radius: var(--sfm-radius-md) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.wp-block-post:hover,
article.type-post:hover {
  transform: translateY(-3px);
  box-shadow: var(--sfm-shadow-md) !important;
}

.wp-block-post-title a,
.entry-title a {
  color: var(--sfm-text) !important;
  text-decoration: none !important;
  font-weight: 700 !important;
}

.wp-block-post-title a:hover,
.entry-title a:hover {
  color: var(--sfm-purple) !important;
}

/* Single post: meta line + author box */
.entry-meta {
  color: var(--sfm-text-subtle);
  font-size: 0.85rem;
}

.entry-author {
  background: var(--sfm-surface);
  border: 1px solid var(--sfm-border);
  border-radius: var(--sfm-radius-md);
}

/* Post navigation (prev/next) */
.post-navigation a {
  color: var(--sfm-purple-dark);
  text-decoration: none;
}
.post-navigation a:hover {
  color: var(--sfm-purple);
}

/* Comments */
.comment-respond input[type="text"],
.comment-respond input[type="email"],
.comment-respond input[type="url"],
.comment-respond textarea {
  border: 1px solid var(--sfm-border);
  border-radius: 8px;
}
.comment-respond input[type="submit"],
#respond .submit {
  background-color: var(--sfm-purple) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: var(--sfm-radius-pill) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
  padding: 10px 24px !important;
}
.comment-respond input[type="submit"]:hover,
#respond .submit:hover {
  background-color: var(--sfm-purple-dark) !important;
}


/* ================================================================
   10. CASE STUDIES / ACCORDIONS (AI Work page)
   ================================================================ */

.sfm-case-study {
  background: #ffffff;
  border: 1px solid var(--sfm-border) !important;
  border-radius: var(--sfm-radius-md) !important;
  padding: 20px 24px !important;
  margin-bottom: 16px !important;
  box-shadow: var(--sfm-shadow-sm);
  transition: box-shadow 0.2s ease;
}

.sfm-case-study[open] {
  box-shadow: var(--sfm-shadow-md);
}

.sfm-case-study > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 4px 0;
}

.sfm-case-study > summary::-webkit-details-marker,
.sfm-case-study > summary::marker {
  display: none;
}

.sfm-case-study > summary:hover .sfm-accordion-title {
  color: var(--sfm-purple);
  text-decoration: underline;
}

.sfm-accordion-title {
  display: block;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--sfm-purple-dark);
  line-height: 1.3;
  transition: color 0.15s ease;
}

.sfm-accordion-descriptor {
  display: block;
  font-size: 0.95rem;
  color: var(--sfm-text-muted);
  margin-top: 4px;
}

.sfm-accordion-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.sfm-tag {
  display: inline-block;
  background: var(--sfm-surface);
  border: 1px solid var(--sfm-border);
  border-radius: var(--sfm-radius-pill);
  color: var(--sfm-purple-deeper);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 3px 12px;
  white-space: nowrap;
}

/* Section labels inside a case study (Objective / Key Results / …) */
.sfm-case-study h4 {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sfm-purple-dark);
}

/* Tech-stack line */
.sfm-stack {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--sfm-text-muted);
  font-size: 0.85rem;
  margin-bottom: 20px;
}


/* ================================================================
   11. FOOTER
   Structural columns are built in the Kadence Footer Builder
   (Customizer); these rules provide the brand skin.
   ================================================================ */

.site-footer {
  background: var(--sfm-surface);
  border-top: 1px solid var(--sfm-border);
  font-family: 'Montserrat', sans-serif !important;
}

.site-footer a {
  color: var(--sfm-text-muted);
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--sfm-purple-dark);
}

.site-footer .footer-html,
.site-footer .widget {
  color: var(--sfm-text-muted);
  font-size: 0.9rem;
}

.sfm-footer-tagline {
  color: var(--sfm-text-muted);
  font-size: 0.9rem;
  max-width: 320px;
}

/* 3-column footer layout (markup lives in the Customizer footer HTML element) */
.site-footer .sfm-footer-grid {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  flex-wrap: wrap;
  text-align: left;
  padding: 32px 0 8px;
}

.sfm-footer-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}

/* Kadence wpautop wraps each footer link in a <p> — flatten those */
.sfm-footer-col p {
  margin: 0;
}

.site-footer .footer-html a,
.site-footer .footer-widget-area a {
  text-decoration: none !important;
}

.sfm-footer-nav a {
  display: block;
  padding: 2px 0;
}

.sfm-footer-nav a {
  font-weight: 500;
}

.site-footer .sfm-footer-button {
  display: inline-block;
  background: var(--sfm-purple);
  color: #ffffff !important;
  border-radius: var(--sfm-radius-pill);
  padding: 9px 20px;
  font-weight: 600;
  box-shadow: var(--sfm-shadow-sm);
  transition: background-color 0.2s ease;
}
.site-footer .sfm-footer-button:hover {
  background: var(--sfm-purple-dark);
}

.sfm-footer-bottom {
  text-align: center;
  font-size: 0.8rem;
  color: var(--sfm-text-subtle);
  border-top: 1px solid var(--sfm-border);
  padding-top: 16px;
  margin-top: 24px;
}

@media (max-width: 767px) {
  .site-footer .sfm-footer-grid {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .sfm-footer-col {
    align-items: center;
  }
}


/* ================================================================
   12. LAYOUT FIXES
   ================================================================ */

.content-area .wp-block-group.alignfull {
  margin-left: calc(-1 * var(--global-content-edge-padding));
  margin-right: calc(-1 * var(--global-content-edge-padding));
  max-width: calc(100% + 2 * var(--global-content-edge-padding));
}

.wp-block-group figure.wp-block-image,
.wp-block-group .wp-block-image img {
  border-left: none !important;
  box-shadow: none !important;
}

.home .entry-content-wrap,
.home article.entry {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Templates page */
body.page-id-11 .content-container,
body.page-id-11 article.entry,
body.page-id-11 .entry-content-wrap {
  background-color: var(--sfm-surface);
}

body.page-id-11 .entry-content > .wp-block-group:first-child {
  padding-left: 0 !important;
  padding-right: 0 !important;
}


/* ================================================================
   13. RESPONSIVE
   ================================================================ */

@media (max-width: 767px) {
  /* Blanket stacking safety net.
     REMOVE AFTER PHASE 4 — once every page's columns carry
     isStackedOnMobile:true this override is redundant. */
  .wp-block-columns {
    flex-direction: column !important;
  }
  .wp-block-column {
    flex-basis: 100% !important;
    width: 100% !important;
    margin-bottom: 16px;
  }
  .home .wp-block-column:first-child { order: 1; }
  .home .wp-block-column:last-child  { order: 2; }
  .home .wp-block-group {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .wp-block-cover h1,
  .wp-block-cover h2 {
    font-size: 1.75rem !important;
  }
  .wp-block-button { width: 100%; }
  .wp-block-button__link {
    width: 100%;
    text-align: center;
    box-sizing: border-box;
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  .wp-block-columns .wp-block-column {
    flex-basis: calc(50% - 16px) !important;
    flex-grow: 0;
    flex-shrink: 0;
  }
  .wp-block-group.alignfull > .is-layout-constrained,
  .wp-block-group.alignfull > .wp-block-group__inner-container {
    padding-left: clamp(16px, 4vw, 40px) !important;
    padding-right: clamp(16px, 4vw, 40px) !important;
  }
}

@media (max-width: 1024px) {
  .kadence-mobile-header-toggle,
  button.menu-toggle,
  .mobile-toggle-open {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  #mobile-header .custom-logo {
    max-width: 180px;
    width: auto;
    height: auto;
  }
  /* The logo wordmark already says the brand name — the text site
     title next to it wraps to three lines on phones and crowds the
     header. Hide it on mobile only. */
  #mobile-header .site-title-wrap {
    display: none !important;
  }
}