/* =====================================================================
   ShowMyIP.me — Shared Site Layer
   Unified design system + dark-mode support + themed components.
   Loaded by every page AFTER main.css so it can normalise the legacy
   FlexStart template and make all custom components theme-aware.
   ===================================================================== */

:root {
  --font-mono: 'IBM Plex Mono', monospace;
  --success: #0f7c55;
  --warning: #b36800;
  --danger: #c0392b;
}

body { font-family: 'DM Sans', sans-serif; }

.header .sitename,
.header .logo .sitename {
  font-family: var(--font-mono);
  font-weight: 600;
  letter-spacing: -0.02em;
  font-size: 1.6rem;
}
.font-mono { font-family: var(--font-mono); }

/* ---------- Shared design-system components (from home page) ---------- */
.section-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.8rem; font-weight: 600;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--bs-primary); margin-bottom: 6px;
}
.section-title { font-weight: 700; }
.info-section {
  margin-bottom: 24px; padding: 20px;
  background-color: var(--bs-tertiary-bg);
  border-radius: 12px; border: 1px solid var(--bs-border-color);
}
.lookup-section {
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: 12px; padding: 25px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

/* Push article content below the fixed header */
.main-content,
.main-content-section { padding-top: 100px; }
.main-content { margin-top: 0; }

/* ---------- Long-form article typography ---------- */
.article-body p { line-height: 1.75; margin-bottom: 1rem; }
.article-body h2 { margin-top: 2.25rem; margin-bottom: 1rem; font-weight: 600; }
.article-body ul, .article-body ol { padding-left: 1.75rem; }
.article-body li { margin-bottom: 0.5rem; line-height: 1.7; }

/* Soft section backgrounds, theme-aware (replaces hard-coded #f8f9fa) */
.privacy-security-section,
.soft-section { background-color: var(--bs-tertiary-bg); }
.privacy-security-title { font-size: 2rem; font-weight: 600; margin-bottom: 1.5rem; }

/* ---------- Q&A accordion (safety_qa) ---------- */
.qa-details-accordion .qa-item {
  background-color: var(--bs-body-bg);
  margin-bottom: 1rem;
  border: 1px solid var(--bs-border-color);
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  overflow: hidden;
}
.qa-details-accordion .qa-question {
  padding: 1.2rem 1.5rem; font-size: 1.2rem; font-weight: 600;
  cursor: pointer; list-style: none;
  color: var(--bs-emphasis-color);
  background-color: var(--bs-tertiary-bg);
  display: flex; justify-content: space-between; align-items: center;
}
.qa-details-accordion .qa-item[open] .qa-question {
  border-bottom: 1px solid var(--bs-border-color);
}
.qa-details-accordion .qa-question::-webkit-details-marker,
.qa-details-accordion .qa-question::marker { display: none; }
.qa-details-accordion .qa-marker {
  font-size: 1.1rem; font-weight: bold;
  color: var(--bs-primary); font-family: var(--font-mono);
}
.qa-details-accordion .qa-answer { padding: 1.5rem; line-height: 1.7; }
.qa-details-accordion .qa-answer p { margin-bottom: 1rem; }
.qa-details-accordion .qa-answer ul,
.qa-details-accordion .qa-answer ol { margin: 1rem 0; padding-left: 1.5rem; }
.qa-details-accordion .qa-answer li { margin-bottom: 0.75rem; }
.qa-details-accordion .qa-answer a {
  font-weight: 500; text-decoration: underline; color: var(--bs-primary);
}

/* ---------- Seniors checklist ---------- */
.checklist-category h3 {
  color: var(--bs-emphasis-color); font-weight: 600;
  margin-top: 40px; margin-bottom: 25px; padding-bottom: 10px;
  border-bottom: 2px solid var(--bs-primary);
  display: inline-block; font-size: 1.4em;
}
.checklist-category:first-of-type h3 { margin-top: 20px; }
.checklist-category h3 i { margin-right: 10px; color: var(--bs-primary); }
.safety-checklist { list-style: none; padding-left: 0; }
.safety-checklist li {
  position: relative; padding: 12px 10px 12px 45px; margin-bottom: 15px;
  font-size: 1.05em; line-height: 1.7;
  background-color: var(--bs-body-bg);
  border-radius: 8px; border: 1px solid var(--bs-border-color);
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  transition: all 0.3s ease; text-align: left;
}
.safety-checklist li:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.08); }
.safety-checklist li i.checklist-icon {
  position: absolute; left: 15px; top: 15px;
  font-size: 1.4em; color: var(--bs-primary); opacity: 0.85;
}
.safety-checklist li strong { font-weight: 600; color: var(--bs-emphasis-color); }
.conclusion-box {
  background-color: var(--bs-tertiary-bg);
  border-left: 5px solid var(--bs-primary);
  padding: 25px; margin-top: 50px; border-radius: 8px; text-align: left;
}
.conclusion-box p { margin-bottom: 12px; }
.conclusion-box a { font-weight: 600; }

