/**
 * Astroscriba - global frontend styles.
 *
 * Loaded on every page that renders any astrology UI (results page, dashboard,
 * edit form, etc.). Add new shared styles here rather than inlining them in PHP.
 *
 * Sections:
 *   1. Buttons (.astro-btn / .astro-btn-outline / .astro-btn-danger)
 */

/* ============================================================
   1. BUTTONS
   ----
   Three variants - all share the same dimensions, only colours differ.
     .astro-btn         - filled primary CTA   (Save, View, Sign in, Add)
     .astro-btn-outline - outlined secondary   (Cancel, Edit, Edit data)
     .astro-btn-danger  - destructive          (Delete chart)

   Hover: lift up 2px + drop shadow. Colours stay locked under all
   interactive states (see the consolidated colour rules below) so theme
   defaults like `a:hover { color: ... }` cannot override them.
   ============================================================ */

.astro-btn,
.astro-btn-outline,
.astro-btn-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    /* MASTER SIZE CHANGED AT THE SOURCE (2026-08): was the full-size CTA
       treatment (padding 15px 35px, .85rem, letter-spacing 1px, and the
       asymmetric 0 12px 0 12px corner). Over the redesign, every context
       that uses these classes was individually scoped DOWN to the 36px
       utility size (chart cards, edit forms, dashboard toolbar, the 3D
       open button, the death gate...) - at which point the big default
       stopped describing anything real and every new button had to fight
       it. This IS our own stylesheet, not the theme's, so the master now
       simply says what the site actually does. The scoped overrides
       sprinkled around remain in place - they set the same values, so
       they are redundant but harmless.
       !important stays on every declaration: the theme's own button rules
       are what these guard against (see the View-in-3D failure notes). */
    padding: 0 10px !important;
    margin: 0 !important;
    font-size: .72rem !important;
    font-weight: 600 !important;
    font-family: 'Quicksand', sans-serif;
    letter-spacing: .5px !important;
    text-transform: uppercase !important;
    text-decoration: none;
    cursor: pointer;
    border-radius: 4px !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
    height: 36px !important;
    min-height: 0 !important;
    max-height: none !important;
    vertical-align: middle;
    transition: transform .15s ease, box-shadow .15s ease;
}

/* Lift-up hover - colours stay unchanged */
.astro-btn:hover,
.astro-btn-outline:hover,
.astro-btn-danger:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .4);
}
.astro-btn:active,
.astro-btn-outline:active,
.astro-btn-danger:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
}

/* ============================================================
   BUTTON COLOURS - locked across every interactive state.
   Edit values here to recolour buttons globally.
   ============================================================ */

/* Primary CTA */
.astro-btn,
a.astro-btn,
.astro-btn:hover,         a.astro-btn:hover,
.astro-btn:focus,         a.astro-btn:focus,
.astro-btn:active,        a.astro-btn:active,
.astro-btn:visited,       a.astro-btn:visited {
    background: #14194f !important;
    color: #c9a050 !important;
    border: 1px solid #14194f !important;
    text-decoration: none !important;
}

/* Outlined secondary */
.astro-btn-outline,
a.astro-btn-outline,
.astro-btn-outline:hover,  a.astro-btn-outline:hover,
.astro-btn-outline:focus,  a.astro-btn-outline:focus,
.astro-btn-outline:active, a.astro-btn-outline:active,
.astro-btn-outline:visited,a.astro-btn-outline:visited {
    background: transparent !important;
    color: #c9a050 !important;
    border: 1px solid #c9a050 !important;
    text-decoration: none !important;
}

/* Destructive */
.astro-btn-danger,
a.astro-btn-danger,
.astro-btn-danger:hover,   a.astro-btn-danger:hover,
.astro-btn-danger:focus,   a.astro-btn-danger:focus,
.astro-btn-danger:active,  a.astro-btn-danger:active,
.astro-btn-danger:visited, a.astro-btn-danger:visited {
    background: transparent !important;
    color: #c0392b !important;
    border: 1px solid #c0392b !important;
    text-decoration: none !important;
}

