/*
 Theme Name:   ShorePoint Church
 Description:  SPC Child Theme Styles
 Author:       Porch Creative Solutions
 Version:      2.2.0
 Template:     Total
*/

/* =====================================================
   ADMIN: CPT SVG Icon Size Normalization
===================================================== */

#adminmenu .menu-icon-spc_cards svg,
#adminmenu .menu-icon-banner svg {
	width: 20px;
	height: 20px;
	display: block;
	transform: scale(0.78); /* visual weight match */
	transform-origin: center;
}

/* =====================================================
   ADMIN: CPT Icons — Match WP Green Hover
===================================================== */

/* Base state */
#adminmenu .menu-icon-spc_cards img,
#adminmenu .menu-icon-banner img {
	opacity: 0.7;
	transition:
		opacity 150ms ease,
		filter 150ms ease;
}

/* Hover — simulate WP green */
#adminmenu li:hover .menu-icon-spc_cards img,
#adminmenu li:hover .menu-icon-banner img {
	opacity: 1;
	filter:
		brightness(1.1)
		saturate(2)
		hue-rotate(85deg);
}

/* Active / current — solid green feel */
#adminmenu li.current .menu-icon-spc_cards img,
#adminmenu li.current .menu-icon-banner img {
	opacity: 1;
	filter:
		saturate(2)
		hue-rotate(85deg);
}

/* =====================================================
   OFFSET MENU – COLUMN HEADERS (CSS ONLY)
   Works inside flex containers
===================================================== */

/* Base header style */
.menu-col-church::before,
.menu-col-ministries::before,
.menu-col-connect::before {
  content: "";
  display: block;

  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;

  opacity: 0.6;
  margin-bottom: 1rem;
  color:#272324;
}

/* Individual labels */
.menu-col-church::before {
  content: "Shorepoint Church";
}

.menu-col-ministries::before {
  content: "Ministries";
}

.menu-col-connect::before {
  content: "Connect";
}

/* =====================================================
   OFF-CANVAS MENU — CENTERED CONTENT RAIL
   (Header remains full width)
===================================================== */

/* -----------------------------------------------------
   1. KEEP HEADER FULL WIDTH (DO NOT CENTER)
----------------------------------------------------- */
.wpex-off-canvas__header {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding-left: 30px; /* preserves Total defaults */
    padding-right: 30px;
}

/* -----------------------------------------------------
   2. CENTER MENU CONTENT VIA OFFSET-INNER (MAIN FIX)
----------------------------------------------------- */
#offset-inner {
    max-width: 1300px; /* adjust: 1100–1300 if needed */
    margin-left: auto;
    margin-right: auto;
    padding-left: clamp(20px, 5vw, 64px);
    padding-right: clamp(20px, 5vw, 64px);
}

/* -----------------------------------------------------
   3. CENTER THE MEGA-MENU COLUMNS AS A GROUP
----------------------------------------------------- */
#offset-inner .navbar_mega-menu {
    justify-content: center;
    column-gap: clamp(40px, 6vw, 96px);
}

/* -----------------------------------------------------
   4. COLUMN TEXT ALIGNMENT (ANCHOR-STYLE)
----------------------------------------------------- */
#offset-inner .navbar_mega-menu_column-1,
#offset-inner .navbar_mega-menu_column-2,
#offset-inner .navbar_mega-menu_column-3 {
    text-align: left;
}

/* Parent should NOT stay green when a child is active */
.navbar_mega-menu a.current-menu-ancestor:not(.current-menu-item) {
    color: inherit;
}

/* -----------------------------------------------------
   5. OPTIONAL — CENTER FOOTER TO MATCH MENU RAIL
   (UNCOMMENT IF DESIRED)
----------------------------------------------------- */
/*
.wpex-off-canvas__footer {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: clamp(20px, 5vw, 64px);
    padding-right: clamp(20px, 5vw, 64px);
}
*/

/* -----------------------------------------------------
   6. OPTIONAL — TIGHTER MOBILE BEHAVIOR
   (UNCOMMENT IF MENU FEELS TOO WIDE ON PHONES)
----------------------------------------------------- */
/*
@media (max-width: 767px) {
    #offset-inner {
        padding-left: 24px;
        padding-right: 24px;
    }

    #offset-inner .navbar_mega-menu {
        justify-content: flex-start;
        column-gap: 32px;
    }
}
*/

/* =====================================================
   iPAD SAFARI — OFF-CANVAS MEGA MENU TYPE SCALE
===================================================== */

@media (min-width: 768px) and (max-width: 1024px) {

    /* Primary mega menu columns */
    #offset-inner
    .navbar_mega-menu_column-1
    .vcex-navbar-link,
    #offset-inner
    .navbar_mega-menu_column-2
    .vcex-navbar-link {
        font-size: 32px;     /* down from desktop */
        line-height: 1.15;
        letter-spacing: 0.015em;
    }

    /* Secondary column (ABOUT / VISIT / CONNECT / etc) */
    #offset-inner
    .navbar_mega-menu_column-3
    .vcex-navbar-link {
        font-size: 18px;
        line-height: 1.35;
        letter-spacing: 0.06em;
    }
}

/* =====================================================
   SPC HEADER NAV — PREVENT LINE WRAPPING
===================================================== */

#spc-navigation .vcex-horizontal-menu-nav__list {
	flex-wrap: nowrap;
}

/* =====================================================
   SPC HEADER OVERLAY — BASE HEIGHTS
   (All pages unless overridden)
===================================================== */

/* Desktop default */
.vc_row.spc-header-overlay {
    min-height: 800px !important;
}

/* Tablet + Mobile default */
@media (max-width: 1024px) {
    .vc_row.spc-header-overlay {
        min-height: 650px !important;
    }
}


/* =====================================================
   SPC HEADER OVERLAY — iPAD AIR / MODERN iPADS
   Landscape-specific tuning
===================================================== */

