/*
 * PC Ekspert theme — base stylesheet.
 * theme.json provides light-mode color tokens; this file overrides them
 * to the dark palette when the user's OS reports prefers-color-scheme: dark.
 */

@media (prefers-color-scheme: dark) {
  :root {
    --wp--preset--color--background: #0E1419;
    --wp--preset--color--surface: #1A222B;
    --wp--preset--color--foreground: #E8ECEF;
    --wp--preset--color--foreground-muted: #8B95A1;
    --wp--preset--color--border: #2A323B;
    --wp--preset--color--primary: #2E7BC7;
  }
}

/* ---- Site header ---------------------------------------------------- */
.site-header {
    /* Diagonal gradient: primary → slightly deeper variant.
     * Hard #-hex stops because the dark-mode CSS-variable swap doesn't
     * cleanly express both ends of a gradient yet; the dark-mode rule
     * below restates the whole thing. */
    background: linear-gradient(135deg, #185FA5 0%, #0E4378 100%);
    color: #fff;
    padding-block: 0.5rem;
    padding-inline: clamp(1rem, 4vw, 2rem);
    /* Hairline highlight at top + soft shadow below = depth without weight */
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 8px 24px -8px rgba(0, 0, 0, 0.25);
    position: relative;
    z-index: 2;
}
@media (prefers-color-scheme: dark) {
    .site-header {
        background: linear-gradient(135deg, #1A4E85 0%, #0A3460 100%);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.06),
            0 8px 24px -8px rgba(0, 0, 0, 0.5);
    }
}
.site-header a { color: inherit; text-decoration: none; }
.site-header__inner { align-items: center; gap: 1.5rem; }
.site-header__logo { margin: 0; }
.site-header__logo img { height: 28px; width: auto; display: block; }

/* Navigation pills */
.site-header__nav .wp-block-navigation-item__content {
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    transition: background-color 0.15s ease;
    color: #fff;
}
.site-header__nav .wp-block-navigation-item__content:hover,
.site-header__nav .current-menu-item > .wp-block-navigation-item__content {
    background: rgba(0,0,0,0.25);
}

/* ---- Site footer ---------------------------------------------------- */
.site-footer {
    padding-block: 2rem;
    margin-block-start: 3rem;
    border-block-start: 1px solid var(--wp--preset--color--border);
}
.site-footer__copy { color: var(--wp--preset--color--foreground-muted); font-size: 0.875rem; }

/* ---- Front page grid ------------------------------------------------ */
.site-main { padding-block: 1.5rem; }

.front-grid {
    gap: 1.5rem;
    align-items: flex-start;
}
.front-main    { flex: 1 1 600px; min-width: 0; }
.front-sidebar { flex: 0 1 320px; min-width: 0; }
@media (max-width: 800px) {
    .front-sidebar { flex: 1 1 100%; }
}

/* Card base */
.hero-card, .article-card, .sidebar-card {
    background: var(--wp--preset--color--surface);
    border: 1px solid var(--wp--preset--color--border);
    border-radius: 10px;
    overflow: hidden;
}

/* Hero card */
.hero-card { margin-block-end: 1.5rem; }
.hero-card__link { display: block; color: inherit; text-decoration: none; }
.hero-card__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.hero-card__image { width: 100%; height: 100%; object-fit: cover; display: block; }
.is-placeholder { background: linear-gradient(135deg, #2a323b, #3a4452); }
.hero-card__badge {
    position: absolute;
    bottom: 0.75rem;
    left: 0.75rem;
    background: var(--wp--preset--color--primary);
    color: #fff;
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    font-size: 0.8125rem;
    font-weight: 500;
}
.hero-card__body { padding: 1rem 1.25rem 1.25rem; }
.hero-card__meta {
    color: var(--wp--preset--color--foreground-muted);
    font-size: 0.875rem;
    margin-block-end: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.hero-card__sep { opacity: 0.5; }
.hero-card__tag {
    background: var(--wp--preset--color--primary);
    color: #fff;
    padding: 0.1rem 0.5rem;
    border-radius: 4px;
    font-size: 0.8125rem;
}
.hero-card__title { font-size: 1.5rem; margin: 0 0 0.5rem; line-height: 1.25; }
.hero-card__excerpt {
    color: var(--wp--preset--color--foreground-muted);
    margin: 0;
    line-height: 1.5;
}

/* Grid heading */
.grid-heading {
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-block: 1.5rem 1rem;
    color: var(--wp--preset--color--foreground-muted);
}

/* Article cards (2-col) */
.article-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}
@media (max-width: 500px) { .article-grid { grid-template-columns: 1fr; } }

.article-card__link { display: block; color: inherit; text-decoration: none; }
.article-card__media { aspect-ratio: 16 / 9; overflow: hidden; }
.article-card__image { width: 100%; height: 100%; object-fit: cover; display: block; }
.article-card__body { padding: 0.75rem 1rem 1rem; }
.article-card__date {
    display: block;
    color: var(--wp--preset--color--foreground-muted);
    font-size: 0.8125rem;
    margin-block-end: 0.25rem;
}
.article-card__title { font-size: 1rem; margin: 0; line-height: 1.35; }

/* Sidebar cards */
.sidebar-card { padding: 1rem 1.25rem; margin-block-end: 1rem; }
.sidebar-card__heading {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--wp--preset--color--foreground-muted);
    margin: 0 0 0.75rem;
    text-transform: uppercase;
}
.sidebar-card__list { list-style: none; padding: 0; margin: 0; }
.sidebar-card__item {
    border-bottom: 1px solid var(--wp--preset--color--border);
    padding-block: 0.6rem;
}
.sidebar-card__item:last-child { border-bottom: none; }
.sidebar-card__link {
    color: inherit;
    text-decoration: none;
    display: block;
}
.sidebar-card__title { display: block; line-height: 1.3; }
.sidebar-card__date {
    display: block;
    font-size: 0.8125rem;
    color: var(--wp--preset--color--foreground-muted);
    margin-top: 0.15rem;
}
.sidebar-card__link:hover .sidebar-card__title { color: var(--wp--preset--color--primary); }

/* Forum list */
.sidebar-card__forum-list { list-style: none; padding: 0; margin: 0; }
.sidebar-card__forum-list li { padding-block: 0.4rem; }
.sidebar-card__forum-list li::before { content: "💬"; margin-right: 0.4rem; opacity: 0.6; }
.sidebar-card__forum-list a { color: inherit; text-decoration: none; }
.sidebar-card__forum-list a:hover { color: var(--wp--preset--color--primary); }

/* Ad placeholder */
.sidebar-card--ad {
    text-align: center;
    min-height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-style: dashed;
}
.sidebar-card__ad-label {
    font-size: 0.75rem;
    color: var(--wp--preset--color--foreground-muted);
    letter-spacing: 0.15em;
    margin: 0 0 1rem;
}

/* ---- Side-rail ads (desktop only) ----------------------------------- */
/*
 * Threshold derivation:
 *   content wideSize (1320) + 2 * rail (240) + 2 * gap (20) = 1840px
 *   below 1840px viewport: rails hide, content centers as normal
 */
.page-rail {
    position: fixed;
    top: 80px;
    width: 240px;
    height: 600px;
    background: var(--wp--preset--color--surface);
    border: 1px dashed var(--wp--preset--color--border);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    z-index: 1;
}
/* Rails hug content edge with a 20px gap.
 * 680px = half of wideSize (660) + gap (20).
 * The right edge of the left rail sits 680px left of viewport center;
 * with a 240px width, its left edge is 920px left of viewport center,
 * so the rails appear/disappear in lockstep with the content frame. */
.page-rail--left  { right: calc(50% + 680px); }
.page-rail--right { left:  calc(50% + 680px); }

.page-rail__label {
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    color: var(--wp--preset--color--foreground-muted);
    margin: 0 0 0.5rem;
}
.page-rail__slot {
    color: var(--wp--preset--color--foreground-muted);
    font-size: 0.875rem;
}

@media (max-width: 1879px) {
    .page-rail { display: none; }
}

/* ---- Mobile navigation overlay -------------------------------------- */
/* When the hamburger opens the full-screen overlay, override WP defaults:
 *  - background follows our theme (instead of white)
 *  - items stack centered (the desktop "justifyContent:right" leaks in)
 *  - text uses our foreground color
 * Using !important is the pragmatic call — WP applies inline styles that
 * would otherwise win the cascade. */
.wp-block-navigation__responsive-container.is-menu-open {
    /* Light mode default; dark mode override below.
     * Backdrop blur gives a frosted-glass effect over the page beneath. */
    background-color: rgba(250, 251, 252, 0.88) !important;
    color: var(--wp--preset--color--foreground) !important;
    padding: 4rem 1.5rem 2rem;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
@media (prefers-color-scheme: dark) {
    .wp-block-navigation__responsive-container.is-menu-open {
        background-color: rgba(14, 20, 25, 0.85) !important;
    }
}
.wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-container-content {
    align-items: center;
    justify-content: flex-start;
}
.wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__container {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
}
.wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item__content {
    color: var(--wp--preset--color--foreground) !important;
    font-size: 1.5rem;
    padding: 0.6rem 1rem;
    border-radius: 6px;
    background: transparent !important;
}
.wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item__content:hover {
    background: var(--wp--preset--color--surface) !important;
}

/* Hamburger trigger: white on the blue header */
.site-header .wp-block-navigation__responsive-container-open {
    color: #fff;
}
/* Close X inside the overlay: theme foreground */
.wp-block-navigation__responsive-container-close {
    color: var(--wp--preset--color--foreground) !important;
}