/* ============================================================
   2. CHART PICKER (Showing chart for: dropdown)
   ----
   The dropdown lives on /results/ - selects a saved chart.
   Theme commonly styles <select> in ways that fight us, so all
   visual properties are pinned with !important.
   ============================================================ */

select.astro-chart-picker {
    background-color: #000 !important;
    color: #fff !important;
    border: 1px solid #444444 !important;
    border-radius: 4px !important;
    padding: 0 32px 0 12px !important;
    height: 36px !important;
    font-size: .85rem !important;
    font-family: 'Quicksand', sans-serif !important;
    cursor: pointer !important;
    flex: 1 1 auto;
    min-width: 300px;
    box-sizing: border-box !important;
    line-height: normal !important;
}
select.astro-chart-picker option {
    background-color: #000 !important;
    color: #fff !important;
}

/* Small "Edit data" link sitting right next to the picker.
   Matches the visual style of the orb-link / link-values pills
   in the filter bar - same colours, same dimensions. */
.astro-chart-picker-btn,
a.astro-chart-picker-btn,
.astro-chart-picker-btn:hover,   a.astro-chart-picker-btn:hover,
.astro-chart-picker-btn:focus,   a.astro-chart-picker-btn:focus,
.astro-chart-picker-btn:active,  a.astro-chart-picker-btn:active,
.astro-chart-picker-btn:visited, a.astro-chart-picker-btn:visited {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    background: #14194f !important;
    color: #c9a050 !important;
    border: 1px solid #14194f !important;
    border-radius: 4px !important;
    padding: 0 10px !important;
    height: 36px !important;
    box-sizing: border-box !important;
    font-size: .72rem !important;
    /* Text treatment added: this class never carried letter-spacing /
       uppercase / weight, so Edit data / Add New / My charts / Redraw
       Chart rendered as plain sentence-case text next to a page that is
       rescaled uppercase everywhere else. Also brings every OTHER
       .astro-chart-picker-btn instance site-wide (dashboard's empty-state
       "Add new chart", Edit data/Add New/My charts/Redraw Chart on the
       natal results page, etc.) in line for free. Bumped 500 -> 600
       (2026-08) to match the dashboard toolbar's scoped copy of these same
       properties, which had already been raised separately - the two had
       drifted apart since the toolbar override was edited without also
       touching this base rule. */
    letter-spacing: .5px !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    font-family: 'Quicksand', sans-serif !important;
    text-decoration: none !important;
    line-height: 1 !important;
}

/* ============================================================
   Custom scrollbar for the chart aside panel.
   Matches the chart palette: dark bg with navy (#14194f) thumb
   that lights up to gold (#c9a050) on hover. Works in:
     - Firefox via scrollbar-width / scrollbar-color
     - Chromium / Safari via ::-webkit-scrollbar
   ============================================================ */
.astro-chart-aside {
    /* Firefox: thin track + custom colors (thumb track).
       Track is BLACK, not the old #0a0a18 navy: the side-panel tiles went
       black in the colour-reduction pass, and the navy track was the last
       navy strip left on the natal page. Thumb is now neutral grey
       (#444444, was navy #14194f, itself a swap from the original burgundy
       #581934) - matching the grey borders used on the plain form fields
       (Houses select, chart-picker select) rather than the navy control
       accent. */
    scrollbar-width: thin;
    scrollbar-color: #444444 #000;
}
.astro-chart-aside::-webkit-scrollbar {
    width: 8px;
}
.astro-chart-aside::-webkit-scrollbar-track {
    background: #000;
    border-radius: 4px;
}
.astro-chart-aside::-webkit-scrollbar-thumb {
    background: #444444;
    border-radius: 4px;
    border: 1px solid #000;
}
.astro-chart-aside::-webkit-scrollbar-thumb:hover {
    background: #c9a050;
}

