/*
Theme Name: Refugee Run
Theme URI: https://refugee.run/
Author: Sadaqa
Description: A simple, bold classic theme for Refugee Run. Knowledge base (guidance and questions), blueprints and blog, with torn-paper section edges and big photographs. No dependencies, and just one tiny script (the mobile menu button).
Version: 1.0.31
Requires at least: 6.0
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: refugee-run
*/

/*
 * Refugee Run: all of the theme's styling lives in this one file.
 * Plain CSS, no frameworks, no external fonts or images.
 * Aims: bold, warm and energetic (not solemn); WCAG 2.2 AA friendly.
 *
 * Contents
 *   1. Design tokens (colours, type, spacing)
 *   2. Base and accessibility helpers
 *   3. Layout helpers and buttons
 *   4. Header and navigation
 *   5. Hero and page banner (5b: header over the photo, experiment here)
 *   6. Torn-paper section edges (the "grungy" dividers)
 *   7. Knowledge base: search, switcher, tiles
 *   8. Photo block (inside blog cards)
 *   9. Blog cards
 *  10. Footer
 *  11. WordPress content, breadcrumb, layout, sidebar, results, pagination
 *  12. Related content panel (shortcode and related questions)
 */

/* ==========================================================================
   1. Design tokens
   All colours live here so the whole palette can be changed in one place.
   Contrast ratios (checked against WCAG AA, 4.5:1 for normal text):
     ink on sand ............ very high
     ink on tangerine ....... about 5.9:1
     white on teal .......... about 5.0:1
     white on berry ......... about 5.4:1
   ========================================================================== */
:root {
	--ink: #303030;        /* Deep blue-black: main text and dark sections (was 1d1b2f)*/
	--sand: #f6efe0;       /* Warm paper: light sections */
	--tangerine: #ff6b2c;  /* Energy colour: buttons, highlights */
	--yellow: #ffc93c;     /* Sunshine: highlights and focus ring */
	--teal: #0f7c7a;       /* Calm contrast colour */
	--berry: #c2305a;      /* Accent for tiles */
	--white: #ffffff;

	/* System font stacks: nothing to download, nothing to track. */
	--font-display: "Arial Black", "Helvetica Neue", Arial, sans-serif;
	--font-body: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

	--edge-height: clamp(2rem, 6vw, 4.5rem); /* Height of the torn edges */
	--wrap: 72rem;                           /* Maximum content width */
	--gap: clamp(1rem, 3vw, 2rem);           /* General spacing unit */
}

/* ==========================================================================
   2. Base and accessibility helpers
   ========================================================================== */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	/* Respect the visitor's own text-size setting. */
	font-size: 100%;
}

/* Smooth scrolling only for people who have not asked for less motion. */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

body {
	margin: 0;
	background: var(--sand);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 1.125rem;   /* 18px: comfortable reading size */
	line-height: 1.6;
}

/* Headings: heavy, upper case, tight. This is the "bold" part of the look. */
h1, h2, h3 {
	margin: 0 0 0.5em;
	font-family: var(--font-display);
	font-weight: 900;
	line-height: 1.05;
	text-transform: uppercase;
	letter-spacing: -0.01em;
	/* Stops very long words breaking out of narrow screens. */
	overflow-wrap: anywhere;
	text-wrap: balance;
}
h1 { font-size: clamp(2.5rem, 8vw, 5.5rem); }
h2 { font-size: clamp(1.9rem, 5vw, 3.25rem); }
h3 { font-size: clamp(1.25rem, 3vw, 1.6rem); }

p { margin: 0 0 1em; max-width: 65ch; } /* Keeps line lengths readable */

a { color: inherit; }

/*
 * Focus indicator (WCAG 2.4.7 / 2.4.11 / 2.4.13).
 * A yellow ring with a dark ring tucked inside it, so it shows up on
 * both light and dark backgrounds.
 */
:focus-visible {
	outline: 3px solid var(--yellow);
	outline-offset: 2px;
	box-shadow: 0 0 0 5px var(--ink);
}

/* "Skip to content" link: hidden until a keyboard user tabs to it. */
.skip-link {
	position: absolute;
	left: 0.5rem;
	top: -5rem;
	z-index: 100;
	padding: 0.75rem 1rem;
	background: var(--yellow);
	color: var(--ink);
	font-weight: 700;
}
.skip-link:focus { top: 0.5rem; }

