/**
 * Deccan Trendz — base layer: reset, typography, layout primitives, buttons.
 */

/* --- Reset -------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
	background: var(--dt-bg);
	color: var(--dt-text);
	font-family: var(--dt-font-body);
	font-size: var(--dt-fs-body);
	line-height: var(--dt-lh-body);
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul[class], ol[class] { list-style: none; padding: 0; }

/* --- Headings --------------------------------------------------- */
h1, h2, h3, h4 {
	font-family: var(--dt-font-display);
	font-weight: 500;
	line-height: var(--dt-lh-snug);
	letter-spacing: 0.005em;
}
h1 { font-size: var(--dt-fs-h1); font-weight: 400; line-height: var(--dt-lh-tight); letter-spacing: -0.012em; }
h2 { font-size: var(--dt-fs-h2); letter-spacing: -0.006em; }
h3 { font-size: var(--dt-fs-h3); }

p a { color: var(--dt-accent); text-underline-offset: 0.2em; text-decoration: underline; }

/* --- Accessibility helpers ------------------------------------- */
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0);
	white-space: nowrap; border: 0;
}

.dt-skip-link {
	position: fixed;
	top: var(--dt-space-2xs);
	left: var(--dt-space-2xs);
	z-index: var(--dt-z-overlay);
	padding: 0.75em 1.25em;
	background: var(--dt-surface);
	color: var(--dt-text-on-light);
	border-radius: var(--dt-radius-md);
	transform: translateY(-160%);
	transition: transform var(--dt-dur-base) var(--dt-ease);
}
.dt-skip-link:focus { transform: translateY(0); }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--dt-focus);
	outline-offset: 3px;
	border-radius: var(--dt-radius-sm);
}

/* --- Layout primitives --------------------------------------- */
.dt-container {
	width: 100%;
	max-width: var(--dt-container);
	margin-inline: auto;
	padding-inline: var(--dt-gutter);
}
.dt-container--narrow { max-width: var(--dt-container-narrow); }

.dt-site { display: flex; flex-direction: column; min-height: 100vh; }
.dt-site__content { flex: 1 0 auto; }

.dt-section { padding-block: var(--dt-section-y); position: relative; }
.dt-section--tight { padding-block: var(--dt-space-xl); }

.dt-section__head { max-width: 44ch; margin-bottom: var(--dt-space-2xl); }
.dt-section__head--center { margin-inline: auto; text-align: center; }
.dt-section__head--end { margin-left: auto; text-align: right; }
.dt-section__title { font-weight: 400; letter-spacing: -0.014em; margin-bottom: var(--dt-space-md); }
.dt-section__intro { color: var(--dt-text-muted); font-size: var(--dt-fs-lead); max-width: 42ch; }
.dt-section__head--center .dt-section__intro { margin-inline: auto; }

.dt-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.9em;
	font-family: var(--dt-font-body);
	font-size: var(--dt-fs-eyebrow);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--dt-tracking-eyebrow);
	color: var(--dt-accent);
	margin-bottom: var(--dt-space-md);
}
.dt-eyebrow::before {
	content: "";
	width: 2.25em;
	height: 1px;
	flex: none;
	background: linear-gradient(90deg, var(--dt-accent), rgba(201, 168, 106, 0));
}
.dt-section__head--center .dt-eyebrow::before { display: none; }
@media (max-width: 560px) {
	.dt-eyebrow { gap: 0.7em; }
	.dt-eyebrow::before { width: 1.75em; }
}

/* --- Buttons ------------------------------------------------ */
.dt-btn {
	--_bg: var(--dt-accent);
	--_fg: var(--dt-black);
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	padding: 0.95em 1.7em;
	font-family: var(--dt-font-body);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: var(--dt-tracking-button);
	text-transform: uppercase;
	color: var(--_fg);
	background: var(--_bg);
	border: 1px solid var(--_bg);
	border-radius: var(--dt-radius-sm);
	white-space: nowrap;
	text-align: center;
	transition: background var(--dt-dur-base) var(--dt-ease),
		color var(--dt-dur-base) var(--dt-ease),
		border-color var(--dt-dur-base) var(--dt-ease),
		transform var(--dt-dur-base) var(--dt-ease);
}
.dt-btn:hover { transform: translateY(-2px); }
.dt-btn--lg { padding: 1.1em 2.2em; font-size: 0.85rem; }
.dt-btn--sm { padding: 0.7em 1.2em; font-size: 0.7rem; }
.dt-btn[disabled] { opacity: 0.45; pointer-events: none; }

@keyframes dt-shake {
	10%, 90% { transform: translateX(-1px); }
	30%, 70% { transform: translateX(2px); }
	50% { transform: translateX(-3px); }
}
.dt-shake { animation: dt-shake 0.4s var(--dt-ease-in-out); }

