/**
 * Base CSS Foundation — Ontwo Theme
 *
 * Design tokens extracted from legacy theme
 * Source: docs/design-tokens.md
 *
 * Structure:
 * 1. CSS Custom Properties (Design Tokens)
 * 2. Base Element Styles
 * 3. Typography
 * 4. Content Area Styles
 */

/* ==========================================================================
   1. CSS Custom Properties (Design Tokens)
   ========================================================================== */

:root {
	/* Colors — Base */
	--color-black: #111111;
	--color-white: #ffffff;
	--color-gray: #acacac;
	--color-gray-shade: #eeeeee;
	--color-gray-light: #fafafa;
	--color-dark-white: #DCDCDC;

	/* Colors — Brand */
	--color-orange: #E98C00;
	--color-pink: #B83288;
	--color-red-light: #CF3835;
	--color-red: #a70800;
	--color-blue: #33608a;
	--color-green: #18987b;
	--color-green-shade: #d1eae5;

	/* Colors — Semantic */
	--color-primary: var(--color-orange);
	--color-secondary: var(--color-pink);
	--color-body: var(--color-black);
	--color-border: var(--color-gray);
	--color-error: var(--color-red);

	/* Typography — Fonts */
	--font-family: 'Ubuntu', sans-serif;
	--font-weight-regular: 400;
	--font-weight-medium: 500;
	--font-weight-bold: 700;

	/* Typography — Sizes */
	--font-size-base: 14px;
	--font-size-h1: 34px;
	--font-size-h2: 24px;
	--font-size-h3: 20px;
	--font-size-h4: 16px;
	--font-size-h5: 14px;
	--font-size-h6: 12px;
	--font-size-small: 14px;
	--font-size-large: 18px;
	--font-size-blockquote: 24px;

	/* Typography — Line Heights */
	--line-height-base: 1.5;
	--line-height-content: 1.75;
	--line-height-heading: 1.5em;
	--line-height-tight: 1.2;
	--line-height-none: 1;

	/* Spacing */
	--spacing-unit: 50px;
	--spacing-half: 25px;
	--spacing-1-5x: 75px;
	--spacing-small: 15px;
	--spacing-tiny: 5px;
	--spacing-widget: 30px;

	/* Layout */
	--container-width: calc(100% - 30px);
	--container-max-width: 1280px;
	--container-min-width: 767px;
	--content-width: 72%;
	--sidebar-width: 21%;

	/* Breakpoints (for reference in media queries) */
	--breakpoint-desktop: 1650px;
	--breakpoint-tablet: 1024px;
	--breakpoint-mobile: 875px;

	/* Shadows */
	--shadow-default: 0 2px 3px 0 rgba(0, 0, 0, 0.2);
	--shadow-submenu: 0 2px 3px 0 rgba(0, 0, 0, 0.2);

	/* Border Radius */
	--radius-button: 22px;
	--radius-button-small: 19px;
}

/* ==========================================================================
   2. Base Element Styles
   ========================================================================== */

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

html {
	font-size: var(--font-size-base);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body {
	margin: 0;
	font-family: var(--font-family);
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-base);
	color: var(--color-body);
	background: var(--color-gray-light);
}

/* ==========================================================================
   3. Typography
   ========================================================================== */

/* Headings */
h1, h2, h3, h4, h5, h6 {
	margin: 0 0 1em;
	font-family: var(--font-family);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-heading);
	color: var(--color-body);
}

h1 {
	font-size: var(--font-size-h1);
	color: var(--color-primary);
	margin-bottom: 0.5em;
}

h2 {
	font-size: var(--font-size-h2);
}

h3 {
	font-size: var(--font-size-h3);
}

h4 {
	font-size: var(--font-size-h4);
}

h5 {
	font-size: var(--font-size-h5);
}

h6 {
	font-size: var(--font-size-h6);
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
	color: inherit;
	text-decoration: none;
}

/* Paragraphs */
p {
	margin-top: var(--spacing-small);
	margin-bottom: var(--spacing-small);
}

/* Links */
a {
	color: var(--color-secondary);
	text-decoration: none;
	outline: none;
}

a:hover,
a:active {
	color: var(--color-primary);
	text-decoration: none;
	outline: none;
}

a:focus {
	text-decoration: none;
	outline: none;
}

/* Lists */
ul, ol {
	margin: 0;
	padding: 0;
}

