/*
Theme Name:   Waccamaw Landscaping
Theme URI:    https://waccamawlandscaping.com
Author:       Three Ring Focus
Author URI:   https://threeringfocus.com
Description:  Custom WordPress theme for Waccamaw Landscaping and Construction. Fixed left sidebar header with full-height hero content area.
Version:      1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  waccamaw
Tags:         custom-menu, accessibility-ready, one-column, full-width-template
*/

/* ==========================================================================
   TABLE OF CONTENTS
   1.  Custom properties
   2.  Reset / base
   3.  Accessibility utilities
   4.  Layout shell
   5.  Sidebar header
   5a. Logo
   5b. Primary navigation
   5c. Badge
   5d. Header base (social / legal)
   6.  Hero
   6b. Interior page banner
   7.  Interior pages (background, content, buttons, services sidebar)
   7c. Blog / archive card grid
   8.  Responsive
   9.  Reduced motion / print
   ========================================================================== */


/* 1. Custom properties
   ========================================================================== */

:root {
	--wl-red: #761322;
	--wl-gold: #cb9c5c;
	--wl-clay: #776040;
	--wl-clay-text: #d1a088;
	--wl-white: #ffffff;
	--wl-ink: #2b2b2b;

	--wl-scroll-track: #333333;
	--wl-scroll-thumb: #cb9c5c;

	/* Interior pages */
	--wl-button-bg: #741020;
	--wl-sidebar-bg: #f1ede8;
	--wl-sidebar-link: #7f1324;
	--wl-sidebar-link-hover: #000000;
	--wl-sidebar-rule: #bfbcb9;
	--wl-banner-height: 420px;

	--wl-sidebar-width: 400px;
	--wl-sidebar-padding: 30px;

	/* Sidebar vertical rhythm. These are stepped down by the max-height
	   queries in section 8 so the whole sidebar keeps fitting on shorter
	   desktop windows without needing its own scrollbar (which would clip
	   the submenu flyouts). */
	--wl-logo-width: 160px;
	--wl-nav-pad: 21px;
	--wl-nav-line: 23px;
	--wl-badge-gap: 76px;
	--wl-badge-width: 170px;
	--wl-middle-pad: 60px;
	--wl-social-size: 48px;

	--wl-font-body: "roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--wl-font-nav: "montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--wl-font-display: "span", Georgia, "Times New Roman", serif;
}


/* 2. Reset / base
   ========================================================================== */

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

html {
	-webkit-text-size-adjust: 100%;
	/* Firefox + Chromium standard properties */
	scrollbar-color: var(--wl-scroll-thumb) var(--wl-scroll-track);
}

/* WebKit / Blink scrollbars */
::-webkit-scrollbar {
	width: 14px;
	height: 14px;
}

::-webkit-scrollbar-track {
	background: var(--wl-scroll-track);
}

::-webkit-scrollbar-thumb {
	background: var(--wl-scroll-thumb);
	border: 3px solid var(--wl-scroll-track);
	border-radius: 7px;
}

::-webkit-scrollbar-thumb:hover {
	background: #dcae6d;
}

::-webkit-scrollbar-corner {
	background: var(--wl-scroll-track);
}

body {
	margin: 0;
	padding: 0;
	background-color: var(--wl-red);
	color: var(--wl-ink);
	font-family: var(--wl-font-body);
	font-weight: 400;
	font-style: normal;
	font-size: 17px;
	line-height: 1.65;
}

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

a {
	color: var(--wl-red);
}

button {
	font: inherit;
	color: inherit;
}

/* Visible focus ring everywhere — WCAG 2.4.7 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--wl-gold);
	outline-offset: 2px;
}


/* 3. Accessibility utilities
   ========================================================================== */

.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	white-space: nowrap;
}

.skip-link {
	position: absolute;
	top: -100px;
	left: 10px;
	z-index: 9999;
	padding: 12px 20px;
	background: var(--wl-white);
	color: var(--wl-red);
	font-family: var(--wl-font-nav);
	font-weight: 600;
	text-decoration: none;
	border-radius: 2px;
}