/* iPad Air / iPad Pro (Landscape) */
@media 
    (min-width: 1024px)
    and (max-width: 1194px)
    and (orientation: landscape)
    and (pointer: coarse) {

    .vc_row.spc-header-overlay {
        min-height: 650px !important;
    }
}


/* =====================================================
   SPC HEADER OVERLAY — HOMEPAGE OVERRIDES
===================================================== */

/* Homepage — Desktop */
.vc_row.spc-header-overlay.home {
    min-height: 900px !important;
}

/* Homepage — Tablet + Mobile */
@media (max-width: 1024px) {
    .vc_row.spc-header-overlay.home {
        min-height: 700px !important;
    }
}

/* Homepage — iPad Air / Modern iPads (Landscape)
   Matches tablet height intentionally */
@media 
    (min-width: 1024px)
    and (max-width: 1194px)
    and (orientation: landscape)
    and (pointer: coarse) {

    .vc_row.spc-header-overlay.home {
        min-height: 700px !important;
    }
}

/* =====================================================
   SPC TOP BANNER — FULL BLEED SIDES ONLY
   (No global side effects)
===================================================== */

.spc-topbanner .spc-topbanner-inner .wpex-post-cards-inner {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* Safety: ensure no grid padding sneaks back in */
.spc-topbanner .spc-topbanner-inner .wpex-post-cards-entry {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* =====================================================
   SPC RESOURCE CARD — FORCE CARD RATIO
===================================================== */

.spc-resource-card {
	display: block;    
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

/* --------------------------------------------------
   SPC Resource Card – Image Focus Overrides
-------------------------------------------------- */

.spc-resource-card .wpex-card-thumbnail img {
	object-fit: cover;
	object-position: center center;
}

/* Focus variants */
.spc-resource-card.image-focus-top
.wpex-card-thumbnail img {
	object-position: center top;
}

.spc-resource-card.image-focus-bottom
.wpex-card-thumbnail img {
	object-position: center bottom;
}

.spc-resource-card.image-focus-left
.wpex-card-thumbnail img {
	object-position: left center;
}

.spc-resource-card.image-focus-right
.wpex-card-thumbnail img {
	object-position: right center;
}

/* Portrait image – visual center correction */
.spc-resource-card.image-focus-lower
.wpex-card-thumbnail img {
	object-position: 50% 65%;
}

/* =====================================================
   SPC RESOURCE CARD — FORCE MEDIA CROPPING
===================================================== */

.spc-resource-media {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

/* Ensure the media wrapper fills the card */
.spc-resource-media,
.spc-resource-media .wpex-card-media,
.spc-resource-media .wpex-card-thumbnail {
	width: 100%;
	height: 100%;
}

/* This is the critical part */
.spc-resource-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* =====================================================
   SPC RESOURCE CARD — OVERRIDE TOTAL CARD RATIO
   (AUTHORITATIVE)
===================================================== */

.wpex-post-cards-spc-resources
.wpex-post-cards-entry
.wpex-card {
	aspect-ratio: 16 / 9 !important;
	height: auto !important;
}

/* =====================================================
   GLOBAL SYSTEMS & UTILITIES
===================================================== */

/* ---------- Scroll Reveal ---------- */
.spc-scroll-reveal {
	opacity: 0;
	transform: translateX(140px);
	transition:
		opacity 800ms ease-out,
		transform 1200ms cubic-bezier(.22,.61,.36,1);
}

.spc-scroll-reveal.is-visible {
	opacity: 1;
	transform: translateX(0);
}

/* ---------- Subtitle Rule ---------- */
.spc-subtitle {
	position: relative;
	display: inline-block;
	padding-left: 28px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 500;
}

.spc-subtitle::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 20px;
	height: 2px;
	background-color: var(--wpex-accent-alt);
	transform: translateY(-50%);
}

.spc-subtitle.light::before {
	background-color: #F8F4E9;
}

/* =====================================================
   NEXT STEPS — MEGA MENU ACTIVE / HOVER STATES
===================================================== */

/* Base color for Next Steps parent */
.navbar_mega-menu_column-1
.vcex-navbar-link[href$="/next-steps/"] {
  color: var(--wpex-palette-252-color);
}

/* Parent active ONLY on the Next Steps page */
body.page-id-700
.navbar_mega-menu_column-1
.vcex-navbar-link[href$="/next-steps/"].active {
  color: var(--wpex-accent-alt);
}

/* When on child pages, neutralize parent active color */
body:not(.page-id-700)
.navbar_mega-menu_column-1
.vcex-navbar-link[href$="/next-steps/"].active {
  color: var(--wpex-palette-252-color);
}

/* On child pages, Next Steps is still .active (ancestor). Let it hover green anyway. */
body:not(.page-id-700)
.navbar_mega-menu_column-1
.vcex-navbar-link[href$="/next-steps/"].active:hover {
  color: var(--wpex-accent-alt) !important;
}

/* =====================================================
   HOME - SOAP BLOCK
===================================================== */

#soap {
	position: absolute;
	bottom: 130px;
	left: var(--wpex-container-padding);
	width: 400px;
	z-index: 50;
	pointer-events: none;
}

#soap .daily-soap { pointer-events: auto; }

#soap.vc_row {
	height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* =====================================================
   ABOUT - VALUES – STICKY TITLE
===================================================== */

.values-section,
.values-section .vc_row,
.values-section .vc_column_container {
	overflow: visible !important;
}

.values-sticky-title h2 { margin: 0; }

@media (min-width: 1025px) {
	.values-sticky-title {
		position: sticky;
		top: 120px;
	}
}

/* =====================================================
   GLOBAL - IMAGE OVERLAP SYSTEM
===================================================== */

.spc-overlap-up,
.spc-overlap-down {
	position: relative;
	z-index: 3;
}

.spc-overlap-up { margin-top: -160px; }
.spc-overlap-down { margin-bottom: -160px; }

.spc-overlap-up > .vc_column-inner,
.spc-overlap-down > .vc_column-inner {
	position: relative;
	z-index: 5;
}

.spc-overlap-up > .vc_column-inner { margin-top: -160px; }
.spc-overlap-down > .vc_column-inner { margin-bottom: -160px; }

.spc-overlap-receive {
	position: relative;
	z-index: 1;
	padding-top: 80px;
	overflow: visible !important;
}

/* WPBakery safety */
.spc-overlap-up,
.spc-overlap-down,
.spc-overlap-up .vc_row,
.spc-overlap-down .vc_row,
.spc-overlap-up .vc_column_container,
.spc-overlap-down .vc_column_container {
	overflow: visible !important;
}

/* Media normalization */
.spc-overlap-up img,
.spc-overlap-down img,
.spc-overlap-up iframe,
.spc-overlap-down iframe,
.spc-overlap-up video,
.spc-overlap-down video {
	display: block;
	width: 100%;
	height: auto;
}

/* Parent row must establish stacking context */
.spc-text-overlay-up {
	position: relative;
	z-index: 3;
	transform: translateY(-120px);
}

/* Image / background column */
.spc-text-overlay-up .spc-overlay-image {
	position: relative;
	z-index: 1;
}

/* Text column that lifts upward */
.spc-text-overlay-up .spc-overlay-text {
	position: relative;
	z-index: 3; /* KEY: ensures text sits above image + adjacent sections */
	margin-top: -120px; /* controls how far text overlaps upward */
}

/* Inner wrapper (optional but recommended) */
.spc-text-overlay-up .spc-overlay-text .vc_column-inner {
	background: var(--wpex-palette-252-color);
	padding: 48px;
}

/* Ensure WPBakery does not clip overlap */
.spc-text-overlay-up,
.spc-text-overlay-up .vc_row,
.spc-text-overlay-up .vc_column_container {
	overflow: visible !important;
}

/* =====================================================
   GLOBAL - REVERSE IMAGE OVERLAP SYSTEM
===================================================== */

/* Parent row */
.reverse-overlap-row {
	position: relative;
	z-index: 2;
}

/* Image column drops INTO next section */
.reverse-overlap-image {
	position: relative;
	z-index: 1;
	margin-bottom: -150px;   /* pushes image into next wrapper */
}

/* Media normalization */
.reverse-overlap-image img,
.reverse-overlap-image iframe,
.reverse-overlap-image video {
	display: block;
	width: 100%;
	height: auto;
}

/* =====================================================
   SPC Header Overlay 
===================================================== */


/* Ensure the hero row is the positioning context for the absolute overlay */
.vc_row.spc-header-overlay{
  position: relative;
}

/* Replace Total's overlay color with your gradient overlay */
.vc_row.spc-header-overlay .wpex-bg-overlay{
  background: none !important;
  background-image:
    radial-gradient(
      circle farthest-corner at 50% 65%,
      rgba(35,31,32,0) 0%,
      rgba(35,31,32,0.70) 55%,
      rgba(35,31,32,0.92) 100%
    ),
    linear-gradient(180deg,
      rgba(35,31,32,0.55) 0%,
      rgba(35,31,32,0) 31%
    ) !important;

  opacity: 1 !important;            /* bypass wpex-opacity-60 */
}

/* If you still see it look "too light", it's often because wpex-bg-black is applying.
   This ensures the gradient is what wins. */
.vc_row.spc-header-overlay .wpex-bg-overlay.wpex-bg-black{
  background-color: transparent !important;
}

/* =====================================================
   PREVENT IMAGE FROM COLLIDING WITH OVERLAY HEADER
===================================================== */

/* Desktop */
.reverse-overlap-image {
	padding-top: 120px;
}

/* Tablet */
@media (max-width: 1024px) {
	.reverse-overlap-image {
		padding-top: 120px;
	}
}

/* Mobile */
@media (max-width: 768px) {
	.reverse-overlap-image {
		padding-top: 90px;
	}
}

/* =====================================================
   HOME CAROUSEL — MOBILE HEIGHT TUNING
   Slightly taller than square, editorial feel
===================================================== */

@media (max-width: 767px) {

	/* Override global square ratio for HOME cards only */
	.wpex-post-cards-spc-home .spc-card {
		aspect-ratio: 4 / 5; /* taller than 1:1 */
	}

}

/* =====================================================
   CONNECT – GET CONNECTED CARD: Bottom Pin + Hover
===================================================== */

/* Overlay must never block hover */
.wpex-bg-overlay {
	pointer-events: none;
	background-size: cover !important;
	background-position: center center !important;
	background-repeat: no-repeat !important;
}

/* Ensure the card + inner wrappers provide a real height context */
.wpex-card,
.wpex-card-inner,
.the-latest,
.spc-latest-card-content,
.spc-latest-card-content > .vc_column-inner {
	height: 100%;
}

/* Make the column’s wpb_wrapper the vertical stack */
.spc-latest-card-content > .vc_column-inner > .wpb_wrapper {
	display: flex;
	flex-direction: column;
	height: 100%;
}

/* Top stays at top */
.spc-latest-top {
	flex: 0 0 auto;
}

/* Bottom is forced to the bottom (this is the actual “pin”) */
.spc-latest-bottom {
	margin-top: auto;
	padding-top: 12px;
	width: 100%;
}

/* Icon base state */
.spc-button-link .vcex-icon-wrap {
	background-color: #2220134d;
	transition: background-color 200ms ease;
}

/* Icon hover driven by CARD hover (Safari safe) */
.wpex-card:hover .spc-button-link .vcex-icon-wrap {
	background-color: var(--wpex-accent-alt);
}

/* =====================================================
   404 PAGE OVERRIDES
===================================================== */

body.error404 #spc-navigation .spc-logo img { opacity: 0; }

body.error404 #spc-navigation .spc-logo::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		url("https://shorepoint.church/wp-content/themes/shorepoint/logos/walnut/svg/logo-horizontal-walnut.svg")
		no-repeat center / contain;
}

/* =====================================================
   404 PAGE ONLY — DARK HEADER NAV + HAMBURGER + HOVER
===================================================== */

body.error404 .vc_row.dark {
	--spc-header-fg: #272324;
	--spc-header-hover: #127D63;
}

/* Desktop Horizontal Menu Links */
body.error404 .vc_row.dark .vcex-horizontal-menu-nav__item-content {
	color: var(--spc-header-fg) !important;
}

/* Hover / Focus / Active */
body.error404 .vc_row.dark .vcex-horizontal-menu-nav__item-content:hover,
body.error404 .vc_row.dark .vcex-horizontal-menu-nav__item-content:focus,
body.error404 .vc_row.dark .vcex-horizontal-menu-nav__item-content.active {
	color: var(--spc-header-hover) !important;
}

/* Hamburger Icon (Off-Canvas Toggle) */
body.error404 .vc_row.dark .vcex-off-canvas-menu__toggle-hamburger {
	--wpex-hamburger-icon-color: var(--spc-header-fg);
}

/* Optional: ensure toggle button inherits color */
body.error404 .vc_row.dark .vcex-off-canvas-menu__toggle {
	color: var(--spc-header-fg);
}

/* =====================================================
   MOBILE OVERRIDES (SINGLE LOCATION)
===================================================== */

@media (max-width: 768px) {

	/* Life Groups */
	.vc_tta-panel-body .vc_row {
		flex-direction: column;
		gap: 48px;
	}

	.spc-groupslead { max-width: 100%; }

	.vc_tta-tabs-container {
		margin-bottom: 48px !important;
	}

	/* Overlap system */
	.spc-overlap-up { margin-top: -100px; }
	.spc-overlap-down { margin-bottom: -100px; }
	.spc-overlap-receive { padding-top: 140px; }

	/* Cards */
	.wpex-card .the-latest {
		background-size: cover !important;
		transition: none;
		min-height: 550px !important;
	}

	/* Mega menu */
	.navbar_mega-menu {
		gap: 25px;
	}

	/* Utilities */
	.hide-mobile-portrait {
		display: none !important;
	}
}

/* =========================================
   Fix trailing green space on last item
========================================= */

.spc-connect-menu .vcex-navbar-link {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.spc-connect-menu .vcex-navbar-inner {
	padding: 6px 8px 6px 6px;
}

.spc-connect-menu .vcex-navbar-link:last-child {
	margin-right: 0 !important;
}

/* =========================================
   SPC Leadgroup – Remove Tab Border at Source
========================================= */

.spc-leadgroup
.vc_tta.vc_general.vc_tta-style-total
.vc_tta-tab > a {
	border-width: 0 !important;
}

/* =====================================================
   SPC Life Groups – Final Image Layout Control
===================================================== */

.spc-lifegroup-container .vc_tta-panel-body > .vc_row {
	display: flex;
	justify-content: center;
	gap: 10px;
}

.spc-lifegroup-container .vc_column_container {
	flex: 0 0 auto;
	width: auto;
}

figure.spc-lifegroups {
	max-width: 500px;
	width: 100%;
	margin: 0 auto;
}

figure.spc-lifegroups .vcex-image-inner {
	display: block;
	max-width: 100%;
}

figure.spc-lifegroups img {
	width: 100%;
	height: auto;
	max-width: 100%;
}

.wpex-bg-black,
.wpex-hover-bg-black:hover {
	background-color: var(--wpex-palette-252-color);
}

/* =====================================================
   HEADER & NAVIGATION SYSTEMS
===================================================== */

/* Off-Canvas Fade */
.wpex-off-canvas {
	transform: none !important;
	opacity: 0;
	transition: opacity 120ms ease-out;
}
.wpex-off-canvas.wpex-off-canvas--open {
	opacity: 1;
}

/* Off-Canvas Layout */
.wpex-off-canvas__content .offset-menu {
	min-height: calc(100vh - 120px);
	width: 100% !important;
	padding: 60px 0 !important;
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

.wpex-off-canvas__content .offset-menu.vc_row {
	min-height: inherit;
}

.wpex-off-canvas__content .offset-menu .wpb_column {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.wpex-off-canvas__content .offset-menu .vcex-navbar a {
	float: none !important;
	text-align: left;
}

/* =====================================================
   LIFE GROUPS – PAGE-SCOPED
===================================================== */

.spc-groupslead { max-width: 520px; }

.spc-groupslead > .vc_column-inner {
	padding-left: 0;
	padding-right: 0;
}

.spc-groupslead .numbered-block__title { margin-bottom: 8px; }

.spc-groupslead .numbered-block__body {
	max-width: 460px;
	margin-bottom: 32px;
}

.spc-groupslead .theme-button-wrap { margin-top: 24px; }

/* Lead a Group layout ONLY */
.spc-leadgroup #lead .vc_row {
	display: flex;
	justify-content: center;
	gap: 80px;
}

/* Find a Group — restore normal flow so cards can size correctly */
.spc-leadgroup #find .vc_row {
	display: block !important;
}

/* Ensure Post Cards always expand to full row width */
.wpex-post-cards { width: 100%; }

/* FIX: WPBakery Tabs → Inner Row Width Collapse (Find tab ONLY) */
.spc-leadgroup #find .vc_row.vc_inner {
	width: 100%;
	max-width: 100%;
	margin-left: 0;
	margin-right: 0;
}

.spc-leadgroup #find .vc_column_container { width: 100%; }

.spc-leadgroup #find .wpex-post-cards { width: 100%; }

/* =====================================================
   SPC SMALL GROUPS — LOGO BOTTOM CENTER
===================================================== */

.wpex-post-cards-spc-smallgroups .spc-card-logo {
	top: auto !important;
	right: auto !important;
	left: 50%;
	bottom: 14%;
	transform: translate(-50%, 14px);
	opacity: 0;
	transition: opacity 300ms ease, transform 300ms ease;
}

.wpex-post-cards-spc-smallgroups a.spc-card:hover .spc-card-logo {
	opacity: 1;
	transform: translate(-50%, 0);
}

/* First column asymmetry */
.vc_tta-panel-body .spc-groupslead:first-child { text-align: right; }

.vc_tta-panel-body .spc-groupslead:first-child .vcex-heading-inner,
.vc_tta-panel-body .spc-groupslead:first-child .wpb_text_column {
	text-align: right;
}

.vc_tta-panel-body .spc-groupslead:first-child .theme-button-wrap {
	justify-content: flex-end;
}

.vc_tta-panel-body .spc-groupslead:first-child .theme-button {
	margin-left: auto;
}

.vc_tta-panel-body .spc-groupslead:first-child .numbered-block__body {
	margin-left: auto;
	margin-right: 0;
}

/* Tabs spacing */
.vc_tta-tabs-container { margin-bottom: 40px !important; }

/* =====================================================
   SPC LEAD GROUP TABS (SCOPED)
===================================================== */

.spc-leadgroup .vc_tta-tabs-container,
.spc-leadgroup .vc_tta-tabs {
	text-align: center;
}

.spc-leadgroup .vc_tta-tabs-list {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	background-color: #127D63;
	border-radius: 1px;
}

.spc-leadgroup.vc_tta.vc_tta-spacing-1 .vc_tta-tabs-list {
	padding: 5px !important;
	gap: 5px;
}

.spc-leadgroup .vc_tta-tab > a {
	padding: 12px 22px;
	font-size: 13px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #F8F4E9 !important;
	background: transparent;
	border-radius: 1px !important;
	border: none !important;
}

.spc-leadgroup .vc_tta-tab.vc_active > a,
.spc-leadgroup .vc_tta-tab > a:hover {
	background: #DAE2D2;
	color: #272324 !important;
}

/* Remove Bottom Line */
.spc-leadgroup .vc_tta-tab > a {
	border-bottom: none !important;
}

/* =====================================================
   REMOVE TOTAL DEFAULT CARD / LINK PADDING
===================================================== */

.wpex-card-spc-home > .wpex-card-inner { padding: 0; }

.wpex-post-cards-spc-home .wpex-card-inner {
	display: block;
	height: auto;
	align-self: stretch;
}

/* Kill grid bleed */
.wpex-post-cards-grid {
	margin-left: 0;
	margin-right: 0;
}
.wpex-post-cards-entry {
	padding-left: 0;
	padding-right: 0;
}


/* =====================================================
   SPC CARDS — BASE (AUTHORITATIVE)
   NOTE: This section was duplicated in your file; it is now single-source.
===================================================== */

.spc-card {
	position: relative;
	overflow: hidden;
	border-radius: 1px;
	color: #fff;
	background: #000;
	aspect-ratio: 3 / 4;
}

/* Media fills card */
.spc-card-media {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.spc-card-media,
.spc-card-media .wpex-card-media,
.spc-card-media .wpex-card-thumbnail {
	width: 100%;
	height: 100%;
}

.spc-card-media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .8s cubic-bezier(.22,.61,.36,1);
}

.spc-card:hover .spc-card-media img {
	transform: scale(1.08);
}

/* Overlay fills card */
.spc-card-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	padding: 32px;
	background: linear-gradient(
		to top,
		rgba(0,0,0,.65),
		rgba(0,0,0,.15) 50%,
		transparent
	);
}

