/*!
Theme Name: Winter Sports Clinic
Theme URI: http://underscores.me/
Author: Ian Polatka
Author URI: http://underscores.me/
Description: Description
Version: 1.0.4
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: winter-sports-clinic
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Winter Sports Clinic is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

@import "css/bootstrap.css";
@import url("https://fonts.googleapis.com/css2?family=Bitter:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap");

/* Define CSS variables */
:root {
  --blue-50: #e9ebf8;
  --blue-100: #c9cdea;
  --blue-200: #a7b0dd;
  --blue-300: #8693cf;
  --blue-400: #5c69a6;
  --blue-500: #3d4584;
  --blue-600: #272a60;
  --blue-700: #222652;
  --blue-800: #1e214a;
  --blue-900: #1c1e44;

  --red-50: #fdebeb;
  --red-100: #f8c9ca;
  --red-200: #f3a1a4;
  --red-300: #ed787c;
  --red-400: #e64e55;
  --red-500: #ca2835;
  --red-600: #a8212b;
  --red-700: #841822;
  --red-800: #620f17;
  --red-900: #4b0409;

  --yellow-50: #fffbe8;
  --yellow-100: #fff4c2;
  --yellow-200: #ffe99a;
  --yellow-300: #ffdb63;
  --yellow-400: #ffca2f;
  --yellow-500: #edb000;
  --yellow-600: #c99500;
  --yellow-700: #a47a00;
  --yellow-800: #7c5d00;
  --yellow-900: #5a4400;

  --gray-50: #f7f7f9;
  --gray-100: #e6e7eb;
  --gray-200: #d3d4d9;
  --gray-300: #bfc1c7;
  --gray-400: #a1a4ac;
  --gray-500: #7f828c;
  --gray-600: #5c5f68;
  --gray-700: #454750;
  --gray-800: #2f3037;
  --gray-900: #1d1d22;
}

body {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  background-color: var(--blue-900);
}

#wrapper {
  max-width: 1920px;
  margin: 0 auto;
  overflow: hidden;
  background: white;
}

p {
  font-size: 1rem;
  line-height: 175%;
  color: #333333;
  margin-bottom: 1.25rem;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Bitter", serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  margin-bottom: 1.25rem;
  color: var(--blue-600);
  line-height: 150%;
}

.font-bitter {
  font-family: "Bitter", serif;
}

.text-xs {
  font-size: 12px;
}

a {
  color: var(--blue-600);
  font-weight: 700;
}

.container {
  max-width: 1170px;
  overflow: visible;
}

@media screen and (min-width: 1199px) {
  .container {
    padding-left: 0px;
    padding-right: 0px;
  }
}

/****************************
 Colors
 ****************************/

.text-blue-200 {
  color: var(--blue-200);
}

/****************************
Buttons
 ****************************/

.button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  text-align: center;
  color: white;
  font-family: Bitter, serif;
  font-weight: 500;
  padding: 8px 40px;
  text-decoration: none;
  background-color: #fff;
  border-radius: 50px;
  transition:
    background-color 0.5s ease-in-out,
    color 0.5s ease-in-out;
  border-color: transparent;
}

.button svg {
  flex-shrink: 0;
}

.dark-blue-button {
  background-color: var(--blue-600);
}

.dark-blue-button:hover {
  color: var(--blue-50);
  background-color: var(--blue-800);
}

.light-blue-button {
  color: var(--blue-900);
  background-color: var(--blue-200);
}

.light-blue-button:hover {
  color: var(--blue-900);
  background-color: var(--blue-300);
}

.white-button {
  color: var(--blue-600);
  border: 1px solid var(--blue-600);
}

.white-button:hover {
  background-color: var(--blue-50);
}

.block-button {
  display: block;
}

/****************************
Backgrounds
 ****************************/

.bg-blue-50 {
  background-color: var(--blue-50);
}

.bg-blue-100 {
  background-color: var(--blue-100);
}

.bg-blue-200 {
  background-color: var(--blue-200);
}

.bg-blue-300 {
  background-color: var(--blue-300);
}

.bg-blue-400 {
  background-color: var(--blue-5400);
}

.bg-blue-500 {
  background-color: var(--blue-500);
}

.bg-blue-600 {
  background-color: var(--blue-600);
}

.bg-blue-700 {
  background-color: var(--blue-700);
}

.bg-blue-800 {
  background-color: var(--blue-800);
}

.bg-blue-900 {
  background-color: var(--blue-900);
}

.bg-gray-50 {
  background-color: var(--gray-50);
}

.bg-gray-100 {
  background-color: var(--gray-100);
}

.bg-gray-200 {
  background-color: var(--gray-200);
}

.bg-gray-300 {
  background-color: var(--gray-300);
}

