/*
Theme Name: AdvanceAPractice Premium
Theme URI: https://advanceapractice.com
Author: AdvanceAPractice
Description: Clean premium theme for AdvanceAPractice — behavioral health practice operations.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: aap-premium
*/

/* ============================================================
   AdvanceAPractice — Premium Marketing Stylesheet
   One authored file, no frameworks, no CDN dependencies.
   Organized by: Tokens → Reset → Base → Layout → Components
                 → Header → Hero → Sections → Footer
   ============================================================ */

/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */
:root {
  /* Colors */
  --color-navy:        #0f2a47;
  --color-navy-alt:    #102841;
  --color-blue:        #1a56db;
  --color-blue-light:  #1f5fa8;
  --color-coral:       #cf5a4e;
  --color-bg:          #ffffff;
  --color-bg-tint:     #f6f8fb;
  --color-text:        #1f2a37;
  --color-muted:       #5b6675;
  --color-border:      rgba(15,42,71,.10);
  --color-gold:        #d4a017;

  /* Typography */
  --font-heading: 'Poppins', system-ui, -apple-system, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;

  /* Sizing */
  --max-width:  1200px;
  --radius-sm:  8px;
  --radius-md:  14px;
  --radius-lg:  20px;
  --radius-pill:999px;

  /* Shadows */
  --shadow-card:     0 18px 50px rgba(16,40,65,.08);
  --shadow-nav:      0 2px 16px rgba(16,40,65,.09);
  --shadow-dropdown: 0 20px 60px rgba(16,40,65,.13);

  /* Transitions */
  --t-fast: 150ms ease;
  --t-mid:  250ms ease;

  /* Spacing */
  --sp-xs:  .5rem;
  --sp-sm:  1rem;
  --sp-md:  1.5rem;
  --sp-lg:  2.5rem;
  --sp-xl:  4rem;
  --sp-2xl: 6rem;
}

/* ============================================================
   2. RESET & BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font-body);color:var(--color-text);background:var(--color-bg);line-height:1.6;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:var(--color-blue);text-decoration:none;transition:color var(--t-fast)}
a:hover{color:var(--color-blue-light)}
ul,ol{list-style:none}
h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);font-weight:700;letter-spacing:-0.02em;line-height:1.15;color:var(--color-navy)}
p{line-height:1.7}
button{font-family:inherit}
:focus-visible{outline:2.5px solid var(--color-blue);outline-offset:3px;border-radius:4px}

/* ============================================================
   3. LAYOUT UTILITIES
   ============================================================ */
.container{width:100%;max-width:var(--max-width);margin-inline:auto;padding-inline:1.5rem}
.section-pad{padding-block:var(--sp-2xl)}
.section-pad--sm{padding-block:var(--sp-xl)}

/* ============================================================
   4. TYPOGRAPHY HELPERS
   ============================================================ */
.eyebrow{
  display:inline-flex;align-items:center;
  font-family:var(--font-heading);font-size:.65rem;font-weight:600;
  letter-spacing:.10em;text-transform:uppercase;color:var(--color-coral);
  border:1.5px solid var(--color-coral);border-radius:var(--radius-pill);
  padding:.3em .9em;margin-bottom:var(--sp-md)
}
.section-heading{font-size:clamp(1.75rem,3.5vw,2.6rem);color:var(--color-navy);margin-bottom:var(--sp-sm)}
.section-subhead{font-size:1.05rem;color:var(--color-muted);max-width:56ch;line-height:1.75}

/* ============================================================
   5. BUTTONS
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;gap:.45rem;
  font-family:var(--font-heading);font-size:.9rem;font-weight:600;letter-spacing:.01em;
  padding:.75rem 1.55rem;border-radius:var(--radius-sm);border:2px solid transparent;
  cursor:pointer;white-space:nowrap;text-decoration:none;
  transition:background var(--t-fast),color var(--t-fast),border-color var(--t-fast),
             transform var(--t-fast),box-shadow var(--t-fast)
}
.btn:active{transform:translateY(1px)}

.btn-primary{background:var(--color-blue);color:#fff;border-color:var(--color-blue);box-shadow:0 4px 16px rgba(26,86,219,.22)}
.btn-primary:hover{background:var(--color-blue-light);border-color:var(--color-blue-light);color:#fff;box-shadow:0 6px 24px rgba(26,86,219,.30)}

.btn-outline{background:transparent;color:var(--color-navy);border-color:var(--color-border)}
.btn-outline:hover{background:var(--color-bg-tint);border-color:rgba(15,42,71,.22);color:var(--color-navy)}

.btn-outline-white{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.btn-outline-white:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.7);color:#fff}

.btn-white{background:#fff;color:var(--color-navy);border-color:#fff;box-shadow:0 4px 16px rgba(0,0,0,.12)}
.btn-white:hover{background:var(--color-bg-tint);color:var(--color-navy)}

.btn-sm{padding:.55rem 1.1rem;font-size:.82rem}

/* ============================================================
   6. CARDS
   ============================================================ */
.card{
  background:var(--color-bg);border:1px solid var(--color-border);
  border-radius:var(--radius-lg);padding:var(--sp-lg);box-shadow:var(--shadow-card);
  transition:transform var(--t-mid),box-shadow var(--t-mid)
}
.card:hover{transform:translateY(-4px);box-shadow:0 28px 60px rgba(16,40,65,.13)}
.card-icon{
  width:46px;height:46px;border-radius:var(--radius-sm);
  background:var(--color-bg-tint);display:flex;align-items:center;
  justify-content:center;margin-bottom:var(--sp-md)
}
.card-title{font-family:var(--font-heading);font-size:1.05rem;font-weight:700;color:var(--color-navy);margin-bottom:.5rem}
.card-body{font-size:.92rem;color:var(--color-muted);line-height:1.7}
.card-link{
  display:inline-flex;align-items:center;gap:.3rem;
  font-size:.88rem;font-weight:600;color:var(--color-blue);
  margin-top:var(--sp-md);transition:gap var(--t-fast)
}
.card-link:hover{gap:.55rem}
.card-link::after{content:'→'}

/* ============================================================
   7. SECTION HEADER
   ============================================================ */
.section-header{margin-bottom:var(--sp-lg)}
.section-header--center{text-align:center}
.section-header--center .section-subhead{margin-inline:auto}

/* ============================================================
   8. HEADER & NAV
   ============================================================ */
.site-header{
  position:sticky;top:0;z-index:1000;background:var(--color-bg);
  border-bottom:1px solid transparent;
  transition:border-color var(--t-mid),box-shadow var(--t-mid)
}
.site-header.scrolled{border-bottom-color:var(--color-border);box-shadow:var(--shadow-nav)}

.header-inner{display:flex;align-items:center;justify-content:space-between;height:68px;gap:var(--sp-lg)}

