/*
 * Modern theme — EurOMo-inspired (https://media-ownership.eu/).
 *
 * Every rule is scoped to `body.theme-modern` so loading this file has zero
 * effect on the classic theme. To revert, just switch THEME back to 'classic'
 * in .env (or load the page without ?theme=modern) — this file stays put.
 *
 * Current pass covers:
 *   1. Typography (Inter body, Source Serif headings, larger sizes)
 *   2. Page background + wrapper as elevated card
 *   3. Top nav: white, slim, dark ink, violet accents
 *
 * Next passes will add: hero block, stats tiles, redesigned list rows,
 * detail-page article layout.
 */

/* ---------------------------------------------------------------- 1. Typography */

body.theme-modern {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    font-size: 17px;
    line-height: 1.6;
    color: #1a1a2e;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.theme-modern h1,
body.theme-modern h2,
body.theme-modern h3,
body.theme-modern .title {
    font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: #1a1a2e;
}

body.theme-modern h1 { font-size: 2.25rem; margin-bottom: 0.75em; }
body.theme-modern h2 { font-size: 1.75rem; margin-bottom: 0.6em; }
body.theme-modern h3 { font-size: 1.35rem; margin-bottom: 0.5em; }

body.theme-modern p,
body.theme-modern li {
    font-size: 17px;
    line-height: 1.65;
}

/* Slogan: serif, larger, generous breathing room */
body.theme-modern .slogan {
    font-family: 'Source Serif 4', Georgia, serif !important;
    font-size: 28px !important;
    font-weight: 600;
    line-height: 1.3;
    color: #1a1a2e !important;
    margin-top: 32px !important;
    margin-bottom: 0 !important;            /* zero — stats sit right under it */
    text-align: center;
}
@media screen and (max-width: 800px) {
    body.theme-modern .slogan {
        font-size: 22px !important;
        margin-top: 20px !important;
    }
}


/* ---------------------------------------------------------------- 2. Page wrapper */

body.theme-modern {
    background: #f4f5f8;  /* very light grey-blue, like EurOMo */
}

body.theme-modern .page-wrapper {
    max-width: 1140px;            /* slightly wider than current 1000px to match EurOMo */
    background: #ffffff;
    box-shadow: 0 2px 24px rgba(20, 30, 60, 0.06);
    border-radius: 0;             /* clean edge-to-edge on the white card */
    padding-bottom: 60px;
}
@media screen and (max-width: 800px) {
    body.theme-modern .page-wrapper {
        max-width: 100%;
        box-shadow: none;
    }
}

/* Main content padding. Zero top so the home-page stats sit immediately
   under the slogan; sides and bottom keep the modern padding. */
body.theme-modern .container-fluid {
    padding: 0 40px 32px 40px !important;
}
@media screen and (max-width: 800px) {
    body.theme-modern .container-fluid {
        padding: 0 24px 20px 24px !important;     /* extra horiz padding so leftmost stat isn't at the screen edge */
    }
}


/* ---------------------------------------------------------------- 3. Top nav
 * Modern theme keeps the classic theme's full-color violet menu bar with
 * white logo + white menu text. (Earlier draft tried a slim white bar but
 * was rolled back per user feedback.)
 *
 * The brand caption font and weight stay from classic (Inter, bold) so the
 * menu visually matches the new typography elsewhere on the page.
 */
body.theme-modern .mstopnav .logo-caption {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    letter-spacing: 0.04em;
}


/* ---------------------------------------------------------------- Link defaults */

/* Content links get violet + underline-on-hover. The :not([class]) guard
   excludes anchors with their own class (tag pills .tag_red/.tag_mag/.tag_*
   keep their tags.css white-on-color text). */
body.theme-modern a:not([class]) {
    color: #6600cc;
    text-decoration: none;
}
body.theme-modern a:not([class]):hover {
    color: #4d0099;
    text-decoration: underline;
    text-underline-offset: 3px;
}


/* ---------------------------------------------------------------- Buttons */

body.theme-modern .btn-primary:not(.msmenu-item):not(.mstopnav *) {
    background-color: #6600cc !important;
    border-color: #6600cc !important;
    border-radius: 999px !important;     /* pill */
    padding: 10px 22px !important;
    font-weight: 600 !important;
    font-size: 15px;
    letter-spacing: 0.01em;
    transition: background-color 0.15s ease, transform 0.05s ease;
}
body.theme-modern .btn-primary:not(.msmenu-item):hover {
    background-color: #4d0099 !important;
    border-color: #4d0099 !important;
}
body.theme-modern .btn-primary:not(.msmenu-item):active {
    transform: translateY(1px);
}


/* ---------------------------------------------------------------- Big stats
 * EurOMo "in numbers" style: three huge serif numbers with small labels.
 * The numbers animate from 0 to their target on page load via JS in the
 * _home_stats_modern.blade.php partial.
 */

body.theme-modern .big-stats {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    gap: 40px;
    margin: 0 !important;
    padding: 0 !important;
    flex-wrap: wrap;
}

body.theme-modern .big-stat {
    flex: 1 1 0;
    min-width: 200px;
    text-align: center;
    text-decoration: none !important;
    color: #1a1a2e !important;
    /* Flex column with centered cross-axis: keeps number + label content
       boxes horizontally centered as a stack, regardless of their widths. */
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 8px;
    border-radius: 12px;
    transition: background-color 0.15s ease, transform 0.05s ease;
}

/* The 1st stat (total sites) shows the largest number — in English it's
   "1,262" with a thousands-separator comma, which makes it visually wider
   than the others and the 1→2 gap feels cramped vs 2→3. On mobile/narrow
   viewports where the stats end up in a 2×2 grid, push the 2nd stat right
   so the row balances; when fully stacked (1 per row), the left margin
   has no visible effect. */
@media screen and (max-width: 800px) {
    body.theme-modern .big-stats {
        gap: 24px;
    }
    /* Wider 1→2 and 2→3 gaps via per-child left margins. With flex:1 1 0
       slots remain equal; the margins just push the boundaries. */
    body.theme-modern .big-stats .big-stat:nth-child(2) {
        margin-left: 40px;
    }
    body.theme-modern .big-stats .big-stat:nth-child(3) {
        margin-left: 28px;
    }
}
body.theme-modern .big-stat:hover {
    background-color: #f0e6ff;   /* matches the striped odd-row background */
    text-decoration: none !important;
}
body.theme-modern .big-stat:active {
    transform: translateY(1px);
}

body.theme-modern .big-stat-number {
    display: block;
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 4rem;          /* ~64px on desktop */
    font-weight: 700;
    line-height: 1;
    color: #6600cc;           /* violet primary, back to original */
    /* letter-spacing removed — caused a slight left-shift of the visible
       digits relative to the centered bounding box, making the label
       "сайта" appear off-center under "1,262". */
    font-variant-numeric: tabular-nums;   /* numbers don't shift while animating */
    margin-bottom: 8px;
}

body.theme-modern .big-stat-label {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 17px;          /* matches body text size */
    font-weight: 500;
    color: #1a1a2e;           /* same as body text */
    text-transform: lowercase;
    line-height: 1.3;
}

body.theme-modern .big-stat-pct {
    color: #000;
    font-weight: 400;
}

/* 4th item on the same row: "all categories" link. Same flex slot as the
   number cells; instead of a number it shows a big arrow. */
body.theme-modern .big-stat-arrow {
    display: block;
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 4rem;          /* same size as .big-stat-number */
    font-weight: 700;
    line-height: 1;
    color: #6600cc;
    margin-bottom: 8px;
}

@media screen and (max-width: 800px) {
    body.theme-modern .big-stats {
        gap: 20px;
        margin: 16px 0 8px 0;
        padding: 16px 0;
    }
    body.theme-modern .big-stat {
        min-width: 0;
    }
    /* On mobile the cell is narrower than the number digits which overflow
       sideways. The cell-only background therefore looked clipped on hover.
       A wide box-shadow with the hover color extends the visible "card"
       outward to cover the overflowing number, without changing layout. */
    body.theme-modern .big-stat:hover {
        box-shadow: 0 0 0 18px #f0e6ff;
    }
    body.theme-modern .big-stat-number,
    body.theme-modern .big-stat-arrow {
        font-size: 2.5rem;     /* ~40px on mobile, still bold */
    }
    body.theme-modern .big-stat-label {
        font-size: 15px;       /* slightly smaller on mobile to match body */
    }
}



/* ---------------------------------------------------------------- Search header
 * In classic markup the search form (and the "starting-with" dropdown) are
 * inside a 50%-wide centered container, with both pinned float:left to its
 * left edge. Result: visually offset to the left of true page center.
 *
 * In modern theme, stretch the container to full content width and center
 * its inline-flow contents so the form + dropdown sit centered relative to
 * the site list table below.
 */
body.theme-modern .search-header-inner {
    width: 100% !important;
    text-align: center;
}
body.theme-modern .search-header-inner > div {
    float: none !important;
    display: inline-block !important;
    vertical-align: middle;
}


/* ---------------------------------------------------------------- Search bar
 * The site-search input and its submit button sit in adjacent <span>s with
 * no separator. Add a left margin on the submit (and its wrapping span)
 * so they don't touch when the viewport gets narrow.
 *
 * Also: in the classic-layout HTML the search form is wrapped in
 * `<div style="display:inline; float:left;">` which pins it to the left of
 * the 50%-wide outer container. In the modern theme we want it centered
 * within that container instead.
 *
 * !important needed because normalize.css sets `margin: 0` on all <input>.
 */

/* Desktop: button sits beside the input — small horizontal gap, no top offset. */
body.theme-modern #search_site input[type="submit"],
body.theme-modern #search_site input[type="submit"].btn-primary {
    margin-left: 10px !important;
    margin-top: 0 !important;
}
/* Mobile: button wraps below the input — drop the horizontal gap, add a
   vertical one so the two don't touch. */
