/**
 * DEFCON Level, Core Foundation
 * Resets, body styling, images, links, global typography,
 * layout containers, and width settings.
 *
 * Design tokens and variables live in the engine theme:
 *   engine/themes/defcon/theme.css
 *
 * This file provides structural styling that uses those tokens.
 * Load order: base theme → defcon theme → this file → other site CSS.
 * Managed by config/site.php → site_css array.
 */

/* ================================================================
   SITE-LEVEL VARIABLE OVERRIDES
   Override engine/theme defaults for this site's layout.
   Old site uses 900px content width (960px homepage).
   ================================================================ */
:root {
  --content-width: 940px;
  --space-xl: 1.5rem;
}

/* ================================================================
   RESET & BASE
   ================================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* Dark background on html prevents white scrollbar gutter on dark themes */
  background-color: var(--bg-primary);
  /* Ensure scrolling works on all devices */
  height: auto;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: stable;
  /* Fix for mobile browsers - ensure page starts at top */
  position: relative;
  width: 100%;
}

html,
body {
  /* Critical for mobile scrolling */
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y pan-x;
  /* Prevent mobile browsers from starting scrolled down */
  margin: 0;
  padding: 0;
}

/* ================================================================
   GLOBAL IMAGE OPTIMIZATION - Fix fuzzy/blurry images
   ================================================================ */
img {
  max-width: 100%;
  height: auto;
  display: block;
  /* High quality image rendering for photos */
  image-rendering: auto;
  /* Prevent subpixel rendering issues */
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* Crisp icons and logos - prevent blurry/distorted scaling */
/* Apply to all command logos, badges, icons, and symbols */
img[src*="command"],
img[src*="defcon-"],
img[src*="alert"],
img[src*="combatant"],
.regional-alert-img,
.command-symbol img,
.alert-badge img,
.alert-press-logo-img,
.command-card-logo,
.command-logo-raised,
.command-logo-large,
.command-preview-logo,
.command-symbol img,
.byline-avatar img,
.blip-command-logo,
.current-badge-img,
.level-badge-img,
.home-level-image,
.hero-badge-img {
  /* Cross-browser crisp rendering for logos/icons */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
  /* Preserve aspect ratio */
  object-fit: contain;
  object-position: center;
  /* Force GPU rendering for crisp edges */
  will-change: auto;
  backface-visibility: hidden;
  transform: translateZ(0);
  /* Note: max-width/max-height are set per-class below, not here */
}

body {
  font-family: var(--font-primary);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--text-primary);
  /* FIXED: Removed 'fixed' - causes blank pages on mobile browsers */
  /* Mobile browsers don't support background-attachment: fixed properly */
  background-color: var(--bg-primary);
  /* Fallback if image fails */
  background-image: url('/images/background.webp');
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  background-attachment: scroll;
  /* Explicitly set to scroll for mobile compatibility */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Modern viewport units with fallbacks for all browsers */
  min-height: 100vh;
  min-height: 100dvh;
  /* Dynamic viewport height - handles mobile browser chrome */
  min-height: -webkit-fill-available;
  /* iOS Safari legacy fix */
  /* Critical for mobile scrolling */
  height: auto;
  overflow-x: hidden;
  overflow-y: visible;
  /* Allow vertical scrolling */
  position: relative;
  width: 100%;
  /* MOBILE SAFETY: Ensure content is always visible */
  display: block;
  visibility: visible;
  opacity: 1;
}

/* Desktop: Enable fixed background only on devices that support it */
@media (min-width: 769px) and (hover: hover) {
  body {
    background-attachment: fixed;
  }
}

/* Fallback for browsers that don't support webp */
@supports not (background-image: url('/images/background.webp')) {
  body {
    background-color: var(--bg-primary);
  }
}

/* Flat DOM fix: .section__inner--content needs centering.
   Engine theme puts margin:0 auto on .section__inner only,
   but flat DOM uses --content without the base class. */
.section__inner--content {
  margin: 0 auto;
}

