/*
 * Universal Temple Theme – Base Styles
 *
 * Minimal reset, base element typography, layout containers, and
 * accessibility utilities. References design tokens from tokens.css.
 *
 * Phase 2: Foundation only. Navigation, header, footer, article layout,
 * card systems, and page-level components are built in Phase 3.
 *
 * @package UniversalTempleTheme
 * @version 0.2.0
 */

/* =========================================================================
 * Box-sizing
 * ====================================================================== */

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

/* =========================================================================
 * Root and body
 * ====================================================================== */

html {
	font-size: 100%; /* Respect the user's browser font-size preference. */
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	margin: 0;
	padding: 0;
	background-color: var(--utt-color-bg);
	color: var(--utt-color-text);
	font-family: var(--utt-font-body);
	font-size: var(--utt-text-md);
	font-weight: var(--utt-weight-normal);
	line-height: var(--utt-leading-normal);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* =========================================================================
 * Headings
 * ====================================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--utt-font-heading);
	font-weight: var(--utt-weight-bold);
	line-height: var(--utt-leading-snug);
	color: var(--utt-color-text);
	margin-top: var(--utt-space-8);
	margin-bottom: var(--utt-space-4);
}

h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child,
h6:first-child {
	margin-top: 0;
}

h1 { font-size: var(--utt-text-4xl); }
h2 { font-size: var(--utt-text-3xl); }
h3 { font-size: var(--utt-text-2xl); }
h4 { font-size: var(--utt-text-xl); }
h5 { font-size: var(--utt-text-lg); font-weight: var(--utt-weight-semibold); }
h6 { font-size: var(--utt-text-base); font-weight: var(--utt-weight-semibold); text-transform: uppercase; letter-spacing: 0.05em; }

/* =========================================================================
 * Paragraphs
 * ====================================================================== */

p {
	margin-top: 0;
	margin-bottom: var(--utt-space-5);
	max-width: 72ch; /* comfortable reading line length for long articles */
}

p:last-child {
	margin-bottom: 0;
}

/* =========================================================================
 * Links
 * Underlines are always visible within body content for accessibility.
 * Navigation contexts will override this in Phase 3.
 * ====================================================================== */

a {
	color: var(--utt-color-primary);
	text-decoration: underline;
	text-decoration-color: var(--utt-color-accent);
	text-underline-offset: 0.2em;
	transition: color var(--utt-transition-fast),
	            text-decoration-color var(--utt-transition-fast);
}

a:hover {
	color: var(--utt-color-primary-hover);
	text-decoration-color: var(--utt-color-primary-hover);
}

a:visited {
	color: var(--utt-color-primary);
}

/* =========================================================================
 * Lists
 * ====================================================================== */

ul,
ol {
	margin-top: 0;
	margin-bottom: var(--utt-space-5);
	padding-left: var(--utt-space-6);
}

ul ul,
ul ol,
ol ul,
ol ol {
	margin-bottom: 0;
}

li {
	margin-bottom: var(--utt-space-2);
	line-height: var(--utt-leading-relaxed);
}

li:last-child {
	margin-bottom: 0;
}

dl {
	margin-top: 0;
	margin-bottom: var(--utt-space-5);
}

dt {
	font-weight: var(--utt-weight-semibold);
	color: var(--utt-color-text);
	margin-bottom: var(--utt-space-1);
}

dd {
	margin-left: var(--utt-space-6);
	margin-bottom: var(--utt-space-3);
	color: var(--utt-color-text-muted);
}

/* =========================================================================
 * Images and media
 * ====================================================================== */

img,
svg,
video,
iframe,
embed,
object {
	max-width: 100%;
	height: auto;
	display: block;
}

figure {
	margin: var(--utt-space-8) 0;
}

figcaption {
	font-size: var(--utt-text-sm);
	color: var(--utt-color-text-muted);
	margin-top: var(--utt-space-2);
	line-height: var(--utt-leading-snug);
}

/* =========================================================================
 * Tables
 * Horizontally scrollable on narrow screens without JavaScript.
 * ====================================================================== */

.utt-table-wrapper {
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin-bottom: var(--utt-space-8);
}

table {
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
	font-size: var(--utt-text-sm);
}

th,
td {
	padding: var(--utt-space-3) var(--utt-space-4);
	text-align: left;
	border-bottom: var(--utt-border);
	vertical-align: top;
}

th {
	font-family: var(--utt-font-heading);
	font-weight: var(--utt-weight-semibold);
	background-color: var(--utt-color-surface-alt);
	color: var(--utt-color-text);
}

tr:last-child td {
	border-bottom: none;
}

/* Stand-alone tables outside a wrapper still scroll on mobile. */
table {
	display: block;
	overflow-x: auto;
}

@media (min-width: 640px) {
	table {
		display: table;
		overflow-x: visible;
	}
}

/* =========================================================================
 * Blockquotes
 * ====================================================================== */

blockquote {
	margin: var(--utt-space-8) 0;
	padding: var(--utt-space-5) var(--utt-space-6);
	border-left: 3px solid var(--utt-color-accent);
	background-color: var(--utt-color-surface);
	color: var(--utt-color-text-muted);
	font-style: italic;
}