.skip-link:focus {
	top: 10px;
}


/* 4. Layout shell
   ========================================================================== */

.site {
	display: flex;
	align-items: stretch;
	min-height: 100vh;
	min-height: 100svh;
}


/* 5. Sidebar header
   ========================================================================== */

.site-header {
	flex: 0 0 var(--wl-sidebar-width);
	width: 100%;
	max-width: var(--wl-sidebar-width);
	padding: var(--wl-sidebar-padding);
	background-color: var(--wl-red);
	background-image: var(--wl-header-bg, none);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	color: var(--wl-white);
	display: flex;
	flex-direction: column;
	/* Full height of the screen on desktop, and stays put while the content
	   column scrolls. min-height rather than height so that on a short
	   window the sidebar grows and the page scrolls, instead of the base
	   spilling past the red background. */
	min-height: 100vh;
	min-height: 100svh;
	align-self: flex-start;
	position: sticky;
	top: 0;
	z-index: 20;
	/* Deliberately NOT scrollable: overflow on either axis would clip the
	   submenu flyouts, which sit outside the sidebar. */
	overflow: visible;
}

.site-header a {
	color: var(--wl-white);
	text-decoration: none;
	transition: color 0.2s ease;
}

.site-header a:hover,
.site-header a:focus {
	color: var(--wl-gold);
}


/* 5a. Logo — pinned to the top of the header */

.header-bar {
	flex: 0 0 auto;
}

.header-branding {
	flex: 0 0 auto;
	text-align: center;
}

.header-branding .site-logo {
	display: inline-block;
	max-width: var(--wl-logo-width);
}

.header-branding img {
	max-width: var(--wl-logo-width);
	width: 100%;
	height: auto;
	margin: 0 auto;
}

.header-branding .site-title {
	margin: 0;
	font-family: var(--wl-font-nav);
	font-size: 20px;
	line-height: 1.3;
}


/* 5b. Primary navigation — vertically centred in the header */

.header-middle {
	flex: 0 1 auto;
	/* Auto margins centre the nav + badge group in the space left between
	   the logo and the header base. The bottom padding nudges the group
	   slightly above true centre, matching the design comp. */
	margin-top: auto;
	margin-bottom: auto;
	padding: 0 0 var(--wl-middle-pad);
}

.primary-navigation {
	font-family: var(--wl-font-nav);
	font-weight: 500;
	font-style: normal;
}

.primary-menu,
.primary-menu .sub-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.primary-menu > li {
	position: relative;
	/* Full-width rule under every nav link */
	border-bottom: 1px solid var(--wl-clay);
}

