/* ============================================================================
 * Arcpoly Theme — Base
 * Modern CSS reset + typography baseline + global element styling.
 * Mọi rule ở đây áp dụng toàn cục, KHÔNG có class.
 * ========================================================================== */

@layer reset {

/* ----- Modern reset (Josh W Comeau style + WP-friendly) ----- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

body {
    min-height: 100vh;
    line-height: var(--lh-relaxed);
}

img, picture, video, canvas, svg { display: block; max-width: 100%; }
img, picture { height: auto; }

input, button, textarea, select { font: inherit; color: inherit; }

p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }

#root, #__next { isolation: isolate; }

} /* /@layer reset */


@layer base {

body {
    background-color: var(--c-bg-0);
    color: var(--c-text);
    font-family: var(--ff-body);
    font-size: var(--fs-base);
    font-weight: var(--fw-regular);
    line-height: var(--lh-relaxed);
    overflow-x: hidden;  /* prevent rogue children */
    position: relative;
    isolation: isolate;
}

/* ============================================================================
 * SITE-WIDE BACKGROUND — aurora glow + subtle grid pattern (fixed viewport)
 * Sits behind all content (z-index -1) nhưng vẫn visible nhờ body bg-0 base.
 * Đặt FIXED để không scroll cùng nội dung — cảm giác layout "đậm chiều sâu".
 * ========================================================================== */

body::before {
    /* Aurora layer — 3 large soft radial glows */
    content: '';
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background:
        radial-gradient(ellipse 60% 45% at 15% 0%,    rgba(245, 77, 45, 0.20),  transparent 60%),
        radial-gradient(ellipse 50% 40% at 85% 10%,   rgba(99, 102, 241, 0.12), transparent 60%),
        radial-gradient(ellipse 60% 50% at 50% 100%,  rgba(168, 85, 247, 0.08), transparent 60%),
        radial-gradient(ellipse 40% 35% at 100% 80%,  rgba(34, 197, 94, 0.06),  transparent 60%);
    background-color: #0a0a0a;
}

body::after {
    /* Dot grid pattern overlay — very subtle, masked về dim ở giữa viewport */
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: radial-gradient(rgba(255,255,255,0.045) 1px, transparent 1px);
    background-size: 24px 24px;
    background-position: 0 0;
    mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 30%, transparent 90%);
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 30%, transparent 90%);
}

/* Skip background patterns khi user prefers-reduced-transparency hoặc reduced-motion (perf) */
@media (prefers-reduced-transparency) {
    body::before { display: none; }
    body::after  { display: none; }
}

/* ----- Headings ----- */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--ff-display);
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-tight);
    color: var(--c-text);
}
h1 { font-size: var(--fs-5xl); }
h2 { font-size: var(--fs-4xl); letter-spacing: var(--ls-snug); }
h3 { font-size: var(--fs-3xl); font-weight: var(--fw-semibold); letter-spacing: var(--ls-snug); }
h4 { font-size: var(--fs-2xl); font-weight: var(--fw-semibold); }
h5 { font-size: var(--fs-xl);  font-weight: var(--fw-semibold); }
h6 { font-size: var(--fs-lg);  font-weight: var(--fw-semibold); letter-spacing: var(--ls-wide); text-transform: uppercase; }

/* ----- Text ----- */
p { line-height: var(--lh-relaxed); }
p + p { margin-top: 1em; }

small, .text-sm { font-size: var(--fs-sm); }

strong, b { font-weight: var(--fw-semibold); }

/* ----- Links — global no underline (override WP block-library default) ----- */
a,
a:link,
a:visited,
a:hover,
a:active {
    color: var(--c-brand);
    text-decoration: none !important;
    transition: color var(--duration-fast) var(--ease);
}
a:hover { color: var(--c-brand-hover); }
a:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: var(--r-xs);
}
/* Default WP/Gutenberg sometimes adds underline on .entry-content a — neutralize */
.entry-content a,
.entry-content a:link,
.entry-content a:visited {
    text-decoration: none !important;
}
.entry-content a:hover {
    text-decoration: underline !important;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px !important;
}

/* ----- Lists ----- */
ul, ol { padding-left: 1.25rem; }
li + li { margin-top: 0.25em; }

/* ----- Code / preformatted ----- */
code, kbd, samp, pre {
    font-family: var(--ff-mono);
    font-size: 0.92em;
}
code {
    background: var(--c-bg-2);
    padding: 0.125em 0.4em;
    border-radius: var(--r-xs);
}
pre {
    background: var(--c-bg-1);
    border: 1px solid var(--c-border);
    border-radius: var(--r);
    padding: 1rem 1.25rem;
    overflow-x: auto;
    line-height: var(--lh-snug);
}
pre code {
    background: none;
    padding: 0;
}

/* ----- Blockquote ----- */
blockquote {
    border-left: 3px solid var(--c-brand);
    padding: 0.5rem 1.25rem;
    margin: 1.5rem 0;
    color: var(--c-text-dim);
    font-style: italic;
}

/* ----- HR ----- */
hr {
    border: none;
    border-top: 1px solid var(--c-divider);
    margin: 2rem 0;
}

/* ----- Tables ----- */
table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
}
th, td {
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--c-divider);
}
th {
    font-weight: var(--fw-semibold);
    color: var(--c-text-dim);
    font-size: var(--fs-sm);
    text-transform: uppercase;
    letter-spacing: var(--ls-wide);
}

/* ----- Selection ----- */
::selection {
    background: var(--c-brand);
    color: var(--c-text-on-brand);
}
::-moz-selection {
    background: var(--c-brand);
    color: var(--c-text-on-brand);
}

/* ----- Focus visible globally — accessible orange ring không gây vỡ layout ----- */
:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(245, 77, 45, 0.35);
    border-radius: var(--r-sm, 6px);
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    box-shadow: 0 0 0 3px rgba(245, 77, 45, 0.35);
}

/* ----- Smooth hover cho mọi interactive element (mobile no hover) ----- */
@media (hover: hover) {
    a, button, .btn, .card, [role="button"] {
        transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease, transform 150ms ease, box-shadow 150ms ease, opacity 150ms ease;
    }
}

/* ----- Scrollbar (WebKit only — Firefox uses color-scheme) ----- */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-track {
    background: var(--c-bg-0);
}
::-webkit-scrollbar-thumb {
    background: var(--c-border);
    border-radius: var(--r-pill);
    border: 2px solid var(--c-bg-0);
}
::-webkit-scrollbar-thumb:hover {
    background: var(--c-border-hi);
}

/* ----- Skip link (a11y) ----- */
.skip-link {
    position: absolute;
    top: -100px;
    left: 0.5rem;
    z-index: var(--z-tooltip);
    padding: 0.75rem 1rem;
    background: var(--c-brand);
    color: var(--c-text-on-brand);
    border-radius: 0 0 var(--r) var(--r);
    font-weight: var(--fw-semibold);
    transition: top var(--duration) var(--ease);
}
.skip-link:focus {
    top: 0;
    color: var(--c-text-on-brand);
    box-shadow: var(--sh-lg);
}

/* ----- Reduced transparency ----- */
@media (prefers-reduced-transparency) {
    body { background: var(--c-bg-0); }
}

/* ----- Force GPU on transforms ----- */
.will-animate { will-change: transform, opacity; }

} /* /@layer base */