/*
Theme Name: Mark Limb Route 2
Theme URI: https://marklimb.com
Author: Mark Limb
Description: Route 2 homepage for marklimb.com. Neue Haas Grotesk Display, edge to edge editorial layout, full width rules, square corners. Built from the Figma file "Website" (Route 2 Styles and Homepage frames).
Version: 0.3.1
Requires at least: 6.0
Requires PHP: 7.4
License: All rights reserved
Text Domain: marklimb
*/

/* ==========================================================================
   Tokens (Figma: Route 2 Styles)
   Desktop 1600 reference, 12 cols, 40 margin, 20 gutter
   Tablet 834 reference, 8 cols, 32 margin, 20 gutter
   Mobile 390 reference, 4 cols, 24 margin, 12 gutter
   ========================================================================== */

:root {
	--c-dark: #202020;
	--c-white: #ffffff;
	--c-light: #f5f5f5;
	--c-decorator: #4b4b4b;
	--c-placeholder: #d9d9d9;
	--c-rule: #000000;

	--font: "neue-haas-grotesk-display", "Neue Haas Grotesk Display Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--w-roman: 400;
	--w-medium: 600; /* Adobe Fonts serves 65 Medium as weight 600 */
	--w-bold: 700;

	/* Mobile first (390 reference) */
	--edge: 24px;
	--gutter: 12px;
	--header-pad: 16px;
	--mark: 40px;
	--mark-gap: 10px;
	--hero-pad: 48px;
	--hero-gap: 22px;
	--heading-gap: 28px;
	--section-pb: 48px;
	--row-gap: 32px;
	--rule-gap: 24px;

	--h1: 56px;      --h1-lh: 62px;
	--h2: min(40px, 10.25vw); --h2-lh: 1.15;
	--h3: 34px;      --h3-lh: 40px;
	--h4: 28px;      --h4-lh: 34px;
	--h5: 24px;      --h5-lh: 30px;
	--h6: 22px;      --h6-lh: 26px;
	--header-p: 24px; --header-p-lh: 32px;
	--p: 18px;       --p-lh: 26px;
	--label: 18px;   --label-lh: 24px;
	--nav: 16px;     --nav-lh: 22px;
	--footer: 16px;  --footer-lh: 22px;
	--brand: 18px;   --brand-prefix-lh: 26px; --brand-name-lh: 26px;
	--button: 18px;  --button-lh: 24px;

	--logo-divisor: 434;
	--tile-ratio: 165 / 108;
}

@media (min-width: 600px) {
	:root {
		--edge: 32px;
		--gutter: 20px;
		--mark: 48px;
		--mark-gap: 16px;
		--hero-pad: 80px;
		--heading-gap: 36px;
		--section-pb: 64px;
		--row-gap: 32px;

		--h1: 96px;      --h1-lh: 104px;
		--h2: 60px;      --h2-lh: 68px;
		--h3: 44px;      --h3-lh: 50px;
		--h4: 36px;      --h4-lh: 42px;
		--h5: 30px;      --h5-lh: 36px;
		--h6: 26px;      --h6-lh: 30px;
		--header-p: 26px; --header-p-lh: 36px;
		--p: 22px;       --p-lh: 32px;
		--label: 22px;   --label-lh: 28px;
		--nav: 18px;     --nav-lh: 24px;
		--footer: 18px;  --footer-lh: 24px;
		--brand: 22px;   --brand-prefix-lh: 30px; --brand-name-lh: 30px;
		--button: 20px;  --button-lh: 26px;

		--logo-divisor: 450.6;
		--tile-ratio: 243.33 / 160;
	}
}

@media (min-width: 1200px) {
	:root {
		--edge: 40px;
		--hero-pad: 140px;
		--heading-gap: 48px;
		--section-pb: 80px;
		--row-gap: 40px;

		/* Fluid between 1200 and the 1600 reference, capped at the Figma sizes */
		--h1: clamp(112px, 9.375vw, 150px);    --h1-lh: 1;
		--h2: clamp(68px, 5.625vw, 90px);      --h2-lh: 1.1333;
		--h3: clamp(48px, 3.75vw, 60px);       --h3-lh: 1.1333;
		--h4: clamp(38px, 3.125vw, 50px);      --h4-lh: 1.16;
		--h5: 40px;      --h5-lh: 46px;
		--h6: 30px;      --h6-lh: 34px;
		--header-p: 40px; --header-p-lh: 52px;
		--p: 28px;       --p-lh: 38px;
		--label: 28px;   --label-lh: 34px;
		--nav: 20px;     --nav-lh: 24px;
		--footer: 20px;  --footer-lh: 24px;
		--brand: 24px;   --brand-prefix-lh: 32px; --brand-name-lh: 34px;
		--button: 24px;  --button-lh: 30px;

		--logo-divisor: 493.33;
		--tile-ratio: 493.33 / 320;
	}
}

/* ==========================================================================
   Base
   ========================================================================== */

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

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

