/* Pthx Tactical Monolith — Custom CSS (supplements Tailwind CDN) */

/* =============================================
   COLOR SYSTEM: CSS Custom Properties
   Tailwind config references these via var()
   so ALL utility classes auto-update on theme switch
   ============================================= */

:root,
[data-theme="dark"] {
  /* Core surfaces */
  --color-surface: 13 15 14;               /* #0d0f0e */
  --color-surface-dim: 13 15 14;            /* #0d0f0e */
  --color-surface-bright: 41 45 43;         /* #292d2b */
  --color-surface-container-lowest: 0 0 0;  /* #000000 */
  --color-surface-container-low: 17 20 19;  /* #111413 */
  --color-surface-container: 23 26 25;      /* #171a19 */
  --color-surface-container-high: 29 32 31; /* #1d201f */
  --color-surface-container-highest: 34 39 37; /* #222725 */
  --color-surface-variant: 34 39 37;        /* #222725 */
  --color-background: 13 15 14;             /* #0d0f0e */

  /* Primary */
  --color-primary: 183 203 196;             /* #b7cbc4 */
  --color-primary-dim: 169 189 182;         /* #a9bdb6 */
  --color-primary-container: 68 86 81;      /* #445651 */
  --color-primary-fixed: 211 231 224;       /* #d3e7e0 */
  --color-primary-fixed-dim: 197 217 210;   /* #c5d9d2 */
  --color-on-primary: 50 68 63;             /* #32443f */
  --color-on-primary-container: 211 232 225;/* #d3e8e1 */
  --color-on-primary-fixed: 49 67 62;       /* #31433e */
  --color-on-primary-fixed-variant: 77 95 90;/* #4d5f5a */
  --color-inverse-primary: 80 99 93;        /* #50635d */

  /* Secondary */
  --color-secondary: 187 202 197;           /* #bbcac5 */
  --color-secondary-dim: 173 188 183;       /* #adbcb7 */
  --color-secondary-container: 49 62 59;    /* #313e3b */
  --color-secondary-fixed: 215 230 225;     /* #d7e6e1 */
  --color-secondary-fixed-dim: 201 216 211; /* #c9d8d3 */
  --color-on-secondary: 54 67 64;           /* #364340 */
  --color-on-secondary-container: 180 194 190;/* #b4c2be */
  --color-on-secondary-fixed: 53 66 63;     /* #35423f */
  --color-on-secondary-fixed-variant: 81 94 91;/* #515e5b */

  /* Tertiary */
  --color-tertiary: 239 252 249;            /* #effcf9 */
  --color-tertiary-dim: 216 229 226;        /* #d8e5e2 */
  --color-tertiary-container: 225 238 234;  /* #e1eeea */
  --color-tertiary-fixed: 230 244 240;      /* #e6f4f0 */
  --color-tertiary-fixed-dim: 216 229 226;  /* #d8e5e2 */
  --color-on-tertiary: 85 98 95;            /* #55625f */
  --color-on-tertiary-container: 77 89 87;  /* #4d5957 */
  --color-on-tertiary-fixed: 62 74 72;      /* #3e4a48 */
  --color-on-tertiary-fixed-variant: 90 103 100;/* #5a6764 */

  /* Error */
  --color-error: 250 116 111;              /* #fa746f */
  --color-error-dim: 197 77 74;            /* #c54d4a */
  --color-error-container: 135 31 33;      /* #871f21 */
  --color-on-error: 73 0 6;               /* #490006 */
  --color-on-error-container: 255 153 147; /* #ff9993 */

  /* Text on surfaces */
  --color-on-surface: 227 230 227;          /* #e3e6e3 */
  --color-on-surface-variant: 168 172 169;  /* #a8aca9 */
  --color-on-background: 227 230 227;       /* #e3e6e3 */

  /* Outlines */
  --color-outline: 114 118 116;             /* #727674 */
  --color-outline-variant: 69 73 71;        /* #454947 */

  /* Inverse */
  --color-inverse-surface: 249 249 247;     /* #f9f9f7 */
  --color-inverse-on-surface: 84 85 84;     /* #545554 */

  /* Surface tint */
  --color-surface-tint: 183 203 196;        /* #b7cbc4 */

  /* Nav/footer specific */
  --color-nav-bg: 13 15 14;                /* #0d0f0e */
  --color-nav-text: 183 203 196;           /* #b7cbc4 */
  --color-nav-accent: 52 70 65;            /* #344641 */
  --color-footer-bg: 13 15 14;            /* #0d0f0e */
}

