/*
Theme Name: OPG Civic
Description: Government block theme for the Colorado Office of Public Guardianship. USWDS 3 styling (Public Sans, components, accessible focus states) with the State of Colorado palette. Child theme of Twenty Twenty-Five.
Author: deSABRAN
Template: twentytwentyfive
Version: 0.5.4
Requires at least: 6.7
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: opg-civic
*/

/* ---------- Base ---------- */

:root {
	--opg-primary: var(--wp--preset--color--primary);
	--opg-primary-dark: var(--wp--preset--color--primary-dark);
	--opg-darker: var(--wp--preset--color--accent-1);
	--opg-warm: var(--wp--preset--color--accent-2);
	--opg-warm-dark: var(--wp--preset--color--accent-warm-dark);
	--opg-warm-light: var(--wp--preset--color--accent-warm-light);
	--opg-red: var(--wp--preset--color--accent-3);
	--opg-gray-5: var(--wp--preset--color--accent-5);
	--opg-gray-10: var(--wp--preset--color--accent-6);
	--opg-ink-light: var(--wp--preset--color--ink-light);
	--opg-focus: #2491ff;
	--opg-radius: 0.25rem;
	--opg-radius-lg: 0.5rem;
}

/* USWDS focus ring on every interactive element */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
.wp-element-button:focus-visible {
	outline: 0.25rem solid var(--opg-focus) !important;
	outline-offset: 0.25rem;
}

