/* ==========================================================================
   Scroll Navigation System
   Section snap (gentle proximity), side dot indicator, top progress bar,
   keyboard hint. Adapted from jude-portfolio to the Chris Mingay brand.

   Strategy by screen:
   - Phones & tablet-portrait (<1024px): natural flowing layout (the original
     responsive design), no snap, no side dots/hint. Progress bar + smooth
     anchor scrolling stay.
   - Tablet-landscape, desktop & 4K (>=1024px): full-viewport panels, one
     section per screen, snap, side dots, keyboard hint.
   - Large/4K screens scale type, UI and content width up so nothing looks tiny.
   ========================================================================== */

html {
    scroll-behavior: smooth;
    scroll-padding-top: 6rem; /* clear the fixed nav (rem tracks its size on big screens) */
}

/* ==========================================================================
   Top progress bar (all screens)
   ========================================================================== */

.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    z-index: 120;
    background: rgba(26, 25, 21, 0.06);
    pointer-events: none;
}

.scroll-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--terracotta), var(--gold));
    box-shadow: 0 0 12px rgba(196, 120, 90, 0.4);
    transition: width 0.15s ease-out;
}

/* ==========================================================================
   Side dot indicator (shown >=1024px)
   ========================================================================== */

.scroll-indicator {
    position: fixed;
    right: 1.75rem;
    left: auto; /* guard against any global nav { left: 0 } leaking in */
    top: 50%;
    transform: translateY(-50%);
    z-index: 95;
    width: auto;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
    opacity: 0;
    animation: fadeInIndicator 0.8s ease 0.8s forwards;
}

@keyframes fadeInIndicator {
    to { opacity: 1; }
}

