/* ==========================================================================
   Keyframes (Alphabetized)
   ========================================================================== */
@keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes movein-bottom {
  from { opacity: 0; top: -25px; }
  to   { opacity: 1; top: 0; }
}

@keyframes movein-left {
  from { opacity: 0; left: -25px; }
  to   { opacity: 1; left: 0; }
}

@keyframes movein-right {
  from { opacity: 0; right: -25px; }
  to   { opacity: 1; right: 0; }
}

@keyframes movein-top {
  from { opacity: 0; top: 50px; }
  to   { opacity: 1; top: 0; }
}

/* ==========================================================================
   Animation Triggers
   ========================================================================== */
@media (min-width: 740px) {
  .component_item.in-view.fadein { 
    animation: fadein 1s ease-in-out both;
    animation-delay: 0.0125s;
  }

  .component_item.in-view.top {
    position: relative;
    animation: movein-top 1s ease-in-out both;
    animation-delay: 0.0125s;
  }
}

/* ==========================================================================
   Root Variables (Spacing, Sizing)
   ========================================================================== */
:root {
  --space-xs: clamp(8px, 1.5vw, 16px);
  --space-sm: clamp(16px, 2vw, 24px);
  --space-md: clamp(24px, 3vw, 40px);
  --space-lg: clamp(40px, 6vw, 80px);
  --space-xl: clamp(80px, 10vw, 160px);

  --content-max: 980px;
  --border-radius: 2px;
}

/* ==========================================================================
   Drawer Navigation
   ========================================================================== */
.page_header {
  border-bottom: 3px solid var(--color-brown);
}

.drawer-nav-title-wrapper { display: none; }

.drawer-nav-wrapper-component .drawer-nav-inner {
  margin: 0 auto;
  padding: 0;
  border: 0;
  border-radius: 0;
}

.drawer-nav-wrapper-component .drawer-nav-inner > ul {
  display: block;
  column-count: 2;
  padding: var(--space-lg);
  padding-bottom: var(--space-md);
}

@media (min-width: 500px) {
  .drawer-nav-wrapper-component .drawer-nav-inner > ul { column-count: 3; }
}
@media (min-width: 740px) {
  .drawer-nav-wrapper-component .drawer-nav-inner > ul { column-count: 4; }
}
@media (min-width: 980px) {
  .drawer-nav-wrapper-component .drawer-nav-inner > ul { column-count: 5; }
}

/* ==========================================================================
   Introduction Section
   ========================================================================== */
.introduction article {
  background: #271A15;
  width: 100%;
  margin: auto;
  text-align: center;
  padding: var(--space-lg) var(--space-lg) var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.introduction h3,
.introduction p {
  margin: 0 0 var(--space-sm);
  padding: 0;
  color: var(--color-white);
  text-wrap: balance;
}

.introduction h3 {
  position: relative;
  max-width: var(--content-max);
  margin: auto;
  font-size: clamp(24px, 4vw, 32px);
  line-height: 1.25;
  font-family: var(--font-minion);
  font-style: italic;
}

.introduction h3 strong {
  display: block;
  font-size: clamp(32px, 6vw, 56px);
  font-weight: normal;
}

.introduction h3::after {
  content: "";
  display: block;
  width: 140px;
  height: 3px;
  margin: var(--space-sm) auto;
  background: var(--color-red);
  border-radius: var(--border-radius);
  position: absolute;
  inset-inline: 0;
}

.typography .introduction p {
  max-width: var(--content-max);
  margin: auto;
  font-size: 20px;
}

.typography .introduction figure {
  display: block;
  width: 100%;
  max-width: var(--content-max);
  margin: calc(-1 * var(--space-lg)) auto 0;
  padding: 0;
  overflow: hidden;
  border-radius: var(--border-radius) var(--border-radius) 0 0;
  aspect-ratio: 8 / 3;
}

.typography .introduction figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: bottom;
  transform: scale(1.35);
}

/* ==========================================================================
   Callouts & Blocks
   ========================================================================== */
.in_content_callouts:has(.drawer-nav-wrapper-component) {
  max-width: var(--content-max);
}

@media (min-width: 980px) {
  .in_content_callouts:has(.drawer-nav-wrapper-component) {
    margin: auto auto var(--space-xl);
  }
}

.wysiwyg_block:has(.text-center .btn-single) {
  background: var(--color-white);
  padding: var(--space-md) var(--space-lg) var(--space-lg);
  border-radius: 0 0 var(--border-radius) var(--border-radius);
}

.page_theme_overflow .wysiwyg_block_inner { padding: 0; }
.typography p { margin: 0; }
.wysiwyg_block { margin: 0; }

article:has(.text-center .btn-single) { position: relative; }

article:has(.text-center .btn-single) p:not(:last-of-type) {
  margin-bottom: var(--space-sm);
  text-indent: 18px;
  color: var(--color-brown);
}

p.text-center:has(.btn-single) {
  position: relative;
  margin: 0;
  text-align: center;
}

@media (min-width: 980px) {
  p.text-center:has(.btn-single) {
    position: absolute;
    bottom: clamp(-170px, -44%, -44%);
    inset-inline: 0;
  }
}

p.text-center .btn-single {
  margin: 0;
  border-radius: var(--border-radius);
}

/* ==========================================================================
   Page Layout
   ========================================================================== */
.page_content { background: var(--color-xlbeige); }

.fs-grid .fs-row,
.fs_grid_row { width: 100%; }

.page_intro {
  display: none;
  visibility: hidden;
}

#page_main_content {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0 auto;
  padding: 0;
  flex: 0 0 100%;
  border-radius: var(--border-radius);
}

.page-node-type-page #footer,
.page_theme_overflow:not(.page-node-type-school-home) #footer {
  margin-top: 0;
}