/* =========================
   ROOT VARIABLES
========================= */

:root {
    /* Palette — change these values to retheme the full site. */
    --color-ivory: #fbf5e9;
    --color-paper: #f1ede4;
    --color-canvas: #eae5da;
    --color-surface: #f8f6f1;
    --color-ink: #1a1a1a;
    --color-muted: #777777;
    --color-border: #e5dfd2;
    --color-gold: #c9a44c;
    --color-gold-light: #d5b35b;
    --color-gold-deep: #ab8430;
    --color-wine: #7d1f1f;
    --color-night: #0f0f0f;
    --color-night-surface: #181818;
    --color-night-raised: #202020;
    --color-night-border: #2a2a2a;
    --color-on-dark: #f2f2f2;
    --color-on-dark-muted: #aaaaaa;
    --gold-tint: rgba(201, 164, 76, .15);
    --gold-outline: rgba(201, 164, 76, .30);
    --shadow-color: rgba(30, 22, 10, .10);
    --shadow-deep: rgba(20, 14, 5, .18);
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 22px;
    --ui-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    /* Backwards-compatible semantic aliases used by existing components. */
    --bg-color: var(--color-canvas);
    --surface-color: var(--color-surface);
    --text-color: var(--color-ink);
    --text-soft: var(--color-muted);
    --gold-primary: var(--color-gold);
    --gold-soft: var(--gold-tint);
    --red-accent: var(--color-wine);
    --border-color: var(--color-border);
    --shadow-soft: 0 8px 24px var(--shadow-color);
    --shadow-hover: 0 16px 38px var(--shadow-deep);
    --header-height: 90px;
}

/* =========================
   GLOBAL
========================= */

html {
    scroll-behavior: smooth;
}

body {
    background: linear-gradient(to bottom, var(--color-paper), var(--color-canvas));

    color: var(--text-color);
    font-family: var(--ui-font);

    line-height: 1.7;

}

/* =========================
   TYPOGRAPHY
========================= */

h1,
h2,
h3,
h4 {

    color: var(--text-color);

    font-weight: 700;

    letter-spacing: -0.5px;

}

p {
    color: var(--text-color);
}

a {

    color: inherit;

    text-decoration: none;

    transition:
        color 0.2s ease,
        opacity 0.2s ease,
        transform 0.2s ease;

}

/* =========================
   HEADER
========================= */

.site-header {

    background: linear-gradient(
        180deg,
        #c8a24d,
        #ab8430
    ) !important;

    box-shadow:
        0 4px 20px rgba(0,0,0,0.12);

}

.ast-primary-header-bar,
.main-header-bar,
.ast-builder-menu-1,
.ast-builder-grid-row,
.ast-builder-grid-row-container {

    background: transparent !important;

}

.site-header {

    backdrop-filter: blur(10px);

}

/* =========================
   NAVBAR
========================= */

.main-header-menu a {

    color: #fff8e8 !important;

    font-weight: 600;

    letter-spacing: 0.4px;

}


/* =========================
   NAVBAR UNDERLINE
========================= */

/* Default / Light Mode */
.main-header-menu > .menu-item > a::after {
    content: "";

    position: absolute;
    left: 0;
    bottom: -25px;

    width: 0%;
    height: 2px;

    background: #000000;

    transition: width 0.2s ease;
}

/* Light Mode - Hover */
.main-header-menu > .menu-item:hover > a::after {
    width: 100%;
    background: #000000;
}

/* Active Page - Always Red */
.main-header-menu > .menu-item.current-menu-item > a::after {
    width: 100%;
    background: var(--red-accent);
}

/* Dark Mode - Hover */
body.dark-mode .main-header-menu > .menu-item:hover > a::after {
    background: #ffffff;
}

/* Dark Mode - Active Page stays Red */
body.dark-mode .main-header-menu > .menu-item.current-menu-item > a::after {
    background: var(--red-accent);
}

.main-header-menu a:hover::after {
    width: 100%;
}

.main-header-menu .current-menu-item a {
    color: var(--red-accent) !important;
}

.main-header-menu .current-menu-item a::after {

    width: 100%;

    background: var(--red-accent);

}

/* =========================
   HERO SECTION
========================= */

