/* =====================================================================
 * FGCC pattern library stylesheet - Tier 0 (editability conversion)
 * Started 2026-10-16. Source canon: Pattern Library v2 notes (hub) +
 * the pilot page's shipped CSS (pages/retirees/style.css), live
 * families only, media queries preserved verbatim.
 * Families carried so far (pilot set): canonical hero + tagline,
 * page title + intro, light-blue field with white cards (reference:
 * retirees-benefits), closing CTA two-column with photo (reference:
 * retirees-cta). Page-canonical class names KEPT for drift-free
 * conversion (Pattern Library v2 "the pattern is the contract; the
 * class name varies per page"); generic renames are a post-training
 * canonicalization item.
 * Block-shim rules at the end adapt native block wrappers (figure
 * margins) so converted markup renders byte-equal to the port.
 * ===================================================================== */

* { margin: 0; padding: 0; box-sizing: border-box; }
img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }
.headline { font-family: var(--font-headline); font-weight: 700; font-size: 56px; line-height: 1.0; text-transform: uppercase; letter-spacing: 0.5px; }
.h1 { font-family: var(--font-headline); font-weight: 700; font-size: 48px; line-height: 1.0; text-transform: uppercase; letter-spacing: 0.5px; }
.h2 { font-family: var(--font-headline); font-weight: 700; font-size: 26px; text-transform: uppercase; letter-spacing: 0.5px; }
.h3 { font-family: var(--font-headline); font-weight: 700; font-size: 20px; text-transform: uppercase; letter-spacing: 0.3px; }
/* Hero */
.hero { position: relative; height: 450px; overflow: hidden; }
.hero img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.hero-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(to top, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0.1) 100%); }
.hero-content { position: absolute; bottom: 70px; left: max(25px, calc(50% - 600px)); }
.hero-tagline { font-family: var(--font-headline); font-weight: 600; font-size: 36px; color: var(--white); line-height: 1.1; }
.hero-tagline .line2 { display: block; padding-left: 50px; }
/* Page Title */
.page-title-section { padding: 60px 0 40px; background: var(--white); }
.page-title-inner { max-width: 1200px; margin: 0 auto; padding: 0 25px; }
.page-title { color: var(--teal-primary); margin-bottom: 20px; }
.intro-text { font-family: var(--font-body); font-weight: 300; font-size: 18px; line-height: 1.7; color: var(--text-dark); max-width: 800px; }
.featured-content { padding: 40px; }
.featured-image img { width: 100%; height: 100%; object-fit: cover; min-height: 280px; }
@media (max-width: 1024px) {
  .featured-image { order: -1; }
  .featured-image img { min-height: 200px; }
}
@media (max-width: 480px) {
  .headline { font-size: 36px; }
  .h1 { font-size: 30px; }
  .featured-content { padding: 25px; }
}
@media (max-width: 768px) {
  .hero { height: 350px; }
  .hero-content { bottom: 50px; left: 25px; right: 25px; }
  .hero-tagline { font-size: 28px; }
  .hero-tagline .line2 { padding-left: 40px; }
  .headline { font-size: 42px; }
  .h1 { font-size: 36px; }
  .h2 { font-size: 22px; }
}
@media (max-width: 768px) {
  .hero { height: 300px; }
}
/* ========================================================================
 * Retirees v1 — page-specific styles
 * Page-namespaced (retirees-*) per Working Protocols §22 / Pattern B canon.
 * All typography classes (.h1, .h2, .h3, .intro-text, .page-title) come from
 * canonical chrome; no override here.
 * ======================================================================== */

/* Benefits content section — tinted field of color (decision: light-blue section tint)
   Page-local --blue-bg-light value. Candidate to promote to chrome token (--blue-bg)
   in a future maintenance pass if a second page reuses it. Verified contrast:
     - --text-dark on #E5F2F8 = 15.24:1 (passes 4.5:1 normal text)
     - --blue-primary on #E5F2F8 = 4.29:1 (passes 3.0:1 large-text headings)
     - --teal-accessible on #E5F2F8 = 4.66:1 (passes 4.5:1 normal text)
*/
.retirees-benefits-section { background: var(--blue-bg); padding: 60px 0; }
.retirees-benefits-inner { max-width: 1200px; margin: 0 auto; padding: 0 25px; }
.retirees-benefits-section h2.h2 { color: var(--blue-primary); margin: 0 0 24px; }
.retirees-benefits-section p.lead { font-family: var(--font-body); font-weight: 300; font-size: 18px; line-height: 1.7; color: var(--text-dark); max-width: 800px; margin: 0 0 30px; }
.retirees-benefits-list { list-style: none; padding: 0; margin: 0; max-width: 800px; display: grid; grid-template-columns: 1fr; gap: 14px; }
.retirees-benefits-list li { font-family: var(--font-body); font-weight: 300; font-size: 18px; line-height: 1.6; color: var(--text-dark); padding: 14px 20px; background: var(--white); border-left: 4px solid var(--blue-primary); border-radius: 0 4px 4px 0; }
.retirees-benefits-list li strong { color: var(--blue-primary); font-weight: 600; }
/* Closing CTA — decision 6a (Thread 35 --teal-section + --gold-light variant)
   combined with Impact v2 canonical 2-column structure (content left, photo right).
   This preserves the live page's authentic photo content while delivering the
   Thread 35 accessibility-compliant color treatment. */
