/* ============================================
   TPL_WEB Theme: TreborPlus — Indigo Pulse
   Robert Dúbravský osobná značka (živnosť TREBOR).
   Sister-theme k webportaly (Corporate Monolith) —
   rovnaký inštitucionálny strih, iná farebnosť:
   deep indigo + electric violet podľa loga.
   Brand voice: 18 rokov skúseností, bold contemporary,
   technological yet personal.
   ============================================ */

:root {
    /* Brand — indigo monolith + violet pulse */
    --color-primary: #1A0D7C;          /* Deep indigo, vonkajšie "C" z loga */
    --color-primary-hover: #2A1AA8;
    --color-primary-light: #EEEBFB;
    --color-primary-muted: rgba(26, 13, 124, 0.08);

    --color-accent: #7C5BE6;           /* Electric violet, šípka z loga */
    --color-accent-hover: #6543D6;
    --color-accent-muted: rgba(124, 91, 230, 0.12);

    /* Light surfaces — pristine, slight violet undertone */
    --color-body-bg: #FFFFFF;
    --color-surface: #FAFAFE;
    --color-surface-alt: #F4F1FF;
    --color-text: #0A0420;
    --color-text-muted: #6B6480;
    --color-heading: #0A0420;
    --color-border: #E5E0F5;
    --color-link: #1A0D7C;
    --color-link-hover: #7C5BE6;

    /* Semantic */
    --color-success: #10B981;
    --color-danger: #EF4444;
    --color-warning: #F59E0B;
    --color-info: #7C5BE6;

    /* Typography — Inter dominant, Space Grotesk option for display */
    --font-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono:    'JetBrains Mono', 'Fira Code', ui-monospace, SFMono-Regular, monospace;

    /* Cards — contemporary, sharper than webportaly */
    --card-radius: 0.5rem;
    --card-shadow: 0 1px 2px rgba(10, 4, 32, 0.04), 0 2px 4px rgba(26, 13, 124, 0.04);
    --card-shadow-hover: 0 8px 16px -4px rgba(26, 13, 124, 0.18), 0 16px 32px -8px rgba(124, 91, 230, 0.18);
    --card-image-ratio: 16 / 9;

    /* RSS module alignment */
    --wp-rss-primary: var(--color-primary);
}

/* Dark mode — deep night with violet glow */
[data-theme="dark"] {
    --color-primary: #9B85F5;
    --color-on-primary: #111111;   /* biela 2,97:1, čierna 6,35:1 */
    --color-primary-hover: #B8A8FA;
    --color-primary-light: #1A1138;
    --color-primary-muted: rgba(155, 133, 245, 0.16);

    --color-accent: #B8A8FA;
    --color-accent-hover: #D2C7FB;
    --color-accent-muted: rgba(184, 168, 250, 0.18);

    --color-body-bg: #0A0420;          /* Deep purple-black */
    --color-surface: #14082C;          /* Card surface */
    --color-surface-alt: #1F1238;
    --color-text: #F4F1FF;
    --color-text-muted: #A39CC4;
    --color-heading: #FFFFFF;
    --color-border: #2A1B4D;
    --color-link: #9B85F5;
    --color-link-hover: #B8A8FA;

    --color-success: #34D399;
    --color-danger: #F87171;

    --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(124, 91, 230, 0.12);
    --card-shadow-hover: 0 12px 24px -4px rgba(0, 0, 0, 0.55), 0 16px 40px -8px rgba(124, 91, 230, 0.32);
}

/* ============================================
   BODY — tighten letter-spacing, antialias
   ============================================ */
