/* ============================================================
   CODERN
   CSS RESET
   File: css/reset.css
   Version: 1.0.0

   Purpose:
   Establish a clean and predictable browser baseline.

   This file intentionally contains:
   - Browser normalization
   - Box sizing
   - Margin/padding reset
   - Typography inheritance
   - Media normalization
   - Form normalization
   - Button/link normalization
   - Accessibility-safe defaults

   It does NOT contain:
   - Brand colors
   - Component styles
   - Layout rules
   - Animations
   - Codern-specific design
   ============================================================ */


/* ============================================================
   01. UNIVERSAL BOX MODEL
   ============================================================ */

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


/* ============================================================
   02. ROOT DOCUMENT
   ============================================================ */

html {
    /*
     * Prevent horizontal overflow caused by accidental
     * oversized elements.
     */
    overflow-x: hidden;

    /*
     * Enable smooth scrolling for browsers that support it.
     * accessibility.css will respect reduced-motion settings.
     */
    scroll-behavior: smooth;

    /*
     * Improve text rendering on supported browsers.
     */
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;

    /*
     * Prevent browser from artificially changing text sizes
     * on mobile devices.
     */
    -webkit-tap-highlight-color: transparent;
}


/* ============================================================
   03. BODY
   ============================================================ */

body {
    /*
     * Remove browser default margin.
     */
    margin: 0;

    /*
     * Prevent accidental horizontal scrolling.
     */
    min-width: 320px;

    /*
     * Improve font rendering.
     */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    /*
     * Improve text rendering.
     */
    text-rendering: optimizeLegibility;
}


/* ============================================================
   04. HEADINGS AND TEXT
   ============================================================ */

h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
figure {
    margin: 0;
    padding: 0;
}


/*
 * Headings inherit their font properties from the main
 * typography system instead of relying on browser defaults.
 */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: inherit;
    font-weight: inherit;
}


/*
 * Paragraphs should not have browser-default margins.
 */

p {
    margin: 0;
}


/* ============================================================
   05. LISTS
   ============================================================ */

ul,
ol {
    margin: 0;
    padding: 0;
    list-style: none;
}


/*
 * Description lists.
 */

dl,
dt,
dd {
    margin: 0;
    padding: 0;
}


/* ============================================================
   06. LINKS
   ============================================================ */

a {
    color: inherit;
    text-decoration: none;
}


/*
 * Images and media inside links should not create unwanted
 * inline spacing.
 */

a img {
    display: block;
}


/* ============================================================
   07. IMAGES
   ============================================================ */

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


/*
 * Images remain responsive while preserving their natural
 * aspect ratio.
 */

img {
    height: auto;
}


/*
 * SVGs should not unexpectedly shrink inside flex/grid
 * containers.
 */

svg {
    flex-shrink: 0;
}


/* ============================================================
   08. MEDIA
   ============================================================ */

audio,
video {
    vertical-align: middle;
}


/*
 * Embedded media should not exceed its container.
 */

iframe,
embed,
object {
    display: block;
    max-width: 100%;
}


/* ============================================================
   09. FIGURES
   ============================================================ */

figure {
    margin: 0;
}


/* ============================================================
   10. TABLES
   ============================================================ */

table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
}


/*
 * Table cells inherit typography from their parent.
 */

th,
td {
    padding: 0;
    text-align: inherit;
}


/* ============================================================
   11. FORMS
   ============================================================ */

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


/*
 * Remove default button appearance.

   Component-specific button styling will be handled later
   in:

   css/components/buttons.css
 */

button {
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}


/*
 * Buttons should not become transparent to keyboard users.
 * Actual focus styling will be handled by accessibility.css.
 */

button:disabled {
    cursor: not-allowed;
}


/* ============================================================
   12. INPUTS
   ============================================================ */

input,
textarea,
select {
    width: 100%;
}


/*
 * Textareas should resize vertically rather than horizontally
 * by default, preventing accidental layout overflow.
 */

textarea {
    resize: vertical;
}


