/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Aleo:wght@700&display=swap');

/* Vitamese Brand Colors */
:root {
  --color-mint-green: #7fcbb4;
  --color-mint-green-dark: #6bb89f;
  --color-lotus-pink: #f69da1;
  --color-lotus-pink-dark: #e88a8f;
  --color-slate-gray: #333333;
  --color-text-light: #fff3e4;
  --color-lotus-pink-25: rgba(246, 157, 161, 0.25);
  --color-lotus-pink-10: rgba(246, 157, 161, 0.1);
  --color-pale-gray: #ececec;
}

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

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: white;
}

/* Custom Vitamese utilities */
.bg-mint-green {
  background-color: var(--color-mint-green);
}

.bg-mint-green-dark {
  background-color: var(--color-mint-green-dark);
}

.bg-lotus-pink {
  background-color: var(--color-lotus-pink);
}

.bg-lotus-pink-dark {
  background-color: var(--color-lotus-pink-dark);
}

.text-mint-green {
  color: var(--color-mint-green);
}

.text-mint-green-dark {
  color: var(--color-mint-green-dark);
}

.text-lotus-pink {
  color: var(--color-lotus-pink);
}

.border-mint-green {
  border-color: var(--color-mint-green);
}

.hover\:bg-mint-green-dark:hover {
  background-color: var(--color-mint-green-dark);
}

.hover\:text-mint-green:hover {
  color: var(--color-mint-green);
}

.hover\:border-mint-green:hover {
  border-color: var(--color-mint-green);
}

/* Text colors */
.text-slate-gray {
  color: var(--color-slate-gray);
}

.text-light {
  color: var(--color-text-light);
}

/* Homepage sections */
.bg-testimonials {
  background-color: var(--color-lotus-pink-25);
}

.bg-videos {
  background-color: var(--color-lotus-pink-10);
}

.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);
}