/* Logo */
.logo{display:flex;align-items:center;gap:.6rem;text-decoration:none;flex-shrink:0}
.logo-mark{height:38px;width:auto;display:block}
.logo-wordmark{font-family:var(--font-heading);font-size:1.1rem;font-weight:700;color:var(--color-navy);letter-spacing:-0.02em;line-height:1}

/* Primary nav */
.primary-nav{display:flex;align-items:center;gap:.1rem;margin-left:auto}
.nav-list{display:flex;align-items:center;gap:.05rem}
.nav-item{position:relative}

.nav-link{
  display:flex;align-items:center;gap:.3rem;
  padding:.5rem .75rem;font-size:.875rem;font-weight:500;color:var(--color-text);
  border-radius:var(--radius-sm);white-space:nowrap;
  transition:background var(--t-fast),color var(--t-fast);
  background:none;border:none;cursor:pointer
}
.nav-link:hover,.nav-link:focus-visible{background:var(--color-bg-tint);color:var(--color-navy)}

.nav-chevron{width:14px;height:14px;transition:transform var(--t-fast);flex-shrink:0}
.nav-item:hover .nav-chevron,
.nav-link[aria-expanded="true"] .nav-chevron{transform:rotate(180deg)}

/* Dropdown */
.dropdown{
  position:absolute;top:calc(100% + 10px);left:50%;
  transform:translateX(-50%) translateY(-6px);
  min-width:260px;background:var(--color-bg);
  border:1px solid var(--color-border);border-radius:var(--radius-md);
  box-shadow:var(--shadow-dropdown);padding:.6rem;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity var(--t-mid),visibility var(--t-mid),transform var(--t-mid)
}
.dropdown::before{
  content:'';position:absolute;top:-7px;left:50%;transform:translateX(-50%);
  border-left:7px solid transparent;border-right:7px solid transparent;
  border-bottom:7px solid var(--color-border)
}
.dropdown::after{
  content:'';position:absolute;top:-6px;left:50%;transform:translateX(-50%);
  border-left:7px solid transparent;border-right:7px solid transparent;
  border-bottom:7px solid var(--color-bg)
}
.nav-item:hover .dropdown,
.nav-item:focus-within .dropdown,
.dropdown[data-open="true"]{
  opacity:1;visibility:visible;pointer-events:auto;
  transform:translateX(-50%) translateY(0)
}
.dropdown-item{
  display:block;padding:.65rem .85rem;font-size:.875rem;font-weight:500;
  color:var(--color-text);border-radius:var(--radius-sm);
  transition:background var(--t-fast),color var(--t-fast)
}
.dropdown-item:hover,.dropdown-item:focus-visible{background:var(--color-bg-tint);color:var(--color-navy)}

.nav-cta{margin-left:var(--sp-sm)}

/* Hamburger */
.hamburger{
  display:none;flex-direction:column;justify-content:center;align-items:center;
  gap:5px;width:40px;height:40px;background:none;border:none;cursor:pointer;
  border-radius:var(--radius-sm);transition:background var(--t-fast);padding:0;flex-shrink:0
}
.hamburger:hover{background:var(--color-bg-tint)}
.hamburger span{display:block;width:22px;height:2px;background:var(--color-navy);border-radius:2px;transition:transform var(--t-mid),opacity var(--t-mid);transform-origin:center}
.hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger[aria-expanded="true"] span:nth-child(2){opacity:0;transform:scaleX(0)}
.hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Mobile drawer */
.mobile-drawer{
  display:none;position:fixed;inset:68px 0 0 0;
  background:var(--color-bg);z-index:999;overflow-y:auto;
  padding:var(--sp-md) var(--sp-md) var(--sp-xl);
  border-top:1px solid var(--color-border);
  transform:translateY(-8px);opacity:0;pointer-events:none;
  transition:opacity var(--t-mid),transform var(--t-mid)
}
.mobile-drawer.is-open{opacity:1;transform:translateY(0);pointer-events:auto}
.mobile-nav-list{display:flex;flex-direction:column;gap:.15rem}
.mobile-nav-link{
  display:block;padding:.75rem .75rem;font-size:1rem;font-weight:500;
  color:var(--color-text);border-radius:var(--radius-sm);
  transition:background var(--t-fast)
}
.mobile-nav-link:hover{background:var(--color-bg-tint);color:var(--color-navy)}

.mobile-accordion-btn{
  display:flex;align-items:center;justify-content:space-between;width:100%;
  padding:.75rem .75rem;font-size:1rem;font-weight:500;color:var(--color-text);
  background:none;border:none;cursor:pointer;border-radius:var(--radius-sm);
  transition:background var(--t-fast)
}
.mobile-accordion-btn:hover{background:var(--color-bg-tint)}
.mobile-accordion-btn .nav-chevron{transition:transform var(--t-fast)}
.mobile-accordion-btn[aria-expanded="true"] .nav-chevron{transform:rotate(180deg)}

.mobile-sub-list{display:none;flex-direction:column;gap:.05rem;padding-left:1rem;padding-bottom:.25rem}
.mobile-sub-list.is-open{display:flex}
.mobile-sub-link{
  display:block;padding:.55rem .75rem;font-size:.9rem;
  color:var(--color-muted);border-radius:var(--radius-sm);
  transition:background var(--t-fast),color var(--t-fast)
}
.mobile-sub-link:hover{background:var(--color-bg-tint);color:var(--color-navy)}

.mobile-cta-group{
  display:flex;flex-direction:column;gap:var(--sp-sm);
  padding-top:var(--sp-md);border-top:1px solid var(--color-border);margin-top:var(--sp-sm)
}
.mobile-cta-group .btn{justify-content:center;font-size:.95rem}

/* ============================================================
   9. HERO
   ============================================================ */
.hero{background:var(--color-bg);padding-block:var(--sp-2xl) calc(var(--sp-2xl) + 1rem);overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-xl);align-items:center}
.hero-content{max-width:560px}
.hero-h1{font-size:clamp(2rem,4.5vw,3.2rem);color:var(--color-navy);margin-bottom:var(--sp-md);line-height:1.1}
.hero-h1 em{color:var(--color-blue);font-style:normal}
.hero-subhead{font-size:1.05rem;color:var(--color-muted);max-width:52ch;margin-bottom:var(--sp-lg);line-height:1.75}
.hero-actions{display:flex;flex-wrap:wrap;gap:var(--sp-sm);align-items:center}
.hero-visual{display:flex;align-items:center;justify-content:center}
.dashboard-svg{width:100%;max-width:520px;filter:drop-shadow(0 20px 60px rgba(16,40,65,.13));border-radius:var(--radius-lg)}

/* ============================================================
   10. STARTING POINT
   ============================================================ */