.theme-indigo {
    font-family: var(--font-body);
    letter-spacing: -0.005em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.theme-indigo h1,
.theme-indigo h2,
.theme-indigo h3,
.theme-indigo h4 {
    font-family: var(--font-heading);
    font-weight: 800;
    letter-spacing: -0.028em;
    color: var(--color-heading);
}

.theme-indigo h1 { font-size: clamp(2.25rem, 5vw, 3.75rem); line-height: 1.04; letter-spacing: -0.035em; }
.theme-indigo h2 { font-size: clamp(1.75rem, 3.2vw, 2.5rem); line-height: 1.14; letter-spacing: -0.025em; }
.theme-indigo h3 { font-size: 1.5rem; line-height: 1.28; letter-spacing: -0.018em; }
.theme-indigo h4 { font-size: 1.125rem; line-height: 1.4; letter-spacing: -0.012em; }

/* ============================================
   TOPBAR — deep indigo, always dark
   ============================================ */
.theme-indigo .es-topbar {
    background: #0A0420;
    color: #F4F1FF;
    border-bottom: 1px solid #1A1138;
    font-size: 0.8125rem;
    letter-spacing: 0.01em;
}

.theme-indigo .es-topbar a {
    color: #F4F1FF;
    opacity: 0.82;
    transition: opacity var(--transition-fast, 150ms ease), color var(--transition-fast, 150ms ease);
}

.theme-indigo .es-topbar a:hover {
    opacity: 1;
    color: var(--color-accent);
}

[data-theme="dark"].theme-indigo .es-topbar,
[data-theme="dark"] .theme-indigo .es-topbar {
    background: #050118;
    border-bottom-color: #1A1138;
}

/* ============================================
   HEADER — clean, indigo logo accent on hover
   ============================================ */
.theme-indigo .es-header {
    background: var(--color-body-bg);
    border-bottom: 1px solid var(--color-border);
}

.theme-indigo .es-header__site-name,
.theme-indigo .es-logo {
    font-family: var(--font-heading);
    font-weight: 800;
    letter-spacing: -0.028em;
    color: var(--color-heading);
}

/* ============================================
   NAVIGATION — pill hover, indigo active
   ============================================ */
.theme-indigo .es-nav a,
.theme-indigo .es-navbar a,
.theme-indigo nav.es-nav a {
    color: var(--color-text);
    font-weight: 500;
    letter-spacing: 0;
    padding: 0.5rem 0.875rem;
    border-radius: 0.5rem;
    transition: all var(--transition-fast, 150ms ease);
}

.theme-indigo .es-nav a:hover,
.theme-indigo .es-nav .active > a,
.theme-indigo .es-nav li.active > a,
.theme-indigo .es-nav li.current > a {
    color: var(--color-primary);
    background: var(--color-primary-muted);
}

[data-theme="dark"] .theme-indigo .es-nav a:hover,
[data-theme="dark"] .theme-indigo .es-nav .active > a {
    color: var(--color-primary);
    background: var(--color-primary-muted);
}

/* ============================================
   HERO — indigo→violet gradient with grid overlay
   Brutalne moderne: bold gradient, big type
   ============================================ */
.theme-indigo .es-hero,
.theme-indigo [class*="es-hero"] {
    background: linear-gradient(135deg, #0A0420 0%, #1A0D7C 45%, #4A2BA8 80%, #7C5BE6 100%);
    color: #F4F1FF;
    position: relative;
    overflow: hidden;
}

/* Tech grid overlay */
.theme-indigo .es-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, rgba(244, 241, 255, 0.04) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(244, 241, 255, 0.04) 1px, transparent 1px);
    background-size: 56px 56px;
    pointer-events: none;
    z-index: 0;
}