/* Text for screen readers only (used for hidden but useful labels). */
.visually-hidden,
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ==========================================================================
   3. Layout helpers and buttons
   ========================================================================== */

/* Centres content and gives it side padding on small screens. */
.wrap {
	width: min(100% - 2 * var(--gap), var(--wrap));
	margin-inline: auto;
}

/*
 * Every full-width band is a "section". It sets its own background and
 * gets a torn top edge (see part 6). Bottom padding is generous so the
 * next section's torn edge has room to overlap without covering content.
 */
.section {
	position: relative;               /* Anchor for the torn edge */
	padding-block: calc(var(--edge-height) * 0.6) calc(var(--edge-height) + var(--gap));
	background: var(--bg, var(--sand));
	color: var(--fg, var(--ink));
}
.section--sand { --bg: var(--sand); --fg: var(--ink); }
.section--ink  { --bg: var(--ink);  --fg: var(--white); }
.section--teal { --bg: var(--teal); --fg: var(--white); }

/* Buttons: big, chunky, at least 44px tall (WCAG 2.5.8 target size). */
.button {
	display: inline-block;
	min-height: 2.75rem;
	padding: 0.7rem 1.5rem;
	border: 3px solid var(--ink);
	background: var(--yellow);
	color: var(--ink);
	font-family: var(--font-display);
	font-size: 1rem;
	text-transform: uppercase;
	text-decoration: none;
	box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.5);
	cursor: pointer;
}
.button:hover { background: var(--tangerine); }
.button:active { box-shadow: 2px 2px 0 var(--ink); transform: translate(3px, 3px); }

/* On dark backgrounds the shadow flips to white so it stays visible. */
.section--ink .button { border-color: var(--white); box-shadow: 5px 5px 0 var(--tangerine); }

/* ==========================================================================
   4. Header and navigation
   On wide screens the menu is a row of links (it wraps if it must).
   On phones (40em and under) it collapses behind a "Menu" button, but ONLY if
   JavaScript is running: assets/js/nav-toggle.js adds the class "js" to <html>.
   With no JavaScript the links simply stay visible, so nobody loses the menu.
   ========================================================================== */
.site-header {
	position: relative;       /* The phone menu panel is positioned against this */
	background: var(--ink);
	color: var(--white);
}
.site-header .wrap {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem var(--gap);
	padding-block: 0.75rem;
}

.site-title {
	font-family: var(--font-display);
	font-size: 1.5rem;
	text-transform: uppercase;
	text-decoration: none;
	letter-spacing: -0.01em;
}
.site-title span { color: var(--tangerine); } /* The "Run" half of the name */

.site-nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.site-nav a {
	display: inline-block;
	padding: 0.6rem 0.25rem;   /* Gives a tall, easy-to-hit target */
	font-weight: 700;
	text-decoration: none;
}
.site-nav a:hover,
.site-nav a[aria-current="page"] {
	text-decoration: underline;  /* Not colour alone: underline marks the page you are on */
	text-decoration-color: var(--tangerine);
	text-decoration-thickness: 0.2em;
}

/* The menu button. Hidden everywhere unless a phone-sized screen AND JavaScript has revealed it. */
.nav-toggle { display: none; }

/* The three bars of the "hamburger" icon, drawn with CSS (decorative; the word "Menu" is the label). */
.nav-toggle__bars {
	position: relative;
	display: block;
	width: 1.25rem;
	height: 3px;
	background: currentColor;
}
.nav-toggle__bars::before,
.nav-toggle__bars::after {
	content: "";
	position: absolute;
	left: 0;
	width: 100%;
	height: 3px;
	background: currentColor;
}
.nav-toggle__bars::before { top: -7px; }
.nav-toggle__bars::after  { top: 7px; }

/* When open, the bars become a cross. */
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after  { top: 0; transform: rotate(-45deg); }

