/*
 * Gold on midnight. Bootstrap 5.3 supplies the layout and components; this file
 * supplies the palette (for both colour modes), the typography and the pieces
 * Bootstrap has no notion of, such as the chart drawings.
 */

/* Typefaces, self-hosted (SIL Open Font License; see public/fonts/LICENSE.txt). */
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/cormorant-garamond-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/cormorant-garamond-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/outfit-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/outfit-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/outfit-latin-500-normal.woff2") format("woff2"); }

:root,
[data-bs-theme="dark"] {
    --ink: #0b1026;
    --ink-raised: #121a3a;
    --ink-sunken: #080c1d;
    --line: rgba(212, 175, 55, 0.22);
    --line-soft: rgba(255, 255, 255, 0.08);
    --gold: #d4af37;
    --gold-bright: #f1d97a;
    --gold-ink: #1a1405;
    --text: #e8e6df;
    --text-muted: #a3a6b8;
    --good: #7fd1a6;
    --avoid: #f09a8c;

    --bs-body-bg: var(--ink);
    --bs-body-color: var(--text);
    --bs-secondary-color: var(--text-muted);
    --bs-border-color: var(--line-soft);
    --bs-link-color: var(--gold-bright);
    --bs-link-color-rgb: 241, 217, 122;
    --bs-link-hover-color: #fff1b8;
    --bs-link-hover-color-rgb: 255, 241, 184;
    --bs-emphasis-color: #fff;
    --bs-tertiary-bg: var(--ink-raised);
}

[data-bs-theme="light"] {
    --ink: #faf6ec;
    --ink-raised: #ffffff;
    --ink-sunken: #f1ead8;
    --line: rgba(138, 106, 14, 0.3);
    --line-soft: rgba(11, 16, 38, 0.1);
    --gold: #8a6a0e;
    --gold-bright: #6f5407;
    --gold-ink: #ffffff;
    --text: #1b2140;
    --text-muted: #5b6079;
    --good: #1c7a4c;
    --avoid: #b0412f;

    --bs-body-bg: var(--ink);
    --bs-body-color: var(--text);
    --bs-secondary-color: var(--text-muted);
    --bs-border-color: var(--line-soft);
    --bs-link-color: var(--gold-bright);
    --bs-link-color-rgb: 111, 84, 7;
    --bs-link-hover-color: #4a3804;
    --bs-link-hover-color-rgb: 74, 56, 4;
    --bs-emphasis-color: #0b1026;
    --bs-tertiary-bg: var(--ink-raised);
}

body {
    font-family: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-weight: 300;
    background: var(--ink);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

[data-bs-theme="dark"] body {
    background:
        radial-gradient(1100px 520px at 85% -10%, rgba(212, 175, 55, 0.1), transparent 60%),
        radial-gradient(900px 500px at -10% 10%, rgba(64, 86, 190, 0.16), transparent 60%),
        var(--ink);
    background-attachment: fixed;
}

main { flex: 1; }

h1, h2, h3, .display-font {
    font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--bs-emphasis-color);
}

h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); line-height: 1.08; }
h2 { font-size: clamp(1.55rem, 2.6vw, 2.05rem); }
h3 { font-size: 1.35rem; }
h4, h5, h6 { font-weight: 500; }

strong, b, th { font-weight: 500; }

.eyebrow {
    font-size: 0.74rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold);
}

.text-gold { color: var(--gold) !important; }
.text-muted, .form-text { color: var(--text-muted) !important; }
.lead { font-weight: 300; color: var(--text-muted); }
.num { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Navigation */

.site-nav {
    border-bottom: 1px solid var(--line);
    background: color-mix(in srgb, var(--ink) 86%, transparent);
    backdrop-filter: blur(10px);
}

.site-nav .navbar-brand {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--gold);
}

.site-nav .nav-link {
    color: var(--text);
    font-weight: 400;
    letter-spacing: 0.03em;
}

.site-nav .nav-link:hover,
.site-nav .nav-link.active { color: var(--gold); }

.theme-toggle {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: transparent;
    color: var(--gold);
    line-height: 1;
}

