/* ==========================================================================
   chrome.css - the shared site chrome: navigation, mobile menu and footer.

   This file is the single source of truth for the header and footer on every
   page of justread.app. It is loaded last, after whichever page stylesheet a
   template uses, so the chrome renders identically no matter what the rest of
   the page is built on.

   To stay independent of the page stylesheets, every value below comes from a
   --jr-* token declared in this file. The chrome never reads a page token, and
   a page can never accidentally restyle the chrome by redefining one of its
   own. Colours mirror the homepage design system: true-neutral surfaces with
   the brand violet (#7C3AED, the app icon's own hue) as the single accent.
   ========================================================================== */

:root,
[data-theme="dark"] {
    --jr-bg: #121317;
    --jr-surface: #1A1B21;
    --jr-elevated: #22242C;
    --jr-footer-bg: #0D0E12;
    --jr-border: rgba(255, 255, 255, .10);
    --jr-border-strong: rgba(255, 255, 255, .18);

    --jr-text: rgba(255, 255, 255, .96);
    --jr-text-2: rgba(255, 255, 255, .82);
    --jr-text-3: rgba(255, 255, 255, .60);

    --jr-accent: #7C3AED;
    --jr-accent-hover: #6D28D9;
    --jr-accent-active: #5B21B6;
    --jr-accent-text: #A78BFA;
    --jr-on-accent: #FFFFFF;
    --jr-heart: #F87171;

    --jr-shadow-sm: 0 1px 2px rgba(0, 0, 0, .5), 0 2px 6px rgba(0, 0, 0, .35);
    --jr-shadow-md: 0 4px 12px rgba(0, 0, 0, .5), 0 14px 30px rgba(0, 0, 0, .4);
    --jr-shadow-lg: 0 10px 28px rgba(0, 0, 0, .55), 0 30px 60px rgba(0, 0, 0, .5);
}

[data-theme="light"] {
    --jr-bg: #FFFFFF;
    --jr-surface: #F4F5F7;
    --jr-elevated: #FFFFFF;
    --jr-footer-bg: #F7F7F9;
    --jr-border: #E7E7EC;
    --jr-border-strong: #D6D6DD;

    --jr-text: #111115;
    --jr-text-2: #55555F;
    --jr-text-3: #6E6E78;

    --jr-accent: #7C3AED;
    --jr-accent-hover: #6D28D9;
    --jr-accent-active: #5B21B6;
    --jr-accent-text: #6D28D9;
    --jr-on-accent: #FFFFFF;
    --jr-heart: #DC2626;

    --jr-shadow-sm: 0 1px 2px rgba(17, 17, 24, .06), 0 2px 6px rgba(17, 17, 24, .05);
    --jr-shadow-md: 0 4px 12px rgba(17, 17, 24, .08), 0 14px 30px rgba(17, 17, 24, .08);
    --jr-shadow-lg: 0 10px 30px rgba(17, 17, 24, .10), 0 30px 60px rgba(17, 17, 24, .10);
}

:root {
    --jr-font: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --jr-radius-sm: 10px;
    --jr-radius: 14px;
    --jr-container: 1200px;

    /* Page stylesheets size their own layout off these. The bar is now a
       flush, full-width 66px strip, so the old floating-pill offset is zero. */
    --nav-height: 66px;
    --nav-top: 0px;
    --total-top: 66px;
    --scroll-offset: 80px;
}

body {
    padding-top: var(--nav-height);
}

/* ==========================================================================
   Navigation
   ========================================================================== */

nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 800;
    width: auto;
    max-width: none;
    transform: none;
    background: var(--jr-elevated);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    border-bottom: 1px solid var(--jr-border);
    border-radius: 0;
    transition: box-shadow .3s ease, border-color .3s ease;
}

nav.scrolled {
    box-shadow: var(--jr-shadow-md);
}

nav .nav-content {
    max-width: var(--jr-container);
    margin: 0 auto;
    height: var(--nav-height);
    padding: 0 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    font-family: var(--jr-font);
}