body {
	margin: 0;
	background: var(--c-white);
	color: var(--c-dark);
	font-family: var(--font);
	font-weight: var(--w-roman);
	font-size: var(--p);
	line-height: var(--p-lh);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6, p, blockquote, figure, ul, ol { margin: 0; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
ul[class], ol[class] { list-style: none; padding: 0; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0);
	white-space: nowrap; border: 0;
}

.skip-link:focus {
	position: fixed; top: 8px; left: 8px; z-index: 100;
	width: auto; height: auto; clip: auto;
	padding: 12px 16px; background: var(--c-dark); color: var(--c-white);
	font-size: var(--nav); text-decoration: none;
}

:focus-visible { outline: 2px solid var(--c-dark); outline-offset: 3px; }

/* Type styles */
.t-h1 { font-size: var(--h1); line-height: var(--h1-lh); font-weight: var(--w-medium); letter-spacing: -0.01em; }
.t-h2 { font-size: var(--h2); line-height: var(--h2-lh); font-weight: var(--w-medium); letter-spacing: -0.01em; }
.t-h3 { font-size: var(--h3); line-height: var(--h3-lh); font-weight: var(--w-medium); letter-spacing: -0.01em; }
.t-h4 { font-size: var(--h4); line-height: var(--h4-lh); font-weight: var(--w-medium); letter-spacing: -0.01em; }
.t-h5 { font-size: var(--h5); line-height: var(--h5-lh); font-weight: var(--w-medium); letter-spacing: -0.01em; }
.t-h6 { font-size: var(--h6); line-height: var(--h6-lh); font-weight: var(--w-medium); letter-spacing: -0.01em; }
.t-header-p { font-size: var(--header-p); line-height: var(--header-p-lh); font-weight: var(--w-roman); }
.t-p { font-size: var(--p); line-height: var(--p-lh); font-weight: var(--w-roman); }
.t-label { font-size: var(--label); line-height: var(--label-lh); font-weight: var(--w-medium); }

/* ==========================================================================
   Layout
   ========================================================================== */

.ml-wrap { padding-left: var(--edge); padding-right: var(--edge); }

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
	position: relative;
	z-index: 10;
	background: var(--c-white);
}

.site-header__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding-top: var(--header-pad);
	padding-bottom: var(--header-pad);
}

.brand {
	display: flex;
	align-items: center;
	gap: var(--mark-gap);
	text-decoration: none;
	color: var(--c-dark);
	flex-shrink: 0;
}

.brand__mark { width: var(--mark); height: var(--mark); }

.brand__wordmark {
	display: flex;
	align-items: baseline;
	gap: 4px;
	font-size: var(--brand);
	white-space: nowrap;
}

.brand__prefix { font-weight: var(--w-roman); line-height: var(--brand-prefix-lh); letter-spacing: -0.015em; }
.brand__name { font-weight: var(--w-bold); line-height: var(--brand-name-lh); }

/* Desktop navigation */
.primary-nav { display: none; }

