/* ==========================================================================
   Home template - sakura pink anime theme (incremental override layer)
   Loaded AFTER the generated inline <style> that carries the configured
   .search-section background, so equal-specificity !important rules win.
   Only colour / background / shadow / border declarations are overridden:
   no layout change, no markup change, no new behaviour.
   Scope: linked from template/default/index.php only, so the pink palette
   never leaks into other front-end pages (article, category, ranking) that
   share nav.php and style.css.
   ========================================================================== */

/* 1. Hero base: soft sakura gradient (visible only if the artwork fails) */
.search-section {
    background-color: #ffe9f3 !important;
    background-image: linear-gradient(158deg, #fff7fb 0%, #ffe6f1 45%, #ffd2e5 100%) !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

/* 2. Anime artwork layer: the girl sits on the right third of the frame */
.search-section::before {
    background-image: url("../images/home-pink-bg.jpg") !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    z-index: 0 !important;
    opacity: 1 !important;
}

/* 3. Readability scrim: milky on the left so the rose copy stays crisp,
   clearing towards the right so the artwork keeps its detail.
   z-index 0 keeps it above ::before (also 0, earlier in paint order) and
   below the hero content. */
.search-section::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    z-index: 0 !important;
    background-image:
        linear-gradient(97deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 249, 252, 0.88) 32%, rgba(255, 240, 247, 0.66) 55%, rgba(255, 233, 243, 0.28) 76%, rgba(255, 227, 239, 0.06) 100%),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0) 42%) !important;
    pointer-events: none !important;
}

/* Content always paints above the scrim (base uses z-index 2, the
   viewport_fade mode uses 1 - 3 clears both) */
.search-section > * {
    position: relative !important;
    z-index: 3 !important;
}

/* 4. Hero copy: deep rose instead of white */
.search-slogan {
    color: #b92b62 !important;
    text-shadow: 0 2px 14px rgba(255, 255, 255, 0.9), 0 1px 2px rgba(255, 255, 255, 0.8) !important;
}

.search-subtitle {
    color: #8c4a6b !important;
    text-shadow: 0 1px 10px rgba(255, 255, 255, 0.85) !important;
}

/* 5. Search field + submit button */
.search-input {
    background: rgba(255, 255, 255, 0.96) !important;
    border: 1px solid rgba(255, 158, 199, 0.55) !important;
    color: #5b2c46 !important;
    box-shadow: 0 12px 32px rgba(199, 80, 141, 0.16) !important;
}

.search-input:focus {
    background: #fff !important;
    border-color: #ff8fc0 !important;
    box-shadow: 0 14px 40px rgba(199, 80, 141, 0.26) !important;
}

.search-input::placeholder {
    color: rgba(140, 74, 107, 0.55) !important;
}

.search-btn {
    background: linear-gradient(135deg, #ffa3c9 0%, #ff5c9e 100%) !important;
    color: #fff !important;
    box-shadow: 0 8px 22px rgba(255, 92, 158, 0.42) !important;
}

.search-btn:hover {
    background: linear-gradient(135deg, #ffb1d3 0%, #ff6ba8 100%) !important;
    box-shadow: 0 10px 28px rgba(255, 92, 158, 0.55) !important;
}

/* 6. Hot category chips */
.search-tag {
    background: rgba(255, 255, 255, 0.74) !important;
    color: #b92b62 !important;
    border: 1px solid rgba(255, 150, 198, 0.55) !important;
    font-weight: 500 !important;
}

.search-tag:hover {
    background: #fff !important;
    color: #e13b83 !important;
    box-shadow: 0 6px 18px rgba(255, 110, 175, 0.3) !important;
}

/* 7. Home page header bar (nav.php is shared across pages, this file is not) */
.unified-header {
    background: rgba(255, 248, 252, 0.82) !important;
    box-shadow: 0 6px 24px rgba(255, 120, 180, 0.14) !important;
}

.unified-nav-menu a {
    color: #8a4a68 !important;
}

.unified-nav-menu a:hover {
    color: #e2498b !important;
}

.unified-nav-menu svg {
    fill: #b06a8c !important;
}

.unified-nav-menu a:hover svg {
    fill: #e2498b !important;
}

.unified-header .unified-search-icon-btn svg,
.unified-header .unified-user-icon-btn svg,
.unified-header .unified-mobile-menu-btn svg {
    fill: #b06a8c !important;
}

.unified-header .unified-search-icon-btn:hover svg,
.unified-header .unified-user-icon-btn:hover svg {
    fill: #e2498b !important;
}

/* 8. Page canvas behind the white cards */
body {
    background-color: #fdf1f7 !important;
    background-image:
        radial-gradient(1200px 520px at 10% -6%, rgba(255, 188, 220, 0.55) 0%, rgba(255, 214, 234, 0) 62%),
        radial-gradient(900px 460px at 94% 2%, rgba(226, 213, 255, 0.45) 0%, rgba(226, 213, 255, 0) 60%) !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
}

/* 9. Content accents: section icons, tabs, links, cards, sidebar */
.category-title svg {
    fill: #ff5c9e !important;
}

.category-title i {
    color: #ff5c9e !important;
}

.category-more,
.category-more svg {
    color: #ff5c9e !important;
    fill: #ff5c9e !important;
}

.sub-categories {
    background: #ffe9f3 !important;
}

.sub-cat-tag {
    color: #a3547a !important;
}

.sub-cat-tag:hover {
    background: rgba(255, 255, 255, 0.8) !important;
    color: #c93b7c !important;
}

.sub-cat-tag.active {
    background: linear-gradient(135deg, #ff9ec7 0%, #ff5c9e 100%) !important;
    color: #fff !important;
}

.site-card {
    background: #fff7fb !important;
}

.site-card:hover {
    background: #fff !important;
    box-shadow: 0 8px 22px rgba(255, 110, 175, 0.18) !important;
}

.sidebar-menu-item:hover {
    background: #fff0f6 !important;
    color: #e2498b !important;
}

.sidebar-menu-item.active {
    background: #ffe3ef !important;
    color: #e2498b !important;
}

/* 10. Narrow screens: pull the artwork further right and rely on a
   gentler horizontal scrim, because the copy is centred full width. */
@media (max-width: 768px) {
    .search-section::before {
        background-position: 84% 30% !important;
    }

    .search-section::after {
        background-image:
            linear-gradient(90deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 247, 251, 0.78) 38%, rgba(255, 238, 246, 0.5) 68%, rgba(255, 230, 241, 0.26) 100%),
            linear-gradient(to bottom, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0) 46%) !important;
    }

    .search-slogan {
        text-shadow: 0 2px 12px rgba(255, 255, 255, 0.95), 0 1px 2px rgba(255, 255, 255, 0.85) !important;
    }

    .search-subtitle {
        text-shadow: 0 1px 10px rgba(255, 255, 255, 0.95) !important;
    }
}