/* =========================================================
   Phoenix Rising Counseling – styles.sections.css
   Standard sections, layout utilities, images, contact
   (Sections 7–10 from original styles.css)
   ========================================================= */


/* =========================================================
   7. Standard Section Appearance
   ========================================================= */

/* Section headings – all levels */
.section:not(.section-hero) h1,
.section:not(.section-hero) h2,
.section:not(.section-hero) h3,
.section:not(.section-hero) h4,
.section:not(.section-hero) h5,
.section:not(.section-hero) h6 {
  margin-bottom: 1.5rem;
  color: var(--color-text-main);
}


/* Alternating section backgrounds by order in <main> */
main .section:nth-of-type(odd) {
  background-color: var(--color-bg);
}

main .section:nth-of-type(even) {
  background-color: var(--color-bg-alt);
}

/* Hero defines its own background; don't override with alternation */
.section-hero {
  background-color: transparent;
}

/* Section text default colors */
.section:not(.section-hero) p {
  color: var(--color-text-main);
}

/* Utility muted text */
.text-muted,
.footer-subtitle {
  color: var(--color-text-muted);
}


/* =========================================================
   8. Layout Utilities – Two-Column & Related
   ========================================================= */

/* Primary two-column layout for sections that use the
   "two-column" SectionLayoutClass in appsettings.json.
   Example HTML:
   <section class="section section-getting-started">
     <div class="section-inner two-column">
       <!-- col 1: main content / steps -->
       <!-- col 2: sidecar accordions / supporting info -->
     </div>
   </section>
*/
/* Outer container for sections that use a two-region layout.
   This stays block-level so headings / intro copy can span full width
   ABOVE the actual grid wrapper (.section-two-col). */
.section-inner.two-column {
  /* no grid here on purpose */
}

/* Primary two-column layout wrapper produced by Apply-SectionLayoutRegions.
   Expected structure:
     <div class="section-two-col">
       <div class="section-two-col-text">…primary/steps…</div>
       <aside class="section-two-col-media">…sidecar/accordions…</aside>
     </div>
*/
.section-two-col {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 2rem;
  align-items: flex-start;
}

/* Optional helpers for future template wrappers:
   - .section-two-col-text : main text column
   - .section-two-col-media: supporting image/media column
*/
.section-two-col-text {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}


/* Optional helpers for future template wrappers:
   - .section-two-col-text : main text column
   - .section-two-col-media: supporting image/media column
*/
.section-inner.two-column .section-two-col-text,
.section-two-col .section-two-col-text {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Media column images */
.section-inner.two-column .section-two-col-media img,
.section-inner.two-column .section-two-col img,
.section-two-col .section-two-col-media img,
.section-two-col img {
  display: block;
  max-width: 100%;
  border-radius: 0.75rem;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}

/* =========================================================
   Generic: Sidecar column readability & list control
   Applies to ALL region-based two-column sections
   ========================================================= */

.section-two-col-media {
  line-height: 1.45;
}

.section-two-col-media h3,
.section-two-col-media h4,
.section-two-col-media h5 {
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}

.section-two-col-media p {
  margin-top: 0.5rem;
  margin-bottom: 0.75rem;
}

/* Lists in sidecar should stay visually contained and readable */
.section-two-col-media ul {
  margin: 0.5rem 0 1rem;
  padding-left: 1.25rem;
}

.section-two-col-media li {
  margin: 0.35rem 0;
}


/* Repeatable row layout wrapper produced by Apply-SectionLayoutRows.
   Expected structure:
     <div class="section-two-col-row" data-layout="row">
       <div class="section-two-col-left" data-layout="left">…left…</div>
       <div class="section-two-col-right" data-layout="right">…right…</div>
     </div>

   Repeatable row layout wrapper produced by Apply-SectionLayoutRows.
   Default: 50/50 columns. Width variants are applied via extra row-*
   classes (e.g., row-left-narrow, row-right-narrow). */
.section-two-col-row {
  display: grid;
  grid-template-columns: 1fr 1fr;   /* default: even split */
  gap: 1.5rem;
  align-items: start;
  margin: 1.25rem 0;
}

/* Width variants (opted into via layout markers → extra classes) */
.section-two-col-row.row-left-narrow {
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.8fr);
}

.section-two-col-row.row-right-narrow {
  grid-template-columns: minmax(0, 1.8fr) minmax(0, 0.9fr);
}



.section-two-col-left {
  display: block;
}

.section-two-col-right {
  display: block;
}

