/* ============================================================================
   CyberDilmeth — Brand Stylesheet (brand.css)
   Single site-wide brand CSS (Blueprint §19.6 / §19.7)
   Upload to:  wp-content/themes/{eikra-child}/assets/css/brand.css
   Enqueue via the child-theme functions.php snippet (see setup steps).
   Colour law:  Navy #0B1E3C headings · Blue #2463EB interactive
                · Green #16A34A Subscribe/Confirm ONLY.
   ============================================================================ */


/* ============================================================
   SECTION 1 — DESIGN TOKENS  (Blueprint §19.7)
   Safe: variables only. Defining them changes nothing on their
   own; they take effect where referenced below.
   ============================================================ */
:root{
  --brand-blue:#2463EB; --blue-dark:#1746A0; --navy-ink:#0B1E3C;
  --green:#16A34A; --green-dark:#15803D;
  --body:#41506B; --muted:#8A93A6; --line:#E6EAF1; --section-bg:#F4F7FB; --white:#fff;
  --sev-critical:#B42318; --sev-high:#D92D20; --sev-medium:#DC6803; --sev-low:#CA8504; --sev-info:#2463EB;
  --radius-control:6px; --radius-card:12px;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px;
  --font-heading:"Plus Jakarta Sans",Inter,system-ui,sans-serif;
  --font-body:Inter,system-ui,-apple-system,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,monospace;
}


/* ============================================================
   SECTION 2 — ARTICLE PRESENTATION  (scoped to .cd-article)
   Safe: only affects article bodies wrapped in
   <div class="cd-article"> … </div>. Nothing else on the site.
   ============================================================ */
.cd-article{
  font-family:var(--font-body); color:var(--body);
  font-size:1.0625rem;          /* 17px reading base */
  line-height:1.7; max-width:760px; margin-inline:auto;
}
.cd-article > p:first-of-type{ font-size:1.15rem; color:var(--navy-ink); } /* lead paragraph */

/* Headings — navy */
.cd-article h2{ font-family:var(--font-heading); color:var(--navy-ink);
  font-size:1.75rem; line-height:1.25; font-weight:700; margin:2.5rem 0 1rem; }
.cd-article h3{ font-family:var(--font-heading); color:var(--navy-ink);
  font-size:1.375rem; line-height:1.3; font-weight:600; margin:2rem 0 .75rem; }
.cd-article h4{ font-family:var(--font-heading); color:var(--navy-ink);
  font-size:1.15rem; font-weight:600; margin:1.5rem 0 .5rem; }
.cd-article p{ margin:0 0 1.25rem; }

/* Links — blue */
.cd-article a{ color:var(--brand-blue); text-decoration:none; }
.cd-article a:hover{ color:var(--blue-dark); text-decoration:underline; }

/* Lists */
.cd-article ul,.cd-article ol{ margin:0 0 1.25rem 1.25rem; }
.cd-article li{ margin:.4rem 0; }

/* TL;DR / Key takeaways (mandatory) */
.cd-tldr{ background:var(--section-bg); border:1px solid var(--line);
  border-left:4px solid var(--brand-blue); border-radius:var(--radius-card);
  padding:1.25rem 1.5rem; margin:0 0 2rem; }
.cd-tldr-title{ font-size:.85rem; text-transform:uppercase; letter-spacing:.05em;
  color:var(--navy-ink); font-weight:700; display:block; margin:0 0 .5rem; }
.cd-tldr ul{ margin:0 0 0 1.25rem; }

/* Callouts — icon/label + colour (never colour alone) */
.cd-callout{ border-radius:var(--radius-card); padding:1rem 1.25rem;
  margin:1.5rem 0; border:1px solid var(--line); }
.cd-callout-title{ font-weight:700; color:var(--navy-ink);
  display:block; margin-bottom:.35rem; }
