/*
 * KoeHUB Theme — fork of SNN-BRX by Sinan Isler (GPL v3)
 * https://github.com/sinanisler/snn-brx-child-theme
 *
 * Frontend CSS — Cookie Banner, Accessibility Widget, Print, CSS Vars
 * Version: 1.0.0
 */

/* ==========================================================================
   CSS Custom Properties (Brand Tokens)
   ========================================================================== */

:root {
	--koehub-primary:    #1A1A1A;
	--koehub-accent:     #C9A857;
	--koehub-bg:         #F8F6F1;
	--koehub-text:       #1A1A1A;
	--koehub-white:      #FFFFFF;
	--koehub-light-gray: #E8E6E1;
	--koehub-border:     #D4D2CD;

	--koehub-radius:     6px;
	--koehub-shadow:     0 4px 20px rgba(0, 0, 0, 0.12);
	--koehub-transition: 0.25s ease;
	--koehub-font:       -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--koehub-font-dyslexia: "OpenDyslexic", "Comic Sans MS", cursive, sans-serif;
}

/* ==========================================================================
   Cookie Banner
   ========================================================================== */

#koehub-cookie-banner {
	position:         fixed;
	bottom:           0;
	left:             0;
	right:            0;
	z-index:          999999;
	background:       var(--koehub-primary);
	color:            var(--koehub-white);
	padding:          20px 24px;
	box-shadow:       0 -4px 24px rgba(0, 0, 0, 0.25);
	font-family:      var(--koehub-font);
	font-size:        14px;
	line-height:      1.6;
	transform:        translateY(0);
	transition:       transform 0.4s ease, opacity 0.4s ease;
}

#koehub-cookie-banner.koehub-cookie--hidden {
	transform: translateY(100%);
	opacity:   0;
	pointer-events: none;
}

.koehub-cookie__inner {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	gap:             20px;
	max-width:       1200px;
	margin:          0 auto;
	flex-wrap:       wrap;
}

.koehub-cookie__text {
	flex: 1 1 300px;
}

.koehub-cookie__text p {
	margin:  0;
	padding: 0;
}

.koehub-cookie__text a {
	color:           var(--koehub-accent);
	text-decoration: underline;
}

.koehub-cookie__text a:hover {
	color: var(--koehub-white);
}

.koehub-cookie__actions {
	display:   flex;
	gap:       10px;
	flex-wrap: wrap;
	flex-shrink: 0;
}

.koehub-cookie__btn {
	display:          inline-flex;
	align-items:      center;
	justify-content:  center;
	padding:          10px 20px;
	border-radius:    var(--koehub-radius);
	font-size:        14px;
	font-weight:      600;
	font-family:      var(--koehub-font);
	cursor:           pointer;
	border:           2px solid transparent;
	transition:       background var(--koehub-transition),
	                  color var(--koehub-transition),
	                  border-color var(--koehub-transition);
	text-decoration:  none;
	white-space:      nowrap;
}

.koehub-cookie__btn--accept {
	background:    var(--koehub-accent);
	color:         var(--koehub-primary);
	border-color:  var(--koehub-accent);
}

.koehub-cookie__btn--accept:hover {
	background:   #b8953f;
	border-color: #b8953f;
	color:        var(--koehub-white);
}

.koehub-cookie__btn--reject {
	background:   transparent;
	color:        var(--koehub-light-gray);
	border-color: var(--koehub-light-gray);
}

.koehub-cookie__btn--reject:hover {
	background:   rgba(255, 255, 255, 0.1);
	color:        var(--koehub-white);
	border-color: var(--koehub-white);
}

.koehub-cookie__btn--settings {
	background:   transparent;
	color:        var(--koehub-light-gray);
	border-color: transparent;
	padding:      10px 12px;
	font-size:    13px;
}

.koehub-cookie__btn--settings:hover {
	color:         var(--koehub-accent);
	border-color:  transparent;
}

/* Cookie Settings Modal */
.koehub-cookie-modal {
	display:          none;
	position:         fixed;
	inset:            0;
	z-index:          1000000;
	background:       rgba(0, 0, 0, 0.7);
	align-items:      center;
	justify-content:  center;
	padding:          20px;
}

