/*!
 * RoofingWala - main stylesheet
 *
 * Design tokens, base typography and the site chrome (header, navigation,
 * breadcrumbs, footer). Loaded on every view.
 *
 * Blocksy's own CSS (ct-main-styles) prints before this file, so equal
 * specificity resolves in our favour without !important.
 */

/* ==========================================================================
   1. Typefaces - self hosted, no third party requests
   ========================================================================== */

@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 500 700; font-stretch: 100%; font-display: swap; src: url(../fonts/archivo-normal-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 500 700; font-stretch: 100%; font-display: swap; src: url(../fonts/archivo-normal-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Literata'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(../fonts/literata-normal-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Literata'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(../fonts/literata-normal-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Literata'; font-style: italic; font-weight: 400 600; font-display: swap; src: url(../fonts/literata-italic-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Literata'; font-style: italic; font-weight: 400 600; font-display: swap; src: url(../fonts/literata-italic-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ==========================================================================
   2. Design tokens
   ========================================================================== */

:root {
	/* Colour. One accent: weathered copper patina, the green that copper
	   flashing and valleys turn with age. Neutrals are biased very slightly
	   green so nothing reads as default grey, and all are the same temperature. */
	--rw-bg: #FFFFFF;
	--rw-surface: #F4F7F6;
	--rw-surface-alt: #FAFCFB;
	--rw-ink: #131A18;
	--rw-body: #2E3A38;
	--rw-muted: #5A6A66;
	--rw-line: #E1E7E5;
	--rw-line-strong: #C6D2CE;
	--rw-accent: #0E6A57;
	--rw-accent-hover: #0A5344;
	--rw-accent-soft: #E9F1EE;
	--rw-on-dark: #C4D0CC;

	/* The one semantic colour. A muted brick red, not a second accent: it is
	   restricted to the safety variant of the article callout, where a warning
	   that looks like an ordinary aside would be a design failure rather than a
	   consistent one. It never carries links, labels, markers or ornament.
	   7:1 on white, 6.5:1 on its own tint. */
	--rw-danger: #A03328;
	--rw-danger-soft: #FCF1EF;

	/* Type. Two families only: Archivo for headings, navigation and metadata,
	   Literata for running text. Literata is drawn for long form reading on
	   screen, which is the whole job on this site. */
	--rw-font-heading: 'Archivo', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
	--rw-font-body: 'Literata', Georgia, 'Times New Roman', serif;
	--rw-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	--rw-size-meta: 0.8125rem;
	--rw-size-small: 0.9375rem;
	--rw-size-body: clamp(1.0625rem, 1.02rem + 0.18vw, 1.1875rem);
	--rw-size-h3: clamp(1.1875rem, 1.12rem + 0.34vw, 1.4375rem);
	--rw-size-h2: clamp(1.4375rem, 1.28rem + 0.78vw, 1.9375rem);
	--rw-size-h1: clamp(1.875rem, 1.5rem + 1.85vw, 2.9rem);
	--rw-size-display: clamp(2.125rem, 1.6rem + 2.4vw, 3.4rem);

	/* Display type sits tight, running text stays open. */
	--rw-leading-tight: 1.12;
	--rw-leading-snug: 1.28;
	--rw-leading-body: 1.72;
	--rw-tracking-tight: -0.02em;
	--rw-tracking-label: 0.09em;

	/* Space, 8px base. */
	--rw-space-3xs: 0.25rem;
	--rw-space-2xs: 0.5rem;
	--rw-space-xs: 0.75rem;
	--rw-space-sm: 1rem;
	--rw-space-md: 1.5rem;
	--rw-space-lg: 2rem;
	--rw-space-xl: 3rem;
	--rw-space-2xl: 4rem;
	--rw-space-3xl: clamp(3.5rem, 2rem + 5vw, 6rem);

	/* Layout. One radius value, held everywhere; avatars are the single stated
	   exception and are circular. */
	--rw-measure: 66ch;
	--rw-wide: 62rem;
	--rw-radius: 4px;
}

/* ==========================================================================
   3. Blocksy bridge
   ========================================================================== */

/*
 * Blocksy renders the header, footer, menus, off canvas panel, search modal and
 * form controls from its own custom properties. Redefining those properties is
 * how this design reaches all of that chrome: no parent files are touched and
 * no selector fights are needed, because Blocksy's own components read these.
 */
:root {
	--theme-palette-color-1: var(--rw-accent);
	--theme-palette-color-2: var(--rw-accent-hover);
	--theme-palette-color-3: var(--rw-body);
	--theme-palette-color-4: var(--rw-ink);
	--theme-palette-color-5: var(--rw-line);
	--theme-palette-color-6: var(--rw-surface);
	--theme-palette-color-7: var(--rw-surface-alt);
	--theme-palette-color-8: var(--rw-bg);

	--theme-font-family: var(--rw-font-body);
	--theme-font-size: 1rem;
	--theme-line-height: var(--rw-leading-body);
	--theme-button-font-weight: 600;
	--theme-button-font-size: 0.9375rem;
	--theme-content-spacing: 1.5em;

	--theme-normal-container-max-width: 1200px;
	--theme-narrow-container-max-width: 720px;
	--theme-content-vertical-spacing: var(--rw-space-3xl);
}

/* ==========================================================================
   4. Base
   ========================================================================== */

body {
	background-color: var(--rw-bg);
	color: var(--rw-body);
	font-family: var(--rw-font-body);
	font-size: var(--rw-size-body);
	line-height: var(--rw-leading-body);
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--rw-font-heading);
	color: var(--rw-ink);
	font-weight: 600;
	line-height: var(--rw-leading-tight);
	letter-spacing: var(--rw-tracking-tight);
	text-wrap: balance;
}

a {
	color: var(--rw-accent);
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1px;
}

a:hover {
	color: var(--rw-accent-hover);
}

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

::selection {
	background: var(--rw-accent-soft);
	color: var(--rw-ink);
}

/* Focus is never removed, only made deliberate. */
:focus-visible {
	outline: 2px solid var(--rw-accent);
	outline-offset: 2px;
	border-radius: 2px;
}

/* ==========================================================================
   5. Header and navigation
   ========================================================================== */

/*
 * Scoped to the element, not the class: Blocksy gives the off-canvas drawer
 * (#offcanvas) the ct-header class too, so a bare .ct-header rule would put a
 * stray bottom border across the mobile menu panel.
 */
header.ct-header {
	background-color: var(--rw-bg);
	border-bottom: 1px solid var(--rw-line);
}

/*
 * Blocksy sizes its header rows from --height, so the masthead is made compact
 * through its own variable rather than by fighting its layout. 120px is a lot
 * of furniture above the lead article on a laptop.
 *
 * Blocksy sets it from [data-header*="type-1"] .ct-header [data-row*="middle"],
 * which is three class-level selectors, so the element selector here is what
 * takes this one past it. Desktop only: below 1000px Blocksy already drops the
 * row to 70px and that is the right height there.
 */
@media (min-width: 1000px) {
	[data-header] header.ct-header [data-row="middle"] {
		--height: 76px;
	}
}

.site-title {
	font-family: var(--rw-font-heading);
	letter-spacing: -0.03em;
	line-height: 1.1;
}

.site-title a {
	color: var(--rw-ink);
	font-weight: 700;
	font-size: 1.3rem;
	text-decoration: none;
}

.site-title a:hover {
	color: var(--rw-accent);
}

.ct-header .ct-menu-link,
.ct-header .menu-container a {
	font-family: var(--rw-font-heading);
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--rw-ink);
	text-decoration: none;
}

.ct-header .ct-menu-link:hover,
.ct-header .current-menu-item > .ct-menu-link,
.ct-header .current_page_item > .ct-menu-link {
	color: var(--rw-accent);
}

/*
 * Blocksy's header toggles are bare icons with no padding, which leaves an
 * 18px tap target on the primary mobile navigation control and 15px on search.
 * WCAG 2.5.8 asks for 24px minimum; 44px is the comfortable figure. Only the
 * hit area changes, the icon is untouched.
 */
.ct-header .ct-toggle,
.ct-header-trigger,
.ct-header-search,
.ct-toggle-close {
	min-width: 44px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.ct-header .ct-toggle {
	color: var(--rw-ink);
}

.ct-header .ct-toggle:hover {
	color: var(--rw-accent);
}

/* Off canvas panel and search modal inherit the palette through the bridge
   above; these only set the type. */
#offcanvas .ct-menu-link,
#search-modal .ct-menu-link {
	font-family: var(--rw-font-heading);
	font-weight: 600;
	font-size: 1.0625rem;
}

#search-modal .ct-search-form input[type="search"],
#search-modal input[type="search"] {
	font-family: var(--rw-font-heading);
}

/* ==========================================================================
   6. Breadcrumbs (Yoast output, styled here)
   ========================================================================== */

.rw-breadcrumbs {
	font-family: var(--rw-font-heading);
	font-size: var(--rw-size-meta);
	color: var(--rw-muted);
	padding-top: var(--rw-space-md);
}

.rw-breadcrumbs__trail {
	margin: 0;
	line-height: 1.5;
}

.rw-breadcrumbs a {
	color: var(--rw-muted);
	text-decoration: none;
}

.rw-breadcrumbs a:hover {
	color: var(--rw-accent);
	text-decoration: underline;
}

.rw-breadcrumbs .breadcrumb_last {
	color: var(--rw-ink);
	font-weight: 600;
}

/* ==========================================================================
   7. Forms and buttons
   ========================================================================== */

input[type="search"],
input[type="text"],
input[type="email"],
textarea {
	font-family: var(--rw-font-body);
	font-size: 1rem;
	color: var(--rw-ink);
	border-radius: var(--rw-radius);
}

input::placeholder,
textarea::placeholder {
	color: var(--rw-muted);
	opacity: 1;
}

.wp-block-button__link,
button,
input[type="submit"] {
	font-family: var(--rw-font-heading);
	font-weight: 600;
	border-radius: var(--rw-radius);
}

/* ==========================================================================
   8. Footer
   ========================================================================== */

/*
 * A dark footer closes the page and separates site furniture from editorial
 * content. Blocksy's footer components read the palette properties, so they are
 * re-pointed here rather than restyled one by one.
 */
/*
 * Blocksy paints the footer with [data-footer*="type-1"] .ct-footer, which
 * outranks a plain footer.ct-footer, so the ground is set through a selector
 * that carries the same attribute. Note also that --theme-palette-color-6 must
 * NOT be re-pointed here: Blocksy's own rule resolves the footer background
 * from it, so overriding it inside this scope turns the footer translucent and
 * drops the light text onto a white page.
 */
#footer,
[data-footer] footer.ct-footer,
footer.ct-footer {
	--theme-text-color: var(--rw-on-dark);
	--theme-link-initial-color: #FFFFFF;
	--theme-link-hover-color: var(--rw-accent-soft);
	--theme-headings-color: #FFFFFF;
	--theme-border-color: rgba(255, 255, 255, 0.14);
	background-color: var(--rw-ink);
	color: var(--rw-on-dark);
}

footer.ct-footer [data-row] {
	background-color: transparent;
}

#footer a,
footer.ct-footer a {
	color: #FFFFFF;
	text-decoration: none;
}

#footer a:hover,
footer.ct-footer a:hover {
	color: var(--rw-accent-soft);
	text-decoration: underline;
}

footer.ct-footer .ct-footer-copyright {
	font-family: var(--rw-font-heading);
	font-size: var(--rw-size-meta);
	color: var(--rw-on-dark);
}

/* Editorial footer layout. Columns are emitted only when they have content, so
   the grid is deliberately auto-fit rather than a fixed column count. */
.rw-footer {
	padding-block: var(--rw-space-2xl) var(--rw-space-lg);
}

/*
 * Two columns on a phone, not one. Stacking every column put the whole footer
 * at roughly 870px on a 375px screen, so the last thing a reader met was a
 * full screen of links to scroll past. Pairing the link columns brings it to
 * about 650px, under one screen; the brand keeps the full width above them.
 */
.rw-footer__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--rw-space-lg) var(--rw-space-md);
}

