/*
Theme Name: ME Custom Theme 2.0
Author: Your Team Name
Author URI: https://mktgessentials.com/
Description: A high-performance, barebones custom theme.
Version: 2.0.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 8.2
License: Copyright
Text Domain: me-custom-theme-2
*/

/* =========================================
   How the stylesheets are split
   =========================================
   - library/css/style.css (compiled from library/scss/): core site —
     variables, typography, headings, buttons, .row / .content-container,
     accessibility + global base, the template's base modules and the
     responsive type scale. It loads AFTER this file, so it wins on equal
     specificity.
   - This file: utilities, module styles, and page/section-specific styles
     (HOME PAGE, INTERIOR PAGE), each scoped by the class set in the module's
     "Append CSS Class" field.
   - Basic per-element styling (heading colours, text alignment) is set in the
     page builder content, not here.
   ========================================= */


/* =========================================
   Utilities
   ========================================= */

.relative {
  position: relative;
}

.index-1 {
  z-index: 1;
}

.index-2 {
  z-index: 2;
}

.center-container {
  display: flex;
  justify-content: center;
}

.background-position-bottom {
  background-position: bottom;
}

.white-text {
  color: var(--color-cream);
}

.top-content {
  padding-bottom: 45px;
}

.custom-logo {
  max-width: 320px;
  height: auto;
  display: block;
}

/* amperstand fix */
.amp { font-family: itc-avant-garde-gothic-pro, sans-serif; font-weight: 600; }

.gform_wrapper .gform_footer .gform_button.button {
	width: 100%;
    padding: 16px 40px!important;
    font-family: var(--font-family)!important;
    font-size: 18px!important;
    font-weight: 700!important;
    line-height: 1!important;
    color: var(--color-cream)!important;
    background-color: var(--color-red)!important;
    border: 0!important;
    border-radius: 999px!important;
    box-shadow: inset 0 0 0 4px var(--color-red)!important;
    transition: background-color .2s ease, color .2s ease!important;
}


/* Wavy edge masks — add .wave-mask-top and/or .wave-mask-bottom to any element.
   Each class adds its wave layer via a variable; the shared rule combines them
   with a solid block for the rest of the element. Tune with --wave-h / --wave-w.
   The wave is a true sine (4 quarter-curves). Each wave tile is 10% taller than
   the wave and solid below it; the solid block starts inside that extra strip
   (below the dips), so there is no seam and the dips stay round. */
.wave-mask-top,
.wave-mask-bottom {
  --wave-h: 16px; /* wave height */
  --wave-w: 80.5px; /* one hill + one dip */
  --wave-tile-h: calc(var(--wave-h) * 1.1);
  --wave-body: linear-gradient(#000 0 0) left 0 top var(--wave-top-inset, 0px) / 100% calc(100% - var(--wave-top-inset, 0px) - var(--wave-bottom-inset, 0px)) no-repeat;
  -webkit-mask: var(--wave-top-layer, linear-gradient(transparent 0 0)), var(--wave-bottom-layer, linear-gradient(transparent 0 0)), var(--wave-body);
  mask: var(--wave-top-layer, linear-gradient(transparent 0 0)), var(--wave-bottom-layer, linear-gradient(transparent 0 0)), var(--wave-body);
}

.wave-mask-top {
  --wave-top-inset: calc(var(--wave-tile-h) - 1px); /* solid block starts below the dips */
  --wave-top-layer: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 11' preserveAspectRatio='none'%3E%3Cpath d='M0 5 C3.261 2.439 6.381 0 10 0 C13.619 0 16.739 2.439 20 5 C23.261 7.561 26.381 10 30 10 C33.619 10 36.739 7.561 40 5 V11 H0 Z'/%3E%3C/svg%3E") calc(50% - var(--wave-w) / 4) top / var(--wave-w) var(--wave-tile-h) repeat-x; /* centred so a dip sits at the page middle */
}

.wave-mask-bottom {
  --wave-bottom-inset: calc(var(--wave-tile-h) - 1px);
  --wave-bottom-layer: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 11' preserveAspectRatio='none'%3E%3Cpath d='M0 6 C3.261 8.561 6.381 11 10 11 C13.619 11 16.739 8.561 20 6 C23.261 3.439 26.381 1 30 1 C33.619 1 36.739 3.439 40 6 V0 H0 Z'/%3E%3C/svg%3E") calc(50% - var(--wave-w) / 4) bottom / var(--wave-w) var(--wave-tile-h) repeat-x;
}


/* Wavy colour backgrounds — add one of .wavy-background-blue / -orange / -red /
   -yellow to a box. The shape (library/images/shapes/wavy-card.svg) is a mask
   filled with the colour variable; the soft shadow is a pre-blurred copy
   (wavy-card-shadow.svg), so the text itself gets no shadow. Boxes keep the
   shape's proportion (600.6 × 323.3) and grow taller if the text needs it. */
.wavy-background-blue,
.wavy-background-orange,
.wavy-background-red,
.wavy-background-yellow {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: center;
  aspect-ratio: 600.572 / 323.256; /* the shape's own proportion (SVG cropped to the shape) */
  max-height: 350px; /* at every breakpoint — stops wide single-column cards getting very tall */
  max-width: 100%; /* never wider than its container (the shape's proportion would otherwise size it from its text) */
  margin-inline: auto; /* the cap also narrows them (shape proportion), so keep them centred */
  padding: 12% 10%;
  color: var(--wavy-text);
}

.wavy-background-blue::before,
.wavy-background-orange::before,
.wavy-background-red::before,
.wavy-background-yellow::before,
.wavy-background-blue::after,
.wavy-background-orange::after,
.wavy-background-red::after,
.wavy-background-yellow::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* shadow */
.wavy-background-blue::before,
.wavy-background-orange::before,
.wavy-background-red::before,
.wavy-background-yellow::before {
  z-index: -2;
  /* shadow canvas is larger than the shape (offset + blur), so it extends past the box */
  inset: auto;
  top: -7.006%;
  left: -6.553%;
  width: 110.324%;
  height: 119.180%;
  background-color: rgb(0 0 0 / 25%);
  -webkit-mask: url("library/images/shapes/wavy-card-shadow.svg") center / 100% 100% no-repeat;
  mask: url("library/images/shapes/wavy-card-shadow.svg") center / 100% 100% no-repeat;
}

/* shape */
.wavy-background-blue::after,
.wavy-background-orange::after,
.wavy-background-red::after,
.wavy-background-yellow::after {
  z-index: -1;
  background-color: var(--wavy-color);
  -webkit-mask: url("library/images/shapes/wavy-card.svg") center / 100% 100% no-repeat;
  mask: url("library/images/shapes/wavy-card.svg") center / 100% 100% no-repeat;
}

.wavy-background-blue   { --wavy-color: var(--color-blue);   --wavy-title: var(--color-orange); --wavy-text: var(--color-cream); }
.wavy-background-orange { --wavy-color: var(--color-orange); --wavy-title: var(--color-blue);   --wavy-text: var(--color-cream); }
.wavy-background-red    { --wavy-color: var(--color-red);    --wavy-title: var(--color-yellow); --wavy-text: var(--color-cream); }
.wavy-background-yellow { --wavy-color: var(--color-yellow); --wavy-title: var(--color-orange); --wavy-text: var(--color-blue); }

[class*="wavy-background-"] :is(h1, h2, h3, h4, h5, h6) {
  color: var(--wavy-title);
}

[class*="wavy-background-"] p {
  color: var(--wavy-text);
}

/* Red squiggle frame — add .squiggle-red to a section (or any wrapper); each image in it that
   sits alone in a paragraph gets the red hand-drawn frame (library/images/shapes/squiggle-frame.svg,
   453 × 297, colour #E75861 baked in). The photo's edges sit on the middle of the wave, so the
   line crosses over them (slight overlap). */
.squiggle-red p:has(> img) {
  position: relative;
  max-width: 458px; /* 300px tall at the frame's 453 × 297 proportion */
  aspect-ratio: 453 / 297;
  margin: 0;
  padding: 2.7% 2.7%; /* ~12.2px on every side at the SVG's 453px width */
}

@media (min-width: 768px) and (max-width: 1004px) {
  .squiggle-red p:has(> img) {
    padding: 1.5% 1.5%;
  }
}

@media (max-width: 767px) {
  .squiggle-red p:has(> img) {
    padding: 1.75% 1.75%;
  }
}

.squiggle-red p:has(> img) img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px;
}