.retirees-cta-section { background: var(--teal-section); color: var(--white); padding: 70px 0; }
.retirees-cta-inner { max-width: 1200px; margin: 0 auto; padding: 0 25px; display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.retirees-cta-content h2.h2 { color: var(--gold-light); margin: 0 0 20px; line-height: 1.1; }
.retirees-cta-content p { font-family: var(--font-body); font-weight: 300; font-size: 18px; line-height: 1.6; margin: 0 0 30px; color: var(--white); }
.retirees-cta-content .retirees-contact { font-family: var(--font-body); font-weight: 300; font-size: 16px; line-height: 1.6; margin: 24px 0 0; color: var(--white); }
.retirees-cta-content .retirees-contact a { color: var(--white); text-decoration: underline; }
.retirees-cta-content .retirees-cta-btn { display: inline-block; background: var(--white); color: var(--teal-accessible); padding: 14px 32px; border-radius: 4px; font-family: var(--font-headline); font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; text-decoration: none; font-size: 16px; transition: background 0.2s, color 0.2s; }
.retirees-cta-content .retirees-cta-btn:hover,
.retirees-cta-content .retirees-cta-btn:focus { background: var(--gold-light); color: var(--text-dark); }
.retirees-cta-content .retirees-cta-btn:focus-visible { outline: 3px solid var(--gold-light); outline-offset: 2px; }
.retirees-cta-image img { width: 100%; /* 280px matches Impact v2 + Student Stories v5 canon (the closest Pattern B precedents). Homepage v15 uses 260px for its CTA photo — undocumented inconsistency across the project's CTA photos. MAINTENANCE NOTE: standardize CTA photo heights in a future pass. Likely outcomes: (a) 280px as the single canonical value; or (b) 260px when two photos sit side-by-side in the same CTA (HP v15 precedent), 280px when a single photo sits opposite content (Impact v2 / SS v5 precedent). */ height: 280px; object-fit: cover; border-radius: 4px; display: block; }
@media (max-width: 900px) {
  .retirees-cta-inner { grid-template-columns: 1fr; gap: 30px; }
  .retirees-cta-image { order: -1; /* photo above content on narrow viewports (Impact v2 precedent) */ }
  .retirees-cta-image img { height: 280px; }
}
@media (max-width: 600px) {
  .retirees-benefits-section h2.h2 { font-size: 22px; }
  .retirees-cta-content h2.h2 { font-size: 22px; }
  .retirees-cta-section { padding: 50px 0; }
  .retirees-benefits-section { padding: 40px 0; }
  .retirees-cta-image img { height: 240px; }
}
/* layout normalization v3/v4: content aligns to logo edge (appended by porter) */
main > h1, main > h1[class], main > h2, main > h2[class], main > h3, main > h3[class], main > p, main > p[class], main > ul, main > ol, main > table { margin-left: max(25px, calc(50% - 600px)); margin-right: max(25px, calc(50% - 600px)); }
main > h1, main > h1[class] { margin-top: 60px; }
.page-title-inner { padding-left: 0; padding-right: 0; }
.retirees-benefits-inner { padding-left: 0; padding-right: 0; }
.retirees-cta-inner { padding-left: 0; padding-right: 0; }
.page-title-section { padding-left: max(25px, calc(50% - 600px)); padding-right: max(25px, calc(50% - 600px)); }
.retirees-benefits-section { padding-left: max(25px, calc(50% - 600px)); padding-right: max(25px, calc(50% - 600px)); }
.retirees-cta-section { padding-left: max(25px, calc(50% - 600px)); padding-right: max(25px, calc(50% - 600px)); }
@media (max-width: 1024px) {
  .retirees-cta-inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .retirees-cta-inner { grid-template-columns: 1fr; }
}

/* ---- block shims: native block wrappers inside converted sections ---- */
.hero figure.wp-block-image { margin: 0; height: 100%; }
.hero .wp-block-image img { width: 100%; height: 100%; }
main .wp-block-image { margin: 0; }