/* ============================================================
   security.html — section badges (Hex Trim) + global page background
   Linked LAST in <head> so it wins over security-a11y.css and
   security-compact.css without editing either.
   ============================================================ */

/* ── 1. Section badges: "Hex Trim" (badges.html option 14) ───
   Face and outline are two BACKGROUND LAYERS on the element itself:
   the padding-box layer paints the amber face, the border-box layer
   paints the dark outline, and the transparent border decides how
   thick that outline is (2px top/bottom, 1px sides).

   This matters because several of these badges hold their label as a
   bare text node with no wrapping element. A pseudo-element face has
   to be lifted above the text with z-index, and any slip there hides
   the label completely. Backgrounds always paint below text, so the
   label cannot be covered however the stack resolves. */
.secx-meta,
.badge-pill,
.idgov-kicker,
.wf-kicker,
.p5-eyebrow,
.s7-chip,
.s8-pill,
.pillars-kicker,
.infra-kicker,
.s9-kicker {
  --hexbadge-face: #ffbd7a;
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: max-content !important;
  max-width: 100% !important;
  gap: 6px !important;
  padding: 3px 22px !important;
  min-height: 26px !important;
  border: 2px solid transparent !important;
  border-left-width: 1px !important;
  border-right-width: 1px !important;
  border-radius: 0 !important;
  background:
    linear-gradient(var(--hexbadge-face), var(--hexbadge-face)) padding-box,
    linear-gradient(#080d2a, #080d2a) border-box !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  clip-path: polygon(0 50%, 14px 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 14px 100%);
  font: 700 0.68rem/1 AnekBangla, Inter, system-ui, sans-serif !important;
  letter-spacing: 0.005em !important;
  text-transform: none !important;
  color: #080d2a !important;
}

.secx-meta > *, .badge-pill > *, .idgov-kicker > *, .wf-kicker > *,
.p5-eyebrow > *, .s7-chip > *, .s8-pill > * > * {
  color: #080d2a !important;
}

.secx-meta strong { font-weight: 800; }
.secx-meta {
  margin-bottom: 4px !important;
}
.secx-section h2 { margin-top: 0; }

/* A different face per badge, in page order. */
.pillars-kicker { --hexbadge-face: #ffd6a5 !important; }
.infra-kicker   { --hexbadge-face: #b9c8ff !important; }
.s9-kicker      { --hexbadge-face: #a5e8d0 !important; }
.secx-meta      { --hexbadge-face: #ffbd7a !important; }
.badge-pill     { --hexbadge-face: #a5e8d0 !important; }
.idgov-kicker   { --hexbadge-face: #bce9f6 !important; }
.wf-kicker      { --hexbadge-face: #ffd15b !important; }
.p5-eyebrow     { --hexbadge-face: #f4d6f8 !important; }
.s7-chip        { --hexbadge-face: #c9e8a5 !important; }
.s8-pill  { --hexbadge-face: #ffc4c4 !important; }


/* Sit the badge directly on top of the heading. The gap was the badge margin
   plus whatever top margin the heading carried. */
.secx-meta, .badge-pill, .idgov-kicker, .wf-kicker,
.p5-eyebrow, .s7-chip, .s8-pill,
.pillars-kicker,
.infra-kicker,
.s9-kicker {
  margin-bottom: 6px !important;
}

.secx-section h2,
.idgov-headline,
.p5-head h2,
.wf-section h2 {
  margin-top: 0 !important;
}

.wf-kicker span[class*="rounded-full"], .idgov-kicker-dot { flex: 0 0 auto; }
.s7-chip .s7-chip-icon { width: 13px; height: 13px; }

@media (max-width: 640px) {
  .secx-meta, .badge-pill, .idgov-kicker, .wf-kicker,
  .p5-eyebrow, .s7-chip, .s8-pill,
.pillars-kicker,
.infra-kicker,
.s9-kicker {
    padding: 3px 18px !important;
    font-size: 0.62rem !important;
  }
}


/* The global-canvas background that used to live here has been removed:
   it forced <body> transparent and stripped section backgrounds, which is
   what distorted the page. Badges only from here on. */



/* Alignment is deliberately NOT set here. inline-flex makes the badge an
   inline-level box, so it inherits whatever alignment its section header
   already uses — centred headers centre it, left headers left-align it. Any
   forced margin or align-self here would fight one of those two cases. */


/* ── Heading alignment: match the badge above it ─────────────────────
   The badge follows its section header's alignment (it is inline-flex, so it
   inherits text-align). Several headings then re-centre THEMSELVES and break
   away from it: .wf-heading carries Tailwind's `mx-auto text-center`, which
   beats the `text-align: left` its own .wf-header sets. The rest centre via
   their section CSS.

   Every selector below was checked against the markup before being written —
   an earlier pass used .wf-head and .idgov-head, neither of which exists, so
   those rules silently matched nothing. */
.wf-header .wf-heading,
.wf-header .wf-subhead,
#as-identity-gov-s2 .idgov-headline,
.p5-privacy-section .p5-head,
.p5-privacy-section .p5-head > *,
#as-compliance-posture .s7-head,
#as-compliance-posture .s7-head-row,
#as-compliance-posture .s7-head > *,
.core-pillars .pillars-intro,
.core-pillars .pillars-intro > *,
#as-infra-bento .infra-wrap > * {
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* The two head rows are flex containers; left-align their tracks too. */
#as-compliance-posture .s7-head-row,
.p5-privacy-section .p5-head {
  align-items: flex-start !important;
  justify-content: flex-start !important;
}


/* ── Section-badge cleanups ──────────────────────────────────────────
   The infra section already renders its own eyebrow (.infra-badge, built by
   script/security-infra-bento.js) — the hex badge added above it made two.
   The JS-built one goes; the hex badge is the one that matches every other
   section. */
#as-infra-bento .infra-badge { display: none !important; }

/* The compliance badge carried a shield icon and a note line beside it;
   neither appears on any other section badge. */
.s7-chip .s7-chip-icon { display: none !important; }
#as-compliance-posture .s7-head-note { display: none !important; }



/* ── Final CTA: a distinct colour per outer card ─────────────────────
   Previous attempt stacked white at 86%/62% over the gradient, which washed
   the colour out to near-white — that is why the cards still looked plain.
   The wash is now applied directly, and the inner panels sit on a light tint
   of the same hue so each card reads as one colour family.

   Cards are addressed by nth-of-type among .s9-card siblings rather than by
   column wrapper, which the earlier rules got wrong. */
#s9-security-cta .s9-card.s9-compact {
  border-color: var(--s9-edge) !important;
  background: var(--s9-wash) !important;
}

#s9-security-cta .s9-card.s9-compact .s9-list-item,
#s9-security-cta .s9-card.s9-compact .s9-mini {
  background: var(--s9-inner) !important;
  border-color: var(--s9-edge) !important;
}

/* Security Posture Highlights — green */
#s9-security-cta .s9-left .s9-card.s9-compact {
  --s9-wash: linear-gradient(155deg, #d9f7e6 0%, #eafaf1 55%, #f4fdf8 100%);
  --s9-inner: rgba(255, 255, 255, 0.72);
  --s9-edge: rgba(16, 185, 129, 0.34);
}

/* What Your Team Gets — blue */
#s9-security-cta .s9-right .s9-card.s9-compact:nth-of-type(1) {
  --s9-wash: linear-gradient(155deg, #d6ecfd 0%, #e8f4fe 55%, #f3faff 100%);
  --s9-inner: rgba(255, 255, 255, 0.74);
  --s9-edge: rgba(14, 165, 233, 0.34);
}

/* Shared Responsibility — violet */
#s9-security-cta .s9-right .s9-card.s9-compact:nth-of-type(2) {
  --s9-wash: linear-gradient(155deg, #ece2fb 0%, #f4ecfd 55%, #fbf6ff 100%);
  --s9-inner: rgba(255, 255, 255, 0.74);
  --s9-edge: rgba(168, 85, 247, 0.34);
}

/* Fallback so no card can ever render without a wash. */
#s9-security-cta .s9-card.s9-compact {
  --s9-wash: linear-gradient(155deg, #e6eefc 0%, #f2f6fe 100%);
  --s9-inner: rgba(255, 255, 255, 0.72);
  --s9-edge: rgba(99, 102, 241, 0.30);
}


/* ── CTA buttons: icon riding high above the label ───────────────────
   .s9-btn-icon and .s9-btn-stack are both inline-flex, but .s9-btn itself
   never establishes a flex context — so the two sit as inline-level boxes on
   a shared text baseline. The stack's baseline comes from the first of its
   two text lines; the icon box has no text, so its baseline is its bottom
   margin edge. Two different baselines, hence the icon sitting higher.

   Making the button a flex container replaces baseline alignment with
   align-items, so the icon centres against the whole label block. */
#s9-security-cta .s9-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.6rem !important;
}

#s9-security-cta .s9-btn-icon {
  flex: 0 0 auto !important;
  align-self: center !important;
}

#s9-security-cta .s9-btn-stack {
  align-self: center !important;
}


/* ── CTA typography: body copy in NibPro ─────────────────────────────
   The whole CTA had inherited AnekBangla, which is the display face used for
   headings across this page. Running sentences belong in NibPro, matching
   `font-family: NibPro, Georgia, serif` already used for body copy in
   security.css and security-a11y.css.

   Headings (h2/h3/h4), the badge, the buttons and the small chips are left in
   AnekBangla — those are labels, not prose. */
#s9-security-cta .s9-lead,
#s9-security-cta .s9-response,
#s9-security-cta .s9-note,
#s9-security-cta .s9-btn-sub,
#s9-security-cta .s9-list-item p,
#s9-security-cta .s9-mini p,
#s9-security-cta .s9-card p:not(.s9-kicker) {
  font-family: NibPro, Georgia, serif !important;
}

/* The lead paragraph carries the section's argument — give it the same
   weight relief the rest of the body copy has. */
#s9-security-cta .s9-lead {
  font-weight: 500 !important;
}


/* ── FAQ sidebar: stick while the questions scroll ───────────────────
   .s8-side was a plain grid with no position, so it scrolled away with the
   page. Its parent .s8-content-grid already sets `align-items: start`, which
   is the condition sticky needs — a stretched grid item is full-height and can
   never stick.

   Scoped to 1200px — the width where .s8-content-grid actually becomes two
   columns. Below that the
   sidebar sits under the questions and has nothing to stick alongside.
   90px clears the fixed navbar, matching the offset used elsewhere on the
   site. max-height + overflow keeps a tall sidebar (it ends in a large
   illustration) from being taller than the viewport, which would stop it
   sticking at all. */
@media (min-width: 1200px) {
  #as-security-faq .s8-side {
    position: sticky;
    top: 90px;
    align-self: start;
    max-height: calc(100vh - 110px);
    overflow-y: auto;
    scrollbar-width: thin;
  }
}


/* ── What was actually stopping the sidebar sticking ─────────────────
   position: sticky is inert if ANY ancestor is a scroll container. Two were:

     #as-security-faq      { overflow: hidden }     (clips its background orbs)
     body.security-page-body { overflow-x: hidden } (overflow-x:hidden computes
                                                     overflow-y to auto)

   `clip` does the same visual clipping as `hidden` but explicitly does NOT
   create a scroll container, so the sticky ancestor chain stays intact. That
   keeps the orbs contained and the horizontal-overflow guard in place while
   letting the sidebar stick. */
body.security-page-body {
  overflow-x: clip !important;
}

#as-security-faq {
  overflow: clip !important;
}


/* ── Global canvas background (same system as index.html) ────────────
   A fixed <canvas id="ptx-bg-canvas"> at z-index -1, painted by
   script/homepage-global-bg.js from the custom properties below.

   The base colour must sit on <html>, not <body>: an opaque <body> paints
   OVER a position:fixed child at z-index -1 and the canvas never appears.

   Two sections deliberately keep their own surface — .core-pillars (black)
   and #as-security-faq (its own dark .s8-bg layers). Every other section had
   either no background of its own or the same cream #ebe3d8, so clearing
   them just lets the one canvas read through the page. */
:root {
  --ptx-bg-color:        #fcfdee;
  --ptx-bg-minor:        #cef1e8;
  --ptx-bg-major:        #bce9f6;
  --ptx-bg-cross:        #f4d6f8;
  --ptx-bg-highlight:    #009f75;
  --ptx-bg-minor-op:     0.34;
  --ptx-bg-major-op:     0.40;
  --ptx-bg-cross-op:     0.52;
  --ptx-bg-highlight-op: 0.10;
}

html { background-color: var(--ptx-bg-color) !important; }

body.security-page-body {
  background: transparent !important;
  background-color: transparent !important;
}

#ptx-bg-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  pointer-events: none;
  display: block;
}

body.security-page-body .hero-section,
body.security-page-body .secx-section,
body.security-page-body #as-identity-gov-s2,
body.security-page-body .wf-section,
body.security-page-body .p5-privacy-section,
body.security-page-body .infra-bento-section,
body.security-page-body .s7-section,
body.security-page-body #s9-security-cta {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}


/* ── Workflow panel title sized below the section heading ────────────
   #wfTitle (the scenario panel's heading — "Student Record Access",
   "HR & Payroll", whichever card is selected) was set to
   clamp(38px, 3.2vw, 62px), larger at every width than the section heading
   .wf-heading it sits under at clamp(34px, 3.9vw, 56px). A panel title
   outranking its own section header inverts the hierarchy.

   Roughly 60% of the section heading, which puts it clearly below the h2 and
   in line with the other card titles in this section. */
#as-sec-workflows #wfTitle,
#wfTitle {
  font-size: clamp(21px, 1.9vw, 32px) !important;
  line-height: 1.06 !important;
}


