/* =============================================================
   BODYFIT TACTICAL - design system
   "Tactical Sisterhood" (Fusion): army camo OUTSIDE the frame,
   green gradient INSIDE, shocking pink, angular cards, army font.
   Loaded on the front end and in the block editor.
   ============================================================= */

:root {
	--bf-drab: #2A3419;
	--bf-drab-soft: #3C4A24;
	--bf-pink: #FF007F;
	--bf-gold: #D4AF37;
	--bf-black: #11140C;
	--bf-ink: #1A1E12;
	--bf-sugar: #FFEBF4;
	--bf-white: #FFFFFF;
	--bf-notch: 20px;
	--bf-shadow: 6px 6px 0 var(--bf-pink);
	--bf-shadow-hover: 9px 9px 0 var(--bf-pink);
}

/* -------------------------------------------------------------
   1. Frame: camo OUTSIDE, green gradient INSIDE
   .wp-site-blocks is the wrapper WordPress puts around the whole
   site (header + content + footer), so styling it gives the
   pink-framed "box" with the camo showing in the margins.
   ------------------------------------------------------------- */
body {
	background-color: var(--bf-black);
	color: var(--bf-white);
	background-image:
		radial-gradient(rgba(17, 20, 12, 0.55) 1.1px, transparent 1.1px),
		url("../images/camo-tile.svg");
	background-size: 26px 26px, 320px 320px;
	background-position: 0 0, 0 0;
}