/* Logo — top right */
.spc-card-logo {
	position: absolute;
	top: 32px;
	right: 32px;
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transform: translateY(12px);
	transition:
		opacity .35s ease,
		transform .45s cubic-bezier(.22,.61,.36,1);
	pointer-events: none;
}

.spc-card-logo img {
	width: 100%;
	height: 100%;
	display: block;
}

.spc-card:hover .spc-card-logo {
	opacity: 1;
	transform: translateY(0);
}

/* Title + CTA layout */
.spc-card-title {
	margin: 0;
	font-size: var(--wpex-text-lg);
	font-weight: 800;
	line-height: 1.1;
	color: #fff;
}

.spc-card-bottom {
	margin-top: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.spc-card-cta-text {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	transition: color .25s ease;
}

/* CTA icon */
.spc-card-cta-icon {
	display: flex;
	align-items: center;
	justify-content: center;
}

.spc-card .spc-button-link .vcex-icon-wrap {
	width: 38px;
	height: 38px;
	border-radius: 1px;
	background: rgba(255,255,255,.25);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color .25s ease;
}

.spc-card .spc-button-link svg {
	width: 17px;
	height: 17px;
	display: block;
	line-height: 1;
	color: #fff;
}

.spc-card:hover .spc-button-link .vcex-icon-wrap {
	background: var(--wpex-accent);
}

.spc-card:hover .spc-button-link svg {
	color: #fff;
}

.spc-card:hover .spc-card-cta-text {
	color: var(--wpex-accent);
}

/* Title + subheading — lock color */
.spc-card-title,
.spc-card-subheading {
	color: #ffffff;
}

.spc-card:hover .spc-card-title,
.spc-card:focus-within .spc-card-title,
.spc-card:hover .spc-card-subheading,
.spc-card:focus-within .spc-card-subheading {
	color: #ffffff;
}

/* Subheading typography */
.spc-card-subheading {
	font-family: "Editors Note";
	font-size: var(--wpex-text-lg);
	font-weight: 400;
	text-transform: capitalize;
	letter-spacing: var(--wpex-letter-spacing-wide);
	line-height: inherit;
	margin-top: 0.05em;
	opacity: 1;
}

/* CTA — only element that turns green */
.spc-card:hover .spc-card-cta-text,
.spc-card:hover .spc-card-cta-icon,
.spc-card:focus-within .spc-card-cta-text,
.spc-card:focus-within .spc-card-cta-icon {
	color: var(--wpex-accent);
}

/* Image dim only (no text fade) */
.spc-card-media { position: relative; }

/* Base image tone */
.spc-card-media::after {
	content: "";
	position: absolute;
	inset: 0;

	background: linear-gradient(
		to top,
		rgba(0,0,0,0.55),
		rgba(0,0,0,0.25) 55%,
		rgba(0,0,0,0.08)
	);

	opacity: 1;
	transition: opacity 220ms ease;
	pointer-events: none;
}

/* Hover deepen */
.spc-card:hover .spc-card-media::after,
.spc-card:focus-within .spc-card-media::after {
	opacity: 1.25; /* logical intensification */
}

.spc-card-media::after {
	will-change: opacity;
	transform: translateZ(0);
}

body.home .wpex-carousel__arrow-icon svg,
body.page-id-700 .wpex-carousel__arrow-icon svg {
	fill: var(--wpex-palette-255-color);
}

body.home .wpex-carousel__arrow:hover .wpex-carousel__arrow-icon svg,
body.page-id-700 .wpex-carousel__arrow:hover .wpex-carousel__arrow-icon svg {
	fill: var(--wpex-palette-253-color);
}

/* =====================================================
   SPC CARD HEADER — FINAL (LEFT-ALIGNED, SAFE)
===================================================== */

.spc-card .spc-card-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;

  width: 100%;
  padding-right: 72px; /* logo width + breathing room */
}