.rw-footer__col--brand {
	grid-column: 1 / -1;
}

/*
 * Between phone and large desktop the brand takes a row of its own and the link
 * columns share the one under it. Flex rather than tracks here on purpose:
 * every column is conditional, and a track list wide enough for three columns
 * leaves a hole on the right when a menu is empty, or when the brand's two-track
 * span pushes one column onto a second row. Flex divides the row by the number
 * of columns that actually rendered.
 */
@media (min-width: 40em) and (max-width: 74.99em) {
	.rw-footer__grid {
		display: flex;
		flex-wrap: wrap;
		gap: var(--rw-space-lg) var(--rw-space-xl);
	}

	.rw-footer__col {
		flex: 1 1 9rem;
	}

	.rw-footer__col--brand {
		flex: 1 1 100%;
		min-width: 0;
	}
}

/*
 * Only from 1200px is the container wide enough to seat the brand beside all
 * three link columns without wrapping. auto-fit, not auto-fill, so the track a
 * missing menu would have left behind collapses and the remaining columns still
 * run to the right edge.
 */
@media (min-width: 75em) {
	.rw-footer__grid {
		grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
		gap: var(--rw-space-xl);
	}

	.rw-footer__col--brand {
		grid-column: span 2;
		min-width: 0;
	}
}