.starting-point{background:var(--color-bg-tint)}
.three-col{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-md);margin-top:var(--sp-lg)}

/* ============================================================
   11. WHO WE HELP
   ============================================================ */
.who-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-sm);margin-top:var(--sp-lg)}
.who-item{
  display:flex;align-items:flex-start;gap:.75rem;
  padding:1.1rem 1.25rem;background:var(--color-bg-tint);
  border:1px solid var(--color-border);border-radius:var(--radius-md);
  transition:border-color var(--t-fast),background var(--t-fast)
}
.who-item:hover{border-color:rgba(26,86,219,.22);background:#eef2ff}
.who-dot{width:8px;height:8px;border-radius:50%;background:var(--color-blue);flex-shrink:0;margin-top:.4rem}
.who-label{font-size:.95rem;font-weight:600;color:var(--color-navy);line-height:1.45}

/* ============================================================
   12. REVENUE WORK
   ============================================================ */
.revenue-work{background:var(--color-bg-tint)}
.six-col{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-md);margin-top:var(--sp-lg)}

/* ============================================================
   13. TESTIMONIALS
   ============================================================ */
.testimonials{background:var(--color-bg-tint);border-top:1px solid var(--color-border);border-bottom:1px solid var(--color-border)}
.testimonials-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-md);margin-top:var(--sp-lg)}
.testimonial-card{
  background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-lg);
  padding:var(--sp-lg);box-shadow:var(--shadow-card);display:flex;flex-direction:column;gap:var(--sp-md)
}
.stars{display:flex;gap:3px}
.star{color:var(--color-gold);font-size:1.1rem;line-height:1}
.testimonial-quote{font-size:.975rem;color:var(--color-text);line-height:1.8;flex:1;font-style:italic}
.testimonial-author{display:flex;flex-direction:column;gap:.2rem;padding-top:var(--sp-sm);border-top:1px solid var(--color-border)}
.author-name{font-family:var(--font-heading);font-size:.9rem;font-weight:700;color:var(--color-navy)}
.author-title{font-size:.82rem;color:var(--color-muted)}

/* ============================================================
   14. RECOGNITION
   ============================================================ */
.recognition{background:var(--color-bg);padding-block:var(--sp-xl)}
.recognition .section-header{text-align:center}
.recognition-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-md);max-width:700px;margin-inline:auto;margin-top:var(--sp-lg)}
.recognition-card{
  display:flex;flex-direction:column;align-items:center;gap:var(--sp-sm);
  padding:var(--sp-lg);background:var(--color-bg-tint);
  border:1px solid var(--color-border);border-radius:var(--radius-lg);
  text-align:center;text-decoration:none;
  box-shadow:var(--shadow-card);
  transition:transform var(--t-mid),box-shadow var(--t-mid),border-color var(--t-mid)
}
.recognition-card:hover{transform:translateY(-4px);box-shadow:0 28px 60px rgba(16,40,65,.13);border-color:rgba(212,160,23,.35)}
.recognition-label{font-family:var(--font-heading);font-size:.95rem;font-weight:700;color:var(--color-navy);line-height:1.4}
.recognition-source{font-size:.8rem;color:var(--color-muted)}

/* ============================================================
   15. CTA BAND
   ============================================================ */