[data-theme="light"] {
  /* Core surfaces */
  --color-surface: 247 250 249;            /* #f7faf9 */
  --color-surface-dim: 215 219 218;         /* #d7dbda */
  --color-surface-bright: 247 250 249;      /* #f7faf9 */
  --color-surface-container-lowest: 255 255 255; /* #ffffff */
  --color-surface-container-low: 241 244 243;    /* #f1f4f3 */
  --color-surface-container: 235 238 237;        /* #ebeeed */
  --color-surface-container-high: 230 233 232;   /* #e6e9e8 */
  --color-surface-container-highest: 224 227 226;/* #e0e3e2 */
  --color-surface-variant: 224 227 226;          /* #e0e3e2 */
  --color-background: 247 250 249;               /* #f7faf9 */

  /* Primary */
  --color-primary: 30 48 43;               /* #1e302b */
  --color-primary-dim: 30 48 43;            /* same */
  --color-primary-container: 52 70 65;      /* #344641 */
  --color-primary-fixed: 211 231 224;       /* #d3e7e0 */
  --color-primary-fixed-dim: 183 203 196;   /* #b7cbc4 */
  --color-on-primary: 255 255 255;          /* #ffffff */
  --color-on-primary-container: 159 179 173;/* #9fb3ad */
  --color-on-primary-fixed: 13 31 27;       /* #0d1f1b */
  --color-on-primary-fixed-variant: 56 74 69;/* #384a45 */
  --color-inverse-primary: 183 203 196;     /* #b7cbc4 */

  /* Secondary */
  --color-secondary: 83 97 93;             /* #53615d */
  --color-secondary-dim: 83 97 93;          /* same */
  --color-secondary-container: 214 230 224; /* #d6e6e0 */
  --color-secondary-fixed: 214 230 224;     /* #d6e6e0 */
  --color-secondary-fixed-dim: 186 202 196; /* #bacac4 */
  --color-on-secondary: 255 255 255;        /* #ffffff */
  --color-on-secondary-container: 89 103 99;/* #596763 */
  --color-on-secondary-fixed: 16 30 27;     /* #101e1b */
  --color-on-secondary-fixed-variant: 59 74 69;/* #3b4a45 */

  /* Tertiary */
  --color-tertiary: 36 47 44;              /* #242f2c */
  --color-tertiary-dim: 36 47 44;           /* same */
  --color-tertiary-container: 57 69 65;     /* #394541 */
  --color-tertiary-fixed: 217 229 224;      /* #d9e5e0 */
  --color-tertiary-fixed-dim: 189 201 196;  /* #bdc9c4 */
  --color-on-tertiary: 255 255 255;         /* #ffffff */
  --color-on-tertiary-container: 166 178 173;/* #a6b2ad */
  --color-on-tertiary-fixed: 19 30 27;      /* #131e1b */
  --color-on-tertiary-fixed-variant: 62 73 70;/* #3e4946 */

  /* Error */
  --color-error: 186 26 26;               /* #ba1a1a */
  --color-error-dim: 186 26 26;            /* same */
  --color-error-container: 255 218 214;    /* #ffdad6 */
  --color-on-error: 255 255 255;           /* #ffffff */
  --color-on-error-container: 147 0 10;    /* #93000a */

  /* Text on surfaces */
  --color-on-surface: 24 28 28;            /* #181c1c */
  --color-on-surface-variant: 66 72 70;    /* #424846 */
  --color-on-background: 24 28 28;         /* #181c1c */

  /* Outlines */
  --color-outline: 114 120 118;            /* #727876 */
  --color-outline-variant: 194 200 197;    /* #c2c8c5 */

  /* Inverse */
  --color-inverse-surface: 45 49 49;       /* #2d3131 */
  --color-inverse-on-surface: 238 241 240; /* #eef1f0 */

  /* Surface tint */
  --color-surface-tint: 80 98 93;          /* #50625d */

  /* Nav/footer specific */
  --color-nav-bg: 247 250 249;            /* #f7faf9 */
  --color-nav-text: 30 48 43;             /* #1e302b */
  --color-nav-accent: 52 70 65;           /* #344641 */
  --color-footer-bg: 247 250 249;         /* #f7faf9 */
}

/* =============================================
   Material Symbols
   ============================================= */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

/* =============================================
   Tactical background patterns
   ============================================= */
.monolith-grid {
  background-image:
    linear-gradient(to right, rgb(var(--color-nav-accent) / 0.1) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(var(--color-nav-accent) / 0.1) 1px, transparent 1px);
  background-size: 40px 40px;
}