nav .logo-container {
    display: flex;
    align-items: center;
    gap: .6rem;
}

nav .logo-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    object-fit: cover;
}

nav .logo-text {
    font-weight: 700;
    font-size: 1.12rem;
    letter-spacing: -.02em;
    color: var(--jr-text);
}

nav .nav-links {
    list-style: none;
    display: flex;
    align-items: center;
    gap: .3rem;
    margin: 0 0 0 auto;
    padding: 0;
}

nav .nav-links a {
    display: block;
    font-size: .94rem;
    font-weight: 500;
    color: var(--jr-text-2);
    padding: .5rem .85rem;
    border-radius: 9px;
    text-decoration: none;
    transition: color .2s ease, background-color .25s ease;
}

nav .nav-links a::after {
    display: none;
}

nav .nav-links a:hover {
    color: var(--jr-text);
    background: var(--jr-surface);
}

nav .nav-right {
    display: flex;
    align-items: center;
    gap: .85rem;
}

nav .theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--jr-border);
    border-radius: var(--jr-radius-sm);
    color: var(--jr-text-2);
    cursor: pointer;
    transition: color .2s ease, border-color .2s ease, background .2s ease;
}

nav .theme-toggle:hover {
    color: var(--jr-text);
    border-color: var(--jr-border-strong);
    background: var(--jr-surface);
}

nav .theme-toggle svg {
    width: 19px;
    height: 19px;
}

.theme-toggle .icon-sun,
.theme-toggle .icon-moon { display: none; }
[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
[data-theme="light"] .theme-toggle .icon-moon { display: block; }

nav .nav-cta,
.mobile-menu .cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    background: var(--jr-accent);
    color: var(--jr-on-accent);
    border: none;
    border-radius: var(--jr-radius-sm);
    font-family: var(--jr-font);
    font-weight: 700;
    letter-spacing: -.01em;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: var(--jr-shadow-sm);
    transition: background .2s ease, transform .25s cubic-bezier(.34, 1.56, .64, 1), box-shadow .2s ease;
}

nav .nav-cta {
    height: 40px;
    padding: 0 1.2rem;
    font-size: .9rem;
}

nav .nav-cta::after {
    content: "\2192";
    display: inline-block;
    transform: translateX(-1px);
    transition: transform .25s cubic-bezier(.34, 1.56, .64, 1);
}

nav .nav-cta:hover,
.mobile-menu .cta-button:hover {
    background: var(--jr-accent-hover);
    transform: translateY(-2px);
    box-shadow: var(--jr-shadow-md);
}

nav .nav-cta:hover::after {
    transform: translateX(3px);
}

nav .nav-cta:active,
.mobile-menu .cta-button:active {
    background: var(--jr-accent-active);
    transform: translateY(0);
    box-shadow: var(--jr-shadow-sm);
}

nav .hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    padding: 0 9px;
    background: transparent;
    border: 1px solid var(--jr-border);
    border-radius: var(--jr-radius-sm);
    cursor: pointer;
}

nav .hamburger span {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--jr-text);
    border-radius: 2px;
    transition: transform .25s ease, opacity .2s ease;
}

nav .hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
nav .hamburger.active span:nth-child(2) { opacity: 0; }
nav .hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ==========================================================================
   Mobile menu
   ========================================================================== */

.mobile-menu {
    position: fixed;
    top: var(--nav-height);
    left: 0;
    right: 0;
    width: auto;
    max-width: none;
    transform: translateY(-12px);
    z-index: 790;
    display: flex;
    flex-direction: column;
    gap: .2rem;
    padding: 1rem 1.5rem 1.4rem;
    font-family: var(--jr-font);
    background: var(--jr-elevated);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    border-bottom: 1px solid var(--jr-border);
    border-radius: 0;
    box-shadow: var(--jr-shadow-lg);
    opacity: 0;
    visibility: hidden;
    transition: transform .25s ease, opacity .25s ease, visibility .25s;
}

