/* ===========================================================
 *  NCBC Theme — Global Stylesheet
 *
 *  Centralized place for design tokens (CSS custom properties)
 *  and theme-wide patterns that should apply to every page.
 *
 *  Load order: enqueued BEFORE blocks-frontend.css and any
 *  page-*.css so per-page rules can override these defaults.
 *
 *  Future consolidation (see TODO at end of file): nav, footer,
 *  and button base styles are still duplicated across many
 *  page-*.css files and can be migrated here incrementally.
 * =========================================================== */

/* ─────────────────────────────────────────────────────────────
 *  Design tokens
 *  These match the :root blocks currently duplicated across
 *  ~10 page-*.css files. Defining them once globally means
 *  individual page CSS files can drop their copy whenever
 *  they're touched next.
 * ───────────────────────────────────────────────────────────── */
:root {
    /* Surface colors */
    --ink:       #0b1726;
    --ink-2:     #1a2f4a;
    --navy:      #1e3a5f;
    --navy-soft: #2d4a6e;
    --sky:       #6b8caf;
    --sky-pale:  #c8d6e5;
    --paper:     #eef2f6;
    --paper-2:   #f7f9fc;
    --gold:      #d4a574;
    --gold-deep: #b88a52;
    --warm:      #f0e5d3;
    --line:      rgba(30, 58, 95, 0.12);

    /* Shadows */
    --shadow-1: 0 1px 2px rgba(11, 23, 38, 0.04),
                0 8px 24px rgba(11, 23, 38, 0.06);
    --shadow-2: 0 20px 60px rgba(11, 23, 38, 0.12),
                0 4px 12px rgba(11, 23, 38, 0.06);
    --shadow-3: 0 40px 120px rgba(11, 23, 38, 0.18);

    /* Font stacks */
    --serif:    "Cormorant Garamond", "Noto Serif TC", serif;
    --sans:     "Noto Sans TC", "Helvetica Neue", "Helvetica", sans-serif;
    --mono:     "JetBrains Mono", ui-monospace, monospace;
}


/* ─────────────────────────────────────────────────────────────
 *  Section defaults
 *
 *  Every <section> gets a small left/right gutter (15px) so its
 *  content never touches the screen edges, even if a page CSS
 *  rule forgets to set its own padding. Sections that need more
 *  generous padding (e.g. the homepage 130px vertical sections)
 *  override this via their own class rules — class selectors
 *  beat the element selector here, so per-page styles still win.
 * ───────────────────────────────────────────────────────────── */
section {
    padding-left: 24px;
    padding-right: 24px;
}


/* ─────────────────────────────────────────────────────────────
 *  .ncbc-section
 *
 *  Opt-in utility class for sections that want the standard
 *  small-gutter treatment without writing their own per-page
 *  rule. Apply it to any <section class="ncbc-section">.
 *
 *  Pairs well with an inner .ncbc-container that re-applies a
 *  max-width (1400px) for content.
 * ───────────────────────────────────────────────────────────── */
.ncbc-section {
    padding-left: 24px;
    padding-right: 24px;
}

.ncbc-container {
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}


/* ─────────────────────────────────────────────────────────────
 *  MIGRATION TODO
 *
 *  The following patterns are still duplicated across page-*.css
 *  files. They can be consolidated here once each variant is
 *  reviewed, since some files have slight variations:
 *
 *  - .nav, .nav.scrolled, .nav-brand, .nav-mark, .nav-menu,
 *    .nav-cta, mobile hamburger, mobile menu panel.
 *    (11 files have .nav; ~4 of those add a default background
 *    for pages with light heroes.)
 *
 *  - .btn, .btn-primary, .btn-secondary, .btn-pill.
 *    (10 files have .btn; 3 variants of the base rule exist —
 *    differ mostly in transitions list and padding.)
 *
 *  - footer styles (5 files have footer rules).
 *
 *  Recommended order: footer first (smallest surface area),
 *  then buttons, then nav (the most variation).
 * ───────────────────────────────────────────────────────────── */


/* ─────────────────────────────────────────────────────────────
 *  Mobile — hide hero meta strip
 *  Every page's hero block carries a .hero-meta sub-strip (small
 *  metadata row). On phone widths it crowds the title; we hide
 *  it globally so all pages get the same mobile treatment.
 * ───────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
    .hero-meta {
        display: none !important;
    }
}


/* ─────────────────────────────────────────────────────────────
 *  Back-to-top button
 *  Markup lives in footer.php so it appears on every page.
 *  Hidden until the user has scrolled past 400px; click smooth-
 *  scrolls to the top.
 * ───────────────────────────────────────────────────────────── */
.ncbc-back-to-top {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 0;
    background: var(--navy);
    color: #fff;
    box-shadow:
        0 8px 24px rgba(11, 23, 38, 0.28),
        0 2px 6px rgba(11, 23, 38, 0.18);
    cursor: pointer;
    z-index: 90;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition:
        opacity 0.25s ease,
        visibility 0.25s ease,
        transform 0.25s ease,
        background 0.2s ease;
}
.ncbc-back-to-top:hover {
    background: var(--gold-deep);
    transform: translateY(0) scale(1.06);
}
.ncbc-back-to-top:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
}
.ncbc-back-to-top svg {
    width: 18px;
    height: 18px;
}
.ncbc-back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

@media (max-width: 720px) {
    .ncbc-back-to-top {
        right: 16px;
        bottom: 16px;
        width: 44px;
        height: 44px;
    }
    .ncbc-back-to-top svg {
        width: 16px;
        height: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ncbc-back-to-top {
        transition: opacity 0.15s ease, visibility 0.15s ease;
        transform: none !important;
    }
}