/* ================================================================
   Accessibility & micro-UX additions for FSDC Aerosolutions site.
   Layered on top of main.css. Safe to load last.
================================================================ */

/* Skip-to-content link — visually hidden until focused */
.skip-to-content {
  position: absolute;
  top: -100px;
  left: 0;
  background: #081a2b;
  color: #fff;
  padding: 12px 20px;
  z-index: 100000;
  text-decoration: none;
  font-weight: 600;
  border-radius: 0 0 8px 0;
  transition: top 0.2s ease;
}
.skip-to-content:focus {
  top: 0;
  outline: 3px solid #18bed2;
  outline-offset: 2px;
  color: #fff;
}

/* Visible focus states */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid #18bed2;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(24, 190, 210, 0.25);
}

/* Ensure body :target/main keyboard focus is visible without weird default outline */
main#main-content:focus { outline: none; }

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .hero-video-container,
  #hero-youtube-player iframe { display: none !important; }
}

/* Touch targets ≥ 44x44 px on small screens */
@media (max-width: 768px) {
  .gt-theme-btn,
  .link-btn,
  .gt-bottom-list a,
  nav#mobile-menu a,
  .gt-list a,
  .header-bar { min-height: 44px; }
}

/* Hide decorative shapes from screen readers */
.gt-flag-shape,
.gt-dot-shape,
.gt-dot-shape-2,
.gt-bike-shape,
.gt-bike-shape-2,
.gt-bg-shape,
.gt-bg-shape-2,
.gt-line-shape,
.gt-counter-shape,
.horse-shape,
.gt-gear-shape,
.recap-grid-overlay {
  pointer-events: none;
}

/* Forms — visible labels, required hints, error styling */
.form-group label,
form label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
  color: #081a2b;
}
.required-mark {
  color: #c0392b;
  margin-left: 2px;
}
.form-help {
  font-size: 0.85rem;
  color: #6c757d;
  margin-top: 4px;
}
.form-error {
  display: block;
  color: #c0392b;
  font-size: 0.85rem;
  margin-top: 4px;
}
.form-success {
  background: #d4edda;
  color: #155724;
  padding: 12px 16px;
  border-radius: 6px;
  border: 1px solid #c3e6cb;
}

/* Honeypot — hide from sighted users and AT */
.hp-field {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* High-contrast outline for inputs */
input:invalid:not(:placeholder-shown),
textarea:invalid:not(:placeholder-shown) {
  border-color: #c0392b;
}

/* Hide mobile indicators block on small screens (decorative, heavy) */
@media (max-width: 768px) {
  .indicators { display: none !important; }
}

/* Mobile menu hamburger as a button instead of div */
.header-bar {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 8px;
  display: inline-flex;
  flex-direction: column;
  gap: 5px;
}
.header-bar span {
  display: block;
  width: 28px;
  height: 3px;
  background: currentColor;
  border-radius: 2px;
}

/* Visually-hidden helper */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* Make every link have at least visible underline on hover (avoid link affordance loss) */
.gt-footer-content a:hover,
.gt-list a:hover,
nav#mobile-menu a:hover { text-decoration: underline; }

/* FAQ sections (used across new AEO blocks) */
.fsdc-faq {
  margin: 60px 0;
}
.fsdc-faq h2 {
  font-size: 2rem;
  margin-bottom: 24px;
  color: #081a2b;
}
.fsdc-faq details {
  background: #fff;
  border: 1px solid #e9ecef;
  border-radius: 10px;
  padding: 18px 22px;
  margin-bottom: 12px;
  box-shadow: 0 2px 8px rgba(8, 26, 43, 0.04);
  transition: box-shadow 0.2s ease;
}
.fsdc-faq details[open] {
  box-shadow: 0 6px 18px rgba(24, 190, 210, 0.12);
  border-color: #18bed2;
}
.fsdc-faq summary {
  font-weight: 700;
  font-size: 1.05rem;
  color: #081a2b;
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 32px;
}
.fsdc-faq summary::-webkit-details-marker { display: none; }
.fsdc-faq summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  color: #18bed2;
  font-weight: 700;
}
.fsdc-faq details[open] summary::after { content: "−"; }
.fsdc-faq details p,
.fsdc-faq details > div {
  margin-top: 12px;
  color: #4a5764;
  line-height: 1.6;
}

