/* ============================================================================
   MONEY MAP — CSS RESET & NORMALISATION
   File: css/reset.css
   Description: Removes browser default styles and sets sensible baselines
   so the application looks consistent across all browsers and devices.
   This file should be loaded AFTER tokens.css and BEFORE all other CSS files.
   ============================================================================ */


/* ============================================================================
   1. BOX SIZING
   Makes width and height include padding and border.
   Without this, a 200px-wide box with 20px padding would actually be 240px.
   With this, it stays 200px. Much more intuitive for layout.
   ============================================================================ */

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


/* ============================================================================
   2. MARGIN & PADDING RESET
   Removes all default margins and padding from every element.
   We will add back the spacing we want using our design tokens.
   ============================================================================ */

* {
    margin: 0;
    padding: 0;
}


/* ============================================================================
   3. ROOT & BODY
   Sets the base font, colour, background, and smooth scrolling.
   ============================================================================ */

html {
    /* Use the font family defined in tokens.css */
    font-family: var(--font-family);

    /* Base font size: 16px (1rem = 16px) */
    font-size: 16px;

    /* Smooth scrolling for anchor links and programmatic scrolling */
    scroll-behavior: smooth;

    /* Prevent horizontal overflow on mobile */
    overflow-x: hidden;

    /* Improve text rendering on all platforms */
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;

    /* Prevent font size inflation on mobile (Android Chrome) */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    /* Base text colour and background from tokens */
    color: var(--text-primary);
    background-color: var(--bg-main);

    /* Base font properties */
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-normal);

    /* Minimum full viewport height */
    min-height: 100vh;
    min-height: 100dvh; /* Dynamic viewport height for mobile browsers */

    /* Prevent horizontal scrolling */
    overflow-x: hidden;
}


/* ============================================================================
   4. TYPOGRAPHY RESET
   Removes default heading sizes and weights so we can control them
   explicitly in our component styles. Sets consistent line heights.
   ============================================================================ */

h1, h2, h3, h4, h5, h6 {
    /* Reset browser default sizes — we will set sizes per component */
    font-size: inherit;
    font-weight: inherit;

    /* Tighter line height for headings */
    line-height: var(--line-height-tight);

    /* Prevent headings from overflowing their containers */
    overflow-wrap: break-word;
}

p {
    /* Prevent orphaned words and overflow */
    overflow-wrap: break-word;
}

/* Remove default italic style from address */
address {
    font-style: normal;
}


/* ============================================================================
   5. LINKS
   Removes default underline and blue colour.
   Links will be styled explicitly in components.css.
   ============================================================================ */

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


/* ============================================================================
   6. LISTS
   Removes default bullets and numbering.
   Lists used for navigation and layout should not have bullets.
   Lists used for content can have bullets added back explicitly.
   ============================================================================ */

ul, ol {
    list-style: none;
}


/* ============================================================================
   7. IMAGES & MEDIA
   Makes images responsive by default and removes unwanted spacing.
   ============================================================================ */

img, picture, video, canvas, svg {
    /* Images fill their container width but never exceed it */
    display: block;
    max-width: 100%;
}

img, picture {
    /* Remove the small gap below images caused by inline display */
    height: auto;
}


/* ============================================================================
   8. FORM ELEMENTS
   Normalises form controls so they inherit the application's font and
   colour instead of using the browser's default styles.
   ============================================================================ */

input, button, textarea, select {
    /* Inherit the application's font instead of browser defaults */
    font: inherit;
    color: inherit;
}

button {
    /* Remove browser default button styling */
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
}

/* Remove the default search input styling in WebKit browsers */
input[type="search"] {
    -webkit-appearance: none;
    appearance: none;
}

/* Remove the default number input spinners (up/down arrows) */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
}

/* Remove default textarea resize handle — we control sizing */
textarea {
    resize: vertical;
}

/* Ensure form elements have consistent sizing */
fieldset {
    border: none;
}

legend {
    padding: 0;
}


/* ============================================================================
   9. TABLES
   Removes default table spacing and borders.
   Tables will be styled explicitly in components.css.
   ============================================================================ */

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

th {
    /* Reset default bold and centred alignment */
    font-weight: inherit;
    text-align: inherit;
}


/* ============================================================================
   10. FOCUS STYLES
   Provides a clear, accessible focus indicator for keyboard navigation.
   Only shows when using keyboard (Tab key), not on mouse click.
   This is critical for accessibility (WCAG requirement).
   ============================================================================ */

/* Remove default browser focus outline */
:focus {
    outline: none;
}

/* Add our custom focus ring ONLY for keyboard navigation */
:focus-visible {
    outline: 3px solid var(--brand-primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}


/* ============================================================================
   11. SELECTION COLOUR
   Customises the colour of highlighted/selected text.
   ============================================================================ */

::selection {
    background-color: var(--brand-primary-light);
    color: var(--text-primary);
}


/* ============================================================================
   12. SCROLLBAR STYLING (WebKit browsers — Chrome, Edge, Safari)
   Makes scrollbars subtle and consistent with the design.
   ============================================================================ */

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-main);
}

::-webkit-scrollbar-thumb {
    background: var(--border-dark);
    border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}


/* ============================================================================
   13. MISCELLANEOUS RESETS
   ============================================================================ */

/* Remove default blockquote styling */
blockquote {
    quotes: none;
}

/* Remove default horizontal rule styling */
hr {
    border: none;
    border-top: 1px solid var(--border-default);
    margin: var(--space-md) 0;
}

/* Ensure hidden elements are truly hidden */
[hidden] {
    display: none !important;
}

/* Prevent text selection on interactive elements (buttons, nav items) */
button, [role="button"], nav a {
    -webkit-user-select: none;
    user-select: none;
}

/* Ensure dialog elements are hidden by default */
dialog {
    display: none;
}

dialog[open] {
    display: block;
}

/* Remove default summary marker in details/summary elements */
summary {
    list-style: none;
}

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


/* ============================================================================
   14. UTILITY CLASSES
   Small helper classes used throughout the application.
   ============================================================================ */

/* Visually hide an element but keep it accessible to screen readers */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Show a screen-reader-only element when it receives focus */
.sr-only:focus {
    position: static;
    width: auto;
    height: auto;
    padding: var(--space-sm);
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

/* Truncate text with an ellipsis (...) when it overflows */
.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Prevent body scrolling when a modal is open */
body.modal-open {
    overflow: hidden;
}