.bg-gray-400 {
  background-color: var(--gray-5400);
}

.bg-gray-500 {
  background-color: var(--gray-500);
}

.bg-gray-600 {
  background-color: var(--gray-600);
}

.bg-gray-700 {
  background-color: var(--gray-700);
}

.bg-gray-800 {
  background-color: var(--gray-800);
}

.bg-gray-900 {
  background-color: var(--gray-900);
}

/****************************
Corner Radius
 ****************************/

.radius-5 {
  border-radius: 5px;
}

/****************************
Borders
 ****************************/

.border-blue-600 {
  border: 1px solid var(--blue-600);
}

/****************************
Padding
 ****************************/

.padding-2 {
  padding: 20px;
}

.padding-3 {
  padding: 30px;
}

.padding-4 {
  padding: 40px;
}

/****************************
Lists
 ****************************/

ul li {
  margin-bottom: 5px;
}

/****************************
Text Color
 ****************************/

.text-blue-50 {
  color: var(--blue-50);
}

.text-blue-100 {
  color: var(--blue-100);
}

.text-blue-200 {
  color: var(--blue-200);
}

.text-blue-300 {
  color: var(--blue-300);
}

.text-blue-400 {
  color: var(--blue-400);
}

.text-blue-500 {
  color: var(--blue-500);
}

.text-blue-600 {
  color: var(--blue-600);
}

.text-blue-700 {
  color: var(--blue-700);
}

.text-blue-800 {
  color: var(--blue-800);
}

.text-blue-900 {
  color: var(--blue-900);
}

.text-gray-50 {
  color: var(--gray-50);
}

.text-gray-100 {
  color: var(--gray-100);
}

.text-gray-200 {
  color: var(--gray-200);
}

.text-gray-300 {
  color: var(--gray-300);
}

.text-gray-400 {
  color: var(--gray-400);
}

.text-gray-500 {
  color: var(--gray-500);
}

.text-gray-600 {
  color: var(--gray-600);
}

.text-gray-700 {
  color: var(--gray-700);
}

.text-gray-800 {
  color: var(--gray-800);
}

.text-gray-900 {
  color: var(--gray-900);
}

/****************************
 Images
 ****************************/

.responsive-image {
  width: 100%;
  height: auto;
}

.overflow-hidden {
  overflow: hidden;
}

.wp-block-image .alignleft {
  float: none;
  display: block;
}

.wp-block-image .aligncenter {
  float: none;
  display: block;
}

.wp-block-image .alignright {
  float: none;
  display: block;
}

@media screen and (min-width: 768px) {
  .wp-block-image .alignleft {
    float: left;
  }

  .wp-block-image .aligncenter {
    float: none;
    display: block;
    margin: 0 auto;
  }

  .wp-block-image .alignright {
    float: right;
  }
}

/****************************
 Main
 ****************************/
.site-main {
  position: relative;
  z-index: 1;
}

/****************************
 Alerts
 ****************************/

.alert {
  font-family: "Bitter", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.alert-message {
  font-size: 0.9rem;
  background: var(--red-500);
  color: white;
  border: 1px solid var(--red-500);
}

.alert-message strong {
  font-weight: 600;
}

.alert-message a {
  color: white;
  text-decoration: underline;
  font-weight: 600;
}

.alert-message a:hover {
  opacity: 0.75;
}

/****************************
 Header
 ****************************/

.hamburger-text {
  font-family: "bitter", serif;
  font-weight: 500;
  color: var(--blue-600);
}

.navbar-toggler {
  padding-top: 10px;
  padding-bottom: 10px;
  box-shadow: none;
  display: flex;
  gap: 5px;
  align-items: center;
}

.navbar-toggler:focus {
  border-color: var(--blue-600);
  box-shadow: none;
}

.navbar-toggler[aria-expanded="true"] {
  background: var(--blue-50);
  box-shadow: none;
  border-color: var(--blue-600);
}

.header-banner svg {
  flex-shrink: 0;
}

.header-banner p {
  font-size: 0.9rem;
  color: white;
  margin-bottom: 0px;
}

#masthead {
  border-bottom: 1px solid #ddd;
  background: #fff;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

@media screen and (min-width: 1200px) {
  #masthead {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }
}

.navbar-nav .menu-item a {
  font-family: "Bitter", serif;
  font-optical-sizing: auto;
  font-weight: 700;
}

.navbar-nav {
  font-size: 1rem;
  margin-top: 20px;
}

.navbar-nav .nav-link {
  border-bottom: 1px solid #dddddd;
  color: var(--blue-600);
}

.navbar-nav .menu-item:last-child .nav-link {
  border-bottom: none;
}

#menu-main-menu .current_page_item.nav-item > a {
  color: var(--red-500);
}

