/* ==========================================================================
   Madison Glackin Counseling — warm & cozy therapy theme
   Telehealth serving Charlotte, NC and all of North Carolina
   Single source of truth for type, colour, and the hearth animation.
   ========================================================================== */

:root {
    /* Warm, hearth-inspired palette — clay, ember, sage, cocoa, cream */
    --clay:        #b4694a;   /* primary — terracotta clay */
    --clay-deep:   #9a5237;
    --clay-soft:   #e8d3c6;
    --ember:       #d98a4e;   /* warm amber accent */
    --sage:        #7f9070;   /* calming green */
    --sage-soft:   #dfe5d6;
    --cocoa:       #2c241e;   /* warm near-black for dark sections */
    --cocoa-2:     #38302a;
    --cream:       #faf4ec;   /* page warmth */
    --sand:        #f3e9db;   /* subtle warm panel */
    --ink:         #38302b;   /* warm body text */
    --ink-soft:    #6f635a;

    /* Map onto Bootstrap so utilities inherit the warmth */
    --brand-primary: var(--clay);
    --brand-primary-rgb: 180, 105, 74;
    --brand-accent: var(--sage);
    --brand-accent-rgb: 127, 144, 112;

    --bs-body-color: var(--ink);
    --bs-body-color-rgb: 56, 48, 43;
    --bs-body-bg: var(--cream);
    --bs-link-color: var(--clay-deep);
    --bs-link-color-rgb: 154, 82, 55;
    --bs-link-hover-color: color-mix(in srgb, var(--clay-deep) 80%, black);
    --bs-emphasis-color: var(--ink);
    --bs-border-color: #e7dccd;
}

/* ----- Typography: Fraunces (warm display serif) + Nunito Sans (body) ----- */
body {
    font-family: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--ink);
    background-color: var(--cream);
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
    font-optical-sizing: auto;
    letter-spacing: -0.01em;
    color: var(--ink);
}
.lead { color: var(--ink-soft); }
.navbar-brand { font-family: 'Fraunces', Georgia, serif; }