.cta-band{background:var(--color-navy);padding-block:var(--sp-2xl)}
.cta-band .section-heading{color:#fff}
.cta-band .section-subhead{color:rgba(255,255,255,.75);max-width:58ch}
.cta-actions{display:flex;flex-wrap:wrap;gap:var(--sp-sm);align-items:center;margin-top:var(--sp-lg)}

/* ============================================================
   16. FOOTER
   ============================================================ */
.site-footer{background:var(--color-navy);color:rgba(255,255,255,.80);padding-block:var(--sp-2xl) var(--sp-xl);border-top:1px solid rgba(255,255,255,.08)}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:var(--sp-xl);margin-bottom:var(--sp-xl)}
.footer-brand .logo{margin-bottom:var(--sp-sm)}
.footer-brand .logo-wordmark{color:#fff;font-size:1.15rem}
.footer-tagline{font-size:.875rem;color:rgba(255,255,255,.55);line-height:1.7;max-width:30ch;margin-top:.75rem}
.footer-col-heading{font-family:var(--font-heading);font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#fff;margin-bottom:var(--sp-md)}
.footer-links{display:flex;flex-direction:column;gap:.6rem}
.footer-links a{font-size:.875rem;color:rgba(255,255,255,.6);transition:color var(--t-fast)}
.footer-links a:hover{color:#fff}
.footer-bottom{padding-top:var(--sp-md);border-top:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:space-between;gap:var(--sp-sm);flex-wrap:wrap}
.footer-copy{font-size:.82rem;color:rgba(255,255,255,.45)}

/* ============================================================
   17. RESPONSIVE — TABLET (≤ 1024px)
   ============================================================ */
@media (max-width:1024px){
  .footer-grid{grid-template-columns:1fr 1fr;gap:var(--sp-lg)}
  .six-col{grid-template-columns:repeat(2,1fr)}
  .hero-grid{gap:var(--sp-lg)}
}

/* ============================================================
   18. RESPONSIVE — MOBILE NAV (≤ 900px)
   ============================================================ */
@media (max-width:900px){
  .primary-nav{display:none}
  .hamburger{display:flex}
  .mobile-drawer{display:block}
  .hero-grid{grid-template-columns:1fr;text-align:center}
  .hero-content{max-width:100%;order:1}
  .hero-visual{order:2}
  .hero-actions{justify-content:center}
  .hero-subhead{margin-inline:auto}
  .eyebrow{margin-inline:auto}
  .three-col{grid-template-columns:1fr}
  .who-grid{grid-template-columns:1fr}
  .testimonials-grid{grid-template-columns:1fr}
  .recognition-grid{grid-template-columns:1fr;max-width:360px}
}

/* ============================================================
   19. RESPONSIVE — MOBILE (≤ 600px)
   ============================================================ */
@media (max-width:600px){
  :root{--sp-2xl:4rem;--sp-xl:3rem}
  .header-inner{height:60px}
  .mobile-drawer{top:60px;inset:60px 0 0 0}
  .six-col{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr;gap:var(--sp-lg)}
  .footer-bottom{flex-direction:column;align-items:flex-start}
  .cta-actions{flex-direction:column;align-items:flex-start}
  .cta-actions .btn{width:100%;justify-content:center}
  .hero-actions{flex-direction:column;align-items:center}
  .hero-actions .btn{width:100%;justify-content:center}
  .dashboard-svg{max-width:340px}
}

/* ============================================================
   20. INTERIOR PAGE CONTENT
   ============================================================ */
.aap-page-hero{
  background:var(--color-bg-tint);
  border-bottom:1px solid var(--color-border);
  padding-block:var(--sp-xl) var(--sp-lg);
  text-align:center
}
.aap-page-hero .page-title{
  font-size:clamp(1.75rem,3.5vw,2.6rem);
  color:var(--color-navy);
  margin:0
}
.aap-page-wrapper{
  padding-block:var(--sp-xl);
}
.aap-page-content{
  max-width:760px;
  margin-inline:auto;
  font-size:1rem;
  line-height:1.8;
  color:var(--color-text)
}
.aap-page-content h2{
  font-size:clamp(1.4rem,2.5vw,2rem);
  color:var(--color-navy);
  margin-top:var(--sp-lg);
  margin-bottom:var(--sp-sm)
}
.aap-page-content h3{
  font-size:1.2rem;
  color:var(--color-navy);
  margin-top:var(--sp-md);
  margin-bottom:.5rem
}
.aap-page-content p{
  margin-bottom:var(--sp-sm)
}
.aap-page-content ul,
.aap-page-content ol{
  list-style:disc;
  padding-left:1.5rem;
  margin-bottom:var(--sp-sm)
}
.aap-page-content ol{
  list-style:decimal
}
.aap-page-content li{
  margin-bottom:.35rem
}
.aap-page-content a{
  color:var(--color-blue);
  text-decoration:underline;
  text-underline-offset:2px
}
.aap-page-content a:hover{
  color:var(--color-blue-light)
}
.aap-page-content blockquote{
  border-left:3px solid var(--color-blue);
  padding-left:var(--sp-md);
  margin-block:var(--sp-md);
  color:var(--color-muted);
  font-style:italic
}

/* ============================================================
   END
   ============================================================ */

/* ============================================================
   WORDPRESS PAGE CONTENT COMPONENTS
   Premium styling for post_content rendered via the_content()
   inside .aap-page-content. All values use :root design tokens.
   Classes match short-codes / block patterns used across the site.
   ============================================================ */

/* ----------------------------------------------------------
   GENERAL PROSE OVERRIDE
   When full-width components live inside .aap-page-content
   they need to escape the default 760px max-width constraint.
   Every .aap-hero, .aap-section, .aap-cta-band, .aap-testi-band
   is pulled full-width by resetting the inherited max-width.
   ---------------------------------------------------------- */
.aap-page-content .aap-hero,
.aap-page-content .aap-section,
.aap-page-content .aap-cta-band,
.aap-page-content .aap-testi-band {
  max-width: none;
  margin-inline: calc(-1 * 1.5rem); /* counteract .container side padding */
}

/* ----------------------------------------------------------
   .aap-page-content — General prose enhancements
   (supplements Section 20; does not override it)
   ---------------------------------------------------------- */
.aap-page-content > h2 {
  font-size: clamp(1.5rem, 2.8vw, 2rem);
  color: var(--color-navy);
  font-family: var(--font-heading);
  font-weight: 700;
  margin-top: var(--sp-lg);
  margin-bottom: var(--sp-sm);
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.aap-page-content > h3 {
  font-size: 1.2rem;
  color: var(--color-navy);
  font-family: var(--font-heading);
  font-weight: 700;
  margin-top: var(--sp-md);
  margin-bottom: .5rem;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.aap-page-content > p {
  color: var(--color-muted);
  line-height: 1.7;
  max-width: 70ch;
  margin-bottom: var(--sp-sm);
}
.aap-page-content > p a,
.aap-page-content > ul a,
.aap-page-content > ol a {
  color: var(--color-blue);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--t-fast);
}
.aap-page-content > p a:hover,
.aap-page-content > ul a:hover,
.aap-page-content > ol a:hover {
  color: var(--color-blue-light);
}
.aap-page-content > strong { font-weight: 700; color: var(--color-text); }
.aap-page-content > em    { font-style: italic; }

/* ----------------------------------------------------------
   .aap-hero — Page-level hero inside post_content
   Eyebrow + H1 + lead paragraph + buttons
   ---------------------------------------------------------- */
.aap-hero {
  padding-block: 5.5rem;
  background: var(--color-bg);
}
.aap-hero__inner {
  width: 100%;
  max-width: 1100px;
  margin-inline: auto;
  padding-inline: 1.5rem;
}
/* When no __inner wrapper is present, constrain direct children */
.aap-hero:not(:has(.aap-hero__inner)) > * {
  max-width: 1100px;
  margin-inline: auto;
  padding-inline: 1.5rem;
}
.aap-hero .eyebrow {
  margin-bottom: var(--sp-md);
}
.aap-hero h1 {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4.5vw, 3.1rem);
  font-weight: 700;
  color: var(--color-navy);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: var(--sp-md);
}
.aap-hero .aap-hero__lead,
.aap-hero > p,
.aap-hero__inner > p {
  font-size: 1.05rem;
  color: var(--color-muted);
  max-width: 62ch;
  line-height: 1.75;
  margin-bottom: var(--sp-lg);
}
.aap-hero .aap-hero__actions,
.aap-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-sm);
  align-items: center;
}

/* ----------------------------------------------------------
   .aap-section — Reusable content section
   ---------------------------------------------------------- */
.aap-section {
  padding-block: 4rem;
  background: var(--color-bg);
}
.aap-section--alt,
.aap-section:nth-of-type(even) {
  background: var(--color-bg-tint);
}
.aap-section__inner {
  width: 100%;
  max-width: 1100px;
  margin-inline: auto;
  padding-inline: 1.5rem;
}
/* Fallback: constrain direct block children when no __inner */
.aap-section:not(:has(.aap-section__inner)) > * {
  max-width: 1100px;
  margin-inline: auto;
  padding-inline: 1.5rem;
}
.aap-section h2,
.aap-section__inner h2 {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 3vw, 2rem);
  font-weight: 700;
  color: var(--color-navy);
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: var(--sp-md);
}
.aap-section p,
.aap-section__inner p {
  color: var(--color-muted);
  line-height: 1.7;
  max-width: 70ch;
  margin-bottom: var(--sp-sm);
}

/* ----------------------------------------------------------
   .aap-card-grid / .aap-cards — Responsive card container
   ---------------------------------------------------------- */
.aap-card-grid,
.aap-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  margin-top: var(--sp-lg);
}

/* ----------------------------------------------------------
   .aap-card — Individual card
   ---------------------------------------------------------- */
.aap-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  box-shadow: var(--shadow-card);
  transition: transform var(--t-mid), box-shadow var(--t-mid);
}
.aap-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 28px 60px rgba(16, 40, 65, .13);
}
.aap-card h3 {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-navy);
  margin-bottom: .5rem;
  letter-spacing: -0.01em;
}
.aap-card p {
  font-size: .92rem;
  color: var(--color-muted);
  line-height: 1.7;
  margin-bottom: 0;
}