.nav-link {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  padding-top: 15px;
  padding-bottom: 15px;
}

.navbar-brand img {
  height: 50px;
  width: auto;
}

@media screen and (min-width: 768px) {
  .navbar-brand img {
    height: 60px;
    width: auto;
  }
}

.entry-header {
  position: relative;
  height: 175px;
  display: flex;
  justify-content: left;
  align-items: end;
  background-image:
    linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5)),
    url("assets/images/Snowmass_Mtns.jpg");
  background-size: cover;
  background-position: bottom;
  padding: 20px;
  margin: 30px 0px;
  border-radius: 10px;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* background-color: rgba(0, 0, 0, 0.5); */
  z-index: 1;
  border-radius: 10px;
}

.entry-header .content {
  position: relative;
  z-index: 2;
  color: white;
  text-align: center;
}

.entry-header h1 {
  margin-bottom: 0px;
}

.navbar .social-media-menu {
  list-style: none;
  margin: 0 0 0 -10px;
  padding: 0;
}

.navbar .social-media-menu li {
  list-style: none;
  display: inline-block;
  padding: 10px;
}

.navbar .social-media-menu svg {
  height: 28px;
  width: 28px;
}

.navbar svg {
  height: 24px;
  width: 24px;
}

.navbar .buttons-menu {
  list-style-type: none;
  align-items: center;
  margin: 30px 0 20px 0;
  padding: 0px;
}

.navbar .buttons-menu li {
  display: inline-block;
  margin-right: 10px;
}

.navbar .buttons-menu li a {
  font-family: "Bitter", serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  text-decoration: none;
  color: var(--blue-600);
  padding: 8px 20px;
  border-radius: 25px;
  align-items: center;
}

@media screen and (min-width: 1200px) {
  .entry-header {
    height: 300px;
  }

  #menu-main-menu {
    align-items: center;
  }

  #menu-main-menu .nav-link {
    font-size: 0.95rem;
    padding-left: 10px;
    padding-right: 10px;
    font-family: "Bitter", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
  }

  .desktop-header-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .desktop-header-section .top-section {
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }

  .desktop-header-section .top-section svg {
    height: 24px;
    width: 24px;
  }

  .desktop-header-section .top-section .buttons-menu {
    list-style-type: none;
    align-items: center;
  }

  .desktop-header-section .top-section .buttons-menu li {
    display: inline-block;
    margin-left: 10px;
  }

  .desktop-header-section .top-section .buttons-menu li a {
    font-family: "Bitter", serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
    text-decoration: none;
    color: var(--blue-600);
    padding: 8px 20px;
    border-radius: 25px;
    align-items: center;
  }

  .desktop-header-section .social-media-menu {
    list-style: none;
  }

  .desktop-header-section .social-media-menu li {
    list-style: none;
    display: inline-block;
    padding-left: 10px;
  }

  .desktop-header-section .social-media-menu svg {
    height: 24px;
    width: 24px;
    fill: var(--blue-600);
    color: var(--blue-600);
  }

  .desktop-header-section .social-media-menu svg:hover {
    fill: var(--blue-800);
  }

  .desktop-main-menu {
    padding: 0;
    margin: 0;
  }

  .desktop-main-menu li {
    list-style: none;
    display: inline-block;
    padding-left: 10px;
  }

  .desktop-main-menu li a {
    font-family: "Bitter", serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
    text-decoration: none;
    color: var(--blue-600);
  }

  .desktop-main-menu li a:hover {
    color: var(--blue-800);
  }

  .desktop-main-menu li.current_page_item a {
    color: var(--red-500);
  }
}

.entry-content {
  width: 100%;
  margin: 0 auto;
  overflow: visible;
}

.entry-content img {
  margin-bottom: 20px;
}

@media screen and (min-width: 980px) {
  .entry-content {
    width: 800px;
  }
}

.entry-content .wp-block-embed__wrapper {
  margin: 50px auto;
}

/****************************
Components
 ****************************/

.non-scrollabled-image-grid {
  display: grid;
  grid-template-columns: 50% 25% 25%;
  gap: 15px;
}

.non-scrollabled-image-grid img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  display: block;
  border-radius: 5px;
}

/****************************
Posts
 ****************************/

#posts-container {
  overflow: hidden;
}

.post-thumbnail,
.post-thumbnail-bg {
  width: 100%;
  height: 100%;
  min-height: 125px;
}

.post-thumbnail-bg {
  background-size: cover;
  background-position: center;
}

@media screen and (min-width: 1199px) {
  .post-thumbnail,
  .post-thumbnail-bg {
    min-height: 250px;
  }
}

.posts article {
  padding-bottom: 20px;
  border-bottom: 1px solid #777;
}