@media (max-width: 40em) {

	/* Show the button (the script removes its "hidden" attribute). */
	.nav-toggle:not([hidden]) {
		display: inline-flex;
		align-items: center;
		gap: 0.75rem;
		min-height: 2.75rem;
		padding: 0.5rem 1rem;
		border: 3px solid transparent;
		background: transparent;
		color: var(--white);
		font: inherit;
		font-weight: 700;
		cursor: pointer;
	}

	/* With JavaScript running: hide the menu until the button opens it. */
	.js .site-nav ul { display: none; }

	/* Open: a solid full-width panel under the header (solid, so text stays readable over any photo). */
	.js .site-nav.is-open ul {
		display: flex;
		flex-direction: column;
		gap: 0;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		z-index: 20;
		padding: 0.5rem var(--gap) 1rem;
		border-top: 3px solid var(--tangerine);
		background: var(--ink);
	}
	.js .site-nav.is-open li + li { border-top: 1px solid rgb(255 255 255 / 0.25); }
	.js .site-nav.is-open a { display: block; padding: 0.85rem 0; }
}

/* ==========================================================================
   5. Hero and page banner
   ========================================================================== */
/* Shared by the home-page hero and the banner on inner pages. */
.hero,
.page-banner {
	position: relative;
	background: var(--ink);
	color: var(--white);
	overflow: hidden;   /* Keeps the photo inside the banner */
}

/* The hero is the tall one used on the home page. */
.hero {
	display: grid;
	align-items: end;
	min-height: min(80vh, 40rem);
	padding-block: var(--gap) calc(var(--edge-height) + var(--gap));
}

/* Inner-page banner: shorter than the hero. */
.page-banner {
	padding-block: calc(var(--gap) * 2) calc(var(--edge-height) + var(--gap));
}

/* When an inner page has a featured image, the banner grows to show it. */
.page-banner--photo {
	display: grid;
	align-items: end;
	min-height: min(70vh, 46rem);
}

@media (width < 64em) {
	.page-banner--photo {
		min-height: 35svh;
	}
}

/*
 * THE PHOTO LAYER (used by the hero and by photo banners).
 * The featured image fills it. If a hero has no image, the colourful
 * gradient shows instead.
 */
.banner-photo {
	position: absolute;
	inset: 0;
	background: var(--ink);
}
.banner-photo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * Dark overlay so white text always has enough contrast over any photo.
 * Two layers: a strip along the TOP (so a header sitting over the photo stays
 * readable) and a stronger one rising from the BOTTOM (behind the headline).
 */
.banner-photo::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to bottom, rgb(0 0 0 / 0.5), rgb(0 0 0 / 0) 9rem),
		linear-gradient(to top, rgb(0 0 0 / 0.7), rgb(0 0 0 / 0.2) 70%);
}

.hero .wrap,
.page-banner .wrap { position: relative; } /* Sits above the photo */

.hero h1 { max-width: 14ch; }
.hero h1,
.page-banner--photo h1 { text-shadow: 3px 3px 0 var(--ink); }
.hero p  { font-size: 1.3rem; }

.page-banner h1 { font-size: clamp(2.25rem, 6vw, 4rem); margin-bottom: 0.25em; }
.page-banner p { font-size: 1.2rem; margin: 0; }

/* Photographer credit (taken from the image caption), tucked in a corner. */
.credit {
	position: absolute;
	right: var(--gap);
	bottom: calc(var(--edge-height) + 0.25rem);
	z-index: 1;
	margin: 0;
	font-size: 0.5rem;
	color: var(--white);
	text-shadow: 0 0 4px var(--ink);
}

/* ==========================================================================
   5b. Header over the photo  <-- EXPERIMENT HERE
   On any page with a featured image, WordPress adds the class
   "has-banner-photo" to <body> (see rr_body_classes() in inc/helpers.php).
   The header then floats over the top of the photo instead of sitting above it.

   Change just these three values to experiment:

   --header-bg           : the header's background.
   --header-text-shadow  : a shadow behind the logo and menu text.
   --header-clearance    : space kept free above the headline so the header
                           never covers it (raise it if the menu wraps).

   OPTION A (current): partly see-through dark band, no text shadow.
   OPTION B: fully transparent with a drop shadow on the text. Replace the two
   lines below with:
        --header-bg: transparent;
        --header-text-shadow: 0 1px 3px rgb(0 0 0 / 0.9), 0 0 14px rgb(0 0 0 / 0.7);

   ACCESSIBILITY: white text must stay readable (4.5:1) against the WORST part
   of the photo behind it. Test with bright photos. The dark strip at the top of
   the overlay (section 5) helps, but with Option B a very bright photo can still fail.
   ========================================================================== */
:root {
	--header-bg: rgb(48 48 48 / 0.0);
	--header-text-shadow: 2px 2px 3px black;
	--header-clearance: 7rem;
}

