/*
Theme Name: Coomba Park
Theme URI: https://coomba.org.au/
Template: twentytwentyfour
Author: Coomba & District Progress Association
Author URI: https://coomba.org.au/
Description: Custom child theme for coomba.org.au, extending Twenty Twenty-Four with the Wallis Lake colour palette and Coomba Park's site structure.
Version: 1.1.0
Text Domain: coomba-park
*/

/* ==========================================================================
   Site Visual Design Rework (v3) — component classes
   2026-08-10. Palette/typography settings live in theme.json; these are the
   reusable component classes built on top of it (site-wide design brief §4).
   Additive only — nothing here is applied to existing page content yet;
   these classes are available for use in new/updated pages, including the
   follow-up pass that builds the actual homepage/events/group-page layouts
   (brief §7, deliberately deferred — see project notes).
   ========================================================================== */

/* --- §3 Typography & accessibility --- */
/* "Two font weights only, sentence case throughout" — sentence case is an
   editorial rule (not enforceable in CSS); this covers what CSS can:
   removing any accidental all-caps treatment on long text, since TT4/blocks
   sometimes apply text-transform:uppercase to headings by default. */
h1, h2, h3, h4, h5, h6 {
	text-transform: none;
}
/* Short labels are allowed to be uppercase deliberately (e.g. a section
   eyebrow like "THIS WEEKEND") — opt-in via this class, never the default. */
.cp-eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 13px;
	font-weight: 500;
}

/* --- §4.1 Buttons --- */
/* Primary button (solid green fill, white text, pill shape) is set as the
   sitewide default via theme.json's styles.elements.button — every ordinary
   wp:button block already gets this without any extra class. This is
   specifically the SECONDARY treatment (white fill, green border+text). */
.wp-block-button.is-style-outline .wp-block-button__link,
.cp-button-secondary {
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--anchor-green-dark);
	border: 2px solid var(--wp--preset--color--anchor-green-dark);
	border-radius: 24px;
	font-weight: 500;
	padding: 0.6em 1.4em;
	display: inline-block;
	text-decoration: none;
}

/* --- §4.2 Cards --- */
.cp-card {
	background-color: var(--wp--preset--color--white);
	border: 1px solid #D3D1C7;
	border-radius: 13px;
	padding: 1.25em 1.5em;
	box-shadow: none;
}

/* --- §4.4 Category badges (pill labels) --- */
/* Always paired with the item it labels (an event, a document) — never
   standalone decoration, per the brief. Base class + one modifier per
   category; text label always required in the markup alongside the colour
   (§3 rule 3 — colour is never the only signal). */
.cp-category-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.35em 0.9em;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.3;
}
.cp-category-badge--fitness-exercise {
	background-color: var(--wp--preset--color--category-fitness-bg);
	color: var(--wp--preset--color--category-fitness-text);
}
.cp-category-badge--sustainability {
	background-color: var(--wp--preset--color--category-sustainability-bg);
	color: var(--wp--preset--color--category-sustainability-text);
}
.cp-category-badge--aquatic-centre {
	background-color: var(--wp--preset--color--category-aquatic-bg);
	color: var(--wp--preset--color--category-aquatic-text);
}
.cp-category-badge--arts-craft {
	background-color: var(--wp--preset--color--category-arts-bg);
	color: var(--wp--preset--color--category-arts-text);
}
.cp-category-badge--social-groups {
	background-color: var(--wp--preset--color--category-social-bg);
	color: var(--wp--preset--color--category-social-text);
}
.cp-category-badge--facilities {
	background-color: var(--wp--preset--color--category-facilities-bg);
	color: var(--wp--preset--color--category-facilities-text);
}
.cp-category-badge--sponsors {
	background-color: var(--wp--preset--color--category-sponsors-bg);
	color: var(--wp--preset--color--category-sponsors-text);
}

