/*!
 * Colores Cosmetic Surgery — Theme Frontend
 * --------------------------------------------------------------------
 * All visual tokens are CSS variables emitted from inc/dynamic-css.php.
 * Edit them through the admin dashboard, NOT this file.
 *
 * Author: Feedback Studios LLC · feedback-studios.com
 */

/* Reset & base */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--colores-bg);
	color: var(--colores-text);
	font-family: var(--colores-font-body);
	font-size: var(--colores-fs-body);
	font-weight: var(--colores-fw-body);
	line-height: var(--colores-lh-body);
	-webkit-font-smoothing: antialiased;
	transition: background-color var(--colores-transition) ease, color var(--colores-transition) ease;
}
img, svg, video { max-width: 100%; display: block; height: auto; }
a {
	color: var(--colores-primary);
	text-decoration: none;
	transition: color var(--colores-transition) ease;
}
a:hover { color: var(--colores-primary-hover); }

/* Skip link (a11y) */
.colores-skip {
	position: absolute; left: -9999px; top: 0;
	padding: .8rem 1.2rem;
	background: var(--colores-primary); color: var(--colores-bg);
	font-weight: 600; z-index: 9999;
}
.colores-skip:focus { left: 1rem; top: 1rem; }

/* Selection */
::selection { background: var(--colores-primary); color: var(--colores-bg); }

/* Typography */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--colores-font-heading);
	font-weight: var(--colores-fw-heading);
	line-height: var(--colores-lh-heading);
	letter-spacing: var(--colores-tracking-h);
	margin: 0 0 .8em;
	color: var(--colores-text);
}
h1 { font-size: clamp(2.5rem, 6vw, calc(var(--colores-fs-h1) * 1px / 16 * 1rem)); font-weight: 300; }
h2 { font-size: clamp(2rem, 4vw, calc(var(--colores-fs-h2) * 1px / 16 * 1rem)); }
h3 { font-size: calc(var(--colores-fs-h3) * 1px); }
h4 { font-size: calc(var(--colores-fs-h4) * 1px); }
h5 { font-size: calc(var(--colores-fs-h5) * 1px); }
h6 { font-size: calc(var(--colores-fs-h6) * 1px); }

p { margin: 0 0 1rem; max-width: 70ch; }

/* Eyebrow label */
.colores-eyebrow {
	font-family: var(--colores-font-eyebrow);
	font-weight: var(--colores-fw-eyebrow);
	font-size: .72rem;
	letter-spacing: var(--colores-tracking-eyebrow);
	text-transform: uppercase;
	color: var(--colores-primary);
	display: inline-flex;
	align-items: center;
	gap: .7rem;
}
.colores-eyebrow::before {
	content: ""; width: 28px; height: 1px; background: var(--colores-primary);
}