.site-title,
.site-nav a,
.nav-toggle { text-shadow: var(--header-text-shadow); }

body.has-banner-photo .site-header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 10;                    /* Above the photo */
	background: var(--header-bg);
}

/* Keep the floating header clear of WordPress's own admin bar for logged-in editors. */
body.admin-bar.has-banner-photo .site-header { top: 32px; }
@media (max-width: 782px) {
	body.admin-bar.has-banner-photo .site-header { top: 46px; }
}

/* Make room at the top of the banner so the header never sits on the headline. */
body.has-banner-photo .hero,
body.has-banner-photo .page-banner--photo { padding-top: var(--header-clearance); }

/* ==========================================================================
   6. Torn-paper section edges
   Each .section draws a ragged strip of its own colour along its top edge,
   overlapping the section above. The shapes are small SVGs used as CSS
   masks, so there is no extra markup and they are invisible to screen
   readers. Three shapes (a, b, c) stop it looking repetitive.
   Add class "edge-a", "edge-b" or "edge-c" to a section to choose one.
   ========================================================================== */
.section::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: calc(1px - var(--edge-height));   /* Sits above the section, 1px overlap to hide seams */
	height: var(--edge-height);
	background: var(--bg, var(--sand));    /* Same colour as the section itself */
	pointer-events: none;                  /* Never blocks clicks */
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-image: var(--edge-shape);
	mask-image: var(--edge-shape);
}
.section { --edge-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 100' preserveAspectRatio='none'%3E%3Cpath d='M0,100 L0,32 L25,24 L42,24 L51,13 L61,40 L85,57 L99,40 L118,39 L141,23 L163,6 L185,47 L217,34 L229,70 L260,45 L294,26 L321,27 L330,43 L353,50 L379,41 L399,49 L419,68 L453,48 L471,64 L495,38 L511,46 L542,38 L561,31 L580,40 L614,44 L628,25 L653,22 L666,31 L688,42 L699,49 L724,46 L754,52 L777,35 L797,35 L831,19 L854,39 L878,24 L896,42 L919,66 L939,12 L967,37 L988,29 L1005,44 L1033,32 L1044,49 L1075,33 L1097,38 L1121,47 L1134,30 L1163,28 L1190,54 L1200,38 L1200,100 Z'/%3E%3C/svg%3E"); }   /* Default shape if none is chosen */
.edge-a { --edge-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 100' preserveAspectRatio='none'%3E%3Cpath d='M0,100 L0,32 L25,24 L42,24 L51,13 L61,40 L85,57 L99,40 L118,39 L141,23 L163,6 L185,47 L217,34 L229,70 L260,45 L294,26 L321,27 L330,43 L353,50 L379,41 L399,49 L419,68 L453,48 L471,64 L495,38 L511,46 L542,38 L561,31 L580,40 L614,44 L628,25 L653,22 L666,31 L688,42 L699,49 L724,46 L754,52 L777,35 L797,35 L831,19 L854,39 L878,24 L896,42 L919,66 L939,12 L967,37 L988,29 L1005,44 L1033,32 L1044,49 L1075,33 L1097,38 L1121,47 L1134,30 L1163,28 L1190,54 L1200,38 L1200,100 Z'/%3E%3C/svg%3E"); }
.edge-b { --edge-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 100' preserveAspectRatio='none'%3E%3Cpath d='M0,100 L0,35 L34,43 L74,53 L104,61 L132,34 L175,49 L221,52 L249,57 L285,48 L300,32 L332,40 L352,31 L373,52 L418,55 L457,46 L474,43 L495,56 L522,40 L548,58 L563,33 L609,44 L641,51 L674,46 L694,35 L738,40 L761,10 L787,49 L830,57 L876,57 L918,44 L940,55 L956,53 L986,70 L1001,37 L1043,48 L1061,26 L1092,26 L1118,34 L1157,44 L1186,34 L1200,44 L1200,100 Z'/%3E%3C/svg%3E"); }
.edge-c { --edge-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 100' preserveAspectRatio='none'%3E%3Cpath d='M0,100 L0,17 L9,33 L31,32 L37,32 L60,36 L75,22 L97,49 L111,51 L121,18 L130,18 L142,19 L168,45 L187,18 L202,39 L214,40 L223,19 L246,26 L266,19 L285,27 L306,29 L321,31 L334,39 L355,37 L375,31 L384,20 L406,40 L423,25 L438,28 L446,17 L469,40 L493,31 L508,45 L515,35 L524,11 L535,23 L548,52 L564,6 L575,21 L584,16 L592,38 L607,17 L620,25 L637,41 L644,26 L655,59 L666,42 L685,26 L697,33 L721,43 L744,38 L760,37 L785,39 L803,6 L827,24 L845,42 L856,33 L868,28 L879,21 L893,29 L913,32 L934,25 L948,52 L966,13 L974,22 L994,39 L1014,23 L1028,35 L1051,20 L1064,20 L1080,70 L1098,39 L1115,70 L1122,20 L1137,19 L1152,21 L1158,26 L1165,36 L1172,29 L1180,12 L1188,23 L1195,30 L1200,34 L1200,100 Z'/%3E%3C/svg%3E"); }

/* The footer uses the same trick. */
.site-footer {
	position: relative;
	padding-block: calc(var(--edge-height) * 0.6) var(--gap);
	background: var(--ink);
	color: var(--white);
}
.site-footer::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: calc(1px - var(--edge-height));
	height: var(--edge-height);
	background: var(--ink);
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 100' preserveAspectRatio='none'%3E%3Cpath d='M0,100 L0,35 L34,43 L74,53 L104,61 L132,34 L175,49 L221,52 L249,57 L285,48 L300,32 L332,40 L352,31 L373,52 L418,55 L457,46 L474,43 L495,56 L522,40 L548,58 L563,33 L609,44 L641,51 L674,46 L694,35 L738,40 L761,10 L787,49 L830,57 L876,57 L918,44 L940,55 L956,53 L986,70 L1001,37 L1043,48 L1061,26 L1092,26 L1118,34 L1157,44 L1186,34 L1200,44 L1200,100 Z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 100' preserveAspectRatio='none'%3E%3Cpath d='M0,100 L0,35 L34,43 L74,53 L104,61 L132,34 L175,49 L221,52 L249,57 L285,48 L300,32 L332,40 L352,31 L373,52 L418,55 L457,46 L474,43 L495,56 L522,40 L548,58 L563,33 L609,44 L641,51 L674,46 L694,35 L738,40 L761,10 L787,49 L830,57 L876,57 L918,44 L940,55 L956,53 L986,70 L1001,37 L1043,48 L1061,26 L1092,26 L1118,34 L1157,44 L1186,34 L1200,44 L1200,100 Z'/%3E%3C/svg%3E");
}

/* ==========================================================================
   7. Knowledge base: search, switcher, tiles
   Everything here works with plain links and a plain GET form: no AJAX.
   ========================================================================== */

/* Search form: one big label, one big field, one big button. */
.kb-search label {
	display: block;
	margin-bottom: 0.4rem;
	font-weight: 700;
}
.kb-search .field {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}
.kb-search input[type="search"] {
	flex: 1 1 16rem;
	min-height: 3.25rem;
	padding: 0.5rem 1rem;
	border: 3px solid var(--ink);
	border-radius: 0;
	background: var(--white);
	color: var(--ink);
	font: inherit;
}

/*
 * Guidance / Questions switcher.
 * Plain links. The current choice is shown by a solid fill AND heavier
 * text, so it is not communicated by colour alone, and carries
 * aria-current="page" for screen readers.
 */
.kb-switch ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 1.5rem 0;
	padding: 0;
	list-style: none;
}
.kb-switch a {
	display: inline-block;
	min-height: 2.75rem;
	padding: 0.6rem 1.5rem;
	border: 3px solid var(--ink);
	background: transparent;
	color: var(--ink);
	font-weight: 400;
	text-decoration: none;
}
.kb-switch a:hover { background: var(--yellow); }
.kb-switch a[aria-current="page"] {
	background: var(--ink);
	color: var(--white);
	font-family: var(--font-display);
	text-transform: uppercase;
}

/* Tile grid: wraps from one column on phones to three on wide screens. */
.tiles {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
	gap: var(--gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.tile {
	position: relative;                 /* Anchor for the whole-tile link */
	padding: 1.25rem;
	border: 3px solid var(--ink);
	background: var(--yellow);
	color: var(--ink);
	box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.5);
	transform: rotate(-0.6deg);         /* Slightly off-square: hand-cut feel */
}
.tile:nth-child(even) { transform: rotate(0.6deg); }

/* Cycle through four colour pairs. Text colours are chosen for contrast. */
.tile:nth-child(4n+2) { background: var(--tangerine); }
.tile:nth-child(4n+3) { background: var(--teal);  color: var(--white); }
.tile:nth-child(4n+4) { background: var(--berry); color: var(--white); }

.tile h2,
.tile h3 { margin-bottom: 0.4em; font-size: clamp(1.25rem, 3vw, 1.6rem); }
.tile p  { margin-bottom: 0.5em; font-size: 1rem; }
.tile__meta { font-weight: 700; }  /* e.g. "8 guides" */

/*
 * The heading link stretches over the whole tile (via ::after), so the
 * entire tile is clickable but there is still just one link for
 * keyboard and screen reader users.
 */
.stretch-link { color: inherit; text-decoration: none; }  /* Used on tiles and blog cards */
.stretch-link::after { content: ""; position: absolute; inset: 0; }
.tile:hover .stretch-link,
.card:hover .stretch-link { text-decoration: underline; text-decoration-thickness: 0.12em; }

/* Show the focus ring around the entire tile, not just the heading text. */
.tile:has(:focus-visible) {
	outline: 3px solid var(--yellow);
	outline-offset: 4px;
}

@media (prefers-reduced-motion: no-preference) {
	.tile { transition: transform 0.15s ease; }
	.tile:hover { transform: rotate(0deg) translateY(-4px); }
}

/* ==========================================================================
   8. Photo block
   Used inside blog cards. ("rr-" prefix because WordPress itself uses the
   plain word "photo" for user avatars.) A real featured image fills it; with
   no image, the gradient shows.
   ========================================================================== */
.rr-photo {
	min-height: 14rem;
	border: 3px solid var(--white);
	background: linear-gradient(160deg, var(--teal), var(--yellow));
}

/* ==========================================================================
   9. Blog cards
   ========================================================================== */

.cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
	gap: var(--gap);
	margin: 0 0 var(--gap);
	padding: 0;
	list-style: none;
}

.card {
	position: relative;
	isolation: isolate;               /* Keeps the background layer inside the card */
	display: flex;
	flex-direction: column;
	justify-content: flex-end;        /* Text sits at the foot of the card */
	min-height: 16rem;
	border: 3px solid var(--ink);
	background: var(--ink);           /* The fallback when there is no image */
	color: var(--white);
	box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.5);
	overflow: hidden;
}

/* The photo layer: fills the card, behind the text (z-index -1 within the card). */
.card__photo {
	position: absolute;
	inset: 0;
	z-index: -1;
}
.card__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * The tint: --ink at 80% over the photo. Even over a pure white photo,
 * white text keeps a contrast of roughly 7:1 (WCAG AA needs 4.5:1).
 */
.card__photo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgb(0 0 0 / 0.7); 
}

