/* ==========================================================================
   Trexon — responsive layer
   The pages are built from inline styles, so every override here needs
   !important to win. Classes are injected on the layout containers only.
   Breakpoints: 1024 / 980 / 900 (nav) / 820 / 700 / 620 / 560
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html, body { max-width: 100%; overflow-x: clip; }

img, video, iframe, svg { max-width: 100%; }

/* The width/height attributes exist to reserve aspect ratio and stop layout
   shift. Without this they act as presentational size hints and stretch any
   image whose CSS sets only one dimension. Inline styles still win. */
img[width][height] { height: auto; }

/* --------------------------------------------------------------------------
   Fluid typography — desktop sizes are the clamp ceiling, so nothing
   changes at wide widths.
   -------------------------------------------------------------------------- */
.tx-fs-58 { font-size: clamp(30px, 6.2vw, 58px) !important; }
.tx-fs-48 { font-size: clamp(27px, 5.2vw, 48px) !important; }
.tx-fs-44 { font-size: clamp(26px, 4.8vw, 44px) !important; }
.tx-fs-40 { font-size: clamp(25px, 4.4vw, 40px) !important; }
.tx-fs-36 { font-size: clamp(23px, 4.0vw, 36px) !important; }
.tx-fs-34 { font-size: clamp(22px, 3.8vw, 34px) !important; }
.tx-fs-32 { font-size: clamp(22px, 3.6vw, 32px) !important; }
.tx-fs-30 { font-size: clamp(21px, 3.4vw, 30px) !important; }
.tx-fs-26 { font-size: clamp(19px, 3.0vw, 26px) !important; }
.tx-fs-24 { font-size: clamp(18px, 2.8vw, 24px) !important; }
.tx-fs-22 { font-size: clamp(17px, 2.6vw, 22px) !important; }

@media (max-width: 600px) {
  /* tight negative tracking reads badly at small sizes */
  .tx-fs-58, .tx-fs-48, .tx-fs-44, .tx-fs-40 { letter-spacing: -0.3px !important; }
}

/* --------------------------------------------------------------------------
   Focus visibility — the pages carry no :focus styling of their own
   -------------------------------------------------------------------------- */
/* Navy and white, both already in the palette. The brand orange is only
   2.81:1 on the cream background, under the 3:1 a focus ring needs. */
:focus-visible {
  outline: 3px solid #1a194f !important;
  outline-offset: 2px !important;
}

.tx-hero-inner :focus-visible,
footer :focus-visible,
.tx-panel :focus-visible {
  outline-color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   Form controls
   -------------------------------------------------------------------------- */
[hidden] { display: none !important; }

/* The <x-dc> runtime strips the bare `hidden` attribute when it compiles the
   markup, so the contact form's status panels are hidden in CSS instead and
   revealed by a data-show attribute that assets/contact-form.js toggles. */
[data-form-success], [data-form-error] { display: none; }
[data-form-success][data-show], [data-form-error][data-show] { display: block; }

input, textarea, select, button { font-family: inherit; max-width: 100%; }
input, textarea, select { width: 100%; }

/* The tel/mailto links in the contact page's info cards sit outside the footer
   rule and render 19px tall. Padding lifts them over the 24px minimum
   (WCAG 2.2 AA 2.5.8) without moving the card layout. */
#form a[href^="tel:"],
#form a[href^="mailto:"] { display: inline-block; padding: 6px 0; }

@media (max-width: 600px) {
  /* iOS zooms the page when a focused field is under 16px */
  input, textarea, select { font-size: 16px !important; }
}

/* --------------------------------------------------------------------------
   Grid collapses
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  /* the 6-track service-card grid places its children with grid-column:span 2|3,
     so the spans have to be reset or the collapsed grid keeps stray tracks */
  .tx-grid-6 { grid-template-columns: repeat(2, 1fr) !important; }
  .tx-grid-6 > * { grid-column: span 1 !important; }
  .tx-servicebar { grid-template-columns: repeat(3, 1fr) !important; row-gap: 28px !important; }
  .tx-servicebar-item { border-right: none !important; }
}

