/* Phase 5+ visual overrides (safe, site-wide) */
:root {
  --csw-bg-opacity: .16;
  --csw-bg-blur: 2px;
  --csw-bg-overlay-top: rgba(6, 14, 28, .78);
  --csw-bg-overlay-bottom: rgba(8, 18, 36, .86);
}

html, body {
  min-height: 100%;
}

body {
  position: relative;
  isolation: isolate;
  background-color: #081427;
}

/* Put the uploaded image BEHIND content, not in the foreground */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image: var(--csw-bg, none);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: var(--csw-bg-opacity);
  filter: blur(var(--csw-bg-blur));
  transform: scale(1.02);
}

/* Dark overlay so text remains readable */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, var(--csw-bg-overlay-top), var(--csw-bg-overlay-bottom));
}

/* Improve readability on glass/transparent sections without fighting your theme */
.hero, .hero-card, .panel, .card, .glass, .surface, .section-card {
  backdrop-filter: saturate(115%) blur(4px);
}

/* Preview banner (blog preview route) */
.phase5-preview-banner {
  margin: .75rem 0 1rem;
  padding: .7rem .9rem;
  border-radius: 10px;
  border: 1px solid rgba(255, 196, 0, .35);
  background: rgba(255, 196, 0, .10);
  color: #f7df9d;
}

/* ===== Phase 5 site-wide background (whole site) ===== */
html, body {
  min-height: 100%;
}

body {
  position: relative;
  background-color: #0a1322 !important;
}

/* Background image layer */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;

  background-image: var(--csw-bg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-attachment: fixed;

  opacity: var(--csw-bg-opacity, 0.30);
}

/* Readability overlay (keeps text readable) */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;

  background: rgba(8, 15, 28, var(--csw-bg-overlay-opacity, 0.20));
}

/* Keep all page content above the background layers */
body > * {
  position: relative;
  z-index: 1;
}


/* ===== Phase 5 hotfix: background starts below navigation ===== */
:root {
  /* Adjust this if your nav/header height changes */
  --csw-nav-offset: 86px;
}

/* Start both background layers below the fixed navigation */
body::before,
body::after {
  top: var(--csw-nav-offset) !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
}

/* Keep the image aligned from the top of the visible area below the nav */
body::before {
  background-position: center top !important;
}

/* Mobile nav is typically a bit shorter */
@media (max-width: 768px) {
  :root {
    --csw-nav-offset: 72px;
  }
}

/* ===== Phase 5 contrast hotfix (WCAG readability override) ===== */
/* This block is intentionally appended last so it overrides earlier theme styles. */
:root {
  --csw-text-main: #f7fbff;
  --csw-text-soft: #d6e2f0;
  --csw-text-muted: #c5d3e4;
  --csw-link: #cfe3ff;
  --csw-link-hover: #ffffff;
  --csw-surface-1: rgba(7, 14, 24, 0.88);
  --csw-surface-2: rgba(10, 19, 34, 0.92);
  --csw-surface-3: rgba(14, 27, 46, 0.94);
  --csw-border-strong: rgba(214, 226, 240, 0.22);
  --csw-nav-solid: rgba(6, 12, 22, 0.97);
  --csw-btn-primary-bg: #1b6fe8;
  --csw-btn-primary-text: #ffffff;
  --csw-btn-primary-border: #3f8cff;
  --csw-btn-secondary-bg: rgba(255,255,255,0.08);
  --csw-btn-secondary-text: #f7fbff;
  --csw-btn-secondary-border: rgba(214, 226, 240, 0.35);
  --csw-btn-ghost-bg: rgba(255,255,255,0.03);
  --csw-btn-ghost-text: #f7fbff;
  --csw-btn-ghost-border: rgba(214, 226, 240, 0.30);

  /* Make the background image visible, but readable */
  --csw-bg-opacity: 0.42;
  --csw-bg-overlay-opacity: 0.46;
}

html, body {
  color: var(--csw-text-main) !important;
  background-color: #09111d !important;
}

body::before {
  opacity: var(--csw-bg-opacity, 0.42) !important;
  filter: saturate(0.92) contrast(1.03) brightness(0.62) !important;
}
body::after {
  background: rgba(7, 12, 20, var(--csw-bg-overlay-opacity, 0.46)) !important;
}