.squiggle-red p:has(> img)::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("library/images/shapes/squiggle-frame.svg") center / 100% 100% no-repeat;
  pointer-events: none;
}

/* Hand-drawn loops (from the client's yellow-text-circles.ai, numbered as on the sheet).
   Add .loop-N to any element to draw that loop behind it; the element shrinks to its content
   so the loop wraps the text. Yellow by default; add .loop-red for red.
   Tune per use with --loop-inset (how far the loop reaches past the element, default
   -25px -60px) and --loop-color. */
.loop-1  { --loop: url("library/images/loops/loop-01.svg"); }
.loop-2  { --loop: url("library/images/loops/loop-02.svg"); }
.loop-3  { --loop: url("library/images/loops/loop-03.svg"); }
.loop-4  { --loop: url("library/images/loops/loop-04.svg"); }
.loop-5  { --loop: url("library/images/loops/loop-05.svg"); }
.loop-6  { --loop: url("library/images/loops/loop-06.svg"); }
.loop-7  { --loop: url("library/images/loops/loop-07.svg"); }
.loop-8  { --loop: url("library/images/loops/loop-08.svg"); }
.loop-9  { --loop: url("library/images/loops/loop-09.svg"); }
.loop-10 { --loop: url("library/images/loops/loop-10.svg"); }
.loop-11 { --loop: url("library/images/loops/loop-11.svg"); }
.loop-12 { --loop: url("library/images/loops/loop-12.svg"); }
.loop-13 { --loop: url("library/images/loops/loop-13.svg"); }
.loop-14 { --loop: url("library/images/loops/loop-14.svg"); }
.loop-15 { --loop: url("library/images/loops/loop-15.svg"); }
.loop-16 { --loop: url("library/images/loops/loop-16.svg"); }
.loop-17 { --loop: url("library/images/loops/loop-17.svg"); }
.loop-18 { --loop: url("library/images/loops/loop-18.svg"); }
.loop-19 { --loop: url("library/images/loops/loop-19.svg"); }
.loop-20 { --loop: url("library/images/loops/loop-20.svg"); }
.loop-21 { --loop: url("library/images/loops/loop-21.svg"); }
.loop-22 { --loop: url("library/images/loops/loop-22.svg"); }
.loop-23 { --loop: url("library/images/loops/loop-23.svg"); }
.loop-24 { --loop: url("library/images/loops/loop-24.svg"); }
.loop-25 { --loop: url("library/images/loops/loop-25.svg"); }
.loop-26 { --loop: url("library/images/loops/loop-26.svg"); }
.loop-27 { --loop: url("library/images/loops/loop-27.svg"); }
.loop-28 { --loop: url("library/images/loops/loop-28.svg"); }
.loop-29 { --loop: url("library/images/loops/loop-29.svg"); }
.loop-30 { --loop: url("library/images/loops/loop-30.svg"); }
.loop-31 { --loop: url("library/images/loops/loop-31.svg"); }
.loop-32 { --loop: url("library/images/loops/loop-32.svg"); }
.loop-33 { --loop: url("library/images/loops/loop-33.svg"); }
.loop-34 { --loop: url("library/images/loops/loop-34.svg"); }
.loop-35 { --loop: url("library/images/loops/loop-35.svg"); }
.loop-36 { --loop: url("library/images/loops/loop-36.svg"); }

:is([class^="loop-"], [class*=" loop-"]) {
  position: relative;
  isolation: isolate; /* keeps the loop behind the content, above the section background */
  display: table;
}

:is([class^="loop-"], [class*=" loop-"])::before {
  content: "";
  position: absolute;
  inset: var(--loop-inset, -25px -60px);
  width: auto;  /* undo the library heading ::before spacer (0×0, negative margin) */
  height: auto;
  margin: 0;
  z-index: -1;
  background-color: var(--loop-color, var(--color-yellow));
  -webkit-mask: var(--loop, linear-gradient(transparent 0 0)) center / 100% 100% no-repeat; /* no loop-N: nothing drawn */
  mask: var(--loop, linear-gradient(transparent 0 0)) center / 100% 100% no-repeat;
  pointer-events: none;
}

