/* =========================================================
   Phoenix Rising Counseling – styles.base.css
   Base foundation: colors, reset, typography, core layout
   (Sections 1–4 from original styles.css)
   ========================================================= */


/* =========================================================
   1. Color System – Phoenix Rising Counseling
   ========================================================= */

:root {
  /* Brand core */
  --color-primary: #cc33ff;  /* official brand purple */
  --color-primary-soft: #e3b8ff;
  --color-primary-dark: #7d1aa8;


  --color-accent: #2cd4e1;   /* teal from brand */
  --color-accent-soft: #c4f5f8;
  --color-accent-dark: rgb(21, 136, 147);
  --color-accent-muted: rgba(21, 136, 147, 0.17);

  /* Alias colors for format flags / callouts */
  --phoenix-purple: var(--color-primary-dark);
  --phoenix-gold: #d4a10b;
  --phoenix-blue: #0a4a6e;
  
  --color-black: #000000;

  /* Neutrals – Soft Gray/Violet Twilight */
  --color-bg: #B58CCB;           /* main background: African Violet */
  --color-bg-alt: #C5A3DA;       /* alternating sections: Wisteria */
  --color-surface: #f7f3ff;      /* cards / content blocks: soft very-light violet */
  --color-surface-muted: #e4deef;/* subtle panels, info strips */
  --color-border-subtle: #c7bfdc;/* gentle border/tint */
  --color-bg-translucent: rgba(255, 255, 255, 0.14); /* Soft translucent that picks up the section background */

  
  /* Text on soft violet backgrounds */
  --color-text-main: #2b2536;    /* deep plum charcoal, not pure black */
  --color-text-muted: #635c74;
  --color-text-on-dark: #ffffff; /* keep for buttons/top bar */
  --color-text-blue: var(--color-accent-dark);
  
  /* Status / emphasis */
  --color-info: var(--color-accent);
  --color-danger: #d64545;

  /* Header band */
  --color-header-bg: #422655;  /* deeper plum */
  


}


/* =========================================================
   2. Base Reset & Typography
   ========================================================= */

/* Box model reset */
html {
  box-sizing: border-box;
  font-size: 16px; /* base scaling */
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

/* Body */
body {
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.6;
  background-color: var(--color-bg);
  color: var(--color-text-main);
  -webkit-font-smoothing: antialiased;
}

/* Headings */
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 0.75em;
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-black);
}

h1 {
  font-size: clamp(2.4rem, 4vw, 3.1rem);
}

h2 {
  font-size: clamp(2rem, 3vw, 2.4rem);
}

h3 {
  font-size: clamp(1.6rem, 2.4vw, 2rem);
}

h4 {
  font-size: 1.25rem;
}

/* Body text & lists */
p {
  margin: 0 0 1rem;
}

ul,
ol {
  margin: 0 0 1rem 1.5rem;
  padding: 0;
}

li + li {
  margin-top: 0.25rem;
}


/* =========================================================
   3. Links & Buttons
   ========================================================= */

/* Global links */
a {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.15s ease, background-color 0.15s ease;
  outline: none;
}

a:hover {
  color: var(--color-accent-dark);
  text-decoration: underline;
}

a:focus-visible {
  color: var(--color-accent-dark);
  text-decoration: underline;
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}


/* =========================================================
   4. Core Layout – Sections & Containers
   ========================================================= */

.section {
  padding: 4rem 0;
}

.section-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* Tighter layout on very small screens */
@media (max-width: 640px) {
  .section {
    padding: 3rem 0;
  }

  .section-inner {
    padding: 0 1rem;
  }

  /* On phones, booking buttons should span the content width */
  .btn-booking {
    display: flex;          /* override inline-flex so width applies cleanly */
    width: 100%;
    justify-content: center;
  }
}