/*
 * nineanime-misc.css — owned by the misc area.
 * Scope: the / landing, CMS pages (/pages/{slug}, incl. the FAQ), /contact,
 * the 4xx error pages (inside the shell), maintenance and coming-soon
 * (standalone: they load Bootstrap + styles.css + FA5 + this file as static
 * files). 500/503 restate their few rules inline (errors/partials/standalone).
 * The /schedule page lives in nineanime-schedule.css.
 *
 * Rules here extend public/assets/nineanime/css/styles.css (9anime's own
 * styles.min.css, vendored verbatim — never edit it). Loaded on every page
 * after nineanime-bridge.css, so every block below is scoped to its page.
 * 9anime's hover states on these pages are flat (buttons, search box, social
 * pills do not change) — nothing here adds one.
 */

/* ==========================================================================
   1. The / landing — 9anime's /css/home.css (v0.1, reference/assets/home.css)
      verbatim, scoped to body.na-landing. 9anime loaded it after styles.css
      on the normal site chrome (#0e0e0e body, normal header and footer), so
      nothing else is reset. The scope only raises specificity; every value
      is home.css's own.
   ========================================================================== */
body.na-landing #mw-top { padding: 0; margin: 0; position: relative; z-index: 3; }
body.na-landing #mw-top .mwt-content { padding: 80px 0 30px; position: relative; max-width: 600px; margin: 0 auto; }
body.na-landing #mw-top .mwh-logo { margin-bottom: 40px; text-align: center; }
body.na-landing #mw-top .mwh-logo .mwh-logo-div { display: inline-block; }
body.na-landing #mw-top .mwh-logo .mwh-logo-div img { height: 60px; width: auto; }
body.na-landing #xsearch.home-search .search-input { height: 60px; background: #1c1c1c !important; font-weight: 400; border-radius: 10px 0 0 10px; padding-left: 30px; padding-right: 30px; font-size: 18px; border: none !important; }
body.na-landing #xsearch.home-search .search-input::placeholder { color: #999; }
body.na-landing #xsearch.home-search .search-content .search-submit { height: 60px; text-align: center; position: absolute; top: 0; right: 0; bottom: 0; cursor: pointer; display: inline-block; width: 90px; background: #5a2e98; border-radius: 0 10px 10px 0; }
body.na-landing #xsearch.home-search .search-content .search-submit .search-icon { width: 90px; height: 60px; padding: 0; margin: 0; }
body.na-landing #xsearch.home-search .search-content .search-submit .search-icon i { font-size: 20px; line-height: 60px; color: #fff; }
body.na-landing #xsearch.home-search .search-content { position: relative; padding-right: 90px; margin-bottom: 20px; }
body.na-landing .show-share { display: block; text-align: center; margin-bottom: 3px; }
body.na-landing #mw-text { margin: 40px auto; max-width: 1000px; font-size: 15px; line-height: 1.5em; color: #aaa; }
body.na-landing #mw-text .mt-h-large { font-size: 2em; margin-bottom: 20px; color: #ddd; }
body.na-landing #mw-text .mt-h-medium { font-size: 1.5em; margin-bottom: 10px; color: #ddd; }
body.na-landing #mw-text .mt-h-small { font-size: 1.1em; margin-bottom: 10px; color: #ddd; }
body.na-landing #mw-text ul { padding-left: 15px; }
body.na-landing #mw-text li { margin-bottom: 10px; }
body.na-landing #mw-text li strong { color: #ddd; }
body.na-landing #mw-text a { color: #a885da; }
body.na-landing .btn-home { border-radius: 10px; color: #fff !important; }
@media screen and (max-width: 479px) {
    body.na-landing #mw-text { margin: 25px auto; font-size: 13px; }
    body.na-landing .btn-lg.btn-focus { display: block; width: 100%; }
}

/* The admin editor writes bare h1/h2/h3 (9anime's copy used h2.mt-h-medium):
   the same three steps, keyed off the tag. 9anime's article has no <h1>; an
   admin-written one takes .mt-h-large. */
body.na-landing #mw-text h1 { font-size: 2em; margin-bottom: 20px; color: #ddd; }
body.na-landing #mw-text h2 { font-size: 1.5em; margin-bottom: 10px; color: #ddd; }
body.na-landing #mw-text h3 { font-size: 1.1em; margin-bottom: 10px; color: #ddd; }

/* The share slot without a ShareThis property: the CMS's plain share links
   (bridge .na-share-links), smaller and centred under the description. */
body.na-landing .na-landing-share { justify-content: center; gap: 6px; margin-bottom: 13px; }
body.na-landing .na-landing-share .na-share-link { width: 30px; height: 30px; line-height: 30px; font-size: 14px; }

/* ==========================================================================
   2. Text pages — /pages/{slug} and /contact in 9anime's FAQ / Contact frame
      (reference/faq.html, contact.html): #main-wrapper.layout-page
      .layout-page-infor > .information_page > .container >
      .information_page-wrap > .information_page-content, title h1.h2-heading.
      styles.css draws all of it; below only the editor's bare tags.
   ========================================================================== */
.na-page-body h2,
.na-page-body h3,
.na-page-body h4,
.na-page-body h5,
.na-page-body h6 { color: #fff; line-height: 1.3em; margin: 0 0 10px; font-weight: 500; }
/* h2 = styles.css .information_page .h3-heading, h3 = .h4-heading. */
.na-page-body h2 { font-size: 1.5em; }
.na-page-body h3 { font-size: 1.2em; }
.na-page-body h4,
.na-page-body h5,
.na-page-body h6 { font-size: 1em; }
.na-page-body ul,
.na-page-body ol { font-size: 14px; font-weight: 300; line-height: 1.6em; margin-bottom: 1em; }
.na-page-body li { margin-bottom: .5em; }
.na-page-body li p { margin-bottom: .25em; }
/* 9anime's default link colour (#525252) is near-invisible in prose; its own
   in-text link colour (the landing's #mw-text a) is used instead. */
.na-page-body a { color: #a885da; }
.na-page-body a:hover { color: #fff; }
/* (The FAQ list keeps 9anime's own #525252 → #fff links, as measured.) */
.na-page-body strong,
.na-page-body b { font-weight: 500; color: #ddd; }
/* Not in the reference (neutral, from the 9anime palette): quotes, rules,
   tables, images and code the editor can emit. */
.na-page-body blockquote { margin: 0 0 1em; padding: 12px 20px; background: #1c1c1c; border-left: 3px solid #5a2e98; border-radius: 0 4px 4px 0; }
.na-page-body blockquote p:last-child { margin-bottom: 0; }
.na-page-body hr { border: 0; border-top: 1px solid rgba(255, 255, 255, .1); margin: 1.5em 0; }
.na-page-body img { max-width: 100%; height: auto; }
.na-page-body table { width: 100%; margin-bottom: 1em; font-size: 14px; font-weight: 300; border-collapse: collapse; }
.na-page-body th,
.na-page-body td { padding: 8px 12px; border: 1px solid rgba(255, 255, 255, .1); vertical-align: top; }
.na-page-body th { color: #fff; font-weight: 500; background: #1c1c1c; }
.na-page-body code { color: #ddd; background: #1c1c1c; padding: .1em .35em; border-radius: 3px; }
.na-page-body pre { background: #1c1c1c; padding: 15px; border-radius: 4px; color: #ddd; overflow: auto; }
.na-page-body pre code { background: none; padding: 0; }
.na-page-body iframe,
.na-page-body video { max-width: 100%; }

/* The FAQ answers may hold more than one paragraph or a list. */
.information_page .list-group-item .na-faq-answer > :last-child { margin-bottom: 4px; }
.information_page .list-group-item .na-faq-answer p { margin-bottom: 4px; }

/* Contact — the CMS form in 9anime's .form-dark (styles.css). Its fields
   have no border, so Bootstrap's red invalid border never shows: a ring in
   the :focus ring's place instead. */
.form-dark .form-control.is-invalid,
.form-dark .form-control.is-invalid:focus { box-shadow: 0 0 0 2px #dc3545; background-image: none; padding-right: 15px; }
.form-dark .invalid-feedback { font-size: 12px; }
.form-dark .custom-control-label { line-height: 1.5rem; cursor: pointer; }
.form-dark .custom-control-label::before { background: rgba(255, 255, 255, .05); border: none; }
.form-dark .custom-control-input:checked ~ .custom-control-label::before { background-color: #5a2e98; border-color: #5a2e98; }
.form-dark .custom-control-input:focus ~ .custom-control-label::before { box-shadow: 0 0 0 2px #5a2e98; }
.form-dark .custom-control-input.is-invalid ~ .custom-control-label::before { box-shadow: 0 0 0 2px #dc3545; }
.na-contact-alert { border: none; border-radius: 4px; font-size: 13px; }
.na-contact-alert.alert-success { background: rgba(90, 46, 152, .25); color: #ddd; }
.na-contact-alert.alert-danger { background: rgba(220, 53, 69, .15); color: #ea868f; }

/* ==========================================================================
   3. Error pages (4xx inside the shell): 9anime's 404 frame, text only —
      .container-404 / .c4-* and the .btn-sm.btn-focus are all styles.css.
      .c4-medium is the page's <h1>; the tag's own weight/colour are undone
      so the class alone decides (as 9anime's div).
   ========================================================================== */
.container-404 h1.c4-medium { color: inherit; }

/* ==========================================================================
   4. Maintenance and coming-soon (standalone, served 503): 9anime's #header
      bar (logo only) and the 404 frame. The countdown tiles borrow the
      schedule strip's .tsd-item look; the socials are the footer's
      .sc-social-button tiles; one copyright line closes the page.
   ========================================================================== */
body.na-hold-body { background: #0e0e0e; }
.na-hold #header #logo { margin-left: 0; }
.na-hold .na-hold-countdown { display: flex; justify-content: center; gap: 10px; margin: 0 0 30px; }
.na-hold .na-hold-countdown .cd-item { width: 80px; padding: 10px; background: #242424; border-radius: 6px; text-align: center; }
.na-hold .na-hold-countdown .cd-num { font-size: 16px; font-weight: 600; line-height: 1em; color: #fff; margin-bottom: 5px; font-variant-numeric: tabular-nums; }
.na-hold .na-hold-countdown .cd-label { font-size: 13px; color: #666; line-height: 1.3em; }
.na-hold .na-hold-socials { display: inline-block; margin-bottom: 30px; }
.na-hold .na-hold-socials .scg-list .item:last-child { margin-right: 0; }
.na-hold .na-hold-socials .sc-social-button { color: #fff; }
.na-hold .na-hold-socials .sc-social-button.na-dsc-btn { background: #5865f2; }
.na-hold-foot { padding: 20px 0; text-align: center; font-size: 13px; color: #666; }