.card--plain:nth-child(5n+1) { background: var(--yellow);    color: var(--ink); }
.card--plain:nth-child(5n+2) { background: var(--tangerine); color: var(--ink); }
.card--plain:nth-child(5n+3) { background: var(--teal);      color: var(--white); }
.card--plain:nth-child(5n+4) { background: var(--berry);     color: var(--white); }
.card--plain:nth-child(5n+5) { background: var(--ink);       color: var(--white); }

.card__body { padding: 1.25rem; }
.card h2,
.card h3 { font-size: 1.25rem; }
.card time { font-size: 0.9rem; font-weight: 700; }
.card p { font-size: 1rem; }

/* Focus ring around the whole card, as the tiles have. */
.card:has(:focus-visible) {
	outline: 3px solid var(--yellow);
	outline-offset: 4px;
}


/* ==========================================================================
   10. Footer
   ========================================================================== */
.site-footer ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.5rem;
	margin: 0 0 1rem;
	padding: 0;
	list-style: none;
}
.site-footer a { display: inline-block; padding: 0.5rem 0; }
.site-footer small { font-size: 0.9rem; }

/* ==========================================================================
   11. WordPress content, breadcrumb, results, pagination
   Styles for things the static prototype did not need.
   ========================================================================== */

/* ----- Article content written in the editor ----- */
.entry-content {
	max-width: 46rem;               /* A comfortable reading width */
	overflow-wrap: break-word;      /* Long web addresses cannot break the layout */
}
.entry-content h2 { font-size: clamp(1.5rem, 4vw, 2.25rem); margin-top: 1.5em; }
.entry-content h3 { margin-top: 1.5em; }
.entry-content ul,
.entry-content ol { max-width: 65ch; padding-left: 1.5rem; }
.entry-content li + li { margin-top: 0.35em; }