/* Mobile: collapse back to single-column stack */
@media (max-width: 900px) {
  .section-two-col {
    display: block;
  }

  .section-two-col-media {
    margin-top: 1.5rem;
  }

  .section-two-col-row {
    display: block;
  }

  .section-two-col-left {
    margin-bottom: 1rem;
  }
}

/* Generic: images placed in the sidecar column should behave consistently */
.section-two-col-media img {
  display: block;
  width: 100%;
  height: auto;

  /* prevents oversized images from looking goofy in wide sidecars */
  max-width: 420px;

  /* keep image nicely positioned */
  margin: 0 auto 1rem;

  /* optional: soft rounding to match the site aesthetic */
  border-radius: 0.75rem;
}



/* =========================================================
   9. Images – Global & Section-Specific (incl. Team)
   ========================================================= */

/* Baseline image rules */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Images inside sections */
.section img {
  margin: 1rem auto;
  border-radius: 0.5rem;
  filter: saturate(0.95); /* keep text visually dominant */
}

/* Solo images in a paragraph – typical Markdown pattern */
.section p > img:only-child {
  margin-top: 0.5rem;
  margin-bottom: 1rem;
}

/* Icon-ish images (explicit width/height) */
.section img[width],
.section img[height] {
  margin: 0 0.4rem 0 0;
  display: inline-block;
  vertical-align: middle;
  border-radius: 0.25rem;
}

/* If multiple images appear in a row (simple inline gallery) */
.section p img + img {
  margin-left: 0.75rem;
}

/* ------- Hero inline images (rare) ------- */

.section-hero img {
  max-width: 220px;
  margin: 1rem 0 0;
  border-radius: 0.75rem;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}

/* ------- Services & Who We Are images (Markdown-only layout) ------- */

/* Services: float images to the right */
.section-services img {
  float: right;
  width: min(320px, 40%);
  max-width: 360px;
  margin-left: 1.5rem;
  margin-bottom: 1rem;
  border-radius: 0.75rem;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.1);
}



/* ------- Resources – Recommended Books layout ------- */

.section-resources-books h3 {
  clear: both;
  margin-top: 2.25rem;
  margin-bottom: 0.6rem;
}

.section-resources-books h3:first-of-type {
  margin-top: 1.5rem;
}

.section-resources-books hr {
  clear: both;
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  margin: 2rem 0 1.25rem;
}

/* NEW: handle linked cover images wrapped in <a> */
.section-resources-books h3 + p a > img {
  float: left;
  width: 120px;
  max-width: 30vw;
  height: auto;
  margin: 0.25rem 1.5rem 0.5rem 0;
  border-radius: 0.5rem;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.16);
  filter: saturate(0.95);
}

/* Next paragraph is the main text block */
.section-resources-books h3 + p + p {
  overflow: hidden;
  margin-bottom: 1.5rem;
}

/* Spacing if HR follows directly */
.section-resources-books h3 + p + p + hr {
  margin-top: 1.75rem;
}

/* Why we recommend it: inline label style */
.section-resources-books p strong {
  display: inline-block;
  margin-bottom: 0.25rem;
  color: var(--color-black);
  font-weight: 600;
}

/* Mobile: collapse image above text */
@media (max-width: 720px) {
  .section-resources-books h3 + p a > img {
    float: none;
    display: block;
    margin: 0.5rem auto 0.75rem auto;
    max-width: 180px;
  }

  .section-resources-books h3 + p + p {
    overflow: visible;
  }
}

/* ------- Team section – grid card layout & circular headshots ------- */

.section-team .section-inner {
  display: block;
}

/* Fallback if/when .team-member wrappers exist */
.section-team .team-member {
  background-color: var(--color-surface);
  border-radius: 1rem;
  padding: 1.5rem 1.75rem;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.08);
  text-align: center;
  border: 1px solid var(--color-border-subtle);
}

/* Team heading/body fallback if wrappers do not exist */
.section-team h3 {
  margin-top: 0;
  margin-bottom: 0.35rem;
  font-size: 1.15rem;
  text-align: center;
}

.section-team p {
  margin-bottom: 0.5rem;
  text-align: center;
}

/* Circular headshot styling */
.section-team img {
  display: block;
  width: 300px;
  max-width: 60%;
  margin: 0 auto 0.9rem;
  border-radius: 999px;
  object-fit: cover;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.16);
}

/* Named text hooks inside .team-member */
.section-team .team-member-name {
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: 0.15rem;
  color: var(--color-black);
}

.section-team .team-member-title {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-text-muted);
  margin-bottom: 0.6rem;
}

.section-team .team-member-bio {
  font-size: 0.9rem;
  color: var(--color-text-main);
}

/* Contact/map images (if ever used instead of iframes) */
.section-contact img {
  border-radius: 0.75rem;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14);
}


