/*
 * CSS Reset
 * Based on Andy Bell's Modern Reset + Josh Comeau's additions.
 * https://andy-bell.co.uk/a-more-modern-css-reset/
 *
 * Scoped to .article-post so it does not affect any other template.
 * When this becomes the site-wide baseline, remove the scope prefix.
 */

/* ─────────────────────────────────────────────────────────
   Box model
   ───────────────────────────────────────────────────────── */

*,
*::before,
*::after {
    box-sizing: border-box;
}

/* ─────────────────────────────────────────────────────────
   Margins & padding
   ───────────────────────────────────────────────────────── */

* {
    margin: 0;
    padding: 0;
}

/* ─────────────────────────────────────────────────────────
   Root & body
   ───────────────────────────────────────────────────────── */

html {
    /* 62.5% of the browser default 16px = 10px root.
       This matches the legacy theme.min.css baseline so that
       any rem values in the site header and WP core remain correct.
       New code in this template uses rem on a 10px base (e.g. 1.6rem = 16px). */
    font-size: 62.5%;

    /* Prevent font size inflation on iOS */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;

    /* Smooth anchor scrolling */
    scroll-behavior: smooth;

    /* Consistent line-height baseline */
    line-height: 1.5;
}

body {
    /* System font stack as the safe fallback */
    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        'Segoe UI',
        Roboto,
        Oxygen,
        Ubuntu,
        sans-serif;

    min-height: 100dvh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ─────────────────────────────────────────────────────────
   Typography
   ───────────────────────────────────────────────────────── */

/* Headings inherit font rather than being browser-default bold */
h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
    line-height: 1.2;
}

/* Paragraphs */
p {
    overflow-wrap: break-word;
    hyphens: auto;
}

/* Links */
a {
    color: inherit;
    text-decoration: none;
}

/* Abbreviations */
abbr[title] {
    cursor: help;
    text-decoration: underline dotted;
}

/* Code */
code,
kbd,
samp,
pre {
    font-family:
        'JetBrains Mono',
        ui-monospace,
        'Cascadia Code',
        'Source Code Pro',
        Menlo,
        Consolas,
        monospace;
    font-size: 0.9em;
}

/* Bold / strong */
b,
strong {
    font-weight: bolder;
}

/* Small */
small {
    font-size: 80%;
}

/* Superscript / subscript */
sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}
sub { bottom: -0.25em; }
sup { top: -0.5em; }

/* ─────────────────────────────────────────────────────────
   Lists
   ───────────────────────────────────────────────────────── */

ul,
ol {
    list-style: none;
}

li {
    letter-spacing: normal;
}

/* ─────────────────────────────────────────────────────────
   Media
   ───────────────────────────────────────────────────────── */

/* Keep images from overflowing their container */
img,
picture,
video,
canvas {
    max-width: 100%;
}

/* Maintain aspect ratio when only width or height is set */
img,
video {
    height: auto;
}

/* SVGs used as inline icons */
svg {
    overflow: hidden; /* IE compat */
}
svg[aria-hidden='true'] {
    pointer-events: none;
}

/* ─────────────────────────────────────────────────────────
   Forms & interactive elements
   ───────────────────────────────────────────────────────── */

button,
input,
optgroup,
select,
textarea {
    font: inherit;
    font-size: 100%;
    color: inherit;
    border: none;
    padding: 0;
    margin: 0;
    appearance: none;
    -webkit-appearance: none;
}

button {
    background: transparent;
}

input,
select,
textarea {
    background-color: #fff;
}

button,
[role='button'],
label[for] {
    cursor: pointer;
}

button:disabled,
input:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

textarea {
    resize: vertical;
}

/* Remove the default <select> arrow in IE */
select::-ms-expand {
    display: none;
}

/* ─────────────────────────────────────────────────────────
   Tables
   ───────────────────────────────────────────────────────── */

table {
    border-collapse: collapse;
    border-spacing: 0;
}

th {
    font-weight: 600;
    text-align: left;
}

/* ─────────────────────────────────────────────────────────
   Horizontal rules
   ───────────────────────────────────────────────────────── */

hr {
    border: none;
    border-top: 1px solid currentColor;
    opacity: 0.2;
    height: 0;
    overflow: visible;
}

/* ─────────────────────────────────────────────────────────
   Focus styles — accessible, not reliant on outline:none
   ───────────────────────────────────────────────────────── */

/* Show focus ring only for keyboard users */
:focus-visible {
    outline: 3px solid #005fcc;
    outline-offset: 3px;
    border-radius: 2px;
}

/* Remove focus ring for mouse/touch users */
:focus:not(:focus-visible) {
    outline: none;
}

/* ─────────────────────────────────────────────────────────
   Scrollbar (where supported)
   ───────────────────────────────────────────────────────── */

@supports (scrollbar-width: thin) {
    * {
        scrollbar-width: thin;
        scrollbar-color: rgba(0 0 0 / 0.2) transparent;
    }
}

/* ─────────────────────────────────────────────────────────
   Reduced motion
   ───────────────────────────────────────────────────────── */

@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;
    }
}

/* ─────────────────────────────────────────────────────────
   Hidden / visually hidden utility
   ───────────────────────────────────────────────────────── */

/* Completely hidden */
[hidden] {
    display: none !important;
}

/* Visible to screen readers only — use class="sr-only" */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}