.primary-menu > li > a,
.primary-menu > li > .menu-item-label {
	display: block;
	padding: var(--wl-nav-pad) 34px var(--wl-nav-pad) 0;
	font-size: 17px;
	line-height: var(--wl-nav-line);
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

/* ">" indicator / submenu toggle for items with children */
.primary-menu .submenu-toggle {
	position: absolute;
	top: 0;
	right: 0;
	width: 34px;
	/* Matches the link's border-box height, NOT the <li>. On mobile the
	   submenu sits in flow and makes the <li> taller; height: 100% would
	   drag the arrow down with it. */
	height: calc((var(--wl-nav-pad) * 2) + var(--wl-nav-line));
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	margin: 0;
	background: none;
	border: 0;
	color: var(--wl-white);
	font-family: var(--wl-font-nav);
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	transition: color 0.2s ease, transform 0.2s ease;
}

/* The indicator stays white in every state — hover, focus and open. Its
   only state change is the rotation below (plus the standard focus ring). */
.primary-menu .submenu-toggle,
.primary-menu .submenu-toggle:hover,
.primary-menu .submenu-toggle:focus,
.primary-menu .submenu-toggle:active,
.primary-menu .submenu-toggle[aria-expanded="true"] {
	color: var(--wl-white);
}

.primary-menu .submenu-arrow {
	display: block;
	transition: transform 0.2s ease;
}

/* Rotate the indicator while its submenu is open */
.primary-menu .submenu-toggle[aria-expanded="true"] .submenu-arrow {
	transform: rotate(90deg);
}

.primary-menu .sub-menu {
	position: absolute;
	top: 0;
	left: calc(100% + var(--wl-sidebar-padding));
	min-width: 260px;
	padding: 10px 0;
	background: var(--wl-red);
	background-image: var(--wl-header-bg, none);
	background-position: center center;
	background-size: cover;
	border: 1px solid var(--wl-clay);
	box-shadow: 5px 6px 10px rgba(0, 0, 0, 0.35);
	display: none;
	z-index: 30;
}

/* The tap/click path. Works in every context and is the only mechanism on
   touch devices. */
.primary-menu > li.is-open > .sub-menu {
	display: block;
}

/* Desktop pointer: hover opens the submenu, and :focus-within keeps it
   reachable by keyboard with no JavaScript at all.
   :focus-within is deliberately scoped to this context — on touch, tapping
   the ">" leaves focus on the button, and a global focus-within rule would
   stop the second tap from closing the accordion. */
@media (min-width: 1025px) and (hover: hover) {

	.primary-menu > li:hover > .sub-menu,
	.primary-menu > li:focus-within > .sub-menu {
		display: block;
	}
}

/* Escape closes a hovered/focused submenu — WCAG 1.4.13 requires content
   shown on hover to be dismissible. navigation.js adds this class and drops
   it again once the pointer or focus leaves. Must come after the rules above
   so it wins on equal specificity. */
.primary-menu > li.is-dismissed > .sub-menu {
	display: none;
}

.primary-menu .sub-menu a {
	display: block;
	padding: 11px 24px;
	font-size: 14px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
}

.primary-menu .sub-menu li + li {
	border-top: 1px solid var(--wl-clay);
}

/* Invisible bridge across the gap between the sidebar edge and the flyout.
   Without it the pointer crosses unhovered space on its way to the submenu
   and the menu closes before it can be used (WCAG 1.4.13, "hoverable"). */
.primary-menu .sub-menu::before {
	content: "";
	position: absolute;
	top: 0;
	right: 100%;
	width: var(--wl-sidebar-padding);
	height: 100%;
}


/* 5c. Badge — sits just below the nav */

.header-badge {
	margin: var(--wl-badge-gap) 0 0;
	text-align: center;
}

.header-badge img {
	max-width: var(--wl-badge-width);
	width: 100%;
	height: auto;
	margin: 0 auto;
}


/* 5d. Header base — social, legal, copyright, credit */

.header-base {
	flex: 0 0 auto;
	font-family: var(--wl-font-nav);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.6;
}

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

.header-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* Explicit box so the row keeps its height even if the icon font fails */
	width: calc(var(--wl-social-size) * 0.875);
	height: var(--wl-social-size);
	font-size: var(--wl-social-size);
	line-height: 1;
}

.header-social i {
	display: block;
}

.header-legal {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0 10px;
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.header-legal a {
	text-decoration: none;
}

.header-legal a:hover,
.header-legal a:focus {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Decorative "|" divider — CSS so assistive tech doesn't announce it */
.header-legal li + li::before {
	content: "|";
	margin-right: 10px;
	color: var(--wl-white);
}

.header-copyright {
	margin: 0 0 2px;
	font-size: 17px;
}

.header-credit {
	margin: 0;
	font-size: 15px;
}

.header-credit a {
	color: var(--wl-clay-text);
}

.header-credit a:hover,
.header-credit a:focus {
	color: var(--wl-white);
}


/* Mobile menu toggle — hidden on desktop */

.menu-toggle {
	display: none;
}


/* 6. Hero
   ========================================================================== */

.site-content {
	flex: 1 1 auto;
	min-width: 0;
	/* Transparent so the interior-page body background (white + corner icon)
	   shows through. The homepage hero paints over it anyway. */
	background: transparent;
	/* Column flex so the hero can stretch to whatever height the sidebar
	   sets, keeping the two panels flush at every window size. */
	display: flex;
	flex-direction: column;
}

.site-main {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
}

.hero {
	position: relative;
	flex: 1 1 auto;
	min-height: 100vh;
	min-height: 100svh;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	background-color: #0d0d0d;
}

.hero-media {
	position: absolute;
	inset: 0;
}

/* One slide per layer, cross-fading. The reduced-motion block in section 9
   collapses the transition for anyone who asks for that. */
.hero-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.6s ease;
}

.hero-slide.is-active {
	opacity: 1;
	z-index: 1;
}

.hero-slide img,
.hero-slide-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}