/* AEO short-answer blocks */
.fsdc-answer {
  background: #f8fafc;
  border-left: 4px solid #18bed2;
  padding: 16px 20px;
  border-radius: 0 8px 8px 0;
  margin: 16px 0 24px;
}
.fsdc-answer p { margin: 0; color: #2c3e50; }

/* Tech-specs tables on service pages */
.fsdc-spec-table {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
  font-size: 0.95rem;
}
.fsdc-spec-table th,
.fsdc-spec-table td {
  padding: 12px 16px;
  border: 1px solid #e9ecef;
  text-align: left;
}
.fsdc-spec-table th {
  background: #081a2b;
  color: #fff;
  font-weight: 600;
}
.fsdc-spec-table tr:nth-child(even) td { background: #f8fafc; }

/* Breadcrumbs */
.fsdc-breadcrumbs {
  padding: 16px 0;
  font-size: 0.9rem;
}
.fsdc-breadcrumbs ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  margin: 0;
}
.fsdc-breadcrumbs li + li::before {
  content: "›";
  margin-right: 8px;
  color: #6c757d;
}
.fsdc-breadcrumbs a { color: #18bed2; text-decoration: none; }
.fsdc-breadcrumbs a:hover { text-decoration: underline; }
.fsdc-breadcrumbs [aria-current="page"] { color: #4a5764; }

/* Hero text-on-video legibility */
.fsdc-hero-overlay {
  position: relative;
  z-index: 2;
  color: #fff;
  text-shadow: 0 2px 6px rgba(0,0,0,0.6);
}
.fsdc-hero-overlay h1 {
  font-size: clamp(1.8rem, 4vw, 3.4rem);
  line-height: 1.15;
  font-weight: 800;
  margin-bottom: 16px;
  color: #fff;
}
.fsdc-hero-overlay p {
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  max-width: 640px;
  color: #e6f7fa;
  margin-bottom: 24px;
}
.fsdc-hero-cta {
  display: inline-flex;
  gap: 12px;
  flex-wrap: wrap;
}
.fsdc-hero-cta .gt-theme-btn { font-weight: 700; }

/* =====================================================================
   Phase 2 commercial pages + pillar blogs — scoped content styling.
   Applied to any <section> that carries the `.fsdc-content` class.
   Constrains heading sizes, image height and spacing so pages render
   correctly on both desktop and mobile.
===================================================================== */
/* The header is absolute/fixed and overlays content. Push the first
   content section down far enough to clear both the top utility bar
   and the main nav so the H1 isn't covered. */
.fsdc-content {
  padding-top: 180px;
  padding-bottom: 70px;
}

.fsdc-content h1 {
  font-size: clamp(1.5rem, 3.4vw, 2.25rem);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 8px 0 18px;
  color: #081a2b;
}
.fsdc-content h2 {
  font-size: clamp(1.2rem, 2.2vw, 1.55rem);
  line-height: 1.3;
  font-weight: 700;
  margin: 36px 0 14px;
  color: #081a2b;
}
.fsdc-content h3 {
  font-size: clamp(1rem, 1.7vw, 1.2rem);
  line-height: 1.35;
  font-weight: 700;
  margin: 24px 0 10px;
  color: #081a2b;
}
.fsdc-content p,
.fsdc-content li {
  font-size: 1rem;
  line-height: 1.65;
  color: #2c3e50;
}
.fsdc-content ul,
.fsdc-content ol {
  padding-left: 1.4rem;
  margin-bottom: 1rem;
}
.fsdc-content ul li,
.fsdc-content ol li { margin-bottom: 0.4rem; }
.fsdc-content a { color: #18bed2; }
.fsdc-content a:hover { text-decoration: underline; }

/* Hero / inline images inside content pages — capped to a sensible
   max-height with object-fit cover so wide photos don't dominate the page. */
.fsdc-content > .container > img,
.fsdc-content .container > img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 420px;
  object-fit: cover;
  object-position: center;
  border-radius: 14px;
  margin: 18px 0 32px;
  box-shadow: 0 10px 28px rgba(8, 26, 43, 0.10);
}

/* Spec tables — horizontally scrollable on mobile */
.fsdc-content .fsdc-spec-table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  white-space: nowrap;
}
@media (min-width: 768px) {
  .fsdc-content .fsdc-spec-table { white-space: normal; }
}

/* CTA row — wraps and goes full-width on small screens */
.fsdc-content .fsdc-hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

/* Breadcrumbs spacing inside content pages */
.fsdc-content .fsdc-breadcrumbs { padding: 0 0 8px; }

/* Answer block tuning */
.fsdc-content .fsdc-answer { margin: 4px 0 24px; }

/* FAQ accordion spacing */
.fsdc-content .fsdc-faq { margin: 32px 0 8px; }

/* Tablet */
@media (max-width: 991px) {
  .fsdc-content { padding-top: 150px; padding-bottom: 48px; }
  .fsdc-content > .container > img,
  .fsdc-content .container > img { max-height: 340px; }
}

/* Mobile */
@media (max-width: 767px) {
  .fsdc-content { padding-top: 120px; padding-bottom: 36px; }
  .fsdc-content h1 { font-size: 1.45rem; }
  .fsdc-content h2 { font-size: 1.12rem; margin: 26px 0 10px; }
  .fsdc-content h3 { font-size: 1rem; margin: 18px 0 8px; }
  .fsdc-content p,
  .fsdc-content li { font-size: 0.95rem; }
  .fsdc-content > .container > img,
  .fsdc-content .container > img { max-height: 240px; margin: 12px 0 22px; border-radius: 10px; }
  .fsdc-content .fsdc-answer { padding: 12px 14px; }
  .fsdc-content .fsdc-spec-table { font-size: 0.85rem; }
  .fsdc-content .fsdc-spec-table th,
  .fsdc-content .fsdc-spec-table td { padding: 8px 10px; }
  .fsdc-content .fsdc-hero-cta .gt-theme-btn { width: 100%; justify-content: center; }
}

/* Extra-small */
@media (max-width: 380px) {
  .fsdc-content h1 { font-size: 1.3rem; }
  .fsdc-content h2 { font-size: 1.05rem; }
}

/* =====================================================================
   Dark header nav on light content pages
   Whenever the page contains a .fsdc-content section, the header sits
   on a white background — flip nav text and the hamburger from white
   to dark so it stays legible. Uses :has() (supported in all current
   evergreen browsers).
===================================================================== */
body:has(.fsdc-content) .header-main .main-menu ul li a,
body:has(.fsdc-content) .header-main .main-menu ul li > a {
  color: #1d1f20;
}
body:has(.fsdc-content) .header-main .main-menu ul li a:hover,
body:has(.fsdc-content) .header-main .main-menu ul li.active > a {
  color: #18bed2;
}

/* Submenu (dropdown) items on inner pages — black text in both
   the default and hover state so they remain readable when the
   dropdown background is light. A subtle teal background tint and
   left padding shift provide hover affordance without changing
   the text color away from black. */
body:has(.fsdc-content) .header-main .main-menu ul li .submenu a,
body:has(.fsdc-content) .header-main .main-menu ul li .submenu li a,
body:has(.fsdc-content) .header-main .main-menu ul li .submenu li > a {
  color: #1d1f20 !important;
}
body:has(.fsdc-content) .header-main .main-menu ul li .submenu a:hover,
body:has(.fsdc-content) .header-main .main-menu ul li .submenu li a:hover,
body:has(.fsdc-content) .header-main .main-menu ul li .submenu li.active > a {
  color: #1d1f20 !important;
  background-color: rgba(24, 190, 210, 0.10);
}

/* Hamburger lines on mobile need to be dark on light content pages */
body:has(.fsdc-content) .sidebar__toggle .header-bar span,
body:has(.fsdc-content) .header-bar span {
  background: #1d1f20;
}

/* Sticky / fixed header background on inner pages: always solid white so
   the page H1 and content beneath the floating nav can't show through. */
body:has(.fsdc-content) #header-sticky,
body:has(.fsdc-content) #header-sticky.sticky,
body:has(.fsdc-content) #header-sticky.header-sticky {
  background: #ffffff !important;
  box-shadow: 0 2px 14px rgba(8, 26, 43, 0.08);
}

/* The main nav row needs a solid backdrop too in case the theme sets
   transparency on .header-main rather than on #header-sticky. */
body:has(.fsdc-content) #header-sticky .header-main,
body:has(.fsdc-content) #header-sticky .mega-menu-wrapper {
  background: #ffffff;
}

/* Make sure the header keeps stacking above the content section so
   it never tucks under the H1 or hero image. */
body:has(.fsdc-content) .header-section-2,
body:has(.fsdc-content) #header-sticky {
  position: relative;
  z-index: 50;
}