/* ============================================================
   HP AI Academy — styles.css (SHARED BASE)
   Fonts, design tokens, typography, buttons, header, footer,
   legal pages. Every page loads this file.
   Homepage-only styles live in css/home.css.
   ============================================================ */
/* ---------- Brand font: HP Forma DJR Office ---------- */
@font-face { font-family: "HP Forma DJR"; src: url("../assets/ttf/HPFormaDJROffice-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "HP Forma DJR"; src: url("../assets/ttf/HPFormaDJROffice-Italic.ttf") format("truetype"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "HP Forma DJR"; src: url("../assets/ttf/HPFormaDJROffice-Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "HP Forma DJR"; src: url("../assets/ttf/HPFormaDJROffice-MediumItalic.ttf") format("truetype"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "HP Forma DJR"; src: url("../assets/ttf/HPFormaDJROffice-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "HP Forma DJR"; src: url("../assets/ttf/HPFormaDJROffice-BoldItalic.ttf") format("truetype"); font-weight: 700; font-style: italic; font-display: swap; }

/* The brochure palette is fixed, so the page renders identically in
   Light and Dark Mode. Declaring the scheme stops browsers applying
   their own dark treatment to form controls, scrollbars and inputs,
   which would otherwise shift colours away from brand. */
:root { color-scheme: only light; }

:root {
  --black:   #000000;
  --ink:     #14141A;          /* near-black, dark sections */
  --ink-2:   #1E1E28;
  --white:   #FFFFFF;
  --gray:    #595959;
  --gray-2:  #8A8A93;
  --line:    #E4E4E8;
  /* Alternating band tone. #F5F5F7 was only a 1.09 contrast ratio
     against white — effectively invisible. This reads as a definite
     step (1.18) while staying soft. */
  --bg-soft: #ECECF1;

  --accent:      #024AD8;      /* electric blue — primary */
  --accent-soft: #E8EFFC;
  --hp-blue:     #0096D6;
  /* Orange Bloom. #F4694E and #D24A2F were used here previously; neither
     appears in docs/BRANDING.md, so both now resolve to the real brand
     value. --coral-ink is the tint-9 step from the doc's Orange Bloom
     ramp, for text that needs more contrast on white. */
  --coral:       #FF5050;      /* Orange Bloom — secondary accent */
  --coral-ink:   #C93A3A;      /* darker step, AA-safe on white for text */

  /* Pyramid / tier colours — sampled from the final brochure pyramid.
     Lead is a true RED (not orange) per the 29-Jul-2026 review. */
  --shape:  #024AD8;
  --lead:   #FF5050;
  --learn:  #568393;
  --pyramid-band: #CDCDCD;     /* grey flank behind each tier */
  --pyramid-apex: #404040;

  --font: "HP Forma DJR", "Archivo", Arial, Helvetica, sans-serif;
  --maxw: 1320px;      /* content column — widened from 1240 so large
                          screens carry a little more content and a
                          little less empty margin */
  --ease: cubic-bezier(.22,.8,.32,1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

a:focus-visible, button:focus-visible, .btn:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 2px;
}

/* ---------- Skip to content (first focusable element on every page) ---------- */
.skip-link {
  position: absolute; left: 8px; top: 8px; z-index: 1000;
  transform: translateY(-200%);
  background: var(--black); color: var(--white);
  padding: 12px 20px; font-size: 15px; font-weight: 700;
  transition: transform .15s var(--ease);
}
.skip-link:focus { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0; font-family: var(--font); color: var(--black); background: var(--white);
  line-height: 1.55; -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* ---------- Typography ---------- */
h1, h2, h3 { font-weight: 700; line-height: 1.08; margin: 0 0 .4em; letter-spacing: -.01em; }
h1 { font-size: clamp(42px, 6.5vw, 76px); }
h2 { font-size: clamp(32px, 4.5vw, 52px); }
h3 { font-size: 22px; }
p  { font-size: 16px; color: var(--gray); margin: 0 0 1em; }
.eyebrow { font-size: 13px; letter-spacing: 3px; text-transform: uppercase; color: var(--accent); font-weight: 700; margin: 0 0 14px; }
.lede { font-size: 19px; max-width: 62ch; }

/* ---------- Buttons ---------- */
.btn { display: inline-block; background: var(--black); color: var(--white); padding: 13px 30px; font-size: 15px; font-weight: 700; border: 2px solid var(--black); border-radius: 0; cursor: pointer; transition: background .15s, color .15s, transform .15s; }
.btn:hover { background: var(--white); color: var(--black); }
.btn--ghost { background: transparent; color: var(--black); }
.btn--ghost:hover { background: var(--black); color: var(--white); }
.btn--sm { padding: 8px 18px; font-size: 14px; }
.btn--on-dark { background: var(--white); color: var(--black); border-color: var(--white); }
.btn--on-dark:hover { background: transparent; color: var(--white); }
.btn--ghost-dark { background: transparent; color: var(--white); border-color: var(--white); }
.btn--ghost-dark:hover { background: var(--white); color: var(--black); }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 90; background: rgba(255,255,255,.92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.nav { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.nav__logo { display: flex; align-items: center; gap: 12px; }
.nav__logo img { height: 42px; width: auto; }
.nav__logo span { font-weight: 700; font-size: 19px; letter-spacing: -.01em; }
/* Let the menu use the space it has instead of bunching at the right
   edge: the link group grows to fill the row and distributes evenly,
   with the CTA staying hard right. */
.nav__links {
  display: flex; gap: 28px; align-items: center;
  flex: 1; justify-content: flex-end; margin-left: 48px;
}
.nav__links a:not(.btn) { flex: 0 1 auto; }
@media (min-width: 941px) {
  .nav__links { gap: clamp(28px, 4.4vw, 64px); }
  .nav__links .btn { margin-left: clamp(8px, 2vw, 32px); }
}
.nav__links a { font-size: 15px; }
.nav__links a:hover { color: var(--accent); }
.nav__toggle { display: none; background: none; border: 0; cursor: pointer; padding: 10px; flex-direction: column; gap: 5px; }
.nav__toggle span { display: block; width: 24px; height: 2px; background: var(--black); transition: transform .2s, opacity .2s; }
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Sections ---------- */
.section { padding: 88px 0; }
.section--soft { background: var(--bg-soft); }
.section--dark { background: var(--ink); color: var(--white); }
.section--dark h2, .section--dark h3 { color: var(--white); }
.section--dark p { color: #B9BEC9; }

/* ---------- Footer ---------- */
.site-footer { background: var(--black); color: #C9C9CF; padding: 56px 0 40px; }
.site-footer .row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 22px; font-size: 14px; }
.site-footer a:hover { color: var(--white); }
.site-footer span { font-size: 13px; color: #8A8A93; }
.site-footer .footer-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 26px; }
.site-footer .footer-brand img { height: 36px; }
.site-footer .footer-brand b { color: var(--white); font-size: 17px; }
.footer-tag { font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: #8A8A93; margin: -16px 0 28px; }

/* ---------- Legal pages ---------- */
.legal { max-width: 780px; }
.legal h1 { font-size: clamp(32px, 5vw, 46px); margin-bottom: 6px; }
.legal h2 { font-size: 22px; margin: 34px 0 8px; }
.legal p, .legal li { max-width: 72ch; color: var(--gray); font-size: 16px; }
.legal ul { padding-left: 22px; }
.legal__date { color: var(--gray); font-size: 14px; margin-bottom: 28px; }
.legal a { color: var(--accent); text-decoration: underline; }
.legal__back { margin-top: 40px; font-weight: 700; }
.legal__back a { text-decoration: none; }

/* ---------- Responsive (shared) ---------- */
/* Six nav links plus the CTA do not fit below ~940px — collapse to the
   hamburger there, not at 720, or the logo and links overlap. */
@media (max-width: 940px) {
  .nav__toggle { display: flex; }
  .nav__links { position: absolute; top: 68px; left: 0; right: 0; background: var(--white); flex-direction: column; align-items: flex-start; gap: 0; padding: 8px 24px 20px; border-bottom: 1px solid var(--line); display: none; }
  .nav__links.is-open { display: flex; }
  .nav__links a { padding: 12px 0; width: 100%; border-bottom: 1px solid var(--line); }
  .nav__links a:last-child { border-bottom: 0; }
  /* In the dropdown, "Contact us" should read as a menu item, not a
     full-width black block. Strip the button treatment here. */
  .nav__links .btn { background: none; color: var(--black); border: 0; margin: 0; font-weight: 700; }
  .nav__links .btn:hover { background: none; color: var(--accent); }
}
@media (max-width: 720px) {
  .section { padding: 64px 0; }
}

/* ---------- Cookie consent banner ---------- */
.cc-banner {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 1000;
  max-width: 720px; margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px;
  background: var(--ink); color: #C9C9CF;
  padding: 18px 22px;
  box-shadow: 0 12px 40px rgba(0,0,0,.28);
  transform: translateY(140%); opacity: 0;
  /* Closed: visibility:hidden keeps the buttons out of the tab order and
     off the accessibility tree, not merely invisible (CODE-REVIEW M5).
     Transitioning it lets the slide-out finish before it goes away. */
  visibility: hidden;
  transition: transform .35s ease, opacity .35s ease, visibility .35s;
}
.cc-banner.is-open { transform: translateY(0); opacity: 1; visibility: visible; }
.cc-banner__text { flex: 1 1 300px; margin: 0; font-size: 14px; line-height: 1.5; }
.cc-banner__text a { color: var(--white); text-decoration: underline; }
.cc-banner__actions { display: flex; gap: 10px; flex-shrink: 0; }
.cc-btn {
  font: inherit; font-weight: 700; font-size: 14px; cursor: pointer;
  padding: 10px 20px; border: 1px solid transparent;
}
.cc-btn--accept { background: var(--accent); color: var(--white); }
.cc-btn--accept:hover { background: #0357f0; }
.cc-btn--reject { background: transparent; color: #C9C9CF; border-color: #3A3A44; }
.cc-btn--reject:hover { border-color: #5A5A66; color: var(--white); }
.cc-settings { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
  .cc-banner { transition: none; }
}

/* ============================================================
   BRAND MOTIF — the slanted blue parallelogram
   The single most recognizable device in the brochure: a hard
   -18° skewed HP-blue block. Square corners everywhere; the
   brand uses hard edges, never rounded cards.
   ============================================================ */
/* The skewed blue parallelogram was removed from the section headers.
   Kept out of the CSS entirely rather than left as dead rules. */

/* Section opener: coral eyebrow + black title, mirroring the PDFs */
.sec-open { margin-bottom: 44px; }
.sec-open__body { min-width: 0; max-width: 820px; }
.sec-open .eyebrow { color: var(--coral-ink); }
.sec-open h2 { margin-bottom: .25em; }
.sec-open .lede { margin-bottom: 0; }
.section--dark .sec-open .eyebrow { color: var(--coral); }

/* Coral tier title, as used on each themed section */
.tier-title { color: var(--coral-ink); font-weight: 700; }
.section--dark .tier-title { color: var(--coral); }

/* ---------- Include failure panel (js/include.js) ----------
   Visible error state instead of a silent console.error (H1). */
.include-error {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 1200;
  max-width: 560px; margin: 0 auto;
  background: #7A1B10; color: #FFE9E5;
  padding: 18px 22px; box-shadow: 0 12px 40px rgba(0,0,0,.35);
  font-size: 14px; line-height: 1.5;
}
.include-error strong { display: block; color: var(--white); margin-bottom: 8px; font-size: 15px; }
.include-error ul { margin: 0 0 14px; padding-left: 20px; }
.include-error li { font-size: 13px; word-break: break-word; }
.include-error__retry {
  font: inherit; font-weight: 700; cursor: pointer;
  background: var(--white); color: #7A1B10; border: 0; padding: 9px 20px;
}
.include-error__retry:hover { background: #FFE9E5; }

/* ---------- Small utilities (replaces inline style=) ---------- */
.u-pb-0 { padding-bottom: 0; }
.u-ml-10 { margin-left: 10px; }
.section--min60 { min-height: 60vh; }
@media (max-width: 480px) {
  .cc-banner__actions { width: 100%; }
  .cc-btn { flex: 1; }
}