/* ==========================================================================
   site-theme.css — frontpage design tokens rolled out site-wide
   Applies the securIT frontpage look (dark emerald canvas #0a120d, hairline
   cards #0f1b14, Archivo headings, JetBrains Mono micro-labels, pill
   buttons, emerald-only accents) to every marketing page that shares
   BaseLayout or PseoPage. Values mirror src/pages/index.astro so the
   frontpage itself is visually unchanged.
   ========================================================================== */

/* ---------- Canvas ---------- */

body.dark-mode {
  background: #0a120d;
  color: #c3d8cd;
}

/* Faint emerald blueprint grid under page content (same as frontpage) */
main {
  background-image:
    linear-gradient(rgba(52, 211, 153, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(52, 211, 153, 0.03) 1px, transparent 1px);
  background-size: 54px 54px;
}

/* ---------- Typography ---------- */

main h1,
main h2,
main h3,
main h4 {
  font-family: 'Archivo', 'Inter', system-ui, sans-serif;
  color: #eef7f1;
  letter-spacing: -0.02em;
}

/* ---------- Shared footer: blend into the single dark canvas ---------- */

body.dark-mode .footer {
  background: #0c1712;
  border-top: 1px solid rgba(52, 211, 153, 0.14);
}

/* ---------- Blog index: frontpage section rhythm + dark cards ---------- */

body.dark-mode .blog-section {
  padding-block: clamp(4.5rem, 8vw, 7rem);
  background: transparent;
  border-bottom: 1px solid rgba(52, 211, 153, 0.1);
}

body.dark-mode .blog-section > .container > h2 {
  text-align: left;
  margin: 0 0 clamp(2.5rem, 5vw, 4rem);
  font-family: 'Archivo', 'Inter', system-ui, sans-serif;
  font-size: clamp(2.3rem, 5.5vw, 3.8rem);
  line-height: 1.02;
  letter-spacing: -0.045em;
  font-weight: 700;
  color: #eef7f1;
}

body.dark-mode .blog-grid {
  gap: 1.25rem;
}

body.dark-mode .blog-post {
  background: #0f1b14;
  border: 1px solid rgba(52, 211, 153, 0.18);
  border-radius: 16px;
  box-shadow: none;
}

body.dark-mode .blog-post:hover {
  transform: none;
  border-color: rgba(52, 211, 153, 0.45);
  box-shadow: none;
}

body.dark-mode .blog-post .blog-content h3 {
  font-size: 1.22rem;
  letter-spacing: -0.02em;
}

body.dark-mode .blog-post .blog-content h3 a {
  color: #eef7f1;
}

body.dark-mode .blog-post .blog-content h3 a:hover {
  color: #34d399;
}

body.dark-mode .blog-post .blog-content p {
  color: #9db8ab;
}

body.dark-mode .blog-post .blog-meta {
  color: #6b8578;
}

/* ---------- Blog post: dark radial hero (frontpage hero look) ---------- */

body.dark-mode .blog-hero-section {
  background:
    radial-gradient(64% 52% at 50% -6%, rgba(16, 185, 129, 0.22), transparent 72%),
    radial-gradient(42% 36% at 50% 0%, rgba(52, 211, 153, 0.12), transparent 70%),
    #0a120d;
  border-bottom: 1px solid rgba(52, 211, 153, 0.16);
}

body.dark-mode .blog-hero-section::before {
  background: none;
  background-image:
    linear-gradient(rgba(52, 211, 153, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(52, 211, 153, 0.06) 1px, transparent 1px);
  background-size: 54px 54px;
  opacity: 1;
  mask-image: radial-gradient(78% 72% at 50% 18%, #000 25%, transparent 100%);
  -webkit-mask-image: radial-gradient(78% 72% at 50% 18%, #000 25%, transparent 100%);
}

body.dark-mode .breadcrumb {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 1;
}

body.dark-mode .breadcrumb a {
  color: #34d399;
}

body.dark-mode .breadcrumb a:hover {
  color: #6ee7b7;
}

body.dark-mode .breadcrumb span {
  color: #6b8578;
}

body.dark-mode .blog-title {
  background: none;
  -webkit-text-fill-color: #f2fbf6;
  color: #f2fbf6;
  font-family: 'Archivo', 'Inter', system-ui, sans-serif;
  letter-spacing: -0.045em;
  font-weight: 800;
}

body.dark-mode .blog-subtitle {
  color: #a9c4b6;
  opacity: 1;
}

body.dark-mode .blog-hero-section .blog-meta {
  color: #6b8578;
  justify-content: center;
}

body.dark-mode .blog-hero-section .meta-item i {
  color: #34d399;
}

/* ---------- Blog post: article body on the dark canvas ---------- */

body.dark-mode .blog-content-section {
  background: transparent;
}

body.dark-mode .blog-main-content .blog-content {
  color: #9db8ab;
}

body.dark-mode .blog-main-content .blog-content h2 {
  color: #eef7f1;
  font-family: 'Archivo', 'Inter', system-ui, sans-serif;
  letter-spacing: -0.03em;
}

body.dark-mode .blog-main-content .blog-content h2::before {
  background: #34d399;
  width: 3px;
}

body.dark-mode .blog-main-content .blog-content h3 {
  color: #eef7f1;
  font-family: 'Archivo', 'Inter', system-ui, sans-serif;
}

body.dark-mode .blog-main-content .blog-content strong {
  color: #eef7f1;
}

body.dark-mode .blog-main-content .blog-content a {
  color: #6ee7b7;
}

body.dark-mode .blog-main-content .blog-content a:hover {
  color: #34d399;
}

body.dark-mode .blog-main-content .blog-content blockquote {
  border-left-color: #34d399;
  background: rgba(16, 185, 129, 0.05);
  color: #9db8ab;
}

body.dark-mode .blog-main-content .blog-content code {
  background: #0a1410;
  color: #6ee7b7;
  border: 1px solid rgba(52, 211, 153, 0.2);
  border-radius: 6px;
}

body.dark-mode .blog-image img {
  border: 1px solid rgba(52, 211, 153, 0.18);
  border-radius: 16px;
}

/* Special content components: emerald-only accents */
body.dark-mode .principle-card {
  background: #0f1b14;
  border: 1px solid rgba(52, 211, 153, 0.18);
}

body.dark-mode .principle-item {
  background: rgba(16, 185, 129, 0.06);
}

body.dark-mode .principle-icon {
  background: rgba(16, 185, 129, 0.16);
  border: 1px solid rgba(52, 211, 153, 0.4);
  color: #34d399;
}

/* ---------- Blog post: sidebar + related posts ---------- */

body.dark-mode .sidebar-widget {
  background: #0f1b14;
  border: 1px solid rgba(52, 211, 153, 0.18);
  border-radius: 16px;
  box-shadow: none;
}

body.dark-mode .sidebar-widget h3 {
  color: #eef7f1;
  font-family: 'Archivo', 'Inter', system-ui, sans-serif;
}

body.dark-mode .related-post {
  background: transparent;
  border: 1px solid rgba(52, 211, 153, 0.14);
  border-radius: 12px;
  box-shadow: none;
}

body.dark-mode .related-post:hover {
  transform: none;
  border-color: rgba(52, 211, 153, 0.45);
  box-shadow: none;
}

body.dark-mode .related-post-content h4 a {
  color: #eef7f1;
}

body.dark-mode .related-post-content h4 a:hover {
  color: #34d399;
}

body.dark-mode .related-post-meta {
  color: #6b8578;
}

body.dark-mode .related-post-meta i {
  color: #34d399;
}

/* ---------- Blog post: share buttons as ghost pills ---------- */

body.dark-mode .share-section {
  background: transparent;
  border-top: 1px solid rgba(52, 211, 153, 0.14);
}

body.dark-mode .share-section h4 {
  color: #eef7f1;
  font-family: 'Archivo', 'Inter', system-ui, sans-serif;
}

body.dark-mode .share-button,
body.dark-mode .share-button.facebook,
body.dark-mode .share-button.twitter,
body.dark-mode .share-button.linkedin {
  background: transparent !important;
  border: 1px solid rgba(148, 181, 164, 0.35) !important;
  border-radius: 999px !important;
  color: #a7f3d0 !important;
  box-shadow: none !important;
}

body.dark-mode .share-button:hover,
body.dark-mode .share-button.facebook:hover,
body.dark-mode .share-button.twitter:hover,
body.dark-mode .share-button.linkedin:hover {
  background: rgba(16, 185, 129, 0.08) !important;
  border-color: #34d399 !important;
  color: #d1fae5 !important;
  transform: none;
}

/* ---------- Contact section (shared by marketing pages) ---------- */

body.dark-mode .contact-section {
  background: transparent;
}

body.dark-mode main > .contact-section,
body.dark-mode main > #contact.contact-section {
  padding-block: clamp(4.5rem, 8vw, 7rem);
}

body.dark-mode .contact-section .container > h2 {
  text-align: left;
  margin: 0 0 clamp(2.5rem, 5vw, 4rem);
  font-family: 'Archivo', 'Inter', system-ui, sans-serif;
  font-size: clamp(2.3rem, 5.5vw, 3.8rem);
  line-height: 1.02;
  letter-spacing: -0.045em;
  font-weight: 700;
  color: #eef7f1;
}

body.dark-mode .contact-info,
body.dark-mode .contact-form,
body.dark-mode #contact-form {
  border: 1px solid rgba(52, 211, 153, 0.18);
  border-radius: 18px;
  background: #0f1b14;
  box-shadow: none;
  color: #c3d8cd;
}

body.dark-mode .contact-info strong {
  color: #eef7f1;
}

.contact-info a {
  color: #6ee7b7;
}

.contact-info a:hover {
  color: #34d399;
}

.contact-icon {
  color: #34d399;
}

body.dark-mode .contact-form .form-group label {
  color: #9db8ab;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

body.dark-mode .contact-form input,
body.dark-mode .contact-form textarea {
  border: 1px solid rgba(52, 211, 153, 0.2);
  border-radius: 10px;
  background: #0a1410;
  color: #e6f2ec;
}

/* ---------- Tailwind marketing pages: SOC / security / advisories ---------- */

/* Hero: frontpage dark radial look instead of the bright blue gradient */
body.dark-mode #soc-hero,
body.dark-mode #vdp-hero,
body.dark-mode #adv-hero {
  background:
    radial-gradient(64% 52% at 50% -6%, rgba(16, 185, 129, 0.22), transparent 72%),
    radial-gradient(42% 36% at 50% 0%, rgba(52, 211, 153, 0.12), transparent 70%),
    #0a120d !important;
  animation: none !important;
  border-bottom: 1px solid rgba(52, 211, 153, 0.16);
}

/* Hide the decorative light blobs from the old gradient hero */
#soc-hero [class*="bg-white/"],
#vdp-hero [class*="bg-white/"],
#adv-hero [class*="bg-white/"] {
  display: none;
}

/* Hero eyebrow: JetBrains Mono micro-label */
body.dark-mode #vdp-hero p.uppercase,
body.dark-mode #adv-hero p.uppercase {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace !important;
  color: #34d399 !important;
}