/* --- §4.3 The gradient badge/hero pattern — the site's one signature
   visual device, applied in three places (brief §4.3). Each category gets
   its own gradient stop (pale tint → dark text-colour of the same family),
   layered over the anchor green as the base so every gradient still reads
   as "this site" first, "this category" second. --- */
.cp-gradient-hero,
.cp-gradient-badge {
	background: linear-gradient(135deg, var(--wp--preset--color--anchor-green-dark), var(--wp--preset--color--anchor-green-mid));
	color: var(--wp--preset--color--white);
}
.cp-gradient-hero {
	border-radius: 13px;
	padding: 2.5em 2em;
}
.cp-gradient-badge {
	border-radius: 10px;
	padding: 0.6em 0.9em;
	text-align: center;
	min-width: 3.5em;
	display: inline-block;
}
.cp-gradient--fitness-exercise { background: linear-gradient(135deg, var(--wp--preset--color--anchor-green-dark), var(--wp--preset--color--category-fitness-text)); }
.cp-gradient--sustainability { background: linear-gradient(135deg, var(--wp--preset--color--anchor-green-dark), var(--wp--preset--color--category-sustainability-text)); }
.cp-gradient--aquatic-centre { background: linear-gradient(135deg, var(--wp--preset--color--anchor-green-dark), var(--wp--preset--color--category-aquatic-text)); }
.cp-gradient--arts-craft { background: linear-gradient(135deg, var(--wp--preset--color--anchor-green-dark), var(--wp--preset--color--category-arts-text)); }
.cp-gradient--social-groups { background: linear-gradient(135deg, var(--wp--preset--color--anchor-green-dark), var(--wp--preset--color--category-social-text)); }
.cp-gradient--facilities { background: linear-gradient(135deg, var(--wp--preset--color--anchor-green-dark), var(--wp--preset--color--category-facilities-text)); }
.cp-gradient--sponsors { background: linear-gradient(135deg, var(--wp--preset--color--anchor-green-dark), var(--wp--preset--color--category-sponsors-text)); }

/* --- §2.2/§8 Emergency — deliberately flat, no gradients, no card
   treatment, high contrast. Never combined with any .cp-gradient-*/
   .cp-category-badge-* class above — see the brief's own explicit warning
   not to "improve" this toward site-wide consistency later. --- */
.cp-emergency-header {
	background-color: var(--wp--preset--color--emergency-red);
	color: var(--wp--preset--color--white);
	padding: 1.5em 2em;
	border-radius: 0;
}
.cp-emergency-box {
	background-color: var(--wp--preset--color--emergency-red-pale);
	color: var(--wp--preset--color--emergency-red-text);
	border: none;
	border-radius: 8px;
	padding: 1.25em 1.5em;
}
.cp-emergency-box .cp-emergency-number {
	font-size: 28px;
	font-weight: 500;
	color: var(--wp--preset--color--emergency-red-text-strong);
}

/* --- §6.2 Map embeds — same card treatment as everything else, never a
   bare unstyled iframe. --- */
.cp-map-embed {
	border: 1px solid #D3D1C7;
	border-radius: 13px;
	overflow: hidden;
}
.cp-map-embed iframe {
	display: block;
	width: 100%;
	border: 0;
}

/* --- §5 Navigation ---
   Events gets an active-state underline in the anchor green when
   selected — WordPress applies .current-menu-item to the matching
   wp:navigation-link automatically, no manual active-state logic needed.
   Emergency stays a distinct solid red pill rather than a plain text
   link, so it reads as categorically different before it's even clicked. */
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content {
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--anchor-green-dark);
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}
.wp-block-navigation .cp-nav-emergency > .wp-block-navigation-item__content {
	background-color: var(--wp--preset--color--emergency-red);
	color: var(--wp--preset--color--white) !important;
	border-radius: 999px;
	padding: 0.5em 1.2em;
}
.wp-block-navigation .cp-nav-emergency > .wp-block-navigation-item__content:hover {
	background-color: var(--wp--preset--color--emergency-red-text);
}