/* Base styles */
body {
  font-family: 'Inter', sans-serif;
  /* Antialiasing for smoother fonts */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Light/Dark Mode Variables - Refined Palette */
:root {
  /* Brand color (easily changeable) */
  --brand-color: 4F46E5; /* Indigo-600 */
  --brand-color-dark: 4338CA; /* Indigo-700 */

  /* Default to dark theme variables */
  --bg-primary: #0F172A; /* Slate-900 */
  --bg-secondary: #1E293B; /* Slate-800 */
  --bg-tertiary: #334155; /* Slate-700 */
  --bg-card: #1E293B; /* Slate-800 */
  --bg-result-card: #1E293B; /* Slate-800 */
  --bg-code: #0F172A; /* Slate-900 (Same as primary for dark code box) */

  --text-primary: #F1F5F9; /* Slate-100 */
  --text-secondary: #CBD5E1; /* Slate-300 */
  --text-tertiary: #94A3B8; /* Slate-400 */
  --text-brand: #818CF8; /* Indigo-400 */
  --text-code: #E2E8F0; /* Slate-200 (Code text color) */

  --border-color: #334155; /* Slate-700 */
  --border-color-light: #475569; /* Slate-600 */

  --focus-ring: #6366F1; /* Indigo-500 */
  --focus-ring-offset: #0F172A; /* Slate-900 */

  --icon-ok: #34D399; /* Emerald-400 */
  --icon-fail: #F87171; /* Red-400 */
  --icon-warn: #FBBF24; /* Amber-400 */

  --score-good: #34D399; /* Emerald-400 */
  --score-warn: #FBBF24; /* Amber-400 */
  --score-bad: #F87171; /* Red-400 */
}

html[data-theme='light'] {
  --bg-primary: #ffffff; /* White */
  --bg-secondary: #F1F5F9; /* Slate-100 */
  --bg-tertiary: #E2E8F0; /* Slate-200 */
  --bg-card: #ffffff; /* White */
  --bg-result-card: #ffffff; /* White */
  --bg-code: #F8FAFC; /* Slate-50 (Light code box background) */

  --text-primary: #1E293B; /* Slate-800 */
  --text-secondary: #475569; /* Slate-600 */
  --text-tertiary: #64748B; /* Slate-500 */
  --text-brand: #4F46E5; /* Indigo-600 */
  --text-code: #334155; /* Slate-700 (Code text color) */

  --border-color: #E2E8F0; /* Slate-200 */
  --border-color-light: #CBD5E1; /* Slate-300 */

  --focus-ring: #4F46E5; /* Indigo-600 */
  --focus-ring-offset: #ffffff; /* White */

  --icon-ok: #10B981; /* Emerald-500 */
  --icon-fail: #EF4444; /* Red-500 */
  --icon-warn: #F59E0B; /* Amber-500 */

  --score-good: #10B981; /* Emerald-500 */
  --score-warn: #F59E0B; /* Amber-500 */
  --score-bad: #EF4444; /* Red-500 */
}

/* Custom styles for blog post headings within prose */
.prose h2,
.prose-lg h2,
.prose-xl h2 {
  font-size: 1.875rem; /* text-2xl */
  line-height: 2.25rem; /* leading-9 */
  font-weight: 700; /* bold */
  margin-top: 2.5em; /* More space above */
  margin-bottom: 1em; /* More space below */
}
.prose h3,
.prose-lg h3,
.prose-xl h3 {
  font-size: 1.5rem; /* text-xl */
  line-height: 2rem; /* leading-8 */
  font-weight: 600; /* semibold */
  margin-top: 2em;
  margin-bottom: 0.8em;
}

/* Custom styles for code blocks, keyword highlighting etc. */
.prose strong {
  color: var(--text-brand);
  font-weight: 600;
}

.image-placeholder {
    display: block;
    width: 100%;
    max-width: 600px;
    height: 300px;
    background-color: var(--bg-tertiary);
    border: 1px dashed var(--border-color);
    color: var(--text-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: 2em auto;
    border-radius: 0.375rem; /* rounded-md */
    font-size: 0.875rem; /* text-sm */
}

/* Apply theme variables using Tailwind's theme() function or direct vars */
.bg-primary { background-color: var(--bg-primary); }
.bg-secondary { background-color: var(--bg-secondary); }
.bg-tertiary { background-color: var(--bg-tertiary); }
.bg-card { background-color: var(--bg-card); }
.bg-code { background-color: var(--bg-code); }
.bg-result-card { background-color: var(--bg-result-card); }
.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-tertiary { color: var(--text-tertiary); }
.text-brand { color: var(--text-brand); }
.text-code { color: var(--text-code); }
.border-border-color { border-color: var(--border-color); }
.border-border-color-light { border-color: var(--border-color-light); }
.accent-brand { accent-color: #4F46E5; } /* For range input */

/* Brand Colors Direct */
.bg-brand { background-color: #4F46E5; }
.bg-brand-dark { background-color: #4338CA; }
.hover\:bg-brand-dark:hover { background-color: #4338CA; }
.text-brand { color: var(--text-brand); }
.bg-brand\/10 { background-color: rgba(79, 70, 229, 0.1); }
.form-radio:checked { border-color: #4F46E5; background-color: #4F46E5;}
.focus\:ring-brand:focus { --tw-ring-color: #4F46E5; }

/* Result Icons */
.icon-ok { color: var(--icon-ok); }
.icon-fail { color: var(--icon-fail); }
.icon-warn { color: var(--icon-warn); }

/* Result Score Colors */
.score-good { color: var(--score-good); }
.score-warn { color: var(--score-warn); }
.score-bad { color: var(--score-bad); }

/* Global focus styles */
*:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--bg-primary), 0 0 0 4px var(--focus-ring);
}
*:focus:not(:focus-visible) { outline: none; box-shadow: none; }
#themeToggle:focus-visible { box-shadow: 0 0 0 2px var(--bg-secondary), 0 0 0 4px var(--focus-ring); }

/* Header adjustments */
header { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }

/* Theme Toggle specific styles */
#themeToggle { background-color: var(--bg-tertiary); }
#toggleThumb { background-color: var(--text-primary); }
#sunIcon { display: none; }
#moonIcon { display: block; }
html[data-theme='light'] #sunIcon { display: block; }
html[data-theme='light'] #moonIcon { display: none; }
#sunIcon, #moonIcon { transition: opacity 0.3s ease-in-out; }

/* Result Area Transition */
#result.visible { opacity: 1; }

/* --- Record Box Styling (Ensure this is present) --- */
pre.record-box, div.record-box, ul.record-box, code.record-box {
  background-color: var(--bg-code);
  color: var(--text-code);
  padding: 0.75rem; /* p-3 */
  border-radius: 0.375rem; /* rounded-md */
  font-family: monospace;
  font-size: 0.875rem; /* text-sm */
  line-height: 1.25rem;
  overflow-x: auto;
  border: 1px solid var(--border-color-light);
  white-space: pre-wrap;
  word-break: break-all;
  display: block;
  margin-top: 0.25rem;
}
ul.record-box {
    white-space: normal;
    word-break: normal;
    padding-left: 2.5rem; /* Adjust padding for list markers */
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}
div.record-box.text-tertiary.italic {
     white-space: normal;
     word-break: normal;
}
/* --- End Record Box Styling --- */


/* Copy Button Styling */
.copy-btn, .copy-verification-button, .copy-suggestion-btn {
  background-color: rgba(0, 0, 0, 0.2);
  color: var(--text-secondary);
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  border-radius: 0.25rem;
  border: 1px solid var(--border-color-light);
  transition: opacity 0.2s ease-in-out, background-color 0.2s;
  cursor: pointer;
  opacity: 0; /* Hidden by default on results page */
}
/* Position for absolute copy buttons in results */
.relative:hover .copy-btn { opacity: 1; }
.copy-btn:hover { background-color: rgba(0, 0, 0, 0.4); color: var(--text-primary); }
/* Non-absolute copy buttons (dashboard) */
.copy-verification-button, .copy-suggestion-btn { opacity: 1; }
.copy-verification-button:hover, .copy-suggestion-btn:hover { text-decoration: underline; }

html[data-theme='light'] .copy-btn {
  background-color: rgba(255, 255, 255, 0.3);
  color: var(--text-secondary);
  border-color: var(--border-color);
}
html[data-theme='light'] .copy-btn:hover {
   background-color: rgba(255, 255, 255, 0.6);
   color: var(--text-primary);
}

/* Result Explanations */
.explanation {
  margin-top: 0.5rem;
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--text-tertiary);
}
.explanation strong { color: var(--text-secondary); font-weight: 600; }
.explanation code { background-color: var(--bg-code); color: var(--text-code); padding: 0.1em 0.4em; border-radius: 0.25rem; font-size: 0.9em; }
.explanation.fail { color: var(--icon-fail); }
.explanation.fail strong { color: var(--icon-fail); opacity: 0.9; }
.explanation.warn { color: var(--icon-warn); }
.explanation.warn strong { color: var(--icon-warn); opacity: 0.9; }

/* DMARC Wizard Explanation Styling */
#suggestionExplanation br {
    content: "";
    display: block;
    margin-bottom: 0.5em;
}

/* Verification Instructions Styling (Dashboard) */
.verification-line { display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.25rem; flex-wrap: wrap;}
.verification-label { font-weight: 600; flex-shrink: 0; color: var(--text-secondary); }
.verification-value { background-color: var(--bg-primary); border: 1px solid var(--border-color); padding: 0.25rem 0.5rem; border-radius: 0.25rem; font-family: monospace; font-size: 0.8rem; word-break: break-all; color: var(--text-code); }
.copy-verification-button { font-size: 0.75rem; color: var(--text-brand); cursor: pointer; flex-shrink: 0; }

/* SPF Flattening Toggle Styles (Dashboard) */
.toggle-checkbox:checked { right: 0; border-color: #4F46E5; }
.toggle-checkbox:checked + .toggle-label { background-color: #4F46E5; }
.toggle-checkbox { appearance: none; display: inline-block; width: 2.75rem; height: 1.5rem; background-color: var(--bg-tertiary); border-radius: 9999px; position: relative; cursor: pointer; transition: background-color 0.2s ease-in-out; vertical-align: middle; flex-shrink: 0; border: 1px solid var(--border-color); }
.toggle-checkbox::before { content: ''; position: absolute; top: 0.125rem; left: 0.125rem; width: 1.25rem; height: 1.25rem; background-color: white; border-radius: 9999px; transition: transform 0.2s ease-in-out; box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); }
.toggle-checkbox:checked::before { transform: translateX(1.25rem); }

/* Fade out (unused from original?) */
body.fade-out { opacity: 0; transition: opacity 0.3s ease-out; }
body { opacity: 1; transition: opacity 0.3s ease-out; }

/* Responsive adjustments */
@media (max-width: 768px) { }