.theme-toggle:hover { background: var(--ink-raised); }
[data-bs-theme="dark"] .theme-toggle .when-light,
[data-bs-theme="light"] .theme-toggle .when-dark { display: none; }

.site-footer {
    border-top: 1px solid var(--line);
    color: var(--text-muted);
    font-size: 0.86rem;
}

/* Surfaces */

.panel {
    background: var(--ink-raised);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 1.5rem;
}

.panel--quiet { border-color: var(--line-soft); }
.panel > :last-child { margin-bottom: 0; }

.panel-title {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 1.45rem;
    font-weight: 600;
    color: var(--bs-emphasis-color);
    margin-bottom: 1rem;
}

.rule {
    height: 1px;
    border: 0;
    opacity: 1;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

a.panel { display: block; text-decoration: none; color: inherit; transition: border-color 0.15s, transform 0.15s; }
a.panel:hover { border-color: var(--gold); transform: translateY(-2px); }

/* Buttons and forms */

.btn-gold {
    --bs-btn-color: var(--gold-ink);
    --bs-btn-bg: var(--gold);
    --bs-btn-border-color: var(--gold);
    --bs-btn-hover-color: var(--gold-ink);
    --bs-btn-hover-bg: var(--gold-bright);
    --bs-btn-hover-border-color: var(--gold-bright);
    --bs-btn-active-color: var(--gold-ink);
    --bs-btn-active-bg: var(--gold-bright);
    --bs-btn-active-border-color: var(--gold-bright);
    font-weight: 500;
    letter-spacing: 0.04em;
}

[data-bs-theme="light"] .btn-gold { --bs-btn-hover-bg: #6f5407; --bs-btn-hover-border-color: #6f5407; --bs-btn-active-bg: #6f5407; }

.btn-outline-gold {
    --bs-btn-color: var(--gold);
    --bs-btn-border-color: var(--line);
    --bs-btn-hover-color: var(--gold-ink);
    --bs-btn-hover-bg: var(--gold);
    --bs-btn-hover-border-color: var(--gold);
    --bs-btn-active-color: var(--gold-ink);
    --bs-btn-active-bg: var(--gold);
    --bs-btn-active-border-color: var(--gold);
}

.btn-check:checked + .btn-outline-gold { color: var(--gold-ink); background: var(--gold); border-color: var(--gold); }

.form-label { font-weight: 400; font-size: 0.88rem; letter-spacing: 0.03em; color: var(--text-muted); margin-bottom: 0.3rem; }

.form-control,
.form-select {
    background-color: var(--ink-sunken);
    border-color: var(--line-soft);
    color: var(--text);
}

.form-control:focus,
.form-select:focus {
    background-color: var(--ink-sunken);
    color: var(--text);
    border-color: var(--gold);
    box-shadow: 0 0 0 0.2rem rgba(212, 175, 55, 0.18);
}

.form-control::placeholder { color: var(--text-muted); opacity: 0.7; }
[data-bs-theme="dark"] input[type="date"], [data-bs-theme="dark"] input[type="time"] { color-scheme: dark; }

.place-field { position: relative; }

.place-suggestions {
    position: absolute;
    z-index: 20;
    top: 100%;
    left: 0;
    right: 0;
    margin: 0.25rem 0 0;
    padding: 0.25rem;
    list-style: none;
    background: var(--ink-raised);
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35);
}

.place-suggestions[hidden] { display: none; }
.place-suggestions li { padding: 0.45rem 0.7rem; border-radius: 7px; cursor: pointer; }
.place-suggestions li[aria-selected="true"], .place-suggestions li:hover { background: var(--gold); color: var(--gold-ink); }

details.coordinates > summary { cursor: pointer; color: var(--gold); font-size: 0.88rem; }
details.coordinates[open] > summary { margin-bottom: 0.75rem; }

.alert-danger { background: rgba(240, 154, 140, 0.12); border-color: rgba(240, 154, 140, 0.4); color: var(--text); }
.alert-warning { background: rgba(212, 175, 55, 0.1); border-color: var(--line); color: var(--text); }
.invalid-feedback { color: var(--avoid); }

/* Tables */

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--text);
    --bs-table-border-color: var(--line-soft);
    --bs-table-hover-bg: rgba(212, 175, 55, 0.06);
    --bs-table-hover-color: var(--text);
    margin-bottom: 0;
}

