/*!
Theme Name: TinySpacer
Theme URI: https://tinyspacer.com/
Author: TinySpacer Studio
Author URI: https://tinyspacer.com/
Description: TinySpacer is a premium, Pinterest-first WordPress theme for small-space organization and storage authority sites. Built with semantic HTML5, modern CSS, and zero framework bloat for excellent Core Web Vitals.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tinyspacer
Tags: blog, one-column, two-columns, right-sidebar, custom-menu, featured-images, editor-style, threaded-comments, translation-ready, accessibility-ready
*/

/* =============================================================================
   TinySpacer — style.css
   -----------------------------------------------------------------------------
   This file holds the WordPress theme header (required), a modern CSS reset,
   and sensible base element defaults.

   The design SYSTEM (tokens, components, utilities) lives in `global.css`.
   Enqueue order matters: load global.css FIRST (tokens), then style.css.

   Suggested functions.php enqueue:
     wp_enqueue_style( 'tinyspacer-global', get_theme_file_uri( 'assets/css/global.css' ), array(), '1.0.0' );
     wp_enqueue_style( 'tinyspacer-style',  get_stylesheet_uri(), array( 'tinyspacer-global' ), '1.0.0' );
   ========================================================================== */

/* -----------------------------------------------------------------------------
   1. Modern CSS Reset
   -------------------------------------------------------------------------- */

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

* {
	margin: 0;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	-webkit-tap-highlight-color: transparent;
	scroll-behavior: smooth;
}

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

body {
	min-height: 100vh;
	min-height: 100dvh;
	line-height: var(--ts-leading-normal, 1.6);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* Media defaults — block-level, never overflow their container. */
img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
	height: auto;
}

img {
	font-style: italic; /* Styles the alt text if the image fails to load. */
}

/* Form elements inherit typography rather than using UA defaults. */
input,
button,
textarea,
select {
	font: inherit;
	color: inherit;
}

/* Avoid text overflowing its container. */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
	overflow-wrap: break-word;
}

/* Balance headline wrapping where supported for a more editorial look. */
h1,
h2,
h3 {
	text-wrap: balance;
}

p {
	text-wrap: pretty;
}

/* Remove list styling only when a list is used as a UI construct. */
ul[role="list"],
ol[role="list"] {
	list-style: none;
	padding: 0;
}

/* Root stacking context for portals/overlays. */
#root,
#__next,
#page {
	isolation: isolate;
}

/* -----------------------------------------------------------------------------
   2. Base Element Defaults
   -------------------------------------------------------------------------- */

body {
	font-family: var(--ts-font-body);
	font-size: var(--ts-text-base);
	font-weight: var(--ts-weight-regular);
	color: var(--ts-color-text);
	background-color: var(--ts-color-bg);
}

/* Headings use the display face. Sizes come from the type scale utilities
   and per-element rules in global.css; here we set family + rhythm only. */
h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--ts-font-heading);
	font-weight: var(--ts-weight-semibold);
	line-height: var(--ts-leading-tight);
	color: var(--ts-color-heading);
	letter-spacing: var(--ts-tracking-tight);
}

/* Flow spacing: vertical rhythm between stacked content elements. */
p,
ul,
ol,
figure,
blockquote,
pre,
table {
	margin-block-end: var(--ts-space-4);
}

a {
	color: var(--ts-color-link);
	text-decoration-line: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
	text-decoration-color: color-mix(in srgb, var(--ts-color-link) 40%, transparent);
	transition: color var(--ts-transition-fast), text-decoration-color var(--ts-transition-fast);
}

a:hover {
	color: var(--ts-color-link-hover);
	text-decoration-color: currentColor;
}

strong,
b {
	font-weight: var(--ts-weight-semibold);
}

small {
	font-size: var(--ts-text-sm);
}

blockquote {
	padding-inline-start: var(--ts-space-5);
	border-inline-start: 3px solid var(--ts-color-primary);
	color: var(--ts-color-text-muted);
	font-style: italic;
}

code,
kbd,
samp,
pre {
	font-family: var(--ts-font-mono);
	font-size: 0.9em;
}

code {
	padding: 0.15em 0.4em;
	background-color: var(--ts-color-surface-alt);
	border: 1px solid var(--ts-color-border);
	border-radius: var(--ts-radius-sm);
}

pre {
	padding: var(--ts-space-4);
	overflow-x: auto;
	background-color: var(--ts-color-surface-alt);
	border: 1px solid var(--ts-color-border);
	border-radius: var(--ts-radius-md);
}

pre code {
	padding: 0;
	background: none;
	border: 0;
}

hr {
	height: 1px;
	margin-block: var(--ts-space-8);
	border: 0;
	background-color: var(--ts-color-border);
}

table {
	width: 100%;
	border-collapse: collapse;
}

th,
td {
	padding: var(--ts-space-3);
	text-align: start;
	border-bottom: 1px solid var(--ts-color-border);
}

th {
	font-family: var(--ts-font-heading);
	font-weight: var(--ts-weight-medium);
}

figcaption {
	margin-block-start: var(--ts-space-2);
	font-size: var(--ts-text-sm);
	color: var(--ts-color-text-muted);
}

/* -----------------------------------------------------------------------------
   3. WordPress Core Markup Helpers
   -------------------------------------------------------------------------- */

.alignleft {
	float: left;
	margin-inline-end: var(--ts-space-5);
	margin-block-end: var(--ts-space-3);
}

.alignright {
	float: right;
	margin-inline-start: var(--ts-space-5);
	margin-block-end: var(--ts-space-3);
}

.aligncenter {
	display: block;
	margin-inline: auto;
}

.alignwide {
	max-width: var(--ts-container-wide);
}

.alignfull {
	max-width: 100%;
}

.wp-caption {
	max-width: 100%;
}

.wp-caption-text,
.gallery-caption {
	margin-block-start: var(--ts-space-2);
	font-size: var(--ts-text-sm);
	color: var(--ts-color-text-muted);
	text-align: center;
}

.sticky,
.bypostauthor {
	display: block;
}

/* Native WordPress admin bar offset safety. */
.admin-bar :target {
	scroll-margin-top: calc(var(--ts-space-16) + 32px);
}