/* ----- Surfaces: warm up Bootstrap's cool greys ----- */
.bg-white       { background-color: #fffdfa !important; }
.bg-light       { background-color: var(--sand) !important; }
.bg-body-tertiary { background-color: var(--sand) !important; }
.bg-dark        { background-color: var(--cocoa) !important; }
.border-bottom, .border-top { border-color: #ece1d3 !important; }
.border-secondary { border-color: #4a3f37 !important; }

/* Hero gets a soft, sunlit gradient instead of flat grey */
section[data-component-type="hero"] {
    background: radial-gradient(1200px 480px at 78% -10%, #fbe6d4 0%, rgba(251,230,212,0) 60%),
                linear-gradient(180deg, var(--cream) 0%, var(--sand) 100%) !important;
}

/* ----- Brand colour helpers ----- */
.text-primary { color: var(--clay-deep) !important; }
.bg-primary   { background-color: var(--clay) !important; }
.bg-primary-subtle { background-color: #f4e2d6 !important; }
.text-bg-primary { background-color: var(--clay) !important; color: #fff !important; }
.badge.bg-primary-subtle.text-primary { color: var(--clay-deep) !important; }

/* ----- Buttons: rounded, tactile, warm ----- */
.btn { border-radius: 999px; font-weight: 600; }
.btn-lg { letter-spacing: .01em; }
.btn-primary {
    --bs-btn-bg: var(--clay); --bs-btn-border-color: var(--clay);
    --bs-btn-hover-bg: var(--clay-deep); --bs-btn-hover-border-color: var(--clay-deep);
    --bs-btn-active-bg: var(--clay-deep); --bs-btn-active-border-color: var(--clay-deep);
    --bs-btn-color: #fff; --bs-btn-hover-color: #fff;
    box-shadow: 0 6px 18px -8px rgba(154,82,55,.6);
}
.btn-outline-primary {
    --bs-btn-color: var(--clay-deep); --bs-btn-border-color: var(--clay);
    --bs-btn-hover-bg: var(--clay); --bs-btn-hover-border-color: var(--clay);
    --bs-btn-active-bg: var(--clay-deep); --bs-btn-active-border-color: var(--clay-deep);
}
.btn-success {
    --bs-btn-bg: var(--sage); --bs-btn-border-color: var(--sage);
    --bs-btn-hover-bg: color-mix(in srgb, var(--sage) 85%, black);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--sage) 85%, black);
    --bs-btn-color: #fff; --bs-btn-hover-color: #fff;
}
.btn-outline-light:hover { color: var(--cocoa); }

/* ----- Cards: soft, lifting on hover ----- */
.card {
    border-radius: 16px;
    transition: transform .25s ease, box-shadow .25s ease;
    background-color: #fffdfa;
}
.card.shadow-sm { box-shadow: 0 10px 30px -18px rgba(60,40,28,.45) !important; }
.card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -20px rgba(60,40,28,.5) !important; }

/* Round, warm icon chips (template uses inline width/height) */
.rounded-circle.bg-primary-subtle { background-color: #f4e2d6 !important; color: var(--clay-deep) !important; }

/* Pills / badges */
.rounded-pill.bg-primary-subtle { background-color: #f4e2d6 !important; }

/* Quotable / pull-quote block */
[data-component-type="quotable"], .border-start.border-4.border-primary {
    border-color: var(--clay) !important;
    background: linear-gradient(180deg, #fff7f0, #fbeee2) !important;
    border-radius: 0 14px 14px 0;
}

/* Links inside dark footer/CTA stay legible */
.bg-dark .text-white-50, footer .text-white-50 { color: #d9cfc4 !important; }
.bg-dark a.text-white-50:hover, footer a.text-white-50:hover { color: #fff !important; }

/* Sticky mobile call/book bar */
.fixed-bottom.d-lg-none { background-color: #fffdfa !important; border-color: #ece1d3 !important; }

/* Section rhythm */
main section { scroll-margin-top: 80px; }

/* ==========================================================================
   The hearth — a cozy, hand-built CSS fireplace (no images, no JS)
   ========================================================================== */
.hearth-section {
    background:
        radial-gradient(900px 420px at 50% 120%, rgba(217,138,78,.28), rgba(217,138,78,0) 70%),
        linear-gradient(180deg, var(--cocoa) 0%, #211b16 100%);
    color: #f4e9dc;
    position: relative;
    overflow: hidden;
}
.hearth-section h2, .hearth-section h3 { color: #fbeede; }
.hearth-section .lead, .hearth-section p { color: #d8cabb; }

.fireplace {
    --glow: #ff8a3d;
    position: relative;
    width: min(440px, 86vw);
    margin: 0 auto;
    aspect-ratio: 5 / 4;
}

/* Stone/brick mantel surround */
.fireplace__surround {
    position: absolute;
    inset: 0;
    border-radius: 18px 18px 10px 10px;
    background:
        linear-gradient(180deg, #4a3b30, #3a2d24);
    box-shadow: inset 0 2px 0 rgba(255,255,255,.06), 0 24px 60px -24px rgba(0,0,0,.8);
    border: 1px solid #2a201a;
}
/* Firebox opening */
.fireplace__box {
    position: absolute;
    inset: 16% 14% 12% 14%;
    border-radius: 10px;
    background: radial-gradient(120% 90% at 50% 100%, #6b3416 0%, #2a140b 55%, #160a06 100%);
    box-shadow: inset 0 0 40px rgba(0,0,0,.85);
    overflow: hidden;
}

/* Warm pulsing glow that lights the box */
.fireplace__glow {
    position: absolute;
    left: 50%; bottom: -10%;
    width: 80%; height: 80%;
    transform: translateX(-50%);
    background: radial-gradient(circle at 50% 80%, rgba(255,150,60,.85), rgba(255,120,40,.25) 45%, transparent 70%);
    filter: blur(8px);
    animation: hearth-glow 4.5s ease-in-out infinite;
}

/* Logs */
.fireplace__logs {
    position: absolute;
    left: 50%; bottom: 8%;
    width: 70%; height: 16%;
    transform: translateX(-50%);
}
.fireplace__logs::before,
.fireplace__logs::after {
    content: "";
    position: absolute;
    bottom: 0;
    width: 64%; height: 42%;
    border-radius: 999px;
    background: linear-gradient(180deg, #6b4a32, #3c2818);
    box-shadow: inset 0 2px 2px rgba(255,255,255,.08);
}
.fireplace__logs::before { left: 2%;  transform: rotate(-9deg); }
.fireplace__logs::after  { right: 2%; transform: rotate(9deg); }

/* Flames — stacked teardrops, each flickering on its own clock */
.flame {
    position: absolute;
    left: 50%;
    bottom: 16%;
    transform-origin: 50% 100%;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    filter: blur(2px);
    mix-blend-mode: screen;
    will-change: transform, opacity;
}
.flame--base {
    width: 46%; height: 56%;
    margin-left: -23%;
    background: radial-gradient(60% 75% at 50% 80%, #ffd27a 0%, #ff8a2e 45%, #e23d12 80%, rgba(226,61,18,0) 100%);
    animation: flame-sway 2.6s ease-in-out infinite;
}
.flame--mid {
    width: 30%; height: 46%;
    margin-left: -15%;
    background: radial-gradient(60% 75% at 50% 80%, #fff0b8 0%, #ffb347 50%, #ff6a1e 85%, rgba(255,106,30,0) 100%);
    animation: flame-sway 2s ease-in-out infinite reverse;
}
.flame--core {
    width: 15%; height: 32%;
    margin-left: -7.5%;
    bottom: 18%;
    background: radial-gradient(60% 70% at 50% 80%, #fffdf2 0%, #ffe08a 55%, #ffae3c 100%);
    animation: flame-flicker 1.4s ease-in-out infinite;
}

/* Rising embers */
.ember {
    position: absolute;
    bottom: 22%;
    width: 4px; height: 4px;
    border-radius: 50%;
    background: #ffcf8a;
    box-shadow: 0 0 6px 1px rgba(255,170,70,.9);
    opacity: 0;
    will-change: transform, opacity;
}
.ember:nth-child(1) { left: 42%; animation: ember-rise 4.2s ease-in 0s   infinite; }
.ember:nth-child(2) { left: 50%; animation: ember-rise 5.1s ease-in 1.1s infinite; }
.ember:nth-child(3) { left: 57%; animation: ember-rise 3.8s ease-in 2.2s infinite; }
.ember:nth-child(4) { left: 47%; animation: ember-rise 4.7s ease-in 3.0s infinite; }
.ember:nth-child(5) { left: 54%; animation: ember-rise 5.6s ease-in 1.7s infinite; }

@keyframes hearth-glow {
    0%, 100% { opacity: .75; transform: translateX(-50%) scale(1); }
    50%      { opacity: 1;   transform: translateX(-50%) scale(1.08); }
}
@keyframes flame-sway {
    0%, 100% { transform: scale(1, 1)     skewX(0deg)   translateY(0); opacity: .92; }
    25%      { transform: scale(.94, 1.08) skewX(3deg)  translateY(-2%); opacity: 1; }
    50%      { transform: scale(1.04, .96) skewX(-2deg) translateY(0); opacity: .88; }
    75%      { transform: scale(.97, 1.05) skewX(2deg)  translateY(-1%); opacity: 1; }
}
@keyframes flame-flicker {
    0%, 100% { transform: scaleY(1)    translateY(0);   opacity: 1; }
    40%      { transform: scaleY(1.18) translateY(-6%); opacity: .85; }
    70%      { transform: scaleY(.9)   translateY(2%);  opacity: 1; }
}
@keyframes ember-rise {
    0%   { opacity: 0;   transform: translateY(0) translateX(0) scale(1); }
    12%  { opacity: 1; }
    100% { opacity: 0;   transform: translateY(-180px) translateX(-12px) scale(.3); }
}

/* Respect users who prefer less motion — keep the warmth, drop the flicker */
@media (prefers-reduced-motion: reduce) {
    .fireplace__glow, .flame, .ember { animation: none !important; }
    .fireplace__glow { opacity: .9; }
    .ember { opacity: .6; }
}