body > * {
  position: relative;
  z-index: 1;
}

header,
.site-header,
.nav,
.navbar,
.top-nav,
.main-nav,
header nav {
  background: var(--csw-nav-solid) !important;
  color: var(--csw-text-main) !important;
  border-bottom: 1px solid var(--csw-border-strong) !important;
  backdrop-filter: blur(8px);
}

header a,
header nav a,
.nav a,
.navbar a,
.main-nav a {
  color: var(--csw-text-main) !important;
  text-shadow: none !important;
}
header a:hover,
header nav a:hover,
.nav a:hover,
.navbar a:hover,
.main-nav a:hover {
  color: #ffffff !important;
}
header a.active,
header nav a.active,
.nav a.active,
.navbar a.active,
.main-nav a.active {
  color: #ffffff !important;
  font-weight: 600;
  text-decoration-thickness: 2px;
}

.brand,
.brand span,
.logo-text,
.site-title,
header .brand span {
  color: #ffffff !important;
}

h1, h2, h3, h4, h5, h6 {
  color: #ffffff !important;
  text-shadow: 0 1px 0 rgba(0,0,0,0.18);
}
p,
li,
label,
span,
.small-muted,
.muted {
  color: var(--csw-text-soft) !important;
}
.small-muted,
.muted,
.eyebrow {
  color: var(--csw-text-muted) !important;
}

a {
  color: var(--csw-link) !important;
}
a:hover,
a:focus-visible {
  color: var(--csw-link-hover) !important;
}
a.small-muted {
  color: var(--csw-text-soft) !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.hero,
.hero * {
  color: var(--csw-text-main) !important;
}
.hero p,
.hero .eyebrow {
  color: var(--csw-text-soft) !important;
}

.card,
.panel,
.tile,
.feature-card,
.service-card,
.project-card,
.review-card,
.pricing-card,
.step-card,
.faq-item,
.case-card,
.blog-card,
.stat-card,
section .card {
  background: var(--csw-surface-1) !important;
  color: var(--csw-text-main) !important;
  border: 1px solid var(--csw-border-strong) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
}

section.section,
.section {
  color: var(--csw-text-main) !important;
}

.category-pill,
.pill,
.tag,
.badge {
  background: rgba(15, 38, 66, 0.85) !important;
  color: #eef6ff !important;
  border: 1px solid rgba(142, 187, 245, 0.32) !important;
}

.icon,
.step-number {
  color: #ffffff !important;
}
.step-number {
  background: rgba(16, 58, 110, 0.90) !important;
  border: 1px solid rgba(132, 180, 245, 0.30) !important;
}

.btn,
button,
input[type='submit'],
input[type='button'] {
  color: var(--csw-btn-secondary-text) !important;
  border-color: var(--csw-btn-secondary-border) !important;
  text-shadow: none !important;
}
.btn-primary,
button.btn-primary {
  background: var(--csw-btn-primary-bg) !important;
  color: var(--csw-btn-primary-text) !important;
  border: 1px solid var(--csw-btn-primary-border) !important;
}
.btn-primary:hover,
button.btn-primary:hover {
  background: #2a7af0 !important;
  color: #ffffff !important;
}
.btn-secondary,
button.btn-secondary {
  background: var(--csw-btn-secondary-bg) !important;
  color: var(--csw-btn-secondary-text) !important;
  border: 1px solid var(--csw-btn-secondary-border) !important;
}
.btn-secondary:hover,
button.btn-secondary:hover {
  background: rgba(255,255,255,0.12) !important;
  color: #ffffff !important;
}
.btn-ghost,
button.btn-ghost {
  background: var(--csw-btn-ghost-bg) !important;
  color: var(--csw-btn-ghost-text) !important;
  border: 1px solid var(--csw-btn-ghost-border) !important;
}
.btn-ghost:hover,
button.btn-ghost:hover {
  background: rgba(255,255,255,0.08) !important;
  color: #ffffff !important;
}

footer,
.site-footer {
  background: var(--csw-surface-2) !important;
  color: var(--csw-text-main) !important;
  border-top: 1px solid var(--csw-border-strong) !important;
}
footer a,
.site-footer a {
  color: #e0eeff !important;
}
footer a:hover,
.site-footer a:hover {
  color: #ffffff !important;
}
footer .small-muted,
footer .muted,
.site-footer .small-muted,
.site-footer .muted {
  color: var(--csw-text-muted) !important;
}
.footer-bottom {
  color: var(--csw-text-soft) !important;
  border-top: 1px solid rgba(214, 226, 240, 0.12);
}

input, textarea, select {
  background: rgba(8, 16, 28, 0.92) !important;
  color: #f7fbff !important;
  border: 1px solid rgba(214, 226, 240, 0.24) !important;
}
input::placeholder,
textarea::placeholder {
  color: #c4d3e2 !important;
  opacity: 1 !important;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid rgba(110, 172, 255, 0.95) !important;
  outline-offset: 2px !important;
}

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

/* ===== Phase 5 accessibility hotfix pack 2 (focus/forced-colors/zoom) ===== */

/* Strong visible keyboard focus across all interactive elements */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
summary:focus,
[role="button"]:focus,
[tabindex]:not([tabindex="-1"]):focus {
  outline: 3px solid #8bc3ff !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 2px rgba(6, 12, 22, 0.95), 0 0 0 5px rgba(139, 195, 255, 0.65) !important;
  text-decoration-thickness: max(2px, .08em);
}

/* Prefer focus-visible when supported (still leave fallback focus above) */
@supports selector(:focus-visible) {
  a:focus:not(:focus-visible),
  button:focus:not(:focus-visible),
  input:focus:not(:focus-visible),
  select:focus:not(:focus-visible),
  textarea:focus:not(:focus-visible),
  summary:focus:not(:focus-visible),
  [role="button"]:focus:not(:focus-visible),
  [tabindex]:not([tabindex="-1"]):focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none !important;
  }

  a:focus-visible,
  button:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible,
  summary:focus-visible,
  [role="button"]:focus-visible,
  [tabindex]:not([tabindex="-1"]):focus-visible {
    outline: 3px solid #8bc3ff !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 0 2px rgba(6, 12, 22, 0.95), 0 0 0 6px rgba(139, 195, 255, 0.65) !important;
    border-radius: 6px;
  }
}

