@charset "UTF-8";

/* Copyright (C) 2026 Moko Consulting <hello@mokoconsulting.tech>

 This file is part of a Moko Consulting project.

 SPDX-License-Identifier: GPL-3.0-or-later

 # FILE INFORMATION
 DEFGROUP: Joomla.Template.Site
 INGROUP:  KiddieLand.CustomTheme
 REPO:     https://git.mokoconsulting.tech/KiddieLand/client-mokosuite-kiddieland
 PATH:     /media/templates/site/mokoonyx/css/user.css
 VERSION:  00.04.00
 BRIEF:    KiddieLand site-wide overrides — green-field brand, fonts, motifs
*/

/* ============================================================
 * KIDDIELAND — PERSISTENT OVERRIDES
 *
 * This file survives MokoOnyx template updates and reproduces the
 * KiddieLand "green field" brand that the pre-conversion
 * kiddieland-cassiopeia template rendered via its color preset
 * (css/global/colors_standard.css). MokoOnyx consumes the same
 * design variables, so defining them here restores the exact look
 * without editing any template files.
 * ============================================================ */

/* ----- BODY FONT STACK (system stack — the exact font the live site used) ----- */
:root {
	--body-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, "Noto Sans", sans-serif,
		"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

body {
	font-family: var(--body-font-family);
}

/* ============================================================
 * KIDDIELAND — GREEN FIELD BRAND
 *
 * Ported verbatim from kiddieland-cassiopeia colors_standard.css:
 *   --kiddieland-cassiopeia-color-primary: #4b893f  (grass green)
 *   --kiddieland-cassiopeia-color-link:    #15496e
 *   --kiddieland-cassiopeia-color-hover:   #448344
 *   --nav-bg-color: #4b893f  --nav-text-color: black
 *   --mainmenu-nav-link-color: white
 *   --accent-color-primary: #4b893f  --accent-color-secondary: #3f7235
 *   --border: 5px
 *   header image: images/header.png (sky + rainbow + grass),
 *                 bottom center / cover / no-repeat
 *
 * Design flow: sky+rainbow+grass header -> green main menu -> green field body.
 * ============================================================ */
:root {
	/* brand greens — !important so they win over theme/light.standard.css,
	   which loads after user.css and sets --nav-bg-color: var(--color-link) (blue). */
	--nav-bg-color: #4b893f !important;
	--nav-text-color: #000000 !important;
	--mainmenu-nav-link-color: #ffffff !important;
	--accent-color-primary: #4b893f !important;
	--accent-color-secondary: #3f7235 !important;
	--link-color: #15496e !important;
	--link-hover-color: #448344 !important;
	--border: 5px !important;

	/* sky / rainbow / grass header image (MokoOnyx header-background var system) */
	--header-background-image: url("/media/templates/site/mokoonyx/images/header.png");
	--header-background-position: bottom center;
	--header-background-repeat: no-repeat;
	--header-background-size: cover;
	--header-background-attachment: scroll;
}

/* The original applied the header image directly to .header-top; MokoOnyx keeps
   that element in its header markup, so target it directly too (belt + braces). */
.container-header .header-top,
.header-top {
	background-image: url("/media/templates/site/mokoonyx/images/header.png") !important;
	background-position: bottom center !important;
	background-repeat: no-repeat !important;
	background-size: cover !important;
}

/* Green field body/page background (the grass carries down into the page). */
body {
	background-color: #4b893f;
}

/* ============================================================
 * HEADER — KIDDIELAND LOGO LEFT-ALIGN
 *
 * KiddieLand wants the brand logo/site-title LEFT-aligned (MokoOnyx
 * default centers it). .header-brand-wrap is a flex row; forcing
 * flex-start keeps the brand hard-left at every breakpoint.
 * ============================================================ */
.container-header .header-brand-wrap {
	justify-content: flex-start;
	align-items: flex-start;
	text-align: left;
}

.container-header .navbar-brand,
.container-header .navbar-brand a,
.container-header .navbar-brand .brand-logo {
	margin-inline-start: 0;
	margin-inline-end: auto;
	text-align: left;
}

/* Keep the logo left-anchored when the header collapses to a column on
   mobile (<=991.98px): align-self:flex-start beats the wrap's stretch. */
@media (max-width: 991.98px) {
	.container-header .header-brand-wrap {
		align-items: flex-start;
	}
	.container-header .navbar-brand {
		align-self: flex-start;
	}
}

/* ============================================================
 * HEADER LOGO SIZING / DISPLAY — KIDDIELAND
 * The KiddieLand wordmark is wide and short; give it room and keep it
 * crisp/left-anchored in the brand slot.
 * ============================================================ */
.container-header .navbar-brand img.logo,
.container-header .navbar-brand .logo {
	max-width: 320px;
	max-height: 84px;
	width: auto;
	height: auto;
	object-fit: contain;
}