/*
Theme Name: MW Base
Theme URI: https://mwdigitalsolutions.com/
Author: MW Digital Solutions
Author URI: https://mwdigitalsolutions.com/
Description: Minimal, dependency-free parent theme for MW Digital Solutions client sites. Provides the document shell, WooCommerce support and a theme.json design-token layer. Ships no opinionated layout — client branding and markup live in a child theme or a site plugin.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mw-base
Tags: e-commerce, custom-menu, translation-ready
*/

/* MW Base deliberately ships almost no CSS.
   Design tokens come from theme.json; client styling comes from the child
   theme or the site plugin. Everything below is a reset-level baseline that
   every project wants regardless of branding. */

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

body {
    margin: 0;
    font-family: var(--wp--preset--font-family--system, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
    color: var(--wp--preset--color--foreground, #1c1c1e);
    background: var(--wp--preset--color--background, #ffffff);
    -webkit-font-smoothing: antialiased;

    /* Page shell: keeps the footer at the bottom on short pages. Owned by the
       theme so a site plugin never has to reach in and lay out the document. */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* The single content element, opened in header.php.
   `width: 100%` is load-bearing, not decorative. This is a column flex item,
   and an `auto` cross-axis margin on a flex item disables the default stretch
   and makes it shrink-to-fit instead. Site CSS very reasonably writes
   `.site-main { max-width: 1300px; margin: 0 auto; }` to centre the content —
   under a non-flex parent that is the correct idiom, but here it would collapse
   the element to the width of its widest unbreakable child. Giving the width an
   explicit basis means `max-width` + `margin: 0 auto` centre it as intended. */
.site-main {
    flex: 1 0 auto;
    width: 100%;
}

img, svg, video { max-width: 100%; height: auto; }

a { color: var(--wp--preset--color--primary, #2563eb); }

/* Screen-reader text — required for accessible skip links and labels. */
.screen-reader-text {
    border: 0;
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}
.screen-reader-text:focus {
    clip-path: none;
    height: auto;
    width: auto;
    display: block;
    top: 5px;
    left: 5px;
    z-index: 100000;
    padding: 15px 23px 14px;
    background: #fff;
    color: #000;
    font-size: 14px;
    line-height: normal;
    text-decoration: none;
}

.mw-skip-link:focus { outline: 2px solid var(--wp--preset--color--primary, #2563eb); }

/* Container used by this theme's own fallback templates. A child theme
   overrides max-width; the width basis stays here for the same flex reason
   described above. */
.mw-container {
    width: 100%;
    max-width: var(--wp--style--global--content-size, 1140px);
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
}