/* =========================================================
   10. Contact Section – Embedded Forms & Map
   ========================================================= */

.section-contact .section-inner {
  display: block;
}

/* Card-style containers for the forms and map */
.contact-form-embed,
.referral-form-embed,
.map-embed {
  background-color: var(--color-surface);
  border-radius: 1rem;
  padding: 1.25rem;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.10);
  border: 1px solid var(--color-border-subtle);
}

/* --- Forms: responsive intrinsic ratio (both forms) --- */
.contact-form-embed,
.referral-form-embed {
  position: relative;
  overflow: hidden;
}

.contact-form-embed::before,
.referral-form-embed::before {
  content: "";
  display: block;
  padding-top: 75%; /* 4:3 aspect */
}

.contact-form-embed iframe,
.referral-form-embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* --- Map: simple full-width iframe inside the card --- */
.map-embed iframe {
  width: 100%;
  height: 360px;
  border: 0;
  display: block;
}

/* Row layout for the two contact forms only */
.contact-forms-row {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  margin: 1.5rem 0 2rem;
}

.contact-forms-row .contact-form-card {
  flex: 1 1 0;
  min-width: 260px;
}

/* Mobile: stack the two cards */
@media (max-width: 900px) {
  .contact-forms-row {
    flex-direction: column;
  }
}

/* Headings and body text inside Contact section */
.section-contact h2 {
  margin-bottom: 1rem;
}

.section-contact p {
  margin-bottom: 0.6rem;
}




/* =========================================================
   FORMAT-FLAG STYLES (trust, quick-fact, stats, process,
   financial, crisis, quote, small-print, icon bullets,
   section divider)
   These styles support FormatFlags defined in appsettings.json.
   Each block wraps content transformed via Apply-FormatFlagsToHtml.
   ============================================================ */