/* Violet glow accent — top-right */
.theme-indigo .es-hero::after {
    content: '';
    position: absolute;
    top: -20%;
    right: -10%;
    width: 60%;
    height: 140%;
    background: radial-gradient(ellipse at center, rgba(124, 91, 230, 0.32) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
}

.theme-indigo .es-hero > * {
    position: relative;
    z-index: 1;
}

.theme-indigo .es-hero h1,
.theme-indigo .es-hero h2 {
    color: #FFFFFF;
    font-weight: 800;
    letter-spacing: -0.04em;
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    line-height: 1.02;
}

.theme-indigo .es-hero p,
.theme-indigo .es-hero .lead {
    color: #D2C7FB;
    font-size: 1.125rem;
    line-height: 1.65;
    max-width: 50rem;
}

/* ============================================
   BUTTONS — indigo primary, violet accent CTA
   ============================================ */
.theme-indigo .btn-primary,
.theme-indigo .es-btn--primary {
    background: var(--color-primary);
    border: 1px solid var(--color-primary);
    color: #FFFFFF;
    font-weight: 600;
    letter-spacing: 0.005em;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    transition: all var(--transition-base, 200ms ease);
}

.theme-indigo .btn-primary:hover,
.theme-indigo .es-btn--primary:hover {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(26, 13, 124, 0.32);
}

.theme-indigo .btn-outline-primary,
.theme-indigo .es-btn--outline,
.theme-indigo .btn-secondary {
    border: 1px solid var(--color-border);
    background: transparent;
    color: var(--color-text);
    font-weight: 600;
    border-radius: 0.5rem;
}

.theme-indigo .btn-outline-primary:hover,
.theme-indigo .es-btn--outline:hover,
.theme-indigo .btn-secondary:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: var(--color-primary-muted);
}

/* Accent CTA — electric violet, the "pulse" button */
.theme-indigo .es-btn--accent {
    background: var(--color-accent);
    color: #FFFFFF;
    border: 1px solid var(--color-accent);
    border-radius: 0.5rem;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(124, 91, 230, 0.24);
}

.theme-indigo .es-btn--accent:hover {
    background: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
    color: #FFFFFF;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(124, 91, 230, 0.36);
}

/* ============================================
   MODULE CHROMES — wpmodule, wpcard, wpraw
   Violet underline accent on section titles
   ============================================ */
.theme-indigo .wpmodule > h2,
.theme-indigo .wpmodule > h3,
.theme-indigo .es-module-title {
    position: relative;
    padding-bottom: 0.75rem;
    margin-bottom: 1.75rem;
}

.theme-indigo .wpmodule > h2::after,
.theme-indigo .wpmodule > h3::after,
.theme-indigo .es-module-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 3rem;
    height: 3px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
    border-radius: 2px;
}

.theme-indigo .wpcard {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    transition: all var(--transition-base, 200ms ease);
}

.theme-indigo .wpcard:hover {
    box-shadow: var(--card-shadow-hover);
    transform: translateY(-2px);
    border-color: var(--color-accent);
}

/* ============================================
   STATS BLOCK — big numbers, indigo brutalism
   For homepage "Moje úspechy" (18 rokov / 500+ ...)
   Use .es-stats or .stat-number class on numbers
   ============================================ */
.theme-indigo .stat-number,
.theme-indigo .es-stat__number {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: clamp(2.5rem, 5vw, 4rem);
    letter-spacing: -0.04em;
    line-height: 1;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline-block;
}

.theme-indigo .stat-label,
.theme-indigo .es-stat__label {
    color: var(--color-text-muted);
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 500;
    margin-top: 0.5rem;
}

/* ============================================
   SHOWCASE sections — alternate violet-tinted band
   ============================================ */
.theme-indigo .es-showcase--2 {
    background: var(--color-surface-alt);
}

.theme-indigo .es-showcase--3 {
    background: linear-gradient(180deg, var(--color-surface) 0%, var(--color-surface-alt) 100%);
}

/* ============================================
   RSS / SHOWCASE — preserve monolith aesthetics
   ============================================ */
.theme-indigo .wp-rss {
    --wp-rss-primary: var(--color-primary);
}

.theme-indigo .wp-rss__card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--card-radius);
    overflow: hidden;
    transition: all var(--transition-base, 200ms ease);
}