.primary-nav ul {
	display: flex;
	gap: 25px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.primary-nav a {
	font-size: var(--nav);
	line-height: var(--nav-lh);
	text-decoration: none;
	white-space: nowrap;
	text-underline-offset: 4px;
	text-decoration-thickness: 1px;
}

.primary-nav a:hover,
.primary-nav .current-menu-item > a { text-decoration: underline; }

/* Burger (tablet and mobile) */
.menu-toggle {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 40px;
	height: 32px;
	padding: 0 8px;
	margin: 0;
	border: 0;
	background: none;
	color: var(--c-dark);
	cursor: pointer;
}

.menu-toggle__line {
	display: block;
	width: 24px;
	height: 2px;
	background: currentColor;
	transition: transform .2s ease, opacity .2s ease;
}

.menu-toggle { --burger-shift: 7px; }
.menu-toggle[aria-expanded="true"] .menu-toggle__line:nth-child(2) { transform: translateY(var(--burger-shift)) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__line:nth-child(3) { opacity: 0; }
.menu-toggle[aria-expanded="true"] .menu-toggle__line:nth-child(4) { transform: translateY(calc(var(--burger-shift) * -1)) rotate(-45deg); }

.mobile-nav {
	position: absolute;
	left: 0; right: 0; top: 100%;
	background: var(--c-white);
	border-bottom: 3px solid var(--c-rule);
	padding-bottom: var(--rule-gap);
}

.mobile-nav[hidden] { display: none; }

.mobile-nav ul { margin: 0; padding: 0; list-style: none; }

.mobile-nav li { border-top: 1px solid var(--c-rule); }

.mobile-nav a {
	display: block;
	padding: 16px 0;
	font-size: var(--label);
	line-height: var(--label-lh);
	font-weight: var(--w-medium);
	text-decoration: none;
}

@media (min-width: 600px) {
	.menu-toggle { width: 44px; height: 34px; gap: 6px; --burger-shift: 8px; }
	.menu-toggle__line { width: 28px; }
}

@media (min-width: 1200px) {
	.primary-nav { display: block; }
	.menu-toggle, .mobile-nav { display: none !important; }
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
	padding-top: var(--hero-pad);
	padding-bottom: var(--hero-pad);
}

.hero__inner {
	display: flex;
	flex-direction: column;
	gap: var(--hero-gap);
}

@media (min-width: 1200px) {
	.hero { padding-right: 16.25%; } /* 260 of 1600 */
}

/* ==========================================================================
   Sections, rules and rows
   ========================================================================== */

.section {
	padding-bottom: var(--section-pb);
	display: flex;
	flex-direction: column;
	gap: var(--heading-gap);
}

.section__heading {
	border-top: 3px solid var(--c-rule);
	padding-top: 16px;
}

.rows {
	display: flex;
	flex-direction: column;
	gap: var(--row-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.row {
	border-top: 1px solid var(--c-rule);
	padding-top: var(--rule-gap);
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	row-gap: 24px;
}

.row__body p + p { margin-top: var(--p-lh); }

@media (min-width: 600px) {
	.row {
		grid-template-columns: minmax(0, 232fr) minmax(0, 514fr);
		column-gap: 24px;
	}
}

@media (min-width: 1200px) {
	.row { grid-template-columns: minmax(0, 493fr) minmax(0, 1003fr); }
	.row__body { padding-right: 12.56%; } /* 126 of 1003 */
}

/* Recommendations */
.recommendation__name { display: block; }
.recommendation__role { display: block; margin-top: 4px; }
.recommendation__quote p + p { margin-top: var(--p-lh); }

/* ==========================================================================
   Client logo grid
   ========================================================================== */

.logo-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.logo-grid__tile {
	background: var(--c-dark);
	aspect-ratio: var(--tile-ratio);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	container-type: inline-size;
}

.logo-grid__tile a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

.logo-grid__logo {
	width: calc(var(--w) * 100cqi / var(--logo-divisor));
	height: auto;
	max-width: none;
}

@media (min-width: 600px) {
	.logo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
}

/* ==========================================================================
   Block editor markup (homepage built from core blocks)
   ========================================================================== */

/* Safety net: if WordPress still adds its inner wrapper to Group blocks, let the blocks inside act as direct children of the grid */
.ml-home .wp-block-group__inner-container { display: contents; }

/* Spacing comes from the layout rules above, not from block margins */
.ml-home .wp-block-group > *,
.ml-home .wp-block-quote > * { margin-top: 0; margin-bottom: 0; }

.ml-home .row__body > * + *,
.ml-home .recommendation__quote > * + * { margin-top: var(--p-lh); }

.ml-home .recommendation__role { margin-top: 4px; }

.ml-home .wp-block-quote {
	margin: 0;
	padding: 0;
	border: 0;
	font-style: normal;
}

figure.logo-grid__logo { margin: 0; }
.logo-grid__logo img { width: 100%; height: auto; }

.logo--financial-times { --w: 349.07; }
.logo--jamie-oliver    { --w: 316; }
.logo--virgin-atlantic { --w: 279; }
.logo--quote-me-happy  { --w: 212; }
.logo--blinkbox-music  { --w: 296; }
.logo--ryft            { --w: 151; }

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
	background: var(--c-dark);
	color: var(--c-light);
	padding-bottom: 32px;
}

.site-footer__divider {
	height: 1px;
	background: var(--c-decorator);
	margin: 0 0 32px;
	border: 0;
}

.site-footer__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
}

.site-footer__copy {
	font-size: var(--footer);
	line-height: var(--footer-lh);
}

.social {
	display: flex;
	align-items: center;
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.social a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	text-decoration: none;
}

.social__linkedin {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 4px;
	background: var(--c-white);
	color: var(--c-dark);
	font-weight: var(--w-bold);
	font-size: 22px;
	line-height: 26px;
	padding-top: 2px;
}

.social a:hover { opacity: .75; }

@media (min-width: 600px) {
	.site-footer__content {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
}

/* ==========================================================================
   Generic content (pages, posts, case studies)
   ========================================================================== */

.entry {
	padding-top: var(--hero-pad);
	padding-bottom: var(--section-pb);
}

.entry__header { margin-bottom: var(--heading-gap); }

.entry__content {
	max-width: 1003px;
	font-size: var(--p);
	line-height: var(--p-lh);
}

.entry__content > * + * { margin-top: var(--p-lh); }
.entry__content h2 { font-size: var(--h2); line-height: var(--h2-lh); font-weight: var(--w-medium); letter-spacing: -0.01em; border-top: 3px solid var(--c-rule); padding-top: 16px; margin-top: var(--section-pb); }
.entry__content h3 { font-size: var(--h4); line-height: var(--h4-lh); font-weight: var(--w-medium); letter-spacing: -0.01em; margin-top: var(--row-gap); }
.entry__content h4 { font-size: var(--h6); line-height: var(--h6-lh); font-weight: var(--w-medium); letter-spacing: -0.01em; }
.entry__content blockquote { border-top: 1px solid var(--c-rule); padding-top: var(--rule-gap); font-size: var(--h4); line-height: var(--h4-lh); font-weight: var(--w-medium); }
.entry__content img { height: auto; }
.entry__content figure img { width: 100%; }
.entry__content ul:not([class]), .entry__content ol:not([class]) { padding-left: 1.2em; }

.post-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--row-gap); }
.post-list a { text-decoration: none; }
.post-list a:hover .t-h6 { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }