/* ==========================================================================
   DARJA RIHLA - POST 1451 VISUAL LAYER (CANDIDATE, PASS 01B)
   File:    dr-post-conditional-access-1451.css
   Post:    How Conditional Access Reduces Identity Attack Damage:
            7 Critical Security Layers
   Slug:    conditional-access-reduces-attack-damage
   ID:      1451 (WordPress adds body class "postid-1451" to this post only)

   Scope rules
   - Every selector starts with body.postid-1451 (or with a html[data-theme] /
     html:not([data-theme]) guard that also starts with body.postid-1451).
   - Visual only. post_content, the shared TOC, the single-post shell,
     dr-post-base.css, dr-post-cyber.css and all JavaScript are not changed.
   - NOT enqueued. Registration is a separate, reviewed step
     (see Conditional-Access-1451-Deployment-Voorstel-2026-10-11.md).
   - No animation is added, so prefers-reduced-motion needs no override.

   Status: NEEDS HUMAN REVIEW. Offline candidate. Not checked in a live render.
   ========================================================================== */


/* 1. Article surface and reading column
   Outer page = shell. Central article = this panel. Figures keep their own
   surfaces. Text stays left-aligned inside a centred column. */

body.postid-1451 .wp-block-post-content {
  --dr-post-readable: 780px;
  background-color: transparent;
  background-image: none;
}

body.postid-1451 .dr-single-content-wrap {
  max-width: var(--dr-post-visual, 1180px);
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 48px);
  border-radius: var(--dr-radius-lg, 24px);
  background-color: var(--dr-bg-soft, #f8f3ea);
}

/* Dark is the :root default. Guards below beat the production dark rules
   (html[data-theme="dark"] body.dr-single ..., specificity 0,3,2).
   Before theme JavaScript sets data-theme (default light), the dark guard
   applies. This is the same state as the production dark tokens. Flash
   not measured. */
html:not([data-theme="light"]):not([data-theme="sepia"]) body.postid-1451 .dr-single-content-wrap {
  background-color: var(--dr-bg-soft, #0f1d2c);
}

html:not([data-theme="light"]):not([data-theme="sepia"]) body.postid-1451 .wp-block-post-content {
  background-color: transparent;
  background-image: none;
}


/* 1b. Page tone behind the article
   Production: .dr-single-body-wrap background var(--dr-surface-alt,
   rgba(0,0,0,0.15)). --dr-surface-alt is not defined in the theme CSS
   searched, so the rgba fallback applies in light mode. Dark is set to
   #040910 by html[data-theme="dark"] (0,3,2).
   Candidate: light page --dr-bg-alt (#ebe2d4). Article panel --dr-bg-soft
   (light #f8f3ea, dark #0f1d2c). Dark page --dr-bg-deep (#040910).
   Computed luminance ratios: light article vs page 1.16:1, dark article
   vs page 1.17:1. Subtle by design. Human review decides. */

body.postid-1451 .dr-single-body-wrap {
  background-color: var(--dr-bg-alt, #ebe2d4);
}

html:not([data-theme="light"]):not([data-theme="sepia"]) body.postid-1451 .dr-single-body-wrap {
  background-color: var(--dr-bg-deep, #040910);
}


/* 2. Body text
   Explicit system sans-serif: Inter and Source Sans 3 are not in the
   production Google Fonts request for this post. Headings are not changed. */

body.postid-1451 .wp-block-post-content p,
body.postid-1451 .wp-block-post-content li {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.7;
}

@media (min-width: 1100px) {
  body.postid-1451 .wp-block-post-content p,
  body.postid-1451 .wp-block-post-content li {
    font-size: 1.125rem;
  }
}

@media (max-width: 640px) {
  body.postid-1451 .wp-block-post-content p,
  body.postid-1451 .wp-block-post-content li {
    font-size: 1rem;
  }
}


/* 3. Text inside the two navy diagram containers
   Production: group background #0f1c3d (cyan border) and column background
   #101a33 hold a label, an h3, a paragraph list and a caption. In light mode
   the inherited text colour (#2c2519) is dark on navy. The navy backgrounds
   stay, because they are part of the diagram identity.
   Values: dr-theme-tokens.css, --dr-text-on-dark #eef4f8 and
   --dr-text-on-dark-muted (0.66). Explicit here because dr-theme-tokens.css
   is not guaranteed on this page. Accent: --dr-accent-3 #6fd0e0. */

body.postid-1451 .wp-block-post-content .wp-block-group[style*="background-color:#0f1c3d"],
body.postid-1451 .wp-block-post-content .wp-block-column[style*="background-color:#101a33"] {
  color: #eef4f8;
}

body.postid-1451 .wp-block-post-content .wp-block-group[style*="background-color:#0f1c3d"] :is(p, li, h2, h3, h4, h5, h6, span, strong, em, blockquote),
body.postid-1451 .wp-block-post-content .wp-block-column[style*="background-color:#101a33"] :is(p, li, h2, h3, h4, h5, h6, span, strong, em, blockquote) {
  color: #eef4f8;
}

body.postid-1451 .wp-block-post-content .wp-block-group[style*="background-color:#0f1c3d"] figcaption,
body.postid-1451 .wp-block-post-content .wp-block-column[style*="background-color:#101a33"] figcaption {
  color: rgba(238, 244, 248, 0.72);
}

body.postid-1451 .wp-block-post-content .wp-block-group[style*="background-color:#0f1c3d"] a,
body.postid-1451 .wp-block-post-content .wp-block-column[style*="background-color:#101a33"] a {
  color: #6fd0e0;
}


/* 4. Separators
   19 hr.wp-block-separator elements stay in the source. Only the vertical
   space is reduced. Production: margin-block clamp(2rem, 5vw, 4rem). */

body.postid-1451 .wp-block-post-content hr.wp-block-separator {
  margin-block: clamp(1.5rem, 3.5vw, 2.5rem);
}


/* 5. Mobile stacking of the Token Protection columns
   The columns carry inline flex-basis (33.33% and 66.66%). An inline value
   beats any normal stylesheet declaration, so !important is required here.
   Documented exception. Only applies at 820px and below. */

@media (max-width: 820px) {
  body.postid-1451 .wp-block-post-content .wp-block-columns > .wp-block-column {
    flex-basis: 100% !important;
    min-width: 0;
    margin-left: 0 !important;
  }
}