/*
Theme Name:  Walden
Theme URI:   https://walden.co.za/
Author:      The Walden Suites
Description: The house theme for The Walden Suites — a classic PHP theme, no page builder required. Pairs with the Walden Core plugin, which holds the rooms and the tariffs. Everything renders server-side, so the rooms and rates are in the HTML rather than assembled by JavaScript after the fact.
Version:     1.13.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License:     GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: walden
Update URI: false
Tags: hospitality, custom-menu, custom-logo, translation-ready, block-editor-styles, threaded-comments, featured-images, wide-blocks
*/

/*
 * Update URI: false
 *
 * This theme is not in the WordPress.org directory and must never be updated
 * from it. Without that header, anyone publishing a theme there with the folder
 * name "walden-theme" would have their code offered to this site as an update,
 * and on a site with automatic updates switched on it would simply arrive.
 * Saying the theme has no update source is both true and the way to close it.
 */

/*
 * The design system lives in assets/css/walden.css and is enqueued by
 * functions.php. This file carries the theme header only — WordPress requires
 * a style.css at the theme root whether or not anything is loaded from it.
 *
 * Anything written below overrides the design system, and is loaded after it.
 */

/* WordPress core markup that the design system does not know about. */

.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 {
	position: absolute;
	top: -100px;
	left: 8px;
	z-index: 400;
	padding: 12px 20px;
	background: #05192F;
	color: #F4F1EA;
	font-size: 13px;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	text-decoration: none;
	transition: top .2s ease;
}

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

/*
 * The drawer nav is built by walden.js into #site-nav, which means there is no
 * navigation at all with scripting off. This plain list sits in the markup
 * either way — visually hidden once the script runs, restored if it never does.
 */
.nav-fallback {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.js-off .nav-fallback {
	position: static;
	width: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	clip: auto;
	white-space: normal;
	padding: 18px clamp(20px, 5vw, 40px);
	background: #05192F;
}

.js-off .nav-fallback ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.js-off .nav-fallback a {
	color: #F4F1EA;
	font-size: 13px;
	letter-spacing: 1.4px;
	text-decoration: none;
}

/*
 * The room filter hides cards with the hidden attribute. `.card` sets
 * `display: flex`, which beats the browser's default `[hidden] { display: none }`
 * on specificity, so the rule has to be restated — the same way walden.css
 * already does for .lightbox[hidden] and .fab-panel[hidden].
 */
.card[hidden] { display: none; }

/*
 * WordPress stamps width/height attributes onto every attachment <img> it
 * renders, to prevent layout shift. Those attributes act as a very
 * low-priority height hint — but wherever the design system sizes an image
 * with aspect-ratio alone (.card__media img, .room-hero img) and declares no
 * height of its own, that hint is the only height declaration in the
 * cascade and wins outright. With both width and height then definite,
 * aspect-ratio has nothing left to compute: the box takes the attribute's
 * raw pixel height instead of one scaled to the rendered width, and a card
 * meant to be 4:3 renders as tall as the original crop. The static build's
 * hand-written <img> tags never carried these attributes, which is why this
 * never showed up there. Restating height here is the fix.
 */
img[width][height] { height: auto; }

.alignwide  { max-width: 1180px; margin-left: auto; margin-right: auto; }
.alignfull  { max-width: none; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }

.wp-caption-text,
.wp-block-image figcaption {
	font-size: 13px;
	color: #6E6660;
	padding-top: 10px;
}

/* The editor's own paragraphs inside a page body. */
.entry-content > p {
	color: #4A4A4A;
	font-size: 16.5px;
	margin: 0 0 18px;
	text-wrap: pretty;
}

.entry-content > h2 {
	font-family: 'Cormorant Garamond', serif;
	font-weight: 400;
	font-size: clamp(27px, 3.2vw, 36px);
	line-height: 1.14;
	margin: 34px 0 16px;
}

.entry-content > h3 {
	font-family: 'Cormorant Garamond', serif;
	font-weight: 600;
	font-size: 22px;
	margin: 26px 0 10px;
}

.entry-content > ul,
.entry-content > ol {
	color: #4A4A4A;
	font-size: 16px;
	padding-left: 20px;
	margin: 0 0 18px;
}

.entry-content > ul li { margin-bottom: 8px; }

/*
 * Requested change from the design as shipped: the fixed top bar (logo,
 * phone, Book) should not stay visible over the drawer once it opens. The
 * drawer already offers its own ways back — "Back to the page", clicking the
 * ribbon photo, the scrim, or Escape — so hiding the bar loses no way to
 * close it.
 */
.nav-bar.is-open { display: none; }

/*
 * ---------------------------------------------------------------------------
 * WordPress's own pages: search, archives, a single post, a 404, and notes.
 *
 * None of these are part of the eight designed pages, and none of them existed
 * in the static build — there was nothing to search and nothing to comment on.
 * They are styled from the same tokens as the rest of the house so that a
 * visitor who lands on one is still plainly on the same site.
 * ---------------------------------------------------------------------------
 */

/* The vertical rhythm the designed sections use, as a class rather than an
   inline style repeated in every template. */
.wrap--band {
	padding-top: clamp(48px, 7vw, 80px);
	padding-bottom: clamp(56px, 8vw, 96px);
}

/* --- Search form ---------------------------------------------------------- */

.search-form {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas: "label label" "input button";
	gap: 10px;
	align-items: start;
	max-width: 560px;
	margin: 28px 0 0;
}

.search-form label { grid-area: label; margin-bottom: 0; }
.search-form input[type="search"] { grid-area: input; }
.search-form .btn { grid-area: button; }

.search-again {
	margin-top: 48px;
	padding-top: 32px;
	border-top: 1px solid var(--line);
}

/* --- A list of entries ---------------------------------------------------- */

.post-list {
	display: grid;
	gap: 40px;
	max-width: var(--measure);
}

.post-summary {
	display: grid;
	gap: 20px 28px;
	padding-bottom: 40px;
	border-bottom: 1px solid var(--line);
}

.post-summary:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

@media (min-width: 700px) {
	.post-summary:has(.post-summary__media) {
		grid-template-columns: 260px 1fr;
		align-items: start;
	}
}

.post-summary__media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 2px;
}

