/* ==========================================================================
   MIYAAR brand skin for Form
   Palette, typefaces and type scale from COMPANY-PROFILE-DESIGN-SYSTEM.md.
   Section 5 enforces the anti-template rules from that same document.
   ========================================================================== */

/* 1. Typefaces
   ------------------------------------------------------------------------ */

@font-face {
	font-family: 'Relicta';
	src: url('../fonts/Relicta-Light.woff2') format('woff2');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Relicta';
	src: url('../fonts/Relicta-UltraboldItalic.woff2') format('woff2');
	font-weight: 800;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Trueno';
	src: url('../fonts/TruenoUltLt.woff2') format('woff2');
	font-weight: 200;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Trueno';
	src: url('../fonts/TruenoLt.woff2') format('woff2');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Trueno';
	src: url('../fonts/TruenoSBd.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

/* 2. Tokens
   ------------------------------------------------------------------------ */

:root {
	--miyaar-ink: #151613;
	--miyaar-paper: #f1efe8;
	--miyaar-clay: #e6e0d5;
	--miyaar-forest: #1e2b24;
	--miyaar-bronze: #9f7b4f;
	--miyaar-soft-white: #f9f7f1;
	--miyaar-line: rgba(21, 22, 19, 0.18);

	--miyaar-display: 'Relicta', Georgia, serif;
	--miyaar-text: 'Trueno', 'Helvetica Neue', Arial, sans-serif;

	/* Baseline unit is 8px; steps follow the profile spacing scale. */
	--miyaar-space-2: 16px;
	--miyaar-space-3: 24px;
	--miyaar-space-4: 32px;
	--miyaar-space-6: 48px;
	--miyaar-space-8: 64px;
	--miyaar-space-12: 96px;
	--miyaar-space-16: 128px;
}

/* Map Form's own custom properties onto the MIYAAR palette so theme
   components inherit the brand instead of the demo colours. */
:root,
.scheme_default,
.scheme_dark,
.scheme_light {
	--theme-color-bg_color: var(--miyaar-paper);
	--theme-color-alter_bg_color: var(--miyaar-clay);
	--theme-color-text: var(--miyaar-ink);
	--theme-color-text_dark: var(--miyaar-ink);
	--theme-color-text_light: rgba(21, 22, 19, 0.62);
	--theme-color-text_link: var(--miyaar-bronze);
	--theme-color-text_hover: var(--miyaar-forest);
	--theme-color-accent1: var(--miyaar-bronze);
	--theme-color-accent2: var(--miyaar-forest);
	--theme-color-bd_color: var(--miyaar-line);
}

/* 3. Base typography
   ------------------------------------------------------------------------ */

body,
.body_style_wide,
input,
select,
textarea,
button {
	font-family: var(--miyaar-text);
	font-weight: 300;
	font-size: 17px;
	line-height: 29px;
	color: var(--miyaar-ink);
	background-color: var(--miyaar-paper);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.sc_layouts_title_caption,
.post_title {
	font-family: var(--miyaar-display);
	font-weight: 300;
	color: var(--miyaar-ink);
	letter-spacing: -0.01em;
}

/* Emphasis inside a heading is the one place Relicta Ultrabold Italic runs. */
h1 em, h2 em, h3 em,
h1 i, h2 i, h3 i {
	font-weight: 800;
	font-style: italic;
}

/* Display scale — 112/104 at full width, fluid down to mobile. */
h1 {
	font-size: clamp(44px, 7vw, 112px);
	line-height: 1.04;
}

/* Section heading — 72/72. */
h2 {
	font-size: clamp(32px, 4.6vw, 72px);
	line-height: 1.0;
}

/* Card heading — 30/34. */
h3 {
	font-size: clamp(22px, 2.2vw, 30px);
	line-height: 1.13;
}

h4 {
	font-size: clamp(19px, 1.6vw, 24px);
	line-height: 1.3;
}

h5, h6 {
	font-family: var(--miyaar-text);
	font-weight: 600;
	font-size: 15px;
	line-height: 1.4;
}

/* Lead copy — 24/38. */
.miyaar-lead,
.sc_layouts_title_description,
p.has-large-font-size {
	font-size: clamp(19px, 1.7vw, 24px);
	line-height: 1.58;
	font-weight: 300;
}

/* Paragraph measure: 42–66 characters. */
.content p,
.post_content p {
	max-width: 66ch;
}

/* 4. Labels and navigation — Trueno Semi Bold, 11/16, 0.18em tracking.
   ------------------------------------------------------------------------ */

.miyaar-label,
.sc_item_subtitle,
.post_meta,
.breadcrumbs,
.menu_main_nav > li > a,
.sc_button,
button,
input[type="submit"] {
	font-family: var(--miyaar-text);
	font-weight: 600;
	font-size: 11px;
	line-height: 16px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.menu_main_nav > li > a {
	font-size: 12px;
	letter-spacing: 0.14em;
}

/* 5. Anti-template rules
   Straight from the design system: no arbitrary rounded cards, shadows,
   pills or icon sets; no decorative gradients over every photograph.
   ------------------------------------------------------------------------ */

*,
*::before,
*::after,
.sc_services_item,
.sc_blogger_item,
.post_item,
.sc_team_item,
input,
select,
textarea,
button,
.sc_button,
img,
.wp-block-image img {
	border-radius: 0 !important;
}

.sc_services_item,
.sc_blogger_item,
.post_item,
.sc_team_item,
.widget,
.sc_button,
button {
	box-shadow: none !important;
}

/* Photography carries its own contrast; no blanket gradient scrims. */
.sc_item_featured_bg::after,
.post_featured::after {
	background-image: none !important;
}

/* 6. Buttons — square, ruled, no pill shapes.
   ------------------------------------------------------------------------ */

.sc_button,
button,
input[type="submit"],
.wp-block-button__link {
	background-color: var(--miyaar-ink);
	color: var(--miyaar-soft-white);
	border: 1px solid var(--miyaar-ink);
	padding: 18px 32px;
	transition: background-color 0.25s ease, color 0.25s ease;
}

.sc_button:hover,
button:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover {
	background-color: transparent;
	color: var(--miyaar-ink);
}

.sc_button_bordered {
	background-color: transparent;
	color: var(--miyaar-ink);
}

/* 7. Rules and links
   ------------------------------------------------------------------------ */

hr,
.sc_item_separator {
	border: 0;
	border-top: 1px solid var(--miyaar-line);
}

a {
	color: inherit;
	text-decoration: none;
	transition: color 0.2s ease;
}

.post_content a:not(.sc_button) {
	border-bottom: 1px solid var(--miyaar-line);
}

.post_content a:not(.sc_button):hover {
	color: var(--miyaar-bronze);
	border-bottom-color: var(--miyaar-bronze);
}

/* 8. Dark sections use soft white at controlled opacity, never pure white.
   ------------------------------------------------------------------------ */

.scheme_dark {
	--theme-color-bg_color: var(--miyaar-forest);
	--theme-color-text: rgba(249, 247, 241, 0.78);
	--theme-color-text_dark: var(--miyaar-soft-white);
	background-color: var(--miyaar-forest);
	color: rgba(249, 247, 241, 0.78);
}

.scheme_dark h1,
.scheme_dark h2,
.scheme_dark h3,
.scheme_dark h4 {
	color: var(--miyaar-soft-white);
}

/* 9. Accessibility
   ------------------------------------------------------------------------ */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 2px solid var(--miyaar-bronze);
	outline-offset: 3px;
}

@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;
	}
}