/* ============================================================
   Override Elementor / theme defaults that paint table headers
   white. Inside our results pages we want THEAD to use a slightly
   lighter navy than the row background, so the header reads as
   a header without being harsh white-on-black. Targets every
   table that lives inside an .astro-tab-panel or
   .astro-subtab-panel.
   ============================================================ */
.astro-tab-panel table thead,
.astro-tab-panel table thead tr,
.astro-tab-panel table thead th,
.astro-subtab-panel table thead,
.astro-subtab-panel table thead tr,
.astro-subtab-panel table thead th {
    background: #14142a !important;
    background-color: #14142a !important;
    color: #939393 !important;
}

/* Body rows in all astro tables - subtle navy fill so the row reads as
   a card instead of bare text on black, matching the Dignities table. */
.astro-tab-panel table tbody tr,
.astro-subtab-panel table tbody tr {
    background: #0a0a18 !important;
    background-color: #0a0a18 !important;
}

/* ============================================================
   Opt-in table redesign (.astro-tbl-black): black header row and
   black body rows, used by the split-per-category Positions
   tables, House Cusps, Dignities, and the horary aspects table
   (hence the .astro-section-panel variants - the horary section
   lives OUTSIDE the tab panels, same trap the synastry tables
   hit). MUST stay AFTER the two generic rules above - those
   paint every panel table navy with !important, and this block
   outranks them on both source order and specificity (the extra
   class), which is the only way an individual table can escape
   the service-wide navy without weakening the generic rules.
   ============================================================ */
.astro-tab-panel table.astro-tbl-black thead,
.astro-tab-panel table.astro-tbl-black thead tr,
.astro-tab-panel table.astro-tbl-black thead th,
.astro-subtab-panel table.astro-tbl-black thead,
.astro-subtab-panel table.astro-tbl-black thead tr,
.astro-subtab-panel table.astro-tbl-black thead th,
.astro-section-panel table.astro-tbl-black thead,
.astro-section-panel table.astro-tbl-black thead tr,
.astro-section-panel table.astro-tbl-black thead th {
    background: #000 !important;
    background-color: #000 !important;
    color: #939393 !important;
    /* font-size / weight pinned HERE, not inline in PHP: the theme ships
       its own th rules with !important, and an inline style loses to
       !important. That is why the header stayed the theme's size no matter
       what number the PHP used, while the td cells (which the theme leaves
       alone) obeyed their inline .75rem - the 2px gap that would not close.
       Cells match this in the tbody rule below. */
    font-size: .75rem !important;
    font-weight: 700 !important;
}
.astro-tab-panel table.astro-tbl-black tbody td,
.astro-subtab-panel table.astro-tbl-black tbody td,
.astro-section-panel table.astro-tbl-black tbody td {
    font-size: 14px;
    font-weight: 500;
}
.astro-tab-panel table.astro-tbl-black tbody tr,
.astro-subtab-panel table.astro-tbl-black tbody tr,
.astro-section-panel table.astro-tbl-black tbody tr {
    background: #000 !important;
    background-color: #000 !important;
}

/* ============================================================
   Main results tabs (Main Points & Planets / House Cusps / etc).
   Inactive tabs are flat dim grey on the page background.
   The active tab is a bordo-filled pill with a gold label and
   a top-right rounded corner for a kreatywny touch (matches
   the user's preferred mockup).

   !important is necessary throughout - the theme (augury / Elementor)
   ships its own button styles that otherwise add borders, rounded
   corners, larger fonts, and lose text-transform.
   ============================================================ */
