/* ==========================================================================
   AGQ Nutrition – Site fixes (Cowork, May 2026)
   Single override sheet, loaded last on every page so it wins specificity
   without touching the autoptimized blobs.
   ========================================================================== */

/* ---------- Brand tokens (sampled from screenshots / theme) -------------- */
:root {
  --agq-brown: #873912;
  --agq-brown-dark: #5e2606;
  --agq-brown-soft: #b46a3f;
  --agq-blue: #1e73be;
  --agq-ink: #2a2a2a;
  --agq-paper: #ffffff;
  --agq-line: rgba(255, 255, 255, .14);
  --agq-shadow: 0 6px 24px rgba(0, 0, 0, .14);
  --agq-radius: 10px;
}

/* ==========================================================================
   1. HEADER — slim translucent, always readable, never eats hero text
   ========================================================================== */
.header_wrapper {
  position: fixed !important;
  top: 0; left: 0; right: 0;
  z-index: 999;
  background: linear-gradient(180deg, rgba(94, 38, 6, .92) 0%, rgba(94, 38, 6, .78) 100%) !important;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 12px rgba(0, 0, 0, .25);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
header#header,
.header_wrapper header#header {
  background: transparent !important;
  height: 64px !important;
  min-height: 64px !important;
  padding: 0 !important;
}
header#header > .container,
header#header > div {
  height: 64px !important;
  display: flex;
  align-items: center;
}
header#header,
header#header .navigation,
header#header nav,
header#header nav ul,
header#header nav li,
header#header nav li > a,
header#header .header_tools > a,
header#header .header_tools > a > i {
  color: #fff !important;
}
header#header nav li > a {
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 600;
  font-size: 13px !important;
  padding: 0 14px !important;
  line-height: 64px !important;
  transition: color .15s ease;
}
header#header nav li > a:hover,
header#header nav li.current-menu-item > a,
header#header nav li.current-menu-parent > a {
  color: #ffd9b3 !important;
}
/* shrink the logo strip if there is one */
header#header .logo,
header#header .logo a {
  height: 64px;
  display: inline-flex;
  align-items: center;
}
header#header .logo img {
  max-height: 44px !important;
  width: auto;
}

/* hero / page header must shift down to compensate for fixed header */
.top_wrapper { padding-top: 64px; }
.top_wrapper #slider-fullwidth,
.top_wrapper .header_page { margin-top: 0; }

/* dropdown panels */
header#header .sub-menu,
header#header ul.sub-menu {
  background: var(--agq-brown) !important;
  border-color: rgba(255, 255, 255, .12) !important;
}
header#header .sub-menu li > a { color: #fff !important; }
header#header .sub-menu li > a:hover { color: #ffd9b3 !important; }

/* responsive menu toggle */
.responsive_menu_button,
.responsive_menu_button > i { color: #fff !important; }

/* language switcher chip */
.trp-language-switcher { color: #fff !important; }

/* ==========================================================================
   2. HERO SLIDER — vanilla replacement
   ========================================================================== */
#slider-fullwidth {
  position: relative;
  min-height: 560px;
  background: #1a1a1a;
  overflow: hidden;
}
#slider-fullwidth .swiper-wrapper {
  display: block !important;
  position: relative;
  width: 100% !important;
  height: 100% !important;
  transform: none !important;
}
#slider-fullwidth .swiper-slide {
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  min-height: 560px;
  opacity: 0;
  transform: translateX(20px);
  transition: opacity .8s ease, transform .8s ease;
  pointer-events: none;
  z-index: 1;
}
#slider-fullwidth .swiper-slide.is-active {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
  z-index: 2;
}
#slider-fullwidth .swiper-slide .video-wrap {
  position: absolute; inset: 0;
  overflow: hidden;
}
#slider-fullwidth .swiper-slide .video-wrap video {
  position: absolute;
  top: 50%; left: 50%;
  width: 100%; height: 100%;
  object-fit: cover;
  transform: translate(-50%, -50%);
}
#slider-fullwidth .swiper-slide .bg-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.55)) !important;
  opacity: 1 !important;
  z-index: 1;
}
#slider-fullwidth .swiper-slide .container {
  position: relative;
  z-index: 3;
  height: 100%;
  min-height: 560px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#slider-fullwidth .swiper-slide .content {
  position: static !important;
  margin: 0 !important;
  width: min(960px, 92%) !important;
  text-align: center;
}
#slider-fullwidth .swiper-slide h1 {
  font-size: clamp(34px, 5vw, 54px) !important;
  line-height: 1.05 !important;
  margin-bottom: 18px !important;
}
#slider-fullwidth .swiper-slide p {
  font-size: clamp(16px, 1.6vw, 20px) !important;
  line-height: 1.5 !important;
  margin-bottom: 22px !important;
}
#slider-fullwidth .pagination-parent {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}
#slider-fullwidth .pagination-parent a.prev,
#slider-fullwidth .pagination-parent a.next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px; height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  pointer-events: auto;
  text-decoration: none;
  transition: background .15s ease;
}
#slider-fullwidth .pagination-parent a.prev:hover,
#slider-fullwidth .pagination-parent a.next:hover { background: var(--agq-brown); }
#slider-fullwidth .pagination-parent a.prev { left: 18px; }
#slider-fullwidth .pagination-parent a.next { right: 18px; }
#slider-fullwidth .pagination-parent a .text { display: none; }
#slider-fullwidth .pagination-parent a .icon-wrap i { font-size: 22px; line-height: 1; }
#slider-fullwidth .agq-dots {
  position: absolute;
  bottom: 18px; left: 0; right: 0;
  display: flex; gap: 10px;
  justify-content: center;
  z-index: 6;
}
#slider-fullwidth .agq-dots button {
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 0;
  background: rgba(255,255,255,.45);
  cursor: pointer;
  padding: 0;
  transition: background .2s ease, transform .2s ease;
}
#slider-fullwidth .agq-dots button.is-active {
  background: #fff;
  transform: scale(1.25);
}
#slider-fullwidth .loading { display: none !important; }
/* hide the legacy MasterSlider duplicate that some pages render below the hero */
.codeless_slider_wrapper > .codeless-slider-container ~ .avt_masterslider_el,
.master-slider-parent + .ms-bullet-container { display: none !important; }

