/* ==========================================================================
   theme-v2.css — "Atlas" design overlay (flag: BRAND_DESIGN_V2)
   Pure CSS layer on top of Bootstrap 4 + app/common.css. No markup changes,
   so turning the flag off restores the previous design exactly.
   Palette: ink #1F2933 / paper #FAF9F6 / trail teal #0E7490 (topo route ink)
   / contour #E4E0D8. Number pages use head_number and are not affected.
   ========================================================================== */
:root {
    --ink: #1f2933;
    --ink-soft: #52606d;
    --paper: #faf9f6;
    --surface: #ffffff;
    --trail: #0e7490;
    --trail-deep: #155e75;
    --trail-tint: #e0f2f7;
    --contour: #e4e0d8;
}

/* ---- base ---------------------------------------------------------------- */
body {
    background-color: var(--paper);
    color: var(--ink);
    font-family: "Avenir Next", "Segoe UI", "Hiragino Kaku Gothic ProN",
        "Noto Sans JP", "Yu Gothic", system-ui, -apple-system, sans-serif;
    line-height: 1.65;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 700;
    letter-spacing: -0.015em;
    font-feature-settings: "palt";
    color: var(--ink);
}
a { color: var(--trail); }
a:hover { color: var(--trail-deep); }

/* ---- signature: route line + pin dot under top-page section headings ----- */
.region-theme-section > h2,
.data-maps-section > h2,
.landing-section h2,
.featured-section h2 {
    position: relative;
    padding-bottom: 16px;
}
.region-theme-section > h2::after,
.data-maps-section > h2::after,
.landing-section h2::after,
.featured-section h2::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 4px;
    width: 56px;
    height: 2px;
    transform: translateX(-56%);
    background: linear-gradient(90deg, transparent, var(--trail) 30%, var(--trail));
    border-radius: 2px;
}
.region-theme-section > h2::before,
.data-maps-section > h2::before,
.landing-section h2::before,
.featured-section h2::before {
    content: "";
    position: absolute;
    left: calc(50% + 26px);
    bottom: 1px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--trail);
    box-shadow: 0 0 0 3px var(--trail-tint);
}

/* ---- buttons -------------------------------------------------------------- */
.btn { border-radius: 8px; }
.btn-primary, .btn-success, .btn-info {
    background-color: var(--trail);
    border-color: var(--trail);
    color: #fff;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-success:hover, .btn-success:focus, .btn-success:active,
.btn-info:hover, .btn-info:focus, .btn-info:active {
    background-color: var(--trail-deep);
    border-color: var(--trail-deep);
    color: #fff;
}
.btn-outline-primary, .btn-outline-success {
    color: var(--trail);
    border-color: var(--trail);
}
.btn-outline-primary:hover, .btn-outline-primary:focus,
.btn-outline-success:hover, .btn-outline-success:focus {
    background-color: var(--trail);
    border-color: var(--trail);
    color: #fff;
}
.btn-outline-secondary { border-color: var(--contour); color: var(--ink-soft); }
.btn-outline-secondary:hover { background-color: var(--ink); border-color: var(--ink); }
.btn:focus, .btn:focus-visible, .form-control:focus {
    box-shadow: 0 0 0 3px var(--trail-tint);
    border-color: var(--trail);
}

/* ---- cards: map-plate elevation ------------------------------------------ */
.card {
    border: 1px solid var(--contour);
    border-radius: 10px;
    overflow: hidden;
    background: var(--surface);
}
.post-tile,
.contents-section .card,
.region-theme-section .card {
    border: 0;
    box-shadow: 0 1px 2px rgba(31, 41, 51, 0.06), 0 4px 14px rgba(31, 41, 51, 0.06);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.post-tile:hover,
.contents-section .card:hover,
.region-theme-section .card:hover {
    transform: translateY(-3px);
    box-shadow: 0 2px 4px rgba(31, 41, 51, 0.08), 0 14px 32px rgba(31, 41, 51, 0.14);
}
.post-tile .card-img-top,
.contents-section .card img,
.region-theme-section .card img {
    transition: transform 0.25s ease;
}
.post-tile:hover .card-img-top,
.contents-section .card:hover img,
.region-theme-section .card:hover img {
    transform: scale(1.03);
}
.post-tile.border-primary { border: 0; }

/* ---- header / footer ------------------------------------------------------ */
nav.fixed-top {
    box-shadow: 0 1px 0 var(--contour), 0 4px 16px rgba(31, 41, 51, 0.05);
}
.footer-section .bg-dark { background-color: var(--ink) !important; }
.footer-menu-section > div { box-shadow: 0 -2px 12px rgba(31, 41, 51, 0.12); }

/* ---- top page ------------------------------------------------------------- */
.slogan-section h1.slogan {
    color: var(--ink) !important;
    font-weight: 800;
}
.filter-section .categories > div { background: var(--surface); }

/* ---- forms / modal --------------------------------------------------------- */
.form-control { border-color: var(--contour); border-radius: 8px; }
.modal-content { border-radius: 12px; border: 0; }

/* ---- cookie banner tone-match ---------------------------------------------- */
.cc-banner { background: var(--ink); }
.cc-accept { background: var(--trail); }
.cc-accept:hover { background: var(--trail-deep); }

/* ---- motion restraint ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    .post-tile, .contents-section .card, .region-theme-section .card,
    .post-tile .card-img-top, .contents-section .card img, .region-theme-section .card img {
        transition: none;
    }
    .post-tile:hover, .contents-section .card:hover, .region-theme-section .card:hover {
        transform: none;
    }
}