/* Hero CTA: white bubble → emerald pill */
body.dark-mode #soc-hero a[class*="bg-white"],
body.dark-mode #vdp-hero a[class*="bg-white"] {
  background: #10b981 !important;
  color: #04120b !important;
  border: 1px solid #10b981;
  box-shadow: 0 10px 30px -10px rgba(16, 185, 129, 0.55) !important;
}

body.dark-mode #soc-hero a[class*="bg-white"]:hover,
body.dark-mode #vdp-hero a[class*="bg-white"]:hover {
  background: #34d399 !important;
  color: #04120b !important;
  border-color: #34d399;
  transform: none !important;
}

/* Cards: slate-800 surfaces → frontpage hairline cards */
body.dark-mode main [class*="dark:bg-slate-800"]:not([class*="dark:bg-slate-800/"]) {
  background-color: #0f1b14 !important;
  border: 1px solid rgba(52, 211, 153, 0.18) !important;
  border-radius: 16px !important;
  box-shadow: none !important;
}

body.dark-mode main [class*="dark:bg-slate-800"]:not([class*="dark:bg-slate-800/"]):hover {
  border-color: rgba(52, 211, 153, 0.45) !important;
  box-shadow: none !important;
}

/* Alternating panel sections → subtle dark panels with hairlines */
body.dark-mode main [class*="dark:bg-slate-800/"] {
  background-color: rgba(15, 27, 20, 0.35) !important;
  border-top: 1px solid rgba(52, 211, 153, 0.1);
  border-bottom: 1px solid rgba(52, 211, 153, 0.1);
}

/* ---------- Phishing / W4C landing pages: dark radial hero ---------- */

body.dark-mode .phishing-page .hero {
  background:
    radial-gradient(64% 52% at 50% -6%, rgba(16, 185, 129, 0.22), transparent 72%),
    radial-gradient(42% 36% at 50% 0%, rgba(52, 211, 153, 0.12), transparent 70%),
    #0a120d;
  border-bottom: 1px solid rgba(52, 211, 153, 0.16);
}

body.dark-mode .phishing-page .hero .sub {
  color: #a9c4b6;
}

/* Floating signup card blends into the dark canvas */
body.dark-mode .phishing-page .floating-card {
  border: 1px solid rgba(52, 211, 153, 0.22);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

/* Primary buttons: solid emerald pill instead of gradient */
body.dark-mode .phishing-page .btn-primary {
  background: #10b981;
  border: 1px solid #10b981;
  border-radius: 999px;
  color: #04120b;
  box-shadow: 0 10px 30px -10px rgba(16, 185, 129, 0.55);
}

body.dark-mode .phishing-page .btn-primary:hover {
  background: #34d399;
  border-color: #34d399;
  color: #04120b;
}