.posts article a {
  text-decoration: none;
}

.posts article a:hover {
  color: var(--blue-800);
}

.posts article:last-of-type {
  padding-bottom: 20px;
  border-bottom: none;
}

.posts article h4 {
  margin-bottom: 10px;
  font-size: 1.1rem;
}

.posts article h4 a {
  text-decoration: none;
  color: #000;
}

.posts article p {
  line-height: 1.5;
  font-size: 0.9rem;
}

.posts article ul {
  margin: 0;
  padding: 0;
}

.posts .avatar-stack {
  display: flex;
}

.posts .avatar-stack a {
  margin-left: -15px;
}

.posts .avatar-stack a img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid lightgray;
}

.avatar-stack a:first-child {
  margin-left: 0;
}

.posts article .avatar-text-link {
  font-weight: bold;
  text-decoration: none;
  color: #000;
}

@media screen and (min-width: 1199px) {
  .posts article h4 {
    margin-bottom: 20px;
    font-size: 1.5rem;
  }

  .posts article p {
    font-size: 1rem;
  }
}

.categories-list {
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* 3 columns on desktop */
  gap: 20px;
  width: 100%;
}

.categories-list .svg-circle {
  height: 60px;
  width: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 50%;
  margin-bottom: 15px;
  border: 2px solid rgba(0, 0, 0, 0.2);
}

.categories-list svg {
  height: 30px;
  width: 30px;
}

.categories-list p {
  font-size: 1rem;
  line-height: 1.5;
  margin-bottom: 0;
}

.categories-list .item {
  position: relative;
  background-color: var(--red-500);
  background: url("assets/images/typography.svg") center/cover no-repeat;
  border-radius: 20px;
  overflow: hidden;
}

.categories-list .item::after {
  content: "";
  position: absolute;
  inset: 0; /* shorthand for top: 0; left: 0; right: 0; bottom: 0; */
  pointer-events: none; /* so it doesn't block clicks */
  background: linear-gradient(
    to top right,
    rgba(255, 255, 255, 0.9) 60%,
    rgba(255, 255, 255, 0) 100%
  );
}

.categories-list .item * {
  position: relative;
  z-index: 1; /* Make content appear ABOVE the gradient */
}

/****************************
Footer
 ****************************/
.site-footer {
  padding-left: 10%;
  padding-right: 10%;
  font-size: 0.95rem;
  padding-top: 500px;
  padding-bottom: 50px;
  background-image: url("assets/images/winter-sports-clinic-footer-background.jpg"); /* Background image */
  background-color: #101228; /* Fallback background color */
  background-repeat: no-repeat;
  background-position: top;
  margin-top: -100px;
}

.site-footer a {
  font-weight: 400;
}

@media screen and (min-width: 1199px) {
  .site-footer {
    padding-top: 550px;
    background-position: bottom center; /* Optional: adjust as needed */
    background-size: cover;
  }
}

.site-footer p {
  margin-bottom: 50px;
  font-size: 0.95rem;
}

.site-footer ul {
  margin-bottom: 50px;
}

@media screen and (min-width: 1200px) {
  .site-footer ul {
    margin-bottom: 10px;
  }
}

@media screen and (max-width: 1199px) {
  .footer-bottom-menu {
    margin-top: 60px;
    margin-bottom: 60px;
  }
}

.site-footer ul li {
  margin-left: 10px;
  margin-bottom: 10px;
}

.site-footer ul li a {
  color: #fff;
  text-decoration: none;
}

.site-footer ul li a:hover {
  opacity: 75%;
}

.site-footer ul li a svg {
  fill: #fff;
  height: 25px;
  width: 25px;
}

.site-footer hr {
  border-top: 1px solid #fff;
  opacity: 0.6;
  margin-bottom: 50px;
  margin-top: -10px;
}

/****************************
Embeds
 ****************************/

.entry-content figure {
  margin: 0 auto;
  width: 80%;
}

@media screen and (min-width: 980px) {
  .entry-content figure {
    width: 600px;
    height: auto;
  }
}

.single-post figure {
  width: 100%;
  aspect-ratio: auto;
  margin-bottom: 20px;
}

.single-post iframe {
  margin-bottom: 20px;
}

.single-post .alignleft,
.single-post .aligncenter,
.single-post .alignright {
  text-align: center;
}

@media screen and (min-width: 768px) {
  .single-post figure {
    width: auto;
  }
}

.single-post figure img {
  border-radius: 5px;
  margin: 0 auto;
}

.single-post .wp-element-caption {
  font-style: italic;
  font-size: 0.85rem;
  margin-bottom: 10px;
}

/* .single-post .wp-element-caption::before {
  content: "“";
  font-weight: bold;
} */

