/*!
Theme Name: Mystwood Studios AB
Theme URI: https://mystwoodstudios.com
Author: Mystwood Studios
Author URI: https://mystwoodstudios.com
Description: Custom WordPress theme for the Mystwood Studios website. Block-pattern architecture, custom-on-_s base. Powers mystwoodstudios.com.
Version: 0.3.3
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: mystwood-studios-ab
Tags: blog, two-columns, right-sidebar, custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, block-patterns, full-site-editing

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Mystwood Studios AB is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms (native form-control fallbacks)
# Utilities
	- Accessibility
	- Alignments

NOTE (Topic 17 RENDER-WP1):
This stylesheet is the THIN SHELL. Every visual rule above the base layer has
moved out:
  - Nav / header / footer  -> assets/css/components/_{header,footer}.css
  - Buttons                -> assets/css/components/_button.css
  - Section visuals (hero, body, card-grid, media-text, faq, cta-band, form,
    key-facts, timeline, gallery, divider)
                           -> assets/css/sections/_<name>.css
  - Section composition lives in inc/sections/*.php
Do not reintroduce component or section CSS here.
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document */
html {
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
}

/* Sections */
body {
	margin: 0;
}

main {
	display: block;
}

h1 {
	font-size: 2em;
	margin: 0.67em 0;
}

/* Grouping content */
hr {
	box-sizing: content-box;
	height: 0;
	overflow: visible;
}

pre {
	font-family: monospace, monospace;
	font-size: 1em;
}

/* Text-level semantics */
a {
	background-color: transparent;
}

abbr[title] {
	border-bottom: none;
	text-decoration: underline;
	text-decoration: underline dotted;
}

b,
strong {
	font-weight: bolder;
}

code,
kbd,
samp {
	font-family: monospace, monospace;
	font-size: 1em;
}

small {
	font-size: 80%;
}

sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

/* Embedded content */
img {
	border-style: none;
}

/* Forms — native browser normalization (component-level button styles live in
   assets/css/components/_button.css). */
button,
input,
optgroup,
select,
textarea {
	font-family: inherit;
	font-size: 100%;
	line-height: 1.15;
	margin: 0;
}

button,
input {
	overflow: visible;
}

button,
select {
	text-transform: none;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
	-webkit-appearance: button;
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
	border-style: none;
	padding: 0;
}

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
	outline: 1px dotted ButtonText;
}

fieldset {
	padding: 0.35em 0.75em 0.625em;
}

legend {
	box-sizing: border-box;
	color: inherit;
	display: table;
	max-width: 100%;
	padding: 0;
	white-space: normal;
}

progress {
	vertical-align: baseline;
}

textarea {
	overflow: auto;
}

[type="checkbox"],
[type="radio"] {
	box-sizing: border-box;
	padding: 0;
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
	height: auto;
}

[type="search"] {
	-webkit-appearance: textfield;
	outline-offset: -2px;
}