.post-summary__title {
	font-family: var(--serif);
	font-weight: 400;
	font-size: clamp(24px, 2.6vw, 31px);
	line-height: 1.16;
	margin: 0 0 8px;
}

.post-summary__title a {
	color: var(--ink);
	text-decoration: none;
}

.post-summary__title a:hover { color: var(--brass); }

.post-summary__meta,
.entry-meta {
	font-size: 11px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--soft);
	margin: 0 0 12px;
}

.post-summary p {
	color: var(--muted);
	font-size: 16px;
	margin: 0 0 12px;
}

/* --- Pagination ----------------------------------------------------------- */

.navigation.pagination,
.navigation.comments-pagination {
	margin-top: 56px;
	padding-top: 28px;
	border-top: 1px solid var(--line);
}

.nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
}

.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border: 1px solid var(--line);
	color: var(--ink);
	font-size: 14px;
	text-decoration: none;
	transition: background .18s var(--ease-soft), color .18s var(--ease-soft);
}

.page-numbers:hover { background: var(--paper-cool); }

.page-numbers.current {
	background: var(--ink);
	border-color: var(--ink);
	color: var(--on-dark);
}

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

/* Post-to-post navigation under a single entry. */
.post-navigation {
	margin-top: 56px;
	padding-top: 28px;
	border-top: 1px solid var(--line);
}

.post-navigation .nav-links {
	justify-content: space-between;
	gap: 24px;
}

.post-navigation a {
	color: var(--ink);
	font-family: var(--serif);
	font-size: 21px;
	text-decoration: none;
}

.post-navigation a:hover { color: var(--brass); }

.entry-nav__dir {
	display: block;
	font-family: var(--sans);
	font-size: 11px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--soft);
	margin-bottom: 4px;
}

.page-links {
	margin-top: 24px;
	font-size: 14px;
	color: var(--soft);
}

/* --- 404 ------------------------------------------------------------------ */

.notfound-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 28px 0 0;
}

/* --- Notes ---------------------------------------------------------------- */

.comments {
	max-width: var(--measure);
	margin-top: 64px;
	padding-top: 40px;
	border-top: 1px solid var(--line);
}

.comments__title,
.comment-reply-title {
	font-family: var(--serif);
	font-weight: 400;
	font-size: clamp(26px, 3vw, 34px);
	line-height: 1.14;
	margin: 0 0 28px;
}

.comments__closed {
	color: var(--soft);
	font-size: 15px;
	margin: 24px 0 0;
}