.dt-btn--gold { --_bg: var(--dt-accent); --_fg: var(--dt-black); }
.dt-btn--gold:hover { --_bg: var(--dt-accent-hover); }

.dt-btn--ivory { --_bg: var(--dt-ivory); --_fg: var(--dt-ink); }
.dt-btn--ivory:hover { --_bg: #fff; }

.dt-btn--ghost {
	--_bg: transparent;
	--_fg: var(--dt-ivory);
	border-color: var(--dt-line-strong);
}
.dt-btn--ghost:hover { --_fg: var(--dt-black); background: var(--dt-ivory); border-color: var(--dt-ivory); }

/* --- Reveal-on-scroll base state (JS adds .is-in) --------- */
.js [data-reveal],
.js [data-hero-el],
.js [data-stagger-item] {
	opacity: 0;
	transform: translateY(24px);
}
.js [data-reveal].is-in,
.js [data-hero-el].is-in,
.js [data-stagger-item].is-in {
	opacity: 1;
	transform: none;
	transition: opacity var(--dt-dur-slow) var(--dt-ease),
		transform var(--dt-dur-slow) var(--dt-ease);
}

@media (prefers-reduced-motion: reduce) {
	.js [data-reveal],
	.js [data-hero-el],
	.js [data-stagger-item] { opacity: 1; transform: none; }
}

/* --- Placeholder blocks for skeleton sections ------------- */
.dt-section--placeholder .dt-placeholder-box,
.dt-placeholder-box {
	display: grid;
	place-items: center;
	min-height: clamp(220px, 30vw, 420px);
	border: 1px dashed var(--dt-line-strong);
	border-radius: var(--dt-radius-lg);
	color: var(--dt-text-muted);
	font-family: var(--dt-font-display);
	font-size: var(--dt-fs-h3);
	background:
		repeating-linear-gradient(-45deg, transparent 0 22px, rgba(246, 241, 231, 0.03) 22px 44px);
}

/* --- WhatsApp CTA band ----------------------------------- */
.dt-cta-band { background: var(--dt-bg-alt); text-align: center; }
.dt-cta-band__inner { max-width: 40ch; margin-inline: auto; }
.dt-cta-band__title { font-size: var(--dt-fs-h2); margin-block: var(--dt-space-sm); }
.dt-cta-band__text { color: var(--dt-text-muted); margin-bottom: var(--dt-space-lg); }

/* --- Generic page / prose ------------------------------- */
.dt-page { padding-top: calc(var(--dt-header-h) + var(--dt-space-2xl)); padding-bottom: var(--dt-space-3xl); }
.dt-page__title { font-size: var(--dt-fs-h1); line-height: 1; margin-bottom: var(--dt-space-xl); }
.dt-prose :is(h2, h3) { font-family: var(--dt-font-display); margin: 1.6em 0 0.6em; }
.dt-prose h2 { font-size: var(--dt-fs-h3); }
.dt-prose p, .dt-prose li { color: var(--dt-text-muted); margin-bottom: 1em; }
.dt-prose a { color: var(--dt-accent); text-decoration: underline; text-underline-offset: 0.2em; }
.dt-prose :is(ul, ol) { padding-left: 1.4em; margin-bottom: 1em; }

/* WooCommerce cart / checkout / account tables inherit theme colours. */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
	list-style: none;
	margin: 0 0 var(--dt-space-md);
	padding: var(--dt-space-sm) var(--dt-space-md);
	border: 1px solid var(--dt-line-strong);
	border-left: 3px solid var(--dt-champagne);
	background: var(--dt-bg-alt);
}
.woocommerce table.shop_table { width: 100%; border-collapse: collapse; margin-bottom: var(--dt-space-lg); }
.woocommerce table.shop_table th,
.woocommerce table.shop_table td { padding: var(--dt-space-sm); border-bottom: 1px solid var(--dt-line); text-align: left; }
.woocommerce form .form-row { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: var(--dt-space-sm); }
.woocommerce .button, .woocommerce button.button, .woocommerce input.button, .woocommerce a.button {
	display: inline-flex; align-items: center; gap: 0.5em;
	padding: 0.9em 1.6em;
	font-size: 0.78rem; font-weight: 600; letter-spacing: var(--dt-tracking-wide); text-transform: uppercase;
	color: var(--dt-black); background: var(--dt-champagne); border: 0; border-radius: var(--dt-radius-sm);
}

/* --- Search form (native fallback) ---------------------- */
.search-form { display: flex; gap: var(--dt-space-2xs); }
.search-field {
	flex: 1;
	padding: 0.9em 1em;
	background: transparent;
	border: 1px solid var(--dt-line-strong);
	color: var(--dt-text);
	border-radius: var(--dt-radius-sm);
}