/* WestOahu Tools — palette + components. Theme-independent.
 *
 * Loaded AFTER Kadence (see the dependency array in westoahu-tools.php) so
 * equal-specificity rules resolve our way. Where Kadence uses a more specific
 * selector we match it explicitly rather than reaching for !important.
 */

:root {
	--wo-ocean: #16425B;
	--wo-ocean-mid: #2E6E8E;
	--wo-teal: #3E93A6;
	--wo-shallow: #8FD0DC;
	--wo-sand: #FAF5EC;
	--wo-sunset-gold: #F2A93B;
	--wo-sunset-coral: #CE4A24; /* darkened from #E8663C to clear AA on white */
	--wo-sunset-deep: #B8432F;
	--wo-ink: #2B2B28;
	--wo-white: #FFFFFF;
	--wo-muted: #66665e;

	/* Link/accent colour that clears AA everywhere we use it. */
	--wo-link: #2E6E8E;
	--wo-focus: #F2A93B;

	--wo-gutter: clamp(16px, 4.5vw, 32px);
	--wo-radius: 12px;
	--wo-max: 1120px; /* readable measure cap for desktop */
	--wo-btn-radius: 4px; /* rectangular buttons, lightly softened corners */
}

/* ---------------------------------------------------------------------------
   Theme chrome
   Kadence ships a stock blue palette, so the header, footer, prose links and
   archive templates render in a colour that has nothing to do with this site.
   Re-pointing the theme's own custom properties brings that chrome into the
   brand without touching the Customizer. (palette1 is the link/accent colour;
   its stock #3182CE also fails AA at 4.03:1, so this fixes contrast too.)
   --------------------------------------------------------------------------- */
:root {
	--global-palette1: #2E6E8E; /* accent / links — 5.62:1 on white */
	--global-palette2: #16425B; /* deeper accent, hovers */
	--global-palette3: #2B2B28; /* headings */
	--global-palette4: #3F3F3A; /* body text */
	--global-palette6: #D8DEE3; /* borders */
	--global-palette7: #EDF1F3; /* light background */
	--global-palette8: #FAF5EC; /* sand */
	--global-palette9: #FFFFFF;
}

/* ---------------------------------------------------------------------------
   Site logo
   The wordmark is a wide 2058x764 image; cap its rendered height so the header
   stays compact and it scales down sensibly on a phone.
   --------------------------------------------------------------------------- */
.site-header .custom-logo,
.site-branding img.custom-logo {
	height: auto;
	max-height: 54px;
	width: auto;
	max-width: min(340px, 62vw);
}

@media (max-width: 760px) {
	.site-header .custom-logo,
	.site-branding img.custom-logo {
		max-height: 40px;
	}
}

/* ---------------------------------------------------------------------------
   Content width
   Full-bleed sections keep their edge-to-edge backgrounds; their CONTENT is
   capped and centred so text never stretches across a wide monitor.
   --------------------------------------------------------------------------- */
.wo-hero > .wp-block-group__inner-container,
.wo-infobar > .wp-block-group__inner-container,
.wo-title-band > .wp-block-group__inner-container,
.wo-page-section > .wp-block-group__inner-container,
.entry-content .wo-hero > .wp-block-group__inner-container,
.entry-content .wo-infobar > .wp-block-group__inner-container,
.entry-content .wo-title-band > .wp-block-group__inner-container,
.entry-content .wo-page-section > .wp-block-group__inner-container {
	max-width: var(--wo-max);
	margin-left: auto;
	margin-right: auto;
}

/* The same cap for ordinary theme content — posts, the blog index, archives,
   and the header/footer rows — so the whole site shares one measure. */
.site-container {
	max-width: var(--wo-max);
	margin-left: auto;
	margin-right: auto;
}

/* ---------------------------------------------------------------------------
   Full-bleed sections
   Kadence zeroes horizontal padding on .entry-content .alignfull (0,2,0), which
   outranks a bare class — so these must be matched at equal specificity or the
   content sits flush against the screen edge on every phone.
   --------------------------------------------------------------------------- */
