/*
Theme Name: Materia M3
Theme URI: https://example.com/materia-m3
Author: Hsui Law
Author URI: https://example.com
Description: A full-featured Material Design 3 (Material You) WordPress theme implementing the complete M3 design system: tonal color palettes with light/dark themes, the M3 type scale, shape & elevation tokens, state layers, ripple effects, and a comprehensive component library (buttons, cards, chips, FAB, navigation rail, top app bar, search bar, dialogs, snackbars, switches, sliders, tabs, lists, menus, tooltips, text fields). Fully responsive, block-editor compatible, accessible, and translation-ready.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: materia-m3
Tags: material-design, material-you, m3, dark-mode, custom-colors, custom-menu, custom-logo, featured-images, threaded-comments, translation-ready, block-styles, wide-blocks, accessibility-ready, blog, news
*/

/* ==========================================================================
   This file holds theme metadata for WordPress and a small set of
   reset/normalization rules. The bulk of the design system lives in
   assets/css/{tokens,typography,elevation,motion,components}.css and is
   enqueued via functions.php.
   ========================================================================== */

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

html {
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    margin: 0;
    min-height: 100vh;
    line-height: 1.5;
}

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

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

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

a {
    color: inherit;
}

ul[role="list"],
ol[role="list"] {
    list-style: none;
    padding: 0;
}

/* WordPress required classes */
.alignleft  { float: left;  margin-right: 1.5rem; margin-bottom: 1rem; }
.alignright { float: right; margin-left: 1.5rem;  margin-bottom: 1rem; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.alignwide  { width: 100%; }
.alignfull  { width: 100vw; margin-left: calc(50% - 50vw); }

.wp-caption {
    max-width: 100%;
    margin-bottom: 1.5rem;
}

.wp-caption-text,
.gallery-caption {
    font-size: 0.875rem;
    color: var(--md-sys-color-on-surface-variant);
    text-align: center;
    margin-top: 0.5rem;
}

.sticky { /* required by WP for sticky posts */ }

.bypostauthor { /* required by WP for author comments */ }

.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;
    width: 1px;
    word-wrap: normal !important;
}

.screen-reader-text:focus {
    background-color: var(--md-sys-color-surface-container-high);
    border-radius: var(--md-sys-shape-corner-small);
    box-shadow: var(--md-sys-elevation-2);
    clip: auto !important;
    -webkit-clip-path: none;
    clip-path: none;
    color: var(--md-sys-color-on-surface);
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    height: auto;
    left: 1rem;
    line-height: 1.4;
    padding: 0.75rem 1rem;
    text-decoration: none;
    top: 1rem;
    width: auto;
    z-index: 100000;
}