/* Logo — decorative, top-right */
.spc-card .spc-card-logo {
  position: absolute;
  top: 0;
  right: 0;

  width: 28px;
  height: 28px;

  display: flex;
  align-items: center;
  justify-content: center;

  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity .35s ease,
    transform .45s cubic-bezier(.22,.61,.36,1);

  pointer-events: none;
}

.spc-card .spc-card-logo img {
  width: 100%;
  height: 100%;
  display: block;
}

/* Title — left-aligned, wrap-safe */
.spc-card .spc-card-title {
  margin: 0;
  white-space: normal;
  line-height: 1.15;

  max-width: 100%;
  text-align: left;
}

/* =====================================================
   SPC VOLUNTEER CARD — AUTHORITATIVE
   Text-only card (no image assumptions)
===================================================== */

/* ---------- Card Base ---------- */
.wpex-post-cards-spc-volunteer .spc-card {
  position: relative;
  display: flex;

  height: 400px;
  min-height: 400px;
  aspect-ratio: auto !important;

  background-color: #414040 !important;
  overflow: hidden;
}

/* ---------- Smooth Hover Darken (overlay-based) ---------- */
.wpex-post-cards-spc-volunteer .spc-card::after {
  content: "";
  position: absolute;
  inset: 0;

  background: rgba(0, 0, 0, 0.08);
  opacity: 0;
  pointer-events: none;

  transition: opacity 420ms cubic-bezier(.22,.61,.36,1);
}