/* ----------------------------------------------------------
   .aap-cta-band — Full-width navy call-to-action band
   ---------------------------------------------------------- */
.aap-cta-band {
  background: var(--color-navy);
  padding-block: 4.5rem;
  text-align: center;
}
.aap-cta-band__inner {
  width: 100%;
  max-width: 800px;
  margin-inline: auto;
  padding-inline: 1.5rem;
}
/* Fallback when no __inner */
.aap-cta-band:not(:has(.aap-cta-band__inner)) > * {
  max-width: 800px;
  margin-inline: auto;
  padding-inline: 1.5rem;
}
.aap-cta-band h2,
.aap-cta-band__inner h2 {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: var(--sp-sm);
}
.aap-cta-band p,
.aap-cta-band__inner p {
  font-size: 1.05rem;
  color: rgba(255, 255, 255, .75);
  line-height: 1.75;
  max-width: 58ch;
  margin-inline: auto;
  margin-bottom: var(--sp-lg);
}
.aap-cta-band .aap-cta-band__actions,
.aap-cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-sm);
  align-items: center;
  justify-content: center;
}

/* ----------------------------------------------------------
   .aap-btn — Button system (page content variant)
   Mirrors .btn / .btn-primary / .btn-outline from Section 5.
   ---------------------------------------------------------- */
.aap-btn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-family: var(--font-heading);
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: .01em;
  padding: .75rem 1.55rem;
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast),
              transform var(--t-fast), box-shadow var(--t-fast);
}
.aap-btn:active { transform: translateY(1px); }

/* Primary: blue background + white text */
.aap-btn--primary {
  background: var(--color-blue);
  color: #ffffff;
  border-color: var(--color-blue);
  box-shadow: 0 4px 16px rgba(26, 86, 219, .22);
}
.aap-btn--primary:hover {
  background: var(--color-blue-light);
  border-color: var(--color-blue-light);
  color: #ffffff;
  box-shadow: 0 6px 24px rgba(26, 86, 219, .30);
}

/* Secondary/outline: bordered + navy text */
.aap-btn--secondary {
  background: transparent;
  color: var(--color-navy);
  border-color: var(--color-border);
}
.aap-btn--secondary:hover {
  background: var(--color-bg-tint);
  border-color: rgba(15, 42, 71, .22);
  color: var(--color-navy);
}

/* On navy backgrounds (inside .aap-cta-band):
   primary → white bg + navy text; secondary → white border + white text */
.aap-cta-band .aap-btn--primary {
  background: #ffffff;
  color: var(--color-navy);
  border-color: #ffffff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .15);
}
.aap-cta-band .aap-btn--primary:hover {
  background: var(--color-bg-tint);
  color: var(--color-navy);
  border-color: var(--color-bg-tint);
}
.aap-cta-band .aap-btn--secondary {
  background: transparent;
  color: #ffffff;
  border-color: rgba(255, 255, 255, .5);
}
.aap-cta-band .aap-btn--secondary:hover {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .75);
  color: #ffffff;
}

/* ----------------------------------------------------------
   .aap-visibility-list — Styled check-list
   Also covers ul/ol inside .aap-page-content and .aap-section
   ---------------------------------------------------------- */
.aap-visibility-list,
.aap-page-content ul,
.aap-section ul,
.aap-section__inner ul {
  list-style: none;
  padding-left: 0;
  margin-bottom: var(--sp-sm);
}
.aap-visibility-list li,
.aap-page-content ul li,
.aap-section ul li,
.aap-section__inner ul li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: .5rem;
  color: var(--color-muted);
  line-height: 1.65;
  font-size: .97rem;
}
.aap-visibility-list li::before,
.aap-page-content ul li::before,
.aap-section ul li::before,
.aap-section__inner ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .45em;
  width: .65em;
  height: .65em;
  border-radius: 50%;
  background: var(--color-blue);
  flex-shrink: 0;
}

/* Ordered lists retain numerals */
.aap-page-content ol,
.aap-section ol,
.aap-section__inner ol {
  list-style: decimal;
  padding-left: 1.5rem;
  margin-bottom: var(--sp-sm);
}
.aap-page-content ol li,
.aap-section ol li,
.aap-section__inner ol li {
  margin-bottom: .35rem;
  color: var(--color-muted);
  line-height: 1.7;
}

/* ----------------------------------------------------------
   .aap-testi-band — Testimonial section band
   ---------------------------------------------------------- */
.aap-testi-band {
  background: var(--color-bg-tint);
  padding-block: 4rem;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.aap-testi-band__inner {
  width: 100%;
  max-width: 1100px;
  margin-inline: auto;
  padding-inline: 1.5rem;
}
.aap-testi-band h2 {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 3vw, 2rem);
  font-weight: 700;
  color: var(--color-navy);
  letter-spacing: -0.02em;
  margin-bottom: var(--sp-lg);
  text-align: center;
}

/* Grid: 2-up desktop, 1-up mobile */
.aap-testi-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-md);
}

/* Individual testimonial card */
.aap-testi-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--sp-lg);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: var(--sp-md);
}

/* Gold stars */
.aap-testi-stars {
  display: flex;
  gap: 3px;
  color: #e0a73a;
  font-size: 1.1rem;
  line-height: 1;
}

/* Italic serif-feel quote */
.aap-testi-quote {
  font-size: .975rem;
  color: var(--color-text);
  line-height: 1.8;
  font-style: italic;
  flex: 1;
}

/* Author block */
.aap-testi-name {
  font-family: var(--font-heading);
  font-size: .9rem;
  font-weight: 700;
  color: var(--color-navy);
}
.aap-testi-role {
  font-size: .82rem;
  color: var(--color-muted);
}

/* ----------------------------------------------------------
   RESPONSIVE — PAGE CONTENT COMPONENTS (≤ 700px)
   ---------------------------------------------------------- */
@media (max-width: 700px) {

  /* Hero */
  .aap-hero {
    padding-block: 3.5rem;
  }
  .aap-hero h1 {
    font-size: clamp(1.75rem, 6vw, 2.2rem);
  }
  .aap-hero .aap-hero__actions,
  .aap-hero__actions {
    flex-direction: column;
    align-items: stretch;
  }
  .aap-hero__actions .aap-btn {
    width: 100%;
    justify-content: center;
  }

  /* Section */
  .aap-section {
    padding-block: 2.5rem;
  }

  /* Card grids → single column */
  .aap-card-grid,
  .aap-cards {
    grid-template-columns: 1fr;
  }

  /* CTA band */
  .aap-cta-band {
    padding-block: 3rem;
  }
  .aap-cta-band__actions {
    flex-direction: column;
    align-items: stretch;
  }
  .aap-cta-band__actions .aap-btn {
    width: 100%;
    justify-content: center;
  }

  /* Testimonial grid → single column */
  .aap-testi-grid {
    grid-template-columns: 1fr;
  }

  /* Escape margin compensation on narrow screens */
  .aap-page-content .aap-hero,
  .aap-page-content .aap-section,
  .aap-page-content .aap-cta-band,
  .aap-page-content .aap-testi-band {
    margin-inline: -1rem;
  }
}