.loop-red { --loop-color: var(--color-red); }

/* Cards — add .card to a box (e.g. a grid item's Custom CSS Classes field) for a 5px
   border with 12px rounded corners and a 180px image banner; images are clipped to the corners.
   Pick the colour with .card-blue / .card-yellow / .card-orange / .card-red (blue by
   default); the colour is also available inside as var(--card-color), e.g. for titles. */
.card {
  overflow: hidden;
  border: 5px solid var(--card-color, var(--color-blue));
  border-radius: 12px;
}

/* Card image: a 180px banner across the top of the card, framed 30% from the top
   (grid version listed too, to beat the library's 15px grid-image margin) */
.card img,
.grid-container .grid-item.card img {
  display: block;
  width: 100%;
  height: 180px;
  margin-bottom: 0;
  object-fit: cover;
  object-position: center 30%;
}

/* Card text: padding around the content, title in the card colour, text 75% wide and centred */
.card .grid-content {
  padding: 24px 24px 32px;
}

.card :is(h2, h3, h4, h5, h6) {
  margin-bottom: 16px;
  color: var(--card-color, var(--color-blue));
}

.card p {
  max-width: 75%;
  margin: 0 auto;
}

/* Linked card (Item Link set): the text keeps its colours instead of turning link blue */
.card > a,
.card > a:hover {
  color: inherit;
}

.card-blue   { --card-color: var(--color-blue); }
.card-yellow { --card-color: var(--color-yellow); }
.card-orange { --card-color: var(--color-orange); }
.card-red    { --card-color: var(--color-red); }

/* Visibility: .mobile-only shows the element on mobile (767px and down) only */
@media (min-width: 1251px) {
  .mobile-only {
    display: none !important;
  }
}

/* Spacing utilities */
.remove-top-padding,
.remove-top-padding .content-container { padding-top: 0; }

.remove-bottom-padding,
.remove-bottom-padding .content-container { padding-bottom: 0; }

.remove-top-margin,
.remove-top-margin .content-container { margin-top: 0; }

.remove-bottom-margin,
.remove-bottom-margin .content-container { margin-bottom: 0; }


/* =========================================
   Search Form
   ========================================= */

.search-form {
  display: flex;
  gap: 10px;
  margin-top: 1rem;
}

.search-field {
  flex-grow: 1;
  padding: 8px;
  border: 1px solid #ccc;
}

.search-submit {
  padding: 8px 16px;
  background: #222;
  color: var(--color-cream);
  border: none;
  cursor: pointer;
}


/* =========================================
   Modules
   ========================================= */

/* Two column row image cover — dark blue wave variant */
.two-column-row-img-cover-container.drk-bluewave .content-column,
.two-column-row-img-cover-container.drk-bluewave .content-column a,
.two-column-row-img-cover-container.drk-bluewave .content-column h3 {
  color: var(--color-cream);
}

/* Grid repeater */
/* Let grid items shrink to their column: without this, content with a fixed shape
   (e.g. the .wavy-background-* cards, sized by aspect-ratio) sets a minimum width
   from its text height and pushes the column — and the page — wider than the screen */
.grid-container > .grid-item {
  min-width: 0;
}

.grid-container .grid-item img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}

.grid-container.cols-3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

.port-update-grid .grid-container.cols-3 {
  padding: 10%;
}

@media screen and (min-width: 701px) {
  .port-update-grid .grid-container.cols-3 {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

/* Flexible grid module */
.multi-column-grid-image img {
  width: 100%;
}

/* Heroes — add .hero plus a colour class (.hero-blue / .hero-red / .hero-orange /
   .hero-yellow) to a Simple Hero: at least 400px tall, content centred vertically and
   full width, the background photo covering the hero (centred), with an 80% overlay in
   the colour. Without a colour class the photo shows with no overlay. */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 400px;
  background-position: center;
  background-size: cover;
}

/* .simple-hero added to beat the library's .simple-hero { min-height: 250px } */
.simple-hero.hero {
  min-height: 400px;
}

/* Colour overlay */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: color-mix(in srgb, var(--hero-color, transparent) 80%, transparent);
}

/* The content box is a flex item with auto side margins, which would shrink it to its
   text — keep it full width so titles wrap */
.hero .hero-content {
  width: 100%;
}

.hero-blue   { --hero-color: var(--color-blue); }
.hero-red    { --hero-color: var(--color-red); }
.hero-orange { --hero-color: var(--color-orange); }
.hero-yellow { --hero-color: var(--color-yellow); }

/* Dotted background style */
.scatter-layout {
  background-size: contain !important;
}

/* Scattered image styles */
.scatter-container .img-floating {
  position: absolute;
  width: 20%;
}

.scatter-container .img-2 {
  bottom: 5%;
  left: 0%;
  transform: translateX(-20%);
}

.scatter-container .img-4 {
  bottom: -5%;
  right: 8%;
}

/* Hero modules (Hero Builder: simple, video, slider).
   Simple Hero gets more vertical room than regular rows */
.row.simple-hero {
  padding-top: 72px; /* 5% of 1440px, fixed at every breakpoint */
  padding-bottom: 72px;
}

/* Extra space below every hero type (simple, video, slider) */
.simple-hero,
.video-hero-section,
.full-width-slider-wrapper {
  margin-bottom: 20px;
}

/* Hero subtitle: 22/28 desktop, 19/24 tablet, 16/20 mobile */
.simple-hero .hero-content p {
  font-size: 22px;
  line-height: 28px;
  font-weight: 500;
}

/* Button paragraph in a hero: double the space above it (2× the text size) */
.simple-hero .hero-content p:has(> .button) {
  margin-top: 2em;
}

@media (max-width: 1004px) {
  .simple-hero .hero-content p {
    font-size: 19px;
    line-height: 24px;
  }
}

@media (max-width: 767px) {
  .simple-hero .hero-content p {
    font-size: 16px;
    line-height: 20px;
  }
}

/* Two Column Row (BLM-2): tighter gap between the columns on mobile (library default 45px) */
@media (max-width: 767px) {
  .two-column-row-container .two-column-row {
    gap: 24px;
  }
}

/* Off Center CTA: 6em above the photo and 6em below the text box, which hangs
   85px (half its 170px max height) under the photo */
.off-cta-container {
  margin: 6em 0 calc(6em + 85px);
}