.wp-site-blocks {
	max-width: 1240px;
	margin: 24px auto;
	border: 2px solid var(--bf-pink);
	box-shadow: 0 0 0 1px rgba(255, 0, 127, 0.25);
	background: linear-gradient(180deg, #33401f 0%, #222b15 45%, var(--bf-black) 100%);
	overflow: hidden;
}

/* Camo section blocks now use the greenish top-to-bottom gradient (inside the frame). */
.bf-camo {
	background: linear-gradient(180deg, #3a4a23 0%, #28331a 55%, #161c11 100%);
	border-radius: 4px;
}

/* -------------------------------------------------------------
   2. Header / navigation
   ------------------------------------------------------------- */
.bf-header {
	background: rgba(17, 20, 12, 0.82);
	border-bottom: 2px solid var(--bf-pink);
	backdrop-filter: blur(4px);
}
.bf-header.is-scrolled { background: rgba(17, 20, 12, 0.95); }

.bf-logo .wp-block-site-title,
.bf-logo h1 {
	font-family: 'Black Ops One', Impact, sans-serif;
	font-size: clamp(1.1rem, 2.4vw, 1.4rem);
	line-height: 1.05;
	text-transform: uppercase;
	color: var(--bf-white);
	margin: 0;
}
.bf-logo .wp-block-site-title a { color: var(--bf-white); }
.bf-logo .bf-logo-accent { color: var(--bf-pink); display: block; }

.wp-block-navigation.bf-nav {
	font-family: Oswald, Impact, sans-serif;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 0.95rem;
}
.wp-block-navigation.bf-nav .wp-block-navigation-item__content {
	color: var(--bf-white);
	padding-bottom: 4px;
	border-bottom: 2px solid transparent;
	transition: color 0.15s ease, border-color 0.15s ease;
}
.wp-block-navigation.bf-nav .wp-block-navigation-item__content:hover,
.wp-block-navigation.bf-nav .current-menu-item .wp-block-navigation-item__content {
	color: var(--bf-pink);
	border-bottom-color: var(--bf-pink);
}

/* -------------------------------------------------------------
   3. Hero: army band on top, photo dissolving into the green below
   ------------------------------------------------------------- */
.bf-hero { position: relative; overflow: hidden; isolation: isolate; }

/* desaturate the photo so the brand colours take over */
.bf-hero .wp-block-cover__image-background {
	filter: grayscale(100%) contrast(120%) brightness(1);
}
/* magenta band (dark title reads) -> photo -> long opaque fade into the same green
   as the section below + halftone dot matrix over the photo */
.bf-hero .wp-block-cover__background,
.bf-hero::after {
	background: none !important;
}
.bf-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background-image:
		radial-gradient(rgba(17, 20, 12, 0.30) 1.4px, transparent 1.5px),
		linear-gradient(180deg,
			rgba(255, 0, 127, 0.90) 0%,
			rgba(255, 0, 127, 0.80) 16%,
			rgba(255, 0, 127, 0.26) 34%,
			rgba(51, 64, 31, 0.20) 50%,
			rgba(51, 64, 31, 0.58) 72%,
			rgba(51, 64, 31, 0.88) 88%,
			#33401f 100%) !important;
	background-size: 8px 8px, 100% 100% !important;
}
.bf-hero.no-dots::after {
	background-image: linear-gradient(180deg, rgba(255,0,127,0.9) 0%, rgba(255,0,127,0.8) 16%, rgba(255,0,127,0.26) 34%, rgba(51,64,31,0.2) 50%, rgba(51,64,31,0.58) 72%, rgba(51,64,31,0.88) 88%, #33401f 100%) !important;
	background-size: 100% 100% !important;
}
.bf-hero .wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: inherit;
}
.bf-hero-title {
	font-family: 'Black Ops One', Impact, sans-serif;
	font-size: clamp(1.7rem, 4vw, 3rem) !important;
	line-height: 1.05;
	letter-spacing: 0.005em;
	text-transform: uppercase;
	margin: 0;
	color: var(--bf-black);
}
.bf-hero-title .bf-pink { color: var(--bf-white); text-shadow: 0 2px 10px rgba(17, 20, 12, 0.5); }
.bf-hero-lower { margin-top: auto; }
.bf-hero-lower p { color: var(--bf-white); text-shadow: 0 1px 3px rgba(0,0,0,0.85), 0 0 1px rgba(0,0,0,0.9); }

/* -------------------------------------------------------------
   4. Splash CTA (graffiti paint blob + black stencil text)
   ------------------------------------------------------------- */
.wp-block-button.is-style-tactical-pop .wp-block-button__link {
	background: url("../images/splash-pink.svg") center / 100% 100% no-repeat;
	color: var(--bf-black);
	font-family: 'Black Ops One', Impact, sans-serif;
	font-weight: 400;
	font-size: 0.86rem;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	padding: 1.15rem 1.7rem 1.25rem;
	border: none;
	border-radius: 0;
	box-shadow: none;
	transform: rotate(-2deg);
	transition: transform 0.15s ease;
}
.wp-block-button.is-style-tactical-pop .wp-block-button__link:hover {
	transform: rotate(-2deg) scale(1.06);
	background: url("../images/splash-pink.svg") center / 100% 100% no-repeat;
	color: var(--bf-black);
}

/* Solid pink (black text) for secondary primary actions. */
.wp-block-button.is-style-tactical-solid .wp-block-button__link {
	background: var(--bf-pink);
	color: var(--bf-black);
	font-family: Oswald, Impact, sans-serif;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	border-radius: 0;
	box-shadow: -4px 4px 0 0 var(--bf-black);
	transform: rotate(-1.5deg);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.wp-block-button.is-style-tactical-solid .wp-block-button__link:hover {
	transform: rotate(-1.5deg) translate(2px, -2px);
	box-shadow: -6px 6px 0 0 var(--bf-black);
	color: var(--bf-black);
}

/* Outline / ghost (black text on hover). */
.wp-block-button.is-style-tactical-ghost .wp-block-button__link {
	background: transparent;
	color: var(--bf-pink);
	border: 2px solid var(--bf-pink);
	border-radius: 0;
	font-family: Oswald, Impact, sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	transition: background 0.15s ease, color 0.15s ease;
}
.wp-block-button.is-style-tactical-ghost .wp-block-button__link:hover {
	background: var(--bf-pink);
	color: var(--bf-black);
}

/* -------------------------------------------------------------
   5. Tactical card: TOP-LEFT + BOTTOM-RIGHT notch, pink border
   ------------------------------------------------------------- */
.wp-block-group.is-style-tactical-card {
	background: var(--bf-white);
	color: var(--bf-ink);
	border: 2px solid var(--bf-pink);
	border-radius: 2px;
	padding: 2rem 1.75rem;
	clip-path: polygon(var(--bf-notch) 0, 100% 0, 100% calc(100% - var(--bf-notch)), calc(100% - var(--bf-notch)) 100%, 0 100%, 0 var(--bf-notch));
	box-shadow: var(--bf-shadow);
	transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease;
	height: 100%;
}
.wp-block-group.is-style-tactical-card:hover {
	transform: translate(-3px, -3px);
	box-shadow: var(--bf-shadow-hover);
}
.wp-block-group.is-style-tactical-card :where(h1, h2, h3, h4, h5, h6) { color: var(--bf-drab); }
.wp-block-group.is-style-tactical-card p { color: #2b2f22; }

.bf-icon { color: var(--bf-pink); line-height: 0; margin-bottom: 0.5rem; }
.bf-icon svg { width: 64px; height: 64px; }

/* Paint splatter behind a card row. Add class "bf-splatter" to the columns wrapper. */
.bf-splatter { position: relative; }
.bf-splatter::before {
	content: "";
	position: absolute;
	left: 50%; top: 52%;
	transform: translate(-50%, -50%);
	width: 114%; height: 185%;
	z-index: 0;
	background: url("../images/splatter.svg") center / contain no-repeat;
	opacity: 0.85;
	pointer-events: none;
}
.bf-splatter > * { position: relative; z-index: 1; }

/* -------------------------------------------------------------
   6. Dark panel (rooster, contact info)
   ------------------------------------------------------------- */
.wp-block-group.is-style-tactical-panel {
	background: var(--bf-black);
	color: var(--bf-white);
	border-left: 4px solid var(--bf-pink);
	padding: 1.75rem 1.75rem 1.5rem;
	border-radius: 0 4px 4px 0;
}
.wp-block-group.is-style-tactical-panel :where(h1, h2, h3, h4, h5, h6) {
	color: var(--bf-white);
	font-family: Oswald, Impact, sans-serif;
}

/* -------------------------------------------------------------
   7. Weekly rooster (native Table block, edit by clicking cells)
   ------------------------------------------------------------- */
.bf-rooster-wrap.wp-block-table { margin: 0.5rem 0 0; }
.bf-rooster-wrap table { width: 100%; border-collapse: collapse; color: var(--bf-white); font-family: Inter, sans-serif; border: 0; }
.bf-rooster-wrap thead th {
	text-align: left; font-family: Oswald, sans-serif; text-transform: uppercase; letter-spacing: 0.05em;
	font-size: 0.78rem; color: var(--bf-gold); padding: 0 0.5rem 0.7rem 0; border: 0; border-bottom: 2px solid var(--bf-drab-soft);
}
.bf-rooster-wrap tbody td { padding: 0.75rem 0.5rem 0.75rem 0; border: 0; border-bottom: 1px dashed var(--bf-drab-soft); font-size: 0.96rem; background: transparent !important; }
.bf-rooster-wrap.is-style-stripes tbody tr:nth-child(odd) td { background: transparent !important; }
.bf-rooster-wrap tbody td:nth-child(1) { font-family: Oswald, sans-serif; font-weight: 600; text-transform: uppercase; color: var(--bf-pink); white-space: nowrap; }
.bf-rooster-wrap tbody td:nth-child(3) { font-weight: 700; color: var(--bf-gold); white-space: nowrap; }
.bf-rooster-wrap tbody td:nth-child(4) { font-size: 0.82rem; color: rgba(255, 255, 255, 0.6); font-style: italic; }

@media (max-width: 600px) {
	.bf-rooster-wrap thead { display: none; }
	.bf-rooster-wrap table, .bf-rooster-wrap tbody, .bf-rooster-wrap tr, .bf-rooster-wrap td { display: block; width: 100%; }
	.bf-rooster-wrap tr { border-bottom: 1px solid var(--bf-drab-soft); padding: 0.6rem 0; }
	.bf-rooster-wrap td { border: 0 !important; padding: 0.15rem 0; }
	.bf-rooster-wrap td:nth-child(1) { font-size: 1.05rem; }
}

/* Exceptions / "geen lessen" box. */
.bf-exceptions { background: var(--bf-sugar); color: var(--bf-ink); border: 2px solid var(--bf-pink); border-radius: 4px; padding: 1.5rem 1.75rem; }
.bf-exceptions :where(h1,h2,h3,h4) { color: var(--bf-pink); margin-top: 0; }
.bf-exceptions ul { margin: 0.5rem 0 0; padding-left: 1.1rem; }
.bf-exceptions li { padding: 0.2rem 0; font-weight: 600; }

/* -------------------------------------------------------------
   8. Image duotone style (opt-in)
   ------------------------------------------------------------- */
.wp-block-image.is-style-tactical-duotone img { filter: grayscale(100%) contrast(115%); mix-blend-mode: luminosity; background: var(--bf-drab); }
.wp-block-image.is-style-tactical-duotone { border: 2px solid var(--bf-pink); border-radius: 4px; overflow: hidden; }

.wp-block-heading.is-style-pink-accent, .is-style-pink-accent { color: var(--bf-pink); }

/* -------------------------------------------------------------
   9. Section helpers
   ------------------------------------------------------------- */
.bf-section-eyebrow { font-family: Oswald, sans-serif; text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.8rem; color: var(--bf-pink); font-weight: 600; }
.bf-divider { height: 4px; width: 64px; background: var(--bf-pink); border: 0; margin: 0.75rem 0 1.25rem; }

.bf-prose { background: var(--bf-white); color: var(--bf-ink); border-radius: 4px; padding: clamp(1.5rem, 4vw, 3rem); }
.bf-prose :where(h1, h2, h3, h4) { color: var(--bf-drab); }
.bf-prose a { color: var(--bf-pink); }

/* -------------------------------------------------------------
   10. Footer
   ------------------------------------------------------------- */
.bf-footer { background: var(--bf-black); border-top: 2px solid var(--bf-pink); color: rgba(255, 255, 255, 0.75); }
.bf-footer a { color: var(--bf-white); }
.bf-footer a:hover { color: var(--bf-pink); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* --- hero text: lift content above the overlay so it reads crisp --- */
.bf-hero .wp-block-cover__inner-container { z-index: 5 !important; }
.bf-hero::after { z-index: 1 !important; }
.bf-hero .wp-block-cover__image-background { filter: grayscale(100%) contrast(120%) brightness(0.92) !important; }
.bf-hero::after {
	background-image:
		radial-gradient(rgba(17,20,12,0.22) 1.3px, transparent 1.4px),
		linear-gradient(180deg,
			rgba(255,0,127,0.92) 0%,
			rgba(255,0,127,0.88) 24%,
			rgba(255,0,127,0.42) 40%,
			rgba(51,64,31,0.42) 64%,
			rgba(51,64,31,0.86) 86%,
			#33401f 100%) !important;
	background-size: 7px 7px, 100% 100% !important;
}
.bf-hero-title, .bf-hero-title .bf-pink { color: #11140C !important; text-shadow: none !important; }
.bf-hero-lower p { color: #ffffff !important; font-weight: 700; text-shadow: 0 1px 3px rgba(0,0,0,0.95), 0 0 3px rgba(0,0,0,0.85); }

/* --- live tweaks 2: rooster light-row text + bigger hero title --- */
.bf-rooster-wrap.is-style-stripes tbody tr:nth-child(odd) td { color: #11140C !important; }
.bf-rooster-wrap.is-style-stripes tbody tr:nth-child(odd) td:nth-child(1) { color: #FF007F !important; }
.bf-rooster-wrap.is-style-stripes tbody tr:nth-child(odd) td:nth-child(3) { color: #8a6d1f !important; }
.bf-rooster-wrap.is-style-stripes tbody tr:nth-child(odd) td:nth-child(4) { color: #4a4a4a !important; }
.bf-hero-title { font-size: clamp(2.6rem, 7.6vw, 5.4rem) !important; line-height: 1.02 !important; letter-spacing: 0.012em !important; }

/* --- live tweaks 3: mobile nav overlay fix --- */
/* backdrop-filter on the header was trapping the fixed mobile overlay inside the header box, so it got clipped */
.bf-header { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--bf-black) !important;
	z-index: 100000 !important;
	padding-top: 4rem !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { width: 100%; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content,
.wp-block-navigation__responsive-container.is-menu-open a,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	color: var(--bf-white) !important;
	font-family: 'Black Ops One', Impact, sans-serif;
	font-size: 1.4rem !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover { color: var(--bf-pink) !important; }
.wp-block-navigation__responsive-container-open { color: var(--bf-pink) !important; }
.wp-block-navigation__responsive-container-close { color: var(--bf-white) !important; }

/* --- live tweaks 4: connect hero to header, tighten hero->welkom gap, white INVINCIBLE --- */
.wp-site-blocks > main { margin-block-start: 0 !important; }
.bf-hero { margin-top: 0 !important; }
.bf-hero + .wp-block-group { padding-top: 1.5rem !important; }
.bf-hero-title .bf-pink {
	color: #ffffff !important;
	text-shadow: 1px 1px 0 #11140C, -1px -1px 0 #11140C, 1px -1px 0 #11140C, -1px 1px 0 #11140C, 0 2px 8px rgba(0,0,0,0.4) !important;
}

/* --- live tweaks 5: one-row logo (Bootcamp white + Eindhoven pink) --- */
.bf-logo-line {
	font-family: 'Black Ops One', Impact, sans-serif;
	text-transform: uppercase;
	font-size: clamp(1.05rem, 2.3vw, 1.35rem);
	line-height: 1;
	letter-spacing: 0.01em;
	margin: 0;
}
.bf-logo-line a { color: var(--bf-white); text-decoration: none; }
.bf-logo-word { color: var(--bf-white); }
.bf-logo .bf-logo-accent { color: var(--bf-pink) !important; display: inline !important; }

/* --- live tweaks 6: instructeurs qualification rows with icons --- */
.bf-qual-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.35rem 1.5rem; margin: 0.5rem 0 1.5rem; }
.bf-qual-grid.is-single { grid-template-columns: 1fr; }
.bf-qual { display: flex; align-items: center; gap: 0.65rem; padding: 0.28rem 0; }
.bf-qual svg { width: 22px; height: 22px; color: var(--bf-pink); flex: 0 0 auto; }
.bf-qual span { font-size: 0.95rem; color: var(--bf-ink); line-height: 1.3; }
@media (max-width: 600px) { .bf-qual-grid { grid-template-columns: 1fr; } }

/* --- live tweaks 7: TablePress workout tables -> brand pink, no hover --- */
.tablepress-table-name { display: none !important; }
/* header text always white, beat any inline <font color> in the table data */
.tablepress > thead > tr > th * { color: var(--bf-white) !important; }
.tablepress { border-collapse: collapse; width: 100%; margin: 0.5rem 0 1rem; }
.tablepress > thead > tr > th,
.tablepress > tbody > tr > th {
	background-color: var(--bf-black) !important;
	color: var(--bf-white) !important;
	font-family: Oswald, Impact, sans-serif !important;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	font-weight: 700;
	padding: 0.7rem 0.9rem !important;
	border: none !important;
	border-bottom: 2px solid var(--bf-pink) !important;
}
.tablepress > tbody > tr > td {
	background-color: var(--bf-pink) !important;
	color: var(--bf-black) !important;
	font-weight: 600;
	padding: 0.6rem 0.9rem !important;
	border: none !important;
	border-bottom: 1px solid rgba(17, 20, 12, 0.18) !important;
}
/* kill the hover colour change (keep it the same pink) */
.tablepress > tbody > tr:hover > td,
.tablepress.row-hover > tbody > tr:hover > td {
	background-color: var(--bf-pink) !important;
	color: var(--bf-black) !important;
}
.tablepress a { color: var(--bf-black) !important; text-decoration: underline; }
/* DataTables controls (search/length/pagination) tidy on the dark page */
.dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_paginate { color: var(--bf-white); }
.dataTables_wrapper .dataTables_filter input { color: var(--bf-ink); }

/* benefit rows (Voordelen): top-aligned icons, slightly larger */
.bf-benefits .bf-qual { align-items: flex-start; }
.bf-benefits .bf-qual svg { margin-top: 2px; width: 24px; height: 24px; }
.bf-benefits .bf-qual span:last-child { font-size: 1rem; }

/* --- live tweaks 8: small instructor photos inside the bio card (no crop) --- */
.bf-helle-photos { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: flex-start; margin: 0.4rem 0 1.25rem; }
.bf-helle-photos img { max-height: 175px; width: auto; max-width: 100%; display: block; border: 3px solid var(--bf-pink); border-radius: 4px; }
@media (max-width: 600px) { .bf-helle-photos img { max-height: 140px; } }

/* --- live tweaks 9: clickable Google map in the location panel --- */
.bf-map { display: block; position: relative; width: 100%; height: 175px; border: 3px solid var(--bf-pink); border-radius: 4px; overflow: hidden; margin-bottom: 0.85rem; }
.bf-map iframe { width: 100%; height: 100%; border: 0; display: block; pointer-events: none; }
.bf-map .bf-map-tag { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(17,20,12,0.82); color: var(--bf-white); font-family: Oswald, sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.72rem; padding: 0.35rem 0.6rem; text-align: center; transition: background 0.15s ease, color 0.15s ease; }
.bf-map:hover .bf-map-tag { background: var(--bf-pink); color: var(--bf-black); }


/* --- live tweaks 10: close the tactical-card notched corners ---
   clip-path slices off the border along the two diagonal cuts, leaving them
   open/white. Rebuild the pink frame as a base layer with a white layer inset
   2px, both clipped to the same notch, so pink shows on all edges incl. diagonals. */
.wp-block-group.is-style-tactical-card { position: relative; background: var(--bf-pink); border: 0; }
.wp-block-group.is-style-tactical-card::before {
	content: ""; position: absolute; inset: 2px; background: var(--bf-white);
	clip-path: polygon(var(--bf-notch) 0, 100% 0, 100% calc(100% - var(--bf-notch)), calc(100% - var(--bf-notch)) 100%, 0 100%, 0 var(--bf-notch));
	z-index: 0; pointer-events: none;
}
.wp-block-group.is-style-tactical-card > * { position: relative; z-index: 1; }