/* ----------------------------------------------------------
   RESPONSIVE — VERY NARROW (≤ 390px)
   Ensures zero horizontal overflow at smallest viewport.
   ---------------------------------------------------------- */
@media (max-width: 390px) {

  .aap-hero,
  .aap-section,
  .aap-cta-band,
  .aap-testi-band {
    overflow-x: hidden;
  }

  .aap-hero__inner,
  .aap-section__inner,
  .aap-cta-band__inner,
  .aap-testi-band__inner {
    padding-inline: 1rem;
  }

  .aap-card {
    padding: 1.25rem;
  }

  .aap-page-content .aap-hero,
  .aap-page-content .aap-section,
  .aap-page-content .aap-cta-band,
  .aap-page-content .aap-testi-band {
    margin-inline: -.75rem;
  }
}

/* ============================================================
   END — WORDPRESS PAGE CONTENT COMPONENTS
   ============================================================ */

/* ============================================================
   PAGE CONTENT — COMPLETE COVERAGE
   Extends "WORDPRESS PAGE CONTENT COMPONENTS" above.
   All values use :root tokens. No !important except where noted.
   Responsive: single-column under 700px, no overflow at 390px.
   ============================================================ */

/* ----------------------------------------------------------
   .aap-section — ALL MODIFIERS
   Each modifier is the same generous-padding section base.
   A subset gets a subtle bg tint for visual rhythm.
   ---------------------------------------------------------- */

/* Tinted sections (alternate rhythm) */
.aap-section--approach,
.aap-section--connections,
.aap-section--contact-form,
.aap-section--coverage,
.aap-section--hmo,
.aap-section--process,
.aap-section--systems,
.aap-section--why-it-matters {
  background: var(--color-bg-tint);
}

/* Sections that stay white */
.aap-section--audience,
.aap-section--contact-close,
.aap-section--contact-intro,
.aap-section--fit,
.aap-section--founder,
.aap-section--positioning,
.aap-section--problem,
.aap-section--recognition,
.aap-section--services,
.aap-section--visibility,
.aap-section--who {
  background: var(--color-bg);
}

/* All modifier sections share generous vertical padding */
[class*="aap-section--"] {
  padding-block: 4rem;
}

/* Inner constraint for all modifier sections */
[class*="aap-section--"] > .aap-section__inner,
[class*="aap-section--"] > [class*="__inner"] {
  width: 100%;
  max-width: 1100px;
  margin-inline: auto;
  padding-inline: 1.5rem;
}

/* Headings and paragraphs within modifier sections */
[class*="aap-section--"] h2 {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  color: var(--color-navy);
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: var(--sp-md);
}
[class*="aap-section--"] h3 {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-navy);
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin-bottom: .5rem;
  margin-top: var(--sp-md);
}
[class*="aap-section--"] p {
  color: var(--color-muted);
  line-height: 1.7;
  max-width: 70ch;
  margin-bottom: var(--sp-sm);
}

/* ----------------------------------------------------------
   .aap-centered-section — centered content area
   ---------------------------------------------------------- */
.aap-centered-section {
  padding-block: 4rem;
  background: var(--color-bg);
  text-align: center;
}
.aap-centered-section__inner,
.aap-centered-section > * {
  width: 100%;
  max-width: 1000px;
  margin-inline: auto;
  padding-inline: 1.5rem;
}
.aap-centered-section h2 {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  color: var(--color-navy);
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: var(--sp-md);
}
.aap-centered-section h3 {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-navy);
  margin-bottom: .5rem;
}
.aap-centered-section p {
  color: var(--color-muted);
  line-height: 1.75;
  max-width: 62ch;
  margin-inline: auto;
  margin-bottom: var(--sp-sm);
}

/* ----------------------------------------------------------
   .aap-page-hero — Interior page title band
   ---------------------------------------------------------- */
.aap-page-hero {
  padding-block: 3.5rem 2.5rem;  /* override section 20 with generous padding */
}
.aap-page-hero .page-title,
.aap-page-hero h1 {
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  color: var(--color-navy);
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 auto;
  max-width: 800px;
}
.aap-page-hero p,
.aap-page-hero .page-subtitle {
  margin-top: var(--sp-sm);
  font-size: 1.05rem;
  color: var(--color-muted);
  line-height: 1.7;
  max-width: 62ch;
  margin-inline: auto;
}

/* ----------------------------------------------------------
   .aap-page-wrapper & .aap-page-content — Main content areas
   ---------------------------------------------------------- */
.aap-page-wrapper {
  max-width: 1140px;
  margin-inline: auto;
  padding-inline: 1.5rem;
  padding-block: var(--sp-xl);
}
/* .aap-page-content prose is styled in sections 20 & WPCC above;
   add supplemental max-width and prose polish here */
.aap-page-wrapper .aap-page-content,
.aap-page-wrapper > .aap-page-content {
  max-width: 760px;
}
.aap-page-content h4 {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-navy);
  margin-top: var(--sp-md);
  margin-bottom: .35rem;
}
.aap-page-content h5,
.aap-page-content h6 {
  font-family: var(--font-heading);
  font-size: .95rem;
  font-weight: 600;
  color: var(--color-navy);
  margin-top: var(--sp-sm);
  margin-bottom: .25rem;
}
.aap-page-content hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin-block: var(--sp-lg);
}
.aap-page-content img {
  border-radius: var(--radius-md);
  max-width: 100%;
  height: auto;
  margin-block: var(--sp-sm);
}
.aap-page-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: .92rem;
  margin-bottom: var(--sp-md);
}
.aap-page-content th {
  background: var(--color-bg-tint);
  color: var(--color-navy);
  font-family: var(--font-heading);
  font-weight: 700;
  text-align: left;
  padding: .65rem .9rem;
  border: 1px solid var(--color-border);
}
.aap-page-content td {
  padding: .6rem .9rem;
  border: 1px solid var(--color-border);
  color: var(--color-muted);
  line-height: 1.6;
}
.aap-page-content tr:nth-child(even) td {
  background: var(--color-bg-tint);
}

/* ----------------------------------------------------------
   .aap-hero — In-content hero block
   Left-aligned, constrained, generous padding
   (supplements the WPCC block above)
   ---------------------------------------------------------- */