.wpex-post-cards-spc-volunteer .spc-card:hover::after,
.wpex-post-cards-spc-volunteer .spc-card:focus-within::after {
  opacity: 1;
}

/* ---------- Overlay / Layout ---------- */
.wpex-post-cards-spc-volunteer .spc-card-overlay {
  position: relative !important;
  inset: auto !important;

  display: flex;
  flex-direction: column;
  flex: 1;

  padding: 48px;
  background: none !important;
}

/* ---------- Content Stack ---------- */
.wpex-post-cards-spc-volunteer .spc-volunteer-card-content {
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* ---------- Title ---------- */
.wpex-post-cards-spc-volunteer
.wpex-card-title.spc-subtitle {
  color: var(--wpex-palette-255-color);
  font-size: var(--wpex-text-xl);
  font-family: var(--wpex-editorsnote-font);
  font-weight: 400;
  font-style: italic;

  text-transform: capitalize;
  letter-spacing: var(--wpex-tracking-wide);

  margin: 0 0 15px 0;
}

/* ---------- Body Text ---------- */
.wpex-post-cards-spc-volunteer .spc-volunteer-card-text {
  font-size: 1rem;
  line-height: 1.6;
  opacity: 0.9;

  margin-bottom: auto; /* pushes CTA to bottom */
}

/* ---------- CTA Row ---------- */
.wpex-post-cards-spc-volunteer .spc-card-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;

  margin-top: auto;
  padding-top: 32px;
}