.wo-hero,
.wo-infobar,
.wo-title-band,
.wo-page-section,
/* Doubled class = (0,3,0), which outranks Kadence's `.entry-content .alignfull`
   no matter which stylesheet the browser happens to load last. */
.entry-content .wo-hero.wo-hero,
.entry-content .wo-infobar.wo-infobar,
.entry-content .wo-title-band.wo-title-band,
.entry-content .wo-page-section.wo-page-section {
	padding-left: var(--wo-gutter);
	padding-right: var(--wo-gutter);
}

/* --- Card grid --- */
.wo-cards {
	display: grid;
	/* auto-fit removes the 761-1100px dead zone where three columns went narrow */
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 20px;
}

@media (max-width: 600px) {
	.wo-cards {
		grid-template-columns: 1fr;
		gap: 16px;
	}
}

.wo-card {
	position: relative;
	background: var(--wo-white);
	border: 1px solid rgba(22, 66, 91, .12);
	border-radius: var(--wo-radius);
	box-shadow: 0 1px 2px rgba(43, 43, 40, .06), 0 4px 14px rgba(43, 43, 40, .07);
	overflow: hidden;
	transition: box-shadow .16s ease, transform .16s ease, border-color .16s ease;
}

.wo-card:hover {
	border-color: rgba(22, 66, 91, .28);
	box-shadow: 0 4px 8px rgba(43, 43, 40, .08), 0 12px 28px rgba(22, 66, 91, .16);
	transform: translateY(-2px);
}

/* Keyboard users get the same emphasis as a hover. */
.wo-card:focus-within {
	outline: 3px solid var(--wo-focus);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.wo-card { transition: none; }
	.wo-card:hover { transform: none; }
}

.wo-card-body {
	padding: 18px;
}

/* A real photo gets room; with no photo we show a slim accent bar rather than
   a large empty block, which reads as an image that failed to load.
   Keyed off the inline background-image (`[style]`) as well as the explicit
   class, so this is correct whichever version of the plugin is installed. */
.wo-card-img[style] {
	height: 150px;
	background-size: cover;
	background-position: center;
}

.wo-card-img:not([style]),
.wo-card-img--empty {
	height: 4px;
	background: linear-gradient(90deg, var(--wo-teal), var(--wo-shallow));
}

.wo-card h3 {
	font-size: 1.15rem;
	line-height: 1.35;
	color: var(--wo-ocean);
	margin: 0 0 6px;
}

.wo-card h3 a {
	color: var(--wo-ocean);
	text-decoration: none;
}

/* Stretched link: the whole card becomes the tap target (was a 27px title). */
.wo-card h3 a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.wo-card:hover h3 a {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.wo-card p {
	font-size: 0.9rem;
	color: var(--wo-muted);
	line-height: 1.5;
	margin: 0;
}

/* --- Tag pill --- */
.wo-tag {
	display: inline-block;
	background: var(--wo-sand);
	color: var(--wo-sunset-deep);
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .5px;
	padding: 3px 10px;
	/* Squared to match the buttons — a lone pill-shaped badge looked out of
	   place once everything else went rectangular. */
	border-radius: var(--wo-btn-radius);
	margin-bottom: 8px;
}

/* Events read gold, businesses read sand — distinguishable at a glance. */
.wo-events-group .wo-tag,
.wo-cards--events .wo-tag {
	background: #FDF1DC;
	color: #8A5A12;
}

/* --- Event "when" line --- */
.wo-when {
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--wo-ocean-mid);
	margin-top: 10px;
	line-height: 1.45;
}

/* --- Info bar --- */
.wo-infobar-cols {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 32px;
}

.wo-infobar-stat {
	display: flex;
	flex-direction: column;
}

/* Child combinators: the shortcodes wrap their value in a <span>, which would
   otherwise inherit the small caption size and invert the hierarchy. */
.wo-infobar-stat > b {
	font-size: 1.25rem;
	line-height: 1.25;
	color: var(--wo-sunset-gold);
}

.wo-infobar-stat > b span,
.wo-infobar-stat > b b {
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
	opacity: 1;
}