.mobile-menu.active {
    display: flex;
    transform: none;
    opacity: 1;
    visibility: visible;
}

.mobile-menu a {
    display: block;
    width: 100%;
    padding: .8rem .4rem;
    font-size: 1rem;
    font-weight: 500;
    color: var(--jr-text);
    text-align: left;
    text-decoration: none;
    background: none;
    border: none;
    border-bottom: 1px solid var(--jr-border);
    border-radius: 0;
}

.mobile-menu a:hover {
    background: none;
    color: var(--jr-accent-text);
}

.mobile-menu .cta-button {
    margin-top: .8rem;
    padding: .8rem 1.25rem;
    font-size: .95rem;
    color: var(--jr-on-accent);
    border-bottom: none;
    text-align: center;
}

.mobile-menu .cta-button:hover {
    color: var(--jr-on-accent);
}


/* ==========================================================================
   Footer

   Modelled on the jetbrains.com footer: one deep, full-bleed band that stays
   the same in both themes, a wide row of narrow link columns set in small
   13px type, an inset hairline rule, and a quiet bottom bar carrying the
   wordmark, the copyright and the people who build the app.

   The band is dark in light mode too, on purpose. It reads as the base of the
   page rather than another section of it, and it lets the footer render
   identically everywhere. Its colours are declared locally so the rest of the
   theme never touches them.
   ========================================================================== */

footer {
    --jr-f-bg: #1B1C21;
    --jr-f-heading: #FFFFFF;
    --jr-f-link: rgba(255, 255, 255, .70);
    --jr-f-link-hover: #FFFFFF;
    --jr-f-dim: rgba(255, 255, 255, .50);
    --jr-f-rule: rgba(255, 255, 255, .20);
    --jr-f-hover-bg: rgba(255, 255, 255, .10);

    margin-top: 5rem;
    padding: 0;
    background: var(--jr-f-bg);
    font-family: var(--jr-font);
    color: var(--jr-f-link);
}

.footer-content {
    max-width: var(--jr-container);
    margin: 0 auto;
    padding: 64px 22px;
    border-bottom: 1px solid var(--jr-f-rule);
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 48px 32px;
}

.footer-column {
    flex: 0 1 calc(20% - 32px);
    min-width: 150px;
}

/* The guide list is long, so its column is double width and sets two
   balanced sub-columns rather than running as one very tall list. */
.footer-column--guides {
    flex-basis: calc(40% - 32px);
}

.footer-column--guides ul {
    columns: 2;
    column-gap: 32px;
}

.footer-column h4 {
    margin: 0 0 12px;
    font-size: 13px;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: normal;
    text-transform: none;
    color: var(--jr-f-heading);
}

.footer-column ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-column li {
    margin-top: 8px;
    break-inside: avoid;
}

.footer-column li a {
    display: inline;
    padding: 0 0 1px;
    font-size: 13px;
    font-weight: 400;
    line-height: 20px;
    color: var(--jr-f-link);
    text-decoration: none;
}

.footer-column li a:hover {
    color: var(--jr-f-link-hover);
}

.footer-column li a::after {
    display: none;
}

#language-select {
    width: 100%;
    max-width: 220px;
    padding: 8px 10px;
    background: rgba(255, 255, 255, .06);
    color: var(--jr-f-link-hover);
    border: 1px solid var(--jr-f-rule);
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
}

#language-select option {
    color: #111115;
    background: #FFFFFF;
}

.footer-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 20px;
    font-size: 13px;
    font-weight: 600;
    line-height: 20px;
    color: var(--jr-f-link-hover);
    text-decoration: none;
    transition: gap .2s ease;
}

.footer-cta::after {
    content: "\2192";
}

.footer-cta:hover {
    gap: 12px;
}

/* Secondary link sets (related guides, directory badges) live at the foot of
   the page in drawers that are closed on load. The markup is always present,
   so the links are there for anyone who wants them and for crawlers, but they
   never compete with the page itself for attention. */
