/*
Theme Name:  Stailonga Blog v2
Theme URI:   https://blog.stailonga.com
Author:      Stailonga / Andre
Author URI:  https://stailonga.com
Description: Lightweight editorial travel blog theme for blog.stailonga.com. pSEO-optimised, zero bloat, LiteSpeed compatible.
Version:     1.0.0
License:     Private
Text Domain: stailonga-blog
*/

/* ============================================================
   DESIGN TOKENS — referenced by all templates
   ============================================================ */
:root {
    /* Brand */
    --teal:         #00C0AF;
    --teal-dark:    #009B8D;
    --teal-glow:    rgba(0, 192, 175, 0.15);

    /* Surfaces */
    --navy:         #0A1628;
    --slate:        #1A2E44;
    --warm-white:   #F8F7F4;
    --white:        #FFFFFF;
    --card-bg:      #FFFFFF;

    /* Typography */
    --text-primary:   #111827;
    --text-secondary: #374151;
    --text-muted:     #6B7280;
    --text-faint:     #9CA3AF;

    /* Borders */
    --border:       #E8E4DC;
    --border-light: #F3F0EB;

    /* Accent — sunset orange, used sparingly for trending/hot badges */
    --accent:       #FF6B35;

    /* Easing */
    --ease-out:     cubic-bezier(0.23, 1, 0.32, 1);
    --ease-in-out:  cubic-bezier(0.77, 0, 0.175, 1);

    /* Layout */
    --max-width:    1400px;
    --content-width: 800px;
    --sidebar-width: 300px;
    --radius-sm:    8px;
    --radius-md:    12px;
    --radius-lg:    16px;

    /* Font */
    --font: 'Nunito', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ============================================================
   GLOBAL RESET
   ============================================================ */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font);
    background: var(--warm-white);
    color: var(--text-primary);
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: var(--teal);
    text-decoration: none;
}

a:hover {
    color: var(--teal-dark);
}

p {
    line-height: 1.75;
    margin: 0 0 1rem;
}

/* ============================================================
   READING PROGRESS BAR (global, used on single + archive)
   ============================================================ */
.reading-progress-wrap {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: transparent;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.reading-progress-wrap.visible {
    opacity: 1;
}

.reading-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--teal), var(--accent));
    transition: width 0.1s linear;
}

/* ============================================================
   ACCESSIBILITY
   ============================================================ */
.screen-reader-text {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
}

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

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}