.wo-infobar-stat > span {
	font-size: 0.82rem;
	opacity: .85;
}

@media (max-width: 760px) {
	.wo-infobar-cols {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 14px 20px;
	}
	/* the "next market" stat is the longest — give it the full row */
	.wo-infobar-cols > :nth-child(3) {
		grid-column: 1 / -1;
	}
}

/* --- Buttons --- */
.wo-btn {
	display: inline-block;
	background: var(--wo-sunset-coral);
	color: var(--wo-white);
	font-weight: 700;
	padding: 12px 26px;
	border-radius: var(--wo-btn-radius);
	text-decoration: none;
}

.wo-btn--ghost {
	background: transparent;
	border: 2px solid var(--wo-ocean);
	color: var(--wo-ocean);
}

.wo-btn-solid .wp-block-button__link {
	background: var(--wo-sunset-coral);
	color: var(--wo-white);
	border-radius: var(--wo-btn-radius);
	font-weight: 700;
	padding: 12px 26px;
}

.wo-btn-ghost .wp-block-button__link {
	background: transparent;
	border: 2px solid var(--wo-ocean);
	color: var(--wo-ocean);
	border-radius: var(--wo-btn-radius);
	font-weight: 700;
	padding: 10px 24px;
}

/* Every other button on the site — theme buttons, block buttons, Kadence
   Blocks, form submits — so nothing is left rounded by comparison. */
.wp-block-button__link,
.wp-element-button,
.kb-button,
.button,
button,
input[type="submit"],
input[type="button"],
.wp-block-search__button {
	border-radius: var(--wo-btn-radius);
}

/* --- Filter rows --- */
.wo-filter {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-bottom: 14px;
}

.wo-filter a {
	border: 2px solid var(--wo-link);
	color: var(--wo-link);
	padding: 9px 16px; /* 49px tall — clears the 44px minimum */
	border-radius: var(--wo-btn-radius);
	text-decoration: none;
	font-size: 0.92rem;
	line-height: 1.4;
}

.wo-filter a:hover {
	background: rgba(46, 110, 142, .08);
}

.wo-filter a.active {
	background: var(--wo-link);
	color: var(--wo-white);
}

.wo-filter > span {
	font-weight: 700;
	color: var(--wo-ocean);
	margin-right: 2px;
}

/* --- Advisory notices ---
   Visible but not alarming: these carry the "check before you go" and safety
   caveats, so they must be readable rather than fine print. */
.wo-notice {
	background: rgba(46, 110, 142, .07);
	border-left: 4px solid var(--wo-link);
	border-radius: 0 8px 8px 0;
	padding: 14px 18px;
	margin: 0 0 24px;
	font-size: 0.95rem;
	line-height: 1.55;
	color: var(--wo-ink);
}

.wo-notice a {
	color: var(--wo-link);
}

/* The safety caveat under the info-bar stats, on the dark ocean band. */
.wo-infobar-note {
	margin: 14px 0 0;
	font-size: 0.78rem;
	line-height: 1.5;
	color: var(--wo-white);
	opacity: .82;
	max-width: 68ch;
}

.wo-infobar-note a {
	color: var(--wo-shallow);
	text-decoration: underline;
}

/* --- Empty states: deliberate, not an orphaned line of italics --- */
.wo-quiet {
	font-style: normal;
	text-align: center;
	padding: 40px 24px;
	background: rgba(255, 255, 255, .6);
	border: 1px dashed rgba(22, 66, 91, .2);
	border-radius: var(--wo-radius);
	color: var(--wo-muted);
	margin: 0;
}

.wo-quiet a {
	color: var(--wo-link);
}

/* --- Events groups --- */
.wo-events-group h3 {
	color: var(--wo-ocean);
	font-size: 1.35rem;
	margin: 32px 0 12px;
}

.wo-events-group:first-child h3 {
	margin-top: 0;
}

/* --- Business details --- */
.wo-biz-meta {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 16px;
	margin: 24px 0;
}

.wo-biz-meta dt {
	font-weight: 700;
	color: var(--wo-ocean);
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: .5px;
}

