/* =========================================================================
   mercan.systems OnePager — main.css
   Mobile-first. Breakpoints: 768px, 1024px, 1440px.
   ========================================================================= */

@font-face {
	font-family: 'Manrope';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/manrope-variable.woff2') format('woff2');
}
@font-face {
	font-family: 'Manrope';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/manrope-variable.woff2') format('woff2');
}

:root {
	--color-dark: #333333;
	--color-primary: #8C1D35;
	--color-primary-hover: #6E1729;
	--color-primary-light: #A95668;
	--color-offwhite: #F7F5F0;
	--color-white: #FFFFFF;
	--color-text: #1C1A17;
	--color-text-muted: #444444;
	--color-text-soft: #555555;
	--color-text-faint: #666666;
	--color-border: #E4E0D8;
	--color-nav-inactive: #BBBBBB;
	--radius-sm: 3px;
	--radius-md: 4px;
	--radius-lg: 6px;
	--font-sans: 'Manrope', Arial, sans-serif;
	--logo-height: 34px;
	--logo-height-mobile: 28px;
}

/* ---------- Reset / base ---------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

html, body {
	height: 100%;
}

body {
	margin: 0;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	font-family: var(--font-sans);
	color: var(--color-text);
	background: var(--color-white);
	line-height: 1.6;
	font-size: 16px;
}

#msop-main {
	flex: 1 0 auto;
}

.msop-footer {
	flex-shrink: 0;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: var(--color-primary);
	text-decoration: none;
}
a:hover {
	color: var(--color-primary-hover);
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-sans);
	font-weight: 700;
	margin: 0 0 16px;
}

p {
	margin: 0 0 16px;
}

ul, ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

button {
	font-family: var(--font-sans);
}

/* ---------- Accessibility ---------- */
.skip-link {
	position: absolute;
	top: -100px;
	left: 0;
	background: var(--color-primary);
	color: var(--color-white);
	padding: 12px 20px;
	z-index: 10000;
	transition: top 0.15s ease;
}
.skip-link:focus {
	top: 0;
}

:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

/* ---------- Buttons (shared: Gutenberg buttons + template buttons) ---------- */
/* border is always reserved (transparent by default) so primary/secondary buttons
   render at the exact same box height regardless of which one has a visible border */
.msop-btn,
.wp-block-button__link {
	display: inline-block;
	border-radius: var(--radius-sm);
	font-size: 15px;
	font-weight: 700;
	padding: 14px 30px;
	cursor: pointer;
	border: 1.5px solid transparent;
	box-sizing: border-box;
	font-family: var(--font-sans);
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.msop-btn--primary,
.is-style-msop-primary .wp-block-button__link,
.wp-block-button__link {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-white);
}
.msop-btn--primary:hover,
.is-style-msop-primary .wp-block-button__link:hover {
	background: var(--color-primary-light);
	border-color: var(--color-primary-light);
	color: var(--color-white);
}

.msop-btn--secondary,
.is-style-msop-secondary .wp-block-button__link {
	background: transparent;
	color: var(--color-white);
	border-color: var(--color-white);
}
.msop-btn--secondary:hover,
.is-style-msop-secondary .wp-block-button__link:hover {
	background: rgba(255, 255, 255, 0.1);
	color: var(--color-white);
}

/* ---------- Header ---------- */
.msop-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--color-dark);
}

.msop-header__inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 16px 20px;
}

.msop-logo,
.msop-logo img,
.custom-logo {
	height: var(--logo-height-mobile);
	width: auto;
}

.msop-logo-fallback {
	color: var(--color-white);
	font-size: 18px;
	font-weight: 700;
}

.msop-header__rule {
	height: 1px;
	background: var(--color-primary);
}

/* Primary nav: mobile hamburger */
.msop-nav-toggle {
	position: relative;
	z-index: 41;
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 30px;
	height: 30px;
	background: transparent;
	border: none;
	padding: 0;
	cursor: pointer;
}
.msop-nav-toggle__bar {
	display: block;
	height: 2px;
	width: 100%;
	background: var(--color-white);
	transition: transform 0.2s ease, opacity 0.2s ease;
}
.msop-nav-toggle[aria-expanded="true"] .msop-nav-toggle__bar:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}
.msop-nav-toggle[aria-expanded="true"] .msop-nav-toggle__bar:nth-child(2) {
	opacity: 0;
}
.msop-nav-toggle[aria-expanded="true"] .msop-nav-toggle__bar:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