.hero-section {

    padding:
        90px 20px
        100px;

    text-align: center;

}

.hero-content {

    max-width: 850px;

    margin: auto;

}

.hero-subtitle {

    color: var(--gold-primary);

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 1.5px;

    margin-bottom: 14px;

}

.hero-title {

    font-size: clamp(2.8rem, 7vw, 4.5rem);

    line-height: 1.05;

    margin-bottom: 25px;

}

.hero-description {

    font-size: 1.2rem;

    color: var(--text-soft);

    max-width: 650px;

    margin: auto;

}

/* =========================
   LAYOUT
========================= */

.homepage-container {

    max-width: 1250px;

    margin:
        calc(var(--header-height) + 30px)
        auto
        90px;

    padding:
        0
        24px;

}

.homepage-section {

    margin-bottom: 90px;

}

.section-header {

    margin-bottom: 35px;

}

.section-header h2 {

    font-size: 2rem;

    margin-bottom: 8px;

}

.section-header p {

    color: var(--text-soft);

}

.novel-details {

    display: flex;

    flex-direction: column;

    gap: 10px;

    margin: 20px 0;

}

.novel-details p {

    display: flex;

    gap: 12px;

    margin: 0;

}

.novel-details strong {

    color: var(--gold-primary);

    min-width: 90px;

}

.chapter-section-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 25px;

}

.chapter-count {

    color: var(--text-soft);

    font-size: 0.95rem;

}

.chapter-entry a {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 20px;

}

.chapter-title-text {

    flex: 1;

    text-align: right;

}

/* =========================
   NOVEL ACTIONS
========================= */

.novel-actions {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 14px;

    margin-top: 28px;
}


/* Start Reading + Latest Chapter */

.start-reading-btn,
.latest-chapter-btn {
    display: flex;

    align-items: center;
    justify-content: center;

    min-height: 58px;

    padding: 14px 24px;

    box-sizing: border-box;

    border-radius: 14px;

    background: var(--gold-primary);
    color: #111 !important;

    font-weight: 700;
    text-decoration: none !important;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}

.start-reading-btn:hover,
.latest-chapter-btn:hover {
    transform: translateY(-2px);

    box-shadow: var(--shadow-hover);

    color: #111 !important;
}


/* =========================
   LIBRARY BUTTON
========================= */