.table > thead th {
    font-size: 0.74rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold);
    border-bottom-color: var(--line);
    white-space: nowrap;
}

.table td, .table th { vertical-align: middle; }
.table .sub { display: block; font-size: 0.8rem; color: var(--text-muted); }
.table tr.is-current > * { background: rgba(212, 175, 55, 0.12); }
.table-tight td, .table-tight th { padding: 0.35rem 0.5rem; }

.tag {
    display: inline-block;
    padding: 0.08rem 0.5rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 400;
    color: var(--gold);
    white-space: nowrap;
}

.tag--good { color: var(--good); border-color: color-mix(in srgb, var(--good) 45%, transparent); }
.tag--avoid { color: var(--avoid); border-color: color-mix(in srgb, var(--avoid) 45%, transparent); }
.tag--plain { color: var(--text-muted); border-color: var(--line-soft); }

/* Facts: a label over a value */

.fact { padding: 0.9rem 1.1rem; border: 1px solid var(--line-soft); border-radius: 12px; background: var(--ink-raised); height: 100%; }
.fact .label { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
.fact .value { font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.5rem; font-weight: 600; color: var(--bs-emphasis-color); line-height: 1.2; }
.fact .note { font-size: 0.84rem; color: var(--text-muted); }

/* Tabs */

.nav-pills .nav-link { color: var(--text); border: 1px solid transparent; border-radius: 999px; font-weight: 400; }
.nav-pills .nav-link:hover { color: var(--gold); }
.nav-pills .nav-link.active { background: transparent; color: var(--gold); border-color: var(--gold); }

.accordion { --bs-accordion-bg: transparent; --bs-accordion-border-color: var(--line-soft); --bs-accordion-btn-color: var(--text); --bs-accordion-active-bg: rgba(212, 175, 55, 0.08); --bs-accordion-active-color: var(--bs-emphasis-color); --bs-accordion-btn-focus-box-shadow: none; --bs-accordion-color: var(--text); }
[data-bs-theme="dark"] .accordion-button::after { filter: invert(1) grayscale(1) brightness(1.6); }

/* Chart drawings */

.kundli-chart { display: block; width: 100%; height: auto; max-width: 420px; margin: 0 auto; }
.kundli-chart .frame { fill: var(--ink-sunken); stroke: var(--gold); stroke-width: 1.6; }
.kundli-chart .lines { fill: none; stroke: var(--gold); stroke-width: 1; stroke-opacity: 0.75; }
.kundli-chart text { font-family: "Outfit", system-ui, sans-serif; text-anchor: middle; }
.kundli-chart .sign { font-size: 9px; fill: var(--text-muted); }
.kundli-chart .sign--corner { text-anchor: start; }
.kundli-chart .bodies { font-size: 12px; font-weight: 500; fill: var(--text); }
.kundli-chart .body--lagna { fill: var(--gold); }
.kundli-chart .lagna-mark { fill: var(--gold); fill-opacity: 0.85; }
.kundli-chart .caption { font-family: "Cormorant Garamond", Georgia, serif; font-size: 17px; font-weight: 600; fill: var(--gold); }
.kundli-chart .caption--sub { font-family: "Outfit", system-ui, sans-serif; font-size: 10px; font-weight: 400; fill: var(--text-muted); letter-spacing: 0.1em; }

/* Both layouts are in the page; the chosen one is shown. */
[data-chart-style="north"] .chart-south,
[data-chart-style="south"] .chart-north { display: none; }

.chart-card { text-align: center; }
.chart-card .chart-name { font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.2rem; font-weight: 600; color: var(--bs-emphasis-color); }
.chart-card .chart-key { font-size: 0.74rem; letter-spacing: 0.14em; color: var(--gold); }

.heat { display: inline-block; min-width: 2rem; padding: 0.1rem 0.3rem; border-radius: 6px; text-align: center; }

/* Timeline of planetary hours */

.hora-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.5rem; }
.hora { padding: 0.5rem 0.7rem; border: 1px solid var(--line-soft); border-radius: 10px; background: var(--ink-raised); }
.hora .lord { font-weight: 500; color: var(--bs-emphasis-color); }
.hora .time { font-size: 0.8rem; color: var(--text-muted); }

