/* ==========================================================================
   CSS RESET - Removes browser default styles for consistency
   
   Why we need this:
   - Different browsers have different default styles
   - Chrome might add margins, Safari might add padding
   - This file makes all browsers start with the same baseline
   ========================================================================== */

/* 
   Universal selector (*) applies to ALL elements
   This removes default margin, padding, and sets box-sizing
*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Makes width/height include padding and border */
}

/* 
   Remove default styling from common elements
   This prevents unexpected spacing and styling
*/
html, body, div, span, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins,
kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i,
center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, article, aside,
canvas, details, embed, figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}

/* 
   Body defaults - sets up the foundation
   - Removes default margin
   - Sets consistent line-height for readability
   - Prevents horizontal scrolling issues
*/
body {
    line-height: 1.6;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    overflow-x: hidden; /* Prevents horizontal scroll on mobile */
}

/* 
   List styling reset
   - Removes bullets and numbers from lists
   - You can add them back in your main CSS when needed
*/
ol, ul {
    list-style: none;
}

/* 
   Quote styling reset
   - Removes default quote marks
   - You can style blockquotes however you want
*/
blockquote, q {
    quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

/* 
   Table reset
   - Removes spacing between table cells
   - Makes tables more predictable to style
*/
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* 
   Form element resets
   - Makes form inputs more consistent across browsers
   - Removes default styling so you can apply your own
*/
input, button, textarea, select {
    font: inherit; /* Inherits font from parent */
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
    background: none;
}

/* 
   Button reset
   - Removes default button styling
   - Makes buttons easier to customize
*/
button {
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    font: inherit;
}

/* 
   Link reset
   - Removes default underlines
   - You'll add your own link styling in base.css
*/
a {
    text-decoration: none;
    color: inherit;
}

/* 
   Image reset
   - Makes images responsive by default
   - Prevents images from breaking layout
*/
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* 
   Focus styles for accessibility
   - Provides visible focus indicators for keyboard navigation
   - Important for users who can't use a mouse
*/
*:focus {
    outline: 2px solid #4a90e2;
    outline-offset: 2px;
}

/* 
   Smooth scrolling for anchor links
   - Makes navigation between sections smooth
   - Works when clicking on links like #contact
*/
html {
    scroll-behavior: smooth;
}

/* 
   Text selection styling
   - Custom colors when users select text
   - Matches your brand colors
*/
::selection {
    background: #2d5a87;
    color: white;
}

::-moz-selection {
    background: #2d5a87;
    color: white;
}