.library-button {
    grid-column: 1 / -1;

    justify-self: center;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 48px;

    padding: 11px 28px;

    border: 1px solid var(--gold-primary);
    border-radius: 12px;

    background: transparent;

    color: var(--text-color) !important;

    font-weight: 600;

    cursor: pointer;

    text-decoration: none !important;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

.library-button:hover {
    background: var(--gold-primary);

    color: #111 !important;

    transform: translateY(-1px);
}


/* Already bookmarked */

.library-button.bookmarked {
    background: var(--gold-primary);

    color: #111 !important;
}


@media (max-width: 600px) {

    .novel-actions {
        grid-template-columns: 1fr;
    }

    .start-reading-btn,
    .latest-chapter-btn {
        width: 100%;
    }

    .library-button {
        grid-column: auto;

        width: 100%;
    }

}


@media (max-width: 768px) {

    .novel-actions{

        flex-direction:row;

        gap:10px;

    }

    .start-reading-btn,
    .latest-chapter-btn{

        flex:1;

        font-size:.92rem;

    }

}

@media (max-width: 768px) {

    /* Hero Layout */

    .novel-hero {

        flex-direction: column;

        align-items: center;

        gap: 30px;

    }

    /* Cover */

    .novel-cover-wrapper {

        width: 100%;

        display: flex;

        justify-content: center;

    }

    .novel-cover-large {

        width: 220px;

        max-width: 70vw;

    }

    /* Metadata Section */

    .novel-meta {

        width: 100%;

    }

    /* Title */

    .novel-meta h1 {

        text-align: center;

        font-size: 2rem;

        margin-bottom: 25px;

    }

    /* Author / Translator / Status */

    .novel-details {

        width: 100%;

        max-width: 450px;

        margin: 0 auto 20px;

        gap: 12px;

    }

    .novel-details p {

        display: flex;

        justify-content: space-between;

        align-items: center;

        gap: 20px;

        margin: 0;

    }

    .novel-details strong {

        color: var(--gold-primary);

        min-width: 100px;

    }

    .novel-details span {

        text-align: right;

    }

    /* Genre Pills */

    .genre-list {

        justify-content: center;

        margin-top: 25px;

    }

    /* Start Reading Button */

    .start-reading-btn {

        display: flex;

        justify-content: center;

        align-items: center;

        width: 100%;

        max-width: 300px;

        margin: 25px auto 0;

    }

    /* Synopsis */

    .novel-synopsis h2 {

        text-align: center;

    }

    /* Chapter Header */

    .chapter-section-header {

        flex-direction: column;

        align-items: center;

        gap: 6px;

        text-align: center;

    }

}

/* =========================
   CHAPTER FEED
========================= */

.latest-chapters {

    display: flex;
    flex-direction: column;

    gap: 18px;

}

.chapter-card {

    background: var(--surface-color);

    border: 1px solid rgba(201,164,76,0.15);

    border-left: 4px solid var(--gold-primary);

    border-radius: 16px;

    padding: 24px 28px;

    box-shadow: var(--shadow-soft);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;

}

.chapter-card:hover {

    transform: translateY(-2px);

    box-shadow: var(--shadow-hover);

}

.chapter-link {

    font-size: 1.1rem;

    font-weight: 600;

    display: block;

}

.chapter-link:hover {

    color: var(--gold-primary);

}

.novel-name {

    color: var(--text-soft);

    font-size: 0.9rem;

    margin-bottom: 6px;

}

/* =========================
   NOVEL GRID
========================= */

.novel-grid {

    display: grid;

    grid-template-columns:
        repeat(auto-fill, minmax(230px, 1fr));

    gap: 28px;

}

.novel-card {

    background: var(--surface-color);

    border: 1px solid rgba(201,164,76,0.15);

    border-radius: 18px;

    overflow: hidden;

    box-shadow: var(--shadow-soft);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;

}

.novel-card:hover {

    transform:
        translateY(-6px)
        scale(1.01);

    box-shadow: var(--shadow-hover);

}

.novel-cover {

    width: 100%;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;

}

.novel-card:hover .novel-cover {

    transform: scale(1.04);

}

.novel-card-content {

    padding: 18px;

}

.novel-title {

    font-size: 1.1rem;

    line-height: 1.4;

}

/* =========================
   READER
========================= */

.reader-container {

    max-width: var(--reader-width, 760px);

    margin: auto;

    padding: 80px 24px;

}

.reader-back {

    margin-bottom: 35px;

}

.reader-back a {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: var(--text-soft);

    font-size: 0.95rem;

    font-weight: 500;

    transition: .2s ease;

}

.reader-back a:hover {

    color: var(--gold-primary);

}

.reader-header {

    text-align: center;

    margin-bottom: 40px;

}

.reader-chapter-number {

    color: var(--gold-primary);

    text-transform: uppercase;

    letter-spacing: 2px;

    font-size: .9rem;

    font-weight: 700;

    margin-bottom: 14px;

}

.reader-title {

    font-size: clamp(2.2rem, 5vw, 3.2rem);

    line-height: 1.15;

    margin: 0;

}

.reader-divider {

    width: 80px;

    height: 2px;

    background: var(--gold-primary);

    border-radius: 999px;

    margin: 40px auto;

}

.chapter-content {

    max-width: var(--reader-width, 760px);

    margin: auto;

    font-size: var(--reader-font-size, 22px);

    line-height: var(--reader-line-height, 2.2);

    letter-spacing: .015em;

}

.chapter-content p {

    margin-bottom: 2.1em;

}

.chapter-content img {

    max-width: 100%;

    height: auto;

    border-radius: 14px;

    margin: 30px auto;

    display: block;

}

.reader-navigation {

    display: grid;

    grid-template-columns: 1fr auto 1fr;

    gap: 14px;

    margin-top: 70px;

    align-items: center;

}

.reader-navigation > div:first-child {

    justify-self: start;

}

.reader-navigation > div:nth-child(2) {

    justify-self: center;

}

.reader-navigation > div:last-child {

    justify-self: end;

}

.reader-nav-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 150px;

    height: 50px;

    padding: 0 22px;

    border-radius: 12px;

    background: linear-gradient(
        180deg,
        #c9a44c,
        #af8431
    );

    color: white !important;

    font-weight: 700;

    box-shadow:
        0 10px 24px rgba(176,138,52,.22);

    transition:
        transform .2s ease,
        box-shadow .2s ease;

}

