/* ==========================================================================
   Genesis Homeopathy — Site Styles
   Consumes tokens.css. Fraunces headings / Source Serif 4 body, cream +
   botanical green + terracotta palette.
   ========================================================================== */

/* ---- Self-hosted fonts (latin subsets, woff2) ---- */
@font-face {
    font-family: "Space Grotesk";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("fonts/spacegrotesk-latin.woff2") format("woff2");
}
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("themes/midnight-modern/fonts/inter-latin.woff2") format("woff2");
}


/* ---- Reset-ish ---- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: var(--leading-body);
    color: var(--color-text);
    background-color: #faf6ef;                 /* fallback */
    background-color: var(--color-bg);
}

h1, h2, h3 {
    font-family: var(--font-heading);
    font-weight: 600;
    line-height: var(--leading-tight);
    color: #1d3a29;
    color: var(--color-heading);
    margin: 0 0 var(--space-3);
}
h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); }
p  { margin: 0 0 var(--space-3); max-width: var(--measure); }

a { color: var(--color-primary); }
a:hover { color: var(--color-primary-hover); }

/* ---- Header ---- */
header {
    background-color: var(--color-surface-raised);
    border-bottom: 2px solid var(--color-detail);
    padding: var(--space-5) var(--space-4) var(--space-4);
    text-align: center;
}
header h1 {
    font-size: var(--text-3xl);
    font-weight: 640;
    letter-spacing: -0.01em;
    margin-bottom: var(--space-1);
}
header p {
    margin: 0 auto;
    font-style: italic;
    color: var(--color-text-muted);
    font-size: var(--text-lg);
}

/* ---- Main layout ---- */
main {
    max-width: 60rem;
    margin: 0 auto;
    padding: var(--space-6) var(--space-4);
}

section {
    background-color: var(--color-surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
    padding: var(--space-5);
    margin-bottom: var(--space-5);
}

.hero h2 { font-size: var(--text-2xl); }
.hero p { font-size: var(--text-lg); color: var(--color-text-muted); color: var(--color-text-muted); }

/* ---- Buttons ---- */
.btn {
    display: inline-block;
    font-family: var(--font-heading);
    font-size: var(--text-base);
    font-weight: 600;
    text-decoration: none;
    color: var(--button-label);
    background-color: var(--color-accent);
    background-color: var(--color-accent);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius);
    transition: background-color var(--transition), transform var(--transition);
}
.btn:hover {
    background-color: var(--color-accent-hover);
    background-color: var(--color-accent-hover);
    color: var(--button-label);
    transform: translateY(-1px);
}
.bor-link .btn { background-color: var(--color-primary); }
.bor-link .btn:hover { background-color: var(--color-primary-hover); color: var(--button-label); }

.facebook-link {
    display: inline-block;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 2px solid var(--color-detail);
    transition: border-color var(--transition);
}
.facebook-link:hover { border-bottom-color: var(--color-accent); }

/* ---- Bill of Rights page ---- */
.bor { max-width: 50rem; margin: 0 auto; padding: 0; }
.bor section { box-shadow: none; padding: var(--space-4); margin-bottom: var(--space-4); }
.bor h2 {
    font-size: var(--text-lg);
    color: var(--color-primary);
    border-bottom: 1px solid var(--color-detail);
    padding-bottom: var(--space-1);
}
.bold-disclosure {
    font-weight: 700;
    color: var(--color-heading);
    background-color: var(--color-detail);
    padding: var(--space-3);
    border-left: 4px solid var(--color-primary-hover);
    border-radius: 4px;
}
.bor ul { max-width: var(--measure); padding-left: 1.25rem; }
.bor li { margin-bottom: var(--space-1); }

/* ---- Footer (shared, centered — bulletproof flexbox) ---- */
footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: var(--space-1);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    padding: var(--space-4);
    border-top: 1px solid var(--color-detail);
}
footer p {
    max-width: none;
    margin: 0;
}
footer a { color: inherit; }

/* ---- Consent banner (mobile-first) ---- */
#gh-consent-banner {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 1000;
    padding: var(--space-2);
}
#gh-consent-banner.ghc-hidden { display: none; }
.ghc-card {
    background-color: var(--color-surface-raised);
    border: 1px solid var(--color-detail);
    border-radius: var(--radius);
    box-shadow: 0 -4px 24px oklch(0.3 0.03 155 / 0.18);
    padding: var(--space-4);
    max-width: 42rem;
    margin: 0 auto;
}
.ghc-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    color: var(--color-heading);
    margin-bottom: var(--space-2);
}
.ghc-close {
    background: none; border: none; cursor: pointer;
    font-size: var(--text-xl); line-height: 1; color: var(--color-text-muted);
}
.ghc-message { font-size: var(--text-sm); max-width: none; }
.ghc-cats { display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: var(--space-3); }
.ghc-cat { font-size: var(--text-sm); display: flex; align-items: center; gap: var(--space-2); }
.ghc-cat em { color: var(--color-text-muted); font-style: normal; }
.ghc-buttons { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.ghc-btn {
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius);
    border: 1px solid var(--color-primary);
    background: none;
    color: var(--color-primary);
    cursor: pointer;
    transition: background-color var(--transition), color var(--transition);
}
.ghc-btn:hover { background-color: var(--color-primary); color: var(--button-label); }
.ghc-btn.ghc-accept { background-color: var(--color-primary); color: var(--button-label); }
.ghc-btn.ghc-accept:hover { background-color: var(--color-primary-hover); }

@media (min-width: 48rem) {
    #gh-consent-banner { inset: auto var(--space-4) var(--space-4) auto; padding: 0; }
    .ghc-card { max-width: 24rem; margin: 0; }
    .ghc-cats { gap: var(--space-2); }
}

/* ---- Theme toggle button ---- */
.gh-theme-toggle {
    background: none;
    border: 1px solid currentColor;
    border-radius: var(--radius);
    color: inherit;
    font: inherit;
    font-size: var(--text-sm);
    padding: 0.1em 0.6em;
    cursor: pointer;
}
.gh-theme-toggle:hover { opacity: 0.75; }