/*
Theme Name: CRDA (GeneratePress Child)
Theme URI: https://chchrda.org.nz
Description: Child theme for GeneratePress, built for the Christchurch Riding for the Disabled website. No block/FSE features assumed anywhere in this theme.
Author: Outsourced IT
Template: generatepress
Version: 0.1.0
Text Domain: crda-child
*/

/* ==========================================================================
   Breakpoint reference (see 05-Information-Architecture.md discussion)
   Mobile:            up to 768px    (matches GeneratePress default)
   Tablet:            769px-1024px   (matches GeneratePress default)
   Standard/Desktop:  1025px-1439px  (matches GeneratePress default)
   Large screen:      1440px and up  (custom - added for this project)
   ========================================================================== */

:root {
	/* Core brand colours, restricted to the safe usage rules from
	   06-Brand-vs-Accessibility.md and 09-Usage-Recommendations.html.
	   Orange/Raspberry/Lime are intentionally NOT set as general text/background
	   variables here -- see the accent rules further down, used only where the
	   contrast math for that specific use case checks out. */
	--crda-dark-blue: #004B87;
	--crda-navy: #111C4E;
	--crda-teal: #007297;
	--crda-aqua: #00A499;
	--crda-grey: #5F6062;
	--crda-orange: #E35205;
	--crda-raspberry: #F93549;
	--crda-white: #ffffff;
	/* No --crda-lime variable: the client has ruled Lime out entirely,
	   not just for text/links (06-Brand-vs-Accessibility.md's original
	   caveat) -- it must not appear anywhere on this site. */

	--crda-body-text: var(--crda-navy);
	--crda-link: var(--crda-teal);
	--crda-link-hover: var(--crda-dark-blue);
}

body {
	color: var(--crda-body-text);
	font-family: Arial, Helvetica, sans-serif;
}

a {
	color: var(--crda-link);
}
a:hover,
a:focus {
	color: var(--crda-link-hover);
}

/* ==========================================================================
   Typography & buttons -- ported from 09-Usage-Recommendations.html so the
   whole site (including plain Pages/Posts using GeneratePress's own default
   templates, not just the custom ones in this theme) follows the same
   brand-safe colour/size rules, not just the specific components below.
   ========================================================================== */

h1 {
	font-size: 40px;
	font-weight: bold;
	line-height: 1.1;
	color: var(--crda-dark-blue); /* 8.91:1 on white, safe at any size */
	margin: 0 0 20px 0;
}

h2 {
	font-size: 32px;
	font-weight: bold;
	line-height: 1.15;
	color: var(--crda-teal); /* 5.45:1 on white, safe at any size */
	margin: 32px 0 16px 0;
}

h3 {
	font-size: 26px;
	font-weight: bold;
	line-height: 1.2;
	color: var(--crda-aqua); /* 3.10:1, large-text only. Do not reuse below this size. */
	margin: 28px 0 14px 0;
}

h4 {
	font-size: 20px;
	font-weight: bold;
	line-height: 1.25;
	color: var(--crda-grey); /* 6.30:1 on white, safe at any size */
	margin: 24px 0 12px 0;
}

h5 {
	font-size: 18px;
	font-weight: bold;
	line-height: 1.3;
	color: var(--crda-navy); /* 16.15:1 on white, safe at any size */
	margin: 20px 0 10px 0;
}

h6 {
	font-size: 15px;
	font-weight: bold;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--crda-dark-blue);
	margin: 18px 0 10px 0;
}

p {
	font-size: 16px;
	line-height: 1.6;
	color: var(--crda-body-text);
	margin: 0 0 16px 0;
}

/* Reusable buttons -- base + colour modifiers, used by the hero CTA, Event
   booking link, and anywhere else a button is needed in content/templates. */
.crda-btn {
	display: inline-block;
	font-family: inherit;
	font-weight: bold;
	text-decoration: none;
	padding: 12px 22px;
	border-radius: 6px;
	font-size: 16px;
}

.crda-btn--primary {
	background: var(--crda-dark-blue);
	color: var(--crda-white);
	/* Dark Blue + white passes AA body text (8.91:1) at any size. */
}
.crda-btn--primary:hover,
.crda-btn--primary:focus {
	background: var(--crda-navy);
	color: var(--crda-white);
}

.crda-btn--accent {
	background: var(--crda-orange);
	color: var(--crda-white);
	font-size: 19px; /* required: white-on-orange only passes AA (3.84:1) at the large-text size threshold */
}
.crda-btn--accent:hover,
.crda-btn--accent:focus {
	background: var(--crda-dark-blue);
	color: var(--crda-white);
}

/* Highlight / callout box -- Aqua background + Navy text, ~5.22:1, passes
   AA at any size. Was Lime; the client has ruled Lime out entirely. */
.crda-highlight {
	background: var(--crda-aqua);
	color: var(--crda-navy);
	padding: 18px 20px;
	border-radius: 6px;
	font-size: 16px;
}

/* ==========================================================================
   Large screen constraint: letterbox the whole site above 1920px so it
   doesn't stretch edge-to-edge on ultra-wide monitors. Targets .site, the
   outer GeneratePress page wrapper -- not .grid-container, which is the
   narrower per-section content width GP already controls via the Customizer.
   ========================================================================== */

@media (min-width: 1440px) {
	.site {
		max-width: 1920px;
		margin-left: auto;
		margin-right: auto;
	}
}

/* ==========================================================================
   Homepage hero (page-templates/template-home.php)
   Full viewport height, large type, minimal -- per the reference layout style
   (large bold heading, generous negative space, single clear CTA).
   ========================================================================== */

.crda-hero {
	position: relative;
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: var(--crda-white);
	background-color: var(--crda-navy); /* fallback if no image is set */
	overflow: hidden;
}

.crda-hero__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

/* Dark overlay so hero text stays readable (AA contrast) regardless of the
   photo's own brightness -- see 06-Brand-vs-Accessibility.md. */
.crda-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(17, 28, 78, 0.55) 0%, rgba(17, 28, 78, 0.75) 100%);
	z-index: 1;
}

.crda-hero__content {
	position: relative;
	z-index: 2;
	max-width: 900px;
	padding: 0 24px;
}

.crda-hero__heading {
	font-size: clamp(2.5rem, 6vw, 5rem);
	line-height: 1.05;
	font-weight: bold;
	margin: 0 0 20px 0;
	color: var(--crda-white);
}

.crda-hero__subheading {
	font-size: clamp(1.1rem, 2vw, 1.4rem);
	line-height: 1.5;
	margin: 0 0 32px 0;
	color: var(--crda-white);
}

.crda-hero__cta {
	/* Visual styling now lives in the reusable .crda-btn / .crda-btn--accent
	   classes above -- this just adds hero-specific spacing on top. */
	margin-top: 4px;
}

@media (max-width: 768px) {
	.crda-hero {
		min-height: 100svh; /* small-viewport-height unit avoids mobile browser chrome jump */
	}
}