/* ---------- Red / green comparison cards (spot_* + strong_pw) ---------- */
.card-border-red {
  border-left: 4px solid rgba(220,53,69,0.5) !important;
  border-top: 1px solid rgba(220,53,69,0.18) !important;
  border-right: 1px solid rgba(220,53,69,0.18) !important;
  border-bottom: 1px solid rgba(220,53,69,0.18) !important;
}
.card-header-red {
  background-color: rgba(220,53,69,0.12) !important;
  color: #e0566a !important;
  border-bottom: 1px solid rgba(220,53,69,0.18) !important;
}
.card-header-red h1, .card-header-red h2, .card-header-red h3,
.card-header-red h4, .card-header-red h5, .card-header-red h6 { color: #e0566a !important; }
.card-border-green {
  border-left: 4px solid rgba(25,135,84,0.5) !important;
  border-top: 1px solid rgba(25,135,84,0.18) !important;
  border-right: 1px solid rgba(25,135,84,0.18) !important;
  border-bottom: 1px solid rgba(25,135,84,0.18) !important;
}
.card-header-green {
  background-color: rgba(25,135,84,0.12) !important;
  color: #2ea77d !important;
  border-bottom: 1px solid rgba(25,135,84,0.18) !important;
}
.card-header-green h1, .card-header-green h2, .card-header-green h3,
.card-header-green h4, .card-header-green h5, .card-header-green h6 { color: #2ea77d !important; }
.info-callout {
  background-color: rgba(13,110,253,0.10);
  border-left: 4px solid rgba(13,110,253,0.55);
  padding: 15px; margin: 20px 0; border-radius: 4px;
}

.btn-outline-primary, .btn-outline-info { transition: all 0.25s ease; }
.btn-outline-primary:hover, .btn-outline-info:hover {
  transform: translateY(-3px); box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

/* Accessibility: visible focus ring on interactive elements */
a:focus-visible, button:focus-visible,
.form-control:focus-visible, .form-check-label:focus-within,
summary:focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: 2px;
}

/* =====================================================================
   DARK MODE — normalise the legacy FlexStart template
   ===================================================================== */
[data-bs-theme="dark"] body,
[data-bs-theme="dark"] .main,
[data-bs-theme="dark"] section { background-color: #121518 !important; color: #d1d5db !important; }
[data-bs-theme="dark"] .privacy-security-section,
[data-bs-theme="dark"] .soft-section,
[data-bs-theme="dark"] .main-content { background-color: #15191d !important; }
[data-bs-theme="dark"] .header { background-color: #1a1d21 !important; border-bottom: 1px solid #2d333b !important; }
[data-bs-theme="dark"] .sitename,
[data-bs-theme="dark"] h1,
[data-bs-theme="dark"] h2,
[data-bs-theme="dark"] h3,
[data-bs-theme="dark"] h4,
[data-bs-theme="dark"] h5,
[data-bs-theme="dark"] h6 { color: #f3f4f6 !important; }
/* Drive the template's global + nav colours from variables so every
   heading, label and dropdown flips correctly in dark mode. */
[data-bs-theme="dark"] {
  --default-color: #d1d5db;
  --heading-color: #f3f4f6;
  --background-color: #121518;
  --surface-color: #1a1d21;
  --contrast-color: #ffffff;
  --nav-color: #d1d5db;
  --nav-hover-color: #6ea8fe;
  --nav-mobile-background-color: #1a1d21;
  --nav-dropdown-background-color: #1a1d21;
  --nav-dropdown-color: #e5e7eb;
  --nav-dropdown-hover-color: #6ea8fe;
}
[data-bs-theme="dark"] .navmenu .dropdown ul { border: 1px solid #2d333b; }
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select { background-color: #0d1117 !important; color: #e5e7eb !important; border-color: #2d333b !important; }
[data-bs-theme="dark"] .card { background-color: #1a1d21 !important; border-color: #2d333b !important; }
[data-bs-theme="dark"] .list-group-item { background-color: transparent !important; color: #d1d5db !important; border-color: #2d333b !important; }
[data-bs-theme="dark"] #footer,
[data-bs-theme="dark"] .footer { background-color: #15191d !important; border-color: #2d333b !important; color: #d1d5db !important; }
[data-bs-theme="dark"] .conclusion-box a { color: #6ea8fe; }

/* Print: flatten the Q&A accordion */
@media print {
  .qa-details-accordion .qa-marker { display: none !important; }
  .qa-details-accordion .qa-answer { display: block !important; }
}