.reader-nav-button:hover {

    transform: translateY(-2px);

    box-shadow:
        0 16px 36px rgba(176,138,52,.30);

}

@media (max-width: 768px) {

    .reader-container {

        padding: 60px 20px;

    }

    .reader-title {

        font-size: 2rem;

    }

    .chapter-content {

        font-size: var(--reader-font-size, 19px);

        line-height: var(--reader-line-height, 2.05);

    }

    .reader-navigation {

        grid-template-columns: 1fr;

        gap: 12px;

    }

    .reader-navigation > div {

        justify-self: stretch;

    }

    .reader-nav-button {

        width: 100%;

    }

}

/* =========================
   HR
========================= */

hr {

    border: none;

    border-top: 1px solid var(--border-color);

    margin: 45px 0;

}

/* =========================
   BUTTONS
========================= */

button,
input[type="submit"] {

    background: var(--gold-primary);

    color: #111;

    border: none;

    border-radius: 10px;

    padding: 10px 18px;

    font-weight: 600;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        opacity 0.2s ease;

}

button:hover,
input[type="submit"]:hover {

    transform: translateY(-1px);

    opacity: 0.92;

}

/* =========================
   FOOTER
========================= */

.site-footer,
.ast-builder-footer-grid-columns,
.ast-builder-footer-wrap,
.ast-footer-copyright {

    background: var(--surface-color) !important;

    border-top: 1px solid var(--border-color);

}

.site-footer p,
.site-footer span,
.site-footer a {

    color: var(--text-soft) !important;

}

/* =========================
   DARK MODE
========================= */

body.dark-mode {
    --bg-color: var(--color-night);
    --surface-color: var(--color-night-surface);
    --text-color: var(--color-on-dark);
    --text-soft: var(--color-on-dark-muted);
    --border-color: var(--color-night-border);
    --shadow-soft: 0 8px 24px rgba(0, 0, 0, .40);
    --shadow-hover: 0 16px 38px rgba(0, 0, 0, .52);
    background: radial-gradient(circle at top, #1a1a1a, #0d0d0d 60%);

}

/* Dark Header */



/* Dark Cards */

body.dark-mode .novel-card,
body.dark-mode .chapter-card {

    background: var(--surface-color);

    border-color: var(--border-color);

}

/* Dark Text */

body.dark-mode p,
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode span,
body.dark-mode li {

    color: var(--text-color) !important;

}

/* Dark Links */

body.dark-mode a:hover {
    color: var(--gold-primary);
}

/* Dark Footer */

body.dark-mode .site-footer,
body.dark-mode .ast-builder-footer-grid-columns,
body.dark-mode .ast-builder-footer-wrap,
body.dark-mode .ast-footer-copyright {

    background: #141414 !important;

    border-color: var(--border-color);

}

body.dark-mode .site-footer p,
body.dark-mode .site-footer span,
body.dark-mode .site-footer a {

    color: #bbbbbb !important;

}

/* Inputs */

body.dark-mode input,
body.dark-mode textarea {

    background: #202020;

    color: #ffffff;

    border-color: #333333;

}

body.dark-mode .genre-pill {

    background: rgba(201,164,76,0.12);

    color: var(--gold-primary);

    border-color: var(--gold-primary);

}

/* =========================
   DARK MODE BUTTON
========================= */

#dark-mode-toggle {

    cursor: pointer;

    font-size: 20px;

}


/* =========================
   NOVEL PAGE
========================= */

.novel-page-container {

    max-width: 1200px;

    margin:
        calc(var(--header-height) + 30px)
        auto
        90px;

    padding: 0 24px;

}

.novel-header {

    display: flex;

    gap: 50px;

    align-items: flex-start;

    margin-bottom: 50px;

}

.novel-cover-large {

    width: 260px;

    border-radius: 18px;

    box-shadow: var(--shadow-soft);

    flex-shrink: 0;

}