/*
 * Prevent Safari/iOS from applying unexpected rounded
 * appearance to form controls.
 */

input,
textarea,
select,
button {
    appearance: none;
    -webkit-appearance: none;
}


/*
 * Search inputs can have browser-specific decorations.
 */

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
    -webkit-appearance: none;
}


/* ============================================================
   13. CHECKBOXES AND RADIO BUTTONS
   ============================================================ */

/*
 * These controls will receive their custom visual treatment
 * only where required by the application.
 */

input[type="checkbox"],
input[type="radio"] {
    width: auto;
}


/* ============================================================
   14. FIELDSET
   ============================================================ */

fieldset {
    margin: 0;
    padding: 0;
    border: 0;
}


/* ============================================================
   15. LEGEND
   ============================================================ */

legend {
    padding: 0;
}


/* ============================================================
   16. PLACEHOLDER
   ============================================================ */

::placeholder {
    opacity: 1;
}


/* ============================================================
   17. TEXT SELECTION
   ============================================================ */

::selection {
    /*
     * Actual Codern selection colors are defined here using
     * variables from variables.css.
     */
    background: var(--selection-background);
    color: var(--selection-text);
}


/* ============================================================
   18. DETAILS / SUMMARY
   ============================================================ */

summary {
    cursor: pointer;
}


/*
 * Remove the default disclosure marker because custom
 * accordion styling will be added later.
 */

summary::-webkit-details-marker {
    display: none;
}


/* ============================================================
   19. DIALOG
   ============================================================ */

dialog {
    margin: auto;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
}


/*
 * The native dialog backdrop will be styled by modal.css.
 */

dialog::backdrop {
    background: transparent;
}


/* ============================================================
   20. PROGRESS
   ============================================================ */

progress {
    vertical-align: baseline;
}


/* ============================================================
   21. HR
   ============================================================ */

hr {
    height: 0;
    margin: 0;
    border: 0;
    border-top: 1px solid currentColor;
}


/* ============================================================
   22. CODE / PRE
   ============================================================ */

code,
kbd,
samp,
pre {
    font-family: var(--font-mono);
}


/*
 * Prevent long code strings from breaking the layout.
 */

pre {
    overflow-x: auto;
}


/* ============================================================
   23. ABR / ABBR
   ============================================================ */

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


/* ============================================================
   24. ADDRESS
   ============================================================ */

address {
    font-style: normal;
}


/* ============================================================
   25. BLOCKQUOTE
   ============================================================ */

blockquote,
q {
    quotes: none;
}


blockquote::before,
blockquote::after,
q::before,
q::after {
    content: "";
}


/* ============================================================
   26. HIDDEN
   ============================================================ */

[hidden] {
    display: none !important;
}


/* ============================================================
   27. FOCUS
   ============================================================ */

/*
 * Do NOT remove focus outlines globally.

   Keyboard focus styling is intentionally handled later by:

   css/accessibility.css
 */

:focus {
    outline: none;
}


/*
 * Preserve focus visibility for keyboard navigation.

   This provides a minimal fallback until accessibility.css
   establishes the complete Codern focus system.
 */

:focus-visible {
    outline: 3px solid var(--brand-primary);
    outline-offset: 3px;
}


/* ============================================================
   28. DISABLED ELEMENTS
   ============================================================ */

[disabled] {
    cursor: not-allowed;
}


/* ============================================================
   29. INTERACTIVE MEDIA
   ============================================================ */

button,
a,
input,
textarea,
select,
summary {
    -webkit-tap-highlight-color: transparent;
}


/* ============================================================
   30. REDUCED MOTION
   ============================================================ */

/*
 * Respect users who request reduced motion.

   The complete accessibility system will be implemented in:

   css/accessibility.css
 */

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


/* ============================================================
   31. PRINT BASELINE
   ============================================================ */

@media print {

    *,
    *::before,
    *::after {
        background: transparent !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    body {
        min-width: 0;
    }

    a {
        text-decoration: underline;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 1.5cm;
    }
}