/* For closing quote */
/* .single-post .wp-element-caption::after {
  content: "”";
  font-weight: bold;
} */

iframe {
  width: 100%; /* Ensure the iframe takes full width of its container */
  height: 100%; /* Ensure the iframe takes full height of its container */
  aspect-ratio: 16 / 9; /* Sets a 16:9 aspect ratio (width / height) */
}

/****************************
Posts
 ****************************/

.social-share {
  padding: 20px 0;
  border-top: 1px solid var(--gray-200);
  border-bottom: 1px solid var(--gray-200);
  margin: 30px 0;
}

.social-share span {
  padding: 2px 10px;
  margin-right: 20px;
}

.social-share svg {
  height: 24px;
  width: 24px;
  margin-right: 10px;
}

.social-share button {
  border: none;
  background-color: transparent;
  color: var(--blue-600);
}

/****************************
Components
 ****************************/

/** Downloadable Assets **/

.downloadable-assets {
  background: #000;
  padding: 30px;
  border-radius: 5px;
  background: white;
  border: 1px solid var(--blue-600);
}

.downloadable-assets h4 {
  margin-bottom: 20px;
}

.downloadable-assets .links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

@media screen and (min-width: 980px) {
  .downloadable-assets .links {
    display: flex;
    flex-direction: row;
    flex-flow: wrap;
    gap: 10px;
  }
}

/** Category Icon Cards **/

.category-icon-cards-three,
.category-icon-cards-four {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 1rem;
  margin-bottom: 1rem;
}