.aap-hero {
  padding-block: 5rem;
}
.aap-hero .eyebrow {
  display: inline-flex;
}
.aap-hero h1,
.aap-hero__inner h1 {
  max-width: 700px;
}
.aap-hero p,
.aap-hero__inner p {
  max-width: 60ch;
}

/* ----------------------------------------------------------
   .aap-portland-page — Portland page wrapper
   Strong contrast: dark text on light bands,
   white text on any dark band inside.
   ---------------------------------------------------------- */
.aap-portland-page {
  color: var(--color-text);
}
.aap-portland-page h1,
.aap-portland-page h2,
.aap-portland-page h3,
.aap-portland-page h4 {
  color: var(--color-navy);
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.aap-portland-page p,
.aap-portland-page li {
  color: var(--color-text);  /* full-strength, not muted — max contrast */
  line-height: 1.75;
}
.aap-portland-page a {
  color: var(--color-blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.aap-portland-page a:hover {
  color: var(--color-blue-light);
}
/* Dark bands inside the Portland page */
.aap-portland-page .aap-cta-band,
.aap-portland-page [class*="aap-section--dark"],
.aap-portland-page .aap-section--navy {
  background: var(--color-navy);
}
.aap-portland-page .aap-cta-band h1,
.aap-portland-page .aap-cta-band h2,
.aap-portland-page .aap-cta-band h3,
.aap-portland-page [class*="aap-section--dark"] h1,
.aap-portland-page [class*="aap-section--dark"] h2,
.aap-portland-page [class*="aap-section--dark"] h3,
.aap-portland-page .aap-section--navy h1,
.aap-portland-page .aap-section--navy h2,
.aap-portland-page .aap-section--navy h3 {
  color: #ffffff;
}
.aap-portland-page .aap-cta-band p,
.aap-portland-page [class*="aap-section--dark"] p,
.aap-portland-page .aap-section--navy p {
  color: rgba(255, 255, 255, .82);
}
/* Section constraint inside Portland */
.aap-portland-page .aap-section,
.aap-portland-page [class*="aap-section--"] {
  max-width: none;
}
.aap-portland-page .aap-section__inner,
.aap-portland-page [class*="aap-section--"] > * {
  max-width: 1100px;
  margin-inline: auto;
  padding-inline: 1.5rem;
}

/* ----------------------------------------------------------
   .aap-card-grid / .aap-cards / .aap-res-grid / .aap-tools
   Responsive grid containers
   ---------------------------------------------------------- */
.aap-res-grid,
.aap-tools {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  margin-top: var(--sp-lg);
}

/* ----------------------------------------------------------
   .aap-card — Card variants
   ---------------------------------------------------------- */

/* --tool: feature/tool card with accent top border */
.aap-card--tool {
  border-top: 3px solid var(--color-blue);
  background: var(--color-bg);
}
.aap-card--tool h3 {
  color: var(--color-navy);
}
.aap-card--tool p {
  color: var(--color-muted);
}

/* --not: "what we're not" card — muted tint, dark readable text */
.aap-card--not {
  background: var(--color-bg-tint);
  border-color: var(--color-border);
}
.aap-card--not h3 {
  color: var(--color-navy);   /* strong contrast on light bg */
}
.aap-card--not p {
  color: var(--color-text);   /* full-strength on light bg */
}

/* ----------------------------------------------------------
   .aap-managed / .aap-not / .aap-problem / .aap-audience
   Card/list grids for structured content blocks
   ---------------------------------------------------------- */
.aap-managed,
.aap-not,
.aap-problem,
.aap-audience {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-top: var(--sp-lg);
}
.aap-managed > *,
.aap-not > *,
.aap-problem > *,
.aap-audience > * {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.5rem 1.75rem;
  box-shadow: var(--shadow-card);
}
.aap-not > * {
  background: var(--color-bg-tint);
}
.aap-managed > * h3,
.aap-not > * h3,
.aap-problem > * h3,
.aap-audience > * h3 {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-navy);
  margin-bottom: .45rem;
}
.aap-managed > * p,
.aap-not > * p,
.aap-problem > * p,
.aap-audience > * p {
  font-size: .92rem;
  color: var(--color-muted);
  line-height: 1.7;
}
/* .aap-not items: text on tinted bg — use full-strength dark */
.aap-not > * p {
  color: var(--color-text);
}

/* ----------------------------------------------------------
   .aap-demo — Demo / video / screenshot block
   ---------------------------------------------------------- */
.aap-demo {
  margin-block: var(--sp-lg);
}
.aap-demo figure,
.aap-demo .aap-demo__media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-card);
  background: var(--color-bg-tint);
}
.aap-demo img,
.aap-demo video,
.aap-demo iframe {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
}
.aap-demo figcaption,
.aap-demo .aap-demo__caption {
  font-size: .85rem;
  color: var(--color-muted);
  text-align: center;
  padding: .75rem var(--sp-md);
  line-height: 1.5;
}
/* Ensure text on any dark framing inside demo is readable */
.aap-demo h3 {
  color: var(--color-navy);
  font-family: var(--font-heading);
  font-weight: 700;
  margin-bottom: .5rem;
}
.aap-demo p {
  color: var(--color-muted);
  line-height: 1.7;
}

/* ----------------------------------------------------------
   LISTS — Styled check-lists
   .aap-contact-list / .aap-coverage-list /
   .aap-visibility-list (already above) / .aap-who-list
   ---------------------------------------------------------- */
.aap-contact-list,
.aap-coverage-list,
.aap-who-list {
  list-style: none;
  padding-left: 0;
  margin-bottom: var(--sp-md);
}
.aap-contact-list li,
.aap-coverage-list li,
.aap-who-list li {
  position: relative;
  padding-left: 1.8rem;
  margin-bottom: .6rem;
  color: var(--color-muted);
  line-height: 1.65;
  font-size: .97rem;
}
.aap-contact-list li::before,
.aap-coverage-list li::before,
.aap-who-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .42em;
  width: .7em;
  height: .7em;
  /* Blue checkmark using clip-path instead of border-radius to look like ✓ */
  background: var(--color-blue);
  border-radius: 50%;
  flex-shrink: 0;
}
/* Strong contrast version: on tinted or white bg both read fine */
.aap-contact-list li,
.aap-coverage-list li {
  color: var(--color-text);  /* higher contrast for key info lists */
}

/* ----------------------------------------------------------
   .aap-btn — GHOST variant (contrast fix)
   ---------------------------------------------------------- */
.aap-btn--ghost {
  background: transparent;
  color: var(--color-navy);
  border-color: var(--color-navy);
  border-width: 2px;
  border-style: solid;
}
.aap-btn--ghost:hover {
  background: var(--color-bg-tint);
  color: var(--color-navy);
  border-color: var(--color-navy);
}
/* On dark backgrounds — ghost flips to white */
.aap-cta-band .aap-btn--ghost {
  color: #ffffff;
  border-color: rgba(255, 255, 255, .65);
  background: transparent;
}
.aap-cta-band .aap-btn--ghost:hover {
  background: rgba(255, 255, 255, .12);
  border-color: #ffffff;
  color: #ffffff;
}