/* ====================================================================
   RESPONSIVE PASS — every rule below sits inside a max-width query, so
   the desktop composition is untouched by construction.

   security-final-cta.css ships NO media queries at all, so its grids
   (.s9-actions 2-col, .s9-chips 3-col, .s9-two-col 2-col, .s9-modal-grid
   2-col) stayed multi-column down to 320px. That is the whole gap — the
   other sections already collapse via their own max-width rules, which I
   verified before writing anything here.
   ==================================================================== */

@media (max-width: 900px) {
  /* Two buttons side by side leaves each ~150px on a phone; the secondary
     one carries a two-line label and cannot fit. */
  #s9-security-cta .s9-actions {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0.6rem !important;
  }

  #s9-security-cta .s9-chips {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.5rem !important;
  }
}

@media (max-width: 700px) {
  #s9-security-cta .s9-chips,
  #s9-security-cta .s9-two-col,
  #s9-security-cta .s9-modal-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* The response line and the enterprise link sit on one row on desktop. */
  #s9-security-cta .s9-meta {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.45rem !important;
  }

  #s9-security-cta .s9-card {
    padding: 1.05rem 0.95rem !important;
    border-radius: 20px !important;
  }

  #s9-security-cta .s9-card-head {
    flex-wrap: wrap !important;
    gap: 0.4rem !important;
  }

  /* Display type scaled for a phone measure. */
  #s9-security-cta h2 {
    font-size: clamp(1.45rem, 6.4vw, 2.1rem) !important;
    line-height: 1.1 !important;
  }

  #s9-security-cta .s9-lead {
    font-size: 0.98rem !important;
    line-height: 1.5 !important;
  }

  /* Decorative blobs are 420-520px wide and absolutely positioned; at phone
     width they wash out the whole card. */
  #s9-security-cta .s9-blob {
    transform: scale(0.55) !important;
    opacity: 0.5 !important;
  }
}