/* CTA text */
.wpex-post-cards-spc-volunteer .spc-card-cta-text {
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* CTA icon */
.wpex-post-cards-spc-volunteer
.spc-card-cta-icon
.vcex-icon-wrap {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  background-color: var(--wpex-accent-color);
}

/* ---------- Disable Logo Reveal ---------- */
.wpex-post-cards-spc-volunteer .spc-card-logo {
  display: none !important;
}

/* =====================================================
   SPC VOLUNTEER — CTA Arrow Background
===================================================== */

.wpex-post-cards-spc-volunteer
.spc-card-cta-icon
.vcex-icon-wrap {
  width: 36px;
  height: 36px;

  background-color: #2220134d; /* matches darker example */
  border-radius: var(--wpex-rounded-sm);

  display: flex;
  align-items: center;
  justify-content: center;

  transition: background-color 200ms ease;
}

/* Optional: hover polish (matches SPC language) */
.wpex-post-cards-spc-volunteer
.spc-card:hover
.spc-card-cta-icon
.vcex-icon-wrap {
  background-color: var(--wpex-accent-alt);
}

/* =====================================================
   SPC VOLUNTEER — Restore Inner Spacing
===================================================== */

/* Ensure content sits above hover overlay */
.wpex-post-cards-spc-volunteer .spc-card-overlay {
  position: relative;
  z-index: 1;
}

/* Make padding belong to content, not the card shell */
.wpex-post-cards-spc-volunteer .spc-volunteer-card-content {
  padding: 48px;
}

/* =====================================================
   SPC VOLUNTEER — Prevent Body Copy Hover Color Shift
===================================================== */

/* Set the intended body text color explicitly */
.wpex-post-cards-spc-volunteer .spc-volunteer-card-text {
  color: var(--wpex-palette-255-color) !important;
}

/* Lock ALL descendants to the same color (spans, links, etc.) */
.wpex-post-cards-spc-volunteer .spc-volunteer-card-text * {
  color: var(--wpex-palette-255-color) !important;
}

/* On hover, keep it exactly the same */
.wpex-post-cards-spc-volunteer .spc-card:hover .spc-volunteer-card-text,
.wpex-post-cards-spc-volunteer .spc-card:hover .spc-volunteer-card-text * {
  color: var(--wpex-palette-255-color) !important;
}

/* =====================================================
   SPC VOLUNTEER — Lock CTA Baseline
===================================================== */

.wpex-post-cards-spc-volunteer .spc-volunteer-card-content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.wpex-post-cards-spc-volunteer .spc-volunteer-card-text {
  flex: 1 1 auto;
}

.wpex-post-cards-spc-volunteer .spc-card-bottom {
  margin-top: 0;       /* remove previous auto logic */
  padding-top: 32px;   /* consistent visual spacing */
}

/* =====================================================
   SPC SERVE CARD
===================================================== */

/* Neutralize global tall cards */
.wpex-post-cards-spc-serve .spc-card {
	aspect-ratio: auto;
}

/* Establish 16:9 ratio using anchor */
.wpex-post-cards-spc-serve a.spc-card::before {
	content: "";
	display: block;
	padding-top: 56.25%; /* 16:9 */
}

/* Media must fill the ratio box */
.wpex-post-cards-spc-serve .spc-card-media,
.wpex-post-cards-spc-serve .wpex-card-media,
.wpex-post-cards-spc-serve .wpex-card-thumbnail {
	position: absolute;
	inset: 0;
}

/* Image behavior */
.wpex-post-cards-spc-serve img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Overlay fills card */
.wpex-post-cards-spc-serve .spc-card-overlay {
	position: absolute;
	inset: 0;

	display: flex;
	flex-direction: column;
	justify-content: flex-end;

	padding: 32px;
	background: linear-gradient(
		to top,
		rgba(0,0,0,.55),
		rgba(0,0,0,.15) 50%,
		transparent
	);
}

/* HOME / DEFAULT SPC CARDS — stop overlay centering */
.wpex-post-cards-spc-home .spc-card-overlay {
  align-items: stretch;
}

/* =====================================================
   SPC SERVE — HOVER CONTENT (LOWER, ABOVE CTA)
===================================================== */

/* Overlay stays column-based */
.wpex-post-cards-spc-serve .spc-card-overlay {
	display: flex;
	flex-direction: column;
}

/* Hover content */
.wpex-post-cards-spc-serve .spc-serve-hover-content {
	margin-top: auto;        /* push down */
	margin-bottom: 8px;      /* small gap ABOVE CTA */

	max-width: 460px;

	font-size: 15px;
	line-height: 1.45;
	color: #ffffff;

	opacity: 0;
	transform: translateY(6px);

	transition:
		opacity 240ms ease,
		transform 240ms ease;

	pointer-events: none;
}

/* CTA is HARD pinned to bottom */
.wpex-post-cards-spc-serve .spc-card-bottom {
	margin-top: 0;           /* REMOVE auto */
}

/* Reveal */
.wpex-post-cards-spc-serve a.spc-card:hover .spc-serve-hover-content,
.wpex-post-cards-spc-serve .spc-card:focus-within .spc-serve-hover-content {
	opacity: 1;
	transform: translateY(0);
}

/* =====================================================
   SPC SERVE CARD — MOBILE UNIFORM HEIGHT SYSTEM
   Tallest card defines rhythm, CTA locked
===================================================== */

@media (max-width: 767px) {

  /* --------------------------------------------------
     1. HARD UNIFORM HEIGHT (based on tallest card)
     Adjust once, everything follows
  -------------------------------------------------- */

  .spc-card--serve {
    aspect-ratio: auto;
    height: 560px;          /* ← MASTER CONTROL */
    max-height: 560px;
  }

  /* Kill ratio box */
  .spc-card--serve::before {
    content: none !important;
    display: none !important;
  }

  /* --------------------------------------------------
     2. OVERLAY BECOMES FLEX COLUMN
     CTA pinned via auto margin
  -------------------------------------------------- */

  .spc-card--serve .spc-card-overlay {
    position: relative;
    height: 100%;

    display: flex;
    flex-direction: column;

    padding: 22px;
  }

  /* --------------------------------------------------
     3. HEADER WIDTH RECOVERY
  -------------------------------------------------- */

  .spc-card--serve .spc-card-header {
    padding-right: 44px;
    flex-shrink: 0;
  }

  /* --------------------------------------------------
     4. TEXT BLOCK — FLEXIBLE BUT CONSTRAINED
  -------------------------------------------------- */

  .spc-card--serve .spc-volunteer-card-text {
    font-size: 14px;
    line-height: 1.45;

    margin-top: 12px;
    margin-bottom: 12px;

    overflow: hidden;
  }

  /* --------------------------------------------------
     5. CTA — ABSOLUTE CONSISTENCY
     Always same vertical position
  -------------------------------------------------- */

  .spc-card--serve .spc-card-bottom {
    margin-top: auto;       /* KEY: pins to bottom */
    padding-top: 12px;
    padding-bottom: 6px;

    flex-shrink: 0;
  }

  /* --------------------------------------------------
     6. TITLE / SUBTITLE SCALE
  -------------------------------------------------- */

  .spc-card--serve .spc-card-title,
  .spc-card--serve .spc-subtitle {
    font-size: 18px;
    line-height: 1.2;
    letter-spacing: 0.06em;
  }
  
  .wpex-post-cards-spc-volunteer .spc-volunteer-card-content {
    padding: 28px;
  }

}

/* =========================================
   SPC SERVE — MOBILE RATIO OVERRIDE (FIX)
========================================= */

@media (max-width: 767px) {
	.wpex-post-cards-spc-serve .spc-card {
		aspect-ratio: auto !important;
	}
}

/* =========================================
   SPC SERVE — MOBILE HEIGHT NORMALIZATION
========================================= */

@media (max-width: 767px) {
	.wpex-post-cards-spc-serve a.spc-card {
		min-height: 320px;
	}
}

/* =========================================
   SPC SERVE — OVERLAY BREATHING ROOM
========================================= */

.wpex-post-cards-spc-serve .spc-card-overlay {
	padding-bottom: 40px;
}



/* =====================================================
   SPC SMALL GROUPS
===================================================== */

.wpex-post-cards-spc-smallgroups .spc-card {
	aspect-ratio: auto;
}

.wpex-post-cards-spc-smallgroups a.spc-card--smallgroups {
	position: relative;
	display: block;
	overflow: hidden;
}

.wpex-post-cards-spc-smallgroups a.spc-card--smallgroups::before {
	content: "";
	display: block;
	padding-top: 56.25%; /* 16:9 */
}

.wpex-post-cards-spc-smallgroups .spc-card-media,
.wpex-post-cards-spc-smallgroups .wpex-card-media,
.wpex-post-cards-spc-smallgroups .wpex-card-thumbnail {
	position: absolute;
	inset: 0;
}

.wpex-post-cards-spc-smallgroups img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 700ms cubic-bezier(.22,.61,.36,1);
}

