/* ============================================================
   SSL INDEX — REDESIGN (public site)
   Approved flat/minimal direction. Loaded AFTER style.css.
   Keeps red brand (#f7252b), Bootstrap 5, dark-mode support.
   No shadows, no glows.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap");

:root,
[data-bs-theme="light"] {
  --ssl-red: #f7252b;
  --ssl-red-hover: #e0121c;
  --ssl-ink: #0d1117;
  --ssl-ink-2: #1b2230;
  --ssl-muted: #6b7280;
  --ssl-line: #eceef2;
  --ssl-bg: #fbfbfd;
  --ssl-surface: #fff;
  --ssl-r: 18px;
  --ssl-r-lg: 28px;
}

[data-bs-theme="dark"] {
  --ssl-ink: #f3f5f9;
  --ssl-ink-2: #c7ccd6;
  --ssl-muted: #9aa3b2;
  --ssl-line: #262d3a;
  --ssl-bg: #0d1117;
  --ssl-surface: #161c26;
}

/* ---- Type ---- */
body { font-family: "Inter", sans-serif; background: var(--ssl-bg); color: var(--ssl-ink-2); }
h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
  font-family: "Sora", sans-serif; letter-spacing: -.02em; color: var(--ssl-ink);
}

/* ---- Navbar ---- */
.navbar.sticky-top {
  background: color-mix(in srgb, var(--ssl-surface) 88%, transparent) !important;
  backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid var(--ssl-line);
  /* Match the approved mockup height (~70px): style.css collapses navbar padding to 0 */
  padding-top: .9rem !important;
  padding-bottom: .9rem !important;
}
.navbar .nav-link {
  font-weight: 600; color: var(--ssl-ink-2) !important;
  padding: .5rem .9rem !important; border-radius: 10px; transition: .2s;
}
.navbar .nav-link:hover, .navbar .nav-link.active {
  color: var(--ssl-red) !important;
  background: color-mix(in srgb, var(--ssl-red) 8%, transparent);
}

/* Navbar right-side buttons: add spacing so Create Account / Sign In don't touch */
.navbar .d-flex.order-lg-2 { gap: .5rem; align-items: center; }

/* Dark-mode toggle: give the bare icon a proper circular button */
#themeToggleBtn {
  width: 42px; height: 42px; border-radius: 50% !important;
  border: 1px solid var(--ssl-line) !important; background: var(--ssl-surface) !important;
  color: var(--ssl-ink-2) !important; margin-right: 10px; transition: .2s;
}
#themeToggleBtn:hover {
  border-color: var(--ssl-red) !important; color: var(--ssl-red) !important;
}

/* ---- Buttons ---- */
.btn { border-radius: 999px; font-weight: 600; transition: .2s; }
.btn-primary {
  --bs-btn-bg: var(--ssl-red); --bs-btn-border-color: var(--ssl-red);
  --bs-btn-hover-bg: var(--ssl-red-hover); --bs-btn-hover-border-color: var(--ssl-red-hover);
  --bs-btn-active-bg: var(--ssl-red-hover); --bs-btn-active-border-color: var(--ssl-red-hover);
}
.btn-outline, .btn-outline-secondary, .btn-outline-primary {
  border: 1px solid var(--ssl-line) !important; color: var(--ssl-ink-2);
}
.btn-outline:hover, .btn-outline-secondary:hover { border-color: var(--ssl-red); color: var(--ssl-red); background: transparent; }
/* "Create Account" (navbar .btn-outline) -> clean bordered pill, no underline */
.navbar .btn-outline {
  border: 1px solid var(--ssl-line) !important;
  border-radius: 999px !important;
  color: var(--ssl-ink-2) !important;
  text-decoration: none !important;
  padding: .55rem 1.1rem !important;
  font-weight: 600;
}
.navbar .btn-outline:hover {
  border-color: var(--ssl-red) !important;
  color: var(--ssl-red) !important;
  background: transparent !important;
}