.hero { padding: clamp(2rem, 6vw, 4.5rem) 0 clamp(1.5rem, 4vw, 3rem); }

@media print {
    .site-nav, .site-footer, .no-print { display: none !important; }
    body { background: #fff !important; color: #000; }
    .panel, .fact { border-color: #999; background: #fff; }
    .tab-pane { display: block !important; opacity: 1 !important; margin-bottom: 1.5rem; }
}

/* Match Making */

.score-total { font-size: clamp(3.2rem, 7vw, 4.6rem); line-height: 1; color: var(--bs-emphasis-color); }
.score-max { font-size: 0.4em; color: var(--text-muted); }
.score-bar { position: relative; height: 10px; border-radius: 999px; background: var(--ink-sunken); border: 1px solid var(--line-soft); }
.score-bar__fill { height: 100%; border-radius: 999px; background: var(--gold); }
.score-bar__fill--good { background: var(--good); }
.score-bar__fill--avoid { background: var(--avoid); }
.score-bar__mark { position: absolute; top: -5px; bottom: -5px; width: 2px; background: var(--text); }

/* Numerology */

.number-big { font-size: 3.4rem; line-height: 0.9; color: var(--gold); }
.lo-shu { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; max-width: 260px; }
.lo-shu__cell { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 10px; background: var(--ink-sunken); font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.7rem; font-weight: 600; color: var(--bs-emphasis-color); letter-spacing: 0.05em; }
.lo-shu__cell--empty { border-style: dashed; border-color: var(--line-soft); color: var(--text-muted); opacity: 0.45; }

/* A tab panel takes focus when opened from a link; the active pill already shows where you are. */
.tab-pane:focus, .tab-pane:focus-visible { outline: none; }

/* Period headers hold a name, dates and a marker; on a phone they wrap instead of pushing the page wide. */
.accordion-button { flex-wrap: wrap; row-gap: 0.2rem; }
.accordion-button::after { margin-left: auto; }

/* Ashtakavarga charts: a bindu count in each sign instead of the bodies. */
.kundli-chart .bindu { font-size: 17px; font-weight: 500; fill: var(--text); }
.kundli-chart .bindu--high { fill: var(--good); }
.kundli-chart .bindu--low { fill: var(--avoid); }
.kundli-chart .body--own { font-size: 9px; font-weight: 500; fill: var(--gold); }
.bindu-table td, .bindu-table th { padding-left: 0.3rem; padding-right: 0.3rem; }
.bindu-table th.is-own { color: var(--bs-emphasis-color); text-decoration: underline; text-underline-offset: 4px; }
.bindu-dot { display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--gold); vertical-align: middle; }
/* Screen-reader-only cell text is absolutely positioned; anchoring it here keeps it inside the scrolling box. */
.table-responsive { position: relative; }
.bindu-summary td, .bindu-summary th { padding-left: 0.25rem; padding-right: 0.25rem; }
.bindu-summary .heat { min-width: 1.4rem; padding: 0; }

/* Pancha Pakshi */

.pp-table .pp-yama > th { background: var(--ink-raised); border-top: 1px solid var(--line); font-weight: 500; }
.pp-table tbody tr:not(.pp-yama) > td:first-child { padding-left: 1.25rem; }
.pp-table .pp-rating { width: 9rem; min-width: 6rem; }
.score-bar__fill--plain { background: var(--gold); }
.pp-act { font-size: 0.86rem; }
.pp-act--good { color: var(--good); font-weight: 500; }
.pp-act--avoid { color: var(--avoid); }
.pp-act--plain { color: var(--text-muted); }