/* =====================================================================================================================
   calculatedchoices.com.au  —  THE UMBRELLA'S THEME

       /                       the home page
       /calculators            the directory
       /calculators/<slug>     the case for one calculator, in the domain's voice
       /sitemap                every page on every calculator, guides included

   THIS IS A theme.css, AND IT LOADS IN EXACTLY THE PLACE ONE DOES. A calculator loads shell.css and then its own
   tools/<slug>/theme.css; the domain loads shell.css and then this. Every rule, layout and component on the four
   pages above is the shell's — the nav, the hero and its kicker, the pain cards, the guide cards, the trust band,
   the prose column, the key points aside, the gapfill grid and the footer are all the same elements a calculator
   renders, which is the only way to guarantee that arriving at a calculator from here does not feel like arriving
   at a different site.

   THE ACCENT IS THE AGED CARE CALCULATOR'S DEEP TEAL-BLUE, copied rather than referenced. Copied because a
   stylesheet at domain level cannot depend on one calculator's folder — that tool could be renamed, retired or
   re-themed, and the domain's own front door should not change colour when it is. To make the umbrella follow a
   different calculator, replace the two blocks below with that tool's theme.css.

   -------------------------------------------------------------------------------------------------------------------
   THE RULE THIS FILE MUST OBEY, AND IT IS THE SAME ONE EVERY theme.css OBEYS: ONLY THE ACCENT FAMILY, AND ALWAYS IN
   BOTH BLOCKS.

   shell.css declares its palette twice — once on :root for light, once on [data-theme="dark"] for dark. Both are
   specificity 0-1-0, so the dark block wins purely by coming later in the file. This file loads AFTER shell.css, so
   the moment it names a variable on :root that declaration is later still and beats shell.css's DARK value for the
   same variable. Naming --bg-primary here, even with a perfectly sensible light value, forces the light background
   to win in dark mode.

       1. Only override the accent family. Backgrounds, text, borders and shadows are the shell's and are already
          themed correctly. Leave them alone.
       2. Whatever appears in :root MUST also appear in [data-theme="dark"]. The two lists are identical, line for
          line. A variable in one and not the other is a variable stuck on the wrong theme.

   The block of real rules at the foot of this file is the exception, and it is kept small on purpose: it exists
   only for the things the umbrella needs that no calculator does — a breadcrumb, a details-based FAQ, and the
   category list in the hero panel. The logo is not among them: it is an <img class="logo-img"> in the same
   element a calculator puts one in, so the shell already sizes it in the nav and in the footer.
   -------------------------------------------------------------------------------------------------------------------

   Coded By Darko G.
   ===================================================================================================================== */

