/*! 
 * Reset CSS — Cross-Browser Normalization
 * For WordPress Theme: Twenty Twenty-One
 * Version: 1.0.0
 * 
 * Provides a consistent baseline across all major browsers
 * (Chrome, Firefox, Safari, Edge, Opera, IE11+)
 *
 * HOW TO USE IN TWENTY TWENTY-ONE:
 * ────────────────────────────────
 * Option 1 — Child Theme (Recommended):
 *   1. Create a child theme folder: /wp-content/themes/twentytwentyone-child/
 *   2. Place this file inside the child theme folder.
 *   3. Enqueue it in your child theme's functions.php:
 *
 *      function mytheme_enqueue_reset_css() {
 *          wp_enqueue_style(
 *              'reset-css',
 *              get_stylesheet_directory_uri() . '/reset.css',
 *              array(),
 *              '1.0.0'
 *          );
 *      }
 *      add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_reset_css', 0 );
 *
 *   Note: Priority 0 ensures it loads BEFORE the parent theme styles.
 *
 * Option 2 — Parent Theme (Not recommended for updates):
 *   Place in /wp-content/themes/twentytwentyone/ and enqueue similarly.
 *
 * Option 3 — Plugin (Custom CSS):
 *   Paste contents into Appearance → Customize → Additional CSS.
 */


/* ==========================================================================
   1. BOX SIZING
   ========================================================================== */

/**
 * Universal box-sizing: border-box
 * Ensures padding and borders are included in element width/height.
 * Inherited by all elements for easy overriding.
 */
*,
*::before,
*::after {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

html {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}


/* ==========================================================================
   2. DOCUMENT & ROOT RESET
   ========================================================================== */

/**
 * 1. Prevent adjustments of font size after orientation changes (iOS).
 * 2. Smooth scrolling for anchor links.
 * 3. Consistent line-height across all browsers.
 * 4. Prevent tap highlight on mobile WebKit.
 * 5. Improve font rendering on macOS.
 */
html {
    -webkit-text-size-adjust: 100%;                        /* 1 */
       -moz-text-size-adjust: 100%;                        /* 1 */
        -ms-text-size-adjust: 100%;                        /* 1 */
            text-size-adjust: 100%;                        /* 1 */
    scroll-behavior: smooth;                               /* 2 */
    line-height: 1.15;                                     /* 3 */
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);        /* 4 */
    -webkit-font-smoothing: antialiased;                   /* 5 */
    -moz-osx-font-smoothing: grayscale;                    /* 5 */
}

/**
 * Remove default margin and padding from body.
 * Twenty Twenty-One may add its own — this ensures a clean slate.
 */
body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    text-rendering: optimizeLegibility;
}


/* ==========================================================================
   3. HTML5 DISPLAY DEFINITIONS
   ========================================================================== */

/**
 * Correct block display not defined in IE 10/11 and some older browsers.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
    display: block;
}

/**
 * Correct inline-block display not defined in IE 10/11.
 */
audio,
canvas,
progress,
video {
    display: inline-block;
    vertical-align: baseline;
}

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */
audio:not([controls]) {
    display: none;
    height: 0;
}

/**
 * Address `[hidden]` styling not present in IE 10/11.
 */
[hidden],
template {
    display: none;
}


/* ==========================================================================
   4. TYPOGRAPHY RESET
   ========================================================================== */

/**
 * Remove default margins from all heading and text elements.
 * Twenty Twenty-One's stylesheet will re-apply appropriate spacing.
 */
