/*
Theme Name: Meridian
Theme URI: https://scottdevore.net/meridian
Author: Scott DeVore
Author URI: https://scottdevore.net
Description: Meridian is an original multipurpose WordPress theme built for creative and business sites. It ships with a full live-preview Customizer options panel (layout, header styles, typography, colors, blog, footer, social), a sticky mega-menu header system, and out-of-the-box compatibility with WPBakery Page Builder. Inspired by the feature category of premium multipurpose themes (multiple header layouts, boxed/wide layouts, a large front-end options panel) but written entirely from scratch with no third-party theme code.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: meridian
Tags: custom-menu, custom-logo, custom-colors, featured-images, threaded-comments, translation-ready, wide-blocks, one-column, two-columns, right-sidebar, left-sidebar, full-width-template
*/

/* =========================================================
   0. CSS CUSTOM PROPERTIES (overridden live by the Customizer)
   ========================================================= */
:root {
	--mer-color-primary: #c9a15a;
	--mer-color-secondary: #1b1b1f;
	--mer-color-link: #c9a15a;
	--mer-color-text: #2b2b2f;
	--mer-color-heading: #101014;
	--mer-color-body-bg: #ffffff;
	--mer-header-bg: #ffffff;
	--mer-header-text: #101014;
	--mer-footer-bg: #101014;
	--mer-footer-text: #d8d8dc;
	--mer-border-color: #e7e7ea;

	--mer-font-heading: "Playfair Display", Georgia, serif;
	--mer-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--mer-font-size-base: 17px;
	--mer-line-height-base: 1.7;

	--mer-container-width: 1200px;
	--mer-header-height: 90px;
	--mer-radius: 4px;
	--mer-transition: 0.25s ease;
}

/* =========================================================
   1. RESET / BASE
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	margin: 0;
	background: var(--mer-color-body-bg);
	color: var(--mer-color-text);
	font-family: var(--mer-font-body);
	font-size: var(--mer-font-size-base);
	line-height: var(--mer-line-height-base);
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--mer-color-link); text-decoration: none; transition: color var(--mer-transition), opacity var(--mer-transition); }
a:hover { opacity: 0.75; }
ul, ol { padding-left: 1.2em; }
figure { margin: 0; }
button, input, select, textarea { font-family: inherit; font-size: inherit; }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--mer-font-heading);
	color: var(--mer-color-heading);
	line-height: 1.25;
	font-weight: 700;
	margin: 0 0 0.6em;
	letter-spacing: -0.01em;
}
h1 { font-size: clamp(2rem, 4vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.5rem); }
h3 { font-size: clamp(1.3rem, 2.2vw, 1.8rem); }
p { margin: 0 0 1.4em; }

.screen-reader-text {
	border: 0; clip: rect(1px,1px,1px,1px); clip-path: inset(50%);
	height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute;
	width: 1px; word-wrap: normal !important;
}
.screen-reader-text:focus {
	background: #fff; clip: auto !important; clip-path: none; color: #101014;
	display: block; height: auto; left: 5px; line-height: normal;
	padding: 15px 23px; text-decoration: none; top: 5px; width: auto; z-index: 100000;
}

/* =========================================================
   2. LAYOUT / CONTAINERS
   ========================================================= */
.mer-container {
	width: 100%;
	max-width: var(--mer-container-width);
	margin-left: auto;
	margin-right: auto;
	padding-left: 24px;
	padding-right: 24px;
}
body.mer-layout-boxed {
	max-width: calc(var(--mer-container-width) + 80px);
	margin: 0 auto;
	box-shadow: 0 0 60px rgba(0,0,0,0.08);
}
body.mer-layout-boxed .mer-container { max-width: 100%; }

.mer-site-content { display: block; }
.mer-content-area.has-sidebar {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	gap: 60px;
	align-items: start;
}
body.mer-sidebar-left .mer-content-area.has-sidebar { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
body.mer-sidebar-left .mer-content-area.has-sidebar .mer-primary { order: 2; }
body.mer-sidebar-left .mer-content-area.has-sidebar .mer-secondary { order: 1; }

@media (max-width: 780px) {
	.mer-content-area.has-sidebar { grid-template-columns: 1fr; }
	body.mer-sidebar-left .mer-content-area.has-sidebar .mer-primary,
	body.mer-sidebar-left .mer-content-area.has-sidebar .mer-secondary { order: initial; }
}

.mer-section { padding: 90px 0; }
@media (max-width: 780px) { .mer-section { padding: 50px 0; } }