/*
 * Shared polish layer, linked from every page after the Tailwind CDN script.
 * Page-specific rules stay in each page's <style>. Keep this file small: it only
 * holds rules that should behave the same on every page.
 */

/* Anchors (#book, #compare, #membership, ...) land below the fixed 80px nav. */
html { scroll-padding-top: 6rem; }

/* Smooth anchor scrolling only for people who have not asked for less motion. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto !important; }
}

/* Headings break into even lines; paragraphs never end on a single word. */
h1, h2, h3 { text-wrap: balance; }
p, li, dd, figcaption { text-wrap: pretty; }

/* Chinese: never start a line with closing punctuation (，。、） etc.). */
:lang(zh-SG) { line-break: strict; }

/* Prices and other figures keep a fixed digit width. */
.price { font-variant-numeric: tabular-nums; }

/* Keyboard focus: one gold ring everywhere, shown instantly (no transition). */
:focus-visible {
    outline: 2px solid #C5A880;
    outline-offset: 3px;
    transition: none;
}
input:focus-visible, select:focus-visible, textarea:focus-visible { outline-offset: 1px; }

/* Pressed state for pill buttons and links: the page answers the tap. */
:is(a, button)[class*="rounded-full"]:not(:disabled):active { transform: scale(0.97); }
@media (prefers-reduced-motion: reduce) {
    :is(a, button)[class*="rounded-full"]:not(:disabled):active { transform: none; }
}

/* Skip link: first focusable element on every page, hidden until focused. */
.skip-link {
    position: fixed; top: 0.75rem; left: 0.75rem; z-index: 100;
    padding: 0.5rem 1rem; border-radius: 9999px;
    background: #C5A880; color: #121316; font-size: 0.875rem; font-weight: 600;
    transform: translateY(-200%);
}
.skip-link:focus-visible { transform: none; outline-color: #F9F8F6; }