/* ===========================================================================
   Brand typography — body / reading text = Sanchez (serif).
   Headlines, nav, buttons, and UI chrome stay Poppins (--font-family-sans-serif).
   This file loads AFTER skin.css, so these rules win the cascade.
   Pairs with --font-family-serif: "Sanchez" in root.css and the Google Fonts
   <link> in the page templates.
   =========================================================================== */
._content-style,
._content-style p,
._content-style .paragraph,
._content-style li,
._content-style dd,
._content-style dt,
._content-style td,
._content-style th,
._content-style blockquote {
  font-family: var(--font-family-body);
}

/* Keep headings inside content on the headline font (Poppins) */
._content-style h1,
._content-style h2,
._content-style h3,
._content-style h4,
._content-style h5,
._content-style h6 {
  font-family: var(--font-family-title);
}

/* ===========================================================================
   Header (Style 3) — call-to-action buttons
   Pairs with the configurable buttons in header.style_3.php.
   =========================================================================== */

/* Utility-bar CTAs (Swag Store / Make a Gift / Apply Now) — flush, full-height
   colored blocks anchored to the right edge. Without this they stack vertically
   and overflow the utility bar. */
.header-style-3 .header-utility-btns {
  display: flex;
  align-items: stretch;
  height: var(--header-utility-bar-height);
  margin: 0 -80px 0 0; /* reach the right edge (cancels the utility bar padding) */
}
@media (max-width: 1439px) {
  .header-style-3 .header-utility-btns {
    margin-right: -30px;
  }
}
.header-style-3 .header-utility-btns .btn {
  margin: 0;
  display: flex;
}
.header-style-3 .header-utility-btns .btn > a {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 22px;
  border-radius: 0;
  font-size: 14px;
  font-weight: var(--font-weight-semi-bold);
  white-space: nowrap;
}
/* Per-button text colors — override the blanket white `.header-utility a` color
   so the gold "Apply Now" keeps dark, readable text. */
.header-style-3 .header-utility-btns .btn.is-primary > a,
.header-style-3 .header-utility-btns .btn.is-third > a,
.header-style-3 .header-utility-btns .btn.is-primary > a:hover,
.header-style-3 .header-utility-btns .btn.is-third > a:hover {
  color: var(--white);
}
.header-style-3 .header-utility-btns .btn.is-secondary > a {
  color: var(--dark);
}
/* On hover the gold button's background darkens to olive (--secondary-7), so the
   dark text loses contrast — switch it to white (skin's intended hover text). */
.header-style-3 .header-utility-btns .btn.is-secondary > a:hover {
  color: var(--white);
}
/* Thin divider so the maroon Swag Store block reads against the maroon bar */
.header-style-3 .header-utility-btns .btn:first-child > a {
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.25);
}

/* Main-row CTA (Parent Portal) — center the single button cleanly.
   Desktop only: on mobile/tablet (<=1365px) the burger is shown and skin.css
   hides .header-btns, so don't re-display it here. */
@media (min-width: 1366px) {
  .header-style-3 .header-btns {
    display: flex;
    align-items: center;
  }
}
.header-style-3 .header-btns .btn {
  margin: 0;
}

/* Search icon — on the transparent (pre-scroll) header over the hero, the hover
   color was dark maroon and vanished against the photo. Use brand gold so it
   stays visible. The scrolled (light) header keeps its maroon hover — that rule
   is scoped to html.header-scrolled and is more specific, so it's unaffected. */
.header-style-3 .search-btn:hover,
.header-style-3 .search-btn.active {
  color: var(--secondary);
}

/* ===========================================================================
   Heading decorations — always the brand orange → gold gradient
   (#E65A27 → #FFC20F). Applies to heading.style_1 and heading.style_1_with_button.
   =========================================================================== */