/* Links inside content are underlined; the yellow highlight on hover is extra, not the only cue. */
.entry-content a:hover { background: var(--yellow); }

.entry-content img,
.entry-content video,
.entry-content iframe { max-width: 100%; height: auto; }
.entry-content figure { margin: 1.5rem 0; }
.entry-content figcaption,
.wp-caption-text { font-size: 0.9rem; }

/* WordPress's image alignment classes. They stack on small screens. */
.alignleft  { float: left;  margin: 0 1.5rem 1rem 0; }
.alignright { float: right; margin: 0 0 1rem 1.5rem; }
.aligncenter { display: block; margin-inline: auto; }
@media (max-width: 40em) {
	.alignleft,
	.alignright { float: none; margin: 0 0 1rem; }
}

.entry-content blockquote {
	margin: 1.5rem 0;
	padding: 0.5rem 1.25rem;
	border-left: 0.5rem solid var(--tangerine);
	font-size: 1.25rem;
}
.entry-content table { border-collapse: collapse; width: 100%; }
.entry-content th,
.entry-content td { padding: 0.5rem 0.75rem; border: 2px solid var(--ink); text-align: left; }
.entry-content code,
.entry-content pre {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	background: var(--white);
	border: 2px solid var(--ink);
}
.entry-content code { padding: 0.1rem 0.3rem; }
.entry-content pre { padding: 1rem; overflow-x: auto; }