/* Override base theme opaque section backgrounds so body background shows through */
.section {
  background: transparent;
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.section:nth-child(even) {
  background: transparent;
}

a {
  color: var(--accent-primary, #0ea5e9);
  text-decoration: none;
  transition: color var(--transition), border-color var(--transition);
  font-weight: 500;
}

/* Underline-on-hover for text links only — card-style <a> elements manage their own borders */
a:not([class]) {
  border-bottom: 1px solid transparent;
}


a:hover {
  color: var(--accent-hover, #00b8e0);
  border-bottom-color: var(--accent-hover, #00b8e0);
}

a:visited {
  color: var(--accent-primary);
}

/* Ensure all links in admin forms have proper styling */
.admin-content a.btn,
.admin-content a.btn-outline,
form a.btn,
form a.btn-outline {
  color: var(--accent-primary);
  text-decoration: none;
}

.admin-content a.btn:visited,
.admin-content a.btn-outline:visited,
form a.btn:visited,
form a.btn-outline:visited {
  color: var(--accent-primary);
}

.admin-content a.btn:hover,
.admin-content a.btn-outline:hover,
form a.btn:hover,
form a.btn-outline:hover {
  color: var(--accent-hover);
  text-decoration: underline;
}

a:active {
  color: var(--accent-primary);
  opacity: 0.8;
}

/* Focus ring glow, Cyan ring on form inputs (matches old site) */
input:focus,
textarea:focus,
select:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15);
  border-color: var(--accent-primary);
}

/* Links inside interactive elements should not have the underline-style bottom border
   from the global 'a' rule. Buttons manage their own borders via components.css
   and typography-polish.css, do NOT set border-bottom:none here (kills all 4 sides). */
.btn a,
.badge a,
a.badge,
a.alert-card,
a.command-card {
  border-bottom: none;
}

/* ================================================================
   TYPOGRAPHY
   ================================================================ */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 700;
  line-height: 1.3;
  margin-top: 2rem;
  margin-bottom: 1rem;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

h1 {
  font-size: var(--text-3xl);
  margin-top: 2.5rem;
  margin-bottom: 1.25rem;
  line-height: 1.2;
}

/* Page header h1 is always the first visible element after breadcrumbs,
   strip top margin so it sits tight against the section padding */
.page-header h1,
.content-block__text > h1:first-child,
.content-block__text > header:first-child h1,
.entry-content > h1:first-child,
.entry-content > header:first-child h1 {
  margin-top: 0;
}

h2 {
  font-size: var(--text-2xl);
  margin-top: 2.25rem;
  margin-bottom: 1rem;
  line-height: 1.25;
}

h3 {
  font-size: var(--text-xl);
  margin-top: 2rem;
  margin-bottom: 0.875rem;
  line-height: 1.3;
}

h4 {
  font-size: var(--text-lg);
  margin-top: 1.75rem;
  margin-bottom: 0.75rem;
  line-height: 1.35;
}

h5 {
  font-size: 1.125rem;
  margin-top: 1.5rem;
  margin-bottom: 0.625rem;
  line-height: 1.4;
}

h6 {
  font-size: 1rem;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
  line-height: 1.4;
  font-weight: 600;
}

p {
  margin-bottom: var(--space-4);
}

/* Global list styling - Professional formatting */
ul,
ol {
  margin: 1.5rem 0;
  padding-left: 2rem;
  line-height: 1.8;
}

ul {
  list-style-type: disc;
  list-style-position: outside;
}

ol {
  list-style-type: decimal;
  list-style-position: outside;
}

/* Nested lists */
ul ul,
ol ol,
ul ol,
ol ul {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  padding-left: 2rem;
}

ul ul {
  list-style-type: circle;
}

ul ul ul {
  list-style-type: square;
}

li {
  margin-bottom: 0.75rem;
  padding-left: 0.5rem;
  line-height: 1.8;
}

li:last-child {
  margin-bottom: 0;
}

/* Lists after headers */
h1+ul,
h1+ol,
h2+ul,
h2+ol,
h3+ul,
h3+ol {
  margin-top: 1rem;
}

/* Paragraphs after headers */
h1+p,
h2+p,
h3+p {
  margin-top: 0.75rem;
}

.lead {
  font-size: 1.25rem;
  color: var(--text-secondary);
  line-height: 1.75;
  font-weight: 400;
  margin-bottom: var(--space-5);
}

/* ================================================================
   LAYOUT
   ================================================================ */

/* Main content wrapper - ensures scroll works on mobile */
main,
#main-content,
.main-content {
  display: block;
  width: 100%;
  min-height: auto;
  overflow: visible;
  -webkit-overflow-scrolling: touch;
  /* Ensure main content is visible and flows naturally */
  flex: 1 0 auto;
  /* Grow to fill available space in flex containers */
}

/* Main Content - MOBILE SAFETY */
main {
  display: block;
  visibility: visible;
  opacity: 1;
  position: relative;
  z-index: 1;
  min-height: 50vh;
  /* Ensure content area has minimum height */
}

.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--space-4);
  /* MOBILE SAFETY: Ensure container is always visible */
  display: block;
  visibility: visible;
}

@media (min-width: 768px) {
  .container {
    padding: 0 var(--space-6);
  }

  .missile-list li {
    padding: var(--space-5) var(--space-6);
    min-height: 60px;
    font-size: var(--text-xl);
    gap: var(--space-5);
  }

  .missile-list li::before {
    width: 44px;
    height: 44px;
    min-width: 44px;
    font-size: var(--text-base);
  }
}

/* Alert body text - constrained width with readable typography */
.alert-content {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  font-size: var(--text-base);
  line-height: 1.7;
}

/* ================================================================
   JOURNEY / MEDIAVINE AD SPACING
   Tighten margins around Journey-injected ad containers so ads
   sit snugly between content sections without large gaps.
   ================================================================ */