/* ==========================================================================
   3. COUNTERS — animated, real numbers
   ========================================================================== */
.animated_counter.style-center {
  text-align: center;
  padding: 14px 6px;
}
.animated_counter.style-center i,
.animated_counter.style-center .agq-counter-icon {
  font-size: 42px !important;
  color: var(--agq-brown) !important;
  display: inline-block;
  margin-bottom: 12px;
}
.animated_counter .count_to {
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  font-size: 56px;
  line-height: 1.05;
  color: var(--agq-brown);
  margin-bottom: 4px;
}
.animated_counter .count_to .agq-prefix,
.animated_counter .count_to .agq-suffix {
  font-size: .55em;
  color: var(--agq-brown-soft);
  font-weight: 600;
  margin: 0 .12em;
}
.animated_counter h3 {
  font-size: 16px !important;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--agq-ink) !important;
  margin: 6px 0 4px !important;
}
.animated_counter + .wpb_text_column p {
  font-size: 14px;
  color: #555;
}

/* ==========================================================================
   4. TESTIMONIAL CAROUSEL — single visible item + < / > controls
   ========================================================================== */
/* Hide orphan parallax bg <span> that doubles the page header image when the
   parallax JS doesn't init (Services etc.) */
.top_wrapper > span.slider-img,
.top_wrapper > span[class*="slider-img"],
.top_wrapper > span[style*="background-image"]:not(.divider) {
  display: none !important;
}

/* Hide the OLD pagination buttons that ship next to the testimonial section
   (their href="#" scrolls to top — duplicate of our new arrows) */
.testimonial_carousel_element > .pagination,
.testimonial_carousel_element .pagination > a.prev,
.testimonial_carousel_element .pagination > a.next {
  display: none !important;
}

