/* ==========================================================================
   MakeAdera Page Base Stylesheet (SHARED across standalone content pages)
   Used by: about-us-template.php, quality-control-template.php

   Holds the components those pages have in common — page container, hero
   canvas, eyebrow label, section heading, primary button, white card shell
   and the dark band. Page-specific rules live in the page's own stylesheet
   (about-us.css, quality-control.css).
   Author: aderaDev
   ========================================================================== */

/* --------------------------------------------------------------------------
   Container
   -------------------------------------------------------------------------- */
.ma-page-container {
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 24px;
}

/* --------------------------------------------------------------------------
   Eyebrow label (red mono caps with a leading rule)
   -------------------------------------------------------------------------- */
.ma-page-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-family: var(--makeadera-font-mono, 'JetBrains Mono', monospace);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--makeadera-color-accent-red, #B20017);
}

.ma-page-eyebrow-line {
	display: block;
	width: 34px;
	height: 1px;
	background-color: var(--makeadera-color-accent-red, #B20017);
}

/* --------------------------------------------------------------------------
   Section heading
   -------------------------------------------------------------------------- */
.ma-page-section-heading {
	margin-bottom: 44px;
}

.ma-page-section-title {
	margin: 14px 0 0;
	font-size: clamp(28px, 3vw, 40px);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--makeadera-color-black, #0D0D0D);
}

/* Heading on a dark band */
.ma-page-section-heading.is-dark .ma-page-section-title {
	color: var(--makeadera-color-white, #FFFFFF);
}

/* --------------------------------------------------------------------------
   Hero: heading + intro copy on the blueprint-grid canvas
   -------------------------------------------------------------------------- */
.ma-page-hero {
	background-color: var(--makeadera-color-white, #FFFFFF);
	background-image:
		linear-gradient(to right, rgba(13, 13, 13, 0.04) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(13, 13, 13, 0.04) 1px, transparent 1px);
	background-size: 72px 72px;
	border-bottom: 1px solid var(--makeadera-color-slate-light, #E3E4E5);
	padding: 88px 0 96px;
	font-family: var(--makeadera-font-primary, 'Inter', sans-serif);
}

.ma-page-hero-title {
	margin: 18px 0 0;
	font-size: clamp(34px, 4vw, 58px);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.03em;
	color: var(--makeadera-color-black, #0D0D0D);
	max-width: 860px;
}

.ma-page-hero-title-muted {
	color: var(--makeadera-color-gray-mid, #858689);
}

/* Body copy column */
.ma-page-copy {
	margin-top: 32px;
	max-width: 760px;
}

.ma-page-copy p {
	margin: 0 0 18px;
	font-size: 16.5px;
	line-height: 1.75;
	color: var(--makeadera-color-slate-dark, #494D53);
}

.ma-page-copy p:last-child {
	margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Primary button

   Every state is declared explicitly. Kadence's global CSS styles
   `a:hover, a:focus, a:active` (specificity 0,1,1) which outranks a single
   class (0,1,0) — so without :focus / :active / :visited here, the label
   would be recoloured the moment the button is clicked or focused.
   -------------------------------------------------------------------------- */
.ma-page-btn,
.ma-page-btn:link,
.ma-page-btn:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: 52px;
	padding: 0 30px;
	border: none;
	border-radius: 6px;
	background-color: var(--makeadera-color-black, #0D0D0D);
	color: var(--makeadera-color-white, #FFFFFF);
	font-family: var(--makeadera-font-primary, 'Inter', sans-serif);
	font-size: 14.5px;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.ma-page-btn:hover,
.ma-page-btn:focus,
.ma-page-btn:active {
	background-color: var(--makeadera-color-accent-red, #B20017);
	color: var(--makeadera-color-white, #FFFFFF);
	text-decoration: none;
}

.ma-page-btn:hover,
.ma-page-btn:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(178, 0, 23, 0.22);
}

/* Keyboard focus ring (mouse clicks don't trigger :focus-visible) */
.ma-page-btn:focus-visible {
	outline: 2px solid var(--makeadera-color-black, #0D0D0D);
	outline-offset: 3px;
}

/* Pressed */
.ma-page-btn:active {
	transform: translateY(0);
	box-shadow: 0 4px 10px rgba(178, 0, 23, 0.18);
}

/* Inverted button for use on the dark band */
.ma-page-btn.is-inverted,
.ma-page-btn.is-inverted:link,
.ma-page-btn.is-inverted:visited {
	background-color: var(--makeadera-color-white, #FFFFFF);
	color: var(--makeadera-color-black, #0D0D0D);
}

.ma-page-btn.is-inverted:hover,
.ma-page-btn.is-inverted:focus,
.ma-page-btn.is-inverted:active {
	background-color: var(--makeadera-color-accent-red, #B20017);
	color: var(--makeadera-color-white, #FFFFFF);
}

.ma-page-btn.is-inverted:hover,
.ma-page-btn.is-inverted:focus-visible {
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}

/* White ring so the focus state stays visible on the dark band */
.ma-page-btn.is-inverted:focus-visible {
	outline-color: var(--makeadera-color-white, #FFFFFF);
}

.ma-page-btn[aria-disabled='true'],
.ma-page-btn:disabled {
	opacity: 0.5;
	pointer-events: none;
	transform: none;
	box-shadow: none;
}

/* --------------------------------------------------------------------------
   White card shell (same treatment as the product cards)
   -------------------------------------------------------------------------- */
.ma-page-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	background-color: var(--makeadera-color-white, #FFFFFF);
	border: 1px solid #ECEDEE;
	border-radius: 16px;
	padding: 28px 24px 26px;
	box-shadow: 0 2px 10px rgba(13, 13, 13, 0.03);
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.ma-page-card:hover {
	transform: translateY(-4px);
	border-color: var(--makeadera-color-border-light, #D0D1D3);
	box-shadow: 0 14px 30px rgba(13, 13, 13, 0.08);
}

/* --------------------------------------------------------------------------
   Section bands
   -------------------------------------------------------------------------- */
.ma-page-band {
	background-color: var(--makeadera-color-bg-soft, #F6F7F7);
	padding: 88px 0 104px;
	font-family: var(--makeadera-font-primary, 'Inter', sans-serif);
}

.ma-page-band.is-white {
	background-color: var(--makeadera-color-white, #FFFFFF);
}

.ma-page-band.is-dark {
	background: var(--makeadera-gradient-4, linear-gradient(180deg, #0A0A0A 0%, #171717 83%, #2C2C2C 100%));
}

/* --------------------------------------------------------------------------
   Editor content added to the page in wp-admin (page templates only)
   -------------------------------------------------------------------------- */
.ma-page-editor-content .ma-page-copy {
	margin-top: 0;
}

.ma-page-editor-content h2,
.ma-page-editor-content h3 {
	margin: 32px 0 14px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--makeadera-color-black, #0D0D0D);
}

.ma-page-editor-content h2 {
	font-size: clamp(24px, 2.4vw, 32px);
}

.ma-page-editor-content h3 {
	font-size: 20px;
}

.ma-page-editor-content a {
	color: var(--makeadera-color-accent-red, #B20017);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
	.ma-page-hero {
		padding: 64px 0 72px;
	}

	.ma-page-band {
		padding: 64px 0 76px;
	}
}

@media (max-width: 640px) {
	.ma-page-container {
		padding: 0 16px;
	}

	.ma-page-hero {
		padding: 52px 0 60px;
		background-size: 48px 48px;
	}

	.ma-page-band {
		padding: 52px 0 60px;
	}

	.ma-page-copy p {
		font-size: 15.5px;
	}

	.ma-page-btn {
		width: 100%;
	}

	.ma-page-section-heading {
		margin-bottom: 30px;
	}
}