/* KOTG content sections: stats, service cards, timeline, gallery, audience tiles.
   Built on Armadon's variables so they follow the Customizer colours and fonts. */

:root {
	--kotg-card-bg: rgba(255, 255, 255, .035);
	--kotg-card-border: rgba(255, 255, 255, .08);
	--kotg-blue-purple: #6757d6;
}

.kotg-section { margin-top: clamp(3rem, 7vw, 6rem); margin-bottom: clamp(3rem, 7vw, 6rem); position: relative; z-index: 1; }
.kotg-anchor { position: relative; top: -90px; height: 0; }

/* Eyebrow + section title */
p.kotg-eyebrow {
	font-family: var(--grimlock-display-heading-font-family, inherit);
	font-weight: 800; font-size: .8rem; letter-spacing: .18em; text-transform: uppercase;
	color: var(--grimlock-link-color, #DD96F6); margin-bottom: .6rem; /* tint passes contrast at this size */
}
p.kotg-eyebrow.has-text-align-center { text-align: center; }
.kotg-section-title.wp-block-heading {
	font-weight: 900; text-transform: uppercase; line-height: 1.05;
	font-size: clamp(1.9rem, 3.6vw, 3rem); margin-bottom: 1.4rem;
}
.kotg-section-title.has-text-align-center { max-width: 22ch; margin-left: auto; margin-right: auto; }

/* Stats strip */
.wp-block-columns.kotg-stats { gap: 0; margin: 0; border-top: 1px solid var(--kotg-card-border); border-bottom: 1px solid var(--kotg-card-border); }
.kotg-stats > .wp-block-column { padding: 1.6rem 1.4rem; border-left: 1px solid var(--kotg-card-border); }
.kotg-stats > .wp-block-column:first-child { border-left: 0; }
p.kotg-stat__number {
	font-family: var(--grimlock-display-heading-font-family, inherit); font-weight: 900;
	font-size: clamp(2.2rem, 4.4vw, 3.6rem); line-height: 1; margin: 0 0 .5rem;
	color: #fff;
}
.kotg-stats > .wp-block-column:nth-child(odd) p.kotg-stat__number { color: var(--grimlock-link-color, #DD96F6); }
p.kotg-stat__label { font-size: .92rem; line-height: 1.4; margin: 0; color: rgba(255, 255, 255, .7); }

/* Service / reason cards */
.wp-block-columns.kotg-cards { gap: 1.25rem; }
.kotg-cards > .wp-block-column {
	background: var(--kotg-card-bg); border: 1px solid var(--kotg-card-border);
	border-radius: var(--grimlock-archive-post-border-radius, 6px); padding: 1.75rem 1.5rem;
	transition: transform .25s ease, border-color .25s ease;
}
.kotg-cards > .wp-block-column:hover { transform: translateY(-4px); border-color: var(--grimlock-button-primary-background-color, #B417DA); }
p.kotg-card__num {
	font-family: var(--grimlock-display-heading-font-family, inherit); font-weight: 900;
	font-size: 1.1rem; color: #9890d2; margin-bottom: .75rem; letter-spacing: .05em;
}
.kotg-card__title.wp-block-heading, .kotg-tile__title.wp-block-heading {
	font-size: 1.3rem; font-weight: 800; text-transform: uppercase; margin-bottom: .75rem; line-height: 1.15;
}
.kotg-cards p:not(.kotg-card__num):not(.kotg-eyebrow), .kotg-tiles p { color: rgba(255, 255, 255, .75); margin-bottom: 0; }
.kotg-team > .wp-block-column { text-align: center; }

/* Timeline */
.wp-block-columns.kotg-timeline { gap: 0; margin-top: 2rem; margin-bottom: 2rem; }
.kotg-timeline > .wp-block-column { position: relative; padding: 2.25rem 1.25rem 0 0; border-top: 2px solid var(--kotg-card-border); }
.kotg-timeline > .wp-block-column::before {
	content: ""; position: absolute; top: -8px; left: 0; width: 14px; height: 14px; border-radius: 50%;
	background: var(--grimlock-button-primary-background-color, #B417DA); box-shadow: 0 0 0 4px rgba(180, 23, 218, .25);
}
/* One dot colour throughout: Armadon's blue-purple. */
.kotg-timeline > .wp-block-column::before, .kotg-timeline > .wp-block-column:nth-child(even)::before { background: var(--kotg-blue-purple); box-shadow: 0 0 0 4px rgba(103, 87, 214, .25); }
p.kotg-timeline__year { font-family: var(--grimlock-display-heading-font-family, inherit); font-weight: 900; font-size: 1.9rem; line-height: 1; margin-bottom: .6rem; color: #fff; }
p.kotg-timeline__text { font-size: .95rem; line-height: 1.5; color: rgba(255, 255, 255, .75); }
.wp-block-buttons.kotg-center { justify-content: center; }

/* Photo gallery */
.wp-block-group.kotg-gallery { margin-top: 2rem; }
.wp-block-group.kotg-gallery, .kotg-gallery > .wp-block-group__inner-container { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.kotg-gallery > .wp-block-group__inner-container { grid-column: 1 / -1; }
.kotg-gallery .wp-block-image { margin: 0; overflow: hidden; border-radius: var(--grimlock-archive-post-border-radius, 6px); aspect-ratio: 3 / 4; }
.kotg-gallery .wp-block-image:nth-child(even) { transform: translateY(24px); }
.kotg-gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease, filter .5s ease; filter: saturate(.9); }
.kotg-gallery .wp-block-image:hover img { transform: scale(1.05); filter: saturate(1.1); }
.kotg-section + .kotg-gallery, .kotg-gallery + .kotg-section { margin-top: 4rem; }

/* CyberExpoX block */
.wp-block-columns.kotg-expo__head { align-items: flex-end; margin-bottom: 0; }
.kotg-expo__buttons.wp-block-buttons { justify-content: flex-end; }

/* Audience tiles */
.wp-block-columns.kotg-tiles { gap: 1.25rem; margin-top: 2rem; }
.kotg-tiles > .wp-block-column {
	display: flex; flex-direction: column; padding: 2rem 1.75rem;
	border-radius: var(--grimlock-archive-post-border-radius, 6px);
	background: linear-gradient(160deg, rgba(103, 87, 214, .22) 0%, rgba(180, 23, 218, .10) 100%);
	border: 1px solid rgba(103, 87, 214, .35);
}
.kotg-tiles > .wp-block-column:nth-child(2) { background: linear-gradient(160deg, rgba(180, 23, 218, .25) 0%, rgba(103, 87, 214, .10) 100%); border-color: rgba(180, 23, 218, .4); }
.kotg-tiles .wp-block-list { margin: 1rem 0 0; padding-left: 1.1rem; color: rgba(255, 255, 255, .8); }
.kotg-tiles .wp-block-list li { margin-bottom: .35rem; }
.kotg-tiles .wp-block-buttons { margin-top: auto; padding-top: 1.5rem; }

/* Core buttons, drawn like Armadon's .btn-secondary */
.kotg-section .wp-block-button__link, .kotg-tiles .wp-block-button__link {
	background-color: var(--grimlock-button-primary-background-color, #B417DA); color: #fff;
	border: 2px solid var(--grimlock-button-primary-background-color, #B417DA);
	border-radius: var(--grimlock-button-border-radius, 4px);
	font-family: var(--grimlock-button-font-family, inherit); font-weight: 700; font-size: .85rem;
	text-transform: uppercase; letter-spacing: .04em; padding: .85rem 1.6rem; text-decoration: none;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.kotg-section .wp-block-button__link:hover, .kotg-tiles .wp-block-button__link:hover {
	background-color: var(--grimlock-button-primary-hover-background-color, #9A10BC); border-color: var(--grimlock-button-primary-hover-background-color, #9A10BC); color: #fff;
}
.kotg-section .wp-block-button.is-style-outline .wp-block-button__link { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .5); }
.kotg-section .wp-block-button.is-style-outline .wp-block-button__link:hover { background: #fff; color: #1B1A23; border-color: #fff; }
.kotg-intro .wp-block-buttons { gap: .75rem; }

/* Intro image: real photo in place of the demo image */
.kotg-intro .wp-block-image img { border-radius: var(--grimlock-archive-post-border-radius, 6px); width: 100%; height: auto; }

.kotg-cta { text-align: center; }

/* Responsive */
@media (max-width: 1023.98px) {
	.wp-block-columns.kotg-stats, .wp-block-columns.kotg-cards, .wp-block-columns.kotg-timeline { flex-wrap: wrap !important; }
	.kotg-stats > .wp-block-column { flex-basis: 50% !important; border-top: 1px solid var(--kotg-card-border); }
	.kotg-stats > .wp-block-column:nth-child(-n+2) { border-top: 0; }
	.kotg-stats > .wp-block-column:nth-child(3) { border-left: 0; }
	.kotg-stats--3 > .wp-block-column { flex-basis: 33.33% !important; border-top: 0; border-left: 1px solid var(--kotg-card-border) !important; }
	.kotg-stats--3 > .wp-block-column:first-child { border-left: 0 !important; }
	.kotg-cards > .wp-block-column { flex-basis: calc(50% - .625rem) !important; }
	.kotg-timeline > .wp-block-column { flex-basis: 33.33% !important; margin-bottom: 1.5rem; }
	.wp-block-group.kotg-gallery, .kotg-gallery > .wp-block-group__inner-container { grid-template-columns: repeat(2, 1fr); }
	.kotg-gallery .wp-block-image:nth-child(even) { transform: none; }
	.kotg-expo__buttons.wp-block-buttons { justify-content: flex-start; }
}
@media (max-width: 781.98px) {
	.kotg-tiles > .wp-block-column { flex-basis: 100% !important; }
	.kotg-timeline > .wp-block-column { flex-basis: 100% !important; padding: 0 0 0 1.75rem; border-top: 0; border-left: 2px solid var(--kotg-card-border); margin-bottom: 0; padding-bottom: 1.5rem; }
	.kotg-timeline > .wp-block-column::before { top: 2px; left: -8px; }
	.kotg-stats--3 > .wp-block-column { flex-basis: 100% !important; border-left: 0 !important; border-top: 1px solid var(--kotg-card-border); }
	.kotg-stats--3 > .wp-block-column:first-child { border-top: 0; }
}
@media (max-width: 575.98px) {
	.kotg-cards > .wp-block-column { flex-basis: 100% !important; }
	.kotg-stats > .wp-block-column { padding: 1.25rem .9rem; }
	.kotg-section .wp-block-buttons .wp-block-button { flex-basis: 100%; }
	.kotg-section .wp-block-button__link { display: block; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
	.kotg-cards > .wp-block-column, .kotg-gallery img { transition: none; }
}

/* "Ready to start?" panel button: white on the purple blend so it stands out */
p.kotg-cta { margin-top: 1.25rem; text-align: left; }
p.kotg-cta .btn.btn-primary { background: #fff !important; border-color: #fff !important; color: #1B1A23 !important; }
p.kotg-cta .btn.btn-primary:hover { background: transparent !important; color: #fff !important; }

p.kotg-section-sub { color: rgba(255, 255, 255, .7); margin-top: -.6rem; margin-bottom: 2rem; text-align: center; }

/* Scout → Develop → Publish: a flow, not another card grid */
.wp-block-columns.kotg-steps { gap: 0; margin-top: 2.5rem; counter-reset: none; }
.kotg-steps > .wp-block-column {
	position: relative; padding: 2.25rem 2.5rem 2.25rem 2rem;
	background: linear-gradient(135deg, rgba(103, 87, 214, .16), rgba(180, 23, 218, .08));
	clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 50%, calc(100% - 28px) 100%, 0 100%, 28px 50%);
	margin-left: -10px !important;
}
.kotg-steps > .wp-block-column:first-child { clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 50%, calc(100% - 28px) 100%, 0 100%); margin-left: 0 !important; }
.kotg-steps > .wp-block-column:nth-child(2) { background: linear-gradient(135deg, rgba(180, 23, 218, .18), rgba(103, 87, 214, .10)); }
.kotg-steps > .wp-block-column:last-child { background: linear-gradient(135deg, rgba(180, 23, 218, .32), rgba(103, 87, 214, .22)); }
.kotg-steps > .wp-block-column > * { padding-left: 1.25rem; }
.kotg-steps > .wp-block-column:first-child > * { padding-left: 0; }
.kotg-steps p.kotg-card__num { font-size: 3rem; line-height: 1; color: rgba(255, 255, 255, .14); margin-bottom: .25rem; }
.kotg-steps .kotg-card__title.wp-block-heading { font-size: 1.9rem; font-weight: 900; }
.kotg-steps p:not(.kotg-card__num) { color: rgba(255, 255, 255, .8); margin-bottom: 0; }

/* Reasons: a quiet two-column list instead of more cards */
.wp-block-columns.kotg-reasons { flex-wrap: wrap !important; gap: 0 3rem; }
.kotg-reasons > .wp-block-column { flex-basis: calc(50% - 1.5rem) !important; flex-grow: 0; padding: 1.25rem 0 1.25rem 1.25rem; border-left: 3px solid var(--grimlock-button-primary-background-color, #B417DA); margin-bottom: 1.5rem; }
.kotg-reasons > .wp-block-column:nth-child(even) { border-left-color: var(--kotg-blue-purple); }
.kotg-reasons p { color: rgba(255, 255, 255, .75); margin-bottom: 0; }

/* Audience tiles: Armadon's cut corner */
.kotg-tiles > .wp-block-column { clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%); }

/* Next up band */
.kotg-nextup .kotg-countdown { display: inline-block; margin-top: .9rem; padding: .3rem .8rem; border-radius: 999px; background: rgba(0, 0, 0, .25); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-size: .8rem; }
.kotg-nextup .grimlock-section__text { font-size: 1.1rem; }
.kotg-intro .kotg-countdown, .kotg-section .kotg-countdown { display: inline-block; margin-left: .5rem; padding: .15rem .6rem; border-radius: 999px; background: rgba(180, 23, 218, .25); color: #fff; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }

/* Main menu: "Work With Us" as a button */
.main-navigation .menu-item.kotg-menu-cta > a, .navbar-nav .menu-item.kotg-menu-cta > a {
	background: var(--grimlock-button-primary-background-color, #B417DA); color: #fff !important;
	border-radius: var(--grimlock-button-border-radius, 4px); padding-left: 1rem !important; padding-right: 1rem !important;
	margin-left: .5rem;
}
.main-navigation .menu-item.kotg-menu-cta > a:hover, .navbar-nav .menu-item.kotg-menu-cta > a:hover { background: var(--grimlock-button-primary-hover-background-color, #9A10BC); }
.menu-item.kotg-menu-cta > a::after, .menu-item.kotg-menu-cta > a::before { display: none !important; }

@media (max-width: 1023.98px) {
	.wp-block-columns.kotg-steps { flex-wrap: wrap !important; gap: 10px; }
	.kotg-steps > .wp-block-column, .kotg-steps > .wp-block-column:first-child {
		flex-basis: 100% !important; margin-left: 0 !important; padding: 1.75rem 1.5rem 2.75rem;
		clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), 50% 100%, 0 calc(100% - 22px));
	}
	.kotg-steps > .wp-block-column > * { padding-left: 0; }
	.kotg-steps > .wp-block-column:last-child { clip-path: none; padding-bottom: 1.75rem; }
}
@media (max-width: 781.98px) {
	.kotg-reasons > .wp-block-column { flex-basis: 100% !important; }
	.menu-item.kotg-menu-cta > a { margin-left: 0; display: inline-block; }
}

/* Next-up band buttons: readable on the blue-purple */
.kotg-nextup .btn-light, .kotg-nextup .grimlock-section__btn--1 { background: #fff !important; border-color: #fff !important; color: #1B1A23 !important; }
.kotg-nextup .btn-light:hover, .kotg-nextup .grimlock-section__btn--1:hover { background: transparent !important; color: #fff !important; }
.kotg-nextup .btn-outline-light, .kotg-nextup .grimlock-section__btn--2 { background: transparent !important; border: 2px solid rgba(255, 255, 255, .7) !important; color: #fff !important; }
.kotg-nextup .btn-outline-light:hover, .kotg-nextup .grimlock-section__btn--2:hover { background: #fff !important; color: #1B1A23 !important; }

/* Menu button: compact pill, vertically centred in the header */
.navbar-nav .menu-item.kotg-menu-cta { display: flex; align-items: center; }
.navbar-nav .menu-item.kotg-menu-cta > a { padding-top: .6rem !important; padding-bottom: .6rem !important; height: auto !important; line-height: 1.2 !important; }

/* Armadon's quick-social buttons sit a few pixels past the hero's edge; keep the page from scrolling sideways */
.armadon-hero { overflow-x: clip; }

/* "Titles we have run" strip */
.kotg-titles { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .75rem 1.5rem; margin: 1.75rem auto 0; }
.kotg-titles__label { font-family: var(--grimlock-display-heading-font-family, inherit); font-weight: 800; font-size: .75rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }
.kotg-titles__list { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.kotg-titles__list li {
	font-family: var(--grimlock-display-heading-font-family, inherit); font-weight: 800; font-size: .85rem; text-transform: uppercase; letter-spacing: .04em;
	color: #fff; padding: .45rem .9rem; border: 1px solid rgba(255, 255, 255, .14); border-radius: 999px; background: rgba(255, 255, 255, .04);
}

/* Hide the BuddyPress profile/login avatar in the header for visitors who aren't signed in */
body .navbar-nav--buddypress.logged-out { display: none !important; }

/* European age-rating (PEGI) badges left over from the theme demo */
body #footer .widget_media_gallery, body .site-footer .widget_media_gallery { display: none !important; }

/* Contact page: details beside the form */
.wp-block-columns.kotg-contact { gap: 3rem; }
.kotg-contact > .wp-block-column:first-child p { margin-bottom: 1.1rem; }
.kotg-contact > .wp-block-column:last-child { background: var(--kotg-card-bg); border: 1px solid var(--kotg-card-border); border-radius: var(--grimlock-archive-post-border-radius, 6px); padding: 2rem; }
.kotg-gallery-cta.wp-block-buttons { margin-top: 3.5rem; }

/* Footer: social links, address, email */
.kotg-footer-info { margin: 1.25rem 0 .75rem; }
.kotg-footer-social { display: flex; justify-content: center; gap: .75rem; list-style: none; margin: 0 0 1rem; padding: 0; }
.kotg-footer-social a {
	display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%;
	background: rgba(255, 255, 255, .06); color: #fff; font-size: 1.05rem; transition: background-color .2s ease, transform .2s ease;
}
.kotg-footer-social a:hover, .kotg-footer-social a:focus-visible { background: var(--grimlock-button-primary-background-color, #B417DA); color: #fff; transform: translateY(-2px); }
.kotg-footer-contact { margin: 0 0 .75rem; font-size: .9rem; color: rgba(255, 255, 255, .7); }
.kotg-footer-contact a { color: rgba(255, 255, 255, .85); }
.kotg-footer-contact a:hover { color: #fff; }

/* Impact: digital-skills benefits */
.kotg-benefits.wp-block-list { list-style: none; padding: 0; margin: 1.25rem 0 1.5rem; }
.kotg-benefits li { position: relative; padding-left: 1.4rem; margin-bottom: .55rem; color: rgba(255, 255, 255, .8); }
.kotg-benefits li::before { content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; border-radius: 50%; background: var(--kotg-blue-purple); }
.kotg-benefits strong { color: #fff; }
.kotg-footer-social li { list-style: none; padding: 0; margin: 0; }
.kotg-footer-social li::before, .kotg-footer-social li::marker { display: none; content: none; }
body .kotg-footer-info .kotg-footer-social li::before { content: none !important; display: none !important; }
body .kotg-footer-info .kotg-footer-social li { padding-left: 0 !important; }

/* Contact form spam trap: hidden from people, visible to bots */
.kotg-hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }

/* Privacy page */
.kotg-privacy { max-width: 820px; margin-left: auto; margin-right: auto; }
.kotg-privacy .wp-block-heading { margin-top: 2rem; font-size: 1.25rem; text-transform: uppercase; font-weight: 800; }
.wp-block-group.kotg-privacy, .kotg-privacy > .wp-block-group__inner-container { max-width: 820px !important; margin-left: auto !important; margin-right: auto !important; }

/* Mobile menu (burger) icon: white bars on the dark header */
body .main-navigation .navbar-toggler span,
body .main-navigation .navbar-toggler span::before,
body .main-navigation .navbar-toggler span::after { background-color: #fff; }
body .slideout-open .main-navigation .navbar-toggler span { background-color: transparent; }