.comment-list,
.comment-list .children {
	list-style: none;
	margin: 0;
	padding: 0;
}

.comment-list .children {
	margin-top: 24px;
	padding-left: clamp(16px, 4vw, 48px);
	border-left: 1px solid var(--line);
}

.comment-list li { margin-bottom: 28px; }

.comment-body {
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: 4px;
	padding: 24px 26px;
}

.comment-author {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 15px;
	color: var(--ink);
}

.comment-author img {
	border-radius: 50%;
	width: 40px;
	height: 40px;
}

.comment-author .says { display: none; }

.comment-metadata {
	font-size: 11px;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var(--soft);
	margin: 8px 0 14px;
}

.comment-metadata a { color: inherit; text-decoration: none; }

.comment-body p {
	color: var(--muted);
	font-size: 16px;
	margin: 0 0 12px;
}

.comment-awaiting-moderation {
	display: block;
	font-size: 13px;
	color: var(--brass-dark);
}

.reply a {
	font-size: 11px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--brass);
	text-decoration: none;
}

.comment-respond { margin-top: 48px; }

.comment-form {
	display: grid;
	gap: 16px;
	max-width: 640px;
}

.comment-form label {
	display: block;
	font-size: 11px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--ink);
	margin-bottom: 6px;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%;
	font-family: var(--sans);
	border: 1px solid var(--line);
	background: var(--white);
	padding: 12px 14px;
	border-radius: 2px;
	font-size: 15px;
	color: var(--body);
}

.comment-form textarea { resize: vertical; }

.comment-form .comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 14px;
	color: var(--muted);
}

.comment-form .comment-form-cookies-consent label {
	font-size: 14px;
	letter-spacing: 0;
	text-transform: none;
	color: var(--muted);
	margin: 0;
}

.comment-form .form-submit { margin: 0; }

.comment-notes,
.logged-in-as {
	font-size: 14px;
	color: var(--soft);
	margin: 0;
}

/*
 * ---------------------------------------------------------------------------
 * Widget areas.
 *
 * Two of them, and both invisible until something is put in them. The eight
 * designed pages never call either — a widget area in the middle of the villa
 * page would be exactly the page builder this theme is not.
 * ---------------------------------------------------------------------------
 */

/* One column, until the aside has something in it. */
.layout__main { min-width: 0; }

@media (min-width: 900px) {
	.layout--aside {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 300px;
		gap: clamp(32px, 5vw, 64px);
		align-items: start;
	}
}

.site-aside {
	display: grid;
	gap: 36px;
	margin-top: 56px;
}

@media (min-width: 900px) {
	.site-aside {
		margin-top: 0;
		position: sticky;
		top: 92px;
	}
}

.widget__title {
	font-family: var(--sans);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: var(--ink);
	margin: 0 0 14px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--line);
}

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

.widget li {
	padding: 7px 0;
	font-size: 15px;
	color: var(--muted);
}

.widget li + li { border-top: 1px solid var(--line); }

.widget a {
	color: var(--ink);
	text-decoration: none;
}

.widget a:hover { color: var(--brass); }

.widget p {
	color: var(--muted);
	font-size: 15px;
	line-height: 1.7;
	margin: 0 0 12px;
}

.widget select,
.widget input[type="text"],
.widget input[type="search"] {
	width: 100%;
	font-family: var(--sans);
	border: 1px solid var(--line);
	background: var(--white);
	padding: 10px 12px;
	border-radius: 2px;
	font-size: 15px;
	color: var(--body);
}

/* The aside's search widget stacks, unlike the wide one on a results page. */
.site-aside .search-form {
	grid-template-columns: 1fr;
	grid-template-areas: "label" "input" "button";
	margin-top: 0;
}

/* --- The footer strip ----------------------------------------------------- */

/* Held to the same measure as .site-foot__top, or the strip would run the full
   width of the screen while everything above it stays in the column. */
.site-foot__widgets {
	max-width: var(--measure);
	margin: 8px auto 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 32px clamp(24px, 4vw, 56px);
	padding: 40px 0;
	border-top: 1px solid rgba(246, 249, 252, .14);
}

.site-foot__widgets .widget__title {
	color: var(--on-dark);
	border-bottom-color: rgba(246, 249, 252, .18);
}

.site-foot__widgets .widget li {
	color: var(--on-dark-2);
	border-top-color: rgba(246, 249, 252, .12);
}