.scroll-indicator-dot {
    width: 10px;
    height: 10px;
    padding: 0;
    border-radius: 50%;
    background: rgba(26, 25, 21, 0.18);
    border: 1px solid rgba(26, 25, 21, 0.12);
    cursor: pointer;
    position: relative;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.scroll-indicator-dot:hover {
    background: var(--terracotta-light);
    transform: scale(1.2);
}

.scroll-indicator-dot.active {
    background: var(--terracotta);
    border-color: var(--terracotta);
    transform: scale(1.35);
    box-shadow: 0 0 16px rgba(196, 120, 90, 0.45);
}

/* Section label tooltip */
.scroll-indicator-dot::after {
    content: attr(data-label);
    position: absolute;
    right: 22px;
    top: 50%;
    transform: translateY(-50%) translateX(8px);
    white-space: nowrap;
    font-family: 'Crimson Pro', serif;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ink);
    background: var(--paper);
    padding: 0.35rem 0.7rem;
    border: 1px solid rgba(26, 25, 21, 0.1);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.scroll-indicator-dot:hover::after,
.scroll-indicator-dot.active::after {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

/* ==========================================================================
   Keyboard hint (shown >=1024px, motion-ok)
   ========================================================================== */

.scroll-hint {
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 95;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 1rem;
    background: rgba(247, 243, 237, 0.9);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(26, 25, 21, 0.08);
    border-radius: 2rem;
    box-shadow: var(--shadow-sm);
    opacity: 0;
    animation: fadeInHint 0.6s ease 1.8s forwards, pulseHint 3s ease-in-out 2.4s infinite;
}

@keyframes fadeInHint {
    to { opacity: 1; }
}

@keyframes pulseHint {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}

.scroll-hint.hidden {
    animation: none;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
}

.scroll-hint-keys {
    display: inline-flex;
    gap: 0.3rem;
}

.scroll-hint-key {
    min-width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.3rem;
    background: var(--paper);
    border: 1px solid rgba(26, 25, 21, 0.15);
    border-radius: 5px;
    box-shadow: 0 2px 0 rgba(26, 25, 21, 0.1);
    font-family: 'Crimson Pro', serif;
    font-size: 0.8rem;
    line-height: 1;
    color: var(--ink-light);
}

.scroll-hint-text {
    font-family: 'Caveat', cursive;
    font-size: 1rem;
    color: var(--ink-muted);
}

/* ==========================================================================
   Full-viewport panels + snap — tablet-landscape, desktop & up (>=1024px)
   Each section is at least a screen tall and vertically centres its content.
   Sections with more content than the viewport simply grow past it (centring
   becomes a no-op), so nothing is ever clipped.
   ========================================================================== */

@media (min-width: 1024px) {
    html {
        scroll-snap-type: y proximity;
    }

    main > section {
        scroll-snap-align: start;
        scroll-snap-stop: normal;
        min-height: 100vh;
        min-height: 100svh;
        box-sizing: border-box;
    }

    /* Block-level sections flex-centre their stacked content.
       Hero and About keep their own multi-column grid layouts. */
    main > section:not(.hero):not(.about) {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    main > section.about {
        align-content: center;
    }

    /* Trim generous vertical padding so content centres and fits; keep the top
       clear of the fixed nav. Horizontal padding stays from each section. */
    main > section:not(.hero) {
        padding-top: max(6vh, 6rem);
        padding-bottom: 6vh;
    }
}

/* Below 1024px: natural flow — hide the desktop-only chrome. */
@media (max-width: 1023px) {
    .scroll-indicator,
    .scroll-hint {
        display: none;
    }
}

/* ==========================================================================
   Large-screen scaling
   Body text is a fixed 18px and headings/spacing are rem-based, so on big and
   4K displays we scale the root (rem) and the body base together, and widen the
   card/grid wrappers to use the width (which also shortens those sections).
   Text-heavy wrappers stay at a readable width.
   ========================================================================== */

@media (min-width: 1920px) {
    html { font-size: 18px; }
    body { font-size: 20px; }
    .scroll-indicator { right: 2.25rem; gap: 1rem; }
    .scroll-indicator-dot { width: 12px; height: 12px; }

    main .testimonial-container { max-width: min(1600px, 90vw); }
    main .trust-content { max-width: min(1500px, 90vw); }
    main .service-featured { max-width: min(1700px, 92vw); }
    main .services-grid { max-width: min(1700px, 92vw); }
    main .insights-grid { max-width: min(1500px, 90vw); }
    main .languages { max-width: min(1500px, 90vw); }
    main .publications { max-width: min(1600px, 90vw); }
    main .education-content { max-width: min(1400px, 90vw); }
}

@media (min-width: 2560px) {
    html { font-size: 20px; }
    body { font-size: 23px; }
    .scroll-indicator { right: 3rem; gap: 1.2rem; }
    .scroll-indicator-dot { width: 14px; height: 14px; }
    .scroll-indicator-dot::after { font-size: 0.62rem; }

    main .testimonial-container { max-width: min(2200px, 88vw); }
    main .trust-content { max-width: min(2000px, 88vw); }
    main .service-featured { max-width: min(2200px, 90vw); }
    main .services-grid { max-width: min(2200px, 90vw); }
    main .insights-grid { max-width: min(2000px, 88vw); }
    main .languages { max-width: min(2000px, 88vw); }
    main .publications { max-width: min(2100px, 88vw); }
    main .education-content { max-width: min(1700px, 88vw); }
}

@media (min-width: 3840px) {
    html { font-size: 26px; }
    body { font-size: 30px; }
    .scroll-indicator { right: 4rem; gap: 1.5rem; }
    .scroll-indicator-dot { width: 18px; height: 18px; }

    main .testimonial-container { max-width: min(3000px, 82vw); }
    main .trust-content { max-width: min(2600px, 82vw); }
    main .service-featured { max-width: min(2900px, 84vw); }
    main .services-grid { max-width: min(2900px, 84vw); }
    main .insights-grid { max-width: min(2600px, 82vw); }
    main .languages { max-width: min(2600px, 82vw); }
    main .publications { max-width: min(2700px, 82vw); }
    main .education-content { max-width: min(2200px, 82vw); }
}

/* ==========================================================================
   Accessibility / short screens
   ========================================================================== */

@media (max-height: 700px) and (min-width: 1024px) {
    html { scroll-snap-type: none; }
    main > section {
        min-height: auto;
    }
    .scroll-hint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
        scroll-snap-type: none;
    }
    .scroll-hint { display: none; }
    .scroll-progress-bar { transition: none; }
}