.msop-nav {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(280px, 80vw);
	background: var(--color-dark);
	padding: 90px 24px 24px;
	transform: translateX(100%);
	transition: transform 0.25s ease;
	z-index: 40;
	overflow-y: auto;
}
.msop-nav.is-open {
	transform: translateX(0);
}

.msop-nav__list {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.msop-nav__list a {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.01em;
	color: var(--color-nav-inactive);
}
.msop-nav__list a:hover,
.msop-nav__list .current-menu-item > a,
.msop-nav__list .current_page_item > a {
	color: var(--color-primary);
}

.msop-nav-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.4);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease;
	z-index: 39;
}
.msop-nav-backdrop.is-open {
	opacity: 1;
	visibility: visible;
}

/* ---------- Footer ---------- */
.msop-footer {
	background: var(--color-dark);
	padding: 24px 20px;
}

.msop-footer__inner {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 16px;
	text-align: center;
}

.msop-footer__brand {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 12px;
	color: var(--color-nav-inactive);
}
.msop-footer__brand img {
	height: 20px;
	opacity: 0.9;
}

.msop-footer-nav__list {
	display: flex;
	gap: 18px;
	flex-wrap: wrap;
	justify-content: center;
	font-size: 12px;
}
.msop-footer-nav__list a {
	color: var(--color-nav-inactive);
}
.msop-footer-nav__list a:hover {
	color: var(--color-white);
}

/* ---------- Hero pattern ---------- */
.msop-hero {
	background: var(--color-dark);
	text-align: center;
	padding: 56px 20px !important;
}
.msop-hero__title {
	max-width: 700px;
	margin-left: auto;
	margin-right: auto;
	line-height: 1.25;
}
.msop-hero__subtext {
	max-width: 560px;
	margin-left: auto;
	margin-right: auto;
	color: #ccc;
}
.msop-hero__buttons {
	gap: 14px;
}

/* ---------- Feature grid pattern ---------- */
.msop-feature-section {
	background: var(--color-white);
}
.msop-feature-grid.wp-block-columns {
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 24px;
}
.msop-feature-grid.wp-block-columns > .wp-block-column {
	display: flex;
	flex: 1 1 260px;
	margin: 0;
}
.msop-feature-grid .msop-feature-card {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
}

/* ---------- CTA banner pattern ---------- */
.msop-cta-banner {
	background: var(--color-offwhite);
	text-align: center;
}

/* ---------- Page sub-navigation (per-page anchor jump links) ---------- */
:root {
	--msop-header-h: 78px;
}
.msop-page-subnav {
	position: sticky;
	top: var(--msop-header-h);
	z-index: 30;
	background: var(--color-white);
	border-bottom: 1px solid var(--color-border);
	padding: 14px 20px;
	gap: 8px 20px !important;
}
.is-style-msop-subnav-link .wp-block-button__link {
	background: transparent !important;
	border-color: transparent !important;
	color: var(--color-text) !important;
	padding: 4px 0 !important;
	font-size: 12.5px !important;
	font-weight: 700 !important;
}
.is-style-msop-subnav-link .wp-block-button__link:hover {
	color: var(--color-primary) !important;
}

/* Any anchored heading/section should not hide under the sticky header + sub-nav */
[id] {
	scroll-margin-top: calc(var(--msop-header-h) + 56px);
}

/* ---------- Anchored content section pattern ---------- */
.msop-content-section {
	padding: 64px 20px;
}

/* ---------- Partner page ---------- */
.msop-partner-header {
	background: var(--color-offwhite);
	padding: 56px 20px 32px;
	text-align: center;
}
.msop-partner-header__title {
	font-size: 26px;
	font-weight: 700;
	margin-bottom: 14px;
}
.msop-partner-header__subtext {
	font-size: 14.5px;
	line-height: 1.7;
	color: var(--color-text-muted);
	max-width: 560px;
	margin: 0 auto 26px;
}