/* Primary trust microcopy — soft pill that blends into the background */
.fmt-trust {
  margin: 1.25rem 0;
  padding: 0.85rem 1.6rem;
  max-width: 40rem;
  border-radius: 999px;
  background:
          radial-gradient(circle at center,
          rgba(106, 44, 145, 0.18),
          rgba(106, 44, 145, 0.04),
          transparent 70%);
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.45;
  color: var(--color-text-main);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

/* Alignment via data-align options (trust uses dynamic options) */
.fmt-trust[data-align="left"],
.fmt-trust:not([data-align]) {
  margin-left: 0;
  margin-right: auto;
  text-align: left;
}

.fmt-trust[data-align="center"] {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.fmt-trust[data-align="right"] {
  margin-left: auto;
  margin-right: 0;
  text-align: right;
}

/* Quick Fact — small, friendly informational callout */
.fmt-quick-fact {
  margin: 1.25rem 0;
  padding: 1rem 1.25rem;
  background: rgba(106, 44, 145, 0.05); /* soft purple tint */
  border-left: 4px solid var(--phoenix-purple, #6a2c91);
  border-radius: 0.5rem;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.45;
}


.fmt-quick-fact[data-align="left"],
.fmt-quick-fact:not([data-align]) {
  margin-left: 0;
  margin-right: auto;
  text-align: left;
}

.fmt-quick-fact[data-align="center"] {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.fmt-quick-fact[data-align="right"] {
  margin-left: auto;
  margin-right: 0;
  text-align: right;
}


/* Highlighted Stat — bold, concise data point or outcome */
.fmt-highlighted-stat {
  margin: 1.5rem 0;
  padding: 1.25rem 1.5rem;
  background: rgba(10, 74, 110, 0.06); /* soft teal/blue tint */
  border-left: 5px solid var(--phoenix-blue, #0a4a6e);
  border-radius: 0.5rem;
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--color-text-main);
}

/* Process callout — steps, clarity statements, guidance */
.fmt-process-callout {
  margin: 1.25rem 0;
  padding: 1rem 1.25rem;
  border-left: 4px solid var(--phoenix-gold, #d4a10b);
  background: rgba(212, 161, 11, 0.08);
  font-size: 1rem;
  font-weight: 500;
}

/* Financial transparency callout — insurance, pricing expectations */
.fmt-financial-callout {
  margin: 1.25rem 0;
  padding: 1rem 1.25rem;
  border-left: 4px solid var(--phoenix-blue, #0a4a6e);
  background: rgba(10, 74, 110, 0.08);
  font-size: 1rem;
  font-weight: 500;
}

/* Crisis/safety notes — used for “988 / 911” and urgent messaging */
.fmt-crisis-note {
  margin: 1.25rem 0;
  padding: 1rem 1.25rem;
  border-left: 4px solid #c62828;
  background: rgba(198, 40, 40, 0.08);
  font-size: 1rem;
  font-weight: 600;
  color: #8b1e1e;
}

/* Pull quote — optional floating callout for highlighted statements */
.fmt-pull-quote {
  margin: 1.5rem 0;
  padding: 1rem 1rem;
  border-left: 5px solid var(--phoenix-purple, #6a2c91);
  background: rgba(106, 44, 145, 0.06);
  font-size: 1.1rem;
  font-style: italic;
  line-height: 1;
}

/* Alignment options (driven by align=...) */
.fmt-pull-quote[data-align="left"],
.fmt-pull-quote:not([data-align]) {
  margin-left: 0;
  margin-right: auto;
  text-align: left;
}

.fmt-pull-quote[data-align="center"] {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.fmt-pull-quote[data-align="right"] {
  margin-left: auto;
  margin-right: 0;
  text-align: right;
}

/* Width options (driven by width=...) */
.fmt-pull-quote[data-width="half"] {
  max-width: 40rem; /* tweak as needed */
}

@media (max-width: 720px) {
  .fmt-pull-quote[data-width="half"] {
    max-width: 100%;
  }
}


/* Small-print — legal, disclaimers, NSA notes */
.fmt-small-print {
  margin: 0.75rem 0;
  padding: 0.5rem 0.75rem;
  background: rgba(0, 0, 0, 0.04);
  font-size: 0.85rem;
  line-height: 1.4;
  color: #444;
}

/* Icon Bullet Group — for lists with small decorative icons */
.fmt-icon-bullet-group {
  margin: 1.25rem 0;
  padding: 0.25rem 0 0.25rem 0;
}

.fmt-icon-bullet-group ul,
.fmt-icon-bullet-group ol {
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}

.fmt-icon-bullet-group li {
  position: relative;
  padding-left: 1.75rem;
  margin-bottom: 0.6rem;
  line-height: 1.45;
}

/* Default icon (purple dot); can be swapped later if needed */
.fmt-icon-bullet-group li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55rem;
  width: 0.55rem;
  height: 0.55rem;
  background: var(--phoenix-purple, #6a2c91);
  border-radius: 999px;
}

/* Section Divider — subtle horizontal visual break */
.fmt-section-divider {
  margin: 2.25rem 0;
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.10);
  height: 0;
}


/* Accordion Group – vertical stack of accordions (typically used as a sidecar column) */
.fmt-accordion-group {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 1.25rem 0;
}

/* Accordion – details/summary interactive card */
.fmt-accordion {
  border-radius: 0.9rem;
  background-color: var(--color-bg-translucent);
  border: 1px solid var(--color-border-subtle);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  padding: 0; /* summary/body handle their own padding */
  overflow: hidden; /* keep rounded corners clean */
}

/* Remove the default marker from summary */
.fmt-accordion > summary {
  list-style: none;
}

.fmt-accordion > summary::-webkit-details-marker {
  display: none;
}

/* Summary – clickable header */
.fmt-accordion > summary {
  cursor: pointer;
  padding: 0.75rem 1rem;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--color-text-main);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Hero-specific: accordion over dark phoenix background */
.section-hero .fmt-accordion > summary {
  color: rgba(108, 108, 108, 0.9);  /* near-white */
  text-shadow:
          0 0.08em 0.35em rgba(0, 0, 0, 0.85),
          0 0 0.6em rgba(0, 0, 0, 0.7);
}

/* Optional chevron indicator using ::after */
.fmt-accordion > summary::after {
  content: "▾";
  font-size: 0.85rem;
  margin-left: 0.5rem;
  transform: translateY(1px);
  opacity: 0.8;
  transition: transform 0.15s ease, opacity 0.15s ease;
}

.fmt-accordion[open] > summary::after {
  transform: rotate(180deg) translateY(-1px);
  opacity: 1;
}

/* Slight background change on hover/focus */
.fmt-accordion > summary:hover {
  background-color: rgba(255, 255, 255, 0.6);
}

.fmt-accordion > summary:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Body content */
.fmt-accordion-body {
  padding: 0.75rem 1rem 1rem;
  font-size: 0.95rem;
  line-height: 1.5;
}

/* Tighter spacing for lists inside the body */
.fmt-accordion-body ul,
.fmt-accordion-body ol {
  margin-left: 1.25rem;
  margin-top: 0.35rem;
}

.fmt-accordion-body li + li {
  margin-top: 0.25rem;
}

/* Mobile: accordions just stack naturally; no special handling needed */
@media (max-width: 720px) {
  .fmt-accordion-group {
    margin-top: 1rem;
  }
}