/*
Theme Name: SafetyGearAdvisor
Theme URI: https://safetygearadvisor.com
Author: SafetyGearAdvisor
Author URI: https://safetygearadvisor.com
Description: Custom theme for SafetyGearAdvisor.com — a PPE education, buying guide, and product review site built around OSHA/ANSI-referenced content and a hi-vis PPE (lime + black) brand palette, with fixed ANSI Z535 signal colors for functional UI (mandatory badges, life-safety accents). Hero content and brand colors are editable from Appearance → Customize. Homepage's "Recent Articles" section pulls live from your latest published posts.
Version: 3.3.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: safetygearadvisor
*/

/* Design tokens, base styles, and every component style below.
   See design-system.md in this package for the documented reference version. */

  :root{
    --paper:#F7F6F2;
    --paper-dim:#EFEDE6;
    --ink:#191D1F;
    --ink-soft:#4B5259;
    --navy:#101210;
    --navy-deep:#101210;
    --yellow:#F5C400;
    --orange:#C84B23;
    --line:#D8D4C8;
    --green:#2F6F4E;
    /* Hi-vis PPE colors — the dominant brand palette, styled after an
       actual hi-vis vest: bright safety lime body, black webbing/trim. */
    --hivis:#C8E000;        /* vivid lime — used on dark backgrounds */
    --hivis-deep:#5C6900;   /* dark olive-lime — used as text/links on light backgrounds */
    --lime-wash:#E8F2A8;    /* bolder lime section-background tint, same hue as --hivis */
    --blue-wash:#DCEAFA;    /* pale blue section-background tint, same hue as --safety-blue */
    --orange-wash:#FBE0CB;  /* pale orange section-background tint, same hue as --orange */
    /* ANSI Z535.1 safety colors — used per their standard meaning, not decoratively */
    --safety-blue:#0057B8;   /* mandatory / informational */
    --safety-green:#00843D;  /* safe condition / verified */
    --safety-red:#C8102E;    /* danger / life-safety — reserved, used once */
  }
  .hazard-stripe{
    height:7px;width:100%;
    background:repeating-linear-gradient(135deg, var(--navy) 0 10px, var(--hivis) 10px 20px);
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:'Source Sans 3', sans-serif;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,.display{
    font-family:'Archivo Expanded', 'Archivo', sans-serif;
    letter-spacing:-0.01em;
    margin:0;
  }
  .mono{
    font-family:'IBM Plex Mono', monospace;
    letter-spacing:0.02em;
  }
  a{color:inherit;text-decoration:none;}
  .wrap{max-width:1180px;margin:0 auto;padding:0 32px;}
  @media(max-width:640px){.wrap{padding:0 20px;}}

  /* focus visibility */
  a:focus-visible, button:focus-visible{outline:2px solid var(--navy);outline-offset:3px;}
  @media (prefers-reduced-motion: reduce){*{animation:none !important;transition:none !important;}}

  /* ============ HEADER ============ */
  header{
    position:sticky;top:0;z-index:50;
    background:var(--paper);
    border-bottom:1px solid var(--line);
  }
  .nav-row{
    display:flex;align-items:center;justify-content:space-between;
    padding-top:18px;padding-bottom:18px;
  }
  .logo{
    display:flex;align-items:center;gap:10px;
    font-family:'Archivo Expanded', sans-serif;
    font-weight:800;font-size:19px;letter-spacing:-0.01em;
  }
  .logo .mark{
    width:26px;height:26px;background:var(--navy);
    display:flex;align-items:center;justify-content:center;
    color:var(--yellow);font-family:'IBM Plex Mono';font-weight:600;font-size:12px;
    border-radius:2px;
  }
  .logo .tag{
    color:var(--ink-soft);font-family:'IBM Plex Mono';font-weight:500;
    font-size:10.5px;letter-spacing:0.06em;text-transform:uppercase;
    border-left:1px solid var(--line);padding-left:10px;margin-left:2px;
  }
  nav.links{display:flex;gap:32px;font-size:14.5px;font-weight:600;}
  nav.links a{color:var(--ink-soft);transition:color .15s;}
  nav.links a:hover{color:var(--hivis-deep);}
  .mobile-nav{display:none;}
  .nav-item{position:relative;}
  .nav-item>a{display:flex;align-items:center;gap:5px;}
  .nav-item .caret{font-size:10px;color:var(--ink-soft);}
  .dropdown{
    position:absolute;top:100%;left:-18px;background:#fff;
    border:1px solid var(--line);border-radius:6px;padding:8px;
    min-width:210px;display:none;flex-direction:column;gap:1px;
    box-shadow:0 12px 24px rgba(16,41,61,0.1);
  }
  .nav-item:hover .dropdown{display:flex;}
  .dropdown a{
    padding:9px 12px;font-size:13.5px;font-weight:500;border-radius:4px;
    color:var(--ink-soft);
  }
  .dropdown a:hover{background:var(--paper-dim);color:var(--hivis-deep);}
  @media(max-width:860px){
    nav.links{display:none;}
    .logo .tag{display:none;}
  }

  /* ============ HAMBURGER + MOBILE NAV ============ */
  .hamburger{
    display:none;flex-direction:column;justify-content:center;gap:5px;
    width:40px;height:40px;background:none;border:none;cursor:pointer;
    padding:0;flex-shrink:0;
  }
  .hamburger span{width:24px;height:2.5px;background:var(--ink);border-radius:2px;transition:transform .2s,opacity .2s;}
  @media(max-width:860px){.hamburger{display:flex;}}

  .mobile-nav-backdrop{
    position:fixed;inset:0;background:rgba(16,18,16,0.55);z-index:90;
    opacity:0;visibility:hidden;transition:opacity .25s;
  }
  .mobile-nav-backdrop.is-open{opacity:1;visibility:visible;}

  .mobile-nav-panel{
    position:fixed;top:0;right:0;bottom:0;width:min(360px,86vw);
    background:var(--paper);z-index:100;
    transform:translateX(100%);transition:transform .28s ease;
    display:flex;flex-direction:column;
    box-shadow:-8px 0 24px rgba(0,0,0,0.15);
  }
  .mobile-nav-panel.is-open{transform:translateX(0);}
  .mobile-nav-top{
    display:flex;align-items:center;justify-content:space-between;
    padding:18px 20px;border-bottom:1px solid var(--line);flex-shrink:0;
  }
  .mobile-nav-close{
    background:none;border:none;font-size:22px;line-height:1;cursor:pointer;
    color:var(--ink);width:36px;height:36px;
  }
  .mobile-nav-links{padding:12px 12px;overflow-y:auto;flex:1;}
  .mobile-nav-link{
    display:block;padding:14px 12px;font-weight:600;font-size:15px;
    color:var(--ink);border-bottom:1px solid var(--paper-dim);
  }
  .mobile-nav-group{border-bottom:1px solid var(--paper-dim);}
  .mobile-nav-toggle{
    width:100%;display:flex;align-items:center;justify-content:space-between;
    background:none;border:none;padding:14px 12px;font-weight:600;font-size:15px;
    color:var(--ink);cursor:pointer;font-family:inherit;text-align:left;
  }
  .mobile-nav-toggle .caret{transition:transform .2s;font-size:12px;color:var(--ink-soft);}
  .mobile-nav-toggle[aria-expanded="true"] .caret{transform:rotate(180deg);}
  .mobile-nav-submenu{
    max-height:0;overflow:hidden;transition:max-height .25s ease;
    background:var(--paper-dim);border-radius:6px;
  }
  .mobile-nav-submenu.is-open{max-height:600px;}
  .mobile-nav-submenu a{display:block;padding:11px 20px;font-size:14px;color:var(--ink-soft);}
  .mobile-nav-submenu a:active{color:var(--hivis-deep);}
  body.mobile-nav-open{overflow:hidden;}

  /* ============ HERO ============ */
  .hero{padding:72px 0 56px;border-bottom:1px solid var(--line);}
  .hero .wrap{display:grid;grid-template-columns:1fr 360px;gap:56px;align-items:center;}
  @media(max-width:960px){.hero .wrap{grid-template-columns:1fr;gap:32px;}}
  .eyebrow{
    display:inline-flex;align-items:center;gap:8px;
    font-family:'IBM Plex Mono';font-size:12px;font-weight:600;
    color:var(--hivis-deep);text-transform:uppercase;letter-spacing:0.08em;
    margin-bottom:18px;
  }
  .eyebrow::before{content:'';width:7px;height:7px;background:var(--orange);border-radius:50%;display:inline-block;}
  .hero h1{
    font-size:clamp(34px,4.6vw,54px);
    line-height:1.04;
    font-weight:800;
    color:var(--navy-deep);
  }
  .hero p.sub{
    margin-top:20px;font-size:18px;line-height:1.55;color:var(--ink-soft);
    max-width:46ch;
  }

  /* ============ HERO PPE ICON GRID ============ */
  /* A checkerboard of the site's actual 8 PPE category icons instead
     of a personal photo — bold, on-brand (the black/lime alternation
     echoes the hi-vis vest itself), ties directly to real site
     content, and doesn't favor one author's face over the other's. */
  .hero-icon-grid{
    display:grid;grid-template-columns:repeat(4,1fr);gap:10px;
  }
  .hero-icon-tile{
    aspect-ratio:1;border-radius:8px;
    display:flex;align-items:center;justify-content:center;
  }
  .hero-icon-tile.tile-dark{background:var(--navy-deep);}
  .hero-icon-tile.tile-light{background:var(--hivis);}
  .hero-icon-tile svg{width:34%;height:34%;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
  .hero-icon-tile.tile-dark svg{stroke:#fff;}
  .hero-icon-tile.tile-light svg{stroke:var(--navy-deep);}
  .hero-icon-caption{
    margin-top:16px;font-size:13px;color:var(--ink-soft);text-align:center;
  }
  .hero-icon-caption strong{color:var(--hivis-deep);font-family:'IBM Plex Mono';font-weight:700;}

  /* ============ SECTION HEADERS ============ */
  .section{padding:64px 0;border-bottom:1px solid var(--line);}
  /* Zebra-striped section backgrounds — deliberate alternation so each
     homepage section is visually distinct at a glance, not just
     separated by a hairline. No two adjacent sections share a tone. */
  #pillars{background:var(--orange-wash);}
  #ppe-categories{background:var(--lime-wash);}
  #safety-guides{background:var(--blue-wash);}
  #recent{background:var(--lime-wash);}

  /* Faint, oversized category icon watermark inside each PPE card —
     reuses the same icon already used in the small mandatory badge,
     just enlarged and set to very low opacity, so it reads as "a
     helmet is behind this card" without needing external photography
     (which would carry real licensing risk) or hurting text contrast. */
  .hazard-card-bg{
    position:absolute;right:-18px;bottom:-18px;width:132px;height:132px;
    opacity:0.11;pointer-events:none;z-index:0;transform:rotate(-6deg);
  }
  .hazard-card-bg svg{width:100%;height:100%;stroke:var(--ink);fill:none;stroke-width:1;}
  .hazard-card.life-safety .hazard-card-bg{opacity:0.14;}
  .hazard-card.life-safety .hazard-card-bg svg{stroke:var(--safety-red);}
  .hazard-card .top-row, .hazard-card > *:not(.hazard-card-bg){position:relative;z-index:1;}

  .section-head{
    display:flex;justify-content:space-between;align-items:flex-end;
    margin-bottom:36px;gap:24px;flex-wrap:wrap;
  }
  .section-head .eyebrow{margin-bottom:10px;}
  .section-head h2{font-size:clamp(24px,3vw,32px);font-weight:800;color:var(--navy-deep);}
  .section-head p{color:var(--ink-soft);font-size:15px;max-width:38ch;}

  /* ============ HAZARD GRID ============ */
  .hazard-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
  @media(max-width:900px){.hazard-grid{grid-template-columns:1fr 1fr;}}
  @media(max-width:480px){.hazard-grid{grid-template-columns:1fr;}}
  /* Safety Guides now has 8 cards (added Plumbers + Painters), same
     count as PPE Categories — uses the default 4-column grid above,
     no override needed. If the count ever changes to something that
     doesn't divide evenly into 4, re-add a scoped override here. */
  .hazard-card{
    background:#fff;border:1.5px solid var(--ink);border-radius:6px;
    padding:22px 20px 20px;min-height:225px;
    display:flex;flex-direction:column;
    transition:box-shadow .15s,transform .15s;position:relative;overflow:hidden;
    border-top-width:5px;border-top-color:var(--safety-blue);
  }
  .hazard-card:hover{box-shadow:0 6px 16px rgba(16,18,16,0.1);transform:translateY(-2px);}
  .hazard-card.life-safety{border-top-color:var(--safety-red);}
  .hazard-card .top-row{display:flex;align-items:center;justify-content:space-between;}
  .cat-code{
    font-family:'IBM Plex Mono';font-size:10.5px;font-weight:600;color:#fff;
    display:inline-block;padding:4px 9px;border-radius:3px;
    align-self:flex-start;letter-spacing:0.02em;background:var(--safety-blue);
  }
  .hazard-card.life-safety .cat-code{background:var(--safety-red);}
  .life-safety-tag{
    font-family:'IBM Plex Mono';font-size:9.5px;font-weight:600;color:var(--safety-red);
    letter-spacing:0.06em;margin-top:6px;
  }
  .hazard-card h3{font-size:17px;font-weight:800;margin-top:14px;color:var(--navy-deep);line-height:1.25;}
  .hazard-card .std{
    margin-top:auto;padding-top:12px;border-top:1px dashed var(--line);
    font-family:'IBM Plex Mono';font-size:11px;color:var(--hivis-deep);
  }

  /* Optional photo-background treatment — only applies when a
     category has a background photo uploaded via the Customizer
     (see inc/customizer.php). Cards without one keep the default
     white-card + line-icon-watermark look above; this is additive,
     not a replacement. --card-photo is set inline per-card as a CSS
     custom property so this stays one rule instead of one per card. */
  .hazard-card.has-photo{
    background-image:
      linear-gradient(180deg, rgba(16,18,16,0.1) 0%, rgba(16,18,16,0.55) 55%, rgba(16,18,16,0.9) 100%),
      var(--card-photo);
    background-size:cover;background-position:center;
    border-color:rgba(255,255,255,0.2);
  }
  .hazard-card.has-photo .hazard-card-bg{display:none;}
  .hazard-card.has-photo h3{color:#fff;}
  .hazard-card.has-photo .std{color:rgba(247,246,242,0.8);border-top-color:rgba(247,246,242,0.3);}
  .hazard-card.has-photo .life-safety-tag{color:#fff;}

  /* ============ JOB PILLS ============ */
  .job-pills{display:flex;flex-wrap:wrap;gap:10px;}
  .job-pill{
    border:1.5px solid var(--ink);border-radius:22px;padding:10px 18px;
    font-size:14px;font-weight:600;display:flex;align-items:center;gap:8px;
  }
  .job-pill .n{
    font-family:'IBM Plex Mono';font-size:11px;color:var(--ink-soft);font-weight:500;
  }
  .job-pill:hover{background:var(--navy);color:#fff;border-color:var(--navy);}
  .job-pill:hover .n{color:var(--yellow);}

  /* ============ SAFETY GUIDE CARDS (same box system as PPE Categories,
     orange accent since these map to the "Safety Advice" pillar) ============ */
  .hazard-card.job-card{border-top-color:var(--orange);}
  .hazard-card.job-card .hazard-card-bg svg{stroke:var(--orange);}
  .job-code{background:var(--orange);}

  /* ============ RECENT ARTICLES ============ */
  .recent-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
  @media(max-width:900px){.recent-grid{grid-template-columns:1fr 1fr;}}
  @media(max-width:600px){.recent-grid{grid-template-columns:1fr;}}
  .recent-card{
    background:#fff;border:1.5px solid var(--line);border-top:4px solid var(--ink);
    border-radius:6px;padding:20px;display:flex;flex-direction:column;min-height:220px;
    transition:border-color .15s;
  }
  .recent-card:hover{border-color:var(--ink);}
  .recent-card h3{font-size:16px;font-weight:800;color:var(--navy-deep);margin-top:14px;line-height:1.3;}
  .recent-card h3 a{color:inherit;}
  .recent-card h3 a:hover{color:var(--hivis-deep);}
  .recent-card p{font-size:13px;color:var(--ink-soft);line-height:1.55;margin-top:8px;flex:1;}
  .recent-card .recent-meta{
    margin-top:14px;padding-top:12px;border-top:1px dashed var(--line);
    display:flex;justify-content:space-between;align-items:center;
    font-family:'IBM Plex Mono';font-size:11px;color:var(--ink-soft);
  }
  .recent-card .recent-meta .read-more{color:var(--hivis-deep);font-weight:600;}

  /* ============ AUTHOR SECTION (two writers) ============ */
  .author-section{background:var(--navy-deep);color:var(--paper);border-bottom:1px solid var(--navy-deep);}
  .author-section .eyebrow{color:var(--hivis);}
  .author-section .eyebrow::before{background:var(--hivis);}
  .author-section > .wrap > h2{font-size:26px;font-weight:800;color:#fff;max-width:46ch;}
  .authors-grid{
    display:grid;grid-template-columns:1fr 1fr;gap:44px;margin-top:36px;
  }
  @media(max-width:760px){.authors-grid{grid-template-columns:1fr;gap:36px;}}
  .author-card{display:flex;gap:20px;align-items:flex-start;}
  @media(max-width:480px){.author-card{flex-direction:column;}}
  .author-card .author-photo{
    width:120px;height:120px;flex-shrink:0;aspect-ratio:1;background:var(--navy);
    border-radius:6px;border:1px solid rgba(247,246,242,0.15);overflow:hidden;
  }
  .author-card .author-photo img{width:100%;height:100%;object-fit:cover;object-position:center 20%;display:block;}
  .author-card .author-photo.placeholder{
    display:flex;align-items:center;justify-content:center;text-align:center;
    font-family:'IBM Plex Mono';font-size:10.5px;line-height:1.5;
    color:rgba(247,246,242,0.4);border:1.5px dashed rgba(247,246,242,0.3);
    background:transparent;padding:10px;
  }
  .author-card .a-body{min-width:0;}
  .author-card h3{font-size:17px;font-weight:800;color:#fff;line-height:1.25;}
  .author-card h3.placeholder-name{color:rgba(247,246,242,0.45);font-weight:600;}
  .author-card .role{
    font-size:11.5px;color:var(--hivis);font-family:'IBM Plex Mono';font-weight:600;
    margin-top:3px;text-transform:uppercase;letter-spacing:0.04em;
  }
  .author-card p{color:rgba(247,246,242,0.7);font-size:13.5px;line-height:1.6;margin-top:10px;}
  .author-card .mini-creds{margin-top:14px;display:grid;grid-template-columns:1fr 1fr;gap:9px 18px;}
  @media(max-width:600px){.author-card .mini-creds{grid-template-columns:1fr;}}
  .author-card .mini-creds span{
    display:flex;align-items:flex-start;gap:8px;
    font-family:'IBM Plex Mono';font-size:11px;line-height:1.5;
    color:rgba(247,246,242,0.82);
  }
  .author-card .mini-creds span::before{
    content:'';flex-shrink:0;width:5px;height:5px;border-radius:50%;
    background:var(--hivis);margin-top:6px;
  }

  /* ============ DISCLOSURE STRIP ============ */
  .disclosure{
    background:var(--paper-dim);padding:16px 0;border-bottom:1px solid var(--line);
    font-size:12.5px;color:var(--ink-soft);text-align:center;
  }

  /* ============ FUNNEL ============ */
  .funnel-section{background:var(--lime-wash);}
  .funnel-flow{display:flex;align-items:stretch;gap:10px;}
  @media(max-width:900px){.funnel-flow{flex-direction:column;}}
  .funnel-card{
    background:#fff;border:1.5px solid var(--ink);border-radius:6px;
    padding:20px 18px 18px;display:flex;flex-direction:column;flex:1;min-width:0;
    border-top-width:5px;border-top-color:var(--navy-deep);
  }
  .funnel-card.is-final{border-top-color:var(--orange);}
  .step-code{
    font-family:'IBM Plex Mono';font-size:10.5px;font-weight:600;color:#fff;
    display:inline-block;padding:4px 9px;border-radius:3px;
    align-self:flex-start;letter-spacing:0.02em;background:var(--navy-deep);
  }
  .funnel-card.is-final .step-code{background:var(--orange);}
  .funnel-card h4{font-size:15px;font-weight:700;color:var(--navy-deep);margin-top:12px;line-height:1.3;}
  .funnel-card.is-final h4{color:var(--orange);}
  .funnel-card p{font-size:12.5px;color:var(--ink-soft);margin-top:8px;line-height:1.5;}
  /* Connecting arrows — a real DOM element between each pair of
     cards (not a pseudo-element trick), so it stays correctly placed
     and correctly oriented at every screen size. Rotates 90° to point
     down once the flow stacks vertically on narrow screens instead of
     awkwardly pointing sideways into the card below it. This is a
     linear step-by-step journey, not a repeating cycle — sequential
     arrows are the right shape here, not a circular/recycle symbol. */
  .funnel-arrow{
    display:flex;align-items:center;justify-content:center;
    flex-shrink:0;width:22px;
  }
  .funnel-arrow svg{width:20px;height:20px;stroke:var(--hivis-deep);stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round;}
  @media(max-width:900px){
    .funnel-arrow{width:auto;padding:2px 0;transform:rotate(90deg);}
  }

  /* ============ PILLARS ============ */
  .pillar-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
  @media(max-width:900px){.pillar-grid{grid-template-columns:1fr 1fr;}}
  @media(max-width:520px){.pillar-grid{grid-template-columns:1fr;}}
  .pillar-card{
    background:#fff;border:1.5px solid var(--ink);border-radius:6px;
    padding:22px 20px 20px;display:flex;flex-direction:column;min-height:230px;
    border-top-width:4px;
  }
  .pillar-card.pc-blue{border-top-color:var(--safety-blue);}
  .pillar-card.pc-orange{border-top-color:var(--orange);}
  .pillar-card.pc-yellow{border-top-color:var(--yellow);}
  .pillar-card.pc-green{border-top-color:var(--safety-green);}
  .p-code{
    font-family:'IBM Plex Mono';font-size:10.5px;font-weight:600;color:#fff;
    display:inline-block;padding:4px 9px;border-radius:3px;
    align-self:flex-start;letter-spacing:0.02em;white-space:nowrap;
  }
  .p-code.bg-blue{background:var(--safety-blue);}
  .p-code.bg-orange{background:var(--orange);}
  .p-code.bg-yellow{background:var(--yellow);color:var(--ink);}
  .p-code.bg-green{background:var(--safety-green);
  }
  .pillar-card h3{font-size:17px;font-weight:800;color:var(--navy-deep);margin-top:14px;line-height:1.25;}
  .pillar-card p{font-size:13px;color:var(--ink-soft);line-height:1.55;margin-top:8px;flex:1;}
  .pillar-card .p-example{
    margin-top:14px;padding-top:12px;border-top:1px dashed var(--line);
    font-family:'IBM Plex Mono';font-size:11px;color:var(--hivis-deep);
  }

  /* ============ FOOTER ============ */
  footer{padding:48px 0 32px;background:var(--navy);color:rgba(247,246,242,0.7);}
  .footer-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:32px;}
  @media(max-width:700px){.footer-grid{grid-template-columns:1fr 1fr;}}
  footer h4{font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;color:var(--hivis);margin-bottom:14px;}
  footer ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px;}
  footer a{font-size:14px;color:rgba(247,246,242,0.72);}
  footer a:hover{color:var(--hivis);}
  footer p{color:rgba(247,246,242,0.6);}
  .footer-bottom{
    margin-top:44px;padding-top:22px;border-top:1px solid rgba(247,246,242,0.15);
    display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
    font-size:12.5px;color:rgba(247,246,242,0.5);
  }

  /* ============ ARTICLE TYPOGRAPHY ============ */
  /* This block is theme-only — it doesn't exist in the homepage mockup
     because there's no long-form reading content there. Applies to
     single.php and page.php via the .article-body wrapper.

     Design goal: a reader should never hit a visual "wall of text."
     Every ~150-250 words there should be a size change, a color
     change, or a shape change (a heading, a pull-quote, a callout, a
     list) that gives the eye a reason to keep going. */

  .article-body{
    font-size:18.5px;line-height:1.78;color:var(--ink);
  }

  /* Drop cap on the opening paragraph — a classic editorial hook that
     signals "this is a real piece of writing," not a wiki stub. */
  .article-body > p:first-of-type::first-letter{
    font-family:'Archivo Expanded', sans-serif;
    font-weight:800;font-size:68px;line-height:0.78;
    float:left;margin:6px 10px 0 0;color:var(--navy-deep);
  }

  .article-body h2{
    font-family:'Archivo Expanded', sans-serif;
    font-size:clamp(26px,3.2vw,34px);font-weight:800;color:var(--navy-deep);
    line-height:1.2;margin-top:56px;margin-bottom:20px;
    padding-bottom:14px;border-bottom:3px solid var(--hivis);
  }
  .article-body h2:first-child{margin-top:0;}

  .article-body h3{
    font-family:'Archivo Expanded', sans-serif;
    font-size:23px;font-weight:800;color:var(--navy-deep);
    line-height:1.25;margin-top:40px;margin-bottom:14px;
  }

  /* h4 breaks texture deliberately — mono, uppercase, label-like —
     so a long article doesn't read as one monotonous voice throughout. */
  .article-body h4{
    font-family:'IBM Plex Mono', monospace;
    font-size:13px;font-weight:600;color:var(--hivis-deep);
    text-transform:uppercase;letter-spacing:0.06em;
    margin-top:32px;margin-bottom:10px;
  }

  .article-body p{margin:0 0 22px;}
  .article-body p:last-child{margin-bottom:0;}

  .article-body strong{font-weight:800;color:var(--navy-deep);}

  .article-body a{
    color:var(--hivis-deep);text-decoration:underline;
    text-decoration-color:var(--hivis);text-decoration-thickness:2px;
    text-underline-offset:3px;font-weight:600;
  }
  .article-body a:hover{color:var(--orange);}

  /* Pull-quote / blockquote — large, bold, brand-colored, with an
     oversized quote mark. Meant to be genuinely eye-catching, not a
     muted little indent. */
  .article-body blockquote{
    position:relative;margin:40px 0;padding:8px 0 8px 32px;
    border-left:4px solid var(--hivis);
    font-family:'Archivo Expanded', sans-serif;
    font-size:26px;font-weight:700;line-height:1.35;color:var(--navy-deep);
  }
  .article-body blockquote::before{
    content:'"';position:absolute;left:6px;top:-18px;
    font-family:'Archivo Expanded', sans-serif;font-weight:800;
    font-size:64px;color:var(--hivis);opacity:0.55;
  }
  .article-body blockquote p{margin:0;font-size:inherit;}

  /* Callout box — for editors to highlight a "Quick Answer," a
     critical safety warning, or a key stat. Apply in the block editor
     via a Group block → Advanced → Additional CSS class(es): callout */
  .article-body .callout{
    background:var(--navy-deep);color:var(--paper);
    border-radius:6px;padding:24px 26px;margin:36px 0;
  }
  .article-body .callout::before{
    content:'Quick Answer';display:block;
    font-family:'IBM Plex Mono', monospace;font-size:11.5px;font-weight:600;
    color:var(--hivis);text-transform:uppercase;letter-spacing:0.08em;
    margin-bottom:10px;
  }
  .article-body .callout p{margin:0;font-size:17px;line-height:1.6;color:rgba(247,246,242,0.92);}
  .article-body .callout p:not(:last-child){margin-bottom:10px;}
  .article-body .callout strong{color:var(--hivis);}
  .article-body .callout.warning::before{content:'Important';color:var(--orange);}
  .article-body .callout.warning{border-left:4px solid var(--safety-red);}
  .article-body .callout.warning strong{color:#fff;}

  /* Inline text highlight utility — wrap a key phrase in
     <mark class="highlight">…</mark> in the block editor's HTML view
     to make one stat or term pop mid-paragraph. */
  .article-body mark.highlight{
    background:var(--hivis);color:var(--ink);padding:1px 5px;
    border-radius:2px;font-weight:700;
  }

  .article-body ul, .article-body ol{margin:0 0 24px;padding-left:0;list-style:none;}
  .article-body ul li, .article-body ol li{
    position:relative;padding-left:28px;margin-bottom:12px;line-height:1.6;
  }
  .article-body ul li::before{
    content:'';position:absolute;left:2px;top:10px;
    width:8px;height:8px;border-radius:50%;background:var(--hivis-deep);
  }
  .article-body ol{counter-reset:sga-ol;}
  .article-body ol li{counter-increment:sga-ol;}
  .article-body ol li::before{
    content:counter(sga-ol);position:absolute;left:0;top:0;
    font-family:'IBM Plex Mono', monospace;font-weight:700;font-size:12px;
    color:#fff;background:var(--navy-deep);width:20px;height:20px;
    border-radius:50%;display:flex;align-items:center;justify-content:center;
  }

  .article-body img{width:100%;height:auto;border-radius:6px;margin:32px 0;}

  .article-body table{
    width:100%;border-collapse:collapse;margin:32px 0;font-size:15px;
    display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;
    white-space:nowrap;
  }
  @media(min-width:601px){
    .article-body table{white-space:normal;}
  }
  .article-body th{
    background:var(--navy-deep);color:#fff;text-align:left;
    padding:12px 14px;font-family:'IBM Plex Mono',monospace;
    font-size:12px;text-transform:uppercase;letter-spacing:0.04em;
  }
  .article-body td{padding:12px 14px;border-bottom:1px solid var(--line);}
  .article-body tr:nth-child(even) td{background:var(--paper-dim);}

  .read-time{
    display:inline-flex;align-items:center;gap:6px;
    font-family:'IBM Plex Mono';font-size:12.5px;color:var(--ink-soft);
  }
  .read-time::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--hivis-deep);}

  /* ============ CONTACT FORM ============ */
  .sga-form-row{margin-bottom:18px;}
  .sga-form-row label{
    display:block;font-size:13px;font-weight:600;color:var(--navy-deep);
    margin-bottom:6px;
  }
  .sga-form-row .sga-optional{font-weight:400;color:var(--ink-soft);}
  .sga-form-row input[type="text"],
  .sga-form-row input[type="email"],
  .sga-form-row textarea{
    width:100%;padding:11px 13px;border:1.5px solid var(--line);border-radius:4px;
    font-family:'Source Sans 3',sans-serif;font-size:15px;color:var(--ink);
    background:#fff;
  }
  .sga-form-row input:focus,
  .sga-form-row textarea:focus{
    outline:none;border-color:var(--navy-deep);
  }
  .sga-form-row textarea{resize:vertical;min-height:120px;}
  /* Honeypot — off-screen, not display:none (some spam bots specifically
     skip display:none fields), so this is positioned out of the visible
     viewport instead, which real visitors and screen readers won't
     encounter but simple bots filling every field in the DOM will. */
  .sga-hp-field{position:absolute;left:-9999px;top:-9999px;}
  .sga-form-submit{
    background:var(--navy);color:var(--hivis);padding:14px 26px;border-radius:3px;
    font-weight:600;font-size:15px;border:none;cursor:pointer;
    font-family:'Source Sans 3',sans-serif;
  }
  .sga-form-submit:hover{background:var(--navy-deep);}