/* Shared styles for tools.codeofthegeeks.com.
   Layered on Bootstrap 5 + Lux, matching the company site's typography.

   The page is light (Lux on white, like the company site); the interactive
   tool panels are dark grey cards that sit on it. Text inside those panels
   therefore needs light colours -- Lux's own greys are meant for white
   backgrounds and fall below WCAG AA on dark. */

:root {
    --bs-body-font-family: "Noto Sans", sans-serif;

    --tool-panel-bg: #2b3035;
    --tool-panel-border: #3a3f45;
    --tool-panel-text: #e9ecef;
    --tool-panel-text-dim: #b6bdc4;
    --tool-dropzone-border: #737b83;
    --tool-dropzone-active: #2fa4e7;
    --tool-accent: #6cb2eb;
}

body {
    font-family: var(--bs-body-font-family);
}

/* --- dark regions: navbar and footer ---
   Lux's secondary text colour drops to ~3.3:1 against the dark background,
   below WCAG AA. Brighten it in these regions only. */

.navbar[data-bs-theme="dark"] .nav-link,
.navbar[data-bs-theme="dark"] .navbar-brand {
    color: #dee2e6;
}

.navbar[data-bs-theme="dark"] .nav-link:hover,
.navbar[data-bs-theme="dark"] .nav-link:focus {
    color: #fff;
}

.site-footer {
    color: #ced4da;
}

.site-footer .footer-title {
    color: #fff;
}

.site-footer a {
    color: #e9ecef;
}

.site-footer a:hover,
.site-footer a:focus {
    color: #fff;
}

/* --- layout --- */

.tool-header {
    border-bottom: 1px solid #dee2e6;
    padding-bottom: 0.875rem;
    margin-bottom: 1rem;
}

/* --- dark tool panel ---
   Everything inside inherits light text, so new controls added later are
   readable by default rather than needing their own override. */

.tool-panel {
    background: var(--tool-panel-bg);
    border: 1px solid var(--tool-panel-border);
    border-radius: 0.5rem;
    padding: 1.5rem;
    color: var(--tool-panel-text);
}

.tool-panel h1,
.tool-panel h2,
.tool-panel h3,
.tool-panel h4,
.tool-panel h5,
.tool-panel h6,
.tool-panel legend,
.tool-panel .form-label {
    color: #fff;
}

.tool-panel .text-body-secondary,
.tool-panel .form-text,
.tool-panel .privacy-note {
    color: var(--tool-panel-text-dim) !important;
}

/* Text links inside a panel. Scoped with :not(.btn) so an <a class="btn">
   keeps its button colours instead of inheriting link blue -- otherwise a
   filled button renders blue-on-fill and is barely readable. */
.tool-panel a:not(.btn) {
    color: var(--tool-accent);
}

/* Outline buttons on dark: Lux gives them near-black text and borders. */
.tool-panel .btn-outline-primary {
    --bs-btn-color: #9ecbf0;
    --bs-btn-border-color: #565d64;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #2fa4e7;
    --bs-btn-hover-border-color: #2fa4e7;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #2fa4e7;
    --bs-btn-active-border-color: #2fa4e7;
}

/* The chosen preset must read as chosen at a glance. */
.tool-panel .btn-check:checked + .btn-outline-primary {
    color: #fff;
    background-color: #2fa4e7;
    border-color: #2fa4e7;
}

.tool-panel .btn-check:checked + .btn-outline-primary .text-body-secondary {
    color: rgba(255, 255, 255, 0.85) !important;
}

.tool-panel .btn-check:focus-visible + .btn-outline-primary {
    box-shadow: 0 0 0 0.25rem rgba(47, 164, 231, 0.4);
}

/* Primary action: Lux renders .btn-primary near-black, invisible on dark. */
.tool-panel .btn-primary {
    --bs-btn-bg: #2fa4e7;
    --bs-btn-border-color: #2fa4e7;
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: #1a8fd1;
    --bs-btn-hover-border-color: #1a8fd1;
    --bs-btn-hover-color: #fff;
    --bs-btn-disabled-bg: #3a3f45;
    --bs-btn-disabled-border-color: #464c52;
    --bs-btn-disabled-color: #8b9299;
}

.tool-panel .progress {
    background-color: #1f2327;
}

.tool-panel .form-range::-webkit-slider-runnable-track {
    background-color: #4a5056;
}

.tool-panel .form-range::-moz-range-track {
    background-color: #4a5056;
}

