/* ═══════════════════════════════════════════════════════════════════════════
   RuralBytesTamil — Site-wide Design System
   ───────────────────────────────────────────────────────────────────────────
   Extreme minimalism = clarity. Near-white page, near-black text, one accent
   color, generous whitespace, hairline rules used sparingly. No gradients,
   no drop-shadow cards, no emoji.

   This file carries the nav, footer, floating CTA and the full homepage.
   It is written to be reused, unchanged, on every other page of the site.

   Mobile-first. Breakpoints: 640px (small tablet / large phone), 900px (desktop).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────── 1. TOKENS ────────────────────────────────── */
:root {
    --paper: #fcfcfa;
    --paper-alt: #f5f4f0;
    --line: #e6e4df;

    --ink: #16181d;
    --ink-soft: #40454e;
    --muted: #666c76;

    --accent: #6b1515;
    --accent-deep: #4c0f0f;
    --accent-tint: #f6eeec;

    --font-display: 'Anek Tamil', sans-serif;
    --font-body: 'Instrument Sans', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;

    --max: 1080px;
}

/* ───────────────────────────── 2. RESET / BASE ──────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}
/* Account for sticky nav (64px) + optional ticker offset (36px) + breathing room */
[id] { scroll-margin-top: 112px; }
body, h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul { padding: 0; list-style: none; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

body {
    background: var(--paper);
    color: var(--ink-soft);
    font-family: var(--font-body);
    font-size: 1.05rem;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ───────────────────────────── 3. TYPOGRAPHY ────────────────────────────── */
h1 {
    font-family: var(--font-display);
    font-size: clamp(2.6rem, 6.5vw, 4.6rem);
    line-height: 1.06;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--ink);
}
h2 {
    font-family: var(--font-display);
    font-size: clamp(1.65rem, 3.5vw, 2.35rem);
    line-height: 1.15;
    font-weight: 600;
    color: var(--ink);
}
h3 {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--ink);
}
p { max-width: 62ch; }
p + p { margin-top: 1em; }

.label {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--accent);
    margin-bottom: 12px;
}
.meta {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--muted);
}

.section-head h2 { margin-top: 4px; }
.section-sub {
    margin-top: 14px;
    color: var(--muted);
    max-width: 56ch;
}

/* Prose links (inside paragraphs) */
main p a, .about-prose a {
    color: var(--accent);
    text-decoration: none;
}
main p a:hover, .about-prose a:hover { text-decoration: underline; }

/* Arrow links */
.arrow-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--ink);
}
.arrow-link .arrow { display: inline-block; transition: transform 0.2s ease; }
.arrow-link:hover .arrow { transform: translateX(3px); }
.arrow-link.quiet { color: var(--muted); font-weight: 500; }
.arrow-link.quiet:hover { color: var(--ink); }

/* ───────────────────────────── 4. BUTTONS ───────────────────────────────── */
.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--accent);
    color: #fff;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.98rem;
    padding: 14px 26px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    transition: background 0.2s ease;
}
.btn-primary:hover { background: var(--accent-deep); }

.btn-quiet {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: var(--ink);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.98rem;
    padding: 14px 26px;
    border-radius: 6px;
    border: 1px solid var(--line);
    cursor: pointer;
    transition: border-color 0.2s ease;
}
.btn-quiet:hover { border-color: var(--ink); }

.btn-primary.small, .btn-quiet.small { padding: 10px 18px; font-size: 0.9rem; }

/* ───────────────────────────── 5. LAYOUT ────────────────────────────────── */
.wrap {
    max-width: var(--max);
    margin-inline: auto;
    padding-inline: 24px;
}
main > section, main > aside {
    padding-block: clamp(72px, 10vw, 128px);
}

/* ───────────────────────────── 6. NAVBAR ────────────────────────────────── */
.nav {
    position: sticky;
    top: 0;
    height: 64px;
    display: flex;
    align-items: center;
    background: rgba(252, 252, 250, 0.88);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
    z-index: 100;
}
.nav-inner {
    width: 100%;
    max-width: var(--max);
    margin-inline: auto;
    padding-inline: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
.nav-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--ink);
    flex-shrink: 0;
}
.nav-brand img { width: 32px; height: 32px; border-radius: 6px; }

.nav-links {
    display: none;
    align-items: center;
    gap: 28px;
}
.nav-links a {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 0.92rem;
    color: var(--ink-soft);
    transition: color 0.15s ease;
}
.nav-links a:hover { color: var(--ink); }
.nav-links a[aria-current="page"],
.nav-panel a[aria-current="page"] { color: var(--accent); font-weight: 600; }

.nav-cta {
    display: none;
    align-items: center;
    gap: 18px;
}
.nav-cta .login-link {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 0.92rem;
    color: var(--ink-soft);
}
.nav-cta .login-link:hover { color: var(--ink); }

