/**
 * TriStar – common styles (used on all pages: index, services, team, contact)
 * - All main content paragraphs: 24px / 42px line-height / 24px margin-bottom
 * - Mobile menu: show nav when header has data-menu-open (below 1024px)
 * - Header nav link hover
 * - Sticky header: shrunk state when scrolled
 */

/* Titles: Montserrat; body text: Poppins (set via Tailwind font-sans) */
h1, h2, h3, h4, h5, h6,
.page-title {
  font-family: 'Montserrat', sans-serif;
}

/* All paragraphs in main content: 24px / 42px line-height / 24px margin-bottom */
main p, main li {
  font-size: 24px;
  line-height: 42px;
  margin-bottom: 24px;
}
main li {
  font-size: 24px;
  line-height: 32px;
  margin-bottom: 0;
}
@media (max-width: 768px) {
  main li {
    font-size: 20px;
    line-height: 28px;
  }
}
main p:last-child {
  margin-bottom: 0;
}

/* Address and other main content text: same font size and line-height as paragraphs */
main address {
  font-size: 24px;
  line-height: 42px;
  margin-bottom: 24px;
}
@media (max-width: 768px) {
  main p, main address {
    font-size: 20px;
    line-height: 36px;
  }
}
/* Homepage: equal-height cards in Why Producers Choose Us */
#main-content .home-card {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
#main-content .home-card p {
  flex: 1;
}

/* Menu toggle button: hamburger when closed, X when open */
#menu-toggle .menu-icon-open {
  display: block;
}
#menu-toggle .menu-icon-close {
  display: none;
}
[data-menu-open] #menu-toggle .menu-icon-open {
  display: none;
}
[data-menu-open] #menu-toggle .menu-icon-close {
  display: block;
}

/* Header nav link hover: orange underline (no layout shift) */
#nav-wrap nav a {
  border-bottom: 2px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
#nav-wrap nav a:hover,
#nav-wrap nav a.border-tristar-accent {
  border-bottom-color: #1a94d8; /* tristar-light */
}

@media (max-width: 1023px) {
  [data-menu-open] #nav-wrap {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    min-height: 100vh;
    padding-top: 10rem;
    overflow-y: auto;
    z-index: 20;
  }
  /* Keep logo and close button above the overlay so they stay clickable */
  [data-menu-open] .header-logo,
  [data-menu-open] #menu-toggle {
    position: relative;
    z-index: 25;
  }
}

/* Sticky header: shrunk state when scrolled. Transitions for smooth animation */
#header {
  transition: background-color 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
}
#header .header-logo-img {
  transition: height 0.4s ease-in-out;
}
#header .header-logo {
  transition: padding 0.4s ease-in-out, background-color 0.4s ease-in-out;
}
#header .header-nav {
  transition: font-size 0.4s ease-in-out, gap 0.4s ease-in-out;
}
#header #nav-wrap {
  transition: gap 0.4s ease-in-out;
}
#header .header-nav a {
  transition: color 0.4s ease-in-out, border-color 0.4s ease-in-out;
}
#header .header-menu-btn {
  transition: color 0.4s ease-in-out, background-color 0.4s ease-in-out;
}

#header[data-shrunk] .header-logo-img {
  height: 1.75rem;
}
@media (max-width: 768px) {
  #header[data-shrunk] .header-logo-img {
    height: 2.2rem;
  }
}
#header[data-shrunk] .header-logo {
  background: transparent;
  padding:0;
}
@media (min-width: 768px) {
  #header[data-shrunk] .header-logo-img {
    height: 3rem;
  }
}
#header[data-shrunk] .header-nav {
  font-size: 0.8125rem;
  gap: 0.75rem;
}
@media (min-width: 1024px) {
  #header[data-shrunk] #nav-wrap {
    gap: 1rem;
  }
}
#header[data-shrunk] {
  background-color: rgba(255, 255, 255, 0.96);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
#header[data-shrunk] .header-nav a,
#header[data-shrunk] .header-menu-btn {
  color: #111827;
}
#header[data-shrunk] .header-nav a:hover,
#header[data-shrunk] .header-nav a.border-tristar-accent {
  color: #1a94d8;
}
#header[data-shrunk] .header-menu-btn:hover {
  color: #111827;
  background-color: rgba(0, 0, 0, 0.06);
}


/* Mobile: keep nav links white when menu is open (dark dropdown); menu button (hamburger/X) stays black when shrunk */
@media (max-width: 1023px) {
  #nav-wrap nav a {
    font-weight: 300;
  }
  #header[data-shrunk] .header-nav a {
    color: #fff;
  }
  #header[data-shrunk] .header-nav a:hover,
  #header[data-shrunk] .header-nav a.border-tristar-accent {
    color: #fff;
    border-bottom-color: transparent;
  }
  /* Mobile: active menu item – no line, extra bold */
  #nav-wrap nav a.border-tristar-accent {
    border-bottom-color: transparent !important;
    font-weight: 800;
    padding-left: 15px;
  }
}
.page-title {
  margin-bottom: 3.5rem;
}
.page-title .page-title-inner {
  display: inline-block;
  position: relative;
  text-transform: uppercase;
}
.page-title .page-title-inner::after {
  content: '';
  display: block;
  position: relative;
  left: 0;
  width: calc(100% + 40px);
  height: 5px;
  margin-top: 1rem;
  background-color: #1a94d8;
}