/* Common styles extracted from modern pages to ensure visual consistency and avoid duplication */

/* Local Font Faces - using downloaded woff2 files with system fallback */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/raleway-regular.woff2') format('woff2'),
       local('Raleway'), local('Raleway-Regular');
}

@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/raleway-semibold.woff2') format('woff2'),
       local('Raleway SemiBold'), local('Raleway-SemiBold');
}

@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/raleway-bold.woff2') format('woff2'),
       local('Raleway Bold'), local('Raleway-Bold');
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/poppins-regular.woff2') format('woff2'),
       local('Poppins'), local('Poppins-Regular');
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/poppins-semibold.woff2') format('woff2'),
       local('Poppins SemiBold'), local('Poppins-SemiBold');
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/poppins-bold.woff2') format('woff2'),
       local('Poppins Bold'), local('Poppins-Bold');
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('/fonts/poppins-black.woff2') format('woff2'),
       local('Poppins Black'), local('Poppins-Black');
}

@font-face {
  font-family: 'DIN Alternate';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('DIN Alternate'), local('DINAlternate-Regular'),
       local('Arial'), local('Helvetica');
}

@font-face {
  font-family: 'DIN Alternate';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local('DIN Alternate Bold'), local('DINAlternate-Bold'),
       local('Arial Bold'), local('Arial-Bold');
}

/* Variables (Wix-inspired palette and fonts) */
:root {
  --wix-color-primary: rgb(255, 102, 64);
  --wix-color-secondary: #FFDD3F;
  --wix-color-accent: #0B7613;
  --wix-color-background: #ffffff;
  --wix-color-green-section: rgb(130, 179, 59);
  --wix-color-card-bg: rgb(65, 92, 78);
  --wix-color-text-white: #ffffff;
  --wix-color-text-dark: #65414C;

  --wix-font-menu: normal normal normal 1rem/1.4em 'DIN Alternate', sans-serif;
  --wix-font-title: normal normal normal 3.5rem/1.2em 'Raleway', sans-serif;
  --wix-font-heading: normal normal 600 1.875rem/1.4em 'Raleway', sans-serif;
  --wix-font-body: normal normal normal 1rem/1.4em 'Raleway', sans-serif;
  --wix-font-button: normal normal 700 1.125rem/1em 'Raleway', sans-serif;
  --wix-font-experience: normal normal 900 8.0625rem/1em 'Poppins', sans-serif;

  /* Shared spacing vars used in header partial */
  --container-padding: clamp(0.75rem, 3vw, 2rem);
  --hero-top-offset: clamp(1rem, 3vw, 2rem);
}

/* Resets */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body { font-family: 'Raleway', sans-serif; line-height: 1.6; background-color: var(--wix-color-background); overflow-x: hidden; }
img, video, svg { max-width: 100%; height: auto; display: block; }

/* Header */
.site-header {
  background: var(--wix-color-primary);
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  box-shadow: 0 0.125rem 0.625rem rgba(0,0,0,0.1);
  padding: 0.9375rem 0;
}
.header-container {
  max-width: 100%; margin: 0; display: flex; justify-content: space-between; align-items: center;
  padding: 0 2rem; position: relative;
}
.logo { height: 5.1875rem; width: auto; }

/* Mobile nav toggle */
.nav-toggle { display: none; background: transparent; border: none; color: #fff; width: 2.5rem; height: 2.5rem; align-items: center; justify-content: center; cursor: pointer; }
.nav-toggle:focus { outline: 0.125rem solid #fff; outline-offset: 0.125rem; }
.nav-toggle .bar { display: block; width: 1.5rem; height: 0.1875rem; background: #fff; margin: 0.1875rem 0; border-radius: 0.125rem; transition: transform 0.3s ease, opacity 0.3s ease; }
.nav-toggle.active .bar:nth-child(1) { transform: translateY(0.375rem) rotate(45deg); }
.nav-toggle.active .bar:nth-child(2) { opacity: 0; }
.nav-toggle.active .bar:nth-child(3) { transform: translateY(-0.375rem) rotate(-45deg); }

/* Navigation */
.main-nav { display: flex; align-items: center; gap: 1.25rem; }
.nav-menu { display: flex; list-style: none; gap: 1rem; align-items: center; }
.nav-item { position: relative; }
.nav-link {
  text-decoration: none; color: #fff; font: var(--wix-font-menu);
  padding: 0.75rem 1rem; border-radius: 0.625rem; transition: all 0.4s ease;
  display: flex; align-items: center; gap: 0.3125rem; text-transform: uppercase; letter-spacing: 0.03em; font-weight: 700;
}
.nav-link:hover, .nav-link.active { background: var(--wix-color-secondary); color: var(--wix-color-text-dark); }

.dropdown-menu {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  background: var(--wix-color-background); border-radius: 0.5rem; box-shadow: 0 0.0625rem 0.375rem rgba(0,0,0,0.35);
  border: 0.0625rem solid rgba(0,0,0,0.08); min-width: 12.5rem; opacity: 0; visibility: hidden; transition: all 0.2s ease; margin-top: 0.4375rem;
}
.nav-item:hover .dropdown-menu { opacity: 1; visibility: visible; }
.dropdown-menu a { display: block; padding: 0.9375rem 1.25rem; text-decoration: none; color: var(--wix-color-text-dark); font: var(--wix-font-menu); transition: all 0.4s ease; }
.dropdown-menu a:hover, .dropdown-menu a.active { background: var(--wix-color-secondary); color: var(--wix-color-text-dark); }

/* Buttons */
.btn-primary {
  background: var(--wix-color-secondary); color: var(--wix-color-accent); font: var(--wix-font-button);
  text-transform: uppercase; letter-spacing: 0.08em; font-weight: 800; padding: 0.65rem 1.6rem;
  border-radius: 3.75rem; text-decoration: none; border: none; box-shadow: 0.1rem 0.1rem 0.3125rem rgba(0, 0, 0, 0.5);
  transition: all 0.2s ease; display: inline-flex; align-items: center; gap: 0.625rem;
}
.btn-primary:hover { background: var(--wix-color-accent); color: var(--wix-color-secondary); }

/* Utility */
.fade-in { opacity: 0; transform: translateY(1.25rem); transition: all 0.6s ease; }
.fade-in.visible { opacity: 1; transform: translateY(0); }
.dropdown-arrow { font-size: 0.75rem; transition: transform 0.3s ease; }
.nav-item:hover .dropdown-arrow { transform: rotate(180deg); }

/* Footer */
.site-footer { background: var(--wix-color-primary); padding: 2.5rem 1.25rem; text-align: center; }
.footer-content { max-width: 100%; margin: 0; padding: 0 2.5rem; color: var(--wix-color-text-white); font: var(--wix-font-body); }

/* Global responsive helpers (kept here so pages can remove duplicates) */
@media (max-width: 48em) {
  .site-header .header-container { padding-inline: var(--container-padding); }
  .nav-toggle { display: inline-flex; }
  .main-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--wix-color-primary); padding: 0.75rem 1rem 1rem; box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15); }
  .main-nav.open { display: block; }
  .nav-menu { flex-direction: column; gap: 0.5rem; }
  .btn-primary { width: 100%; justify-content: center; margin-top: 0.5rem; }
  .dropdown-menu { position: static; transform: none; opacity: 1; visibility: visible; background: transparent; box-shadow: none; margin-top: 0; min-width: 0; padding-left: 0.75rem; }
  .dropdown-arrow { display: none; }
}

/* Allow pages to opt-out of header offset padding when needed */
main[data-no-header-offset] { padding-top: 0 !important; }