.astro-tab-btn {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    color: #888 !important;
    margin: 0 !important;
    padding: 14px 18px !important;
    font-size: .78rem !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    font-family: 'Quicksand', sans-serif !important;
    transition: background .2s ease, color .2s ease !important;
    border-radius: 0 !important;
    line-height: 1 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    float: none !important;
}
.astro-tab-btn:hover,
.astro-tab-btn:focus {
    color: #c9a050 !important;
    background: transparent !important;
    background-color: transparent !important;
    outline: none !important;
}
.astro-tab-btn.active,
.astro-tab-btn.active:hover,
.astro-tab-btn.active:focus {
    background: #14194f !important;
    background-color: #14194f !important;
    color: #c9a050 !important;
    border-radius: 0 10px 0 0 !important;
}

/* ============================================================
   Section tabs (top-level: Astrology / Matrix / Numerology).
   Same layout as astro-tab-btn but Cinzel font at 1rem.
   ============================================================ */
.astro-section-btn {
    /* Overlapping-tab effect: each tab has rounded corners on BOTH
       upper sides; tabs sit in a row with a negative left margin so
       each one slides UNDER the previous one by about 12px. The
       active tab gets a higher z-index, so it floats on top of its
       neighbours and the overlap reads as "this tab is in front".
       The wrapper container that holds these buttons is just a
       plain flex row - no special CSS needed on it for this. */
    position: relative !important;
    z-index: 1 !important;
    background: #1a1a1a !important;
    background-color: #1a1a1a !important;
    border: 1px solid #333 !important;
    color: #888 !important;
    margin: 0 0 0 0px !important;
    padding: 14px 22px !important;
    font-size: 1rem !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    font-family: 'Cinzel', sans-serif !important;
    transition: background .2s ease, color .2s ease, border-color .2s ease !important;
    /* Rounded on BOTH top corners so the overlap reads as a real
       file-folder tab on either side. */
    border-radius: 10px 10px 0 0 !important;
    line-height: 1 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    float: none !important;
}
/* The first tab in the row shouldn't pull itself off the left edge,
   so we cancel the negative left margin only there. */
.astro-section-btn:first-child {
    margin-left: 0 !important;
}
.astro-section-btn:hover,
.astro-section-btn:focus {
    color: #c9a050 !important;
    background: #1a1a1a !important;
    background-color: #1a1a1a !important;
    border-color: #c9a050 !important;
    /* Bump z-index on hover so the hovered tab pops above its
       neighbours, even when it's not the active one. */
    z-index: 3 !important;
    outline: none !important;
}
.astro-section-btn.active,
.astro-section-btn.active:hover,
.astro-section-btn.active:focus {
    background: #14194f !important;
    background-color: #14194f !important;
    color: #c9a050 !important;
    border-color: #14194f !important;
    border-radius: 10px 10px 0 0 !important;
    /* Highest z-index: the active tab always sits on top of every
       neighbour, including the hovered one. */
    z-index: 5 !important;
}


.astro-subtab-btn {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-bottom: none !important;
    color: #888 !important;
    margin: 0 !important;
    padding: 4px 10px !important;
    font-size: .72rem !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    font-family: 'Quicksand', sans-serif !important;
    transition: color .2s ease !important;
    border-radius: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    line-height: 1 !important;
    box-shadow: none !important;
    float: none !important;
}
.astro-subtab-btn::before {
    content: "\25B8";              /* right-pointing small triangle */
    display: inline-block;
    font-size: .85rem;
    line-height: 1;
    transition: transform .15s ease;
}
.astro-subtab-btn.active::before {
    content: "\25BE";              /* down-pointing small triangle */
}
.astro-subtab-btn:hover,
.astro-subtab-btn:focus {
    color: #c9a050 !important;
    outline: none !important;
}
.astro-subtab-btn.active,
.astro-subtab-btn.active:hover,
.astro-subtab-btn.active:focus {
    color: #c9a050 !important;
}

/* ============================================================
   DEATH-TOPICS CONTENT GATE (Point of Death / Death Almuten)
   ----
   The reveal/decline buttons live inside a content-warning box.
   The Point of Death gate lives inside a <table>, where the
   augury / Elementor theme's table-button rules win specificity
   against plain .astro-btn (theme adds pill-shaped border-radius
   and its own padding). We pin the asymmetric corner shape and
   sizing explicitly here so the gate buttons match every other
   .astro-btn on the site regardless of where they're rendered.
   ============================================================ */