/* ---- Hero ---- */
.ssl-hero { position: relative; overflow: hidden; padding: 80px 0 64px; }
.ssl-eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: "Inter", sans-serif; font-weight: 700; font-size: .78rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ssl-red);
  background: color-mix(in srgb, var(--ssl-red) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--ssl-red) 22%, transparent);
  padding: .45rem 1rem; border-radius: 999px;
}
.ssl-eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ssl-red); }
.ssl-hero h1 { font-size: clamp(2.4rem, 5vw, 4rem); font-weight: 800; line-height: 1.05; }
.ssl-hero .grad { color: var(--ssl-red); }
.ssl-hero-lead { font-size: 1.12rem; color: var(--ssl-muted); max-width: 560px; }

/* ---- Search shell ---- */
.ssl-search {
  background: var(--ssl-surface); border: 1px solid var(--ssl-line);
  border-radius: 999px; padding: 8px; display: flex; gap: 8px; max-width: 620px;
}
.ssl-search input {
  border: 0; background: transparent; flex: 1; padding: 0 18px;
  font-size: 1rem; color: var(--ssl-ink); outline: none;
}
.ssl-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.ssl-chip {
  font-size: .8rem; font-weight: 600; color: var(--ssl-muted);
  background: var(--ssl-surface); border: 1px solid var(--ssl-line);
  padding: .35rem .8rem; border-radius: 999px; transition: .2s;
}
.ssl-chip:hover { color: var(--ssl-red); border-color: var(--ssl-red); }

/* ---- SSL code card ---- */
.ssl-code-card {
  background: var(--ssl-ink); color: #fff; border-radius: var(--ssl-r-lg);
  padding: 30px; position: relative; overflow: hidden;
}
.ssl-code-card h3, .ssl-code-card .h3 { color: #fff; }
.ssl-code-pill {
  font-family: "Sora", sans-serif; font-weight: 700; letter-spacing: .08em;
  background: rgba(255,255,255,.1); border: 1px dashed rgba(255,255,255,.35);
  border-radius: 14px; padding: 14px 18px; text-align: center; font-size: 1.35rem;
}

/* Hero search bar centered on its own row */
.ssl-search.mx-auto { width: 100%; }

/* ---- Stat strip ---- */
.ssl-stat-strip {
  background: var(--ssl-surface); border: 1px solid var(--ssl-line);
  border-radius: var(--ssl-r-lg); padding: 8px;
  display: flex; flex-wrap: wrap; justify-content: between;
}
.ssl-stat { padding: 22px; text-align: center; flex: 1 1 0; }
.ssl-stat .n { font-family: "Sora", sans-serif; font-weight: 800; font-size: 2rem; color: var(--ssl-ink); }
.ssl-stat .l { color: var(--ssl-muted); font-size: .9rem; font-weight: 500; }
.ssl-stat + .ssl-stat { border-left: 1px solid var(--ssl-line); }

/* ---- Steps timeline ---- */
.ssl-steps { position: relative; }
.ssl-steps .line {
  position: absolute; top: 34px; left: 12%; right: 12%; height: 2px;
  /* darker dashes than --ssl-line so the connector is actually visible on the page bg */
  background: repeating-linear-gradient(90deg, #d4d8e0 0 10px, transparent 10px 20px);
}
[data-bs-theme="dark"] .ssl-steps .line {
  background: repeating-linear-gradient(90deg, #3a414d 0 10px, transparent 10px 20px);
}
.ssl-step { text-align: center; position: relative; z-index: 1; }
.ssl-step .num {
  width: 68px; height: 68px; border-radius: 50%; background: var(--ssl-red);
  color: #fff; font-family: "Sora", sans-serif; font-weight: 800; font-size: 1.6rem;
  display: inline-flex; align-items: center; justify-content: center; border: 5px solid var(--ssl-bg);
}
.ssl-step h4, .ssl-step h5 { margin-top: 18px; font-weight: 700; }
.ssl-step p { color: var(--ssl-muted); font-size: .92rem; }

/* ---- Cards (feature / result) ---- */
/* Force a clean white surface — style.css sets --bs-card-bg to a warm tint (#f8f4f3) */
.ssl-card {
  background: var(--ssl-surface) !important;
  border: 1px solid var(--ssl-line); border-radius: var(--ssl-r);
  overflow: hidden; transition: .25s;
}
.ssl-card:hover { border-color: var(--ssl-red); }
.card {
  --bs-card-bg: var(--ssl-surface);
  background: var(--ssl-surface); border: 1px solid var(--ssl-line);
  border-radius: var(--ssl-r); transition: .25s;
}
.card:hover { border-color: var(--ssl-red); }
.ssl-tag {
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ssl-red); background: color-mix(in srgb, var(--ssl-red) 9%, transparent);
  padding: .3rem .7rem; border-radius: 999px;
  /* hug the text — not stretch full card width */
  display: inline-block !important; width: auto !important; align-self: flex-start;
}
.ssl-card .meta {
  color: var(--ssl-muted); font-size: .85rem; display: flex; gap: 14px;
  margin-top: 14px; border-top: 1px solid var(--ssl-line); padding-top: 12px;
}
/* Card titles: display stored ALL-CAPS data in clean title case */
.ssl-card-title { text-transform: capitalize; }
.ssl-card-title a { text-transform: capitalize; }

.ssl-section-eyebrow {
  font-family: "Inter", sans-serif; font-weight: 700; font-size: .78rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ssl-red);
}

/* ---- Forms (search / item / profile / auth) ---- */
.form-control, .form-select {
  border-radius: 12px; border: 1px solid var(--ssl-line); background: var(--ssl-surface);
  transition: .2s;
}
.form-control:focus, .form-select:focus {
  border-color: var(--ssl-red); box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--ssl-red) 15%, transparent);
}