.rw-footer__brand {
	font-family: var(--rw-font-heading);
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: -0.03em;
	margin: 0;
}

.rw-footer__brand a {
	color: #FFFFFF;
}

.rw-footer__tagline {
	margin: var(--rw-space-2xs) 0 0;
	color: var(--rw-on-dark);
	font-size: 1rem;
	line-height: 1.6;
	max-width: 34ch;
}

.rw-footer__heading {
	font-family: var(--rw-font-heading);
	font-size: var(--rw-size-meta);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--rw-tracking-label);
	color: #FFFFFF;
	margin: 0 0 var(--rw-space-sm);
}

.rw-footer__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--rw-space-2xs);
}

.rw-footer__list a {
	font-family: var(--rw-font-heading);
	font-size: var(--rw-size-small);
	color: var(--rw-on-dark);
	display: inline-block;
	padding-block: 2px;
}

.rw-footer__list a:hover {
	color: #FFFFFF;
}

.rw-footer__bottom {
	margin-top: var(--rw-space-xl);
	padding-top: var(--rw-space-md);
	border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.rw-footer__copyright {
	margin: 0;
	font-family: var(--rw-font-heading);
	font-size: var(--rw-size-meta);
	color: var(--rw-on-dark);
}

/* ==========================================================================
   9. Advertising slots (reserved, not implemented)
   ========================================================================== */

/*
 * No ad code and no ad markup exists yet. These classes exist so that inserting
 * a unit later cannot shift the layout: the space is reserved in advance, which
 * is what keeps CLS near zero once ads are live.
 *
 * Intended positions, in priority order:
 *   1. Between the featured article and the listing grid on the front page.
 *   2. Mid article, between top level sections of a post.
 *   3. Directly above the footer on listing views.
 */
.rw-ad {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-inline: auto;
	background-color: var(--rw-surface);
	border-radius: var(--rw-radius);
	overflow: hidden;
}

.rw-ad--leaderboard {
	width: 100%;
	max-width: 970px;
	min-height: 250px;
	margin-block: var(--rw-space-2xl);
}

.rw-ad--in-content {
	width: 100%;
	min-height: 280px;
	margin-block: var(--rw-space-xl);
}

@media (max-width: 781px) {
	.rw-ad--leaderboard {
		min-height: 280px;
	}
}

/* ==========================================================================
   10. Utilities
   ========================================================================== */

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

[tabindex="-1"]:focus {
	outline: 0;
}

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

/*
 * One component, used on the homepage and under articles. Tinted ground and a
 * single accent rule at the top: enough to read as a distinct offer without
 * behaving like a lead-capture box.
 */
.rw-newsletter {
	background-color: var(--rw-surface);
	border-top: 2px solid var(--rw-accent);
	border-radius: var(--rw-radius);
	padding: var(--rw-space-lg);
	display: grid;
	gap: var(--rw-space-md);
}

@media (min-width: 48em) {
	.rw-newsletter {
		padding: var(--rw-space-xl);
	}
}

/*
 * From 1000px the block becomes two columns: copy on the left, form on the
 * right. Single column at this width left roughly half the tinted panel empty,
 * because the form is capped at 34rem while the panel runs the full container.
 * The cap is dropped here since the column itself now provides the limit.
 */
@media (min-width: 62.5em) {
	.rw-newsletter {
		grid-template-columns: 1.1fr 1fr;
		align-items: center;
		column-gap: var(--rw-space-2xl);
		row-gap: var(--rw-space-2xs);
	}

	.rw-newsletter__body {
		grid-column: 1;
		grid-row: 1 / span 2;
	}

	.rw-newsletter__form {
		grid-column: 2;
		grid-row: 1;
		max-width: none;
	}

	.rw-newsletter__note {
		grid-column: 2;
		grid-row: 2;
	}
}

.rw-newsletter__title {
	font-size: var(--rw-size-h2);
	margin: 0;
}

.rw-newsletter__description {
	margin: var(--rw-space-2xs) 0 0;
	color: var(--rw-muted);
	font-size: 1.0625rem;
	line-height: 1.6;
	max-width: 54ch;
}

/* Capped deliberately: on a 1200px container an uncapped field stretches to
   roughly 950px, which is a poor target and reads as a search bar rather than a
   signup. */
.rw-newsletter__form {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rw-space-2xs);
	max-width: 34rem;
}

.rw-newsletter__input {
	flex: 1 1 16rem;
	min-width: 0;
	min-height: 48px;
	padding: 0 var(--rw-space-sm);
	background-color: var(--rw-bg);
	border: 1px solid var(--rw-line-strong);
	border-radius: var(--rw-radius);
}

.rw-newsletter__button {
	min-height: 48px;
	padding-inline: var(--rw-space-lg);
	background-color: var(--rw-accent);
	color: #FFFFFF;
	border: 1px solid var(--rw-accent);
	border-radius: var(--rw-radius);
	cursor: pointer;
}

.rw-newsletter__button:hover:not(:disabled) {
	background-color: var(--rw-accent-hover);
	border-color: var(--rw-accent-hover);
}

/* Disabled until a provider endpoint is configured. Kept visible rather than
   hidden so the component can be reviewed, and plainly inert so nobody thinks
   an address was captured. */
.rw-newsletter__input:disabled,
.rw-newsletter__button:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.rw-newsletter__note {
	margin: 0;
	font-family: var(--rw-font-heading);
	font-size: var(--rw-size-meta);
	color: var(--rw-muted);
}