.footer-drawers {
    max-width: var(--jr-container);
    margin: 0 auto;
    padding: 0 22px;
}

.footer-drawer {
    border-bottom: 1px solid var(--jr-f-rule);
}

.footer-drawer > summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 0;
    font-size: 13px;
    font-weight: 600;
    line-height: 20px;
    color: var(--jr-f-dim);
    list-style: none;
    cursor: pointer;
    transition: color .2s ease;
}

.footer-drawer > summary::-webkit-details-marker {
    display: none;
}

.footer-drawer > summary::before {
    content: "";
    width: 6px;
    height: 6px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(-45deg);
    transition: transform .2s ease;
}

.footer-drawer[open] > summary::before {
    transform: rotate(45deg);
}

.footer-drawer > summary:hover {
    color: var(--jr-f-link-hover);
}

.footer-drawer-links {
    list-style: none;
    margin: 0;
    padding: 0 0 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 28px;
}

.footer-drawer-links a {
    font-size: 13px;
    line-height: 20px;
    color: var(--jr-f-link);
    text-decoration: none;
}

.footer-drawer-links a:hover {
    color: var(--jr-f-link-hover);
}

.footer-badges {
    padding: 4px 0 24px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 24px;
    text-align: initial;
}

.footer-badges a {
    display: inline-flex;
    align-items: center;
    font-size: 13px;
    color: var(--jr-f-link);
    text-decoration: none;
    opacity: .6;
    transition: opacity .2s ease;
}

.footer-badges a:hover {
    opacity: 1;
}

.footer-badges img {
    height: 32px;
    width: auto;
}

/* The badges ship in a light and a dark artwork. The band is always dark, so
   the dark-background artwork is the only one ever shown. */
.turbo0-badge-for-light-bg,
.startupfast-badge-for-light-bg,
.scrolllaunch-badge-for-light-bg,
.fazier-badge-for-light-bg,
.findlytools-badge-for-light-bg { display: none; }

.footer-bar {
    max-width: var(--jr-container);
    margin: 0 auto;
    padding: 32px 22px 64px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 32px;
}

.footer-identity {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 20px;
}

.footer-logo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--jr-f-link-hover);
    text-decoration: none;
}

.footer-logo img {
    width: 22px;
    height: 22px;
    border-radius: 6px;
}

.footer-copyright {
    margin: 0;
    font-size: 13px;
    line-height: 20px;
    color: var(--jr-f-dim);
}

.footer-people {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 16px;
    font-size: 13px;
    line-height: 20px;
    color: var(--jr-f-dim);
}

.footer-people-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.heart {
    color: #F87171;
}

.footer-person {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.footer-person-name {
    margin-right: 4px;
    font-weight: 600;
    color: var(--jr-f-link);
}

.footer-person a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 15px;
    color: var(--jr-f-link);
    text-decoration: none;
    transition: background .2s ease, color .2s ease;
}

.footer-person a:hover {
    background: var(--jr-f-hover-bg);
    color: var(--jr-f-link-hover);
}

.footer-person svg {
    width: 17px;
    height: 17px;
    display: block;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1000px) {
    .footer-column {
        flex-basis: calc(33.3333% - 32px);
    }

    .footer-column--guides {
        flex-basis: calc(66.6667% - 32px);
    }
}

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

    nav .hamburger {
        display: flex;
    }
}

@media (max-width: 640px) {
    nav .nav-content {
        padding: 0 16px;
    }

    .mobile-menu {
        padding: 1rem 1rem 1.25rem;
    }

    .footer-content {
        padding: 48px 16px;
        gap: 40px 16px;
    }

    .footer-column {
        flex-basis: calc(50% - 16px);
        min-width: 0;
    }

    .footer-column--guides {
        flex-basis: 100%;
    }

    .footer-drawers {
        padding: 0 16px;
    }

    .footer-bar {
        padding: 24px 16px 48px;
        flex-direction: column;
        align-items: flex-start;
    }
}