.nav-toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    align-items: center;
    background: none;
    border: none;
    cursor: pointer;
}
.nav-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--ink);
    transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-panel {
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    background: #fff;
    border-bottom: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    padding: 8px 24px 24px;
}
.nav-panel[hidden] { display: none; }
.nav-panel a {
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
    font-family: var(--font-body);
    font-weight: 500;
    color: var(--ink-soft);
}
.nav-panel a:last-of-type { border-bottom: none; }
.nav-panel .nav-panel-ctas {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
}
.nav-panel .btn-primary,
.nav-panel .btn-quiet { width: 100%; text-align: center; border-bottom: none; }
/* .nav-panel a's --ink-soft would otherwise out-rank the button's white text */
.nav-panel a.btn-primary { color: #fff; }

/* Compatibility: when the config-driven announcement bar (announcements.js /
   .rb-announce, host class .wj-ticker) is present as body's first child,
   push the sticky nav down by its fixed 36px height. */
.wj-ticker ~ .nav { top: 36px; }

@media (min-width: 900px) {
    .nav-links { display: flex; }
    .nav-cta { display: flex; }
    .nav-toggle { display: none; }
    .nav-panel { display: none !important; }
}

/* ───────────────────────────── 7. HERO ──────────────────────────────────── */
.hero { padding-top: clamp(96px, 14vw, 160px); }
.hero-kicker { animation: fade-up 0.5s ease-out both; }
.hero-line {
    display: block;
    animation: fade-up 0.5s ease-out both;
}
.hero-line:nth-of-type(1) { animation-delay: 0.08s; }
.hero-line:nth-of-type(2) { animation-delay: 0.16s; }
.hero-line:nth-of-type(3) { animation-delay: 0.24s; }
.hero-ta { color: var(--accent); }

.hero-dek {
    margin-top: 24px;
    font-size: 1.15rem;
    max-width: 62ch;
    animation: fade-up 0.5s ease-out both;
    animation-delay: 0.32s;
}
.hero-ctas {
    margin-top: 32px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
    animation: fade-up 0.5s ease-out both;
    animation-delay: 0.4s;
}
.hero-proof {
    margin-top: 48px;
    animation: fade-up 0.5s ease-out both;
    animation-delay: 0.48s;
}

@keyframes fade-up {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Page-load entrance utilities — the same soothing stagger as the homepage
   hero, for the opening block of every other page. Apply .rise-1..5 in
   reading order to the top-of-page elements only (below-fold content is
   already off-screen at load, so animating it there is wasted). */
.rise-1, .rise-2, .rise-3, .rise-4, .rise-5 { animation: fade-up 0.5s ease-out both; }
.rise-2 { animation-delay: 0.08s; }
.rise-3 { animation-delay: 0.16s; }
.rise-4 { animation-delay: 0.24s; }
.rise-5 { animation-delay: 0.32s; }

@media (prefers-reduced-motion: reduce) {
    .hero-kicker, .hero-line, .hero-dek, .hero-ctas, .hero-proof,
    .rise-1, .rise-2, .rise-3, .rise-4, .rise-5 { animation: none; }
}

/* ───────────────────────────── 8. THREE DOORS ───────────────────────────── */
.doors-grid {
    margin-top: 48px;
    display: grid;
    gap: 40px;
}
.door {
    position: relative;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.door p { margin-top: 12px; margin-bottom: 20px; }
.door .arrow-link { display: flex; margin-top: 4px; }
.door .arrow-link + .arrow-link { margin-top: 10px; }

/* Stretched-link: the primary link in a card fills the whole card, so
   tapping/clicking anywhere on the card (heading, body copy) activates it —
   not just the small arrow-link text. Secondary links inside the same card
   are lifted above the overlay so they stay independently clickable. */
.door .stretched-link::after {
    content: "";
    position: absolute;
    inset: 0;
}
.door .arrow-link:not(.stretched-link) {
    position: relative;
    z-index: 1;
}
.door:hover { background: var(--paper-alt); }

@media (min-width: 900px) {
    .doors-grid { grid-template-columns: repeat(3, 1fr); gap: 32px; }
    .door { border-left: 1px solid var(--line); padding-left: 24px; }
    .door:hover { border-left-color: var(--accent); }
}

/* ───────────────────────────── 9. WORKSHOP BAND ─────────────────────────── */
.workshop { background: var(--paper-alt); }
.workshop p { margin-top: 16px; }
.workshop-spec { margin-top: 20px; }
.workshop-ctas {
    margin-top: 32px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
}
.workshop-note { margin-top: 20px; }

/* ───────────────────────────── 10. ABOUT ────────────────────────────────── */
.about-grid {
    margin-top: 48px;
    display: grid;
    gap: 48px;
}
.about-prose p + p { margin-top: 16px; }
.about-social {
    margin-top: 24px;
    font-size: 0.92rem;
    color: var(--muted);
}
.about-social a { color: var(--muted); }
.about-social a:hover { color: var(--ink); text-decoration: underline; }

.about-stats { display: grid; gap: 20px; }
.stat-row { border-top: 1px solid var(--line); padding-top: 12px; }
.stat-row .stat-num {
    display: block;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.5rem;
    color: var(--ink);
}

@media (min-width: 900px) {
    .about-grid { grid-template-columns: 3fr 2fr; }
}

/* ───────────────────────────── 11. WRITING ──────────────────────────────── */
.writing-list { margin-top: 40px; }
.writing-row {
    display: block;
    padding-block: 22px;
    border-bottom: 1px solid var(--line);
}
.writing-row:first-child { border-top: 1px solid var(--line); }
.writing-row h3 { transition: color 0.15s ease; }
.writing-row:hover h3 { color: var(--accent); }
.writing-row .meta { margin-top: 6px; }
.writing-list + .arrow-link { margin-top: 28px; display: inline-flex; }

/* ───────────────────────────── 12. VOICES ───────────────────────────────── */
.voices-grid {
    margin-top: 48px;
    display: grid;
    gap: 32px;
}
.voices-grid blockquote {
    border-left: 2px solid var(--accent);
    padding-left: 20px;
}
.voices-grid blockquote p {
    font-style: italic;
    font-size: 1.05rem;
    max-width: none;
}
.voices-grid blockquote cite {
    display: block;
    margin-top: 14px;
    font-style: normal;
}

@media (min-width: 900px) {
    .voices-grid { grid-template-columns: 1fr 1fr; }
}

/* ───────────────────────────── 13. ASK-A-PM STRIP ───────────────────────── */
.ask-pm {
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding-block: 40px !important;
}
.ask-pm .wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 16px 28px;
}
.ask-pm .label { margin-bottom: 0; }
.ask-pm p { margin: 0; flex: 1 1 320px; color: var(--ink-soft); }

/* ───────────────────────────── 14. FAQ ──────────────────────────────────── */
.faq-list { margin-top: 40px; }
.faq-list details {
    border-bottom: 1px solid var(--line);
    padding-block: 20px;
}
.faq-list details:first-child { border-top: 1px solid var(--line); }
.faq-list summary {
    cursor: pointer;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--ink);
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
    content: '+';
    font-family: var(--font-mono);
    color: var(--accent);
    flex-shrink: 0;
    transition: transform 0.2s ease;
}
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list details p { margin-top: 14px; }

/* ───────────────────────────── 15. CTA BAND ─────────────────────────────── */
.cta-band {
    background: var(--ink);
    color: #d8d5cf;
}
.cta-band h2 { color: #fff; }
.cta-band p { margin-top: 16px; max-width: 56ch; }
.cta-band .btn-primary { margin-top: 28px; }
.cta-band .meta { display: block; margin-top: 16px; color: #9a9790; }

/* ───────────────────────────── 16. FOOTER ───────────────────────────────── */
.footer {
    border-top: 1px solid var(--line);
    padding-block: 64px 32px;
    background: var(--paper);
}
.footer-grid {
    display: grid;
    gap: 40px;
}
.footer-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--ink);
}
.footer-brand img { width: 32px; height: 32px; border-radius: 6px; }
.footer-tagline {
    margin-top: 14px;
    font-size: 0.92rem;
    color: var(--muted);
    max-width: 32ch;
}
.footer-col-title {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--muted);
    margin-bottom: 16px;
}
.footer-col ul { display: flex; flex-direction: column; gap: 12px; }
.footer-col a {
    font-family: var(--font-body);
    font-size: 0.92rem;
    color: var(--muted);
}
.footer-col a:hover { color: var(--ink); }

.footer-bottom {
    margin-top: 56px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    justify-content: space-between;
}

@media (min-width: 640px) {
    .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
    .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
}

/* ───────────────────────────── 17. FLOATING CTA ─────────────────────────── */
.floating-book-cta {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 200;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--ink);
    color: #fff;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.9rem;
    padding: 12px 20px;
    border-radius: 999px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
    transition: transform 0.2s ease;
}
.floating-book-cta:hover { transform: translateY(-2px); }
/* The sticky nav already shows "Book a call" on desktop — the pill only earns
   its place on mobile, where the nav CTA is folded into the hamburger menu. */
@media (min-width: 900px) { .floating-book-cta { display: none; } }
@media print { .floating-book-cta { display: none; } }

/* ───────────────────────────── 18. RESPONSIVE TYPE SCALE TWEAKS ─────────── */
@media (min-width: 640px) {
    body { font-size: 1.05rem; }
}