/* Fortified — base styles, design tokens, reset.
   Color and font values sampled from live fortified.com.sg (see _capture/header.css.txt). */

:root {
  /* Color palette — sampled exactly from live site */
  --ft-color-cream: #F1F0EC;        /* header + body background */
  --ft-color-red: #E63946;          /* logo/accent red — eyedropped from logo */
  --ft-color-ink: #171616;          /* primary menu text, headings */
  --ft-color-ink-soft: #797C7F;     /* body text, secondary text */
  --ft-color-line: #E5E0D8;
  --ft-color-card: #FFFFFF;
  --ft-color-dark: #272727;         /* dropdown bg + panel bg */
  --ft-color-dark-soft: #3F3F3F;
  --ft-color-on-dark: #D1D1D1;      /* dropdown link color on dark */
  --ft-color-on-dark-strong: #FFFFFF;

  /* Typography */
  --ft-font: 'DM Sans', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ft-font-size-base: 17px;
  --ft-line-height-base: 28px;

  /* Spacing / layout */
  --ft-container-max: 1320px;
  --ft-container-pad: 24px;
  /* Width Tint constrains Elementor page content to (its `.content_wrap`).
     Inner pages are boxed to this; the homepage stays full-width. */
  --ft-elementor-content-max: 1290px;

  /* Z-index — match live (header is 8000 so dropdowns and panels overlay everything) */
  --ft-z-header: 8000;
  --ft-z-overlay: 9000;

  /* Misc */
  --ft-radius-sm: 4px;
  --ft-radius-md: 8px;
  --ft-shadow-sm: 0 1px 2px rgba(0,0,0,0.06);
  --ft-shadow-md: 1px 1px 2px rgba(0,0,0,0.2);
}

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

/* Respect users who prefer reduced motion: collapse transitions/animations to
   near-instant so final states (open panels, revealed underlines) still apply
   but nothing slides or fades. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
html, body { margin: 0; padding: 0; }

/* Clip stray horizontal overflow so a stray wide element never triggers a
   horizontal scrollbar — Tint did this on its page wrapper. `clip` (not
   `hidden`) avoids creating a scroll container, so it won't break sticky. */
.fortified-site-wrap { overflow-x: clip; }

/* Box the Elementor root to Tint's content width — but ONLY on boxed-content
   pages, detected by the presence of the Services CTA band (.fsh-banner). Those
   pages use `e-con-boxed` sections whose full-bleed backgrounds would otherwise
   strand their centred content (e.g. the CTA button far from the red edge).
   Full-width landing pages are built with `e-con-full` containers and have no
   `.fsh-banner`, so they are left to bleed edge-to-edge as designed.
   (Boxing the band alone doesn't work — Elementor's container CSS out-specifies
   it; boxing the root is what actually contains the red rectangle.) */
body:has(.fsh-banner) .fortified-site-wrap > .elementor {
  max-width: var(--ft-elementor-content-max);
  margin-left: auto;
  margin-right: auto;
}
/* Centre the CTA band so its red rectangle lines up with the sections above. */
body:has(.fsh-banner) .fortified-site-wrap > .elementor > .fsh-banner {
  margin-left: auto;
  margin-right: auto;
}
body {
  font-family: var(--ft-font);
  color: var(--ft-color-ink-soft);
  background: var(--ft-color-cream);
  font-size: var(--ft-font-size-base);
  line-height: var(--ft-line-height-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; }
a:hover { color: var(--ft-color-red); }
img, svg, video { max-width: 100%; height: auto; display: block; }
button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
}

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

/* Accessibility helpers */
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(1px,1px,1px,1px);
  white-space: nowrap;
}
.fortified-skip-link:focus {
  position: static;
  width: auto; height: auto;
  clip: auto;
  background: var(--ft-color-red);
  color: #FFF;
  padding: 8px 16px;
  z-index: var(--ft-z-overlay);
}

/* Primary button (404 CTA and any generic theme button) */
.fortified-button {
  display: inline-block;
  background: var(--ft-color-red);
  color: #FFF;
  padding: 12px 28px;
  border-radius: var(--ft-radius-sm);
  font-weight: 500;
  transition: opacity 0.2s ease;
}
.fortified-button:hover { color: #FFF; opacity: 0.9; }