.koehub-cookie-modal.koehub-cookie-modal--open {
	display: flex;
}

.koehub-cookie-modal__box {
	background:    var(--koehub-white);
	color:         var(--koehub-text);
	border-radius: var(--koehub-radius);
	padding:       32px;
	max-width:     540px;
	width:         100%;
	max-height:    80vh;
	overflow-y:    auto;
	box-shadow:    var(--koehub-shadow);
}

.koehub-cookie-modal__title {
	font-size:    20px;
	font-weight:  700;
	margin:       0 0 16px;
	color:        var(--koehub-primary);
}

.koehub-cookie-modal__group {
	display:        flex;
	align-items:    flex-start;
	justify-content: space-between;
	padding:        14px 0;
	border-bottom:  1px solid var(--koehub-border);
	gap:            16px;
}

.koehub-cookie-modal__group:last-of-type {
	border-bottom: none;
}

.koehub-cookie-modal__group-info h4 {
	margin:      0 0 4px;
	font-size:   15px;
	font-weight: 600;
}

.koehub-cookie-modal__group-info p {
	margin:     0;
	font-size:  13px;
	color:      #666;
	line-height: 1.5;
}

/* Toggle Switch */
.koehub-toggle {
	position:    relative;
	width:       44px;
	height:      24px;
	flex-shrink: 0;
}

.koehub-toggle input {
	opacity:  0;
	width:    0;
	height:   0;
	position: absolute;
}

.koehub-toggle__slider {
	position:         absolute;
	inset:            0;
	background:       var(--koehub-border);
	border-radius:    24px;
	cursor:           pointer;
	transition:       background var(--koehub-transition);
}

.koehub-toggle__slider::before {
	content:          "";
	position:         absolute;
	width:            18px;
	height:           18px;
	left:             3px;
	top:              3px;
	background:       var(--koehub-white);
	border-radius:    50%;
	transition:       transform var(--koehub-transition);
	box-shadow:       0 1px 3px rgba(0,0,0,0.2);
}

.koehub-toggle input:checked + .koehub-toggle__slider {
	background: var(--koehub-accent);
}

.koehub-toggle input:checked + .koehub-toggle__slider::before {
	transform: translateX(20px);
}

.koehub-toggle input:disabled + .koehub-toggle__slider {
	opacity: 0.6;
	cursor:  not-allowed;
}

.koehub-cookie-modal__actions {
	display:         flex;
	gap:             10px;
	justify-content: flex-end;
	margin-top:      20px;
	flex-wrap:       wrap;
}

/* ==========================================================================
   Accessibility Widget
   ========================================================================== */

#koehub-a11y-widget {
	position:    fixed;
	bottom:      24px;
	right:       24px;
	z-index:     99999;
	font-family: var(--koehub-font);
}

.koehub-a11y__toggle-btn {
	width:         48px;
	height:        48px;
	border-radius: 50%;
	background:    var(--koehub-primary);
	color:         var(--koehub-white);
	border:        2px solid var(--koehub-accent);
	cursor:        pointer;
	display:       flex;
	align-items:   center;
	justify-content: center;
	box-shadow:    var(--koehub-shadow);
	transition:    background var(--koehub-transition), transform var(--koehub-transition);
	font-size:     20px;
	line-height:   1;
}

.koehub-a11y__toggle-btn:hover {
	background:  var(--koehub-accent);
	color:       var(--koehub-primary);
	transform:   scale(1.05);
}

.koehub-a11y__panel {
	display:       none;
	position:      absolute;
	bottom:        58px;
	right:         0;
	background:    var(--koehub-white);
	color:         var(--koehub-text);
	border-radius: var(--koehub-radius);
	padding:       20px;
	width:         220px;
	box-shadow:    var(--koehub-shadow);
	border:        1px solid var(--koehub-border);
}

.koehub-a11y__panel.koehub-a11y--open {
	display: block;
}

.koehub-a11y__panel-title {
	font-size:    13px;
	font-weight:  700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color:        #888;
	margin:       0 0 14px;
}