/* Off Center CTA: let the text box grow to fit longer content.
   Add "off-cta-expand" to the module's Append CSS Class field. */
.off-cta-expand .off-cta-content {
  height: auto !important;
  max-height: none !important;
}

/* Photo column spans the full width (library default 35%; extra class to outrank the library rule) */
.off-cta-container .column.off-cta-content-container:first-of-type {
  flex-basis: 100%;
  height: 600px;
  position: relative;
  background-position: center 35%; /* photo shifted up (library: top) to show more of the student */
}

/* Text box: 80% wide (983px max) and up to 170px tall, centred on the photo's bottom edge — half on the photo, half hanging below */
.off-cta-container .off-cta-content {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 80%; /* of the photo, at every breakpoint */
  max-width: 983px; /* reached at ~1230px and up */
  max-height: 170px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px; /* extra space between the heading and the button */
  padding-top: 40px; /* library 5% (72px) doesn't fit in 170px */
  padding-bottom: 30px;
  /* mockup: cream box, thin orange border, rounded corners, soft shadow */
  background-color: var(--color-cream);
  border: 3px solid var(--color-orange);
  border-radius: 16px;
  box-shadow: 0 8px 24px rgb(0 0 0 / 20%);
  transform: translate(-50%, 50%);
}

.off-cta-container .off-cta-content > :last-child {
  margin-bottom: 0;
}

/* Tablet and mobile: photo 500px tall, view shifted 15% to the right */
@media (max-width: 1004px) {
  .off-cta-container .column.off-cta-content-container:first-of-type {
    height: 500px;
    background-position: 65% 35%;
  }
}

/* AM-5: Image Tabs — image on one side, tabbed title/text + bubbles on the other.
   --tab-color is set per tab (Color field) and drives the text + bubbles. */
.image-tabs__inner {
  display: grid;
  gap: 60px;
  align-items: center;
}

@media (min-width: 768px) {
  .image-tabs__inner {
    grid-template-columns: 1fr 1fr;
  }

  .image-tabs--image-right .image-tabs__media {
    order: 2;
  }
}

.image-tabs__image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 3;
  object-fit: cover;
  border-radius: 16px;
}

.image-tabs__panel {
  text-align: center;
}

.image-tabs__title {
  margin-bottom: 30px;
}

.image-tabs__text,
.image-tabs__text p {
  color: var(--tab-color, inherit);
  font-size: 24px;
  line-height: normal;
  font-weight: 700;
}

@media (max-width: 1004px) {
  .image-tabs__text,
  .image-tabs__text p {
    font-size: 20px;
    line-height: 26px;
  }
}

@media (max-width: 767px) {
  .image-tabs__text,
  .image-tabs__text p {
    font-size: 15px;
    line-height: 19px;
  }

  /* Mobile: text + bubbles only, no image */
  .image-tabs__media {
    display: none;
  }
}

.image-tabs__text em {
  font-weight: 300;
}

.image-tabs__bubbles {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 30px;
}

.image-tabs__bubble {
  width: 22px;
  height: 22px;
  padding: 0;
  border: 3px solid var(--tab-color, var(--color-blue));
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.image-tabs__bubble[aria-selected="true"] {
  background: var(--tab-color, var(--color-blue));
}


/* ============================================
   Blog Listing — Two‑Column "Most Recent" Layout
   ============================================ */

.blog-listing, .breadcrumbs, .search #primary, .single-post #primary {
  max-width: 1400px;
  margin: 0 auto;
  padding: 2rem;
}

.blog-listing__title {
  font-size: clamp(2rem, 3.5vw, 2.75rem);
  font-weight: 800;
  margin: 0 0 1.75rem;
  letter-spacing: -0.01em;
}

/* Two-column grid: featured left, list right */
.blog-listing__grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 2.5rem;
  align-items: start;
}