@media screen and (min-width: 500px) {
  .category-icon-cards-three,
  .category-icon-cards-four {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (min-width: 768px) {
  .category-icon-cards-three {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }

  .category-icon-cards-four {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
  }
}

.category-icon-cards .card {
  padding: 20px;
  font-family: "Bitter", serif;
  font-weight: 500;
  background:
    linear-gradient(to top right, var(--red-500) 50%, transparent 100%),
    url("assets/images/typography.svg"), var(--red-500);
  background-size: 150% auto;

  background-repeat: no-repeat;
  background-position:
    center,
    right center,
    center;
  border: none;
}

.category-icon-cards--white .card {
  background:
    linear-gradient(
      to top right,
      rgba(255, 255, 255, 0.97) 55%,
      transparent 100%
    ),
    url("assets/images/typography.svg"), #ffffff; /* solid white background */
  border: 1px solid var(--blue-600);
}

@media (max-width: 768px) {
  .category-icon-cards .card {
    background-size:
      100% 100%,
      100% auto,
      /* zoom SVG more on mobile */ cover;
  }
}

@media (max-width: 768px) {
  .category-icon-cards .card {
    background-size:
      100% 100%,
      100% auto,
      /* zoom SVG more on mobile */ cover;
  }
}

.category-icon-cards .card .category-icon {
  position: relative;
  display: flex;
  justify-content: center; /* horizontal */
  align-items: center;
  height: 75px;
  width: 75px;
  margin-bottom: 20px;
}

.category-icon-cards .card .icon-shield {
  background-image: url("assets/images/category-background.svg");
  height: 75px;
  width: 75px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background-size: contain; /* 👈 scales to fit inside */
  background-repeat: no-repeat; /* prevent tiling */
  background-position: center;
}

.category-icon-cards--white .card .icon-shield {
  background-image: url("assets/images/category-background-white.svg");
}

.category-icon-cards .card img {
  width: 50%;
  height: 50%;
  object-fit: contain; /* works like background-size: contain */
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  background-position: center;
  transform: translate(-50%, -50%);
}

.category-icon-cards .card p {
  margin-bottom: 0px;
  color: white;
  line-height: 1.5;
}

.category-icon-cards--white .card p {
  color: var(--blue-600);
}

@media screen and (min-width: 768px) {
  .category-icon-cards .card {
    flex: 1 1 calc(50% - 16px); /* 4 per row */
    padding: 16px;
    text-align: left;
    margin-bottom: 0px;
  }
}

@media screen and (min-width: 980px) {
  .category-icon-cards .card {
    flex: 1 1 calc(25% - 16px); /* 4 per row */
    padding: 16px;
  }
}

/** Call To Action Box **/

.call-to-action-box {
  background-color: var(--blue-600);
  background-image: url("data:image/svg+xml,%3Csvg width='50' height='10' viewBox='0 0 100 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21.184 20c.357-.13.72-.264 1.088-.402l1.768-.661C33.64 15.347 39.647 14 50 14c10.271 0 15.362 1.222 24.629 4.928.955.383 1.869.74 2.75 1.072h6.225c-2.51-.73-5.139-1.691-8.233-2.928C65.888 13.278 60.562 12 50 12c-10.626 0-16.855 1.397-26.66 5.063l-1.767.662c-2.475.923-4.66 1.674-6.724 2.275h6.335zm0-20C13.258 2.892 8.077 4 0 4V2c5.744 0 9.951-.574 14.85-2h6.334zM77.38 0C85.239 2.966 90.502 4 100 4V2c-6.842 0-11.386-.542-16.396-2h-6.225zM0 14c8.44 0 13.718-1.21 22.272-4.402l1.768-.661C33.64 5.347 39.647 4 50 4c10.271 0 15.362 1.222 24.629 4.928C84.112 12.722 89.438 14 100 14v-2c-10.271 0-15.362-1.222-24.629-4.928C65.888 3.278 60.562 2 50 2 39.374 2 33.145 3.397 23.34 7.063l-1.767.662C13.223 10.84 8.163 12 0 12v2z' fill='%23ffffff' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat: repeat;
  padding: 40px;
  border-radius: 5px;
}

.call-to-action-box p {
  color: white;
  font-size: 1rem;
}

.call-to-action-box p a {
  color: white;
  font-weight: 400;
}

.call-to-action-box p a:hover {
  color: var(--blue-50);
}

.call-to-action-box .title {
  margin-bottom: 40px;
}

.call-to-action-box .divider {
  background-color: #272a60;
  background-image: url("data:image/svg+xml,%3Csvg width='4' height='4' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23a7b0dd' fill-opacity='0.9' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat;
  height: 6px;
  margin: 30px 0;
}

.call-to-action-box .icon-shield-container {
  position: relative;
  display: flex;
  justify-content: center; /* horizontal */
  align-items: center;
  height: 75px;
  width: 75px;
  margin-bottom: 20px;
}

.call-to-action-box .icon-shield-container .icon-shield {
  background-image: url("assets/images/blue-shield-background.svg");
  height: 75px;
  width: 75px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background-size: contain; /* 👈 scales to fit inside */
  background-repeat: no-repeat; /* prevent tiling */
  background-position: center;
}

.call-to-action-box .icon-shield-container img {
  width: 50%;
  height: 50%;
  object-fit: contain; /* works like background-size: contain */
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  background-position: center;
  transform: translate(-50%, -50%);
}

@media screen and (min-width: 980px) {
  .call-to-action-box .content {
    display: flex;
  }

  .call-to-action-box .section {
    flex: 1;
  }

  .call-to-action-box .divider {
    background-color: #272a60;
    background-image: url("data:image/svg+xml,%3Csvg width='4' height='4' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.9' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: repeat;
    width: 6px;
    height: auto;
    margin: 0 40px;
  }
}

/** Mission Statement **/

.mission-statement h1,
.mission-statement h2,
.mission-statement h3,
.mission-statement h4,
.mission-statement h5,
.mission-statement h6 {
  color: var(--blue-600);
}

/** Points of contact **/

.points-of-contact .contact-boxes {
  display: block;
  gap: 20px;
}

.points-of-contact .contact-box {
  margin-bottom: 20px;
}

.points-of-contact .contact-box img {
  max-height: 65px;
  max-width: auto;
  margin-bottom: 20px;
}

.points-of-contact .contact-box p {
  font-size: 0.875rem;
}

@media screen and (min-width: 768px) {
  .points-of-contact .contact-boxes {
    display: flex;
    gap: 20px;
  }

  .points-of-contact .contact-box {
    flex: 1;
  }
}

/** Information Box **/

.information-box {
  background: var(--yellow-50);
  padding: 30px;
  border-radius: 5px;
  border: 1px solid var(--yellow-800);
  margin-bottom: 20px;
}

.information-box h1,
.information-box h2,
.information-box h3,
.information-box h4,
.information-box h5,
.information-box h6,
.information-box p {
  color: var(--yellow-800);
}

.information-box p:last-child {
  margin-bottom: 0px;
}

.information-box a {
  font-weight: bold;
  color: var(--yellow-800);
}

.information-box a:hover {
  font-weight: bold;
  color: var(--yellow-900);
}

/** Floating Contact Card **/

.floating-contact-card {
  background-color: var(--blue-50);
  border-radius: 5px;
  margin-bottom: 20px;
}

.floating-contact-card img {
  max-height: 65px;
  max-width: auto;
  margin-bottom: 20px;
}

.floating-contact-card h6 {
  font-size: 1rem;
  line-height: 150%;
}

.floating-contact-card p {
  font-size: 0.875rem;
}

@media screen and (min-width: 768px) {
  .floating-contact-card {
    width: 40%;
  }

  .floating-contact-card .float-left {
    float: left;
    margin-right: 20px;
  }

  .floating-contact-card .float-right {
    float: right;
    margin-left: 20px;
  }
}

/** Sponsor Box **/

.sponsor-box {
  background: var(--gray-50);
  padding: 30px;
  border-radius: 5px;
  margin-bottom: 20px;
}

.sponsor-box .image-grid div {
  height: auto;
  display: block;
  text-align: center;
  padding: 20px;
}

@media screen and (min-width: 768px) {
  .sponsor-box ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 5px 40px;
  }

  .sponsor-box .image-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 25px; /* spacing between images */
    align-items: center;
  }

  .sponsor-box .image-grid div {
    width: calc(33.333% - 25px);
    height: auto;
    display: block;
    text-align: center;
    padding: 10px;
  }
}

/** Background Color Box With Images **/

.bg-color-box-with-images img {
  max-width: 150px;
  padding: 10px 0;
}

/** Veteran Stories **/
.veteran-stories-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
}

.veteran-story-card {
  border: 1px solid #ccc;
  height: 100%;
}

.veteran-story-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

.veteran-story-image {
  width: 100%;
  aspect-ratio: 1 / 1; /* forces equal image height */
  overflow: hidden;
}

.veteran-story-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  object-position: top center;
  border-radius: 4px 4px 0 0;
}

.veteran-story-title {
  margin-top: auto;
  padding: 12px;
  font-size: 1rem;
  text-align: center;
}

@media (max-width: 1199px) {
  .veteran-stories-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .veteran-stories-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/** Veteran Stories Quote Boxes **/
.quote-box {
  display: flex;
}

.quote-box-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--blue-600);
  border-radius: 5px;
  padding: 1.5rem;
}