h1, h2, h3, h4, h5, h6 {
    margin: 0;
    padding: 0;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

p,
blockquote,
pre,
address,
dl, dd,
figure {
    margin: 0;
    padding: 0;
}

/**
 * Prevent `sub` and `sup` from affecting line-height.
 * Cross-browser consistent.
 */
sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup {
    top: -0.5em;
}

sub {
    bottom: -0.25em;
}

/**
 * Abbreviations — show underline where supported.
 */
abbr[title] {
    border-bottom: none;
    -webkit-text-decoration: underline dotted;
            text-decoration: underline dotted;
}

/**
 * Consistent bold weight across browsers.
 */
b,
strong {
    font-weight: bolder;
}

/**
 * Correct odd `em` font sizing in all browsers.
 */
code,
kbd,
samp,
pre {
    font-family: monospace, monospace;
    font-size: 1em;
}

/**
 * Consistent small element sizing.
 */
small {
    font-size: 80%;
}


/* ==========================================================================
   5. LINKS
   ========================================================================== */

/**
 * 1. Remove the gray background on active links in IE 10.
 * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
 */
a {
    background-color: transparent;                         /* 1 */
    -webkit-text-decoration-skip: objects;                 /* 2 */
    color: inherit;
    text-decoration: none;
}

a:active,
a:hover {
    outline-width: 0;
}


/* ==========================================================================
   6. EMBEDDED CONTENT
   ========================================================================== */

/**
 * 1. Remove border on images inside links in IE 10/11.
 * 2. Responsive images by default.
 * 3. Remove extra space below images (inline-block issue).
 */
img {
    border-style: none;                                    /* 1 */
    max-width: 100%;                                       /* 2 */
    height: auto;                                          /* 2 */
    vertical-align: middle;                                /* 3 */
    -ms-interpolation-mode: bicubic;
}

/**
 * Responsive media elements — crucial for WordPress content.
 */
embed,
iframe,
object,
video {
    max-width: 100%;
    height: auto;
}

/**
 * Correct overflow display in IE.
 */
svg:not(:root) {
    overflow: hidden;
}


/* ==========================================================================
   7. FORMS
   ========================================================================== */

/**
 * WordPress uses many form elements (search, comments, login).
 * This section ensures cross-browser consistency.
 *
 * 1. Inherit font properties from parent.
 * 2. Remove margin in Firefox and Safari.
 * 3. Consistent appearance across browsers.
 */
button,
input,
optgroup,
select,
textarea {
    font-family: inherit;                                  /* 1 */
    font-size: 100%;                                       /* 1 */
    line-height: 1.15;                                     /* 1 */
    margin: 0;                                             /* 2 */
    color: inherit;
}

/**
 * Show overflow in IE and Edge.
 */
button,
input {
    overflow: visible;
}

/**
 * Remove inheritance of text-transform in Edge, Firefox, and IE.
 */
button,
select {
    text-transform: none;
}

/**
 * Consistent clickable button styles across browsers.
 * 1. Correct inability to style in iOS and Safari.
 * 2. Remove default border radius on iOS.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
    -webkit-appearance: button;                            /* 1 */
       -moz-appearance: button;
            appearance: button;
    cursor: pointer;
    -webkit-border-radius: 0;                              /* 2 */
            border-radius: 0;
}

/**
 * Remove inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
    border-style: none;
    padding: 0;
}

/**
 * Restore focus outline removed by previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
    outline: 1px dotted ButtonText;
}

/**
 * Correct padding in Firefox.
 */
fieldset {
    padding: 0;
    margin: 0;
    border: 0;
    min-width: 0;
}

/**
 * 1. Correct text wrapping in Edge and IE.
 * 2. Correct color inheritance from fieldset in IE.
 * 3. Remove padding to prevent overlap with legend.
 */
legend {
    display: table;                                        /* 1 */
    max-width: 100%;                                       /* 1 */
    white-space: normal;                                   /* 1 */
    color: inherit;                                        /* 2 */
    padding: 0;                                            /* 3 */
}

/**
 * Remove default vertical scrollbar in IE 10/11.
 * Allow only vertical resizing.
 */
textarea {
    overflow: auto;
    resize: vertical;
}

/**
 * Consistent checkbox and radio styling.
 * 1. Box-sizing in IE 10.
 * 2. Padding in IE 10.
 */
[type="checkbox"],
[type="radio"] {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;                        /* 1 */
    padding: 0;                                            /* 2 */
}

/**
 * Correct increment/decrement button cursor in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
    height: auto;
}

/**
 * Consistent search input styling.
 * 1. Correct appearance in Chrome and Safari.
 * 2. Correct outline offset in Safari.
 */
[type="search"] {
    -webkit-appearance: textfield;                         /* 1 */
       -moz-appearance: textfield;
            appearance: textfield;
    outline-offset: -2px;                                  /* 2 */
}

/**
 * Remove inner padding and cancel button in Chrome/Safari on macOS.
 */
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

/**
 * 1. Correct inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
    -webkit-appearance: button;                            /* 1 */
    font: inherit;                                         /* 2 */
}

/**
 * Placeholder text styling — cross-browser.
 */
::-webkit-input-placeholder {
    color: inherit;
    opacity: 0.54;
}

::-moz-placeholder {
    color: inherit;
    opacity: 0.54;
}

:-ms-input-placeholder {
    color: inherit;
    opacity: 0.54;
}