@media screen and (max-width: 800px) {
    body.theme-modern #search_site input[type="submit"],
    body.theme-modern #search_site input[type="submit"].btn-primary {
        margin-left: 0 !important;
        margin-top: 12px !important;
    }
}



/* ---------------------------------------------------------------- Footer
 * Stretch the footer to the same width as the rest of the page content.
 * The blade template sets an inline width:75%; we override with !important.
 * Padding mirrors the main content area for visual alignment.
 */
body.theme-modern .site-footer {
    width: auto !important;
    margin: 24px 40px 0 40px !important;
    max-width: none !important;
    border-top: 1px solid #e6e8ee;
    padding-top: 24px;
    font-size: 14px;
    color: #4a5066;
    line-height: 1.55;
}
@media screen and (max-width: 800px) {
    body.theme-modern .site-footer {
        margin: 16px 16px 0 16px !important;
    }
}


/* ---------------------------------------------------------------- Home teasers
 * EurOMo-style: side-by-side teaser cards with big headlines and a
 * "Discover more" link instead of full content.
 */

body.theme-modern .home-teasers {
    margin-top: 80px;
    padding-top: 60px;
    border-top: 1px solid #e6e8ee;
}

body.theme-modern .teaser-row {
    display: flex;
    flex-wrap: wrap;
    gap: 60px;
    align-items: flex-start;
}

