/* Clamon Counseling Microsites — Shared Styles (v1.1.8)
   DEV NOTE:
   - v1.1.8: Final surgical hardeners.
   - Gated all :hover states for touch devices.
   - Scoped <details> focus to <summary>.
   - Added underline to a:focus-visible.
   - Added production print styles.
*/

:root {
  --brand: #5B4B8A;        /* primary */
  --brand-dark: #46336E;  /* headings */
  --sand: #F4EDE1;        /* background */
  --text: #2E2E2E;
  --muted: #666;
  
  /* --- GOVERNED ACCENT COLOR --- */
  --accent-rgb: 163, 122, 204;
  --accent: rgb(var(--accent-rgb));

  --radius: 10px;
  
  /* Global hero image variable */
  --hero-bg: url('https://www.clamoncounseling.com/wp-content/uploads/hero-home.jpg');
}

/* --- Base Layout --- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Segoe UI, system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  background: var(--sand);
  color: var(--text);
  line-height: 1.6;
}

img, svg, video { 
  max-width: 100%; 
  height: auto; 
  display: block; 
}

.container { max-width: 980px; margin: 0 auto; padding: 0 1rem; }

h1 { 
  font-size: clamp(1.75rem, 2.2rem + 1.2vw, 2.6rem); 
  line-height: 1.2; 
  margin-block: 0 0.5rem; 
}
h2 { 
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.35rem); 
  color: var(--brand-dark); 
  border-bottom: 2px solid var(--brand); 
  padding-bottom: .25rem; 
  margin-block: 2rem 0.5rem; 
}

/* --- Hero --- */
.hero {
  position: relative;
  min-height: 72vh; /* Fallback hero height */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  background: #333;
  background-image: var(--hero-bg);
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

@supports (height: 100svh) {
  .hero { min-height: min(72vh, 72svh); }
}

.hero::before { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,.5); }
.hero .content {
  position: relative;
  z-index: 1;
  max-width: 740px;
  padding: 2rem;
}
.hero .content h1,
.hero .content p {
  text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.hero .cta { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-top: 1rem; }

main { padding: 3rem 0; }
section { margin-block-end: 1.5rem; }
ul { padding-left: 1.25rem; }

blockquote {
  background: #fff;
  border-left: 4px solid var(--accent);
  padding: 1rem;
  border-radius: 0 var(--radius) var(--radius) 0;
  margin: 1rem 0;
}

details {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: var(--radius);
  padding: 1rem;
  margin-top: 1rem;
}
summary { cursor: pointer; font-weight: 700; }

footer {
  background: #2E2E2E;
  color: #eee;
  padding: 2rem 1rem;
  margin-top: 3rem;
  text-align: center;
}

footer a {
  color: #eee;
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: color 0.25s ease-in-out;
}
/* Footer hover gated below */

/* --- Link & CTA Enhancements --- */
a {
  color: var(--brand);
  text-decoration: none;
  transition: color 0.25s ease-in-out, text-decoration-color 0.25s ease-in-out;
}
a:visited { color: var(--brand-dark); }
footer a:visited { color: #eee; } /* Keep footer links light */


.hero .cta a {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius);
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
  border: 2px solid transparent; 
  transition: background 0.25s ease-in-out, box-shadow 0.25s ease-in-out, 
              transform 0.25s ease-in-out, color 0.25s ease-in-out, 
              border-color 0.25s ease-in-out;
}

.hero .cta a.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.hero .cta a.btn-outline {
  background: transparent;
  border-color: #fff;
  color: #fff;
}
/* Hero hover gated below */

.hero .cta a:active { 
  transform: translateY(0); 
  box-shadow: 0 2px 4px rgba(0,0,0,.2); 
}

/* --- Location Link Hover Polish --- */
.locations ul {
  list-style-type: none;
  padding-left: 0;
}
.locations li { margin-bottom: 0.5rem; }

.locations a {
  display: inline-block;
  color: var(--brand);
  text-decoration: none;
  transition: color 0.35s cubic-bezier(0.25, 0.8, 0.25, 1),
              background 0.35s cubic-bezier(0.25, 0.8, 0.25, 1),
              box-shadow 0.35s cubic-bezier(0.25, 0.8, 0.25, 1),
              transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
  padding: 0.3rem 0.5rem; 
  border-radius: 6px;
}
/* Location hover gated below */

.locations [aria-current="page"] {
  color: var(--brand-dark);
  font-weight: 700;
  padding: 0.3rem 0.5rem;
}

/* --- GATED HOVER STYLES (Kills "sticky hover" on touch) --- */
@media (hover: hover) and (pointer: fine) {
  a:hover { 
    color: var(--accent); 
    text-decoration: underline; 
    text-underline-offset: 4px; 
  }
  footer a:hover {
    color: var(--accent);
  }
  .hero .cta a:hover {
    background: var(--brand-dark);
    border-color: var(--brand-dark);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.25);
  }
  .locations a:hover {
    background: rgba(var(--accent-rgb), 0.1); 
    color: var(--accent);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
}


/* --- Accessible Focus States --- */
button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius);
}

a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius);
  text-decoration: underline; 
  text-underline-offset: 4px; 
}

details summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius);
}

.hero .cta a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* WCAG Skip-link styles */
.sr-only-focusable {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.sr-only-focusable:focus {
  position: fixed; 
  left: 0;
  top: 0;
  width: auto;
  height: auto;
  overflow: visible;
  z-index: 9999;
  background: #2E2E2E;
  color: #fff;
  padding: .5rem 1rem;
  border-radius: 0 0 6px 6px;
}


/* --- Motion Safety --- */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  
  .hero .cta a:hover,
  .hero .cta a:focus-visible { 
    transform: none; 
    box-shadow: 0 3px 6px rgba(0,0,0,.15); 
  }
}

/* --- Responsive Tweaks --- */
@media (max-width: 600px) {
  .container { padding-inline: 14px; }
  body { font-size: 16px; }
  ul { padding-left: 0; }
  li { line-height: 1.5; }
}

/* --- High-contrast (Windows forced colors) safety net --- */
@media (forced-colors: active) {
  :root { 
    --brand: CanvasText;
    --brand-dark: CanvasText;
    --accent: CanvasText; 
  }
  h2 { border-bottom-color: CanvasText; }
  blockquote { border-left-color: CanvasText; }
  
  .hero::before { 
    background: rgba(0,0,0,.4); 
    forced-color-adjust: none; 
  }
  
  .hero .cta a { border-color: CanvasText; }
  .hero .cta a.btn-primary { background: CanvasText; color: Canvas; }
  .hero .cta a.btn-outline { color: CanvasText; }
  footer { background: Canvas; color: CanvasText; }
  footer a, footer a:visited { color: LinkText; }
  .locations a:hover { background: Highlight; color: HighlightText; }
  a:focus-visible, 
  button:focus-visible, 
  .hero .cta a:focus-visible { 
    outline-color: LinkText; 
  }
}

/* --- Print-Safe Defaults --- */
@media print {
  * { 
    box-shadow: none !important; 
    text-shadow: none !important; 
  }
  body {
    background: #fff;
    color: #000;
  }
  a { 
    color: #000; 
    text-decoration: underline; 
  }
  .hero { 
    min-height: auto; 
    background: none; 
    color: #000;
  }
  .hero::before { display: none; }
  .hero .content h1, .hero .content p { text-shadow: none; }
  footer, .hero .cta, section[aria-labelledby="faq"] {
    display: none;
  }
}

/* --- Optional Enhancements (Future-Proofing) --- */

@media (min-width: 1200px) { 
  .container { max-width: 1080px; }
}