/* ============================================================
   EDTEX SHARED STYLES
   Used on every page: tokens, reset, nav, footer, buttons,
   section labels / pills, container, focus states.
   Page-specific styles live in each page's own <style> block.
============================================================ */

/* ============================================================
   TOKENS
============================================================ */
:root {
  --yellow:       #FFC107;
  --black:        #000000;
  --white:        #FFFFFF;
  --dark-gray:    #333333;
  --teal:         #008F8C;
  --warm-gray:    #BDBDBD;
  --light-yellow: rgba(255,193,7,0.10);
  --surface-dark: #0a0a0a;

  --font:        'Roboto', sans-serif;
  --font-serif:  'Playfair Display', Georgia, serif;
  --nav-h:       72px;
  --max-w:       1140px;
  --pad-x:       24px;
  --radius:      10px;
  --section-py:  96px;
}

/* ============================================================
   RESET & BASE
============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--font); font-size: 16px; line-height: 1.6; color: var(--dark-gray); background: var(--white); -webkit-font-smoothing: antialiased; }
a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }
ul { list-style: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; border-radius: 4px; }

.container { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--pad-x); }

/* ============================================================
   SECTION LABELS
   Yellow bar only - text is dark for WCAG AA compliance
============================================================ */
.sec-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.sec-label::before {
  content: '';
  display: block;
  width: 18px;
  height: 2px;
  background: var(--yellow);
  border-radius: 1px;
  flex-shrink: 0;
}
.sec-label span {
  font-size: 12px;
  font-weight: 500;
  color: var(--dark-gray); /* Dark on light sections - passes WCAG AA */
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
/* On dark backgrounds - white text */
.sec-label--dark span { color: rgba(255,255,255,0.7); }

/* ============================================================
   PILLS / EYEBROW BADGES
   Same shape as the hero eyebrow badge, in two colour variants
   so they stay WCAG AA compliant on light or dark backgrounds.
============================================================ */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 100px;
  padding: 6px 14px;
  margin-bottom: 14px;
}
.pill-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--yellow); flex-shrink: 0; }
.pill span {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* For dark backgrounds - yellow text on translucent yellow (matches hero eyebrow) */
.pill--dark {
  background: rgba(255,193,7,0.08);
  border: 1px solid rgba(255,193,7,0.25);
}
.pill--dark span { color: var(--yellow); }

/* For light/white backgrounds - dark text on light-yellow tint (passes WCAG AA) */
.pill--light {
  background: var(--light-yellow);
  border: 1px solid rgba(255,193,7,0.3);
}
.pill--light span { color: var(--dark-gray); }

/* ============================================================
   BUTTONS - min 44x44 touch targets
============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 28px;
  border-radius: var(--radius);
  font-family: var(--font);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  transition: opacity 0.2s, transform 0.15s;
  white-space: nowrap;
}
.btn:hover { opacity: 0.88; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--yellow); color: var(--black); }
.btn-ghost { background: transparent; color: var(--white); border: 1.5px solid rgba(255,255,255,0.4); }
.btn-ghost:hover { border-color: rgba(255,255,255,0.7); background: rgba(255,255,255,0.06); }
.btn-dark { background: var(--black); color: var(--yellow); }

/* ============================================================
   NAV
============================================================ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--nav-h);
  background: rgba(0,0,0,0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  transition: background 0.3s;
}
.nav.scrolled { background: rgba(0,0,0,0.99); }

.nav-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--pad-x);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.nav-logo img,
img.nav-logo { height: 34px; width: auto; display: block; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
}
.nav-links a {
  font-size: 14px;
  color: rgba(255,255,255,0.65); /* 6.7:1 - passes AA */
  transition: color 0.2s;
}
.nav-links a:hover { color: var(--white); }

.nav-cta { flex-shrink: 0; }
.nav-cta .btn { min-height: 40px; padding: 0 20px; font-size: 14px; }

.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
}
.nav-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--white);
  border-radius: 1px;
  transition: transform 0.3s, opacity 0.3s;
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-mobile {
  display: none;
  position: fixed;
  top: var(--nav-h); left: 0; right: 0;
  background: #000;
  border-top: 1px solid rgba(255,255,255,0.08);
  z-index: 99;
  padding: 8px var(--pad-x) 24px;
  flex-direction: column;
}
.nav-mobile.open { display: flex; }
.nav-mobile a {
  display: block;
  padding: 16px 0;
  font-size: 16px;
  color: rgba(255,255,255,0.75);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  transition: color 0.2s;
}
.nav-mobile a:last-of-type { border-bottom: none; }
.nav-mobile a:hover { color: var(--white); }
.nav-mobile .btn {
  display: flex;
  margin-top: 20px;
  width: 100%;
  justify-content: center;
  padding: 0 28px;
  color: var(--black);
  border-bottom: none;
  font-size: 15px;
}