/* Dark-band button overrides for all known dark containers */
.aap-cta-band .aap-btn--primary,
.aap-section--navy .aap-btn--primary,
[class*="aap-section--dark"] .aap-btn--primary {
  background: #ffffff;
  color: var(--color-navy);
  border-color: #ffffff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .18);
}
.aap-cta-band .aap-btn--primary:hover,
.aap-section--navy .aap-btn--primary:hover,
[class*="aap-section--dark"] .aap-btn--primary:hover {
  background: var(--color-bg-tint);
  color: var(--color-navy);
  border-color: var(--color-bg-tint);
}
.aap-cta-band .aap-btn--secondary,
.aap-section--navy .aap-btn--secondary,
[class*="aap-section--dark"] .aap-btn--secondary {
  background: transparent;
  color: #ffffff;
  border-color: rgba(255, 255, 255, .55);
}
.aap-cta-band .aap-btn--secondary:hover,
.aap-section--navy .aap-btn--secondary:hover,
[class*="aap-section--dark"] .aap-btn--secondary:hover {
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .8);
  color: #ffffff;
}

/* ----------------------------------------------------------
   DARK-BACKGROUND TEXT CONTRAST
   Any navy/blue section must render white text.
   Covers: .aap-cta-band (already above) +
           .aap-card--tool (if used on dark bg) +
           .aap-section--navy / dark variants
   ---------------------------------------------------------- */
.aap-section--navy,
[class*="aap-section--dark"] {
  background: var(--color-navy);
}
.aap-section--navy h2,
.aap-section--navy h3,
.aap-section--navy h4,
.aap-section--navy p,
.aap-section--navy li,
[class*="aap-section--dark"] h2,
[class*="aap-section--dark"] h3,
[class*="aap-section--dark"] h4,
[class*="aap-section--dark"] p,
[class*="aap-section--dark"] li {
  color: #ffffff;
}
.aap-section--navy a,
[class*="aap-section--dark"] a {
  color: rgba(255, 255, 255, .85);
}
.aap-section--navy a:hover,
[class*="aap-section--dark"] a:hover {
  color: #ffffff;
}
/* "Where to start" dark box (used in Resources page) */
.aap-where-to-start,
.aap-dark-box {
  background: var(--color-navy);
  border-radius: var(--radius-md);
  padding: var(--sp-lg);
  color: rgba(255, 255, 255, .85);
}
.aap-where-to-start h2,
.aap-where-to-start h3,
.aap-where-to-start h4,
.aap-dark-box h2,
.aap-dark-box h3,
.aap-dark-box h4 {
  color: #ffffff;
}
.aap-where-to-start p,
.aap-dark-box p {
  color: rgba(255, 255, 255, .82);
  line-height: 1.7;
}
.aap-where-to-start a,
.aap-dark-box a {
  color: rgba(255, 255, 255, .9);
  text-decoration: underline;
}
.aap-where-to-start a:hover,
.aap-dark-box a:hover {
  color: #ffffff;
}
.aap-where-to-start li::before,
.aap-dark-box li::before {
  background: rgba(255, 255, 255, .7);
}

/* ----------------------------------------------------------
   RESPONSIVE — COMPLETE COVERAGE (≤ 700px)
   ---------------------------------------------------------- */
@media (max-width: 700px) {

  /* All modifier sections */
  [class*="aap-section--"] {
    padding-block: 2.5rem;
  }

  /* Centered section */
  .aap-centered-section {
    padding-block: 2.5rem;
  }
  .aap-centered-section p {
    margin-inline: 0;
  }

  /* Page hero */
  .aap-page-hero {
    padding-block: 2.5rem 1.75rem;
  }

  /* Page wrapper */
  .aap-page-wrapper {
    padding-inline: 1rem;
    padding-block: var(--sp-lg);
  }

  /* Card grids */
  .aap-managed,
  .aap-not,
  .aap-problem,
  .aap-audience,
  .aap-res-grid,
  .aap-tools {
    grid-template-columns: 1fr;
  }

  /* Demo */
  .aap-demo figure,
  .aap-demo .aap-demo__media {
    border-radius: var(--radius-md);
  }

  /* Buttons in sections */
  [class*="aap-section--"] .aap-hero__actions,
  .aap-centered-section .aap-hero__actions {
    flex-direction: column;
    align-items: stretch;
  }
  [class*="aap-section--"] .aap-btn,
  .aap-centered-section .aap-btn {
    width: 100%;
    justify-content: center;
  }

  /* Portland page */
  .aap-portland-page .aap-section__inner,
  .aap-portland-page [class*="aap-section--"] > * {
    padding-inline: 1rem;
  }
}

/* ----------------------------------------------------------
   RESPONSIVE — VERY NARROW (≤ 390px)
   Zero horizontal overflow.
   ---------------------------------------------------------- */
@media (max-width: 390px) {

  [class*="aap-section--"] {
    overflow-x: hidden;
  }
  [class*="aap-section--"] > .aap-section__inner,
  [class*="aap-section--"] > [class*="__inner"] {
    padding-inline: .875rem;
  }
  .aap-centered-section__inner,
  .aap-centered-section > * {
    padding-inline: .875rem;
  }
  .aap-page-wrapper {
    padding-inline: .875rem;
  }
  .aap-managed > *,
  .aap-not > *,
  .aap-problem > *,
  .aap-audience > * {
    padding: 1.1rem 1.25rem;
  }
  .aap-card--tool,
  .aap-card--not {
    padding: 1.1rem 1.25rem;
  }
  .aap-where-to-start,
  .aap-dark-box {
    padding: 1.25rem;
  }
}

/* ============================================================
   BUTTON & LINK DEFAULTS (ensure no button text is invisible)
   ============================================================ */
/* A button with no variant modifier gets the solid primary look,
   so its text is never white-on-white. Variant classes still win. */
.aap-btn:not([class*="--"]) {
  background: var(--color-blue);
  color: #fff;
  border-color: var(--color-blue);
}
.aap-btn:not([class*="--"]):hover {
  background: var(--color-blue-light);
  color: #fff;
}
/* Content links use the readable brand blue, not a pale tint. */
.aap-page-content a:not(.aap-btn),
.aap-portland-page a:not(.aap-btn) {
  color: var(--color-blue);
}
.aap-page-content a:not(.aap-btn):hover,
.aap-portland-page a:not(.aap-btn):hover {
  color: var(--color-blue-light);
}

/* ============================================================
   END — PAGE CONTENT COMPLETE COVERAGE
   ============================================================ */