[data-theme="dark"] .monolith-grid {
  background-image:
    linear-gradient(to right, rgb(var(--color-nav-accent) / 0.7) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(var(--color-nav-accent) / 0.7) 1px, transparent 1px);
}

/* Service cards with background images */
.service-card {
  background-color: rgb(var(--color-surface-container));
  border: 1px solid rgb(var(--color-outline-variant) / 0.15);
}
.service-card:hover {
  border-color: rgb(var(--color-outline-variant) / 0.3);
}

.tactical-grid {
  background-image: radial-gradient(circle at 2px 2px, rgb(var(--color-primary) / 0.05) 1px, transparent 0);
  background-size: 40px 40px;
}

.technical-grid {
  background-image: radial-gradient(circle, rgb(var(--color-nav-accent) / 0.15) 1px, transparent 1px);
  background-size: 40px 40px;
}

.tactical-line {
  position: absolute;
  background: linear-gradient(90deg, transparent, rgb(var(--color-nav-accent)), transparent);
  opacity: 0.5;
  pointer-events: none;
}

/* Diagonal scanner animation */
.diagonal-scan {
  position: absolute;
  width: 200%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgb(var(--color-primary)), transparent);
  transform: rotate(-45deg);
  animation: scan 8s linear infinite;
  opacity: 0.1;
}

@keyframes scan {
  0% { transform: translate(-50%, -50%) rotate(-45deg); }
  100% { transform: translate(50%, 50%) rotate(-45deg); }
}

/* Pulse core animation */
.pulse-core {
  animation: core-pulse 4s ease-in-out infinite;
}

@keyframes core-pulse {
  0%, 100% { opacity: 0.1; transform: scale(1); }
  50% { opacity: 0.25; transform: scale(1.05); }
}

/* Glitch line */
.glitch-line {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgb(var(--color-primary)), transparent);
  width: 100%;
  opacity: 0.3;
}

/* Network mesh canvas wrapper (services hero) */
.mesh-wrap {
  z-index: 0;
}
.mesh-wrap canvas {
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: auto;
}

/* Red Team typewriter */
.tw-line {
  opacity: 0;
  transform: translateY(0);
  white-space: nowrap;
}
.tw-cursor {
  display: inline;
  animation: tw-blink 0.6s step-end infinite;
  color: rgb(var(--color-primary));
}
@keyframes tw-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* Union Jack canvas wrapper */
.uj-canvas-wrap {
  pointer-events: none;
  z-index: 0;
}
.uj-canvas-wrap canvas {
  width: 100%;
  height: 100%;
  display: block;
}

/* ── Attack ticker (blog hero) ── */
.ticker-container {
  position: relative;
}
.ticker-row {
  height: 40px;
  line-height: 40px;
  white-space: nowrap;
  font-family: 'Space Grotesk', monospace;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgb(var(--color-on-surface-variant));
  display: flex;
  gap: 8px;
  align-items: center;
}
.ticker-year {
  color: rgb(var(--color-primary));
  font-weight: 700;
  min-width: 3.2em;
}
.ticker-sep {
  opacity: 0.25;
}
.ticker-org {
  color: rgb(var(--color-on-surface));
  font-weight: 500;
}
.ticker-cost {
  color: rgb(var(--color-error, var(--color-primary)));
  font-weight: 700;
  opacity: 0.8;
}

/* Glitch effects */
.ticker-glitch {
  animation: ticker-glitch-flash 0.15s steps(1) infinite;
}
.ticker-glitch.glitch-shift-r {
  text-shadow: 2px 0 rgb(var(--color-error, 200 60 60) / 0.7), -1px 0 transparent;
}
.ticker-glitch.glitch-shift-g {
  text-shadow: -2px 0 rgb(var(--color-primary) / 0.6), 1px 0 transparent;
}
.ticker-glitch.glitch-shift-b {
  text-shadow: 0 2px rgba(80, 140, 240, 0.5), 0 -1px transparent;
}
.ticker-glitch.glitch-skew {
  transform: skewX(-3deg);
  filter: brightness(1.4);
}
.ticker-glitch.glitch-clip {
  clip-path: inset(0 0 40% 0);
  filter: hue-rotate(40deg) brightness(1.3);
}
@keyframes ticker-glitch-flash {
  0%, 100% { opacity: 1; }
  25% { opacity: 0.7; }
  50% { opacity: 1; filter: brightness(1.5); }
  75% { opacity: 0.85; }
}

/* Tactical map container */
#tactical-map {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
#tactical-map canvas {
  opacity: 0.85;
}