body.theme-modern .teaser-card {
    flex: 1 1 0;
    min-width: 280px;       /* below this, the row will wrap */
    padding: 0;
}

body.theme-modern .teaser-headline {
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 2.5rem;      /* ~40px — the "big section headline" the EurOMo style uses */
    font-weight: 700;
    line-height: 1.15;
    margin: 0 0 24px 0;
    color: #1a1a2e;
    letter-spacing: -0.01em;
    text-transform: lowercase;   /* matches the existing in-page caption casing */
}

body.theme-modern .teaser-text {
    font-size: 17px;
    line-height: 1.65;
    color: #2d3142;
    margin: 0 0 28px 0;
}

body.theme-modern .teaser-link {
    display: inline-block;
    font-weight: 600;
    font-size: 16px;
    color: #6600cc;
    text-decoration: none;
    border-bottom: 2px solid #6600cc;
    padding-bottom: 2px;
    transition: color 0.15s ease, border-color 0.15s ease;
}
body.theme-modern .teaser-link:hover {
    color: #4d0099;
    border-bottom-color: #4d0099;
    text-decoration: none;
}

/* Mobile: stack vertically, smaller headlines */
@media screen and (max-width: 800px) {
    body.theme-modern .home-teasers {
        margin-top: 40px;
        padding-top: 32px;
    }
    body.theme-modern .teaser-row {
        gap: 40px;
    }
    body.theme-modern .teaser-headline {
        font-size: 1.85rem;
    }
}