/* Single slide: no controls, nothing to fade */
.hero--single .hero-slide {
	opacity: 1;
	transition: none;
}

.hero--single .hero-nav {
	display: none;
}

.hero-caption {
	position: relative;
	z-index: 2;
	width: 100%;
	padding: 40px;
	background: rgba(0, 0, 0, 0.7);
	color: var(--wl-white);
	text-align: center;
}

.hero-rule {
	width: 100%;
	max-width: 350px;
	height: 0;
	margin: 0 auto;
	border: 0;
	border-top: 2px solid var(--wl-gold);
}

.hero-caption .hero-rule:first-of-type {
	margin-bottom: 26px;
}

.hero-caption .hero-rule:last-of-type {
	margin-top: 26px;
}

.hero-title {
	margin: 0;
	font-family: var(--wl-font-display);
	font-weight: 400;
	color: var(--wl-white);
	line-height: 1.2;
}

.hero-title .hero-eyebrow {
	display: block;
	font-family: var(--wl-font-display);
	font-weight: 400;
	font-style: italic;
	font-size: clamp(22px, 1.98vw, 38px);
}

.hero-title .hero-headline {
	display: block;
	font-family: var(--wl-font-display);
	font-weight: 400;
	font-style: normal;
	font-size: clamp(28px, 2.45vw, 47px);
	letter-spacing: 0.01em;
}

/* Slider arrows — static markup for now, wired up when the slider lands.
   Lives inside .hero-caption so the arrows centre on the dark box. */
.hero-nav {
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
}

.hero-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	pointer-events: auto;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
	color: rgba(255, 255, 255, 0.55);
	transition: color 0.2s ease;
}

.hero-arrow:hover,
.hero-arrow:focus {
	color: var(--wl-white);
}

.hero-arrow svg {
	width: 16px;
	height: 26px;
	fill: currentColor;
}

.hero-arrow--prev {
	left: 32px;
}

.hero-arrow--next {
	right: 32px;
}


/* 6b. Interior page banner
   ========================================================================== */

.page-banner {
	width: 100%;
	height: var(--wl-banner-height);
	max-height: var(--wl-banner-height);
	background-color: var(--wl-red);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}


/* 7. Interior pages
   ========================================================================== */

/* Every view except the homepage: white page with the corner icon sitting
   at its natural size in the bottom-right (no repeat, no cover). */
body.waccamaw-internal {
	background-color: var(--wl-white);
	background-image: var(--wl-body-icon, none);
	background-repeat: no-repeat;
	background-position: right bottom;
	background-size: auto;
	background-attachment: scroll;
}

.content-area {
	flex: 1 1 auto;
	min-width: 0;
	padding: 60px clamp(24px, 4vw, 70px);
	max-width: 1100px;
}

.content-area h1,
.content-area h2,
.content-area h3,
.content-area h4 {
	font-family: var(--wl-font-display);
	font-weight: 400;
	color: var(--wl-red);
	line-height: 1.2;
}

.content-area h1,
.content-area .entry-title,
.content-area .page-title {
	font-size: clamp(28px, 2.4vw, 40px);
	margin-top: 0;
}

.content-area h2 {
	font-size: clamp(24px, 1.9vw, 32px);
}

.content-area h3 {
	font-size: clamp(20px, 1.5vw, 26px);
	color: var(--wl-clay);
}

