/*
Theme Name:   Skin Matrix
Theme URI:    https://www.theskinmatrixclinic.com/
Author:       The Skin Matrix
Description:  Purpose-built theme for The Skin Matrix, implementing the approved gold/burgundy/ivory prototype. Owns the header, footer and single templates; page content is built with Elementor and the Skin Matrix widget set. Requires the Skin Matrix Core plugin.
Version:      1.0.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.0
License:      GPL-2.0-or-later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  skinmatrix
Tags:         custom-menu, featured-images, full-width-template, translation-ready
*/

/* ==========================================================================
   Base reset and document defaults.
   The design system itself lives in the Skin Matrix Core plugin
   (sm-tokens.css / sm-components.css) so it survives a theme change.
   ========================================================================== */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

body {
	margin: 0;
	background: var(--sm-ivory, #FAF8F5);
	color: var(--sm-charcoal, #1B1B1B);
	font-family: var(--sm-font-body, 'Inter', sans-serif);
	font-size: 15px;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

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

a {
	color: var(--sm-burgundy, #5A2F33);
}

:focus-visible {
	outline: 2px solid var(--sm-gold, #C9A15B);
	outline-offset: 2px;
}

/* The fixed header floats over a hero on almost every page, so main is
   flush by default. Templates that open with plain content — blog, search,
   404 — opt into the offset instead. */
.sm-site-main {
	padding-top: 0;
}

.sm-site-main--offset {
	padding-top: calc(var(--sm-header-offset, 96px) + 30px);
}

/* Anchor targets must clear the fixed header. */
[id] {
	scroll-margin-top: calc(var(--sm-header-offset, 96px) + 12px);
}

/* Screen-reader-only utility and skip link. */
.sm-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.sm-skip-link {
	position: absolute;
	top: -100px;
	left: 16px;
	z-index: 10500;
	padding: 12px 20px;
	background: var(--sm-burgundy, #5A2F33);
	color: #fff;
	border-radius: 0 0 10px 10px;
	font-family: var(--sm-font-btn, 'Montserrat', sans-serif);
	font-weight: 600;
	font-size: 13px;
	text-decoration: none;
	transition: top .25s ease;
}

.sm-skip-link:focus {
	top: 0;
	color: #fff;
}

/* Default article styling for blog posts, which are not Elementor-built. */
.sm-prose {
	max-width: 760px;
	margin: 0 auto;
	padding: 0 var(--sm-gutter, 40px) 80px;
}

.sm-prose h2,
.sm-prose h3 {
	font-family: var(--sm-font-head, serif);
	font-weight: 700;
	line-height: 1.2;
	margin: 1.8em 0 .5em;
}

.sm-prose h2 { font-size: 30px; }
.sm-prose h3 { font-size: 23px; }

.sm-prose p,
.sm-prose li {
	color: var(--sm-text-soft, #5d5d5d);
	font-size: 16px;
	line-height: 1.8;
}

.sm-prose img {
	border-radius: 16px;
}

.sm-prose blockquote {
	margin: 28px 0;
	padding: 18px 24px;
	border-left: 3px solid var(--sm-gold, #C9A15B);
	background: #fff;
	border-radius: 0 12px 12px 0;
}

@media (max-width: 768px) {
	.sm-prose {
		padding: 0 var(--sm-gutter-sm, 22px) 60px;
	}
}