.heading-style-1 .heading-deco {
  background: linear-gradient(90deg, #E65A27 0%, #FFC20F 100%);
}
/* vertical lines read better top → bottom */
.heading-style-1.has-v-line-side .heading-deco,
.heading-style-1.has-v-line-above .heading-deco,
.heading-style-1.has-v-line-below .heading-deco {
  background: linear-gradient(180deg, #E65A27 0%, #FFC20F 100%);
}

/* ===========================================================================
   Content Area — "Pattern Background" option (pattern.png)
   Pairs with the custom_pattern_bg option in content_area.content_area.php.
   =========================================================================== */
.content-area.has-pattern-bg {
  background-color: #F2F0EB; /* cream fallback matching the texture */
  background-image: url("/images/pattern.png");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* Cream brand background-color utility (#F2F0EB) — used by the Content Area
   "Cream" background option and the _tpl-checkbox-color swatch. */
._bg-cream {
  background-color: #F2F0EB;
}

/* ===========================================================================
   Sidebar nav — a Menu widget placed inside the 2-column template
   (.col-left / .col-right). Gold line on the left, maroon links, bold active.
   =========================================================================== */
.col-left .mwPageBlock.Menu > .blockContents > ul,
.col-right .mwPageBlock.Menu > .blockContents > ul {
  margin: 0;
  padding: 4px 0 4px 30px;
  list-style: none;
  border-left: 3px solid var(--secondary);
}
.col-left .mwPageBlock.Menu li,
.col-right .mwPageBlock.Menu li {
  margin: 0 0 26px;
}
.col-left .mwPageBlock.Menu li:last-child,
.col-right .mwPageBlock.Menu li:last-child {
  margin-bottom: 0;
}
.col-left .mwPageBlock.Menu a,
.col-right .mwPageBlock.Menu a {
  display: inline-block;
  color: var(--primary);
  font-family: var(--font-family-title);
  font-size: 16px;
  line-height: 1.2;
  text-decoration: none;
  transition: color 0.15s ease;
}
.col-left .mwPageBlock.Menu a:hover,
.col-right .mwPageBlock.Menu a:hover {
  color: var(--primary-6);
}
/* current / active page item = bold */
.col-left .mwPageBlock.Menu li.active > a,
.col-left .mwPageBlock.Menu li.current > a,
.col-left .mwPageBlock.Menu li.here > a,
.col-left .mwPageBlock.Menu li.selected > a,
.col-right .mwPageBlock.Menu li.active > a,
.col-right .mwPageBlock.Menu li.current > a,
.col-right .mwPageBlock.Menu li.here > a,
.col-right .mwPageBlock.Menu li.selected > a {
  font-weight: var(--font-weight-bold);
}

/* ===========================================================================
   Post Details (Style 1) — brand restyle
   Pairs with blogs/post/post_details.style_1.php. Pulls the article header in
   line with the rest of the site: cream/pattern header wash, a centered
   orange -> gold title accent, and a cut-corner banner (same motif as
   image.cut_corner). CSS-only — no template markup changes required.
   =========================================================================== */

/* Header wash — swap the flat light-maroon block for the cream pattern texture,
   so the cut-corner banner reads as "framed" (the image.cut_corner pairing). */
.post-details-style-1.no-header-img .post-details-header,
.post-details-style-1.has-header-img .post-details-header::before {
  background-color: #F2F0EB;
  background-image: url("/images/pattern.png");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* Title — headline font, centered, with the brand orange -> gold accent bar
   beneath it (matches heading.style_1 / page_banner.style_4 decorations). */
.post-details-style-1 .post-details-header-inner {
  text-align: center;
}
.post-details-style-1 .post-details-title {
  position: relative;
  display: inline-block;
  padding-bottom: 24px;
  font-family: var(--font-family-title);
  color: var(--primary);
}
.post-details-style-1 .post-details-title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 64px;
  height: 3px;
  background: linear-gradient(90deg, #E65A27 0%, #FFC20F 100%);
}

/* Banner — cut the bottom-left corner (image.cut_corner motif). Drop the rounded
   box-shadow for a drop-shadow filter so the shadow follows the cut edge. */
.post-details-style-1 .post-details-banner {
  --cut: 90px;
  filter: drop-shadow(0 14px 26px rgba(0, 0, 0, 0.16));
}
.post-details-style-1 .post-details-banner img {
  border-radius: 0;
  box-shadow: none;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
          clip-path: polygon(0 0, 100% 0, 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
}
@media (max-width: 575px) {
  .post-details-style-1 .post-details-banner {
    --cut: 48px;
  }
}

/* Subheader — headline-font author name and a brand-gold calendar icon. */
.post-details-style-1 .post-details-author-name {
  font-family: var(--font-family-title);
  color: var(--primary);
}
.post-details-style-1 .post-details-author-date i,
.post-details-style-1 .post-details-date i {
  color: var(--secondary);
}

/* ===========================================================================
   Donation Form (Style 1) — brand polish
   Pairs with payments/donation_form.style_1.php. The form already inherits the
   maroon palette (selected amounts + submit button = --primary); this layers on
   the site's signature accents — cream/pattern backdrop, an orange -> gold bar
   under the banner title, and gold heading underlines. CSS-only.
   =========================================================================== */

/* Backdrop — swap the flat light-gray section for the cream pattern texture
   used elsewhere on the site (white cards read nicely on top). */
.donation-form-style-1._bg-light {
  background-color: #F2F0EB;
  background-image: url("/images/pattern.png");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* Banner — warm the overlay toward maroon and add the centered orange -> gold
   accent bar beneath the title (matches heading.style_1 / page_banner.style_4). */
.donation-form-style-1 .banner-inner {
  background-color: rgba(0,0,0, 0.15);
}
.donation-form-style-1 .banner-inner::before {
  background-image: linear-gradient(to bottom, rgba(38, 1, 18, 0) 0%, rgba(38, 1, 18, 0.85) 100%);
}
.donation-form-style-1 .banner-title {
  font-family: var(--font-family-title);
}
.donation-form-style-1 .banner-title::after {
  content: "";
  display: block;
  width: 72px;
  height: 4px;
  margin: 18px auto 0;
  border-radius: 2px;
  background: linear-gradient(90deg, #E65A27 0%, #FFC20F 100%);
}

/* Section headings (Donor Info / Donation Options / Payment Options) — headline
   font, maroon, with the brand-gold underline accent. */
.donation-form-style-1 .form-section > h2:not(._sr-only) {
  position: relative;
  padding-bottom: 14px;
  color: var(--primary);
  font-family: var(--font-family-title);
}
.donation-form-style-1 .form-section > h2:not(._sr-only)::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 46px;
  height: 3px;
  background-color: var(--secondary);
}

/* Amount buttons — selected stays maroon; brand-tint the resting hover and add
   a headline font so the give amounts feel part of the set. */
.donation-form .amounts-btn {
  font-family: var(--font-family-title);
  transition: background-color 0.15s ease, color 0.15s ease;
}
.donation-form .amounts-btn:hover {
  background-color: var(--primary-1);
  color: var(--primary-6);
}
.donation-form .amounts-btn.selected:hover {
  background-color: var(--primary-6);
  color: var(--white);
}

/* Submit — already maroon (.btn.is-primary); add a gold keyboard focus ring. */
.donation-form-style-1 .section-submit .btn.is-primary button:focus-visible {
  outline: 3px solid var(--secondary);
  outline-offset: 2px;
}

/* Banner — semi-transparent maroon curved corner (bottom-left), the same Figma
   shape used on the interior page banner (page_banner.style_4). Clipped to the
   banner; the text/content sits above it. */
.donation-form-style-1 .banner-inner {
  overflow: hidden;
}
.donation-form-style-1 .donation-form-corner {
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  width: 455px;
  max-width: 40%;
  height: auto;
  color: var(--primary);
  opacity: 0.7;
  pointer-events: none;
}
.donation-form-style-1 .banner-inner .container {
  position: relative;
  z-index: 2;
}
@media (max-width: 767px) {
  .donation-form-style-1 .donation-form-corner {
    max-width: 55%;
  }
}

.steps-list {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	/* gap: 24px; */
	width: 100%;
	margin-bottom: 30px;
	flex-wrap: balance;
}

/* Allows each enabled step to occupy equal space */
.steps-list .step-wrap {display:contents}
.steps-list .step-inner {
	position: relative;
	display: flex;
	flex-direction: column;
	grid-column: span 2;
	min-width: 0;
	/* padding: 24px; */
	background: rgba(0,0,0,0.05);
  
}
.steps-list .step-inner:nth-last-child(2):nth-child(3n + 1),
.steps-list .step-inner:nth-last-child(2):nth-child(3n + 1) ~ .step-inner {
	grid-column: span 3;
}
.steps-list .step-inner:nth-child(2), .steps-list .step-inner:nth-child(5) {background:rgba(0,0,0,0.1)}
.steps-list .step-inner:nth-child(3), .steps-list .step-inner:nth-child(6) {background:rgba(0,0,0,0.2)}
/* If the toggle tags remain in the rendered HTML */
.steps-list > toggle {
	display: contents;
}

.step-title {
	margin-bottom: 12px;
	background: var(--primary);
	color: #fff;
	min-height: 90px;
	text-align: center;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}
.step-inner:nth-child(2) .step-title, .step-inner:nth-child(5) .step-title  {
	background: var(--primary-5);
}
.step-inner:nth-child(3) .step-title, .step-inner:nth-child(6) .step-title  {
	background: var(--primary-6);
}
.step-title h2 {
	margin: 0;
	font-size: 18px!important;
	color: #fff!important;
	padding: 15px;
	margin-bottom: 15px!important;
}

.step-desc {
	flex: 1;
	padding: 15px 20px;
}

.step-inner > i {
	position:absolute;
	right:-10px;
	top: 30px;
	font-size:32px;
	color: #F2F0EB;
	z-index: 8;
}
.step-inner:last-child > i, .step-inner:nth-child(3) > i {display:none;}
/* Tablet */
@media (max-width: 991px) {
	.steps-list {
		flex-wrap: wrap;
	}

	.steps-list .step-inner {
		flex: 1 1 calc(33.333% - 24px);
	}
}

/* Mobile */
@media (max-width: 767px) {
  .steps-list {display:block;}
	.steps-list .step-inner {
		display:block
	}
	.steps-list .step-inner i {display:none}
	.step-inner:nth-child(2) .step-title, .step-inner:nth-child(5) .step-title  {
	background: var(--primary);
}
.step-inner:nth-child(3) .step-title, .step-inner:nth-child(6) .step-title  {
	background: var(--primary);
}
	.steps-list .step-inner:nth-child(2), .steps-list .step-inner:nth-child(5) {background: rgba(0,0,0,0.05);}
.steps-list .step-inner:nth-child(3), .steps-list .step-inner:nth-child(6) {background: rgba(0,0,0,0.05);}
}

@media (max-width: 480px) {
	.steps-list {
		display: block;
	}

	.steps-list .step-inner {
		margin-bottom: 24px;
	}
}