/* Glass panel */
.glass-panel {
  background: rgb(var(--color-surface) / 0.7);
  backdrop-filter: blur(24px);
}

.glass {
  background: rgb(var(--color-surface) / 0.7);
  backdrop-filter: blur(24px);
}

/* Mono label utility */
.mono-label {
  font-family: 'Space Grotesk', monospace;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* Custom scrollbar */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: rgb(var(--color-surface)); }
::-webkit-scrollbar-thumb { background: rgb(var(--color-nav-accent)); }

/* =============================================
   Blog post content prose styling
   Uses CSS vars so it auto-switches with theme
   ============================================= */
.post-content h2 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.875rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  border-left: 4px solid rgb(var(--color-primary));
  padding-left: 1.5rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  margin-top: 3rem;
  margin-bottom: 1.5rem;
  color: rgb(var(--color-on-surface));
}

.post-content h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin-top: 2rem;
  margin-bottom: 1rem;
  color: rgb(var(--color-on-surface));
}

.post-content p {
  color: rgb(var(--color-on-surface-variant));
  line-height: 1.8;
  margin-bottom: 1.5rem;
}

.post-content a {
  color: rgb(var(--color-primary));
  text-decoration: underline;
  text-underline-offset: 2px;
}

.post-content a:hover {
  opacity: 0.8;
}

.post-content ul, .post-content ol {
  color: rgb(var(--color-on-surface-variant));
  padding-left: 1.5rem;
  margin-bottom: 1.5rem;
}

.post-content ul { list-style-type: disc; }
.post-content ol { list-style-type: decimal; }

.post-content li {
  margin-bottom: 0.5rem;
  line-height: 1.7;
}

.post-content blockquote {
  border-left: 2px solid rgb(var(--color-primary));
  padding-left: 1.5rem;
  margin: 2rem 0;
  color: rgb(var(--color-on-surface-variant));
  font-style: italic;
}

.post-content code {
  font-family: 'Space Grotesk', monospace;
  font-size: 0.85em;
  background: rgb(var(--color-surface-container));
  padding: 0.15em 0.4em;
  border-radius: 0.125rem;
  color: rgb(var(--color-primary));
}

.post-content pre {
  background: rgb(var(--color-surface-container-lowest));
  border: 1px solid rgb(var(--color-outline-variant));
  border-radius: 0.125rem;
  padding: 1.5rem;
  overflow-x: auto;
  margin: 2rem 0;
}

.post-content pre code {
  background: transparent;
  padding: 0;
  font-size: 0.75rem;
  line-height: 1.6;
  color: rgb(var(--color-primary));
}

.post-content img {
  max-width: 100%;
  height: auto;
  margin: 2rem 0;
  opacity: 0.8;
}

.post-content strong {
  color: rgb(var(--color-on-surface));
  font-weight: 600;
}

.post-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5em 0;
  font-size: 0.9em;
}

.post-content thead th {
  text-align: left;
  padding: 0.75em 1em;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.75em;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgb(var(--color-on-surface-variant));
  border-bottom: 1px solid rgb(var(--color-outline-variant));
}

.post-content tbody td {
  padding: 0.75em 1em;
  color: rgb(var(--color-on-surface) / 0.85);
}

/* =============================================
   Nav dropdown (Services submenu)
   ============================================= */
.nav-dropdown {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-50%) translateY(4px);
  transition: opacity 200ms ease, visibility 200ms ease, transform 200ms ease;
  transition-delay: 300ms;
}
.nav-dropdown-wrap:hover .nav-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition-delay: 0ms;
}

/* =============================================
   FAQ Accordion (details/summary)
   ============================================= */
.faq-item {
  border: 1px solid rgb(var(--color-outline-variant) / 0.15);
  background: rgb(var(--color-surface-container));
}

.faq-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 1.5rem;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  color: rgb(var(--color-on-surface));
  list-style: none;
  user-select: none;
  transition: background 0.2s ease;
}

.faq-summary::-webkit-details-marker {
  display: none;
}

.faq-summary::marker {
  content: "";
}

.faq-summary:hover {
  background: rgb(var(--color-surface-container-high));
}

.faq-item[open] .faq-summary {
  border-bottom: 1px solid rgb(var(--color-outline-variant) / 0.1);
}

.faq-answer {
  padding: 1rem 1.5rem 1.25rem;
}

.faq-answer p {
  color: rgb(var(--color-on-surface-variant));
  line-height: 1.75;
  font-size: 0.9rem;
}