.entry-terms { margin-top: 2rem; }
.page-links { margin-top: 1.5rem; font-weight: 700; }

/* Photos placed inside cards fill the space. */
.rr-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ----- Breadcrumb -----
   Every crumb (links AND the current page) gets the same padding and line height,
   and the list centres them on one line, so they sit level with the "/" dividers. */
.breadcrumb ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 0.5rem;
	margin: 0 0 1.5rem;
	padding: 0;
	list-style: none;
	font-size: 1rem;
	line-height: 1.6;
}
.breadcrumb li {
	display: flex;
	align-items: center;
}
.breadcrumb li + li::before { content: "/"; margin-right: 0.5rem; }
.breadcrumb a,
.breadcrumb [aria-current="page"] {
	display: inline-block;
	padding: 0.4rem 0;          /* Also gives links a comfortable tap height */
}
.breadcrumb [aria-current="page"] { font-weight: 700; }

/* ----- Page layout: content, with an optional sidebar ----- */
.layout { display: grid; gap: calc(var(--gap) * 1.5); }
.layout__main { min-width: 0; }   /* Lets wide content shrink instead of forcing the page wider */

/* From tablet-landscape up, the sidebar sits to the right. On smaller screens it stacks below the content. */
@media (min-width: 56em) {
	.layout--sidebar {
		grid-template-columns: minmax(0, 1fr) 17rem;
		align-items: start;
	}
}

/* ----- Sidebar boxes (section navigation, categories) ----- */
.sidebar-box {
	padding: 1rem 1.25rem 1.25rem;
	border: 3px solid var(--ink);
	background: var(--white);
	color: var(--ink);
	box-shadow: 6px 6px 0 var(--ink);
}
.sidebar-box h2 { margin-bottom: 0.75rem; font-size: 1.1rem; }
.sidebar-box ul { margin: 0; padding: 0; list-style: none; }
.sidebar-box a {
	display: block;
	padding: 0.6rem 0.5rem;     /* Tall enough to tap comfortably */
	text-decoration: none;
}
.sidebar-box a:hover { background: var(--yellow); text-decoration: underline; }

/* Section navigation: sub-levels are indented behind a rule. */
.section-nav ul ul {
	margin-left: 0.75rem;
	padding-left: 0.5rem;
	border-left: 3px solid var(--ink);
}
.section-nav > ul > li > a { font-weight: 700; }   /* The top of the section */

/* The page you are on: filled in AND bold, so it never relies on colour alone. */
.section-nav a[aria-current="page"] {
	background: var(--ink);
	color: var(--white);
	font-weight: 700;
}