/* Text Selection */
::selection {
	background: rgba(179, 50, 136, 0.2); /* Pink with opacity */
	text-shadow: none;
}

/* Other Elements */
mark {
	background: rgba(233, 140, 0, 0.2); /* Orange with opacity */
}

hr {
	border: 0;
	border-top: 1px solid var(--color-border);
	margin: var(--spacing-unit) 0;
}

blockquote {
	padding: 1em 2em;
	margin: 1em 2em;
	border-left: 3px solid var(--color-primary);
	font-size: var(--font-size-blockquote);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-tight);
	color: var(--color-primary);
}

blockquote::before {
	content: open-quote;
	position: absolute;
	margin: -0.1em 0 0 -0.5em;
}

blockquote::after {
	content: close-quote;
	margin-left: -0.2em;
}

blockquote p {
	display: inline;
}

/* Definition Lists */
dl {
	display: flex;
	flex-wrap: wrap;
	border-bottom: 1px solid var(--color-border);
	margin: 0;
}

dl dt,
dl dd {
	width: 70%;
	margin: 0;
	padding: 0.5em 0;
	border-top: 1px solid var(--color-border);
}

dl dt {
	width: 30%;
	padding-right: var(--spacing-half);
	font-weight: var(--font-weight-medium);
}

/* ==========================================================================
   4. Content Area Styles
   ========================================================================== */

/**
 * .entry-content is the standard WordPress class for post/page content
 * These styles ensure consistent typography within content areas
 */

.entry-content {
	line-height: var(--line-height-content);
}

.entry-content p:not(:last-child) {
	margin-bottom: 1.2em;
}

.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
	margin-top: 1em;
	margin-bottom: 1em;
	line-height: var(--line-height-tight);
	color: var(--color-primary);
}

.entry-content h1 {
	margin-top: 0;
}

.entry-content a {
	text-decoration: underline;
}

.entry-content a:hover {
	text-decoration: none;
}

/* Content Lists */
.entry-content ul {
	margin: 2em 0 2em 0.5em;
	padding: 0;
	list-style: none;
}

.entry-content ul li {
	position: relative;
	padding-left: 20px;
	margin-bottom: var(--spacing-tiny);
}

.entry-content ul li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 12px;
	width: 6px;
	height: 6px;
	background: var(--color-primary);
	border-radius: 50%;
}

.entry-content ul ul {
	margin-top: 0;
	margin-bottom: 0;
}

.entry-content ol {
	margin: 2em 0 2em 0.5em;
	padding: 0;
	list-style: none;
	counter-reset: step-counter;
}

.entry-content ol li {
	position: relative;
	padding-left: 20px;
	margin-bottom: var(--spacing-tiny);
	counter-increment: step-counter;
}

.entry-content ol li::before {
	position: absolute;
	left: 0;
	content: counter(step-counter);
	font-family: var(--font-family);
	font-weight: var(--font-weight-medium);
	line-height: inherit;
	color: var(--color-primary);
}

.entry-content ol ol {
	counter-reset: step-counter;
	margin-top: 0;
	margin-bottom: 0;
}

/* Introductory Text */
.entry-content .intro,
.entry-content .introtext {
	font-size: var(--font-size-large);
	font-weight: var(--font-weight-medium);
}

/* Images */
.entry-content img {
	max-width: 100%;
	height: auto;
}

/**
 * Breathing room around a floated image.
 *
 * Core sets margin: 0.5em 1em 0.5em 0 on an aligned image block, which assumes
 * a 16px body. Against this theme's 14px base that lands at 14px and the text
 * crowds the image. Both content wrappers are covered because an editor can set
 * alignment on any image block, in a page or a post.
 *
 * Matched on the <figure>, which only an image block produces. Classic posts
 * carried over by the migration hold a bare <img class="alignleft"> that never
 * floats, and a right margin there would just shove the text after it sideways.
 */
.page-content figure.alignleft,
.entry-content figure.alignleft {
	margin-right: var(--spacing-half);
	margin-bottom: var(--spacing-small);
}

.page-content figure.alignright,
.entry-content figure.alignright {
	margin-left: var(--spacing-half);
	margin-bottom: var(--spacing-small);
}

/* ==========================================================================
   5. Utility Classes
   ========================================================================== */

.container {
	width: var(--container-width);
	max-width: var(--container-max-width);
	margin: 0 auto;
}

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}