@media (max-width: 900px) {
  .blog-listing__grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

/* ---------- Top row: featured (left) + sidebar (right) ---------- */
.blog-listing__top {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 2.5rem;
  align-items: start;
  margin-bottom: 3rem;
}

@media (max-width: 900px) {
  .blog-listing__top {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

/* ---------- Featured (first) post ---------- */
.post-card--featured {
  display: flex;
  flex-direction: column;
}

.post-card--featured .post-card__media {
  position: relative;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  margin-bottom: 1.25rem;
  background: #000;
}

.post-card--featured .post-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Category chip overlay on featured image */
.post-card--featured .post-card__category {
  position: absolute;
  left: 0;
  bottom: 0;
  background: #fff;
  padding: 0.65rem 1.1rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.post-card--featured .post-card__date {
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6b7280;
  margin: 0.25rem 0 0.75rem;
}

.post-card--featured .post-card__title {
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  font-weight: 800;
  line-height: 1.2;
  margin: 0 0 1rem;
}

.post-card--featured .post-card__title a {
  text-decoration: none;
}

.post-card--featured .post-card__title a:hover {
  text-decoration: underline;
}

.post-card--featured .post-card__excerpt {
  font-size: 1rem;
  line-height: 1.6;
  color: #1f2937;
  margin: 0;
}

/* ---------- Compact post cards (side list + below grid) ---------- */
.post-card--compact {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 1.25rem;
  align-items: center;
}

.post-card--compact .post-card__media {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #f3f4f6;
}

.post-card--compact .post-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.post-card--compact .post-card__category {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 3px;
  margin-bottom: 0.4rem;
}

.post-card--compact .post-card__title {
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
}

.post-card--compact .post-card__title a {
  text-decoration: none;
}

.post-card--compact .post-card__title a:hover {
  text-decoration: underline;
}

@media (max-width: 480px) {
  .post-card--compact {
    grid-template-columns: 110px 1fr;
    gap: 0.9rem;
  }

  .post-card--compact .post-card__title {
    font-size: 1rem;
  }
}

/* =========================================
  Volunteer Card
   ========================================= */
.volunteer-options {
    background-color: #F5EFE7;
    padding-top: 110px!important;
    padding-bottom: 120px!important;
}
.volunteer-options .top-row {
    padding-bottom: 5%;
}
.volunteer-options .cols-3 p, .volunteer-options .cols-3 a, .volunteer-options .cols-3 h4 {text-align: left!important;}

.volunteer-options .grid-container .grid-item img {margin-right: 100%!important;}

.volunteer-options .grid-container > .grid-item {
    border-right: solid .5px #dcd5cc;
    padding-right: 20px;
}
.volunteer-options .grid-container > .grid-item:last-of-type {border-right: none;}

p.notes-box {
    border: 2px dashed #b7474c;
    padding: 15px;
    border-radius: 10px;
    background: #fff;
}
p.notes-box {
    color: #b7474c;
    font-weight: 500;
    font-size: 16px;
    line-height: 25px;
}

.center-form.add-border-to-container {
    padding: 2.5rem 2rem;
    background: #fff;
    border: 4px solid var(--color-red);
    border-radius: 12px;
    max-width: 1200px;
    margin: 5% auto 0;
}

@media (max-width: 1004px) {
    .volunteer-options .grid-container > .grid-item {border-right: none; padding-right: 0;}
}

/* ---------- Sidebar ---------- */
.blog-listing__sidebar {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.blog-listing__sidebar .widget {
  background: #f8f9fb;
  border: 1px solid #e5e7eb;
  padding: 1.25rem 1.5rem;
}

.blog-listing__sidebar .widget__title {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #000;
}

.blog-listing__sidebar .widget ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.blog-listing__sidebar .widget li {
  padding: 0.4rem 0;
  border-bottom: 1px solid #e5e7eb;
}

.blog-listing__sidebar .widget li:last-child {
  border-bottom: 0;
}

.blog-listing__sidebar .widget a {
  text-decoration: none;
}

.blog-listing__sidebar .widget a:hover {
  text-decoration: underline;
}

/* ---------- Below-grid: 2-column listing of remaining posts ---------- */
.blog-listing__below-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem 2.5rem;
  margin-bottom: 3rem;
}

@media (max-width: 700px) {
  .blog-listing__below-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

/* ---------- Pagination ---------- */
.blog-listing__pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid #e5e7eb;
}

.blog-listing__pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 0.85rem;
  border: 1px solid #d1d5db;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.blog-listing__pagination .page-numbers:hover {
  background: #000;
  color: var(--color-cream);
}

.blog-listing__pagination .page-numbers.current {
  color: #ccc;
  cursor: default;
}

.blog-listing__pagination .page-numbers.dots {
  border-color: transparent;
  cursor: default;
}

.blog-listing__empty {
  text-align: center;
  color: #6b7280;
  padding: 3rem 0;
}


/* ============================================
   Blog Sidebar (filters + search)
   ============================================ */

.blog-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  font-size: 0.95rem;
}

.blog-sidebar__intro {
  background: #000;
  color: var(--color-cream);
  padding: 1.5rem;
}

.blog-sidebar__heading {
  margin: 0 0 0.5rem;
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.blog-sidebar__intro p {
  margin: 0;
  line-height: 1.5;
  color: #d8dde8;
  font-size: 0.9rem;
}

.blog-sidebar__form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  border: 1px solid #e5e7eb;
  padding: 1.5rem;
  background: #fff;
}

.blog-sidebar__section {
  border: 0;
  padding: 0;
  margin: 0;
}

.blog-sidebar__label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 0.55rem;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid #000;
}

/* Search */
.blog-sidebar__search {
  display: flex;
  align-items: stretch;
  border: 1px solid #d1d5db;
  background: #fff;
}

.blog-sidebar__search input[type="search"] {
  flex: 1;
  border: 0;
  padding: 0.55rem 0.75rem;
  font-size: 0.95rem;
  outline: none;
  background: transparent;
}

.blog-sidebar__search button {
  border: 0;
  background: #000;
  color: var(--color-cream);
  padding: 0 0.85rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s ease;
}

.blog-sidebar__search button:hover {
  background: #666;
}

/* Checkboxes */
.blog-sidebar__checkboxes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  max-height: 220px;
  overflow-y: auto;
}

.blog-sidebar__checkboxes label {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  cursor: pointer;
  font-size: 0.9rem;
  color: #1f2937;
  line-height: 1.3;
}

.blog-sidebar__checkboxes input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  cursor: pointer;
  flex-shrink: 0;
}

.blog-sidebar__checkboxes em {
  color: #6b7280;
  font-style: normal;
  font-size: 0.8rem;
}

/* Year select */
.blog-sidebar__section select {
  width: 100%;
  padding: 0.55rem 0.75rem;
  border: 1px solid #d1d5db;
  background: #fff;
  font-size: 0.95rem;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  padding-right: 2.25rem;
}

/* Actions */
.blog-sidebar__actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

.blog-sidebar__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.65rem 1rem;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.blog-sidebar__btn--primary {
  background: #000;
  color: var(--color-cream);
}

.blog-sidebar__btn--primary:hover {
  background: #666;
}

.blog-sidebar__btn--reset {
  background: #fff;
}

.blog-sidebar__btn--reset:hover {
  background: #000;
  color: var(--color-cream);
}


/* ============================================
   Password Protection Form
   ============================================ */

.password-form-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  padding: 10rem 5rem 3rem;
  background: #05203e;
}

.password-form-container .post-password-form {
  background: #ffffff;
  padding: 3rem 2.5rem;
  max-width: 440px;
  width: 100%;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
}

.password-form-container .post-password-form p:first-child {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #555;
  margin: 0 0 1.75rem 0;
}

.password-form-container .post-password-form p:last-child {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 0;
}

.password-form-container .post-password-form label {
  font-size: 0.85rem;
  font-weight: 500;
  color: #333;
  letter-spacing: 0.02em;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.password-form-container .post-password-form input[type="password"] {
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  font-family: inherit;
  border: 1.5px solid #d0d0d0;
  background: #fafafa;
  color: #222;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  box-sizing: border-box;
}

.password-form-container .post-password-form input[type="password"]:focus {
  border-color: #333;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06);
}

.password-form-container .post-password-form input[type="submit"] {
  padding: 0.8rem 2rem;
  font-size: 16px;
  font-weight: 600;
  font-family: inherit;
  color: #333333;
  background: #51d645;
  border: none;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.1s ease;
  letter-spacing: 0.01em;
}

.password-form-container .post-password-form input[type="submit"]:hover {
  background: #092f5b;
  color: var(--color-cream);
}

.password-form-container .post-password-form input[type="submit"]:active {
  transform: scale(0.98);
}


/* ============================================
   SEARCH RESULTS (search.php)
   Centred h1 with the search term in red, results as a two-column grid of
   orange cards (one column on mobile)
   ============================================ */

/* Space above and below the results (bottom includes the footer's 16px wave overlap) */
.search #primary {
  padding-top: 60px;
  padding-bottom: 76px;
}