/* Category list: WordPress puts the post count after the link, so keep them on one line. */
.category-list a { display: inline-block; padding: 0.6rem 0; }

/* ----- "Next page" link at the foot of guides and blueprints ----- */
.next-page,
.post-navigation { margin-top: 2.5rem; max-width: 46rem; }

.next-page__link,
.post-navigation a {
	display: block;
	padding: 1rem 1.25rem;
	border: 3px solid var(--ink);
	background: var(--white);
	color: var(--ink);
	box-shadow: 5px 5px 0 var(--ink);
	text-decoration: none;
}
.next-page__link:hover,
.post-navigation a:hover { background: var(--yellow); }

.next-page__label,
.post-navigation .nav-label {
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}
.next-page__title,
.post-navigation .nav-title {
	display: block;
	font-family: var(--font-display);
	font-size: 1.25rem;
	line-height: 1.2;
}
/* A little arrow after the next-page title. The empty text after the slash keeps screen readers from reading it out. */
.next-page__title::after { content: " \2192"; content: " \2192" / ""; }

/* Previous / next blog post: side by side on wider screens, stacked on phones. */
.post-navigation .nav-links { display: grid; gap: var(--gap); }
@media (min-width: 40em) {
	.post-navigation .nav-links { grid-template-columns: 1fr 1fr; }
	.post-navigation .nav-next { grid-column: 2; text-align: right; }   /* Stays on the right even with no "previous" */
}

/* ----- Search results and question lists ----- */
.kb-search { margin-bottom: 2rem; }
.results { margin: 0; padding: 0; list-style: none; max-width: 52rem; }
.result { padding: 1.25rem 0; border-top: 3px solid var(--ink); }
.result:last-child { border-bottom: 3px solid var(--ink); }
.result h2 { font-size: clamp(1.25rem, 3vw, 1.75rem); margin-bottom: 0.25em; }
.result h2 a { text-decoration: none; }
.result h2 a:hover { text-decoration: underline; }
.result p:last-child { margin-bottom: 0; }

/* Small text label ("Guide" / "Question"): words, not just colour. */
.label {
	display: inline-block;
	margin: 0 0 0.4rem;
	padding: 0.1rem 0.6rem;
	background: var(--ink);
	color: var(--white);
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

/* ----- Page numbers ----- */
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 2rem; }
.page-numbers {
	display: inline-block;
	min-width: 2.75rem;
	min-height: 2.75rem;
	padding: 0.5rem 0.9rem;
	border: 3px solid var(--ink);
	background: var(--white);
	color: var(--ink);
	font-weight: 700;
	text-align: center;
	text-decoration: none;
}
a.page-numbers:hover { background: var(--yellow); }
.page-numbers.current { background: var(--ink); color: var(--white); }
.page-numbers.dots { border-color: transparent; background: none; }

/* ==========================================================================
   12. Related content panel
   Used by the [related_content] shortcode and the "Related questions" panel on
   single questions. Same class names as the old site, restyled for this theme.
   ========================================================================== */
.related-content-panel {
	max-width: 46rem;
	margin: 2.5rem 0;
	padding: 1rem 1.5rem 1.25rem;
	border: 3px solid var(--ink);
	background: var(--yellow);        /* Sunshine yellow with ink text: strong contrast */
	color: var(--ink);
	box-shadow: 6px 6px 0 var(--ink);
}

/* Written as ".related-content-panel .related-content-heading" so it beats the
   general ".entry-content h2" rule when the panel sits inside an article. */
.related-content-panel .related-content-heading {
	margin: 0 0 0.75rem;
	padding-bottom: 0.5rem;
	border-bottom: 3px solid var(--ink);
	font-size: 1.25rem;
}

.related-content-body > :first-child { margin-top: 0; }
.related-content-body > :last-child  { margin-bottom: 0; }
.related-content-body ul,
.related-content-body ol { margin: 0; padding-left: 1.25rem; }
.related-content-body li + li { margin-top: 0.5rem; }

/* Links stay underlined (the white highlight on hover is an extra, not the only cue). */
.related-content-body a { font-weight: 700; }
.related-content-body a:hover { background: var(--white); }

/* On paper, drop the colour and the shadow. */
@media print {
	.related-content-panel {
		border: 2px solid #000;
		background: none;
		box-shadow: none;
		break-inside: avoid;
	}
}