:root {
    --gold: #0A7AAF;
    --gold-bright: #12A5DE;
    --gold-light: #6FCBEC;
    --gold-text: #096B99;
    --gold-tint: rgba(10, 122, 175, 0.13);
    --gold-tint-line: rgba(10, 122, 175, 0.32);
    --champagne: #E0F3FC;

    --primary: #0A7AAF;
    --accent: #0A7AAF;
    --accent-cyan: #12A5DE;
    --accent-glow: rgba(10, 122, 175, 0.32);

    /* A sweep, not one colour lightened and darkened — and it lands on the shell's sapphire at the far end. Every
       stop clears 4.5:1 against --on-accent, because components put icons and text directly on this. */
    --gradient-primary: linear-gradient(115deg, #096B99 0%, #0A7AAF 42%, #1E5FD8 100%);
    --gradient-vivid: linear-gradient(115deg, #096B99 0%, #1E5FD8 46%, #123FA8 100%);

    --border-hover: rgba(10, 122, 175, 0.52);
    --input-focus-glow: rgba(10, 122, 175, 0.18);

    /* THE ACCENT ROTATION — steps two and three. Everything that repeats as siblings walks a three step ramp, step
       one being --gold. Both -text variants are used AS TEXT on --bg-secondary and clear 4.5:1 there. */
    --accent-2: #1E5FD8;
    --accent-2-bright: #2F70E8;
    --accent-2-text: #1A4BB0;
    --accent-2-tint: rgba(30, 95, 216, 0.13);
    --accent-2-line: rgba(30, 95, 216, 0.32);
    --accent-2-glow: rgba(30, 95, 216, 0.32);
    --accent-3: #123FA8;
    --accent-3-bright: #2952C9;
    --accent-3-text: #0F348B;
    --accent-3-tint: rgba(18, 63, 168, 0.13);
    --accent-3-line: rgba(18, 63, 168, 0.32);
    --accent-3-glow: rgba(18, 63, 168, 0.32);

    /* THE AMBIENT ORBS — the three soft washes behind every page, on the same ramp. The alphas are NOT raised from
       the shell's: nothing above 0.14 has ever looked right, and the way to make these stronger is not to make
       them bigger. */
    --ambient-1: rgba(10, 122, 175, 0.10);
    --ambient-2: rgba(30, 95, 216, 0.09);
    --ambient-3: rgba(18, 63, 168, 0.08);

    /* The two fixed dark panels. Dark in BOTH themes — their text is a near-white literal in shell.css, not a
       token — so all four are declared identically in the two blocks. Neither appears on the umbrella's pages
       today; they are here so this stays a complete theme rather than a partial one. */
    --dash-hero-gradient: linear-gradient(150deg, #051620 0%, #084B6D 46%, #12356F 100%);
    --dash-hero-accent: #8FDCFA;

    --rp-cover-gradient: linear-gradient(150deg, #051620 0%, #084B6D 38%, #12356F 76%, #041019 100%);
    --rp-cover-accent: #8FDCFA;

    --chart-1: #0a7aaf;
}

[data-theme="dark"] {
    --gold: #38C5F5;
    --gold-bright: #7BDBFF;
    --gold-light: #A9E8FF;
    --gold-text: #7BDBFF;
    --gold-tint: rgba(56, 197, 245, 0.17);
    --gold-tint-line: rgba(56, 197, 245, 0.36);
    --champagne: #D6F2FF;

    --primary: #38C5F5;
    --accent: #38C5F5;
    --accent-cyan: #7BDBFF;
    --accent-glow: rgba(56, 197, 245, 0.34);

    --gradient-primary: linear-gradient(115deg, #1E9BCC 0%, #38C5F5 42%, #6BA8FF 100%);
    --gradient-vivid: linear-gradient(115deg, #38C5F5 0%, #6BA8FF 46%, #4F86FF 100%);

    --border-hover: rgba(56, 197, 245, 0.52);
    --input-focus-glow: rgba(56, 197, 245, 0.20);

    /* The rotation and the orbs, in dark. Unlike the panel tokens above these DO flip: they sit on the themed page
       surfaces rather than on the two fixed dark panels, so they take the luminous end of the ramp. */
    --accent-2: #6BA8FF;
    --accent-2-bright: #9CC5FF;
    --accent-2-text: #9CC5FF;
    --accent-2-tint: rgba(107, 168, 255, 0.17);
    --accent-2-line: rgba(107, 168, 255, 0.36);
    --accent-2-glow: rgba(107, 168, 255, 0.34);
    --accent-3: #4F86FF;
    --accent-3-bright: #86ADFF;
    --accent-3-text: #86ADFF;
    --accent-3-tint: rgba(79, 134, 255, 0.17);
    --accent-3-line: rgba(79, 134, 255, 0.36);
    --accent-3-glow: rgba(79, 134, 255, 0.34);

    --ambient-1: rgba(56, 197, 245, 0.09);
    --ambient-2: rgba(107, 168, 255, 0.08);
    --ambient-3: rgba(79, 134, 255, 0.07);

    --dash-hero-gradient: linear-gradient(150deg, #051620 0%, #084B6D 46%, #12356F 100%);
    --dash-hero-accent: #8FDCFA;

    --rp-cover-gradient: linear-gradient(150deg, #051620 0%, #084B6D 38%, #12356F 76%, #041019 100%);
    --rp-cover-accent: #8FDCFA;

    --chart-1: #38c5f5;
}


/* =====================================================================================================================
   THE THINGS THE SHELL HAS NO COMPONENT FOR

   Everything above this line is custom properties, like any theme. Everything below is a real rule, and every one
   of them is something the umbrella needs and no calculator does:

       .dom-crumbs      a calculator is one segment deep and never needs a trail; /calculators/<slug> is two
       .dom-faq         the shell's .faq-item is opened by action.js, which these pages do not load
       .dom-catlist     the roster inside the hero panel, where a calculator puts its teaser

   Plus a handful of one line adjustments where a shell component is carrying something slightly different from
   what it was built for. Anything longer than that belongs in shell.css, where every calculator gets it too.

   Every selector here is prefixed .dom- or scoped tightly, so nothing in this file can restyle a calculator even
   if it were ever loaded beside a tool's own theme by mistake.
   ===================================================================================================================== */

/* An <a> styled as a button inherits the user agent's underline; a <button> does not. Every call to action on
   these pages is a real link, because there is no navigate() here to intercept a click. */
a.btn { text-decoration: none; }

/* A calculator's nav collapses into a drawer below 900px, opened by action.js. The domain's nav has three links
   and no script, so it keeps them down to phone width — a hamburger that cannot open is worse than none. Below
   that the links go and the footer carries them, which is where a phone reader looks anyway. */
@media (max-width: 900px) {
    .nav .nav-links {
        display: flex;
        gap: 16px;
    }

        .nav .nav-links a { font-size: 0.8rem; }

    .nav .btn-nav { display: none; }
}

@media (max-width: 620px) {
    .nav .nav-links { display: none; }
}

/* ---- the skip link ---------------------------------------------------------------------------------------------
   These pages are a long list of links. A keyboard user who has to tab past the nav on every one of them is a
   keyboard user who leaves. */

.dom-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 1100;
    padding: 14px 22px;
    border-radius: 0 0 16px 0;
    background: var(--gradient-primary);
    color: #FFFFFF;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
}

    .dom-skip:focus { left: 0; }

/* ---- breadcrumbs -----------------------------------------------------------------------------------------------
   /calculators/<slug> is the only two segment page on the domain. A calculator is never more than one deep and so
   has never needed a trail. */

.dom-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
    margin-bottom: 24px;
    font-size: 0.76rem;
    letter-spacing: 0.02em;
    color: var(--text-muted);
}

    .dom-crumbs a {
        color: var(--text-secondary);
        text-decoration: none;
        transition: color 0.3s ease;
    }

        .dom-crumbs a:hover { color: var(--gold-text); }

    .dom-crumbs [aria-current] { color: var(--text-primary); font-weight: 600; }

/* ---- the category list in the hero panel -----------------------------------------------------------------------
   Sits inside .quickcalc, where a calculator puts its thirty second teaser. The domain has no figures to tease
   with, so the panel answers the question it would otherwise be asking: what is on this site. */

.dom-catlist {
    list-style: none;
    display: grid;
    gap: 1px;
    margin: 16px 0 0;
    padding: 0;
    background: var(--rule);
    border-top: 1px solid var(--rule);
}

    .dom-catlist li { background: var(--bg-secondary); }

    .dom-catlist a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        padding: 13px 24px;
        text-decoration: none;
        transition: background 0.3s ease;
    }

        .dom-catlist a:hover { background: var(--gold-tint); }

.dom-catlist-name {
    font-family: var(--font-display);
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--text-primary);
}

.dom-catlist-count {
    flex: none;
    min-width: 26px;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--gold-tint);
    font-size: 0.72rem;
    font-weight: 700;
    text-align: center;
    color: var(--gold-text);
    font-variant-numeric: tabular-nums;
}

.dom-catlist-foot {
    padding: 15px 24px 18px;
    border-top: 1px solid var(--rule);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

    .dom-catlist-foot a { color: var(--gold-text); text-decoration: none; }
    .dom-catlist-foot i { margin-left: 7px; transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1); }
    .dom-catlist-foot a:hover i { transform: translateX(4px); }

/* The hero grid is built for copy beside a working teaser. The domain's panel is a list, so it sits at the top of
   its column rather than centred against a much taller block of copy. */
.lx-hero-grid .hero-stage { align-items: flex-start; }

@media (max-width: 980px) {
    .lx-hero-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---- the FAQ ---------------------------------------------------------------------------------------------------
   Deliberately <details> rather than the shell's .faq-item, which is opened and closed by action.js — a script
   these pages do not load. Styled to be indistinguishable from it, and with one genuine advantage: every answer is
   in the DOM and readable with no script at all, which is what the FAQPage structured data in the head is
   promising a crawler it will find. */

.dom-faq {
    display: grid;
    gap: 12px;
}

.dom-faq-item {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-secondary);
    padding: 2px 24px;
    transition: border-color 0.4s ease, box-shadow 0.5s ease;
}

    .dom-faq-item[open] {
        border-color: var(--gold-tint-line);
        box-shadow: var(--shadow-sm);
    }

    .dom-faq-item summary {
        display: flex;
        align-items: flex-start;
        gap: 16px;
        padding: 20px 0;
        cursor: pointer;
        list-style: none;
    }

        .dom-faq-item summary::-webkit-details-marker { display: none; }

        .dom-faq-item summary h3 {
            flex: 1;
            margin: 0;
            font-family: var(--font-display);
            font-size: 1rem;
            font-weight: 600;
            letter-spacing: -0.02em;
            line-height: 1.45;
            color: var(--text-primary);
            transition: color 0.3s ease;
        }

    .dom-faq-item[open] summary h3 { color: var(--gold-text); }

/* The plus that becomes a minus, built the way the shell's .faq-icon is: two bars, one of which rotates away. */
.dom-faq-icon {
    position: relative;
    flex: none;
    width: 22px;
    height: 22px;
    margin-top: 2px;
    border-radius: 50%;
    background: var(--gold-tint);
}

    .dom-faq-icon::before,
    .dom-faq-icon::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 10px;
        height: 2px;
        margin: -1px 0 0 -5px;
        border-radius: 2px;
        background: var(--gold-text);
        transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .dom-faq-icon::after { transform: rotate(90deg); }

.dom-faq-item[open] .dom-faq-icon::after { transform: rotate(0deg); }

.dom-faq-item > p {
    margin: 0;
    padding: 0 38px 22px 0;
    font-size: 0.9rem;
    line-height: 1.78;
    color: var(--text-secondary);
}

/* ---- small adjustments where a shell component is carrying something slightly different ------------------------ */

/* A promotional page turns one clause of each h2 in italic, which is the same "turn" the calculators put inside
   .section-title. Deliberately italic and NOT accent-coloured: shell.css leaves .section-title em to the browser
   default, and matching that is the point — a heading that is a different colour here from the identical heading
   on a calculator is exactly the small drift that makes two sites out of one.

   .prose em is already re-coloured to --text-primary by the shell, so the italic has to be restated. */
.prose h2 em {
    font-style: italic;
    color: inherit;
}

/* A CATEGORY WITH ONE CALCULATOR IN IT.

   .guides-cards is repeat(auto-fit, minmax(275px, 1fr)). auto-fit collapses the tracks it cannot fill, so two
   cards share the row and look right — but ONE card is handed the whole 1240px container and becomes a banner
   three times the size of every other card on the page, which reads as a featured item rather than as a category
   that happens to have one entry in it.

   Capping it at half the row puts it on the same grid as its neighbours. Only above 780px: below that the grid is
   a single column anyway and a half width card would be a stray. */
@media (min-width: 780px) {
    .guides-cards > .guide-card:only-child { max-width: calc(50% - 9px); }
}

/* The guides cluster title is a heading on a calculator and a link on the sitemap page. */
.guides-cluster-title a { color: inherit; text-decoration: none; }
.guides-cluster-title a:hover { color: var(--gold-bright); }

.dom-cluster-note {
    display: block;
    margin-top: 6px;
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--text-muted);
}

/* A gapfill item on a calculator carries one sentence. Here it carries a list of links, so they need to sit apart
   from the sentence above them and from each other. */
.dom-itemlinks {
    display: flex !important;
    flex-wrap: wrap;
    gap: 7px 16px;
    margin-top: 10px;
    font-size: 0.82rem;
    line-height: 1.5;
}

    .dom-itemlinks a {
        color: var(--gold-text);
        text-decoration: none;
        transition: color 0.3s ease;
    }

        .dom-itemlinks a:hover {
            color: var(--gold-bright);
            text-decoration: underline;
            text-underline-offset: 3px;
        }

.gapfill-item strong + .dom-itemlinks { margin-top: 4px; }

/* The one line of links under a cluster of calculator cards on the home page. */
.dom-clusterlinks {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin-top: 18px;
    font-size: 0.8rem;
    font-weight: 500;
}

    .dom-clusterlinks a { color: var(--gold-text); text-decoration: none; }
    .dom-clusterlinks a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* A promotional page's own sections sit outside .prose so they can run the full column width. */
.dom-promo-section { margin-top: 46px; }

.dom-promo-h2 {
    margin-bottom: 18px;
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 2.7vw, 1.6rem);
    font-weight: 700;
    letter-spacing: -0.025em;
    color: var(--text-primary);
}

.dom-promo-cta { margin-top: 28px; }

/* A promotional page's guide list is much longer than a calculator's read-next strip, so the gapfill inside the
   article gets a little more room between its columns. */
.guide .gapfill { margin-top: 0; }

/* The domain's heroes carry two buttons where a calculator's carries one, so they wrap rather than overflow. */
@media (max-width: 560px) {
    .hero-cta-row .btn {
        width: 100%;
        padding: 0 18px;
    }
}