a:visited { color: #54278f; }
.wp-element-button:visited,
.opg-nav a:visited,
.opg-footer a:visited,
.opg-identifier a:visited,
.opg-gov-banner a:visited { color: inherit; }

.skip-link.screen-reader-text:focus { background: var(--opg-warm); color: #1b1b1b; }

.opg-icon {
	display: inline-block;
	width: 1.25em;
	height: 1.25em;
	flex: none;
	background-color: currentColor;
	-webkit-mask: var(--opg-icon) no-repeat center / contain;
	mask: var(--opg-icon) no-repeat center / contain;
	vertical-align: middle;
}

/* ---------- Official website banner (usa-banner) ---------- */

.opg-gov-banner {
	background: var(--opg-gray-5);
	font-size: 0.8125rem;
	line-height: 1.4;
}
.opg-gov-banner details { max-width: var(--wp--style--global--wide-size); margin: 0 auto; padding: 0 1rem; }
.opg-gov-banner summary {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
	padding: 0.3rem 0;
	cursor: pointer;
	list-style: none;
}
.opg-gov-banner summary::-webkit-details-marker { display: none; }
.opg-gov-banner__mark { width: 1.25rem; height: auto; }
.opg-gov-banner__toggle {
	color: #005ea2;
	text-decoration: underline;
	display: inline-flex;
	align-items: center;
	gap: 0.15rem;
}
.opg-gov-banner__toggle .opg-icon { transition: transform 0.2s; }
.opg-gov-banner details[open] .opg-gov-banner__toggle .opg-icon { transform: rotate(180deg); }
.opg-gov-banner__content {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	gap: 1.5rem;
	padding: 1rem 0 1.5rem;
	font-size: 0.9375rem;
}
.opg-gov-banner__guidance { display: flex; gap: 0.75rem; align-items: flex-start; }
.opg-gov-banner__guidance img { width: 2.5rem; height: 2.5rem; flex: none; }
.opg-gov-banner__guidance p { margin: 0; }

/* ---------- Header (usa-header--extended) ---------- */

.opg-header { background: #fff; border-bottom: 1px solid #1b1b1b; }
.opg-header__top { gap: 1.5rem; max-width: var(--wp--style--global--wide-size); margin-inline: auto !important; }
.opg-header__logo img { width: 100%; height: auto; }
.opg-header__utility { gap: 1rem !important; font-size: var(--wp--preset--font-size--small); }
.opg-header__utility a { color: #1b1b1b; text-decoration: none; }
.opg-header__utility a:hover { text-decoration: underline; }
.opg-header .wp-block-search__input {
	border: 1px solid #565c65;
	border-radius: var(--opg-radius) 0 0 var(--opg-radius);
	padding: 0.5rem;
	min-height: 2.5rem;
}
.opg-header .wp-block-search__button {
	margin-left: 0;
	border-radius: 0 var(--opg-radius) var(--opg-radius) 0;
	padding: 0.5rem 0.9rem;
	min-height: 2.5rem;
}

.opg-nav-bar { border-top: 1px solid var(--opg-gray-10); }
.opg-nav .wp-block-navigation-item__content { color: #1b1b1b; text-decoration: none; padding: 1rem 0.25rem; }
.opg-nav > .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	border-bottom: 0.25rem solid transparent;
}
.opg-nav > .wp-block-navigation__container > .wp-block-navigation-item:hover > .wp-block-navigation-item__content,
.opg-nav > .wp-block-navigation__container > .current-menu-item > .wp-block-navigation-item__content,
.opg-nav > .wp-block-navigation__container > .current-menu-ancestor > .wp-block-navigation-item__content {
	color: var(--opg-primary);
	border-bottom-color: var(--opg-primary);
}
.opg-nav .wp-block-navigation__submenu-container {
	border: 0 !important;
	background: var(--opg-darker) !important;
	min-width: 16rem !important;
	padding: 0.5rem 0;
}
.opg-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	color: #fff !important;
	font-weight: 400;
	padding: 0.6rem 1rem !important;
}
.opg-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { text-decoration: underline; }
.opg-nav .wp-block-navigation__responsive-container.is-menu-open { padding: 1.5rem; }
.opg-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container { background: transparent !important; }
.opg-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content { color: #1b1b1b !important; }
.opg-nav .wp-block-navigation__responsive-container-open {
	background: var(--opg-primary);
	color: #fff;
	border-radius: var(--opg-radius);
	padding: 0.5rem 0.75rem;
}

/* ---------- Hero ---------- */

.opg-hero {
	background: var(--opg-darker);
	color: #fff;
}
.opg-hero h1, .opg-hero h2, .opg-hero p { color: #fff; }
.opg-hero__eyebrow { color: var(--opg-warm) !important; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.opg-hero h2 { color: var(--opg-warm); }
.opg-hero .wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	color: #fff;
	box-shadow: inset 0 0 0 2px #fff;
}
.opg-hero .wp-block-button.is-style-outline .wp-block-button__link:hover { background: #fff; color: var(--opg-darker); }

/* ---------- Buttons ---------- */

.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--opg-primary);
	border: 0;
	box-shadow: inset 0 0 0 2px var(--opg-primary);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: transparent;
	color: var(--opg-primary-dark);
	box-shadow: inset 0 0 0 2px var(--opg-primary-dark);
}

/* Accent warm button (CivicPress secondary action) */
.wp-block-button.is-style-opg-warm .wp-block-button__link { background: var(--opg-warm-dark); color: #fff; }
.wp-block-button.is-style-opg-warm .wp-block-button__link:hover,
.wp-block-button.is-style-opg-warm .wp-block-button__link:focus { background: #775540; color: #fff; }

/* ---------- Page title band ---------- */

.opg-page-band { background: var(--opg-gray-5); border-bottom: 1px solid var(--opg-gray-10); }
.opg-page-band .wp-block-post-title { margin: 0; }
.opg-page-band .opg-breadcrumbs { font-size: var(--wp--preset--font-size--small); margin-bottom: 0.5rem; }

/* ---------- Cards (usa-card) ---------- */

.is-style-opg-card {
	background: #fff;
	border: 2px solid var(--opg-gray-10);
	border-radius: var(--opg-radius-lg);
	padding: 1.5rem;
	height: 100%;
	display: flex;
	flex-direction: column;
}
.is-style-opg-card > * { margin-block: 0; }
.is-style-opg-card > * + * { margin-block-start: 0.75rem; }
.is-style-opg-card .wp-block-buttons { margin-top: auto; padding-top: 1rem; }
.is-style-opg-card h2, .is-style-opg-card h3 { font-size: var(--wp--preset--font-size--large); }
.opg-person .opg-person__photo { margin: -1.5rem -1.5rem 0.5rem; }
.opg-person .opg-person__photo img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: center top; border-radius: calc(var(--opg-radius-lg) - 2px) calc(var(--opg-radius-lg) - 2px) 0 0; display: block; }
.opg-person h3 a { color: #1b1b1b; text-decoration: none; }
.opg-person h3 a:hover { color: var(--opg-primary); text-decoration: underline; }
.opg-person__position { color: var(--opg-ink-light); font-size: var(--wp--preset--font-size--small); }
.opg-person__contact { font-size: var(--wp--preset--font-size--small); overflow-wrap: anywhere; }
.opg-card-grid > .wp-block-column { display: flex; flex-direction: column; }
.opg-card-grid > .wp-block-column > .is-style-opg-card { flex: 1; }

/* ---------- Alerts (usa-alert) ---------- */

[class*="is-style-opg-alert-"] {
	border-left: 0.5rem solid;
	padding: 1rem 1.25rem 1rem 3.5rem;
	position: relative;
	color: #1b1b1b;
}
[class*="is-style-opg-alert-"]::before {
	content: "";
	position: absolute;
	left: 1.1rem;
	top: 1.1rem;
	width: 1.6rem;
	height: 1.6rem;
	background-color: #1b1b1b;
	-webkit-mask: var(--opg-icon) no-repeat center / contain;
	mask: var(--opg-icon) no-repeat center / contain;
}
[class*="is-style-opg-alert-"] > * { margin-block: 0; }
[class*="is-style-opg-alert-"] > * + * { margin-block-start: 0.5rem; }
[class*="is-style-opg-alert-"] h2, [class*="is-style-opg-alert-"] h3 { font-size: var(--wp--preset--font-size--large); }
.is-style-opg-alert-info { background: var(--wp--preset--color--info-lighter); border-color: #00bde3; --opg-icon: url(assets/icons/info.svg); }
.is-style-opg-alert-warning { background: var(--wp--preset--color--warning-lighter); border-color: #ffbe2e; --opg-icon: url(assets/icons/warning.svg); }
.is-style-opg-alert-success { background: var(--wp--preset--color--success-lighter); border-color: #00a91c; --opg-icon: url(assets/icons/check_circle.svg); }
.is-style-opg-alert-error { background: var(--wp--preset--color--error-lighter); border-color: var(--opg-red); --opg-icon: url(assets/icons/error.svg); }

/* ---------- Summary box (usa-summary-box) ---------- */

.is-style-opg-summary-box {
	background: var(--wp--preset--color--info-lighter);
	border: 1px solid #99deea;
	border-radius: var(--opg-radius);
	padding: 1.5rem;
}
.is-style-opg-summary-box > * { margin-block: 0; }
.is-style-opg-summary-box > * + * { margin-block-start: 0.75rem; }

/* ---------- Accordion (usa-accordion) using core/details ---------- */

.wp-block-details {
	border: 0;
	margin-block: 0.5rem;
}
.wp-block-details > summary {
	background: var(--opg-gray-5);
	font-weight: 700;
	padding: 1rem 3rem 1rem 1.25rem;
	position: relative;
	cursor: pointer;
	list-style: none;
}
.wp-block-details > summary::-webkit-details-marker { display: none; }
.wp-block-details > summary::after {
	content: "+";
	position: absolute;
	right: 1.25rem;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.5rem;
	font-weight: 400;
	line-height: 1;
}
.wp-block-details[open] > summary::after { content: "\2212"; }
.wp-block-details > summary:hover { background: var(--opg-gray-10); }
.wp-block-details > :not(summary) { padding-inline: 1.25rem; }
.wp-block-details[open] { padding-bottom: 0.75rem; }

/* ---------- Tables ---------- */

.wp-block-table table { border-collapse: collapse; }
.wp-block-table th, .wp-block-table td { border: 1px solid #1b1b1b; padding: 0.5rem 1rem; }
.wp-block-table thead th { background: var(--opg-gray-10); }

/* Tables carried over from TheGem (e.g. the Resources directory) */
.opg-legacy-table { overflow-x: auto; }
.opg-legacy-table table { width: 100% !important; border-collapse: collapse; table-layout: fixed; }
.opg-legacy-table td, .opg-legacy-table th {
	border: 1px solid var(--opg-gray-10);
	padding: 1rem;
	text-align: left !important;
	vertical-align: top;
	overflow-wrap: anywhere;
	font-size: var(--wp--preset--font-size--small);
}
.opg-legacy-table p { margin: 0; }
@media (max-width: 781px) {
	.opg-legacy-table table, .opg-legacy-table tbody, .opg-legacy-table tr, .opg-legacy-table td { display: block; width: 100% !important; box-sizing: border-box; }
	.opg-legacy-table td:empty { display: none; }
}

/* ---------- Content ---------- */

.opg-county-list { columns: 3 12rem; column-gap: 2rem; }
.opg-county-list li { break-inside: avoid; }
.opg-section + .opg-section { border-top: 1px solid var(--opg-gray-10); }

/* ---------- Footer (usa-footer--medium) ---------- */

.opg-footer__return a { font-size: var(--wp--preset--font-size--small); }
.opg-footer__primary { background: var(--opg-gray-5); }
.opg-footer__primary ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; }
.opg-footer__primary a { color: #1b1b1b; font-weight: 700; text-decoration: none; }
.opg-footer__primary a:hover { text-decoration: underline; }
.opg-footer__secondary { background: var(--wp--preset--color--gray-20); }
.opg-footer__secondary p { margin: 0; }
.opg-footer__secondary a { color: #1b1b1b; }
.opg-footer__logo img { width: 100%; height: auto; }

/* ---------- Identifier (usa-identifier) ---------- */

.opg-identifier { background: var(--wp--preset--color--base-plus-3); color: #fff; font-size: var(--wp--preset--font-size--small); }
.opg-identifier p { margin: 0; color: #fff; }
.opg-identifier a { color: #fff; }
.opg-identifier__name { font-weight: 700; }
.opg-identifier__links ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.opg-identifier__links { border-top: 1px solid #565c65; border-bottom: 1px solid #565c65; }

/* ---------- Plugins ---------- */

/* Slider Revolution home slider ("COPG 01 Animated"): theme typography and colors.
   Slide content and animations stay in Slider Revolution; only the look is overridden here. */
/* Keep slide animations (text masks entering from off-screen) from widening the page */
.opg-home-slider { overflow: hidden; }
/* Navy tint: the slide photo is drawn on a canvas; fade it over the theme navy */
sr7-module[data-alias="copg-01-animated"] sr7-bg { background-color: var(--wp--preset--color--accent-1) !important; }
sr7-module[data-alias="copg-01-animated"] sr7-bg canvas { opacity: 0.32 !important; }
sr7-module[data-alias="copg-01-animated"] sr7-txt,
sr7-module[data-alias="copg-01-animated"] sr7-txt * {
	font-family: var(--wp--preset--font-family--public-sans) !important;
	color: #fff !important;
	text-transform: none !important;
	font-style: normal !important;
	letter-spacing: normal !important;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
/* First line of each slide: accent heading, like CivicPress's orange subheadings */
sr7-module[data-alias="copg-01-animated"] sr7-txt[id$="-1"],
sr7-module[data-alias="copg-01-animated"] sr7-txt[id$="-1"] * {
	color: var(--wp--preset--color--accent-warm-light) !important;
	font-weight: 700 !important;
}
sr7-module[data-alias="copg-01-animated"] sr7-txt[id$="-2"],
sr7-module[data-alias="copg-01-animated"] sr7-txt[id$="-2"] *,
sr7-module[data-alias="copg-01-animated"] sr7-txt[id$="-3"],
sr7-module[data-alias="copg-01-animated"] sr7-txt[id$="-3"] * { font-weight: 700 !important; }
/* Last line: supporting text */
sr7-module[data-alias="copg-01-animated"] sr7-txt[id$="-4"],
sr7-module[data-alias="copg-01-animated"] sr7-txt[id$="-4"] * { font-weight: 400 !important; }
sr7-module[data-alias="copg-01-animated"] sr7-arrow.sr7-arrows {
	background: var(--wp--preset--color--primary) !important;
	border-radius: var(--opg-radius) !important;
	opacity: 1 !important;
}
sr7-module[data-alias="copg-01-animated"] sr7-arrow.sr7-arrows:hover { background: var(--wp--preset--color--primary-dark) !important; }

/* Simple Banner: site-wide announcement styled as a compact site alert */
#simple-banner.simple-banner { padding: 0.75rem 1rem !important; box-sizing: border-box; max-width: 100%; }
#simple-banner .simple-banner-text,
#simple-banner .simple-banner-text * { font-family: var(--wp--preset--font-family--public-sans) !important; font-size: 1rem !important; line-height: 1.5 !important; }
/* Ignore colors typed into the banner message so the plugin's color settings always apply */
#simple-banner .simple-banner-text * { color: inherit !important; }
#simple-banner .simple-banner-text a { text-decoration: underline; }

/* WPBakery: show content immediately instead of animating it in on scroll */
.wpb_animate_when_almost_visible { opacity: 1 !important; animation: none !important; }

/* The Events Calendar: use theme colors and font */
:root {
	--tec-color-accent-primary: var(--wp--preset--color--primary);
	--tec-color-accent-primary-hover: var(--wp--preset--color--primary-dark);
	--tec-color-accent-primary-active: var(--wp--preset--color--primary-dark);
	--tec-color-accent-primary-background: var(--wp--preset--color--primary-lightest);
	--tec-color-button-primary: var(--wp--preset--color--primary);
	--tec-color-button-primary-hover: var(--wp--preset--color--primary-dark);
	--tec-color-link-accent: var(--wp--preset--color--primary);
	--tec-color-link-accent-hover: var(--wp--preset--color--primary-dark);
	--tec-font-family-sans-serif: var(--wp--preset--font-family--public-sans);
}
.tribe-common .tribe-common-c-btn,
.tribe-common a.tribe-common-c-btn { background-color: var(--opg-primary) !important; }
.tribe-events .tribe-events-calendar-list__event-date-tag-weekday,
.tribe-common .tribe-common-h1,
.tribe-common .tribe-common-h2,
.tribe-common .tribe-common-h3 { font-family: var(--wp--preset--font-family--public-sans); }

/* Legacy WPBakery content on pages not yet converted */
.entry-content .vc_row { margin-left: 0; margin-right: 0; }
.entry-content .title-h1 { font-size: var(--wp--preset--font-size--xx-large); font-weight: 700; line-height: 1.2; margin: 0 0 1rem; }
.entry-content .title-h3 { font-size: var(--wp--preset--font-size--x-large); font-weight: 700; line-height: 1.2; margin: 1.5rem 0 1rem; }
.entry-content .title-h6 { font-size: var(--wp--preset--font-size--large); font-weight: 700; line-height: 1.3; margin: 1.5rem 0 0.75rem; }
.entry-content .vc_toggle_title > h4 { font-size: var(--wp--preset--font-size--medium); font-weight: 700; }

@media (max-width: 781px) {
	.opg-header__utility { display: none !important; }
	.opg-hero h1 { font-size: var(--wp--preset--font-size--x-large) !important; }
}