blockquote p:last-child {
	margin-bottom: 0;
}

blockquote cite {
	display: block;
	margin-top: var(--utt-space-3);
	font-size: var(--utt-text-sm);
	font-style: normal;
	color: var(--utt-color-text);
	font-weight: var(--utt-weight-medium);
}

/* =========================================================================
 * Horizontal rule
 * ====================================================================== */

hr {
	border: none;
	border-top: var(--utt-border);
	margin: var(--utt-space-10) 0;
}

/* =========================================================================
 * Code
 * ====================================================================== */

code,
kbd,
samp {
	font-family: var(--utt-font-mono);
	font-size: 0.875em;
	background-color: var(--utt-color-surface-alt);
	padding: 0.1em 0.35em;
	border-radius: var(--utt-radius-sm);
}

pre {
	font-family: var(--utt-font-mono);
	font-size: var(--utt-text-sm);
	background-color: var(--utt-color-surface-alt);
	padding: var(--utt-space-5);
	border-radius: var(--utt-radius-md);
	overflow-x: auto;
	margin-bottom: var(--utt-space-8);
}

pre code {
	background: none;
	padding: 0;
	font-size: inherit;
}

/* =========================================================================
 * Forms – base only
 * Full search and comment form styling is added in Phase 3.
 * ====================================================================== */

label {
	display: block;
	font-size: var(--utt-text-sm);
	font-weight: var(--utt-weight-medium);
	color: var(--utt-color-text);
	margin-bottom: var(--utt-space-2);
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="number"],
textarea,
select {
	font-family: var(--utt-font-body);
	font-size: var(--utt-text-base);
	color: var(--utt-color-text);
	background-color: var(--utt-color-surface);
	border: var(--utt-border-strong);
	border-radius: var(--utt-radius-md);
	padding: var(--utt-space-3) var(--utt-space-4);
	width: 100%;
	min-height: 44px; /* accessible touch target */
	transition: border-color var(--utt-transition-fast),
	            box-shadow var(--utt-transition-fast);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
	outline: none;
	border-color: var(--utt-color-primary);
	box-shadow: 0 0 0 3px rgb(104 31 43 / 0.15);
}

/* =========================================================================
 * Buttons – base
 * Full button variant system is added in Phase 3.
 * ====================================================================== */

.wp-block-button__link,
button,
[type="button"],
[type="submit"],
[type="reset"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--utt-space-2);
	font-family: var(--utt-font-body);
	font-size: var(--utt-text-base);
	font-weight: var(--utt-weight-medium);
	line-height: 1;
	color: var(--utt-color-text-inverse);
	background-color: var(--utt-color-primary);
	border: 1px solid transparent;
	border-radius: var(--utt-radius-md);
	padding: var(--utt-space-3) var(--utt-space-6);
	min-height: 44px; /* accessible minimum touch target */
	cursor: pointer;
	text-decoration: none;
	transition: background-color var(--utt-transition-fast),
	            box-shadow var(--utt-transition-fast);
}

.wp-block-button__link:hover,
button:hover,
[type="button"]:hover,
[type="submit"]:hover,
[type="reset"]:hover {
	background-color: var(--utt-color-primary-hover);
	color: var(--utt-color-text-inverse);
	text-decoration: none;
}

/* =========================================================================
 * Layout containers
 * ====================================================================== */

.utt-container {
	max-width: var(--utt-wide-width);
	margin-right: auto;
	margin-left: auto;
	padding-right: var(--utt-container-padding);
	padding-left: var(--utt-container-padding);
}

/* Constrained content column for article body text. */
.utt-content-width {
	max-width: var(--utt-content-width);
	margin-right: auto;
	margin-left: auto;
}

.utt-main {
	padding-top: var(--utt-space-12);
	padding-bottom: var(--utt-space-16);
}

/* =========================================================================
 * Screen-reader utility (WordPress coding standards convention)
 * ====================================================================== */

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

.screen-reader-text:focus {
	background-color: var(--utt-color-surface);
	border-radius: var(--utt-radius-base);
	box-shadow: var(--utt-shadow-md);
	clip: auto !important;
	clip-path: none;
	color: var(--utt-color-primary);
	display: block;
	font-size: var(--utt-text-base);
	font-weight: var(--utt-weight-bold);
	height: auto;
	left: var(--utt-space-4);
	line-height: normal;
	padding: var(--utt-space-4) var(--utt-space-6);
	text-decoration: none;
	top: var(--utt-space-4);
	width: auto;
	z-index: var(--utt-z-toast);
}

/* =========================================================================
 * Focus states
 * Visible ring for keyboard navigation. Uses :focus-visible so mouse
 * clicks do not trigger the ring.
 * ====================================================================== */

:focus-visible {
	outline: 2px solid var(--utt-color-focus);
	outline-offset: 3px;
	border-radius: var(--utt-radius-sm);
}

:focus:not(:focus-visible) {
	outline: none;
}

/* =========================================================================
 * Reduced-motion
 * Disables animations and transitions for users who have requested it.
 * ====================================================================== */

@media (prefers-reduced-motion: reduce) {

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}