.cd-callout p, .cd-callout ol, .cd-callout ul{ margin-bottom:0; }
.cd-note,.cd-todo{ background:#EEF3FE; border-left:4px solid var(--brand-blue); }
.cd-warning{ background:#FFF6ED; border-left:4px solid var(--sev-medium); }

/* Code / commands / IOCs */
.cd-article code{ font-family:var(--font-mono); background:var(--section-bg);
  border:1px solid var(--line); border-radius:6px; padding:.1rem .35rem; font-size:.9em; }
.cd-article pre{ font-family:var(--font-mono); background:var(--navy-ink);
  color:#E6EAF1; border-radius:var(--radius-card); padding:1rem 1.25rem;
  overflow:auto; margin:1.5rem 0; }
.cd-article pre code{ background:none; border:0; color:inherit; padding:0; }

/* Blockquote / tables / sources */
.cd-article blockquote{ border-left:4px solid var(--line); margin:1.5rem 0;
  padding:.25rem 0 .25rem 1.25rem; color:var(--muted); font-style:italic; }
.cd-article table{ width:100%; border-collapse:collapse; margin:1.5rem 0; font-size:.975rem; }
.cd-article th,.cd-article td{ border:1px solid var(--line); padding:.6rem .75rem; text-align:left; }
.cd-article thead th{ background:var(--section-bg); color:var(--navy-ink); }
.cd-sources{ border-top:1px solid var(--line); margin-top:2.5rem; padding-top:1.25rem; font-size:.95rem; }
.cd-sources h2{ font-size:1.25rem; margin-top:0; }
.cd-verified{ color:var(--muted); font-size:.875rem; }

/* Responsive */
@media (max-width:640px){
  .cd-article{ font-size:1rem; }
  .cd-article h2{ font-size:1.5rem; } .cd-article h3{ font-size:1.25rem; }
}


/* ============================================================
   SECTION 2b — NEWS PRESENTATION  (Editorial Requirements §7)
   News reuses the .cd-article base above (wrap News bodies in
   <div class="cd-article"> too) and adds two News-only pieces:
   the lead/summary opener and the "Why it matters, by level" block.
   Safe: scoped classes only.
   ============================================================ */

/* Lead / summary — inverted-pyramid opener (Editorial §7.3, element 5) */
.cd-lead{
  font-size:1.2rem; line-height:1.6; color:var(--navy-ink); font-weight:500;
  margin:0 0 1.5rem; padding:0 0 1.25rem; border-bottom:1px solid var(--line);
}

/* "Why it matters, by level" block (Editorial §7.4) — the News level bridge.
   Include only the levels that genuinely apply. */
.cd-why{
  background:var(--section-bg); border:1px solid var(--line);
  border-radius:var(--radius-card); padding:1.25rem 1.5rem; margin:2rem 0;
}
.cd-why-title{
  font-family:var(--font-heading); color:var(--navy-ink);
  font-weight:700; font-size:1.15rem; margin:0 0 1rem;
}
.cd-why-level{ margin:0 0 1rem; }
.cd-why-level:last-child{ margin-bottom:0; }
.cd-why-label{                     /* blue-tinted audience pill (Blueprint §19.4) */
  display:inline-block; font-size:.72rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.04em;
  color:var(--brand-blue); background:#EEF3FE; border:1px solid #D6E2FD;
  border-radius:999px; padding:.15rem .6rem; margin:0 0 .35rem;
}
.cd-why-level p{ margin:0; }


/* ============================================================
   SECTION 2c — RELATED RESOURCES  (cross-type trust mesh, Blueprint §7.5)
   A signpost block for linking out to other Articles, Tools, and
   Resources. Interim use while the single-{cpt} template doesn't yet
   auto-render a Related block (Blueprint §8.4). Remove from bodies
   once the template owns it, to avoid duplication.
   Safe: scoped classes only.
   ============================================================ */
.cd-related{ margin:2.75rem 0 0; }
.cd-related-title{
  font-family:var(--font-heading); color:var(--navy-ink);
  font-weight:700; font-size:1.25rem; margin:0 0 1rem;
  display:flex; align-items:center; gap:.6rem;
}
.cd-related-title::before{         /* small brand accent bar */
  content:""; width:4px; height:1.05em; border-radius:2px;
  background:var(--brand-blue); display:inline-block; flex:0 0 auto;
}
.cd-related-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:.85rem; }
.cd-related-card{
  display:flex; flex-direction:column; gap:.55rem;
  border:1px solid var(--line); border-radius:var(--radius-card);
  padding:1rem 1.15rem; background:var(--white); text-decoration:none;
  transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.cd-related-card:hover{
  border-color:var(--brand-blue); box-shadow:0 4px 16px rgba(11,30,60,.08);
  transform:translateY(-2px); text-decoration:none;
}
.cd-related-kind{                  /* type pill — base defaults to Article (blue) */
  align-self:flex-start; font-size:.66rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.05em;
  border-radius:999px; padding:.14rem .55rem;
  color:var(--brand-blue); background:#EEF3FE; border:1px solid #D6E2FD;
}
.cd-kind-tool{ color:var(--navy-ink); background:#EAEDF4; border-color:#D3DAE7; }       /* Tool — navy */
.cd-kind-resource{ color:#5C6B86; background:#F4F7FB; border-color:#E6EAF1; }           /* Resource — slate */
.cd-related-name{
  font-family:var(--font-heading); color:var(--navy-ink);
  font-weight:600; font-size:1rem; line-height:1.35;
}
.cd-related-card:hover .cd-related-name{ color:var(--brand-blue); }
.cd-related-name::after{
  content:" \2192"; color:var(--brand-blue); opacity:0; transition:opacity .15s ease;
}
.cd-related-card:hover .cd-related-name::after{ opacity:1; }
@media (max-width:640px){ .cd-related-grid{ grid-template-columns:1fr; } }


/* ============================================================
   SECTION 3 — SITE-WIDE BRAND RULES  (Blueprint §19.7 hard rules)
   ⚠ AFFECTS THE WHOLE SITE (every heading, link, subscribe button).
   Test on staging. If it clashes with Eikra's existing styling,
   comment this section out and we'll harden the selectors.
   ============================================================ */
h1,h2,h3,h4,h5,h6{ color:var(--navy-ink); }        /* navy headings site-wide */
a,.btn-primary{ color:var(--brand-blue); }          /* blue interactive */
.btn-subscribe,.btn-confirm{ background:var(--green); color:#fff; } /* green ONLY here */
.btn-subscribe:hover,.btn-confirm:hover{ background:var(--green-dark); }

/* ============================================================
   End of brand.css
   ============================================================ */