.mv-ad-target {
  margin: 0;
  padding: 0;
}
/* Ad anchors inside any CSS grid must span full width (harmless on non-grid) */
.mv-ad-target,
div[data-google-query-id],
div[id^="av-"],
.adthrive-ad {
  grid-column: 1 / -1;
}
/* Ad spacing, ONLY adjust OUR content margins around ads.
   Never modify Journey/Mediavine ad wrappers or their children
   to avoid TOS violations. We only control our own elements. */

/* Our ad anchor divs, minimal footprint */
.mv-ad-target {
  margin: 0.25rem 0 !important;
}

/* S849 AD CENTERING: center Mediavine-injected ads horizontally within the
   ad slot container. Without this, a 300x250 square in a 1100px section
   break sits left-aligned with ~800px of empty space on the right, looking
   isolated and disruptive. With flex centering, smaller-format ads land
   in the middle of the available space and look intentional regardless of
   which format wins the Journey auction.
   IMPORTANT: this does NOT force banner format - all formats still compete
   in the Mediavine auction (300x250 has the highest DSP demand and should
   stay available). Centering is a pure aesthetic fix with zero impact on
   ad selection or revenue. Workbench-verified 2026-05-22. */
.mv-ad-target {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 2026-05-26 REVERTED, do not reintroduce: a rule that did
   `.mv-ad-target:empty { display: none }` was pulled because it broke
   Mediavine lazy-loading. Mediavine uses IntersectionObserver, which
   requires the slot to have a non-zero layout box to ever fire. With
   display:none on the pre-fill empty slot, the observer never sees the
   slot enter the viewport → ad never injects → lost revenue. */

/* 2026-05-27 (S859 final): cosmetic fix for the empty-ad-slot blank box.
   Sets a dark background on OUR wrapper div so pre-paint / no-fill /
   ad-blocker slots blend with the page instead of showing as stark
   blank rectangles. No label, no border-radius gymnastics, no iframe
   touching, no overflow clipping. The engine's ad-management plugin
   handles ad labels via the admin "Show Ad Label" toggle in
   /admin/site-settings; CSS does not get a say in labeling.

   User direction 2026-05-27: "Advertisement labels are off in admin
   panel so why are they even showing"; the ::before content rule
   previously here was rendering labels regardless of the admin
   setting. Removed. */
.mv-ad-target {
  background: var(--bg-secondary, #12121a);
  border-radius: 8px;
}
/* Exception: defcon-watch in-card slots sit inside narrow .watch-card /
   .watch-content wrappers where the default block layout fits the column
   width. Restore default for those. */
.watch-card .mv-ad-target,
.watch-content .mv-ad-target {
  display: block;
}

/* ================================================================
   CANONICAL COMPONENT STYLES, site-wide standard
   Current-level page is the reference. All pages must match.
   ================================================================ */

/* Section heading with blue accent underline */
.content-section h2,
.home-section h2 {
  font-size: var(--text-2xl);
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 1.25rem;
  color: var(--text-primary);
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--accent-primary);
  display: inline-block;
}

/* Standard card component */
.content-section,
.home-section {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  padding-top: 1rem;
}

/* Body text inside content sections */
.content-section p,
.home-section p {
  font-size: var(--text-base);
  line-height: 1.7;
  margin-bottom: 1.25rem;
  color: var(--text-secondary);
}

.content-section p:last-child,
.home-section p:last-child {
  margin-bottom: 0;
}

/* ================================================================
   ANCHOR-AS-CARD SAFETY (S859 2026-05-26)
   Any <a> used as a card wrapper MUST flex-stack its children. Without
   this, the anchor defaults to display:inline, and when the parent
   container becomes display:flex at narrow widths (ads-mobile.css does
   this for [class*="-grid"]), the anchor's h3/p/span children render
   as side-by-side flex items with overlapping text instead of stacking.
   Project rule: PROJECT-RULES.md "Pattern-Match Is Necessary, Not
   Sufficient". This is the L2 safety net.
   ================================================================ */
a.explore-card,
a.explore-card-primary,
a.understand-card,
a.quick-link-card,
a.command-card,
a.feature-card,
a.top-page-card,
a.related-tools-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-decoration: none;
  color: inherit;
}

/* Card elements (info boxes, explore cards) */
.site-card,
.explore-card,
.understand-card {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: var(--space-5);
}

/* Pull our content-section closer when it follows an ad.
   These selectors target OUR sections, not Journey's elements. */
div[data-google-query-id] + .content-section,
div[id^="av-"] + .content-section,
div[id^="adthrive"] + .content-section,
.adthrive-ad + .content-section,
.mv-ad-box + .content-section,
.mv-ad-target + .content-section,
.mv-ad-target + div + .content-section,
.content-section + div:not(.content-section) + .content-section {
  margin-top: 0.25rem !important;
}
/* Catch Journey wrappers inserted after our mv-ad-target */
.mv-ad-target ~ .content-section {
  margin-top: 0.25rem !important;
}
/* Same for watch sections */
div[data-google-query-id] + .defcon-watch-section,
div[id^="av-"] + .defcon-watch-section,
.mv-ad-target + .defcon-watch-section {
  margin-top: 0.5rem !important;
}