.content-area a {
	color: var(--wl-red);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.content-area a:hover,
.content-area a:focus {
	color: var(--wl-clay);
}


/* 7a. Buttons
   ========================================================================== */

.btn,
.content-area .btn,
.wp-block-button__link,
.wp-element-button,
input[type="submit"],
button[type="submit"],
.search-submit {
	display: inline-block;
	padding: 20px 30px;
	background-color: var(--wl-button-bg);
	border: 1px solid var(--wl-button-bg);
	border-radius: 0 !important;
	color: var(--wl-white) !important;
	font-family: var(--wl-font-nav);
	font-weight: 600;
	font-size: 15px;
	letter-spacing: 0.08em;
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none !important;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.btn:hover,
.btn:focus,
.content-area .btn:hover,
.content-area .btn:focus,
.wp-block-button__link:hover,
.wp-block-button__link:focus,
.wp-element-button:hover,
.wp-element-button:focus,
input[type="submit"]:hover,
input[type="submit"]:focus,
button[type="submit"]:hover,
button[type="submit"]:focus,
.search-submit:hover,
.search-submit:focus {
	background-color: var(--wl-white) !important;
	border-color: var(--wl-button-bg) !important;
	color: var(--wl-button-bg) !important;
	text-decoration: none !important;
}

/* Outline variant — starts inverted, fills on hover */
.btn-outline,
.content-area .btn-outline,
.wp-block-button.is-style-outline .wp-block-button__link {
	background-color: var(--wl-white);
	color: var(--wl-button-bg);
	border: 1px solid var(--wl-button-bg);
}

.btn-outline:hover,
.btn-outline:focus,
.content-area .btn-outline:hover,
.content-area .btn-outline:focus,
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:focus {
	background-color: var(--wl-button-bg);
	color: var(--wl-white);
}


/* 7b. Services template — content plus right-hand sidebar
   ========================================================================== */

.content-with-sidebar {
	display: flex;
	align-items: flex-start;
	gap: 0;
}

.services-sidebar {
	/* 440px at comp width, shrinking gracefully on narrower desktops so the
	   copy column never gets squeezed. Never wider than the 440px spec. */
	flex: 0 0 clamp(300px, 32%, 440px);
	width: 100%;
	max-width: 440px;
	margin-top: 40px;
	padding: 50px 0 50px 50px;
	background-color: var(--wl-sidebar-bg);
	font-family: var(--wl-font-nav);
	font-weight: 600;
}

.services-menu,
.services-sidebar ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.services-menu li {
	border-bottom: 1px solid var(--wl-sidebar-rule);
}

.services-menu li:last-child {
	border-bottom: 0;
}

.services-menu a {
	display: block;
	padding: 14px 0;
	color: var(--wl-sidebar-link);
	font-size: 15px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-decoration: none;
	transition: color 0.2s ease;
}

.services-menu a:hover,
.services-menu a:focus {
	color: var(--wl-sidebar-link-hover);
}

/* The page you are on */
.services-menu .current-menu-item > a,
.services-menu .current_page_item > a,
.services-menu .current-menu-ancestor > a,
.services-menu .current_page_ancestor > a {
	color: var(--wl-sidebar-link-hover);
}


/* 7c. Blog / archive card grid
   ========================================================================== */

.post-grid {
	--wl-card-min: 280px;
	--wl-card-gap: 20px;

	display: grid;
	gap: var(--wl-card-gap);
	/*
	 * 3 across, then 2, then 1 — with no media queries, and driven by the
	 * width of the CONTENT COLUMN rather than the viewport, which matters
	 * here because the 400px sidebar eats a chunk of the window.
	 *
	 * How it works: auto-fill would happily make 4+ tracks on a wide screen,
	 * so max() raises the track minimum to exactly one third of the grid once
	 * there is room for three --wl-card-min columns. Three is then the most
	 * that can fit. Below that, --wl-card-min wins and auto-fill drops to 2,
	 * then 1.
	 */
	grid-template-columns: repeat(
		auto-fill,
		minmax( max( var(--wl-card-min), calc( ( 100% - ( var(--wl-card-gap) * 2 ) ) / 3 ) ), 1fr )
	);
	margin: 0;
	padding: 0;
	list-style: none;
}

.post-card {
	display: flex;
	flex-direction: column;
	background: var(--wl-white);
	border: 1px solid #e6e2dd;
	border-radius: 4px;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
	transition: box-shadow 0.2s ease;
}

.post-card:hover,
.post-card:focus-within {
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
}

/* Featured image — cropped to 2:1 regardless of the uploaded proportions.
   The 'waccamaw-card' size (800×400, hard crop) does this server-side; the
   aspect-ratio here enforces it even for images uploaded before that size
   was registered, so nothing ever renders letterboxed or stretched. */
.post-card-thumb {
	display: block;
	margin: 0;
	background: var(--wl-sidebar-bg);
}

.post-card-thumb img {
	width: 100%;
	height: auto;
	aspect-ratio: 2 / 1;
	object-fit: cover;
	object-position: center center;
}

.post-card-body {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 22px 20px 26px;
}

/* Overrides the serif red .content-area h2 for card headlines */
.content-area .post-card .entry-title {
	margin: 0;
	font-family: var(--wl-font-nav);
	font-weight: 600;
	font-size: 16px;
	line-height: 1.45;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--wl-ink);
}

.content-area .post-card .entry-title a,
.content-area .post-card-thumb {
	color: inherit;
	text-decoration: none;
}

.content-area .post-card .entry-title a:hover,
.content-area .post-card .entry-title a:focus {
	color: var(--wl-red);
	text-decoration: none;
}

.post-card .entry-excerpt {
	font-size: 15px;
	line-height: 1.6;
}

.post-card .entry-excerpt p {
	margin: 0 0 0.8em;
}

.post-card .entry-excerpt p:last-child {
	margin-bottom: 0;
}

/* Pagination under the grid */
.content-area .pagination {
	margin-top: 46px;
	font-family: var(--wl-font-nav);
	font-weight: 600;
}

.content-area .pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.content-area .pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 12px;
	border: 1px solid var(--wl-button-bg);
	color: var(--wl-button-bg);
	font-size: 14px;
	text-decoration: none;
}

