/* Typography */
body {
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  color: var(--color-slate-gray);
  letter-spacing:.05em;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Aleo', serif;
  font-weight: 700;
  color: var(--color-slate-gray);
}

footer h1, footer h2, footer h3, footer h4, footer h5, footer h6{
  color: var(--color-vintage-white);
}


/* Homepage sections */

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

/* Hero section background with star pattern */
.hero-pattern {
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.1'%3E%3Cpath d='M30 30l15-15v30l-15-15zm-15 0L0 15v30l15-15z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* Star graphic for hero section */
.star-graphic {
  position: relative;
}

/* Header and footer height variables */
:root {
  --header-height-mobile: 136.5px; /* Mobile header height */
  --header-height-desktop: 184.5px; /* Desktop header height with full nav */
  --footer-height: 118px; /* Footer height (same for all screens) */
}

/* Content area that subtracts header and footer heights */
.min-h-content {
  min-height: calc(100vh - var(--header-height-mobile) - var(--footer-height));
}

@media (min-width: 768px) {
  .min-h-content {
    min-height: calc(100vh - var(--header-height-desktop) - var(--footer-height));
  }
}

/* Article content link styles */
.article-content a,
.trix-content a {
  color: var(--color-mint-green-dark);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: all 0.2s ease;
}

.article-content a:hover,
.trix-content a:hover {
  color: var(--color-mint-green);
  text-decoration-thickness: 2px;
}

.article-content a:visited,
.trix-content a:visited {
  color: var(--color-lotus-pink-dark);
}

.article-content a:visited:hover,
.trix-content a:visited:hover {
  color: var(--color-lotus-pink);
}

/* Swiper navigation button styling */
.swiper-button-next,
.swiper-button-prev {
  color: var(--color-mint-green) !important;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
  color: var(--color-mint-green-dark) !important;
}

/* Swiper pagination dots styling */
.swiper-pagination-bullet {
  background-color: var(--color-mint-green) !important;
  opacity: 0.4 !important;
}

.swiper-pagination-bullet-active {
  background-color: var(--color-mint-green) !important;
  opacity: 1 !important;
}

.swiper-pagination-bullet:hover {
  background-color: var(--color-mint-green-dark) !important;
  opacity: 0.7 !important;
}