/* Values updated to the new 36px utility master (2026-08): this pin used
   to restate the old full-size CTA treatment, which - after the master
   itself was resized - made it the one place still FORCING the old look,
   outranking the new master by specificity. The compound selectors stay:
   their defensive purpose (beating the theme's table-button rules inside
   the lots <table>) is still needed; only the values now match the
   master instead of contradicting it. */
.astro-death-gate .astro-btn,
.astro-death-gate .astro-btn-outline,
.astro-death-gate .astro-btn-danger,
.astro-death-gate button.astro-btn,
.astro-death-gate button.astro-btn-outline,
.astro-death-gate button.astro-btn-danger {
    border-radius: 4px !important;
    padding: 0 10px !important;
    font-size: .72rem !important;
    font-weight: 600 !important;
    font-family: 'Quicksand', sans-serif !important;
    letter-spacing: .5px !important;
    text-transform: uppercase !important;
    line-height: 1 !important;
    height: 36px !important;
    min-height: 0 !important;
}

/* ============================================================
   TABLE TEXT-ROLE CLASSES (2026-08)
   ----
   Every redesigned table (Positions, Aspects, Dignities, Arabic Lots...)
   had been rebuilding these same four text treatments as ad-hoc inline
   styles, one PHP string at a time - and they drifted: two "plain entry"
   cells in the same table ended up with different colours (#ddd vs #fff),
   because each column's inline style was typed out separately with no
   single place enforcing consistency. Starting with Arabic Lots, tables
   use these classes instead. Existing inline-styled tables are NOT
   retrofitted yet - that is deliberately a separate, later pass so each
   one gets checked individually rather than swept blind.
   font-family is set explicitly on all four: without it, an element
   sitting outside anywhere Quicksand is already inherited (or inside a
   theme wrapper with its own font-family) silently falls back to
   whatever the theme's default typeface is - the exact gap that let the
   Arabic Lots header render in the wrong font.
   ============================================================ */

/* 1. Section header - the title above a whole content block (e.g.
      "ARABIC LOTS"). Same spec unified across Symbolic Degrees,
      Elements/Modalities, and the Aspects filter panel earlier this
      session - now given a name instead of being retyped every time. */
.astro-section-header {
    color: #939393;
    font-size: .7rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 600;
    text-align: center;
    padding: 22px 0 8px;
    margin: 0;
    font-family: 'Quicksand', sans-serif;
}

/* 2. Table column headers (<th> text). Tables using .astro-tbl-black
      already get this from its own thead rule below - this class exists
      for header text OUTSIDE that wrapper, so the role has one explicit
      name wherever it's needed rather than only living implicitly inside
      another class's rule. */
.astro-tbl-col-header {
    color: #939393;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-family: 'Quicksand', sans-serif;
}

/* 3. Zodiac sign / degree VALUE text (e.g. "25 27' Aquarius" plus its
      glyph). Colour is deliberately NOT set here - it depends on which of
      the 12 signs, decided per element at render time - this class only
      carries what genuinely is shared: weight and size. Pair with an
      inline color for the sign's own element colour. */
.astro-tbl-sign-value {
    font-weight: 600;
    font-size: 14px;
    font-family: 'Quicksand', sans-serif;
}

/* 4. Primary entry text - plain data-cell content with no per-row colour
      logic (a name, a house number, a label). Any column that's "just
      text" uses this, so entries that SHOULD read as equivalent (Arabic
      Lots' Lot name and House columns, for instance) actually share one
      rule instead of two inline styles that can quietly diverge. */
.astro-tbl-entry {
    color: #939393;
    font-weight: 500;
    font-family: 'Quicksand', sans-serif;
}