@media (max-width: 980px) {
  .tx-grid-4 { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 900px) {
  .tx-grid-2 { grid-template-columns: 1fr !important; gap: 34px !important; }
  .tx-grid-3 { grid-template-columns: repeat(2, 1fr) !important; }
  .tx-grid-side { grid-template-columns: 1fr !important; gap: 24px !important; }
  .tx-footer-grid { grid-template-columns: 1fr 1fr !important; gap: 36px !important; }
}

@media (max-width: 620px) {
  .tx-servicebar { grid-template-columns: repeat(2, 1fr) !important; }
  .tx-grid-6 { grid-template-columns: 1fr !important; }
}

@media (max-width: 560px) {
  .tx-grid-3,
  .tx-grid-4,
  .tx-grid-2-tight { grid-template-columns: 1fr !important; }

  /* Stacking all four footer columns makes a ~1400px wall of links. Keep the
     two link lists side by side and let the brand and contact blocks run full
     width, which roughly halves the footer height. */
  .tx-footer-grid { grid-template-columns: 1fr 1fr !important; gap: 30px 20px !important; }
  .tx-footer-grid > *:first-child,
  .tx-footer-grid > *:last-child { grid-column: 1 / -1 !important; }
}

@media (max-width: 900px) {
  /* 14–18px between single-line links reads as a nav menu, not a footer.
     Move that spacing inside the links so each one is a ≥24px tap target
     (WCAG 2.2 AA 2.5.8) instead of a 19px line of text with dead gaps. */
  .tx-footer-grid > div { gap: 0 !important; }
  .tx-footer-grid a { display: block; padding: 7px 0 !important; }
  .tx-footer-grid h4 { margin-bottom: 10px !important; }

  /* breadcrumb "HOME" is a 17px target; the negative margin buys hit area
     without moving anything on the page */
  .tx-crumb { display: inline-block; padding: 6px 4px; margin: -6px -4px; }
}

@media (max-width: 600px) {
  /* the floating WhatsApp button sits over the bottom bar at full scroll */
  .tx-footer-bottom { padding-bottom: 84px !important; }
}

/* --------------------------------------------------------------------------
   Flex rows that must stack
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .tx-hero-inner {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 34px !important;
  }
  /* the hero art is absolutely positioned behind the copy: widen it and
     swap the side-to-side scrim for a top-to-bottom one so text stays legible */
  .tx-hero-img { width: 100% !important; opacity: 0.5 !important; }
  .tx-hero-scrim {
    background: linear-gradient(180deg,
      rgba(26, 25, 79, 0.92) 0%,
      rgba(26, 25, 79, 0.74) 55%,
      rgba(26, 25, 79, 0.9) 100%) !important;
  }
  .tx-hero-badges {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-self: stretch !important;
    justify-content: flex-start !important;
    gap: 18px 28px !important;
  }
  /* the service card pulls up over the hero; once the badges wrap into a row
     an 80px overlap swallows their labels */
  .tx-servicebar-wrap { margin-top: -36px !important; }
}

@media (max-width: 820px) {
  .tx-cta {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 20px !important;
  }
}

@media (max-width: 700px) {
  .tx-footer-bottom {
    flex-direction: column !important;
    text-align: center !important;
    gap: 14px !important;
  }
}

@media (max-width: 560px) {
  .tx-row { flex-wrap: wrap !important; gap: 6px 12px !important; }
  /* side-by-side CTAs break their labels mid-phrase once the column narrows.
     Stack at natural width to match every other button on the site. */
  .tx-btnrow { flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; }
}

/* --------------------------------------------------------------------------
   Floating WhatsApp button — keep it clear of the thumb zone
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
  .tx-fab {
    width: 52px !important;
    height: 52px !important;
    bottom: 18px !important;
    right: 18px !important;
  }
}

/* --------------------------------------------------------------------------
   Mobile navigation (markup injected by assets/mobile-nav.js)
   -------------------------------------------------------------------------- */
.tx-burger {
  display: none;
  position: fixed;
  top: 0;
  right: 10px;
  z-index: 70;
  width: 46px;
  height: 76px;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: #1a194f;
  -webkit-tap-highlight-color: transparent;
}

.tx-burger span {
  display: block;
  position: relative;
  width: 24px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: background-color .2s ease;
}

.tx-burger span::before,
.tx-burger span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 24px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .28s cubic-bezier(.22, 1, .36, 1), top .28s cubic-bezier(.22, 1, .36, 1);
}

.tx-burger span::before { top: -7px; }
.tx-burger span::after  { top: 7px; }

.tx-menu-open .tx-burger span { background: transparent; }
.tx-menu-open .tx-burger span::before { top: 0; transform: rotate(45deg); }
.tx-menu-open .tx-burger span::after  { top: 0; transform: rotate(-45deg); }

.tx-scrim {
  position: fixed;
  inset: 0;
  z-index: 64;
  background: rgba(26, 25, 79, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
}

.tx-menu-open .tx-scrim { opacity: 1; visibility: visible; }

.tx-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 65;
  width: min(86vw, 340px);
  padding: 92px 26px 34px;
  background: #1a194f;
  color: #fff;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transform: translateX(100%);
  visibility: hidden;
  /* flip visibility instantly on open (so the first link can take focus) and
     only after the slide-out completes on close */
  transition: transform .34s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .34s;
  box-shadow: -18px 0 48px rgba(26, 25, 79, .35);
}

.tx-menu-open .tx-panel {
  transform: translateX(0);
  visibility: visible;
  transition: transform .34s cubic-bezier(.22, 1, .36, 1), visibility 0s;
}
.tx-menu-open { overflow: hidden; }
.tx-menu-open .tx-burger { color: #fff; }

.tx-panel a {
  display: block;
  padding: 13px 0;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.tx-panel a:hover,
.tx-panel a[aria-current="page"] { color: #F26A21; }

.tx-panel .tx-panel-sub a {
  padding: 12px 0 12px 14px; /* 44px tap target */
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.72);
  border-bottom: 0;
}

.tx-panel-label {
  margin: 22px 0 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2px;
  color: #F26A21;
}

.tx-panel-cta {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 26px;
  padding: 15px 22px !important;
  border-radius: 10px;
  border-bottom: 0 !important;
  background: #F26A21;
  font-size: 15px;
  text-align: center;
}

.tx-panel-cta:hover { background: #d5570f; color: #fff !important; }

@media (max-width: 900px) {
  .tx-nav { display: none !important; }
  .tx-burger { display: flex; }
}

@media (max-width: 620px) {
  .tx-header-cta { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .tx-panel, .tx-scrim, .tx-burger span, .tx-burger span::before, .tx-burger span::after {
    transition: none !important;
  }
}