.quote-box-inner a {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-decoration: none;
}

.quote-box-inner div {
  display: flex;
  align-items: center;
}

.quote-box-inner h6 {
  line-height: 1.5;
  color: var(--blue-800);
}

.quote-box-inner p {
  margin-bottom: 0px;
  line-height: 1.25;
  color: var(--blue-800);
}

.quote-box-inner div img {
  height: 35px;
  width: 35px;
  border-radius: 50%;
  margin-right: 10px;
}

@media (min-width: 980px) {
  .quote-box-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
  }
}

/** Image Scroller **/

.image-scroll-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
}

.image-scroll {
  display: flex;
  overflow-x: auto;
  gap: 16px;
}

.scroll-left,
.scroll-right {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--blue-600);
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}

.scroll-left,
.scroll-right {
  transition:
    background-color 0.2s ease,
    transform 0.1s ease;
}

.scroll-left:hover,
.scroll-right:hover {
  background-color: var(--blue-800);
}

.scroll-left:active,
.scroll-right:active {
  transform: scale(0.95);
}

.image-scroll img {
  height: 350px;
  flex: 0 0 auto;
  scroll-snap-align: start;
  border-radius: 8px;
}

.image-scroll {
  overflow-x: auto;
}

.image-scroll:has(> *:last-child) {
  mask-image: linear-gradient(
    to right,
    black 0%,
    black calc(100% - 40px),
    transparent 100%
  );
}

/** Home Page Hero Section **/

.home-page-hero-section {
  padding: 40px 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)),
    url("assets/images/hero-background.jpg");
  background-size: cover;
  background-position: top;
  margin-bottom: 40px;
}

.home-page-hero-section h1 {
  line-height: 125%;
}

@media screen and (min-width: 768px) {
  .home-page-hero-section {
    padding: 80px 0;
    text-align: left;
  }

  .home-page-hero-section h1,
  .home-page-hero-section p {
    padding-right: 60px;
  }
}

/** Home Page Hero Section **/

.three-column-section-images {
  margin-top: 40px;
}

.three-column-section-images img {
  width: 100%;
  height: auto;
  border-radius: 5px;
}

@media screen and (min-width: 768px) {
  .three-column-section-images img {
    max-height: 244px;
  }
}

/** Purple Background Box With Category Boxes **/