/* Page title: the page h1 is cream by default, so it's set to blue here */
.search-results__title {
  margin-bottom: 40px;
  color: var(--color-blue);
  text-align: center;
}

.search-results__term {
  color: var(--color-red);
}

.search-results__grid {
  display: grid;
  gap: 30px;
}

@media (min-width: 768px) {
  .search-results__grid {
    grid-template-columns: 1fr 1fr;
  }
}

.search-card {
  display: flex;
  flex-direction: column;
  padding: 30px;
  border-radius: 16px;
  background-color: var(--color-orange);
  color: var(--color-cream);
}

/* Title: h2 for the heading order, styled at the h4 size in the body font */
.search-card__title {
  margin-bottom: 6px;
  font-family: var(--font-family);
  font-size: var(--font-size-h4);
  font-weight: 700;
  text-transform: none;
}

.search-card__title a {
  color: var(--color-blue);
  text-decoration: none;
}

.search-card__date {
  margin-bottom: 20px;
  color: var(--color-cream);
  font-size: 14px;
  line-height: 19px;
}

.search-card__image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 1;
  object-fit: cover;
  margin-bottom: 20px;
  border-radius: 12px;
}

.search-card__summary p {
  color: var(--color-cream);
  margin: 0; /* spacing comes from the card padding and the image margin */
}

/* Read more: blue button, centred at the bottom of the card */
.search-card__more {
  align-self: center;
  margin-top: auto;
}

.search-card__summary {
  margin-bottom: 20px;
}


/* ============================================
   HOME PAGE
   Sections are scoped by the class set in each module's
   "Append CSS Class" field on the Home page, in page order.
   ============================================ */

/* Hero (Simple Hero with class "home-hero"): yellow on the left, photo on the
   right fading in from the yellow, text kept in the yellow half */
.home-hero {
  position: relative;
  overflow: hidden;
  background-color: var(--color-yellow);
  background-image: none !important; /* photo is drawn by ::before instead */
}

.home-hero::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 55%;
  background:
    linear-gradient(to right, var(--color-yellow) 0%, transparent 30%),
    var(--hero-bg, none) center / cover no-repeat;
}

.home-hero .hero-content {
  position: relative;
  z-index: 1;
}

.home-hero .hero-content > * {
  max-width: min(42%, 700px);
}

.home-hero .hero-content > h2 {
  max-width: min(47%, 700px); /* title a little wider than the text below it */
}

/* Mobile: photo behind the whole hero; yellow across the full width —
   solid for the first 50%, then easing to 60% strength at the right edge.
   Text uses the full width. */
@media (max-width: 767px) {
  .home-hero::before {
    width: 100%;
    background:
      linear-gradient(to right, var(--color-yellow) 0%, var(--color-yellow) 50%, color-mix(in srgb, var(--color-yellow) 60%, transparent) 100%),
      var(--hero-bg, none) 45vw center / auto 100% no-repeat; /* sized to the hero height (always top-to-bottom, no zoom-out on narrow screens); starts 45% across, left edge hidden under the solid yellow */
  }

  .home-hero .hero-content > *,
  .home-hero .hero-content > h2 {
    max-width: none;
  }
}

/* "A Partner Inside Every Troy City School" (Two Column Row with classes
   "home-partner squiggle-red"): 60% text / 40% image on desktop */
@media (min-width: 1005px) {
  .home-partner .two-column-row {
    grid-template-columns: 60fr 40fr;
    align-items: center;
  }
}

/* Description paragraphs: 82% of the text column (heading stays full width) */
.home-partner .left-column p {
  max-width: 82%;
}

/* Tablet & mobile: text centred and full width, image centred */
  .home-partner .left-column {
    text-align: center;
  }

  .home-partner .left-column p {
    max-width: none;
  }

  .home-partner .right-column p:has(> img),
  .home-partner .right-column img {
    margin-inline: auto;
  }


/* Image: up to 300px tall, proportions kept */
.home-partner .right-column img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 300px;
  height: auto;
}

/* With .squiggle-red the frame sets the size (max 458px wide, see .squiggle-red) and the photo fills it */
.home-partner.squiggle-red .right-column img {
  width: 100%;
  height: 100%;
  max-height: none;
}


@media (max-width: 1004px) {
	.home-partner .two-column-row :is(h2, h3, p, a) {
		text-align: center !important;
	}
}

/* Two Column Row: align both columns to the top instead of centering them.
   Add "align-top" to the module's Append CSS Class field. */
.row.align-top .two-column-row {
  align-items: start;
}

/* "Our Impact" heading (Full Width Row with class "home-impact-title") */
.row.home-impact-title {
  padding-bottom: 45px; /* 37px gap below the heading (the h3 trims 8px off its own bottom) */
}

/* "Our Impact" photo (Full Width Row with classes "home-impact wave-mask-top
   wave-mask-bottom", photo set as the row's Background Image): full-bleed photo with
   wavy edges and a dark fade at the bottom; the Content (a paragraph of buttons)
   sits centred 60px above the bottom */
.row.home-impact {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  aspect-ratio: 2.9 / 1;
  min-height: 320px;
  width: 100%; /* explicit width: otherwise the ratio turns the 320px min height into a 928px min width */
  margin-bottom: 54px; /* gap before the stats (46px tablet, 39px mobile) */
  padding-top: 0;
  padding-bottom: 60px;
  background-position: center 20%; /* show more of the top of the photo */
}

/* Dark fade behind the buttons */
.row.home-impact::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, color-mix(in srgb, var(--color-blue) 70%, transparent) 0%, transparent 45%);
  pointer-events: none;
}

/* Flex item with auto side margins would shrink to its buttons — keep it full width */
.row.home-impact .content-container {
  width: 100%;
}

.home-impact .content-container > p:has(> .button) {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin: 0;
}

@media (max-width: 1004px) {
  .row.home-impact {
    margin-bottom: 46px;
  }
}