.wo-biz-meta dd {
	margin: 0 0 12px;
	color: var(--wo-ink);
	overflow-wrap: anywhere;
}

.wo-biz-meta a {
	color: var(--wo-link);
}

/* Phone/website taps are the highest-value action on a business page. */
.wo-biz-meta dd a {
	display: inline-block;
	padding: 9px 0;
	min-height: 26px;
}

@media (max-width: 600px) {
	.wo-biz-meta { grid-template-columns: 1fr; }
	.wo-biz-meta dt { margin-top: 14px; }
	.wo-biz-meta dd { margin: 2px 0 0; }
}

.wo-back-link {
	display: inline-block;
	padding: 10px 0;
	color: var(--wo-link);
	font-weight: 700;
	text-decoration: none;
}

.wo-back-link:hover {
	text-decoration: underline;
}

/* --- Next-event stat --- */
.wo-next-event b {
	color: var(--wo-sunset-gold);
}

/* --- Focus visibility (the theme suppresses the default outline) --- */
.wo-filter a:focus-visible,
.wo-card h3 a:focus-visible,
.wo-btn:focus-visible,
.wo-btn-solid .wp-block-button__link:focus-visible,
.wo-btn-ghost .wp-block-button__link:focus-visible,
.wo-biz-meta a:focus-visible,
.wo-back-link:focus-visible,
.wo-quiet a:focus-visible {
	outline: 3px solid var(--wo-focus);
	outline-offset: 2px;
	border-radius: 4px;
}

/* On dark grounds the gold ring needs to be lighter to stay visible. */
.wo-infobar :focus-visible,
.wo-hero :focus-visible,
.wo-title-band :focus-visible {
	outline-color: #FFC46B;
}

/* =====================================================================
   Page sections
   ===================================================================== */

.wo-hero {
	/* Darkened: white on the old #8FD0DC top stop was 1.72:1. This ramp keeps
	   the ocean feel while clearing AA for the heading and the lede. */
	background: linear-gradient(160deg, #357F94 0%, #2E6E8E 38%, #235F7E 70%, var(--wo-ocean) 100%);
	color: var(--wo-white);
	padding-top: 64px;
	padding-bottom: 80px;
}

.wo-hero h1 {
	color: var(--wo-white);
	font-size: clamp(1.9rem, 7vw, 2.6rem);
	font-weight: 800;
	line-height: 1.15;
	margin: 0 0 14px;
	text-shadow: 0 2px 12px rgba(10, 50, 70, .35);
}

.wo-hero p {
	color: var(--wo-white);
	font-size: 1.1rem;
	max-width: 560px;
	margin-bottom: 24px;
}

@media (max-width: 760px) {
	.wo-hero {
		padding-top: 48px;
		padding-bottom: 56px;
	}
}

.wo-infobar {
	background: var(--wo-ocean);
	color: var(--wo-white);
	padding-top: 20px;
	padding-bottom: 22px;
}

.wo-title-band {
	background: var(--wo-ocean);
	color: var(--wo-white);
	padding-top: 48px;
	padding-bottom: 48px;
}

.wo-title-band h1 {
	color: var(--wo-white);
	font-size: clamp(1.7rem, 6vw, 2.2rem);
	font-weight: 800;
	margin: 0 0 8px;
}

.wo-title-band p {
	color: var(--wo-shallow);
	margin: 0;
}

.wo-page-section {
	padding-top: 48px;
	padding-bottom: 48px;
}

.wo-page-section--sand {
	background: var(--wo-sand);
}

.wo-page-section--white {
	background: var(--wo-white);
}

/* Sand on white is only 1.09:1 — a hairline makes the rhythm legible. */
.wo-page-section--white + .wo-page-section--sand,
.wo-page-section--sand + .wo-page-section--white {
	border-top: 1px solid rgba(22, 66, 91, .1);
}

.wo-page-section h2 {
	color: var(--wo-ocean);
	font-size: clamp(1.5rem, 4.5vw, 2rem);
	font-weight: 800;
	margin: 0 0 6px;
}

.wo-sub {
	color: var(--wo-muted);
	margin: 0 0 24px;
}