/* =========================================================================
   main.css — Cloud Hardening Guide
   -------------------------------------------------------------------------
   Foundation stylesheet. Contains the canonical palette comment block,
   self-hosted @font-face declarations, era-correct minimal reset, base
   typography, and the float-based two-column layout primitive.

   Constraints enforced by Wave 0 lint scripts:
   - NO CSS custom properties (--foo:)        — DS-04
   - NO Flexbox / NO CSS Grid layout modes      — DS-02
   - Every hex literal MUST appear in the      — palette singleton
     COLOR PALETTE comment block below.

   Authored: 2026-05-22 (Phase 01, Plan 03)
   ========================================================================= */


/* =========================================================================
   COLOR PALETTE — Cloud Hardening Guide (era: 2010-2012)
   -------------------------------------------------------------------------
   Page background          #d6dde8   blue-gray linen (body bg)
   Pure white               #ffffff   chrome text on dark header / nav
   Pure black               #000000   print.css body color + severity border (B&W print survival)
   Content area bg          #f9f9f9   near-white (wrapper)
   Sidebar bg               #e4e9ef
   Sidebar border           #c0c8d0
   TOC title bg top         #dde2e8   sidebar section title gradient top
   TOC title bg bottom      #d4d9e0   sidebar section title gradient bottom
   Header gradient top      #3a4a6b   dark navy
   Header gradient bottom   #2a3a58
   Header gradient mid      #32425f   (computed midpoint, contrast-checked)
   Primary blue             #3a7dc9   web 2.0 cornflower
   Primary blue light       #5094d8
   Primary blue mid         #2d6db8
   Primary blue dark        #1f5aa8
   Primary blue border      #1a5298
   Link                     #1a5bb8
   Link hover               #c0392b   red (era-correct)
   Link visited             #551a8b   browser default purple
   Text body                #333333
   Text secondary           #666666
   Border (panel)           #c8cdd6
   Warning bg               #fff3cd
   Warning text             #7a5a00
   Warning border           #e6a817
   Danger bg                #f8d7da
   Danger text              #7d1a23
   Danger border            #c0392b
   Code block bg            #f4f4f4
   Code block border        #dddddd
   Panel bg neutral         #f5f5f5   threat-model / incident-callout backdrop
   Pill bg neutral          #ececf0   control-type pill background
   Placeholder dash         #999999   img-placeholder dashed border
   Sev-high bg              #ffe4cc
   Sev-high text            #8a4400
   Sev-high border          #e07a1e
   Sev-low bg               #e4eaf0
   Sev-low text             #3a4a5a
   Sev-low border           #8a99a8
   Copy-btn bg default      #e8edf3   copy button background (normal state)
   Copy-btn gradient top    #f0f4f8   copy button gradient top stop
   Copy-btn gradient bottom #d8dfe8   copy button gradient bottom stop
   Copy-btn copied green    #2e7d32   copy button text/border (Copied! state)
   Copy-btn copied bg       #e8f5e9   copy button bg (Copied! state)
   Copy-btn copied top      #f1f8e9   copy button gradient top (Copied! state)
   Copy-btn copied bottom   #dcedc8   copy button gradient bottom (Copied! state)

   GRADIENT STOPS (canonical — do not duplicate strings elsewhere)
   Glossy header        #3a4a6b 0% -> #2a3a58 100%
   Primary button       #5094d8 0% -> #3a7dc9 50% -> #2d6db8 51% -> #1f5aa8 100%
   Panel gloss overlay  rgba(255,255,255,0.30) -> rgba(255,255,255,0.05)
   Inset sidebar shade  rgba(0,0,0,0.06) on right edge (box-shadow inset)
   Body texture         repeating-linear-gradient at 45deg, rgba(255,255,255,0.03) stripes

   FRAMEWORK VERSIONS PINNED (compliance authoring uses these strings verbatim)
   CIS AWS Foundations  v3.0.0
   CIS Azure            v3.0.0
   CIS GCP              v4.0.0
   CIS OCI              v2.0.0
   NIST 800-53          rev5 (upd1, Jan 2022)
   ISO 27001            :2022
   ISO 27017            :2015
   ========================================================================= */


/* =========================================================================
   RESET
   Era-correct minimal reset. Full Eric Meyer reset banned as overkill for
   this scope; only the rules that actually bite are zeroed.
   ========================================================================= */
* { box-sizing: border-box; }

html, body, h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, figure, blockquote {
    margin: 0;
    padding: 0;
}

ul, ol { list-style-position: outside; padding-left: 1.4em; }

img { max-width: 100%; height: auto; border: 0; }

table { border-collapse: collapse; border-spacing: 0; }

button, input, select, textarea { font: inherit; color: inherit; }