/* Mobile: stack the buttons */
@media (max-width: 767px) {
  .row.home-impact {
    margin-bottom: 39px;
  }

  .home-impact .content-container > p:has(> .button) {
    flex-direction: column;
    align-items: center;
  }
}

/* Impact stats (Grid Repeater with class "home-stats") */
.home-stats {
  margin-bottom: 30px;
}

/* Mobile: no gap between the stacked stats */
@media (max-width: 767px) {
  .home-stats .grid-container {
    gap: 0;
  }
}

/* The big numbers (<p class="impact-metric loop-N">; descriptions are centred in the builder) */
.impact-metric {
  --loop-inset: -22px -34px; /* loop reach past the number (see the .loop-N utility) */
  display: table;             /* shrink to the number so it centres and the loop wraps it */
  margin-inline: auto;
  margin-bottom: 40px; /* default is 1em = 64px; loop hangs 22px below the number */
  color: var(--color-orange);
  text-align: center;
  font-family: var(--font-family-heading);
  font-size: 64px; /* tablet 56px, mobile 48px */
  font-weight: 400;
  line-height: normal;
}

@media (max-width: 1004px) {
  .impact-metric {
    font-size: 56px;
  }
}

@media (max-width: 767px) {
  .impact-metric {
    font-size: 48px;
  }
}

/* Last section (Image Tabs): space before the footer */
.home .image-tabs {
  margin-bottom: 76px; /* 60px visible + the footer's 16px wave overlap */
}


/* ============================================
   INTERIOR PAGE
   Sections are scoped by the class set in each module's
   "Append CSS Class" field on the Interior page, in page order.
   ============================================ */

/* Hero (Simple Hero with classes "hero hero-orange interior-hero wave-mask-bottom"):
   .hero / .hero-orange do the layout and overlay; .interior-hero only sizes the title loop */
/* Title (the page h1, cream by default) with a .loop-N loop: centred, loop reaches
   30px above/below and 60px past each side; hidden on mobile */
.interior-hero h1[class*="loop-"] {
  --loop-inset: -30px -60px;
  margin-inline: auto;
}

@media (max-width: 767px) {
  .interior-hero h1[class*="loop-"]::before {
    display: none;
  }
}

/* Icon columns (Grid Repeater with class "interior-icons"): icons 72px tall max
   (58px on mobile), centred (titles are coloured in the builder) */
.interior-icons .grid-container .grid-item img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 72px;
  aspect-ratio: auto;
  margin-inline: auto;
}

@media (max-width: 767px) {
  .interior-icons .grid-container .grid-item img {
    max-height: 58px;
  }
}

/* Wavy-box grid (Grid Repeater with class "interior-boxes"): 55px gap on desktop,
   23px on tablet and mobile (stacked) */
.interior-boxes .grid-container {
  gap: 55px;
}

@media (max-width: 1004px) {
  .interior-boxes .grid-container {
    gap: 23px;
  }
}

/* Image + text row (Two Column Row with class "interior-feature"): image 40% /
   text 60% on desktop, text centred on the image */
.interior-feature .two-column-row {
  align-items: center;
}

@media (min-width: 1005px) {
  .interior-feature .two-column-row {
    grid-template-columns: 40fr 60fr;
  }
}

/* Image: fills its column up to 560px tall, centred */
.interior-feature .left-column p:has(> img) {
  margin: 0;
}

.interior-feature .left-column img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 560px;
  margin-inline: auto;
}

/* Tablet and mobile: 360px max, nudged 2.5% (of the column) left of centre */
@media (max-width: 1004px) {
  .interior-feature .left-column img {
/*     max-height: 360px; */
    position: relative;
    left: -2.5%;
    margin-top: 20px;
    margin-bottom: 20px;
  }
}

/* No trailing margin, so the text block is truly centred */
.interior-feature .right-column > :last-child {
  margin-bottom: 0;
}

/* Optical centring: Arya leaves ~23px of empty space above its capitals, so lift the text half that */
.interior-feature .right-column {
  transform: translateY(-12px);
}

/* Text + squiggle-framed photo row (Two Column Row with classes "interior-study squiggle-red"):
   text 60% / photo 40% with a 90px gap on desktop, text centred on the photo;
   photo on top when stacked */
.interior-study .two-column-row {
  align-items: center;
}

@media (min-width: 1005px) {
  .interior-study .two-column-row {
    grid-template-columns: 60fr 40fr;
    gap: 90px;
  }
}

/* Stacked (tablet and mobile): photo above the text, 10px extra space below it */
@media (max-width: 1004px) {
  .interior-study .right-column {
    order: -1;
    margin-bottom: 10px;
  }

  .interior-study .right-column p:has(> img) {
    margin-inline: auto;
  }
}

/* No trailing margin, so the text block is truly centred */
.interior-study .left-column > :last-child {
  margin-bottom: 0;
}

/* Yellow band above the footer (Full Width Row with class "interior-yellow", Background Color
   yellow): fades in from the page background over the first 120px, 550px tall in total
   (fade included), content centred in the solid yellow part */
.row.interior-yellow {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: 60px;
  min-height: 550px;
  padding-top: 120px; /* the fade */
  background-image: linear-gradient(var(--color-cream), var(--color-yellow) 120px);
}

/* Heading and text widths from the comp (heading wraps to two lines), centred */
.interior-yellow .content-container > :is(h2, h3) {
  max-width: 600px;
  margin-inline: auto;
  margin-bottom: 40px;
}

.interior-yellow .content-container > p {
  max-width: 650px;
  margin-inline: auto;
}

/* Heading with a .loop-N loop (colour from .loop-red): loop reaches 25px above/below
   and 80px past each side; hidden on mobile */
.interior-yellow :is(h2, h3)[class*="loop-"] {
  --loop-inset: -25px -80px;
}

@media (max-width: 767px) {
  .interior-yellow :is(h2, h3)[class*="loop-"]::before {
    display: none;
  }
}

/* Text links in body copy (not buttons, menus or footer) */
:where(p, li) a:not(.button):not(nav a):not(footer a) {
  color: var(--color-blue);
}

:where(p, li) a:not(.button):not(nav a):not(footer a):is(:hover, :focus) {
  color: var(--color-orange);
}

/* Adding extra breathing room under a section/container*/
.add-bottom-space,
.row.add-bottom-space {
  margin-bottom: 76px;
}

