/* KEC Courses – cards, course finder, quick facts. Colours come from the theme (theme.json presets) with fallbacks. */

.kec-finder,
.kec-grid,
.kec-facts,
.kec-search,
.kec-form,
.kec-form__notice {
	--kec-blue: var(--wp--preset--color--primary, #0A66B2);
	--kec-blue-dark: var(--wp--preset--color--primary-dark, #08508F);
	--kec-orange: var(--wp--preset--color--accent, #F8B720);
	--kec-ink: var(--wp--preset--color--contrast, #0B2340);
	--kec-muted: var(--wp--preset--color--muted, #56677A);
	--kec-line: var(--wp--preset--color--line, #DFE9F3);
	--kec-soft: var(--wp--preset--color--soft, #F1F7FC);
	--kec-radius: 14px;
}

/* Buttons */
.kec-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .4em;
	padding: .7em 1.2em;
	border-radius: 999px;
	border: 1.5px solid transparent;
	font: inherit;
	font-weight: 700;
	font-size: .9rem;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .2s, color .2s, border-color .2s, transform .2s;
}
.kec-btn--primary { background: var(--kec-blue); color: #fff; }
.kec-btn--primary:hover { background: var(--kec-blue-dark); color: #fff; }
.kec-btn--ghost { background: transparent; color: var(--kec-blue); border-color: var(--kec-line); }
.kec-btn--ghost:hover { border-color: var(--kec-blue); color: var(--kec-blue-dark); }
.kec-btn--navy { background: var(--kec-ink); color: #fff; }
.kec-btn--navy:hover { background: var(--kec-blue); color: #fff; }
.kec-btn--gold { background: var(--kec-orange); color: var(--kec-ink); }
.kec-btn--gold:hover { background: #FFC94A; color: var(--kec-ink); }
.kec-btn:focus-visible { outline: 3px solid var(--kec-orange); outline-offset: 2px; }

/* Cards */
.kec-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 1.5rem;
}
.kec-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--kec-line);
	border-radius: var(--kec-radius);
	overflow: hidden;
	transition: box-shadow .25s, transform .25s;
}
.kec-card:hover { box-shadow: 0 14px 34px rgba(11, 35, 64, .12); transform: translateY(-3px); }
.kec-card__media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 10;
	background: var(--kec-soft);
	overflow: hidden;
}
.kec-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s; }
.kec-card:hover .kec-card__media img { transform: scale(1.04); }
.kec-card__placeholder { position: absolute; inset: 0; background: linear-gradient(135deg, var(--kec-blue), var(--kec-blue-dark)); }
.kec-card__badge {
	position: absolute;
	top: .75rem;
	left: .75rem;
	padding: .3em .75em;
	border-radius: 999px;
	background: var(--kec-orange);
	color: var(--kec-ink);
	font-size: .72rem;
	font-weight: 800;
	letter-spacing: .02em;
	text-transform: uppercase;
}
.kec-card__body { display: flex; flex-direction: column; flex: 1; padding: 1.15rem 1.25rem 1.25rem; }
.kec-card__title { margin: 0 0 .5rem; font-size: 1.05rem; line-height: 1.35; font-weight: 700; }
.kec-card__title a { color: var(--kec-ink); text-decoration: none; }
.kec-card__title a:hover { color: var(--kec-blue); }
.kec-card__excerpt { margin: 0 0 .9rem; color: var(--kec-muted); font-size: .9rem; line-height: 1.55; }
/* Highlighted pills: duration, location, foundation year */
.kec-card__meta { list-style: none; margin: auto 0 1.1rem; padding: 1rem 0 0; border-top: 1px solid var(--kec-line); display: flex; flex-wrap: wrap; gap: .5rem; }
.kec-pill {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	width: fit-content;
	margin: 0;
	padding: .3rem .85rem .3rem .3rem;
	border-radius: 999px;
	font-size: .82rem;
	font-weight: 700;
	line-height: 1.2;
	color: var(--kec-ink);
}
.kec-pill__icon { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--kec-ink); }
.kec-pill__icon::before { content: ""; width: 14px; height: 14px; background: #fff; mask: var(--kec-pill-icon) center / contain no-repeat; -webkit-mask: var(--kec-pill-icon) center / contain no-repeat; }
.kec-pill--duration { background: #FFF1CC; }
.kec-pill--duration .kec-pill__icon { background: #B7820C; }
.kec-pill--duration { --kec-pill-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
.kec-pill--location { background: #DDEEFB; max-width: 100%; }
.kec-pill--location .kec-pill__icon { background: var(--kec-blue); }
.kec-pill--location { --kec-pill-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4'%3E%3Cpath d='M12 21s-7-6.2-7-12a7 7 0 0 1 14 0c0 5.8-7 12-7 12z'/%3E%3Ccircle cx='12' cy='9' r='2.5'/%3E%3C/svg%3E"); }
.kec-pill--foundation { margin: -.1rem 0 .8rem; background: #BFEDEA; color: #0B2340; }
.kec-pill--foundation .kec-pill__icon { background: #0B2340; }
.kec-pill--foundation { --kec-pill-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 20h5v-5h5v-5h5V5h3'/%3E%3C/svg%3E"); }
.kec-card__excerpt { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.kec-card__actions { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.kec-card__actions .kec-btn { padding: .65em .6em; font-size: .85rem; white-space: nowrap; }
.kec-grid--compact { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
@media (min-width: 1100px) { .kec-grid--compact { grid-template-columns: repeat(3, 1fr); } }

.kec-ico { width: 1em; height: 1em; background: currentColor; flex: none; }
.kec-ico--clock { mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") center / contain no-repeat; }
.kec-ico--pin { mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M12 21s-7-6.2-7-12a7 7 0 0 1 14 0c0 5.8-7 12-7 12z'/%3E%3Ccircle cx='12' cy='9' r='2.5'/%3E%3C/svg%3E") center / contain no-repeat; }

/* Finder layout: filter bar on top, results below */
.kec-finder { display: block; }
.kec-filter {
	position: relative;
	z-index: 20;
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) auto;
	gap: .75rem;
	align-items: stretch;
	margin-bottom: 2rem;
	padding: 1rem;
	background: #fff;
	border: 1px solid var(--kec-line);
	border-radius: calc(var(--kec-radius) + 4px);
	box-shadow: 0 18px 40px rgba(11, 35, 64, .1);
	font-size: 1rem;
}
.kec-filter__search { display: block; }
.kec-filter__search input,
.kec-search input {
	width: 100%;
	box-sizing: border-box;
	padding: .75em 1em;
	border: 1.5px solid var(--kec-line);
	border-radius: 10px;
	font: inherit;
	background: var(--kec-soft);
}
.kec-filter__search input {
	height: 100%;
	min-height: 60px;
	padding-left: 3rem;
	font-size: 1.05rem;
	background: var(--kec-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2356677A' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") 1rem center / 20px no-repeat;
}
.kec-filter__search input:focus,
.kec-search input:focus { outline: none; border-color: var(--kec-blue); background-color: #fff; }

/* Dropdowns (details/summary) */
.kec-dd { position: relative; }
.kec-dd__toggle {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: .1rem;
	min-height: 60px;
	box-sizing: border-box;
	height: 100%;
	padding: .55rem 2.75rem .55rem 1.1rem;
	border: 1.5px solid var(--kec-line);
	border-radius: 10px;
	background: #fff;
	cursor: pointer;
	list-style: none;
	position: relative;
	transition: border-color .2s;
}
.kec-dd__toggle::-webkit-details-marker { display: none; }
.kec-dd__toggle::after {
	content: "";
	position: absolute;
	right: 1.1rem;
	top: 50%;
	width: 10px;
	height: 10px;
	margin-top: -7px;
	border-right: 2px solid var(--kec-blue);
	border-bottom: 2px solid var(--kec-blue);
	transform: rotate(45deg);
	transition: transform .2s, margin-top .2s;
}
.kec-dd[open] .kec-dd__toggle::after { transform: rotate(-135deg); margin-top: -2px; }
.kec-dd__toggle:hover, .kec-dd[open] .kec-dd__toggle { border-color: var(--kec-blue); }
.kec-dd__toggle:focus-visible { outline: 3px solid var(--kec-orange); outline-offset: 2px; }
.kec-dd__label { font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--kec-muted); }
.kec-dd__value { font-size: 1.02rem; font-weight: 700; color: var(--kec-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kec-dd.has-value .kec-dd__toggle { border-color: var(--kec-blue); background: var(--kec-soft); }
.kec-dd.has-value .kec-dd__value { color: var(--kec-blue); }
.kec-dd__panel {
	position: absolute;
	top: calc(100% + .5rem);
	left: 0;
	min-width: 100%;
	width: max-content;
	max-width: 320px;
	max-height: 380px;
	overflow-y: auto;
	margin: 0;
	padding: .5rem;
	box-sizing: border-box;
	background: #fff;
	border: 1px solid var(--kec-line);
	border-radius: 12px;
	box-shadow: 0 22px 48px rgba(11, 35, 64, .18);
}
.kec-check { display: flex; align-items: center; gap: .75rem; padding: .6rem .75rem; border-radius: 8px; cursor: pointer; font-size: 1rem; color: var(--kec-ink); }
.kec-check:hover { background: var(--kec-soft); }
.kec-check input { width: 1.15rem; height: 1.15rem; accent-color: var(--kec-blue); margin: 0; flex: none; }
.kec-check--all { color: var(--kec-muted); font-size: .92rem; border-bottom: 1px solid var(--kec-line); border-radius: 8px 8px 0 0; margin-bottom: .25rem; }
.kec-check__count { margin-left: auto; min-width: 2em; padding: .1em .55em; border-radius: 999px; background: var(--kec-soft); color: var(--kec-muted); font-size: .78rem; text-align: center; }

.kec-filter__buttons { display: flex; align-items: center; gap: .9rem; }
.kec-filter__submit { min-height: 60px; padding: 0 2rem; font-size: 1rem; border-radius: 10px; }
.kec-filter__reset { color: var(--kec-muted); font-weight: 600; font-size: .95rem; text-decoration: underline; text-underline-offset: 3px; }
.kec-filter__reset:hover { color: var(--kec-blue); }

.kec-results { min-width: 0; transition: opacity .2s; }
.kec-finder.is-loading .kec-results { opacity: .45; pointer-events: none; }
.kec-results__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.kec-results__count { margin: 0; color: var(--kec-muted); font-size: 1.05rem; }
.kec-results__count strong { color: var(--kec-ink); }

.kec-chips { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.5rem; padding: 0; }
.kec-chip { display: inline-flex; align-items: center; gap: .4em; padding: .45em 1em; border-radius: 999px; background: var(--kec-soft); color: var(--kec-blue-dark); font-size: .92rem; font-weight: 600; text-decoration: none; border: 1px solid var(--kec-line); }
.kec-chip:hover { border-color: var(--kec-blue); }
.kec-chip--clear { background: transparent; color: var(--kec-muted); }

.kec-finder .kec-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.75rem; }
@media (max-width: 1000px) { .kec-finder .kec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .kec-finder .kec-grid { grid-template-columns: 1fr; } }

.kec-pagination { margin-top: 2.5rem; }
.kec-pagination ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; margin: 0; padding: 0; }
.kec-pagination a,
.kec-pagination span { display: grid; place-items: center; min-width: 2.75rem; height: 2.75rem; padding: 0 .6rem; border-radius: 10px; border: 1px solid var(--kec-line); text-decoration: none; color: var(--kec-ink); font-weight: 600; box-sizing: border-box; }
.kec-pagination a:hover { border-color: var(--kec-blue); color: var(--kec-blue); }
.kec-pagination .current { background: var(--kec-blue); border-color: var(--kec-blue); color: #fff; }

.kec-empty { padding: 3rem 1.5rem; text-align: center; background: var(--kec-soft); border-radius: var(--kec-radius); }

@media (max-width: 1000px) {
	.kec-filter { grid-template-columns: 1fr 1fr; }
	.kec-filter__search { grid-column: 1 / -1; }
	.kec-filter__buttons { grid-column: 1 / -1; }
	.kec-filter__submit { flex: 1; }
}
@media (max-width: 560px) {
	.kec-filter { grid-template-columns: 1fr; padding: .75rem; }
	.kec-dd__panel { max-width: none; width: 100%; }
}

/* Hero search */
.kec-search { display: flex; gap: .5rem; padding: .4rem; background: #fff; border-radius: 999px; box-shadow: 0 18px 40px rgba(11, 35, 64, .18); max-width: 640px; }
.kec-search input { border: 0; background: transparent; border-radius: 999px; }
.kec-search input:focus { background: transparent; }
.kec-search .kec-btn { flex: none; }
@media (max-width: 560px) {
	.kec-search { flex-direction: column; border-radius: 18px; }
}

/* Quick facts */
.kec-facts { background: var(--kec-soft); border: 1px solid var(--kec-line); border-radius: var(--kec-radius); padding: 1.5rem; }
.kec-facts__title { margin: 0 0 1rem; font-size: 1.2rem; }
.kec-facts__list { margin: 0; }
.kec-facts__row { display: grid; grid-template-columns: 130px 1fr; gap: 1rem; padding: .75rem 0; border-top: 1px solid var(--kec-line); font-size: .92rem; }
.kec-facts__row:first-child { border-top: 0; padding-top: 0; }
.kec-facts__row dt { font-weight: 700; color: var(--kec-blue-dark); }
.kec-facts__row dd { margin: 0; color: var(--kec-ink); }
.kec-facts__cta { width: 100%; margin-top: 1.25rem; box-sizing: border-box; }

.screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal !important; }