.theme-indigo .wp-rss__card:hover {
    box-shadow: var(--card-shadow-hover);
    transform: translateY(-3px);
    border-color: var(--color-accent);
}

.theme-indigo .wp-rss__card-title a,
.theme-indigo .wp-rss__title a,
.theme-indigo .wp-rss__compact-title a {
    color: var(--color-heading);
    font-weight: 700;
    letter-spacing: -0.012em;
}

.theme-indigo .wp-rss__card-title a:hover,
.theme-indigo .wp-rss__title a:hover,
.theme-indigo .wp-rss__compact-title a:hover {
    color: var(--color-primary);
}

.theme-indigo .wp-rss__meta,
.theme-indigo .wp-rss__compact-date {
    color: var(--color-text-muted);
    font-size: 0.8125rem;
    letter-spacing: 0.005em;
}

.theme-indigo .wp-rss__section-title {
    font-weight: 800;
    letter-spacing: -0.018em;
    border-bottom: 2px solid var(--color-accent);
    padding-bottom: 0.5rem;
    display: inline-block;
    color: var(--color-heading);
}

.theme-indigo .wp-rss__placeholder {
    background: var(--color-surface-alt);
    color: var(--color-text-muted);
}

/* ============================================
   FORMS — violet focus ring
   ============================================ */
.theme-indigo input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]),
.theme-indigo select,
.theme-indigo textarea,
.theme-indigo .form-control,
.theme-indigo .form-select,
.theme-indigo .inputbox {
    background: var(--color-body-bg);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    border-radius: 0.5rem;
    padding: 0.625rem 0.875rem;
    transition: all var(--transition-fast, 150ms ease);
}

.theme-indigo input:focus,
.theme-indigo select:focus,
.theme-indigo textarea:focus,
.theme-indigo .form-control:focus,
.theme-indigo .form-select:focus {
    border-color: var(--color-accent);
    outline: none;
    box-shadow: 0 0 0 3px var(--color-accent-muted);
}

/* ============================================
   TAGS & PILLS — violet muted
   ============================================ */