/* ============================================================
   FOOTER
============================================================ */
.footer {
  background: var(--black);
  border-top: 1px solid rgba(255,255,255,0.07);
  padding: 56px 0 0;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr 0.8fr;
  gap: 48px;
  padding-bottom: 48px;
}

.footer-logo-wrap { margin-bottom: 14px; }
.footer-logo-wrap img { height: 30px; width: auto; }

.footer-tagline { font-size: 13px; color: rgba(255,255,255,0.55); margin-bottom: 20px; line-height: 1.6; } /* 4.8:1 */
.footer-contact-links { display: flex; flex-direction: column; gap: 8px; }
.footer-contact-links a { font-size: 13px; color: rgba(255,255,255,0.55); transition: color 0.2s; } /* 6.3:1 */
.footer-contact-links a:hover { color: var(--white); }

.footer-col-head {
  font-size: 12px;
  font-weight: 500;
  color: #FFC107; /* yellow on dark footer — 14.4:1 - passes AA */
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.footer-links { display: flex; flex-direction: column; gap: 10px; }
.footer-links a { font-size: 13px; color: rgba(255,255,255,0.55); transition: color 0.2s; } /* 6.3:1 */
.footer-links a:hover { color: var(--white); }

.footer-svc { display: flex; flex-direction: column; gap: 10px; }
.footer-svc p { font-size: 13px; color: rgba(255,255,255,0.55); line-height: 1.5; } /* 4.8:1 */
.footer-svc strong { color: rgba(255,255,255,0.7); font-weight: 500; } /* 9.5:1 */

.footer-x-col { display: flex; align-items: center; justify-content: flex-end; }
.footer-x-img { width: 120px; height: 120px; opacity: 0.5; }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.07);
  padding: 20px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.footer-bottom p { font-size: 12px; color: rgba(255,255,255,0.55); } /* 4.8:1 */
.footer-bottom-links { display: flex; gap: 20px; }
.footer-bottom-links a { font-size: 12px; color: rgba(255,255,255,0.55); transition: color 0.2s; } /* 4.8:1 */
.footer-bottom-links a:hover { color: rgba(255,255,255,0.7); }

/* ============================================================
   BRAND STRIP (white) - used on homepage, available everywhere
============================================================ */
.brand-strip {
  background: var(--white);
  padding: 64px 0;
  border-top: 1px solid rgba(0,0,0,0.06);
  border-bottom: 1px solid rgba(0,0,0,0.06);
  overflow: hidden;
}
.brand-strip-label { text-align: center; margin-bottom: 20px; }
.brand-strip-track { display: flex; }
.brand-strip-list {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  animation: scroll-brands 32s linear infinite;
}
.brand-strip-track:hover .brand-strip-list { animation-play-state: paused; }
@keyframes scroll-brands {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.brand-strip-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 36px;
  border-right: 1px solid rgba(0,0,0,0.06);
  flex-shrink: 0;
  height: 64px;
}
.brand-strip-pill img,
.brand-strip-pill svg {
  height: 34px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
  opacity: 0.85;
  transition: opacity 0.2s;
}
/* Promethean is our signature brand - give it a bit more presence in brand strips */
.brand-strip-pill img.logo-promethean {
  height: 46px;
  max-width: 170px;
}
.brand-strip-pill:hover img,
.brand-strip-pill:hover svg { opacity: 1; }
.brand-strip-pill a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

/* ============================================================
   BREADCRUMBS (product pages)
============================================================ */
.breadcrumbs {
  position: relative;
  z-index: 1;
  padding-top: 28px;
  margin-bottom: 28px;
}
.breadcrumbs ol {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.breadcrumbs li {
  font-size: 13px;
  color: rgba(255,255,255,0.4);
  display: flex;
  align-items: center;
  gap: 6px;
}
.breadcrumbs li a {
  color: rgba(255,255,255,0.65);
  text-decoration: none;
  transition: color 0.15s;
}
.breadcrumbs li a:hover { color: var(--yellow); }
.breadcrumbs li:not(:last-child)::after {
  content: '/';
  color: rgba(255,255,255,0.25);
}
.breadcrumbs li[aria-current="page"] { color: rgba(255,255,255,0.85); }

/* ============================================================
   RESPONSIVE - MOBILE (shared elements)
============================================================ */
@media (max-width: 768px) {
  :root {
    --section-py: 64px;
    --pad-x: 20px;
  }

  /* Nav */
  .nav-links, .nav-cta { display: none; }
  .nav-hamburger { display: flex; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-x-col { justify-content: flex-start; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 10px; }
}