::placeholder {
    color: inherit;
    opacity: 0.54;
}


/* ==========================================================================
   8. LISTS
   ========================================================================== */

/**
 * Remove default list styles.
 * WordPress navigation menus, widget lists, etc.
 */
ul,
ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

/**
 * Preserve list styles inside WordPress content areas.
 * Twenty Twenty-One uses .entry-content for post/page content.
 */
.entry-content ul,
.entry-content ol,
.comment-content ul,
.comment-content ol,
.widget_text ul,
.widget_text ol {
    list-style: revert;
    padding-left: 1.5em;
}

.entry-content ul,
.comment-content ul,
.widget_text ul {
    list-style-type: disc;
}

.entry-content ol,
.comment-content ol,
.widget_text ol {
    list-style-type: decimal;
}

dl {
    margin: 0;
}


/* ==========================================================================
   9. TABLES
   ========================================================================== */

/**
 * Consistent table rendering.
 * WordPress uses tables in post content, admin, and some plugins.
 */
table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
}

th {
    text-align: inherit;
    font-weight: inherit;
}

td,
th {
    padding: 0;
}


/* ==========================================================================
   10. INTERACTIVE ELEMENTS
   ========================================================================== */

/**
 * Add correct display in Edge, IE 10+, and Firefox.
 */
details {
    display: block;
}

summary {
    display: list-item;
    cursor: pointer;
}

/**
 * Remove outline on focused elements where focus is not visible.
 * Preserves outline for keyboard users (accessibility).
 */
:focus:not(:focus-visible) {
    outline: none;
}

:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/**
 * Consistent dialog styling (modern browsers).
 */
dialog {
    background-color: white;
    border: solid;
    color: black;
    display: block;
    height: -moz-fit-content;
    height: -webkit-fit-content;
    height: fit-content;
    left: 0;
    margin: auto;
    padding: 1em;
    position: absolute;
    right: 0;
    width: -moz-fit-content;
    width: -webkit-fit-content;
    width: fit-content;
}

dialog:not([open]) {
    display: none;
}


/* ==========================================================================
   11. MISC / UTILITY
   ========================================================================== */

/**
 * Add the correct display in IE 10.
 */
[hidden] {
    display: none !important;
}

/**
 * Consistent horizontal rule rendering.
 */
hr {
    -webkit-box-sizing: content-box;
       -moz-box-sizing: content-box;
            box-sizing: content-box;
    height: 0;
    overflow: visible;
    border: 0;
    border-top: 1px solid;
    margin: 0;
    clear: both;
    color: inherit;
}

/**
 * Remove all animations & transitions for users who prefer reduced motion.
 * Accessibility — respects OS-level setting.
 */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        -webkit-animation-duration: 0.01ms !important;
                animation-duration: 0.01ms !important;
        -webkit-animation-iteration-count: 1 !important;
                animation-iteration-count: 1 !important;
        -webkit-transition-duration: 0.01ms !important;
             -o-transition-duration: 0.01ms !important;
                transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/**
 * WordPress-specific: Ensure alignment classes work properly.
 */
.alignleft {
    float: left;
    margin-right: 1.5em;
}

.alignright {
    float: right;
    margin-left: 1.5em;
}

.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.alignwide,
.alignfull {
    clear: both;
}

/**
 * WordPress-specific: Screen reader text (accessibility).
 */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    -webkit-clip-path: inset(50%);
            clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
}

.screen-reader-text:focus {
    background-color: #f1f1f1;
    border-radius: 3px;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    clip: auto !important;
    -webkit-clip-path: none;
            clip-path: none;
    color: #21759b;
    display: block;
    font-size: 0.875rem;
    font-weight: 700;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}

/**
 * WordPress-specific: Clearfix for floated content.
 */
.wp-block-group::after,
.entry-content::after,
.comment-content::after,
.site-main::after {
    content: "";
    display: table;
    clear: both;
}


/* ==========================================================================
   12. PRINT STYLES
   ========================================================================== */

@media print {
    *,
    *::before,
    *::after {
        background: transparent !important;
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]::after {
        content: " (" attr(href) ")";
    }

    abbr[title]::after {
        content: " (" attr(title) ")";
    }

    a[href^="#"]::after,
    a[href^="javascript:"]::after {
        content: "";
    }

    pre {
        white-space: pre-wrap !important;
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }

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

    .site-header,
    .site-footer,
    .navigation,
    .no-print {
        display: none !important;
    }
}