/**
 * archive-shared.css
 * ──────────────────
 * Shared styles for ALL archive templates (sk_destination, sk_ai_article, …).
 * Light-mode uses html.sk-light — synced with the global header toggle.
 * Each archive has its own archive-{slug}.css for page-specific overrides.
 *
 * Sections:
 *  1. Google Fonts import
 *  2. Shared design tokens (dark default + html.sk-light override)
 *  3. Sidebar component (works in every archive)
 *  4. Newsletter widget (inline in sidebar)
 *  5. Pagination (shared pattern)
 *  6. Utility / accessibility
 */

/* ═══════════════════════════════════════════════════════════
   1. FONTS
═══════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700;800&family=DM+Sans:wght@400;500;600;700&display=swap');


/* ═══════════════════════════════════════════════════════════
   2. SHARED DESIGN TOKENS
   Scoped to .sk-archive-wrap so archives don't bleed into
   the global theme (header/footer have their own tokens).
═══════════════════════════════════════════════════════════ */

/* ── Dark (default) ── */
.sk-archive-wrap {
    /* Layout */
    --sk-max:    1200px;
    --sk-radius: 16px;
    --sk-font-h: 'Sora', 'DM Sans', sans-serif;
    --sk-font-b: 'DM Sans', sans-serif;

    /* Surfaces */
    --sk-bg:      #07080f;
    --sk-bg2:     #0e1018;
    --sk-bg3:     #141622;
    --sk-bg-card: #0e1018;

    /* Borders */
    --sk-border:  rgba(255,255,255,0.07);
    --sk-border2: rgba(255,255,255,0.13);

    /* Text */
    --sk-text:    #eceef5;
    --sk-text2:   rgba(236,238,245,0.72);
    --sk-muted:   rgba(255,255,255,0.42);

    /* Accents — each archive can override these */
    --sk-gold:    #f59e0b;
    --sk-gold-dk: #d97706;
    --sk-terra:   #ea580c;
    --sk-accent:  #f59e0b;   /* default = gold; guides overrides to #00c8ff */

    /* UI chrome */
    --sk-chip-bg:     rgba(255,255,255,0.05);
    --sk-chip-border: rgba(255,255,255,0.08);
    --sk-input-bg:    rgba(255,255,255,0.05);
    --sk-card-shadow: 0 16px 40px rgba(0,0,0,.45), 0 0 0 1px rgba(245,158,11,.1);
}

/* ── Light mode override (html.sk-light = header toggle) ── */
html.sk-light .sk-archive-wrap {
    --sk-bg:      #faf8f4;
    --sk-bg2:     #ffffff;
    --sk-bg3:     #f3efe8;
    --sk-bg-card: #ffffff;

    --sk-border:  rgba(0,0,0,0.09);
    --sk-border2: rgba(0,0,0,0.16);

    --sk-text:    #1a1612;
    --sk-text2:   #3d3628;
    --sk-muted:   #6b6052;

    --sk-gold:    #b45309;
    --sk-gold-dk: #92400e;
    --sk-terra:   #c2410c;
    --sk-accent:  #b45309;

    --sk-chip-bg:     rgba(0,0,0,0.04);
    --sk-chip-border: rgba(0,0,0,0.10);
    --sk-input-bg:    rgba(0,0,0,0.03);
    --sk-card-shadow: 0 12px 32px rgba(0,0,0,.10), 0 0 0 1px rgba(180,83,9,.18);
}

/* Base wrap */
.sk-archive-wrap {
    background: var(--sk-bg);
    color: var(--sk-text);
    font-family: var(--sk-font-b);
    min-height: 100vh;
    transition: background .25s, color .25s;
}


/* ═══════════════════════════════════════════════════════════
   3. SIDEBAR COMPONENT
   Used by all archives. Individual archive CSS can add
   --modifier classes for archive-specific accent colours.
═══════════════════════════════════════════════════════════ */