/* =========================================================================
   @FONT-FACE — Self-hosted WOFF2 under /assets/fonts/
   Every block uses font-display: swap (Pitfall 4 — 2018+ rule, invisible
   to aesthetic). Paths are relative to /css/ so the production layout is
   /css/main.css + /assets/fonts/*.woff2.
   ========================================================================= */

@font-face {
    font-family: 'PT Serif';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../assets/fonts/PT_Serif-Regular.woff2') format('woff2');
}

@font-face {
    font-family: 'PT Serif';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../assets/fonts/PT_Serif-Bold.woff2') format('woff2');
}

@font-face {
    font-family: 'PT Serif';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('../assets/fonts/PT_Serif-Italic.woff2') format('woff2');
}

@font-face {
    font-family: 'PT Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../assets/fonts/PT_Sans-Regular.woff2') format('woff2');
}

@font-face {
    font-family: 'PT Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../assets/fonts/PT_Sans-Bold.woff2') format('woff2');
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../assets/fonts/OpenSans-Regular.woff2') format('woff2');
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../assets/fonts/OpenSans-SemiBold.woff2') format('woff2');
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../assets/fonts/OpenSans-Bold.woff2') format('woff2');
}

@font-face {
    font-family: 'Lora';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../assets/fonts/Lora-Regular.woff2') format('woff2');
}

@font-face {
    font-family: 'Lora';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('../assets/fonts/Lora-Italic.woff2') format('woff2');
}


/* =========================================================================
   BASE TYPOGRAPHY
   Body uses PT Serif; headings use PT Sans; UI/nav uses Open Sans;
   callouts can use Lora; code uses Courier New (system).
   Anti-aliasing rules intentionally omitted (era-correct).
   ========================================================================= */

body {
    font: 14px/1.5 'PT Serif', Georgia, 'Times New Roman', serif;
    color: #333333;
    background-color: #d6dde8;
    background-image: repeating-linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.03) 0,
        rgba(255, 255, 255, 0.03) 1px,
        transparent 1px,
        transparent 6px
    );
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'PT Sans', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 700;
    color: #333333;
    line-height: 1.25;
    margin: 1em 0 0.5em 0;
}

h1 { font-size: 26px; }
h2 { font-size: 20px; }
h3 { font-size: 17px; }
h4 { font-size: 15px; }
h5 { font-size: 14px; text-transform: uppercase; letter-spacing: 0.04em; }
h6 { font-size: 13px; color: #666666; }

p { margin: 0 0 1em 0; }

a            { color: #1a5bb8; text-decoration: underline; }
a:hover      { color: #c0392b; }
a:visited    { color: #551a8b; }
a:active     { color: #c0392b; }

em, i { font-style: italic; }
strong, b { font-weight: 700; }

small { font-size: 12px; color: #666666; }

code, kbd, samp, pre {
    font-family: 'Courier New', Courier, monospace;
    font-size: 13px;
    line-height: 1.5;
}

code {
    background-color: #f4f4f4;
    border: 1px solid #dddddd;
    padding: 1px 4px;
    border-radius: 2px;
}

pre {
    background-color: #f4f4f4;
    border: 1px solid #dddddd;
    padding: 10px 12px;
    overflow-x: auto;
    margin: 0 0 1em 0;
}

pre code { background: transparent; border: 0; padding: 0; }

blockquote {
    margin: 1em 0;
    padding: 8px 14px;
    border-left: 4px solid #c8cdd6;
    color: #666666;
    font-family: 'Lora', Georgia, serif;
    font-style: italic;
}


/* =========================================================================
   LAYOUT — Float-based two-column with clearfix
   Per RESEARCH.md Pattern 2. Sidebar floats left; main-content uses
   margin-left so it does NOT need to float (period-correct mixed model).
   NO Flexbox, NO CSS Grid layout modes anywhere in this codebase.
   ========================================================================= */

.wrapper {
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
    background-color: #f9f9f9;
    border-left: 1px solid #c8cdd6;
    border-right: 1px solid #c8cdd6;
}

.page-body {
    display: block;
    position: relative;
}

.page-body::after {
    content: "";
    display: table;
    clear: both;
}

.sidebar {
    float: left;
    width: 220px;
    background-color: #e4e9ef;
    border-right: 1px solid #c0c8d0;
    box-shadow: inset -3px 0 6px rgba(0, 0, 0, 0.06);
    min-height: 400px;
}

.main-content {
    margin-left: 220px;
    padding: 24px 32px;
}

/* Clearfix utility (canonical 2011-era pattern) */
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}


/* =========================================================================
   UTILITIES
   ========================================================================= */

.text-muted     { color: #666666; }
.text-center    { text-align: center; }
.text-right     { text-align: right; }

/* Visually hidden but available to screen readers */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

hr {
    border: 0;
    border-top: 1px solid #c8cdd6;
    margin: 1.5em 0;
}