[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

::-webkit-file-upload-button {
	-webkit-appearance: button;
	font: inherit;
}

/* Interactive */
details {
	display: block;
}

summary {
	display: list-item;
}

/* Misc */
template {
	display: none;
}

[hidden] {
	display: none;
}

/* Box sizing
--------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: inherit;
}

html {
	box-sizing: border-box;
}

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/

/* Typography
--------------------------------------------- */
body,
button,
input,
select,
optgroup,
textarea {
	color: #404040;
	/* Topic 27 BRAND-WP5 — body/UI copy is Poppins (Claude Design body family).
	   Reads the --mw-font-body token (theme-tokens.css); the literal stack is a
	   fallback for the FOUT window / token-load failure. This rule supersedes
	   the _s default apple-system stack that previously won over critical.css. */
	font-family: var(--mw-font-body, "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
	font-size: 1rem;
	line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
	/* Topic 27 BRAND-WP5 — Ice Cream Man ships a single 400 weight, so display
	   headings render at 400 and lean on size (not weight) for hierarchy. This
	   stops the browser synthesising a faux-bold from the 400 face. Matches the
	   Claude Design system, where display titles are weight 400 throughout. */
	font-weight: 400;
}

p {
	margin-bottom: 1.5em;
}

dfn,
cite,
em,
i {
	font-style: italic;
}

blockquote {
	margin: 0 1.5em;
}

address {
	margin: 0 0 1.5em;
}

pre {
	background: #eee;
	font-family: "Courier 10 Pitch", courier, monospace;
	line-height: 1.6;
	margin-bottom: 1.6em;
	max-width: 100%;
	overflow: auto;
	padding: 1.6em;
}

code,
kbd,
tt,
var {
	font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}

abbr,
acronym {
	border-bottom: 1px dotted #666;
	cursor: help;
}

mark,
ins {
	background: #fff9c0;
	text-decoration: none;
}

big {
	font-size: 125%;
}

/* Elements
--------------------------------------------- */
/*
 * Body background is owned by theme.json `styles.color.background` (bg-dark).
 * Do NOT hardcode `body { background: #fff }` here — global styles render BEFORE
 * style.css in the cascade, so this would silently override the dark theme.
 */

hr {
	background-color: #ccc;
	border: 0;
	height: 1px;
	margin-bottom: 1.5em;
}

ul,
ol {
	margin: 0 0 1.5em 3em;
}

ul {
	list-style: disc;
}

ol {
	list-style: decimal;
}

li > ul,
li > ol {
	margin-bottom: 0;
	margin-left: 1.5em;
}

dt {
	font-weight: 700;
}

dd {
	margin: 0 1.5em 1.5em;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
	max-width: 100%;
}

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

figure {
	margin: 1em 0;
}

table {
	margin: 0 0 1.5em;
	width: 100%;
}

/* Links — DEFAULTS, never overrides (Topic 33 FIX-WP15, 2026-07-29)
---------------------------------------------
 * These replace the stock Underscores rules that shipped with the theme:
 *
 *     a                        { color: #4169e1; }   royalblue
 *     a:visited                { color: #800080; }   purple
 *     a:hover, a:focus, a:active { color: #191970; } midnightblue
 *     a:focus                  { outline: thin dotted; }
 *     a:hover, a:active        { outline: 0; }
 *
 * The defect was specificity, not colour. Those rules are unscoped element
 * selectors carrying a pseudo-class — (0,1,1) — which outranks EVERY
 * single-class component rule in this theme. They were written as defaults and
 * behaved as site-wide overrides: `.mw-btn--primary { color: … }` is (0,1,0),
 * so every `<a>`-based primary CTA repainted its label midnightblue on hover
 * (2.93:1) and focus (3.25:1). Measured 2026-07-29 across 22 pages: 131 links
 * took the midnightblue, and 5 elements were still painting royalblue at rest —
 * including `press@mystwoodstudios.com` on `/press-kit/` at 3.95:1, a live AA
 * failure that had been sitting in prose since the theme was scaffolded.
 *
 * `:where()` carries ZERO specificity, so these now apply only where nothing
 * else has an opinion and any component rule wins outright. That is the actual
 * repair: it turns an accidental override back into a default, and it means the
 * next component to style an `<a>` is not silently trapped the same way.
 * Per G11 this is fixed at the root rather than by adding `.mw-btn--primary:hover`
 * overrides to out-specify it — an override would leave the trap armed.
 *
 * Colours come from the surface-aware tokens FIX-WP1 already built in
 * `assets/css/theme-tokens.css`: ink `#5654E5` on light bands, glow `#A8A7FF`
 * on dark ones. FIX-WP1 deliberately declined to ship a bare
 * `a { color: var(--mw-link-color) }` because it would recolour every link on
 * the site — it was right, and an even broader rule was already sitting here.
 *
 * `:visited` is dropped entirely rather than re-pointed. There is no brand
 * visited colour, and a distinct visited state is not a WCAG requirement.
 *
 * Focus is signalled by a ring and NEVER by colour alone (WCAG 1.4.1), so
 * `:focus` no longer changes `color`. The ring replaces `outline: thin dotted`,
 * which was still the only focus indicator on header nav, card view links and
 * lore card links. It reuses `--mw-btn-focus-ring` (FIX-WP14) so it is
 * surface-aware for free. The old `a:hover, a:active { outline: 0 }` is gone —
 * it would strip the ring from any focused link that also happened to be
 * hovered.
 */
:where(a) {
	color: var(--mw-link-color);
}

:where(a:hover, a:active) {
	color: var(--mw-link-hover);
}

:where(a:focus-visible) {
	outline: 2px solid var(--mw-btn-focus-ring, var(--mw-color-primary-glow, #A8A7FF));
	outline-offset: 2px;
	border-radius: 2px;
}

/* Forms — native form-control fallbacks
--------------------------------------------- */
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	border: 1px solid;
	border-color: #ccc #ccc #bbb;
	border-radius: 3px;
	background: #e6e6e6;
	color: rgba(0, 0, 0, 0.8);
	line-height: 1;
	padding: 0.6em 1em 0.4em;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	border-color: #ccc #bbb #aaa;
}

button:active,
button:focus,
input[type="button"]:active,
input[type="button"]:focus,
input[type="reset"]:active,
input[type="reset"]:focus,
input[type="submit"]:active,
input[type="submit"]:focus {
	border-color: #aaa #bbb #bbb;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
	color: #666;
	border: 1px solid #ccc;
	border-radius: 3px;
	padding: 3px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
	color: #111;
}

select {
	border: 1px solid #ccc;
}

textarea {
	width: 100%;
}

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/

/* Accessibility
--------------------------------------------- */

/* Text meant only for screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	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;
	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;
}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
	outline: 0;
}

/* Alignments
--------------------------------------------- */
.alignleft {
	/*rtl:ignore*/
	float: left;
	/*rtl:ignore*/
	margin-right: 1.5em;
	margin-bottom: 1.5em;
}

.alignright {
	/*rtl:ignore*/
	float: right;
	/*rtl:ignore*/
	margin-left: 1.5em;
	margin-bottom: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1.5em;
}

/* Clearings — required by _s base. */
.clear:before,
.clear:after,
.entry-content:before,
.entry-content:after,
.comment-content:before,
.comment-content:after,
.site-header:before,
.site-header:after,
.site-content:before,
.site-content:after,
.site-footer:before,
.site-footer:after {
	content: "";
	display: table;
	table-layout: fixed;
}

.clear:after,
.entry-content:after,
.comment-content:after,
.site-header:after,
.site-content:after,
.site-footer:after {
	clear: both;
}