.sk-archive-sidebar-sticky {
    position: sticky;
    top: 75px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ── Affiliate CTA card ── */
.sk-sb-cta {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--sk-bg2);
    border: 1px solid var(--sk-border);
    border-radius: var(--sk-radius);
    padding: 14px 16px;
    text-decoration: none;
    color: inherit;
    transition: border-color .2s, transform .15s;
}
.sk-sb-cta:hover { transform: translateX(3px); }

/* Hover accent variants — add to .sk-sb-cta */
.sk-sb-cta--hotel:hover  { border-color: rgba(99,102,241,.35); }
.sk-sb-cta--klook:hover  { border-color: rgba(245,158,11,.35); }
.sk-sb-cta--flight:hover { border-color: rgba(52,211,153,.35); }
.sk-sb-cta--esim:hover   { border-color: rgba(56,189,248,.35); }
.sk-sb-cta--guides:hover { border-color: rgba(0,200,255,.35);  }

.sk-sb-cta-icon  { font-size: 22px; flex-shrink: 0; }
.sk-sb-cta-text  { flex: 1; min-width: 0; }
.sk-sb-cta-text strong {
    display: block;
    font-size: 13px; font-weight: 700;
    color: var(--sk-text);
    margin-bottom: 2px;
}
.sk-sb-cta-text span { font-size: 11px; color: var(--sk-muted); }
.sk-sb-cta-arrow { font-size: 14px; font-weight: 700; color: var(--sk-accent); flex-shrink: 0; }

/* ── Generic widget box ── */
.sk-sb-box {
    background: var(--sk-bg2);
    border: 1px solid var(--sk-border);
    border-radius: var(--sk-radius);
    padding: 16px;
}
.sk-sb-box-head {
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .8px;
    color: var(--sk-muted);
    margin-bottom: 12px;
}

/* ── City / topic list ── */
.sk-sb-list { list-style: none; margin: 0; padding: 0; }
.sk-sb-list-item { border-bottom: 1px solid var(--sk-border); }
.sk-sb-list-item:last-child { border-bottom: none; }
.sk-sb-list-item a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 9px 0;
    text-decoration: none;
    transition: color .15s;
}
.sk-sb-list-item a:hover .sk-sb-list-name { color: var(--sk-accent); }
.sk-sb-list-name {
    font-size: 13px; font-weight: 600;
    color: var(--sk-text);
    display: flex; flex-direction: column; gap: 1px;
}
.sk-sb-list-sub { font-size: 11px; color: var(--sk-muted); font-weight: 400; }
.sk-sb-list-count {
    font-size: 10px; font-weight: 700;
    background: var(--sk-chip-bg);
    border-radius: 100px;
    padding: 1px 7px;
    color: var(--sk-muted);
}

/* ── Currency converter widget (guides archive) ── */
.sk-sb-curr-row {
    display: flex; align-items: center; gap: 8px;
    background: var(--sk-chip-bg);
    border: 1px solid var(--sk-border);
    border-radius: 8px; padding: 8px 12px; margin-bottom: 10px;
}
.sk-sb-curr-row span { color: var(--sk-muted); font-weight: 700; }
.sk-sb-curr-input {
    background: transparent; border: none; outline: none;
    color: var(--sk-text); font-size: 15px; font-weight: 700;
    font-family: var(--sk-font-b); width: 100%;
}
.sk-sb-curr-results { display: flex; flex-direction: column; gap: 5px; }
.sk-sb-curr-item {
    display: flex; justify-content: space-between;
    font-size: 12px; color: var(--sk-muted);
    padding: 4px 0; border-bottom: 1px solid var(--sk-chip-bg);
}
.sk-sb-curr-item strong { color: var(--sk-text); }


/* ═══════════════════════════════════════════════════════════
   4. NEWSLETTER WIDGET (inside sidebar box)
═══════════════════════════════════════════════════════════ */

