/* =====================================================================
   CSS ARCHITECTURE OVERVIEW
   ---------------------------------------------------------------------
   Desktop-first, component-oriented stylesheet.
   Sections are ordered from global → layout → components → utilities.
   Redundancy has been removed, behaviour preserved.
   ===================================================================== */


/* =====================================================================
   RESET & BOX MODEL NORMALISATION
   ---------------------------------------------------------------------
   Ensures consistent rendering across browsers.
   ===================================================================== */
html, body {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

*, *::before, *::after {
	box-sizing: inherit;
}


/* =====================================================================
   DESIGN SYSTEM VARIABLES
   ---------------------------------------------------------------------
   Centralised tokens for spacing, colours, radii and effects.
   ===================================================================== */
:root {
	/* Layout */
	--main-max-width: 1200px;
	--main-padding: 2rem;

	/* Surfaces */
	--main-radius: 8px;
	--main-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);

	/* Motion */
	--pill-hover-scale: 1.1;

	/* Top bar */
	--top-bar-icon-size: 12px;
	--top-bar-icon-color: #fff;
	--top-bar-icon-backcolor: #000;

	/* Palette */
	--primary-color: #007bff;
	--dark-bg: #121212;
	--light-bg: #f8f8f8;
	--text-dark: #333;
	--text-light: #f0f0f0;
	--border-color: #eee;
}


/* =====================================================================
   TYPOGRAPHY & DOCUMENT BASE
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Bevan&family=Quicksand&family=Raleway&family=Roboto:wght@300;400;500;700&family=Sofia&display=swap');

html {
	height: 100%;
	background: #ececec;
	scroll-behavior: smooth;
}

body {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	padding-bottom: 80px; /* reserve space for fixed footer */

	font-family: 'Roboto', sans-serif;
	font-size: 16px;
	font-weight: 300;
	color: var(--text-dark);
	background: var(--light-bg);

	overflow-x: hidden;
	text-align: justify;
	text-justify: inter-word;

	transition: background-color .3s, color .3s;
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Bevan', serif;
	font-weight: 300;
	text-align: center;
	text-transform: capitalize;
	margin: 1em 0 .5em;
	color: var(--text-dark);
	text-shadow: 1px 1px 2px rgba(0,0,0,.5);
}

p {
	font-family: 'Bevan', serif;
	font-weight: 300;
	margin: 1em 0 .5em;
	color: var(--text-dark);
	text-shadow: 1px 1px 2px rgba(0,0,0,.5);
}

.dropcap:first-letter {
    float: left;
    font-size: 5em;
    line-height: 0.8;
    padding-right: 8px;
    font-family: "Courier New", monospace;
    font-weight: bold;
}

/* Links */
a {
	font-size: small;
	text-decoration: none;
	text-shadow: .3px .3px 1px rgba(0,0,0,.5);
}
a:hover {
	/*color: red;        /* color when hovering */
	text-shadow: 0 0 2px rgb(0, 204, 255); /* glow color */
}
a:link {
  color: rgb(2, 2, 150);       /* default link color */
}
a:visited {
  color: purple;     /* color after the link has been visited */
}
a:active {
  color: orange;     /* color when clicking */
}

/* ####################### */
.links {
	color: white;
	margin-bottom: 12px;
	font-size: 15px;
}

.links a {
	color: #FFC312;
	text-decoration: none;
	margin-left: 6px;
	font-weight: 600;
	transition: all 0.3s ease;
}

.links a:hover {
	color: #FFD54F;
	text-decoration: underline;
}





/* =====================================================================
   MAIN LAYOUT CONTAINERS
   ===================================================================== */
.cntnr {
	max-width: var(--main-max-width);
	margin: 0 auto;
	padding: var(--main-padding);
	background: #fff;
	border-radius: var(--main-radius);
	box-shadow: var(--main-shadow);
	transition: all .3s ease;
}

main {
	margin-top: 30px;
	padding: 20px;
}

.no-wrap { white-space: nowrap; }


/* =====================================================================
   FIXED TOP BAR (PRIMARY NAVIGATION)
   ===================================================================== */
.sticky-top-bar {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 48px;
	z-index: 1001;

	display: flex;
	align-items: center;
	justify-content: space-between;

	background: #fff;
	border-bottom: 1px solid #e1e1e1;
	box-shadow: 0 1px 3px rgba(0,0,0,.05);

	padding: 0 12px;
	transition: transform .3s ease;
}

.sticky-top-bar.hidden {
	transform: translateY(-100%);
}