/* Foil text gradient */
.colores-foil {
	background: linear-gradient(135deg, #f4cfa4 0%, var(--colores-primary) 35%, #8a5e3f 70%, var(--colores-primary-hover) 100%);
	-webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Container */
.colores-container {
	max-width: var(--colores-maxw);
	margin: 0 auto;
	padding: 0 clamp(1.5rem, 4vw, 3rem);
}
.colores-container.is-wide   { max-width: var(--colores-wide-w); }
.colores-container.is-narrow { max-width: var(--colores-content-w); }
.colores-container.is-full   { max-width: 100%; padding: 0; }

/* Site header */
.colores-site-header {
	position: sticky; top: 0; z-index: 100;
	padding: 1.5rem clamp(1.5rem, 4vw, 3rem);
	background: rgba(10, 8, 7, 0.7);
	backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
	border-bottom: 1px solid var(--colores-border);
}
html[data-theme="light"] .colores-site-header {
	background: rgba(241, 235, 226, 0.85);
}
.colores-site-header__inner {
	max-width: var(--colores-maxw);
	margin: 0 auto;
	display: flex; align-items: center; justify-content: space-between;
	gap: 2rem;
}
.colores-logo { max-height: 60px; width: auto; }
.colores-logo--vertical { max-height: 90px; }

/* Navigation */
.colores-nav { display: flex; gap: 2rem; align-items: center; flex-wrap: wrap; }
.colores-nav__menu { list-style: none; display: flex; gap: 2rem; padding: 0; margin: 0; flex-wrap: wrap; }
.colores-nav__menu a {
	color: var(--colores-text);
	font-size: .88rem;
	letter-spacing: .04em;
	font-weight: 400;
	text-decoration: none;
	position: relative;
	padding: .4rem 0;
}
.colores-nav__menu a::after {
	content: ""; position: absolute; bottom: 0; left: 0;
	width: 0; height: 1px; background: var(--colores-primary);
	transition: width .3s ease;
}
.colores-nav__menu a:hover::after,
.colores-nav__menu .current-menu-item > a::after { width: 100%; }

/* Mobile burger */
.colores-burger {
	display: none;
	background: none; border: none; padding: 8px; cursor: pointer;
	color: var(--colores-text);
}
.colores-burger span {
	display: block; width: 22px; height: 1.5px;
	background: currentColor; margin: 4px 0;
	transition: transform .3s ease, opacity .3s ease;
}
.colores-burger.is-open span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.colores-burger.is-open span:nth-child(2) { opacity: 0; }
.colores-burger.is-open span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

@media (max-width: 900px) {
	.colores-burger { display: block; }
	.colores-nav__menu {
		position: fixed; top: 0; right: -100%;
		flex-direction: column;
		width: 280px; max-width: 80vw; height: 100vh;
		padding: 6rem 2rem 2rem;
		background: var(--colores-bg-alt);
		border-left: 1px solid var(--colores-border);
		transition: right .35s cubic-bezier(.7,0,.3,1);
	}
	.colores-nav.is-open .colores-nav__menu { right: 0; }
}

/* Buttons */
.colores-btn {
	display: inline-flex; align-items: center; gap: .6rem;
	padding: .9rem 1.6rem;
	border-radius: 999px;
	font-size: .82rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	font-weight: 500;
	font-family: var(--colores-font-body);
	cursor: pointer;
	border: 1px solid var(--colores-border);
	background: transparent;
	color: var(--colores-text);
	transition: background var(--colores-transition) ease, border-color var(--colores-transition) ease, color var(--colores-transition) ease, transform .2s ease;
	text-decoration: none;
}
.colores-btn:hover {
	border-color: var(--colores-primary);
	color: var(--colores-primary-hover);
}
.colores-btn--primary {
	background: linear-gradient(135deg, #f4cfa4 0%, var(--colores-primary) 50%, #8a5e3f 100%);
	color: #1a120c;
	border-color: transparent;
	box-shadow: 0 8px 24px -10px rgba(200, 147, 104, .55);
}
.colores-btn--primary:hover { transform: translateY(-1px); color: #1a120c; }

/* Theme toggle component */
.colores-mode-toggle {
	background: none; border: none; cursor: pointer;
	display: inline-flex; align-items: center; gap: .7rem;
	color: var(--colores-text);
	font-family: var(--colores-font-body);
	padding: 0;
}
.colores-mode-toggle__track {
	position: relative;
	width: 50px; height: 26px;
	border-radius: 999px;
	background: var(--colores-bg-alt);
	border: 1px solid var(--colores-border);
	display: inline-flex; align-items: center; justify-content: space-between;
	padding: 0 5px;
	transition: background var(--colores-transition) ease;
}
.colores-mode-toggle.is-size-sm .colores-mode-toggle__track { width: 40px; height: 22px; }
.colores-mode-toggle.is-size-lg .colores-mode-toggle__track { width: 60px; height: 32px; }
.colores-mode-toggle__icon { width: 12px; height: 12px; color: var(--colores-text-muted); }
.colores-mode-toggle__thumb {
	position: absolute;
	top: 2px; left: 2px;
	width: 20px; height: 20px;
	border-radius: 50%;
	background: var(--colores-primary);
	transition: transform var(--colores-transition) cubic-bezier(.7,0,.3,1);
}
.colores-mode-toggle.is-size-sm .colores-mode-toggle__thumb { width: 16px; height: 16px; }
.colores-mode-toggle.is-size-lg .colores-mode-toggle__thumb { width: 26px; height: 26px; }
html[data-theme="light"] .colores-mode-toggle__thumb { transform: translateX(24px); }
html[data-theme="light"] .colores-mode-toggle.is-size-sm .colores-mode-toggle__thumb { transform: translateX(18px); }
html[data-theme="light"] .colores-mode-toggle.is-size-lg .colores-mode-toggle__thumb { transform: translateX(28px); }

.colores-mode-toggle__label .is-light-label { display: none; }
html[data-theme="light"] .colores-mode-toggle__label .is-dark-label  { display: none; }
html[data-theme="light"] .colores-mode-toggle__label .is-light-label { display: inline; }

/* Main content wrap */
.colores-site-main {
	min-height: 60vh;
	padding: clamp(2rem, 5vw, 5rem) 0;
}
.colores-entry {
	max-width: var(--colores-content-w);
	margin: 0 auto;
	padding: 0 clamp(1.5rem, 4vw, 3rem);
}
.colores-entry__title {
	font-size: clamp(2.4rem, 5vw, 4rem);
	font-weight: 300;
	margin-bottom: 1rem;
}
.colores-entry__meta {
	font-family: var(--colores-font-eyebrow);
	font-size: .72rem;
	letter-spacing: var(--colores-tracking-eyebrow);
	text-transform: uppercase;
	color: var(--colores-text-muted);
	margin-bottom: 2.5rem;
}
.colores-entry__featured { margin-bottom: 3rem; border-radius: var(--colores-radius); overflow: hidden; }
.colores-entry__content { font-size: 1.05rem; line-height: 1.8; }
.colores-entry__content > * + * { margin-top: 1.2rem; }
.colores-entry__content blockquote {
	border-left: 3px solid var(--colores-primary);
	padding-left: 1.5rem;
	margin: 2rem 0;
	font-family: var(--colores-font-heading);
	font-style: italic;
	font-size: 1.4rem;
	color: var(--colores-text);
}
.colores-entry__content img { border-radius: var(--colores-radius); margin: 2rem 0; }

/* Site footer */
.colores-site-footer {
	background: var(--colores-bg-alt);
	border-top: 1px solid var(--colores-border);
	padding: clamp(3rem, 6vw, 5rem) clamp(1.5rem, 4vw, 3rem) 2rem;
	margin-top: clamp(3rem, 6vw, 5rem);
}
.colores-site-footer__inner {
	max-width: var(--colores-maxw);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.5fr repeat(3, 1fr);
	gap: 3rem;
	margin-bottom: 3rem;
}
@media (max-width: 900px) {
	.colores-site-footer__inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
	.colores-site-footer__inner { grid-template-columns: 1fr; }
}
.colores-site-footer h5 {
	font-size: .72rem;
	letter-spacing: var(--colores-tracking-eyebrow);
	text-transform: uppercase;
	color: var(--colores-primary);
	font-family: var(--colores-font-eyebrow);
	font-weight: 500;
	margin-bottom: 1rem;
}
.colores-site-footer ul { list-style: none; padding: 0; margin: 0; }
.colores-site-footer ul a { color: var(--colores-text-muted); display: block; padding: .3rem 0; font-size: .9rem; }
.colores-site-footer ul a:hover { color: var(--colores-primary); }
.colores-site-footer__bottom {
	max-width: var(--colores-maxw);
	margin: 0 auto;
	padding-top: 2rem;
	border-top: 1px solid var(--colores-border);
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	font-size: .78rem;
	color: var(--colores-text-muted);
	font-family: var(--colores-font-eyebrow);
	letter-spacing: .1em;
}
.colores-credit { font-style: italic; }
.colores-credit a { color: var(--colores-primary); }

/* Form elements */
input[type="text"], input[type="email"], input[type="url"], input[type="tel"],
input[type="number"], input[type="search"], input[type="password"], textarea, select {
	background: var(--colores-bg-alt);
	color: var(--colores-text);
	border: 1px solid var(--colores-border);
	border-radius: var(--colores-radius);
	padding: .8rem 1rem;
	font-family: var(--colores-font-body);
	font-size: .92rem;
	width: 100%;
	transition: border-color var(--colores-transition) ease;
}
input:focus, textarea:focus, select:focus {
	outline: none;
	border-color: var(--colores-primary);
}

/* Block editor styles when used on the front-end */
.has-colores-bg-color      { background-color: var(--colores-bg) !important; }
.has-colores-primary-color { color: var(--colores-primary) !important; }
.has-colores-text-color    { color: var(--colores-text) !important; }
.has-colores-muted-color   { color: var(--colores-text-muted) !important; }
.has-colores-accent-color  { color: var(--colores-accent) !important; }

/* Comments list */
.colores-comments { margin-top: 4rem; padding-top: 3rem; border-top: 1px solid var(--colores-border); }

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* WordPress core block alignment */
.alignwide  { max-width: var(--colores-wide-w); margin-left: auto; margin-right: auto; }
.alignfull  { max-width: 100%; }
.aligncenter { margin-left: auto; margin-right: auto; }

/* Search & 404 minimal */
.colores-empty {
	text-align: center;
	padding: 4rem 1rem;
	color: var(--colores-text-muted);
}
.colores-empty h1 { font-size: clamp(3rem, 8vw, 6rem); color: var(--colores-primary); }