.sk-sb-box--nl {
    background: linear-gradient(135deg, rgba(245,158,11,.07), rgba(234,88,12,.04));
}
html.sk-light .sk-sb-box--nl {
    background: linear-gradient(135deg, rgba(245,158,11,.08), rgba(234,88,12,.05));
}

.sk-sb-nl-text {
    font-size: 12px; color: var(--sk-muted);
    line-height: 1.5; margin: 0 0 10px;
}
.sk-sb-nl-input {
    width: 100%; box-sizing: border-box;
    background: var(--sk-input-bg);
    border: 1px solid var(--sk-border);
    border-radius: 8px;
    padding: 9px 12px;
    color: var(--sk-text); font-size: 13px;
    font-family: var(--sk-font-b);
    margin-bottom: 7px; outline: none;
}
.sk-sb-nl-input::placeholder { color: var(--sk-muted); }
.sk-sb-nl-input:focus { border-color: rgba(245,158,11,.4); }

.sk-sb-nl-btn {
    width: 100%;
    background: linear-gradient(110deg, var(--sk-gold), var(--sk-terra));
    color: #fff;
    border: none; border-radius: 8px;
    padding: 10px; font-size: 13px; font-weight: 700;
    cursor: pointer; font-family: var(--sk-font-h);
    transition: opacity .15s;
}
/* Dark mode: dark text on bright button */
.sk-archive-wrap .sk-sb-nl-btn { color: #07080f; }
html.sk-light .sk-archive-wrap .sk-sb-nl-btn { color: #fff; }
.sk-sb-nl-btn:hover { opacity: .88; }

/* Success / error state */
.sk-sb-nl-msg {
    font-size: 12px; text-align: center;
    padding: 6px 0; border-radius: 6px;
    display: none;
}
.sk-sb-nl-msg.is-ok    { color: #4ade80; }
.sk-sb-nl-msg.is-error { color: #f87171; }


/* ═══════════════════════════════════════════════════════════
   5. PAGINATION (shared pattern, archive-specific colour via var)
═══════════════════════════════════════════════════════════ */

.sk-archive-pagination {
    display: flex; gap: 8px; justify-content: center;
    flex-wrap: wrap; margin-top: 36px;
}
.sk-archive-pagination .page-item a,
.sk-archive-pagination .page-item span {
    display: inline-block;
    padding: 8px 14px; border-radius: 10px;
    font-size: 13px; font-weight: 600; text-decoration: none;
    background: var(--sk-bg2);
    border: 1px solid var(--sk-border);
    color: var(--sk-muted);
    transition: all .15s;
}
.sk-archive-pagination .page-item .current,
.sk-archive-pagination .page-item a:hover {
    background: rgba(245,158,11,0.1);
    border-color: rgba(245,158,11,0.35);
    color: var(--sk-gold);
}
/* Guides accent (cyan) — add .sk-archive-pagination--cyan on the nav */
.sk-archive-pagination--cyan .page-item .current,
.sk-archive-pagination--cyan .page-item a:hover {
    background: rgba(0,200,255,0.1);
    border-color: rgba(0,200,255,0.3);
    color: #00c8ff;
}


/* ═══════════════════════════════════════════════════════════
   6. UTILITY
═══════════════════════════════════════════════════════════ */

/* Skip-to-content */
.sk-skip-link {
    position: absolute; left: -9999px; top: auto;
    width: 1px; height: 1px; overflow: hidden;
}
.sk-skip-link:focus {
    left: 24px; top: 24px; width: auto; height: auto;
    background: var(--sk-gold); color: #07080f;
    padding: 8px 16px; border-radius: 8px;
    font-weight: 700; z-index: 9999;
}

/* Empty state (shared) */
.sk-archive-empty {
    text-align: center; padding: 80px 24px;
    color: var(--sk-muted);
}
.sk-archive-empty span { font-size: 56px; display: block; margin-bottom: 16px; }