.top-bar-left,
.top-bar-right {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
}

.top-bar-center {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	flex: 1;
	overflow-x: auto;
	padding: 0 20px;
}

.top-bar-left img.logo,
.top-bar-right img.logo {
	height: 32px;
	transition: opacity .2s ease;
}

.logo-link:hover img.logo { opacity: .8; }


/* =====================================================================
   TOP BAR ICONS + TOOLTIPS
   ===================================================================== */
.top-bar-icon {
	position: relative;
	flex-shrink: 0;
	min-width: 32px;

	width: 32px;
	height: 32px;
	padding: 8px;

	display: flex;
	align-items: center;
	justify-content: center;

	background: transparent;
	border-radius: 4px;
	text-decoration: none;
	transition: all .2s ease;
}

.top-bar-icon i {
	font-size: 14px;
	color: #666;
	transition: color .2s ease;
}

.top-bar-icon:hover i { color: #000; }

/* Tooltip (single implementation – CSS only) */
.top-bar-icon::after {
	content: attr(title);
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	margin-top: 8px;

	padding: 4px 8px;
	font-size: 11px;
	font-weight: 500;

	background: rgba(0,0,0,.9);
	color: #fff;
	border-radius: 4px;

	opacity: 0;
	visibility: hidden;
	transition: opacity .2s ease;
	pointer-events: none;
}

.top-bar-icon:hover::after {
	opacity: 1;
	visibility: visible;
}


/* =====================================================================
   ATTRIBUTE-BASED ICON COLOURS
   ---------------------------------------------------------------------
   Keeps semantics in HTML, styling in CSS.
   ===================================================================== */
a.top-bar-icon[aria-label*="Facebook"]:hover i { color: #1877f2; }
a.top-bar-icon[aria-label*="Twitter"]:hover i  { color: #1da1f2; }
a.top-bar-icon[aria-label*="Instagram"]:hover i{ color: #e4405f; }
a.top-bar-icon[aria-label*="YouTube"]:hover i  { color: #ff0000; }
a.top-bar-icon[aria-label*="WhatsApp"]:hover i { color: #25d366; }


/* =====================================================================
   THEME TOGGLE BUTTON
   ===================================================================== */
.theme-btn {
	background: none;
	border: none;
	cursor: pointer;
	position: relative;
	width: 32px;
	height: 32px;
}

.theme-btn i {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	transition: opacity .3s ease, transform .3s ease;
}

.theme-btn .fa-sun { opacity: 0; color: #ffcc00; }
.theme-btn .fa-moon { opacity: 1; }

.theme-btn.active .fa-sun { opacity: 1; }
.theme-btn.active .fa-moon { opacity: 0; }


/* =====================================================================
   FIXED LOGO BAR BELOW TOP BAR
   ===================================================================== */
.logos {
	position: fixed;
	top: 34px;
	left: 0;
	width: 100%;
	z-index: 1000;

	display: flex;
	justify-content: space-between;
	align-items: center;

	padding: 10px 20px;
	background: #fff;
	border-bottom: 1px solid var(--border-color);
	box-shadow: 0 2px 5px rgba(0,0,0,.1);
	transition: top .3s ease;
}

.logos.top-position { top: 0; }

.content {
	margin-top: 20px;/*114px; /* offset for fixed headers */
}


/* =====================================================================
   BUTTONS (GENERIC)
   ===================================================================== */
.chzr_btn {
	font-family: 'Quicksand', sans-serif;
	padding: 6px 12px;
	border: 1px solid #2196F3;
	border-radius: 8px;
	background: #fff;
	font-weight: bold;
	cursor: pointer;
	transition: background .2s ease;
}

.chzr_btn:hover { background: #e3f2fd; }


/* =====================================================================
   PILL COMPONENT
   ===================================================================== */
.pill {
	font-size: .7rem;
	font-weight: 600;
	padding: .2em .5em;
	margin: .15em;

	border-radius: 1em;
	border: 1px solid #000;
	background: #fff;
	cursor: pointer;

	transition: all .3s ease;
}

.pill:hover {
	background: #000;
	color: #fff;
	transform: scale(var(--pill-hover-scale));
	box-shadow: 0 5px 10px rgba(0,0,0,1);
}


/* =====================================================================
   ACCESSIBILITY & UTILITIES
   ===================================================================== */
.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
}

.title, .subtitle { font-family: 'Sofia', cursive; }
.small-note { font-family: 'Raleway', sans-serif; }

/* =====================================================================
   ANIMATIONS
   ---------------------------------------------------------------------
   Used for marquee / scrolling decorative text.
   ===================================================================== */
@keyframes scroll {
	0%   { transform: translateX(0); }
	100% { transform: translateX(-100%); }
}


/* =====================================================================
   ASIDE / SECONDARY NAVIGATION
   ===================================================================== */
aside {
	width: 240px;
	background: #fff;
	border-right: 1px solid var(--border-color);
}

aside ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

aside li {
	padding: 10px;
	cursor: pointer;
}


/* =====================================================================
   FIXED FOOTER
   ===================================================================== */
.fixed-footer {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	z-index: 1000;

	display: flex;
	align-items: center;
	justify-content: space-between;

	padding: 10px 20px;
	background: #ffffff;
	color: #000000;
}

.footer-left,
.footer-center,
.footer-right {
	display: flex;
	align-items: center;
	gap: 10px;
}

.footer-logo { height: 45px; }

.visitor-counter,
.copyright-text {
	font-size: .85em;
}

.rainbow-text {
	width: 420px;
	overflow: hidden;
	white-space: nowrap;
}


/* =====================================================================
   HELP BUTTON (btn_hlp)
   ---------------------------------------------------------------------
   Complex border rendering with feature-detection fallbacks.
   ===================================================================== */
.btn_hlp {
	position: relative;
	background: none;
	border: none;
	cursor: pointer;
}

.btn_hlp-background {
	transition: filter .2s ease;
}

/* Hover only on devices that actually support hover */
@media (hover: hover) {
	.btn_hlp:hover .btn_hlp-background {
		filter: brightness(0.8);
	}
}

/* Active state for all devices */
.btn_hlp:active .btn_hlp-background {
	filter: brightness(0.6);
}

.btn_hlp-border {
	position: absolute;
	z-index: 1;
	inset: -4px -12px;
}


/* =====================================================================
   FEATURE DETECTION: MASK VS BORDER-IMAGE
   ===================================================================== */
@supports (-webkit-mask-box-image: inherit) or (mask-border: inherit) {
	.btn_hlp-border {
		background-image: linear-gradient(to bottom, #bb9d7a 50%, #806d56 50%);

		-webkit-mask-box-image-source: url("https://chzr.uk/media.com/platform/img/btn_hlp_border.svg");
		-webkit-mask-box-image-slice: 15 23;
		-webkit-mask-box-image-width: 15px 23px;
		-webkit-mask-box-image-repeat: repeat;

		mask-border-source: url("https://chzr.uk/media.com/platform/img/btn_hlp_border.svg");
		mask-border-slice: 15 23;
		mask-border-width: 15px 23px;
		mask-border-repeat: repeat;
	}
}

@supports not ((-webkit-mask-box-image: inherit) or (mask-border: inherit)) {
	.btn_hlp-border {
		border-width: 15px 23px;
		border-style: solid;
		border-color: transparent;

		border-image-source: url("https://chzr.uk/media.com/platform/img/btn_hlp.svg");
		border-image-slice: 15 23;
		border-image-width: 15px 23px;
		border-image-repeat: repeat;

		background-image:
			linear-gradient(#000, #000),
			linear-gradient(to bottom, #bb9d7a 50%, #806d56 50%);

		background-origin: content-box, border-box;
		background-repeat: no-repeat;
	}
}


/* =====================================================================
   BROWSER-SPECIFIC FIXES
   ===================================================================== */
@supports (-moz-appearance: none) {
	/* Firefox GPU flicker fix */
	.top-bar-icon {
		backface-visibility: hidden;
	}
}


/* =====================================================================
   RESPONSIVE BREAKPOINTS
   ---------------------------------------------------------------------
   Ordered from large → small to avoid overrides ambiguity.
   ===================================================================== */

/* <= 1200px ----------------------------------------------------------- */
@media (max-width: 1200px) {
	.user-info { display: none; }

	.top-bar-center {
		gap: 2px;
		padding: 0 10px;
	}

	.top-bar-icon {
		padding: 6px;
		width: 28px;
		height: 28px;
	}
}


/* <= 992px ------------------------------------------------------------ */
@media (max-width: 992px) {
	.fixed-footer {
		flex-direction: column;
		padding: 15px 10px;
		text-align: center;
	}

	.footer-left,
	.footer-center,
	.footer-right {
		justify-content: center;
		margin: 5px 0;
		flex: auto;
		width: 100%;
	}

	.rainbow-text { width: 350px; }
}


/* <= 800px ------------------------------------------------------------ */
@media (max-width: 800px) {
	aside {
		width: 100%;
		flex-direction: row;
		overflow-x: auto;
		overflow-y: hidden;
		white-space: nowrap;
	}

	aside ul {
		display: flex;
		flex-wrap: nowrap;
	}

	aside li { margin: 0 10px; }
}


/* <= 768px ------------------------------------------------------------ */
@media (max-width: 768px) {
	/* Logos scale down */
	.top-bar-left img.logo,
	.top-bar-right img.logo { height: 28px; }

	/* Top bar wraps */
	.top-bar-container { flex-wrap: wrap; }

	/* Logo bar becomes vertical */
	.logos {
		flex-direction: column;
		align-items: center;
		max-width: 100%;
		height: auto;
	}

	.top-bar-center {
		justify-content: flex-start;
		padding: 0 5px;
	}

	/* Form inputs span full width */
	input[type="text"],
	input[type="number"],
	input[type="email"],
	input[type="date"],
	select {
		width: 100%;
	}
}


/* <= 576px ------------------------------------------------------------ */
@media (max-width: 576px) {
	.visitor-counter,
	.copyright-text {
		font-size: .7em;
	}

	.footer-logo { height: 35px; }

	.rainbow-text {
		width: 280px;
		height: 25px;
	}
}


@media (max-width: 600px) {
	.card-header {
	font-size: 1em;
	}
	.card-body {
	font-size: 0.9em;
	}
}


#info-box {
	background: #222;
	color: #fff;
	padding: 6px 10px;
	border-radius: 4px;
	font-size: 13px;
	pointer-events: none;
	z-index: 9999;
	white-space: nowrap;
}


.input-group-prepend span {
	width: 50px;
	background-color: #FFC312;
	color: black;
	border: 0 !important;
	border-radius: 8px 0 0 8px;
	font-size: 18px;
}

.input-group {
	margin-bottom: 25px;
}




.form-input { 
	font-family: 'Bevan', serif;
    font-size: 1em;
	font-weight: 300;
	display: block; 
	width: 100%; 
    box-sizing: border-box;   /* includes padding/border in width */
	padding: 10px; 
	margin-bottom: 15px; 
	margin: 1em 0 .5em;
	width:250px;
	border: 1px solid black; 
	border-radius: 4px; 
	color: var(--text-dark);
    background: #fff;
    transition: all 0.2s ease;
	text-shadow: 1px 1px 2px rgba(0,0,0,.5);
}

.form-control {
	border-radius: 0 8px 8px 0;
	border: 2px solid #FFC312;
	padding: 12px 15px;
	background-color: rgba(255, 255, 255, 0.08);
	color: white;
	font-size: 16px;
}

.form-control:focus {
	outline: 0;
	box-shadow: 0 0 0 0.3rem rgba(255, 195, 18, 0.25);
	background-color: rgba(255, 255, 255, 0.12);
}

.form-control::placeholder {
	color: rgba(255, 255, 255, 0.6);
}


.card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 20px;
}

.card {
	background: #fff;
    border-radius: 12px;
	box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    box-shadow: 0 10px 35px rgba(0,0,0,.6);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
    width: 100%;
    background: rgba(0, 0, 0, 0.36);
}

.card:hover {
	transform: translateY(-5px);
	box-shadow: 0 8px 16px rgba(0,0,0,0.15);
}

.card-header {
	background: #000000;
	background-color: rgba(0, 0, 0, 0.5);
	border-bottom: 1px solid rgba(255, 195, 18, 0.3);
	color: #fff;
	text-align: center;
	padding: 20px;
	font-size: 1.2em;
	font-weight: bold;
}
.card-header img {
	margin-bottom: 15px;
	filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}
.card-header h3 {
	color: #FFC312;
	margin-bottom: 0;
	font-size: 24px;
	text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}


.card-body {
    padding: 32px;
    display: flex;
	flex: 1;
    flex-direction: column;
    gap: 22px;
    text-align: center;
	color: #333;
	line-height: 1.5;
}


.card-footer {
	padding: 10px 15px;
	text-align: center;
	background: #dfdfdf;
	background-color: rgba(0, 0, 0, 0.4);
	border-top: 1px solid rgba(255, 195, 18, 0.2);
	border-radius: 0 0 15px 15px;
}



/*Style for donation paypal+clabe*/
.support-block {
    margin-top: 5px;
    font-size: 0.85rem;
    color: #555;
}

.support-title {
    margin-bottom: 8px;
    font-weight: 500;
}

.support-methods {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.clabe {
    font-family: monospace;
    letter-spacing: 0.5px;
}