.testimonial_carousel.row {
  position: relative;
  margin: 0 auto;
  padding: 32px 56px;
  max-width: 980px;
}
.testimonial_carousel .item {
  display: none !important;
  width: auto !important;
  text-align: center;
}
.testimonial_carousel .item.is-active {
  display: block !important;
  animation: agq-fade .4s ease;
}
@keyframes agq-fade {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.testimonial_carousel .item p {
  font-style: italic;
  font-size: 19px !important;
  line-height: 1.55 !important;
  color: #333 !important;
  max-width: 800px;
  margin: 0 auto 18px;
}
.testimonial_carousel .item .param h6 {
  color: var(--agq-brown) !important;
  margin: 0;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.testimonial_carousel .item .param .position {
  color: #888 !important;
  font-size: 13px;
}
.testimonial_carousel .agq-tc-prev,
.testimonial_carousel .agq-tc-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px; height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid rgba(135,57,18,.25);
  border-radius: 50%;
  color: var(--agq-brown);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
  font-size: 18px;
  z-index: 4;
}
.testimonial_carousel .agq-tc-prev:hover,
.testimonial_carousel .agq-tc-next:hover { background: var(--agq-brown); color: #fff; }
.testimonial_carousel .agq-tc-prev { left: 4px; }
.testimonial_carousel .agq-tc-next { right: 4px; }
.testimonial_carousel .agq-tc-dots {
  display: flex; gap: 7px;
  justify-content: center;
  margin-top: 14px;
}
.testimonial_carousel .agq-tc-dots button {
  width: 9px; height: 9px;
  border-radius: 50%;
  border: 0;
  background: rgba(135,57,18,.3);
  cursor: pointer;
  padding: 0;
  transition: background .15s ease, transform .15s ease;
}
.testimonial_carousel .agq-tc-dots button.is-active {
  background: var(--agq-brown);
  transform: scale(1.25);
}

/* ==========================================================================
   5. CONTACT FORM — clean, modern
   ========================================================================== */
.agqsl-form,
form.agqsl-form-contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 18px;
  max-width: 760px;
  margin: 0 auto;
  padding: 28px 30px;
  background: #fff;
  border-radius: var(--agq-radius);
  box-shadow: var(--agq-shadow);
  border: 1px solid #efe8e0;
}
.agqsl-form p {
  display: flex;
  flex-direction: column;
  margin: 0;
}
.agqsl-form p:nth-child(5),  /* subject row -- full width */
.agqsl-form p:nth-child(6),  /* message row -- full width */
.agqsl-form p:nth-child(7),  /* button -- full width */
.agqsl-form p[aria-live]
{ grid-column: 1 / -1; }
.agqsl-form label {
  font-size: 13px;
  font-weight: 600;
  color: var(--agq-ink);
  text-transform: uppercase;
  letter-spacing: .04em;
  display: block;
}
.agqsl-form label br { display: none; }
.agqsl-form input[type="text"],
.agqsl-form input[type="email"],
.agqsl-form textarea {
  width: 100%;
  margin-top: 6px;
  padding: 11px 14px;
  font-size: 15px;
  font-family: inherit;
  color: var(--agq-ink);
  background: #fafafa;
  border: 1px solid #e2dccf;
  border-radius: 8px;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.agqsl-form textarea {
  min-height: 140px;
  resize: vertical;
}
.agqsl-form input:focus,
.agqsl-form textarea:focus {
  outline: none;
  border-color: var(--agq-brown);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(135,57,18,.12);
}
.agqsl-form button[type="submit"] {
  background: var(--agq-brown);
  color: #fff;
  border: 0;
  padding: 13px 28px;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  border-radius: 8px;
  cursor: pointer;
  transition: background .15s ease, transform .1s ease;
  justify-self: start;
}
.agqsl-form button[type="submit"]:hover { background: var(--agq-brown-dark); }
.agqsl-form button[type="submit"]:active { transform: translateY(1px); }
.agqsl-form .agqsl-form-status {
  margin: 0;
  font-size: 14px;
  color: #2a8c2a;
}
.agqsl-form .agqsl-form-status.is-error { color: #b03030; }

@media (max-width: 640px) {
  .agqsl-form { grid-template-columns: 1fr; padding: 22px 18px; }
  .agqsl-form p:nth-child(n) { grid-column: 1 / -1; }
}

/* surrounding contact page polish */
.row-google-map { border-radius: var(--agq-radius); overflow: hidden; box-shadow: var(--agq-shadow); }
.row-google-map iframe { display: block; width: 100%; }

/* ==========================================================================
   6. ICON FALLBACKS — show *something* until real icons arrive
   The empty orange squares are typicons / vc-li / vc-material font icons
   whose font files are missing on the new server.  Map them to Unicode
   glyphs (we already have FontAwesome loaded via the head <link>).
   ========================================================================== */
.vc_icon_element-icon::before {
  font-family: "Font Awesome 5 Free", "Font Awesome 6 Free", "FontAwesome";
  font-weight: 900;
  -webkit-font-smoothing: antialiased;
}
.typcn-battery-charge::before  { content: "\f0e7"; }   /* fa-bolt */
.vc_li-heart::before           { content: "\f004"; }   /* fa-heart */
.vc-material-monetization_on::before { content: "\f155"; } /* fa-dollar-sign */
.vc_li-cog::before             { content: "\f013"; }
.vc_li-leaf::before            { content: "\f06c"; }
.vc_li-droplet::before         { content: "\f043"; }   /* fa-tint */
.vc_li-shield::before          { content: "\f3ed"; }
.vc-material-eco::before       { content: "\f4d8"; }   /* fa-seedling */

.vc_icon_element-icon { font-size: 38px !important; line-height: 1 !important; }

/* ==========================================================================
   7. KEY SCIENTIFIC EXCERPTS (extra cards we inject on Novosophos / Xtern)
   ========================================================================== */
.agq-sci-card {
  max-width: 760px;
  margin: 22px auto;
  padding: 0 14px;
  text-align: center;
}
.agq-sci-card blockquote {
  font-size: 18px;
  line-height: 1.55;
  color: #333;
  font-style: italic;
  margin: 0 0 10px;
}
.agq-sci-card cite {
  display: block;
  font-style: normal;
  font-size: 14px;
  color: var(--agq-brown);
  font-weight: 600;
}
.agq-sci-card .agq-sci-meta {
  display: block;
  color: #888;
  font-size: 13px;
  font-style: normal;
}

/* ==========================================================================
   8. Footer polish — keep brand tone consistent
   ========================================================================== */
#copyright .copyright_text { color: rgba(255, 255, 255, .85); }
#copyright .copyright_text a { color: #ffd9b3; }
#copyright .copyright_text a:hover { color: #fff; }