/* ---- Badges ---- */
.badge { border-radius: 999px; font-weight: 600; }

/* ---- Footer (match mockup: darker bg, WHITE headings, GRAY body, no dividers) ---- */
footer.footer-dark, footer { background: #0d1117 !important; color: #aeb6c2; }

/* Body text + links: muted gray, smaller (h5.mb-4 excluded via :not) */
footer .footer-row div.mb-4,
footer .footer-row p,
footer .footer-row li,
footer .footer-row ul,
footer .email-link {
  color: #aeb6c2 !important; font-size: .9rem; line-height: 1.6;
}

/* Headings: white — placed AFTER the gray rule so it wins on equal specificity */
footer .footer-row h5, footer .footer-row h6,
footer h5.fw-bold, footer h6.fw-bold,
footer h5, footer h6, footer .footer-title {
  color: #fff !important; font-family: "Sora", sans-serif; font-weight: 700; font-size: 1.05rem;
}
footer a { color: #aeb6c2; text-decoration: none; transition: .2s; }
footer a:hover, footer .email-link:hover { color: var(--ssl-red) !important; }

/* No vertical column dividers */
footer .border-end { border-right: 0 !important; }

footer .social-icon {
  width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.08);
  display: inline-flex; align-items: center; justify-content: center; color: #fff; transition: .2s;
}
footer .social-icon:hover { background: var(--ssl-red); color: #fff; transform: translateY(-3px); }

/* Footer social icons: force a horizontal row (match mockup) */
.footer-dark ul.social-icon,
ul.social-icon {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: .5rem;
  padding-left: 0;
  margin-bottom: 0;
  width: auto !important;
}
.footer-dark ul.social-icon > li,
ul.social-icon > li {
  list-style: none;
  width: auto !important;
  flex: 0 0 auto !important;
  display: inline-flex !important;
}
.footer-dark .social-icon .icon-wrap,
.social-icon .icon-wrap {
  width: 42px !important;
  height: 42px !important;
  background-color: rgba(255, 255, 255, .08) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
/* Kill the soft glow/ellipse behind the social row */
.footer-dark .social-icon,
.social-icon,
.footer-dark .social-icon a,
.social-icon a {
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
}
.footer-dark .social-icon::before, .footer-dark .social-icon::after,
.social-icon::before, .social-icon::after { content: none !important; display: none !important; }

/* ---- "Get your free SSL Code" card: text wraps around the image ---- */
/* Mobile-first: full-width banner above the copy (no float). */
.ssl-code-thumb { width: 100%; }

@media (min-width: 768px) {
  .ssl-code-thumb {
    float: right;
    width: 300px;        /* matches the pre-float size of the image */
    max-width: 45%;      /* never let the image crowd out the copy */
    margin: 0 0 1rem 1.5rem;
  }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}