.novel-meta {

    flex: 1;

}

.novel-meta p {

    margin-bottom: 8px;

}

.novel-meta strong {

    color: var(--gold-primary);

}

.novel-synopsis {

    margin-top: 25px;

    line-height: 1.9;

}

/* Genre Pills */

.genre-list {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    margin: 20px 0;

}

.genre-pill {

    background: var(--gold-soft);

    border: 1px solid var(--gold-primary);

    color: var(--gold-primary);

    padding: 6px 14px;

    border-radius: 999px;

    font-size: 0.9rem;

    font-weight: 600;

}



/* Chapter Section */

.chapter-list {

    display: flex;

    flex-direction: column;

    gap: 14px;

}

.chapter-entry {

    background: var(--surface-color);

    border: 1px solid rgba(201,164,76,0.15);

    border-radius: 14px;

    padding: 18px 22px;

    box-shadow: var(--shadow-soft);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;

}

.chapter-entry:hover {

    transform: translateY(-2px);

    box-shadow: var(--shadow-hover);

}

.chapter-entry a {

    display: flex;

    justify-content: space-between;

    align-items: center;

}

.chapter-number {

    color: var(--gold-primary);

    font-weight: 600;

}

.chapter-title-text {

    color: var(--text-color);

}


@media (max-width: 768px) {

    .novel-header {

        flex-direction: column;

        align-items: center;

        text-align: center;

    }

    .novel-cover-large {

        width: 220px;

    }

    .chapter-entry a {

        flex-direction: column;

        align-items: flex-start;

        gap: 6px;

    }

}


/* =========================
MOBILE HEADER & MENU
========================= */

@media (max-width: 921px) {


/* Header */

.site-header,
.ast-primary-header-bar,
.main-header-bar,
.ast-builder-grid-row,
.ast-builder-grid-row-container {

    background: linear-gradient(
        180deg,
        #b08a34,
        #8f6b21
    ) !important;

}

/* Burger */

.menu-toggle,
.ast-mobile-menu-trigger {

    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #fff8e8 !important;

    border-radius: 10px;

    transition: 0.2s ease;

}

.menu-toggle:hover,
.ast-mobile-menu-trigger:hover {

    background: rgba(255,255,255,0.08);

}

.menu-toggle svg,
.ast-mobile-menu-trigger svg {

    fill: #fff8e8 !important;

}

/* Menu Background */

.main-navigation,
#ast-hf-mobile-menu {

    background: #9f7727 !important;

}

/* Menu Container */

#ast-hf-mobile-menu {

    padding: 8px 0;

}

/* Menu Items */

#ast-hf-mobile-menu .menu-item {

    border-bottom:
        1px solid rgba(255,255,255,0.08);

}

#ast-hf-mobile-menu .menu-item:last-child {

    border-bottom: none;

}

.menu-item-dark-mode {
    display: flex;
    align-items: center;
}

#dark-mode-toggle {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 32px;
    height: 32px;

    padding: 0;
    margin-left: 8px;

    color: inherit;
    background: transparent;
    border: none;

    cursor: pointer;

    transition:
        color 0.2s ease,
        opacity 0.2s ease;
}

#dark-mode-toggle:hover {
    opacity: 0.7;
}

#dark-mode-toggle svg {
    display: block;
    width: 19px;
    height: 19px;
}


/* Links */

#ast-hf-mobile-menu .menu-link {

    display: flex;

    align-items: center;

    min-height: 58px;

    padding: 0 24px !important;

    color: #fff8e8 !important;

    font-size: 15px;

    font-weight: 600;

    letter-spacing: 0.3px;

    transition: 0.2s ease;

}

/* Active Page */

#ast-hf-mobile-menu .current-menu-item > a {

    background:
        rgba(255,255,255,0.08);

    color: #ffffff !important;

    border-left:
        3px solid #ffffff;

}

/* Hover */

#ast-hf-mobile-menu .menu-link:hover {

    background:
        rgba(255,255,255,0.08);

}

/* Dark Mode Button */

#dark-mode-toggle {

    display: flex;

    align-items: center;

    justify-content: center;

}

#dark-mode-toggle img {

    width: 18px;
    height: 18px;

}


}