.koehub-a11y__control {
	display:      flex;
	align-items:  center;
	justify-content: space-between;
	padding:      8px 0;
	font-size:    14px;
	border-bottom: 1px solid var(--koehub-light-gray);
}

.koehub-a11y__control:last-child {
	border-bottom: none;
}

.koehub-a11y__control-label {
	font-size:   13px;
	color:       var(--koehub-primary);
	font-weight: 500;
}

.koehub-a11y__font-size-controls {
	display:   flex;
	gap:       6px;
	align-items: center;
}

.koehub-a11y__font-btn {
	width:         28px;
	height:        28px;
	border:        1px solid var(--koehub-border);
	background:    var(--koehub-bg);
	border-radius: 4px;
	cursor:        pointer;
	font-size:     15px;
	display:       flex;
	align-items:   center;
	justify-content: center;
	line-height:   1;
	color:         var(--koehub-primary);
	transition:    background var(--koehub-transition), color var(--koehub-transition);
}

.koehub-a11y__font-btn:hover {
	background: var(--koehub-accent);
	color:      var(--koehub-white);
	border-color: var(--koehub-accent);
}

.koehub-a11y__font-size-value {
	font-size:   12px;
	min-width:   28px;
	text-align:  center;
	font-weight: 600;
	color:       var(--koehub-primary);
}

/* Accessibility Body States */
body.koehub-a11y--high-contrast {
	filter: contrast(1.5) !important;
}

body.koehub-a11y--high-contrast img {
	filter: grayscale(0.3);
}

body.koehub-a11y--dyslexia * {
	font-family: var(--koehub-font-dyslexia) !important;
	letter-spacing: 0.05em !important;
	word-spacing:   0.1em !important;
	line-height:    1.8 !important;
}

/* ==========================================================================
   Skip Link (Accessibility)
   ========================================================================== */

.koehub-skip-link {
	position:     absolute;
	top:          -100px;
	left:         8px;
	background:   var(--koehub-accent);
	color:        var(--koehub-primary);
	padding:      10px 16px;
	font-size:    14px;
	font-weight:  700;
	border-radius: 0 0 var(--koehub-radius) var(--koehub-radius);
	z-index:      100000;
	transition:   top 0.2s ease;
	text-decoration: none;
	font-family:  var(--koehub-font);
}

.koehub-skip-link:focus {
	top: 0;
}

/* ==========================================================================
   Focus Styles (Global Accessibility)
   ========================================================================== */

body.koehub-a11y--focus-visible *:focus-visible {
	outline:        3px solid var(--koehub-accent) !important;
	outline-offset: 3px !important;
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
	#koehub-cookie-banner,
	#koehub-a11y-widget,
	.koehub-cookie-modal,
	.koehub-skip-link {
		display: none !important;
	}

	body {
		background: #fff !important;
		color:      #000 !important;
		font-size:  12pt;
		line-height: 1.6;
	}

	a {
		color:           #000 !important;
		text-decoration: underline !important;
	}

	a[href]::after {
		content: " (" attr(href) ")";
		font-size: 10pt;
		color: #555;
	}

	a[href^="#"]::after,
	a[href^="javascript:"]::after {
		content: "";
	}

	img {
		max-width:  100% !important;
		page-break-inside: avoid;
	}

	h1, h2, h3, h4, h5, h6 {
		page-break-after: avoid;
		color: #000 !important;
	}

	p, blockquote {
		orphans: 3;
		widows:  3;
	}

	blockquote {
		page-break-inside: avoid;
	}

	table {
		border-collapse: collapse !important;
	}

	td, th {
		border: 1px solid #ccc !important;
		padding: 4pt 8pt !important;
	}

	@page {
		margin: 2cm;
	}
}

/* ==========================================================================
   Responsive — Cookie Banner
   ========================================================================== */

@media (max-width: 640px) {
	.koehub-cookie__inner {
		flex-direction: column;
		gap:            14px;
	}

	.koehub-cookie__actions {
		width: 100%;
	}

	.koehub-cookie__btn {
		flex: 1;
		text-align: center;
		justify-content: center;
	}

	#koehub-a11y-widget {
		bottom: 16px;
		right:  16px;
	}
}