/* ============================================================
   Laughing Professor — SERP Simulator Theme
   Save as: /serp-simulator/theme.css
   Link AFTER your existing style2.css so it overrides cleanly
   ============================================================ */

/* -- Light mode (default) -- */
:root {
  --color-background-primary:   #ffffff;
  --color-background-secondary: #eef4f8;
  --color-background-success:   #eaf5ee;
  --color-border-secondary:     rgba(14, 80, 119, 0.22);
  --color-border-tertiary:      rgba(14, 80, 119, 0.09);
  --color-text-primary:         #0c2233;
  --color-text-secondary:       #3b607a;
  --color-text-success:         #1a6b38;
  --color-text-tertiary:        #7896a8;

  /* Brand tokens (used throughout) */
  --lp-brand:        #0e5077;
  --lp-brand-hover:  #0b3f5e;
  --lp-accent:       #ffcc00;
  --lp-accent-text:  #6b4e00;
  --lp-brand-light:  #eef4f8;
  --lp-radius-md:    8px;
  --lp-radius-lg:    12px;
}

/* -- Dark mode -- */
@media (prefers-color-scheme: dark) {
  :root {
    --color-background-primary:   #132232;
    --color-background-secondary: #0d1a27;
    --color-background-success:   #0f2e1a;
    --color-border-secondary:     rgba(100, 175, 215, 0.24);
    --color-border-tertiary:      rgba(100, 175, 215, 0.10);
    --color-text-primary:         #e4f0f8;
    --color-text-secondary:       #89b5cc;
    --color-text-success:         #6bcf8f;
    --color-text-tertiary:        #4e7d98;

    --lp-brand:       #3a9fd6;
    --lp-brand-hover: #5bb5e3;
    --lp-brand-light: #0d1a27;
  }
}

/* -- Base -- */
*, *::before, *::after { box-sizing: border-box; }

body {
  color: var(--color-text-primary);
  font-family: Lato, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.65;
}

/* -- Typography -- */
h2, h3, h4 { color: var(--lp-brand); font-weight: 600; line-height: 1.3; margin-top: 0; }
h1 { font-size: 1.75rem; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.1rem;  }
h4 { font-size: 1rem;    }

p { color: var(--color-text-secondary); margin: 0 0 1rem; }

a { color: var(--lp-brand); text-decoration: none; transition: opacity 0.15s; }
a:hover { opacity: 0.78; text-decoration: underline; }
a:focus { outline: 2px solid var(--lp-accent); outline-offset: 2px; border-radius: 2px; }

/* -- Page header -- */
.header {
  border-bottom: 4px solid var(--lp-accent);
  padding: 1.5rem 2rem;
}
.header h1         { margin-bottom: 0.25rem; }
.header h2         { color: rgba(255,255,255,0.75); font-size: 1rem; font-weight: 400; margin: 0; }
.header a.cta-seo,
.header a.cta-white { margin-top: 0.75rem; }

/* -- Breadcrumb -- */
.breadcrumb {
  background-color: var(--color-background-primary);
  border-bottom: 0.5px solid var(--color-border-tertiary);
  color: var(--color-text-tertiary);
  font-size: 0.85rem;
  padding: 0.6rem 2rem;
}
.breadcrumb a { color: var(--lp-brand); }

/* -- Layout container -- */
.custom-container, #main-content {
  max-width: 100%;
  margin: 0 auto;
  padding: 2rem 1.5rem;
}

/* -- Cards / content boxes -- */
.custom-content, .serp-preview, section.faq {
  background-color: var(--color-background-primary);
  border: 0.5px solid var(--color-border-tertiary);
  border-radius: var(--lp-radius-lg);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
}

/* -- Forms -- */
label {
  color: var(--color-text-secondary);
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-bottom: 5px;
  text-transform: uppercase;
}

input[type="text"],
input[type="url"],
textarea,
#serp-url {
  background-color: var(--color-background-primary);
  border: 1px solid var(--color-border-secondary);
  border-radius: var(--lp-radius-md);
  color: var(--color-text-primary);
  font-family: inherit;
  font-size: 0.9rem;
  padding: 8px 12px;
  transition: border-color 0.15s, box-shadow 0.15s;
  width: 100%;
}
input:focus, textarea:focus, #serp-url:focus {
  border-color: var(--lp-brand);
  box-shadow: 0 0 0 3px rgba(14, 80, 119, 0.14);
  outline: none;
}

.char-count {
  color: var(--color-text-tertiary);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
}

/* -- Buttons -- */
button, input[type="submit"] {
  border-radius: var(--lp-radius-md);
  cursor: pointer;
  display: inline-block;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  padding: 9px 20px;
  text-decoration: none !important;
  transition: background-color 0.15s, opacity 0.15s;
}

/* -- SERP preview box -- */
.serp-preview {
  border-left: 4px solid var(--lp-brand);
  border-radius: var(--lp-radius-lg);
  max-width: 620px;
}
.serp-title       { color: #1a0dab; font-size: 1.05rem; font-weight: 700; margin-bottom: 4px; }
.serp-url         { color: #0d7c2e; font-size: 0.875rem; margin-bottom: 6px; }
.serp-description { color: #4d5156; font-size: 0.875rem; line-height: 1.55; }

/* -- Feature list bullets -- */
.content ul { list-style: none; padding: 0; margin: 0; }
.content ul li {
  padding: 4px 0 4px 20px;
  position: relative;
  color: var(--color-text-secondary);
}
.content ul li::before {
  background-color: var(--lp-accent);
  border-radius: 50%;
  content: '';
  display: inline-block;
  height: 7px;
  left: 0;
  position: absolute;
  top: 11px;
  width: 7px;
}

/* -- Blockquote -- */
blockquote {
  background-color: var(--lp-brand-light);
  border-left: 4px solid var(--lp-accent);
  border-radius: 0 var(--lp-radius-md) var(--lp-radius-md) 0;
  color: var(--color-text-secondary);
  font-size: 0.9rem;
  margin: 1.5rem 0;
  padding: 1rem 1.25rem;
}

/* -- Dividers -- */
hr {
  border: none;
  border-top: 0.5px solid var(--color-border-tertiary);
  margin: 2rem 0;
}

/* -- Disclaimer / notice -- */
.disclaimer {
  background-color: var(--lp-brand-light);
  border: 1px solid var(--color-border-secondary);
  border-left: 4px solid var(--lp-accent);
  border-radius: var(--lp-radius-md);
  color: var(--color-text-secondary);
  font-size: 0.875rem;
  padding: 1rem 1.25rem;
}

/* -- Images -- */
img { border-radius: var(--lp-radius-md); height: auto; max-width: 100%; }

/* -- Back to top button -- */
#backToTop {
  background-color: var(--lp-brand) !important;
  border: 2px solid var(--lp-accent) !important;
  color: #ffffff !important;
}
#backToTop:hover {
  background-color: var(--lp-accent) !important;
  color: var(--lp-accent-text) !important;
}

/* -- Responsive -- */
@media (max-width: 640px) {
  .header            { padding: 1.25rem; }
  .custom-container,
  #main-content      { padding: 1.25rem 1rem; }
  .serp-preview      { max-width: 100%; }
}