.content-area .pagination .page-numbers.current,
.content-area .pagination a.page-numbers:hover,
.content-area .pagination a.page-numbers:focus {
	background: var(--wl-button-bg);
	color: var(--wl-white);
	text-decoration: none;
}

.content-area .pagination .page-numbers.dots {
	border-color: transparent;
}


/* 8. Responsive
   ========================================================================== */

@media (max-width: 1200px) {
	:root {
		--wl-sidebar-width: 330px;
	}
}

/* Wide but short desktop windows: step the sidebar's vertical rhythm down so
   everything keeps fitting. Each tier is chosen so the sidebar's natural
   height lands just under the tier's max-height. */
@media (min-width: 1025px) and (max-height: 1180px) {
	:root {
		--wl-nav-pad: 18px;
		--wl-badge-gap: 56px;
		--wl-badge-width: 150px;
		--wl-middle-pad: 40px;
	}
}

@media (min-width: 1025px) and (max-height: 1060px) {
	:root {
		--wl-nav-pad: 15px;
		--wl-badge-gap: 36px;
		--wl-badge-width: 130px;
		--wl-middle-pad: 28px;
		--wl-social-size: 40px;
	}

	.header-social {
		margin-bottom: 16px;
	}

	.header-legal {
		margin-bottom: 12px;
	}
}

@media (min-width: 1025px) and (max-height: 940px) {
	:root {
		--wl-logo-width: 130px;
		--wl-nav-pad: 12px;
		--wl-badge-gap: 24px;
		--wl-badge-width: 110px;
		--wl-middle-pad: 20px;
		--wl-social-size: 38px;
	}

	.primary-menu > li > a {
		font-size: 16px;
	}
}