.wpex-post-cards-spc-smallgroups a.spc-card--smallgroups:hover img {
	transform: scale(1.06);
}

.wpex-post-cards-spc-smallgroups .spc-card-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0,0,0,0.25);
	transition: background 300ms ease;
	pointer-events: none;
}

.wpex-post-cards-spc-smallgroups a.spc-card--smallgroups:hover .spc-card-overlay {
	background: rgba(0,0,0,0.45);
}

.wpex-post-cards-spc-smallgroups .spc-card-logo {
	position: absolute;
	left: 50%;
	bottom: 14%;
	transform: translate(-50%, 14px);
	opacity: 0;
	transition: opacity 300ms ease, transform 300ms ease;
}

.wpex-post-cards-spc-smallgroups a.spc-card--smallgroups:hover .spc-card-logo {
	opacity: 1;
	transform: translate(-50%, 0);
}

/* =====================================================
   SPC CARD — RESPONSIVE ASPECT RATIOS
===================================================== */

/* Tablet */
@media (max-width: 1199px) {
	.spc-card {
		aspect-ratio: 4 / 5;
	}
}

/* Mobile */
@media (max-width: 767px) {
	.spc-card {
		aspect-ratio: 1 / 1;
		/* Option B: slightly tall */
		/* aspect-ratio: 4 / 5; */
	}
}