.site-foot__widgets .widget p { color: var(--on-dark-2); }
.site-foot__widgets .widget a { color: var(--on-dark); }
.site-foot__widgets .widget a:hover { color: var(--brass-lit); }

/*
 * ---------------------------------------------------------------------------
 * An uploaded logo, in place of the wordmark.
 *
 * The bar is built by JavaScript after the page paints, and the mark carries
 * its real width and height as attributes for that reason. The rules below
 * scale it into the bar without letting a tall crest or a very wide wordmark
 * push the bar out of shape.
 * ---------------------------------------------------------------------------
 */

.nav-brand__logo {
	display: block;
	width: auto;
	height: auto;
	max-height: 46px;
	max-width: min(300px, 46vw);
	object-fit: contain;
}

@media (max-width: 640px) {
	.nav-brand__logo { max-height: 38px; }
}

/*
 * ---------------------------------------------------------------------------
 * Keyboard focus.
 *
 * walden.css outlines a focused control in brass. That reads well on the pale
 * grounds the design spends most of its time on, and badly on the navy ones —
 * brass on deep navy is close enough in value that the outline all but
 * disappears, exactly where the drawer puts the most controls. On dark
 * surfaces it becomes the lit brass instead, which is what the design already
 * uses for accents on navy.
 * ---------------------------------------------------------------------------
 */

.drawer a:focus-visible,
.drawer button:focus-visible,
.nav-bar a:focus-visible,
.nav-bar button:focus-visible,
.site-foot a:focus-visible,
.site-foot button:focus-visible,
.lightbox button:focus-visible,
.skip-link:focus-visible {
	outline: 2px solid var(--brass-lit);
	outline-offset: 3px;
}

/*
 * The skip link is the first thing a keyboard visitor meets, and it sits on
 * the deep navy. Its own outline needs to clear the panel it sits on rather
 * than being drawn tight against it.
 */
.skip-link:focus,
.skip-link:focus-visible {
	outline-offset: 2px;
}

/*
 * Anything given focus programmatically — the drawer or the lightbox when it
 * has nothing focusable of its own — should not draw an outline around the
 * whole panel. The controls inside it carry their own.
 */
.drawer:focus,
.lightbox:focus {
	outline: none;
}

/*
 * Reduced motion needs nothing here: walden.css already answers it with a
 * universal rule that flattens every animation and transition on the page and
 * forces the reveals to their finished state.
 */

/*
 * ---------------------------------------------------------------------------
 * Walking or driving, on the places grid.
 *
 * The mode used to be buried inside the distance text — "5 min walk" beside
 * "10 min drive", which read as one undifferentiated string. Splitting it out
 * lets the eye sort the list into what can be reached on foot and what needs
 * the car.
 * ---------------------------------------------------------------------------
 */

.tile__dist {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.mode {
	display: inline-flex;
	align-items: center;
	padding: 2px 8px;
	border-radius: 20px;
	font-size: 10px;
	letter-spacing: .8px;
	text-transform: lowercase;
	line-height: 1.6;
}

/* Walking is the accent: on a hill above the sea, what you can reach on foot
   is the thing worth noticing first. */
.mode--walk {
	background: rgba(138, 106, 59, .12);
	color: var(--brass-dark);
}

.mode--drive {
	background: rgba(10, 22, 38, .07);
	color: var(--soft);
}

/*
 * ---------------------------------------------------------------------------
 * The rooms grid, once it has been filtered.
 *
 * walden.css lays the cards out with `repeat(auto-fit, minmax(285px, 1fr))`.
 * auto-fit collapses any track that has nothing in it and hands the space to
 * whatever is left — which is invisible while all nine rooms show, and very
 * visible the moment the filter narrows to one. Pick "Budget" and the single
 * remaining card stretches the full width of the page; its photograph is
 * width: 100% at 4:3, so it balloons to roughly 1240 x 930 and reads as a
 * different design rather than the same card.
 *
 * auto-fill keeps the empty tracks, which keeps every card at the width it has
 * in a full grid however few of them are showing. The gallery grid already
 * does this; the rooms grid was the one that did not.
 *
 * Scoped to the filtered archive rather than every .card-grid, because nothing
 * else on the site hides cards.
 * ---------------------------------------------------------------------------
 */

#room-grid {
	grid-template-columns: repeat(auto-fill, minmax(285px, 1fr));
}