@media (max-width: 420px) {
  #s9-security-cta .s9-btn {
    padding: 0.65rem 0.7rem !important;
    font-size: 0.9rem !important;
  }

  #s9-security-cta .s9-btn-sub {
    font-size: 0.74rem !important;
  }

  #s9-security-cta .s9-list-item {
    padding: 0.7rem 0.75rem !important;
  }
}


/* ── Grids that never collapsed ──────────────────────────────────────
   Three grids had no max-width rule anywhere in the page's stylesheets, so
   they kept their desktop track counts all the way down to 320px:

     .secx-posture   repeat(4, 1fr)                        -> ~90px/col at 390px
     .secx-grid      repeat(2, 1fr)
     .p5-grid        minmax(300px,1fr) minmax(480px,2.5fr) -> 780px minimum,
                     which forces horizontal scrolling on every phone

   .p5-grid is the one that actually overflows the viewport rather than just
   cramping, so it collapses earliest. */
@media (max-width: 1100px) {
  #as-security-overview .secx-posture {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 1024px) {
  .p5-privacy-section .p5-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (max-width: 760px) {
  #as-security-overview .secx-posture,
  #as-security-overview .secx-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0.75rem !important;
  }
}


/* ── Infrastructure bento: prose in NibPro ───────────────────────────
   The whole section renders in AnekBangla, the display face. The running
   sentences belong in NibPro, matching `font-family: NibPro, Georgia, serif`
   used for body copy elsewhere on this page.

   .infra-copy is the section intro, .infra-card-desc the per-card sentence —
   both built at runtime by script/security-infra-bento.js, which is why they
   do not appear in security.html. Card titles (.infra-title, the coloured
   headings) and the chips stay in AnekBangla: labels, not prose. */
#as-infra-bento .infra-copy,
#as-infra-bento .infra-card-desc,
#as-infra-bento .infra-footer-copy {
  font-family: NibPro, Georgia, serif !important;
  font-weight: 500 !important;
}