/* =========================================
   iOS SAFARI TAP FLICKER FIX
========================================= */

.spc-accordion-header {
    -webkit-tap-highlight-color: transparent;
    background-color: transparent;
}

.spc-accordion-header:focus,
.spc-accordion-header:active {
    background-color: transparent;
}

/* =========================================
   SPC ACCORDION – MOBILE TITLE SIZE
========================================= */

@media (max-width: 767px) {
    .spc-accordion-title {
        font-size: 22px; /* adjust as needed */
        line-height: 1.35;
    }
}

/* =====================================================
   FOOTER CONNECT — FINAL FIX (SPAN-LEVEL OVERRIDE)
===================================================== */

/* Base: parent (Next Steps) stays green */
body:not(.page-id-700)
footer
.vcex-navbar
a.vcex-navbar-link[href$="/next-steps/"].active
.vcex-navbar-link-text {
  color: var(--wpex-link-color, var(--wpex-accent)) !important;
}

/* Active child text */
footer
.vcex-navbar
a.vcex-navbar-link.active:not([href$="/next-steps/"])
.vcex-navbar-link-text {
  color: var(--wpex-palette-254-color) !important;
}

/* Hover — ALL items (parent + inactive + active) */
footer
.vcex-navbar
a.vcex-navbar-link:hover
.vcex-navbar-link-text {
  color: var(--wpex-palette-254-color) !important;
}

/* =====================================================
   iPad Air — PORTRAIT ONLY
   Tight side columns in flex rows (2 / 8 / 2 → 10 / 80 / 10)
===================================================== */

@media
  (min-width: 768px)
  and (max-width: 1024px)
  and (orientation: portrait)
  and (pointer: coarse) {

  .spc-ipad-tight-cols.vc_row-flex
  > .wpb_column.vc_col-sm-2 {
    flex: 0 0 10% !important;
    max-width: 10% !important;
  }

  .spc-ipad-tight-cols.vc_row-flex
  > .wpb_column.vc_col-sm-8 {
    flex: 0 0 80% !important;
    max-width: 80% !important;
  }

}


/* =====================================================
   SPC — Tablet Stack (Flex + Non-Flex Rows)
===================================================== */

@media (min-width: 768px) and (max-width: 1024px) {

  /* Ensure row is flex */
  .spc-stack-tablet {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
  }

  /* Force all WPBakery columns full width */
  .spc-stack-tablet > .vc_column_container,
  .spc-stack-tablet > .wpb_column {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
  }

}