*:focus {
  scroll-margin-top: 120px;
}

/* Use more than colour alone for current/active navigation state */
header a.active,
header nav a.active,
.nav a.active,
.navbar a.active,
.main-nav a.active,
a[aria-current="page"] {
  color: #ffffff !important;
  font-weight: 700 !important;
  text-decoration: underline !important;
  text-underline-offset: 0.22em !important;
  text-decoration-thickness: 2px !important;
}

/* Improve zoom / resize text resilience (200%) */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  line-height: 1.5;
}
img,
svg,
video,
canvas {
  max-width: 100%;
  height: auto;
}
.container,
.grid > *,
.footer-grid > *,
.hero > *,
.hero-content,
.card,
.panel,
.tile {
  min-width: 0;
}
.nav-links,
header nav ul,
.nav ul,
.main-nav ul {
  flex-wrap: wrap;
  row-gap: .45rem;
}
.btn,
button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
  min-height: 2.6rem;
  line-height: 1.2;
  white-space: normal;
}
h1, h2, h3, h4, h5, h6, p, li {
  overflow-wrap: anywhere;
  word-break: normal;
}

/* Windows High Contrast / forced-colors support */
@media (forced-colors: active) {
  body::before,
  body::after {
    content: none !important;
    display: none !important;
  }

  * {
    forced-color-adjust: auto;
  }

  html, body,
  header, footer,
  .card, .panel, .tile, .btn, button, input, select, textarea {
    background: Canvas !important;
    color: CanvasText !important;
    border-color: ButtonText !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  a {
    color: LinkText !important;
    text-decoration: underline !important;
  }

  a:focus,
  a:focus-visible,
  button:focus,
  button:focus-visible,
  input:focus,
  input:focus-visible,
  select:focus,
  select:focus-visible,
  textarea:focus,
  textarea:focus-visible,
  [tabindex]:not([tabindex="-1"]):focus,
  [tabindex]:not([tabindex="-1"]):focus-visible {
    outline: 2px solid Highlight !important;
    outline-offset: 2px !important;
    box-shadow: none !important;
  }

  .btn-primary,
  .btn-secondary,
  .btn-ghost {
    background: ButtonFace !important;
    color: ButtonText !important;
    border: 1px solid ButtonText !important;
  }
}