.theme-indigo .tag,
.theme-indigo .es-tag,
.theme-indigo .label {
    background: var(--color-accent-muted);
    color: var(--color-primary);
    border: 1px solid transparent;
    padding: 0.25rem 0.625rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.theme-indigo .tag:hover,
.theme-indigo .es-tag:hover {
    background: var(--color-accent);
    color: #FFFFFF;
}

[data-theme="dark"] .theme-indigo .tag,
[data-theme="dark"] .theme-indigo .es-tag {
    color: var(--color-primary);
    background: var(--color-primary-muted);
}

/* ============================================
   BREADCRUMBS — quiet, neutral
   ============================================ */
.theme-indigo .breadcrumb,
.theme-indigo .es-breadcrumbs {
    background: transparent;
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.theme-indigo .breadcrumb a,
.theme-indigo .es-breadcrumbs a {
    color: var(--color-text-muted);
}

.theme-indigo .breadcrumb a:hover,
.theme-indigo .es-breadcrumbs a:hover {
    color: var(--color-accent);
}

/* ============================================
   TABLES — clean grid
   ============================================ */
.theme-indigo table,
.theme-indigo .table {
    border-color: var(--color-border);
}

.theme-indigo table thead th,
.theme-indigo .table thead th {
    background: var(--color-surface-alt);
    color: var(--color-heading);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 0.75rem;
    border-bottom: 2px solid var(--color-primary);
}

/* ============================================
   BOTTOM & FOOTER — deep indigo closing
   ============================================ */
.theme-indigo .es-bottom {
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    color: var(--color-text-muted);
}

.theme-indigo .es-bottom a {
    color: var(--color-text);
}

.theme-indigo .es-bottom a:hover {
    color: var(--color-accent);
}

.theme-indigo .es-bottom h2,
.theme-indigo .es-bottom h3,
.theme-indigo .es-bottom h4,
.theme-indigo .es-bottom h5 {
    color: var(--color-heading);
}

.theme-indigo .es-footer {
    background: #0A0420;
    color: #A39CC4;
    border-top: 1px solid #1A1138;
    padding: 3rem 0 1.5rem;
}

.theme-indigo .es-footer h2,
.theme-indigo .es-footer h3,
.theme-indigo .es-footer h4 {
    color: #F4F1FF;
    font-size: 1rem;
    letter-spacing: 0.005em;
    margin-bottom: 1rem;
    font-weight: 700;
}

.theme-indigo .es-footer h2::after,
.theme-indigo .es-footer h3::after,
.theme-indigo .es-footer h4::after {
    display: none;
}

.theme-indigo .es-footer a {
    color: #D2C7FB;
    transition: color var(--transition-fast, 150ms ease);
}

.theme-indigo .es-footer a:hover {
    color: var(--color-accent);
}

[data-theme="dark"].theme-indigo .es-bottom,
[data-theme="dark"] .theme-indigo .es-bottom {
    background: var(--color-surface);
    color: var(--color-text-muted);
}

[data-theme="dark"].theme-indigo .es-bottom a,
[data-theme="dark"] .theme-indigo .es-bottom a {
    color: var(--color-text);
}

[data-theme="dark"].theme-indigo .es-bottom a:hover,
[data-theme="dark"] .theme-indigo .es-bottom a:hover {
    color: var(--color-accent);
}

[data-theme="dark"].theme-indigo .es-footer,
[data-theme="dark"] .theme-indigo .es-footer {
    background: #050118;
    border-top-color: #1A1138;
}

/* ============================================
   BACK-TO-TOP — indigo dot, violet hover
   ============================================ */
.theme-indigo .es-back-to-top {
    background: var(--color-primary);
    color: #FFFFFF;
    border: 1px solid var(--color-primary);
}

.theme-indigo .es-back-to-top:hover {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #FFFFFF;
    box-shadow: 0 6px 16px rgba(124, 91, 230, 0.36);
}

/* ============================================
   SELECTION — brand signature
   ============================================ */
.theme-indigo ::selection {
    background: var(--color-accent);
    color: #FFFFFF;
}

/* ============================================
   BADGES / LABELS — indigo primary
   ============================================ */
.theme-indigo .badge-primary,
.theme-indigo .label-primary,
.theme-indigo .badge.bg-primary {
    background: var(--color-primary);
    color: #FFFFFF;
}

/* ============================================
   ARTICLE CONTENT — editorial rhythm, violet links
   ============================================ */
.theme-indigo .article-body p,
.theme-indigo .com-content-article__body p {
    line-height: 1.75;
    color: var(--color-text);
}

.theme-indigo .article-body a,
.theme-indigo .com-content-article__body a {
    color: var(--color-accent);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.15em;
}

.theme-indigo .article-body a:hover {
    color: var(--color-primary);
    text-decoration-thickness: 2px;
}

.theme-indigo blockquote {
    border-left: 3px solid var(--color-accent);
    background: var(--color-surface-alt);
    padding: 1.25rem 1.5rem;
    margin: 1.5rem 0;
    border-radius: 0 0.5rem 0.5rem 0;
    color: var(--color-text);
    font-size: 1.0625rem;
    line-height: 1.6;
}

/* ============================================
   PAGINATION — quiet numerals, indigo active
   ============================================ */
.theme-indigo .pagination a,
.theme-indigo .pagination span {
    color: var(--color-text);
    border: 1px solid var(--color-border);
    background: var(--color-body-bg);
    border-radius: 0.5rem;
}

.theme-indigo .pagination .active a,
.theme-indigo .pagination .active span,
.theme-indigo .pagination a:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #FFFFFF;
}

/* ============================================
   AGE GATE / OVERLAYS — match theme
   ============================================ */
.theme-indigo .es-age-gate__panel {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
}