/* Alerts inside a dark panel need dark-appropriate fills. */
.tool-panel .alert-warning {
    background-color: #3d3116;
    border-color: #5c4a1f;
    color: #f2e2b8;
}

.tool-panel .alert-danger {
    background-color: #3d1a1d;
    border-color: #5c2529;
    color: #f5cdd0;
}

/* --- file drop zone --- */

.dropzone {
    border: 2px dashed var(--tool-dropzone-border);
    border-radius: 0.5rem;
    padding: 2.5rem 1.5rem;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.dropzone:hover,
.dropzone:focus-visible {
    border-color: var(--tool-dropzone-active);
}

.dropzone:focus-visible {
    outline: 2px solid var(--tool-dropzone-active);
    outline-offset: 2px;
}

.dropzone.is-active {
    border-color: var(--tool-dropzone-active);
    background: rgba(47, 164, 231, 0.12);
}

.dropzone input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* --- results readout --- */

.readout {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    gap: 1rem;
}

.readout-item {
    text-align: center;
}

.readout-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--tool-panel-text-dim);
}

.readout-value {
    font-size: 1.6rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    color: #fff;
}

/* The output value is the answer the user came for. */
#r-output {
    color: var(--tool-accent);
}

/* The download button is the only action on screen once results exist, so it
   carries the filled accent. Explicit rather than inherited, so it is immune to
   the link-colour rule above. */
#download.btn {
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
    color: #fff;
}

/* --- privacy banner, directly under the page title --- */

.privacy-banner {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: #eaf6fd;
    border: 1px solid #b8ddf3;
    border-left: 4px solid #2fa4e7;
    border-radius: 0.375rem;
    padding: 0.875rem 1rem;
    margin-bottom: 1rem;
}

.privacy-banner-icon {
    flex: 0 0 auto;
    font-size: 1.25rem;
    line-height: 1.4;
}

.privacy-banner-text {
    font-size: 0.9375rem;
    color: #14496b;
    margin: 0;
}

.privacy-banner-text strong {
    color: #0d3a56;
}

/* --- ad slots ---
   Height is reserved so a late-loading ad does not shove the page around.
   In-flow slots go *below* the tool, never above: the file input is why people
   are here and it should not need a scroll. */

.ad-slot {
    min-height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 2rem 0;
}

/* Side rail: a 300px tower beside the content column, shown only where there is
   real room for it. The content column is 820px, so below ~1450px the rail
   would either overlap or squeeze the column -- there it simply does not
   render, and the in-flow slots carry the load. */
.ad-rail {
    display: none;
}

@media (min-width: 1450px) {
    .ad-rail {
        display: block;
        position: fixed;
        top: 6rem;
        width: 300px;
        min-height: 600px;
    }

    /* Centre line of the viewport, plus half the content column, plus a gutter. */
    .ad-rail-right {
        left: calc(50% + 410px + 2rem);
    }

    .ad-rail-left {
        right: calc(50% + 410px + 2rem);
    }
}

/* Placeholder outline while the slots are empty, so the reserved space is
   visible during development rather than looking like a layout bug. Drop this
   rule once real ad markup is in place. */
.ad-slot:empty,
.ad-rail:empty {
    border: 1px dashed var(--tool-panel-border);
    border-radius: 0.375rem;
}

.ad-slot:empty::after,
.ad-rail:empty::after {
    content: "ad space";
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #adb5bd;
}

.ad-rail:empty {
    display: none;
}

@media (min-width: 1450px) {
    .ad-rail:empty {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* --- misc --- */

/* Tool cards sit on the light page, so Lux's own card colours apply. The
   wrapping <a> has text-decoration removed; restore the body text colour so
   card titles don't inherit link blue. */
.tool-card {
    height: 100%;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    color: var(--bs-body-color);
}

a:hover .tool-card .card-title {
    color: #2fa4e7;
}

.tool-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
}

.tool-card.is-soon {
    opacity: 0.6;
}

/* --- legal pages --- */

.legal-body {
    max-width: 42rem;
}

.legal-body h2:first-child {
    margin-top: 0 !important;
}

/* Unresolved drafting markers, deliberately loud so an unfinished document
   cannot be mistaken for a finished one. */
mark.todo {
    background: #fff3cd;
    color: #664d03;
    padding: 0.05em 0.3em;
    border-radius: 0.2em;
    font-size: 0.9em;
}