.msop-partner-filters {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	justify-content: center;
}
.msop-partner-filter {
	background: var(--color-white);
	border: 1px solid #ddd;
	border-radius: 20px;
	padding: 7px 18px;
	font-size: 13px;
	font-family: var(--font-sans);
	cursor: pointer;
	color: var(--color-text);
}
.msop-partner-filter.is-active {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-white);
	font-weight: 700;
}

.msop-partner-grid-wrap {
	background: var(--color-white);
	padding: 36px 20px 56px;
}
.msop-partner-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 22px;
	max-width: 1080px;
	margin: 0 auto;
}

.msop-partner-card {
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--color-white);
}
.msop-partner-card.is-hidden {
	display: none;
}
.msop-partner-card__head {
	height: 76px;
	background: var(--color-offwhite);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	font-weight: 700;
	color: var(--color-primary);
	font-size: 14px;
	padding: 0 16px;
	text-align: center;
}
.msop-partner-card__logo {
	width: 32px;
	height: 32px;
	flex: none;
	border-radius: 50%;
	object-fit: cover;
	background: var(--color-white);
}
.msop-partner-card__body {
	padding: 20px;
}
.msop-partner-card__meta {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 8px;
	margin-bottom: 10px;
}
.msop-partner-card__badge {
	background: var(--color-offwhite);
	border: 1px solid #ddd;
	border-radius: 12px;
	padding: 4px 11px;
	font-size: 11px;
	font-weight: 700;
	color: var(--color-primary);
	white-space: nowrap;
}
.msop-partner-card__label {
	font-size: 10.5px;
	color: #999;
	font-style: italic;
	white-space: nowrap;
}
.msop-partner-card__text {
	font-size: 13px;
	color: var(--color-text-soft);
	line-height: 1.6;
}

/* ---------- Blog / single / archive default content ---------- */
.msop-content {
	max-width: 720px;
	margin: 0 auto;
	padding: 48px 20px;
}
.msop-content img {
	border-radius: var(--radius-md);
}
.msop-entry-title {
	font-size: 28px;
}
.msop-entry-meta {
	color: var(--color-text-faint);
	font-size: 13px;
	margin-bottom: 24px;
}

.msop-404 {
	max-width: 600px;
	margin: 0 auto;
	padding: 80px 20px;
	text-align: center;
}

/* =========================================================================
   Breakpoint: >= 768px (tablet+)
   ========================================================================= */
@media (min-width: 768px) {
	.msop-header__inner {
		padding: 26px 32px;
	}

	.msop-logo,
	.msop-logo img,
	.custom-logo {
		height: var(--logo-height);
	}

	.msop-nav-toggle {
		display: none;
	}

	.msop-nav {
		position: static;
		width: auto;
		background: transparent;
		padding: 0;
		transform: none;
		transition: none;
		overflow: visible;
		z-index: auto;
	}

	.msop-nav__list {
		flex-direction: row;
		gap: 20px;
		flex-wrap: wrap;
	}

	.msop-nav-backdrop {
		display: none;
	}

	.msop-footer {
		padding: 24px 32px;
	}
	.msop-footer__inner {
		justify-content: space-between;
		text-align: left;
	}

	.msop-hero {
		padding: 96px 32px !important;
	}

	.msop-feature-section {
		padding-left: 32px !important;
		padding-right: 32px !important;
	}
	.msop-feature-grid.wp-block-columns {
		flex-wrap: nowrap;
	}

	.msop-cta-banner {
		padding-left: 32px !important;
		padding-right: 32px !important;
	}

	.msop-page-subnav {
		padding-left: 32px;
		padding-right: 32px;
	}
	.msop-content-section {
		padding-left: 32px !important;
		padding-right: 32px !important;
	}

	.msop-partner-header {
		padding: 72px 32px 32px;
	}
	.msop-partner-header__title {
		font-size: 32px;
	}
	.msop-partner-grid-wrap {
		padding: 48px 32px 80px;
	}

	.msop-content {
		padding: 64px 32px;
	}
}

/* =========================================================================
   Breakpoint: >= 1024px (desktop)
   ========================================================================= */
@media (min-width: 1024px) {
	.msop-entry-title {
		font-size: 32px;
	}
}

/* =========================================================================
   Breakpoint: >= 1440px (large desktop)
   ========================================================================= */
@media (min-width: 1440px) {
	.msop-partner-grid {
		max-width: 1180px;
	}
}