@media (min-width: 1025px) and (max-height: 820px) {
	:root {
		--wl-logo-width: 120px;
		--wl-nav-pad: 10px;
		--wl-middle-pad: 12px;
	}

	.primary-menu > li > a {
		font-size: 15px;
	}

	.header-badge {
		display: none;
	}

	.header-base {
		font-size: 15px;
	}

	.header-copyright {
		font-size: 15px;
	}
}

@media (max-width: 1024px) {

	.site {
		display: block;
		min-height: 0;
	}

	.site-header {
		flex: none;
		max-width: none;
		width: 100%;
		height: auto;
		min-height: 0;
		align-self: auto;
		position: static;
		display: block;
		padding: 20px var(--wl-sidebar-padding);
	}

	.site-content,
	.site-main {
		display: block;
	}

	.header-bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 20px;
	}

	.menu-toggle {
		display: inline-flex;
		align-items: center;
		gap: 10px;
		padding: 12px 16px;
		background: transparent;
		border: 2px solid var(--wl-clay);
		color: var(--wl-white);
		font-family: var(--wl-font-nav);
		font-size: 13px;
		font-weight: 500;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		cursor: pointer;
	}

	.menu-toggle:hover,
	.menu-toggle:focus {
		border-color: var(--wl-gold);
		color: var(--wl-gold);
	}

	.header-middle,
	.header-base {
		margin: 0;
	}

	.header-middle {
		padding: 0;
		display: none;
	}

	.header-base {
		display: none;
		padding-top: 24px;
	}

	.site-header.is-menu-open .header-middle,
	.site-header.is-menu-open .header-base {
		display: block;
	}

	.header-middle {
		padding-top: 20px;
	}

	/* Compact logo in the mobile bar: 92px wide keeps it at ~120px tall */
	:root {
		--wl-logo-width: 92px;
	}

	.header-branding {
		text-align: left;
	}

	.header-branding img {
		margin: 0;
	}

	/* The badge is desktop-only */
	.header-badge {
		display: none;
	}

	/* No flyout on small screens, so no bridge either */
	.primary-menu .sub-menu::before {
		display: none;
	}

	/* Submenus become in-flow accordions on small screens: no flyout panel,
	   no drop shadow, and no background image inherited from the desktop rule. */
	.primary-menu .sub-menu {
		position: static;
		left: auto;
		min-width: 0;
		border: 0;
		border-top: 1px solid var(--wl-clay);
		padding: 6px 0 10px 16px;
		background: transparent;
		background-image: none;
		box-shadow: none;
	}

	.primary-menu .sub-menu a {
		white-space: normal;
	}

	.hero {
		flex: none;
		min-height: 0;
	}

	.hero-media {
		position: relative;
		height: 70vw;
		min-height: 300px;
		max-height: 560px;
	}

	.hero {
		display: block;
	}

	.hero-caption {
		padding: 30px 24px;
	}

	.hero-nav {
		position: static;
		display: flex;
		justify-content: center;
		gap: 40px;
		padding: 20px 0 0 0;
		background: rgba(0, 0, 0, 0.7);
	}

	.hero-arrow {
		position: static;
		transform: none;
	}

	:root {
		--wl-banner-height: 300px;
	}

	.content-with-sidebar {
		display: block;
	}

	.services-sidebar {
		max-width: none;
		margin-top: 0;
		padding: 40px clamp(24px, 6vw, 50px);
	}

	.content-area {
		max-width: none;
		padding: 40px clamp(24px, 6vw, 50px);
	}

	/* Tablet and below the sidebar stacks, so the content column is full
	   width and three 296px cards would technically fit. Raising the minimum
	   forces the friendlier 2-up there. */
	.post-grid {
		--wl-card-min: 320px;
		--wl-card-gap: 18px;
	}
}

@media (max-width: 600px) {
	.header-social a {
		font-size: 32px;
	}
}


/* 9. Reduced motion / print
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
	}
}

@media print {
	.site-header,
	.hero-nav {
		display: none;
	}
}