/* ==========================================================
   Moraway Adventures — Master Typography + Button Layer
   File: ma-typography.css
   Load last.

   Architecture:
   - Typography is opt-in with .ma-type
   - Anything inside .ma-no-type is ignored
   - Buttons are enforced aggressively site-wide
   - Buttons can opt out with .ma-no-button or .ma-no-type
========================================================== */

:root {
	/* Fonts */
	--ma-heading-font: "Josefin Sans", sans-serif;
	--ma-body-font: "Quicksand", sans-serif;

	/* Core colors */
	--ma-heading-color: #147170;
	--ma-body-color: #1b1b1b;
	--ma-muted-color: #414a50;
	--ma-link-color: #be4300;
	--ma-link-hover-color: #fbaa19;

	/* Heading scale */
	--ma-h1-size: clamp(48px, 7vw, 96px);
	--ma-h2-size: clamp(32px, 5.4vw, 64px);
	--ma-h3-size: clamp(30px, 3.8vw, 52px);
	--ma-h4-size: clamp(24px, 2.6vw, 36px);
	--ma-h5-size: clamp(20px, 2vw, 28px);
	--ma-h6-size: 16px;

	/* Body scale */
	--ma-body-size: clamp(18px, 1.45vw, 22px);
	--ma-body-line-height: 1.7;
	--ma-small-size: 14px;

	/* Button defaults */
	--ma-button-radius: 999px;
	--ma-button-font-size: 14px;
	--ma-button-font-weight: 800;
	--ma-button-letter-spacing: 0.08em;
	--ma-button-padding-y: 14px;
	--ma-button-padding-x: 24px;
	--ma-button-min-height: 46px;

	/* Primary button */
	--ma-button-primary-bg: #147170;
	--ma-button-primary-color: #fdf6e9;
	--ma-button-primary-border: #147170;
	--ma-button-primary-hover-bg: #be4300;
	--ma-button-primary-hover-color: #ffffff;
	--ma-button-primary-hover-border: #be4300;

	/* Secondary button */
	--ma-button-secondary-bg: #fbaa19;
	--ma-button-secondary-color: #1b1b1b;
	--ma-button-secondary-border: #fbaa19;
	--ma-button-secondary-hover-bg: #61735b;
	--ma-button-secondary-hover-color: #ffffff;
	--ma-button-secondary-hover-border: #61735b;
}

/* ==========================================================
   SAFE BASE DEFAULTS
   Keep this light. Do not resize global content here.
========================================================== */

body {
	font-family: var(--ma-body-font);
	color: var(--ma-body-color);
}

/* ==========================================================
   Safe automatic body-content enforcement
   Targets real content wrappers only.
   Skips anything inside .ma-no-type.
========================================================== */

body :where(
	.entry-content,
	.page-content,
	.moraway-page-content,
	.moraway-travel-insights__intro,

	.moraway-home-intro-body,
	.moraway-page-intro-body,
	.moraway-country-content-highlights__content,
	.moraway-best-times-intro,
	.moraway-region-destinations-intro,
	.moraway-itinerary-cards-intro,

	.moraway-impact-org-copy,
	.moraway-country-impact-section__text,

	.moraway-projects-support-intro,
	.moraway-about-travelers-copy,
	.moraway-logo-story-body,
	.moraway-staff-body,

	.moraway-day-by-day-description,
	.moraway-daily-itinerary-card-description,

	.moraway-trip-detail-copy,
	.moraway-trip-detail-notes,
	.moraway-trip-detail-pricing-intro,
	.moraway-trip-detail-pricing-note,

	.moraway-accommodation-intro__content,
	.moraway-single-article__sections,
	.moraway-article-content-section__content,
	.moraway-article-gallery-section__desc
):not(.ma-no-type, .ma-no-type *) {
	font-family: var(--ma-body-font) !important;
	color: var(--ma-body-color) !important;
	font-size: var(--ma-body-size) !important;
	line-height: var(--ma-body-line-height) !important;
}

body :where(
	.entry-content,
	.page-content,
	.moraway-page-content,
	.moraway-travel-insights__intro,

	.moraway-home-intro-body,
	.moraway-country-content-highlights__content,
	.moraway-best-times-intro,
	.moraway-region-destinations-intro,
	.moraway-itinerary-cards-intro,

	.moraway-impact-org-copy,
	.moraway-country-impact-section__text,

	.moraway-projects-support-intro,
	.moraway-about-travelers-copy,
	.moraway-logo-story-body,
	.moraway-staff-body,

	.moraway-day-by-day-description,
	.moraway-daily-itinerary-card-description,

	.moraway-trip-detail-copy,
	.moraway-trip-detail-notes,
	.moraway-trip-detail-pricing-intro,
	.moraway-trip-detail-pricing-note,

	.moraway-accommodation-intro__content,
	.moraway-single-article__sections,
	.moraway-article-content-section__content,
	.moraway-article-gallery-section__desc
):not(.ma-no-type, .ma-no-type *) :where(p, li, ul, ol, blockquote) {
	font-family: var(--ma-body-font) !important;
	color: var(--ma-body-color) !important;
	font-size: inherit !important;
	line-height: inherit !important;
}

/* ==========================================================
   TYPOGRAPHY OPT-IN HOOK

   Usage:
   <section class="ma-type">...</section>
   <h2 class="ma-type">Heading</h2>

   Opt out inside a .ma-type area:
   <div class="ma-no-type">...</div>
========================================================== */

.ma-type:not(.ma-no-type),
.ma-type :where(p, li, dd, dt, blockquote, figcaption, span, div):not(.ma-no-type):not(.ma-no-type *) {
	font-family: var(--ma-body-font) !important;
	color: var(--ma-body-color) !important;
	font-size: var(--ma-body-size) !important;
	line-height: var(--ma-body-line-height) !important;
}

.ma-type :where(h1, h2, h3, h4, h5, h6):not(.ma-no-type):not(.ma-no-type *),
.ma-type:is(h1, h2, h3, h4, h5, h6):not(.ma-no-type) {
	font-family: var(--ma-heading-font) !important;
	color: var(--ma-heading-color) !important;
	font-weight: 500 !important;
	line-height: 1.02 !important;
	letter-spacing: -0.045em !important;
	text-transform: none !important;
}

.ma-type h1:not(.ma-no-type):not(.ma-no-type *),
h1.ma-type:not(.ma-no-type) {
	font-size: var(--ma-h1-size) !important;
}

.ma-type h2:not(.ma-no-type):not(.ma-no-type *),
h2.ma-type:not(.ma-no-type) {
	font-size: var(--ma-h2-size) !important;
}

.ma-type h3:not(.ma-no-type):not(.ma-no-type *),
h3.ma-type:not(.ma-no-type) {
	font-size: var(--ma-h3-size) !important;
}

.ma-type h4:not(.ma-no-type):not(.ma-no-type *),
h4.ma-type:not(.ma-no-type) {
	font-size: var(--ma-h4-size) !important;
}

.ma-type h5:not(.ma-no-type):not(.ma-no-type *),
h5.ma-type:not(.ma-no-type) {
	font-size: var(--ma-h5-size) !important;
}

.ma-type h6:not(.ma-no-type):not(.ma-no-type *),
h6.ma-type:not(.ma-no-type) {
	font-size: var(--ma-h6-size) !important;
	letter-spacing: 0.12em !important;
	text-transform: uppercase !important;
}

.ma-type :where(a):not(.ma-button):not([class*="button"]):not([class*="btn"]):not(.ma-no-type):not(.ma-no-type *) {
	color: var(--ma-link-color) !important;
}

.ma-type :where(a):not(.ma-button):not([class*="button"]):not([class*="btn"]):not(.ma-no-type):not(.ma-no-type *):hover {
	color: var(--ma-link-hover-color) !important;
}

.ma-type :where(small, .ma-small):not(.ma-no-type):not(.ma-no-type *) {
	font-size: var(--ma-small-size) !important;
	color: var(--ma-muted-color) !important;
}

/* Single-purpose hooks. These also respect .ma-no-type. */
.ma-type-heading:not(.ma-no-type):not(.ma-no-type *) {
	font-family: var(--ma-heading-font) !important;
	color: var(--ma-heading-color) !important;
	font-size: var(--ma-section-heading-size, var(--ma-h2-size)) !important;
	font-weight: 500 !important;
	line-height: 1.02 !important;
	letter-spacing: -0.045em !important;
	text-transform: none !important;
}

.ma-type-body:not(.ma-no-type):not(.ma-no-type *) {
	font-family: var(--ma-body-font) !important;
	color: var(--ma-body-color) !important;
	font-size: var(--ma-body-size) !important;
	line-height: var(--ma-body-line-height) !important;
}

.ma-type-muted:not(.ma-no-type):not(.ma-no-type *) {
	color: var(--ma-muted-color) !important;
}

/* Optional size utilities */
.ma-type-h1 { --ma-section-heading-size: var(--ma-h1-size); }
.ma-type-h2 { --ma-section-heading-size: var(--ma-h2-size); }
.ma-type-h3 { --ma-section-heading-size: var(--ma-h3-size); }
.ma-type-h4 { --ma-section-heading-size: var(--ma-h4-size); }
.ma-type-h5 { --ma-section-heading-size: var(--ma-h5-size); }
.ma-type-h6 { --ma-section-heading-size: var(--ma-h6-size); }

/* ==========================================================
   BUTTON ENFORCEMENT

   Aggressive by design.
   Opt out with:
   - .ma-no-button on the element or parent
   - .ma-no-type on a parent
========================================================== */

body :where(
	button,
	input[type="button"],
	input[type="submit"],
	input[type="reset"],
	.button,
	.wp-block-button__link,
	.gb-button,
	.btn,
	a.btn,
	a.button,
	a[class*="button"],
	a[class*="__button"],
	a[class*="-button"],
	a[class*="readmore"],
	a[class*="read-more"],
	.moraway-projects-support-external,
	.moraway-projects-support-all
	.ma-button
):not(
	.ma-no-type,
	.ma-no-type *,
	.ma-no-button,
	.ma-no-button *,
	.menu-toggle,
	.moraway-nav-search-toggle,
	.moraway-testimonial-arrow,
	.moraway-trip-nav,
	.moraway-projects-arrow,
	.moraway-itinerary-cards-nav,
	.ma-trip-gallery-arrow,
	.moraway-accommodation-gallery__arrow,
	.moraway-lightbox__close
) {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	min-height: var(--ma-button-min-height) !important;
	padding: var(--ma-button-padding-y) var(--ma-button-padding-x) !important;
	border: 1px solid var(--ma-button-primary-border) !important;
	border-radius: var(--ma-button-radius) !important;
	background: var(--ma-button-primary-bg) !important;
	color: var(--ma-button-primary-color) !important;
	font-family: var(--ma-body-font) !important;
	font-size: var(--ma-button-font-size) !important;
	font-weight: var(--ma-button-font-weight) !important;
	line-height: 1 !important;
	letter-spacing: var(--ma-button-letter-spacing) !important;
	text-transform: uppercase !important;
	text-decoration: none !important;
	cursor: pointer !important;
	box-shadow: none;
	transition:
		background-color 0.2s ease,
		border-color 0.2s ease,
		color 0.2s ease,
		transform 0.2s ease,
		opacity 0.2s ease;
}

body :where(
	button,
	input[type="button"],
	input[type="submit"],
	input[type="reset"],
	.button,
	.wp-block-button__link,
	.gb-button,
	.btn,
	a.btn,
	a.button,
	a[class*="button"],
	a[class*="__button"],
	a[class*="-button"],
	a[class*="readmore"],
	a[class*="read-more"],
	.moraway-projects-support-external,
	.moraway-projects-support-all
	.ma-button
):not(
	.ma-no-type,
	.ma-no-type *,
	.ma-no-button,
	.ma-no-button *,
	.menu-toggle,
	.moraway-nav-search-toggle,
	.moraway-testimonial-arrow,
	.moraway-trip-nav,
	.moraway-projects-arrow,
	.moraway-itinerary-cards-nav,
	.ma-trip-gallery-arrow,
	.moraway-accommodation-gallery__arrow,
	.moraway-lightbox__close
):hover,
body :where(
	button,
	input[type="button"],
	input[type="submit"],
	input[type="reset"],
	.button,
	.wp-block-button__link,
	.gb-button,
	.btn,
	a.btn,
	a.button,
	a[class*="button"],
	a[class*="__button"],
	a[class*="-button"],
	a[class*="readmore"],
	a[class*="read-more"],
	.moraway-projects-support-external,
	.moraway-projects-support-all
	.ma-button
):not(
	.ma-no-type,
	.ma-no-type *,
	.ma-no-button,
	.ma-no-button *,
	.menu-toggle,
	.moraway-nav-search-toggle,
	.moraway-testimonial-arrow,
	.moraway-trip-nav,
	.moraway-projects-arrow,
	.moraway-itinerary-cards-nav,
	.ma-trip-gallery-arrow,
	.moraway-accommodation-gallery__arrow,
	.moraway-lightbox__close
):focus {
	background: var(--ma-button-primary-hover-bg) !important;
	border-color: var(--ma-button-primary-hover-border) !important;
	color: var(--ma-button-primary-hover-color) !important;
	text-decoration: none !important;
	transform: translateY(-1px);
}

/* Secondary button set */
body :where(
	.ma-button-secondary,
	.is-secondary,
	.button-secondary,
	.wp-block-button.is-style-secondary .wp-block-button__link,
	.gb-button.is-secondary,
	a[class*="secondary"]
):not(.ma-no-type):not(.ma-no-type *):not(.ma-no-button):not(.ma-no-button *) {
	background: var(--ma-button-secondary-bg) !important;
	color: var(--ma-button-secondary-color) !important;
	border-color: var(--ma-button-secondary-border) !important;
}

body :where(
	.ma-button-secondary,
	.is-secondary,
	.button-secondary,
	.wp-block-button.is-style-secondary .wp-block-button__link,
	.gb-button.is-secondary,
	a[class*="secondary"]
):not(.ma-no-type):not(.ma-no-type *):not(.ma-no-button):not(.ma-no-button *):hover,
body :where(
	.ma-button-secondary,
	.is-secondary,
	.button-secondary,
	.wp-block-button.is-style-secondary .wp-block-button__link,
	.gb-button.is-secondary,
	a[class*="secondary"]
):not(.ma-no-type):not(.ma-no-type *):not(.ma-no-button):not(.ma-no-button *):focus {
	background: var(--ma-button-secondary-hover-bg) !important;
	color: var(--ma-button-secondary-hover-color) !important;
	border-color: var(--ma-button-secondary-hover-border) !important;
}

/* ==========================================================
   GRANULAR OVERRIDE HELPERS
========================================================== */

.ma-type-light {
	--ma-heading-color: #ffffff;
	--ma-body-color: #ffffff;
	--ma-muted-color: rgba(255, 255, 255, 0.78);
	--ma-link-color: #ffffff;
	--ma-link-hover-color: #d6b46a;
}

.ma-type-dark {
	--ma-heading-color: #1d252a;
	--ma-body-color: #2f2b25;
	--ma-muted-color: #5d666c;
}

.ma-buttons-reversed {
	--ma-button-primary-bg: #ffffff;
	--ma-button-primary-color: #1d252a;
	--ma-button-primary-border: #ffffff;
	--ma-button-primary-hover-bg: #d6b46a;
	--ma-button-primary-hover-color: #1d252a;
	--ma-button-primary-hover-border: #d6b46a;
}

.ma-buttons-secondary-first {
	--ma-button-primary-bg: var(--ma-button-secondary-bg);
	--ma-button-primary-color: var(--ma-button-secondary-color);
	--ma-button-primary-border: var(--ma-button-secondary-border);
	--ma-button-primary-hover-bg: var(--ma-button-secondary-hover-bg);
	--ma-button-primary-hover-color: var(--ma-button-secondary-hover-color);
	--ma-button-primary-hover-border: var(--ma-button-secondary-hover-border);
}

/* ==========================================================
   MOBILE TUNING
========================================================== */

@media (max-width: 767px) {
	:root {
		--ma-h1-size: clamp(42px, 13vw, 68px);
		--ma-h2-size: clamp(34px, 11vw, 56px);
		--ma-h3-size: clamp(28px, 8vw, 42px);
		--ma-h4-size: clamp(22px, 6vw, 32px);
		--ma-body-size: 16px;
		--ma-button-font-size: 13px;
		--ma-button-padding-y: 13px;
		--ma-button-padding-x: 20px;
	}
}