/* ============================================================
   Transformational Choices — custom theme override
   Loaded after main.css. Re-themes FolioOne's dark portfolio
   skin into a warm, light, gardenia-inspired therapy-practice
   look without touching the vendor files.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400;1,9..144,500&family=Karla:wght@400;500;600;700&display=swap');

:root{
  --default-font: 'Karla', system-ui, sans-serif;
  --heading-font: 'Fraunces', serif;
  --nav-font: 'Karla', sans-serif;

  --background-color: #FAF6EE;   /* warm ivory */
  --default-color: #2C2723;      /* ink */
  --heading-color: #2F3B2A;      /* deep evergreen */
  --accent-color: #B97A66;       /* clay / gardenia-stem rose */
  --surface-color: #FFFDF8;      /* gardenia white, card surfaces */
  --contrast-color: #ffffff;
}

.light-background{
  --background-color: #FFFDF8;
  --surface-color: #F3ECDD;
}

.dark-background{
  --background-color: #2F3B2A;
  --default-color: #F3EEE2;
  --heading-color: #ffffff;
  --surface-color: #3E4D38;
  --contrast-color: #ffffff;
}

/* Nav */
:root{
  --nav-color: #2F3B2A;
  --nav-hover-color: #B97A66;
  --nav-mobile-background-color: #FFFDF8;
  --nav-dropdown-background-color: #FFFDF8;
  --nav-dropdown-color: #2C2723;
  --nav-dropdown-hover-color: #B97A66;
}

body{
  font-size: 17px;
  line-height: 1.65;
}

h1,h2,h3,h4{ font-weight: 500; letter-spacing: -0.01em; }

/* Header */
.header{
  border-bottom: 1px solid #E3DACB;
  box-shadow: none !important;
}

/* Buttons — re-skin to the clay/evergreen palette */
.btn-primary, .hero-actions .btn-primary{
  background-color: var(--heading-color) !important;
  border-color: var(--heading-color) !important;
  color: #fff !important;
}
.btn-primary:hover{
  background-color: var(--accent-color) !important;
  border-color: var(--accent-color) !important;
}
.btn-outline{
  border: 2px solid var(--heading-color) !important;
  color: var(--heading-color) !important;
  background: transparent !important;
}
.btn-outline:hover{
  background: var(--heading-color) !important;
  color: #fff !important;
}

/* Section title rule color */
.section-title h2::after,
.section-title::after{
  background-color: var(--accent-color) !important;
}

/* Service / skill / info icon boxes pick up the clay accent */
.service-icon i, .skill-item i, .icon-box i, .info-item .icon-box i{
  color: var(--accent-color) !important;
}

/* Cards / surfaces */
.service-item, .skill-item, .info-box, .contact-form, .timeline-item, .testimonial-item{
  background-color: var(--surface-color) !important;
  border: 1px solid #E3DACB;
}

/* Pills used for client age groups on services page */
.focus-pill-list{ display:flex; flex-wrap:wrap; gap:10px; list-style:none; padding:0; margin:0 0 0; }
.focus-pill{
  background: #E9C9B9;
  color: #2F3B2A;
  font-weight:700;
  font-size:0.85rem;
  padding: 8px 16px;
  border-radius: 999px;
}

/* Gardenia bloom divider (signature motif) */
.bloom-divider{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  padding: 10px 0 0;
  color: var(--accent-color);
}
.bloom-divider svg{ width:32px; height:32px; }
.bloom-divider .stem{ height:1px; width:70px; background:#E3DACB; }

/* Photo placeholder (used until real photos are supplied) */
.photo-placeholder{
  background: var(--surface-color);
  border: 1px dashed #C9B79F;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color: #6B6359;
  font-size: 0.9rem;
  aspect-ratio: 4/5;
  padding: 20px;
}

/* Fix: template assumes info-box sits on a dark background (white text).
   Our retheme made it light, so force the correct colors here. */
.contact .info-box h3,
.contact .info-item .content h4{
  color: var(--heading-color) !important;
}
.contact .info-box a,
.contact .info-item .content p a{
  color: var(--accent-color) !important;
  font-weight: 700;
}
.contact .info-item .icon-box i{
  color: var(--accent-color) !important;
}
.contact .info-box p{
  opacity: 1;
  color: var(--default-color);
}

/* Fix: template hardcodes a dark navy scrolled-header background
   (rgba(16,26,32,.9)) regardless of theme, making dark nav text
   illegible. Override with our warm ivory tone instead. */
.scrolled .header{
  --background-color: rgba(250, 246, 238, 0.92) !important;
}

/* Crisis / safety note used on the contact page */
.safety-note{
  background: #E9C9B9;
  border-radius: 10px;
  padding: 14px 16px;
  font-size: 0.88rem;
  color: #2F3B2A;
  margin-top: 20px;
}

/* Intake form section divider */
fieldset.intake-group{ border:none; padding:0; margin: 0 0 28px; }
fieldset.intake-group legend{
  font-family: var(--heading-font);
  color: var(--heading-color);
  font-size: 1.1rem;
  padding: 0;
  margin-bottom: 12px;
}
.form-check-label{ font-weight: 500; }

#confirmation{
  display:none;
  background: var(--heading-color);
  color: #fff;
  padding: 26px;
  border-radius: 14px;
  margin-top: 20px;
}
#confirmation.show{ display:block; }