/* Changing the order of columns in mobile/table + adding padding between when stacked */
@media (max-width: 1004px) {
  .right-column-first .right-column {
    order: -1;
    margin-bottom: 40px;
  }
}

/* Spacing utility: extra space above a module */
.row.add-top-space {
  margin-top: 60px;
}

/* Making lists match the body copy */
.content-container li {
  font-family: var(--font-family);
  font-size: var(--font-size-p);
  font-weight: 300;
  line-height: var(--line-height-p);
}

/* Executive director photo: 400px wide on desktop, full width on tablet and mobile */
.exec-director-photo {
  max-width: 400px;
}

@media (max-width: 1004px) {
  .exec-director-photo {
    max-width: 100%;
  }
}

/* Header navigation bolded */
header .content-container li {
  font-family: itc-avant-garde-gothic-pro, sans-serif;
  font-size: 18px;
  font-weight: 700;
}

/* Logo grids: show the whole logo instead of cropping it.
   Add "logo-grid" to the Grid Repeater's Append CSS Class field. */
.logo-grid .grid-container .grid-item img {
  aspect-ratio: 3 / 2;
  object-fit: contain;
  max-width: 300px;
  margin-inline: auto;
}

/* Logo grids on mobile: drop the fixed box shape so there's no empty space around each logo */
@media (max-width: 767px) {
  .logo-grid .grid-container .grid-item img {
    width: auto;
    max-width: 240px;
    height: auto;
    max-height: 100px;
    aspect-ratio: auto;
  }
}

/* =========================================
   Program sections - alternative use to the four grid section
   ========================================= */

.program-red    { --program-color: var(--color-red); }
.program-orange { --program-color: var(--color-orange); }
.program-blue   { --program-color: var(--color-blue); }

/* Detail columns: light tint with a colored top line */
:is(.program-red, .program-orange, .program-blue) .grid-container > .grid-item {
  padding: 28px 24px 32px;
  border-top: 6px solid var(--program-color);
  border-radius: 0 0 12px 12px;
  background-color: color-mix(in srgb, var(--program-color) 10%, var(--color-cream));
}

:is(.program-red, .program-orange, .program-blue) .grid-item :is(h3, h4) {
  margin-bottom: 12px;
  color: var(--program-color);
}

:is(.program-red, .program-orange, .program-blue) .grid-item .grid-content > :last-child {
  margin-bottom: 0;
}

/* Image Tabs: less space above on mobile (this page only) */
@media (max-width: 767px) {
  body.page-id-947 .image-tabs {
    padding-top: 0px;
  }
}

/* Grid Repeater: center an incomplete last row.
   Add "center-last-row" to the module's Append CSS Class field.
   5 per row on desktop by default; add "per-row-4" for 4 per row.
   3 per row on tablet, 2 on mobile. */
.row.center-last-row {
  --per-row: 5;
}

.row.center-last-row.per-row-4 {
  --per-row: 4;
}

.row.center-last-row .grid-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
}

.row.center-last-row .grid-container > .grid-item {
  flex: 0 0 calc((100% - (var(--per-row) - 1) * 2rem) / var(--per-row));
}

@media (max-width: 1004px) {
  .row.center-last-row .grid-container > .grid-item {
    flex-basis: calc((100% - 2 * 2rem) / 3);
  }
}

@media (max-width: 767px) {
  .row.center-last-row .grid-container > .grid-item {
    flex-basis: calc((100% - 2rem) / 2);
  }
}

/* Bring the two columns closer together on stats sections of Academic page */
.row.narrow-grid .grid-container {
  max-width: 970px;
  margin-left: auto;
  margin-right: auto;
}

/* Students & Scholarships page: tighter section spacing on mobile */
@media (max-width: 767px) {
  body.page-id-1136 .row {
    padding-top: 24px;
    padding-bottom: 24px;
  }

  body.page-id-1136 .row.add-top-space {
    margin-top: 10px;
  }

  body.page-id-1136 .off-cta-container {
    margin-top: 1.5em;
    margin-bottom: calc(1.5em + 85px);
  }

  body.page-id-1136 .row.interior-yellow {
    min-height: 0;
    margin-top: 0;
    padding-top: 80px;
  }

  body.page-id-1136 .interior-feature .left-column img {
    margin-top: 0;
  }
}

/* Logo grids that use center-last-row: one logo per row on mobile */
@media (max-width: 767px) {
  .row.logo-grid.center-last-row .grid-container {
    gap: 1.25rem;
  }

  .row.logo-grid.center-last-row .grid-container > .grid-item {
    flex-basis: 100%;
  }
}

/* Page 1254: tighter section spacing on mobile */
@media (max-width: 767px) {
  body.page-id-1254 .row {
    padding-top: 24px;
    padding-bottom: 24px;
  }

  body.page-id-1254 .row.add-top-space {
    margin-top: 10px;
  }

  body.page-id-1254 .off-cta-container {
    margin-top: 1.5em;
    margin-bottom: calc(1.5em + 85px);
  }

  body.page-id-1254 .interior-feature .left-column img {
    margin-top: 0;
  }

  /* Gap between the donor logos and the yellow band */
  body.page-id-1254 .row.logo-grid {
    padding-bottom: 20;
  }

  body.page-id-1254 .row.interior-yellow {
    min-height: 0;
    margin-top: 0;
    padding-top: 90px;
    background-image: linear-gradient(var(--color-cream), var(--color-yellow) 60px);
  }
}

/* Page 989: tighter section spacing on mobile */
@media (max-width: 767px) {
  body.page-id-989 .row {
    padding-top: 24px;
    padding-bottom: 24px;
  }

  body.page-id-989 .row.add-top-space {
    margin-top: 10px;
  }

  body.page-id-989 .off-cta-container {
    margin-top: 1.5em;
    margin-bottom: calc(1.5em + 85px);
  }

  body.page-id-989 .interior-feature .left-column img {
    margin-top: 0;
  }

  body.page-id-989 .row.interior-yellow, body.page-id-838 .row.interior-yellow{
    min-height: 0;
    margin-top: 0;
    padding-top: 90px;
    background-image: linear-gradient(var(--color-cream), var(--color-yellow) 60px);
  }
}

  /* Image Tabs: remove the empty image area and gap above the quote */
    body.page-id-989 .row.add-bottom-space {
    margin-bottom: 10px;
  }