.purple-background-box-categories {
  background-color: var(--blue-600);
  background-image: url("data:image/svg+xml,%3Csvg width='50' height='10' viewBox='0 0 100 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21.184 20c.357-.13.72-.264 1.088-.402l1.768-.661C33.64 15.347 39.647 14 50 14c10.271 0 15.362 1.222 24.629 4.928.955.383 1.869.74 2.75 1.072h6.225c-2.51-.73-5.139-1.691-8.233-2.928C65.888 13.278 60.562 12 50 12c-10.626 0-16.855 1.397-26.66 5.063l-1.767.662c-2.475.923-4.66 1.674-6.724 2.275h6.335zm0-20C13.258 2.892 8.077 4 0 4V2c5.744 0 9.951-.574 14.85-2h6.334zM77.38 0C85.239 2.966 90.502 4 100 4V2c-6.842 0-11.386-.542-16.396-2h-6.225zM0 14c8.44 0 13.718-1.21 22.272-4.402l1.768-.661C33.64 5.347 39.647 4 50 4c10.271 0 15.362 1.222 24.629 4.928C84.112 12.722 89.438 14 100 14v-2c-10.271 0-15.362-1.222-24.629-4.928C65.888 3.278 60.562 2 50 2 39.374 2 33.145 3.397 23.34 7.063l-1.767.662C13.223 10.84 8.163 12 0 12v2z' fill='%23ffffff' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat: repeat;
  padding: 40px;
  border-radius: 5px;
}

.purple-background-box-categories h1,
.purple-background-box-categories h2,
.purple-background-box-categories h3,
.purple-background-box-categories h4,
.purple-background-box-categories h5,
.purple-background-box-categories h6 {
  color: var(--blue-200);
}

.purple-background-box-categories p {
  color: white;
}

.purple-background-box-categories .category-icon-cards .card {
  margin-bottom: 20px;
}

@media screen and (min-width: 768px) {
  .purple-background-box-categories .category-icon-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }

  .purple-background-box-categories .category-icon-cards .card {
    margin-bottom: 0px;
  }
}

@media screen and (min-width: 1199px) {
  .purple-background-box-categories .category-icon-cards {
    grid-template-columns: repeat(6, 1fr);
  }

  .purple-background-box-categories .category-icon-cards--white .card {
    background:
      linear-gradient(
        to top right,
        rgba(255, 255, 255, 0.98) 70%,
        transparent 100%
      ),
      url(assets/images/typography.svg), #ffffff;
    border: 1px solid var(--blue-600);
  }
}

/** Image Grid **/

.image-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 20px;
  grid-auto-rows: 1fr;
}

.image-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 5px;
}

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

  .image-grid img:first-child {
    grid-column: 1 / -1;
  }
}

/** Load More Posts Button Styles **/

#load-more {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  position: relative;
}

#load-more .spinner {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

#load-more.loading {
  pointer-events: none;
  opacity: 0.85;
}

#load-more.loading .button-icon svg {
  display: none;
  flex-shrink: 0;
}

#load-more.loading .button-icon::after {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/** News Links **/

.news-component {
}

.news-component .featured-image {
  width: 100%;
  height: auto;
  border-radius: 5px;
}

.news-component h4 {
  color: var(--gray-800);
}

.news-links img {
  height: 40px;
  width: 40px;
  padding: 5px;
  border-radius: 50%;
  border: 1px solid var(--blue-600);
  background: #fff;
  margin-bottom: 0;
}

.news-links .links {
  margin-left: 50px;
}

.external-sources {
  display: block;
}

.external-sources a {
  color: var(--blue-600);
  text-decoration: none;
}

.external-sources a:hover {
  color: var(--blue-700);
}

.image-stack {
  display: flex;
  margin-left: 15px;
  margin-bottom: 10px;
}

@media screen and (min-width: 768px) {
  .image-stack {
    margin-bottom: 0px;
  }

  .external-sources {
    display: flex;
    align-items: center;
    gap: 10px;
  }
}

.image-stack div {
  margin-left: -15px;
}

.image-stack img {
  height: 40px;
  width: 40px;
  border: 1px solid var(--blue-600);
  border-radius: 50%;
  padding: 5px;
  background: #fff;
  margin-bottom: 0px;
  position: relative;
}

.scources {
  display: flex;
}

.news-component-border-bottom {
  border-bottom: 1px solid var(--blue-600);
}

/* Fix WordPress caption bug */

.wp-block-image figcaption {
  display: block !important;
  width: 100% !important;
}

/* Fix figure sizing */

.entry-content figure {
  display: inline-block;
  max-width: 70%;
  width: auto;
  margin: 0 auto;
}

.wp-block-image .alignright {
  margin: 0 auto;
  float: none;
}

.wp-block-image .alignleft {
  margin: 0 auto;
  float: none;
}

@media screen and (min-width: 768px) {
  .wp-block-image .alignright {
    margin: 1rem 0 1rem 1rem;
    max-width: 380px;
    float: right;
  }

  .wp-block-image .alignleft {
    margin: 1rem 1rem 1rem 0rem;
    max-width: 380px;
    float: left;
  }

  .wp-block-image .aligncenter {
    margin: 0 auto;
    max-width: 380px;
  }
}

@media screen and (min-width: 980px) {
  .entry-content figure {
    max-width: 400px;
    width: 70%;
  }
}

/* Make image control layout */

.entry-content figure img {
  display: block;
  width: 100%;
  height: auto;
}

/* Prevent aspect ratio from breaking captions */

.single-post figure {
  aspect-ratio: auto;
}