/*
Theme Name:		Dandelion Theme
Theme URI:		https://loewenzahn-schule.de
Description:	Child Theme for Education Zone
Author:			Frank Rumler
Author URI:		https://rumler.com
Template:		education-zone
Version:		1.3.4
License: 		GNU General Public License
*/
/*
last edited: 2025-12-15
*/

/* CALCULATE FLUID-RESPONSIVE FONT-SIZE VALUE
-------------------------------------------------------------- */
@media (min-width: 480px) {
	:root {
		font-size: calc(1rem + ((1vw - 4.8px) * 0.4167));
	}
}

@media (min-width: 768px) {
	:root {
		font-size: calc(1rem + ((1vw - 7.68px) * 0.6944));
	}
}

@media (min-width: 1920px) {
	:root {
		font-size: 24px;
	}
}

/* COLOR VARIABLES
-------------------------------------------------------------- */
:root {
	--primary-color: #428c01 !important;
}

/* BASE TYPOGRAPHY & BODY
-------------------------------------------------------------- */
body {
	width: 100%;
	height: 100%;
	overflow-y: scroll;
	overflow-x: hidden;
	color: #5d5d5d; /* Moon Crater Gray  #363636 */
	line-height: normal;
	font-weight: normal;
	font-size: 1em !important;
	letter-spacing: normal;
	font-family: 'Segoe UI Variable Display', 'Segoe UI Variable', 'Segoe UI', 'Segoe UI Web (West European)', Helvetica, Arial, Sans-Serif !important;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-text-size-adjust: 100%;
}

/* UTILITY
-------------------------------------------------------------- */
.green {
	color: var(--primary-color);
}

::selection {
	background: var(--primary-color);
	color: #fff;
}

/* GLOBAL ELEMENTS
-------------------------------------------------------------- */
figure {
	margin: 0 0 1.2em 0;
}

ul,
ol {
	margin: 0 0 2em 0;
}

.widget-area .widget ul li {
	margin-bottom: 0.1em;
}

/* SITE BRANDING
-------------------------------------------------------------- */
.site-branding-wrapper {
	transform: translateY(.6em);
	margin-left: 1.5em;
	float: inline-end;
}

@media (max-width: 480px) {
	.site-branding-wrapper {
		margin-left: 0.75em;
		transform: translateY(0.4em);
	}
}

.page-header .page-title {
	display: none !important;
}

.site-description {
	font-size: 1.2em;
	line-height: 1.5;
	color: inherit !important;
}

/* LINKS
-------------------------------------------------------------- */
a {
	color: #397801;
	transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
}
a:hover,
a:active {
	color: #428c01;
}

/* Automatically mark external links (target="_blank") */
a[target="_blank"] svg.svg-inline--fa {
    display: none;
}

a[target="_blank"]::after {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-left: 0.1em;
    vertical-align: middle;
    background-color: currentColor;
    /* external-link icon (Font Awesome up-right-from-square) */
    -webkit-mask: url("/wp-content/themes/Dandelion/icons/external-link.svg") no-repeat center;
    mask: url("/wp-content/themes/Dandelion/icons/external-link.svg") no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* MEGA MENU DESCRIPTION
-------------------------------------------------------------- */
#mega-menu-wrap-primary #mega-menu-primary a.mega-menu-link .mega-description-group .mega-menu-description {
	display: none;
}

/* BREADCRUMBS
-------------------------------------------------------------- */
#crumbs {
	text-align: left;
	font-size: .8em;
	line-height: normal;
	color: inherit;
	float: left;
	margin-top: 0;
	margin-bottom: 1em;
}
#crumbs span.current {
	font-size: .8em;
}

#crumbs a {
	color: #397801;
	font-weight: normal;
}
#crumbs a:hover,
#crumbs a:active {
	color: #428c01;
	text-decoration: underline;
}

/* WIDGET SECTION
-------------------------------------------------------------- */
.site-info p a,
.widget-area section > p > a {
    color: #c2c9d6;
}
.site-info p a:hover,
.site-info p a:active,
.widget-area section > p > a:hover,
.widget-area section > p > a:active {
    color: #f8f9fc;
}
.site-info p,
.widget-area section p {
    font-size: small;
	margin-bottom: .5em;
	color: #c2c9d6;
}
.widget-area section h3 {
    font-size: smaller;
}

/* POST VIEWS COUNTER
-------------------------------------------------------------- */
.textwidget > .post-views > span {
	opacity: .5;
	font-size: x-small !important;
}
.textwidget > .post-views > span.post-views-count {
	font-size: inherit;
}
.post-views.entry-meta>span.post-views-icon.dashicons,
.textwidget > .post-views > span.post-views-icon::before {
	font-size: inherit;
}

/* BVG ICONS
-------------------------------------------------------------- */
.widget-area section img.bvg {
	max-height: 18px;
	vertical-align: baseline;
	margin-right: .4em;
}
.widget-area section > p > img.s41,
.widget-area section > p >  img.s42,
.widget-area section > p >  img.u7 {
	max-height: 14px;
}

.widget-area section > p > span.bus {
    font-size: medium;
    vertical-align: top;
}

/* LAYOUT: CONTENT & SIDEBAR
-------------------------------------------------------------- */
#primary {
	width: 100% !important;
	padding: 0 1em !important;
	margin-bottom: 1em;
	border: none !important;
}

/* Ensure site-content is full width; reading-width will handle column */
.site-content,
#content.site-content {
	max-width: 100% !important;
	width: 100% !important;
	margin: 0;
	padding: 0;
}

/* Hide sidebar completely */
#secondary {
	display: none;
	width: 0 !important;
	padding: 0 !important;
}

/* Reading-width wrapper used in templates */
.reading-width {
	max-width: 100%;
	margin: 0 auto;
}

/* Tablet: limit to ~80% viewport */
@media (min-width: 768px) {
	.reading-width {
		max-width: 80vw;
	}
}

/* Large desktop: fixed comfortable reading width */
@media (min-width: 1200px) {
	.reading-width {
		max-width: 60vw;
	}
}

/* Remove top spacing between navbar and slider on home */
.home #content.site-content,
.home .site-content,
.home .content-area {
	padding-top: 0 !important;
	margin-top: 0 !important;
}

/* PRIMARY CONTENT EXTRAS
-------------------------------------------------------------- */
#primary .read-more {
	font-size: .8em;
	line-height: 1.6em;
	font-weight: 600;
	padding: 0.25em 1em;
	text-transform: none;
	float: inline-end;
	margin-right: 3em;
	margin-top: -1em;
}

#primary .read-more:hover {
	background: #5fab01;
}

.archive.category #primary .post {
    padding-bottom: 0;
    margin-bottom: 2em;
    border-bottom: #5fab01 1px solid;
}

/* HOME PAGE
-------------------------------------------------------------- */
.home #content.site-content {
	padding-top: 0;
}
.sp-slides-container,
.sp-slides-container .sp-slide {
	font-family: 'Segoe UI Variable Display', 'Segoe UI Variable', 'Segoe UI', 'Segoe UI Web (West European)', Helvetica, Arial, Sans-Serif !important;
}
.sp-slides-container .sp-slide p.title-in-bg {
	font-size: xx-large !important;
	line-height: 2;
	font-weight: 600;
}

.sp-slides-container .sp-slide p.desc-in-bg {
	font-size: medium !important;
	line-height: 1.5;
	font-weight: normal;
}

/* HIDE META DATA / AUTO TITLES
-------------------------------------------------------------- */

#primary .entry-header {
	padding: 0 0;
}

header h1.entry-title,
article > header .entry-meta,
.archive h1.page-title,
.site-info .by,
.site-info .privacy-policy-link,
.single .post-thumbnail,
.page .post-thumbnail {
	display: none !important;
}

/* Archive list layout: thumbnail + text side by side */
.archive-item {
    display: flex;
    gap: 1.2rem;
    align-items: flex-start;
    margin-bottom: 2rem;
}

.archive-thumb {
    flex: 0 0 auto;
}

.archive-thumb img {
    display: block;
    width: 300px;
    max-width: 100%;
    height: auto;
    border-radius: 6px;
}

.archive-text {
    flex: 1 1 auto;
    min-width: 0;
}

/* Mobile: stack image above text */
@media (max-width: 768px) {
    .archive-item {
        flex-direction: column;
    }

    .archive-thumb img {
        width: 100%;
        max-width: 420px; /* optional cap for very wide phones */
    }
}

/* HEADINGS
-------------------------------------------------------------- */
.widget-title,
h1,
article > header > h1.entry-title,
h2,
h3,
h4 {
	color: #428c01 !important;
}

/* Bold, clean FAQ titles */
summary.lightweight-accordion-title h3,
.lightweight-accordion details summary h3 {
    font-weight: 600 !important;
}

/* Green accordion marker (▶ or ▼ depending on state) */
.lightweight-accordion summary::marker,
.lightweight-accordion details summary.lightweight-accordion-title summary::marker {
    color: #397801 !important;
}

/* Hover effect */
.lightweight-accordion summary:hover,
.lightweight-accordion details summary.lightweight-accordion-title summary:hover {
    color: #428C01;
    cursor: pointer;
}

/* Safari fallback (Safari uses ::before, not ::marker, for disclosure arrows) */
.lightweight-accordion summary::-webkit-details-marker {
    color: #397801 !important;
}
.lightweight-accordion-body p {
	font-size: medium;
	margin-bottom: 1em;
}

h1 span,
h2 span,
h3 span,
h4 span,
h1 *:not(img),
h2 *:not(img),
h3 *:not(img),
h4 *:not(img) {
	font-family: inherit !important;
	color: inherit !important;
}

/* ICON LISTS
-------------------------------------------------------------- */
.icon-list {
	list-style: none;
	padding: 0;
	margin: 0 0 2em 0;
	max-width: 100%;
}

.icon-list li {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	margin-bottom: 1.2em;
}

.icon-list li > .fa,
.icon-list li > svg {
	flex-shrink: 0;
	width: 38px;
	height: 38px;
	margin-top: 0.25em;
}

.icon-list .icon-text {
	display: block;
	min-width: 0;
}

.icon-list .icon-text strong {
	display: inline;
	margin-right: 0.25em;
}

/* BACK TO TOP BUTTON
-------------------------------------------------------------- */
#back-to-top {
	position: fixed;
	bottom: 40px;
	right: 40px;
	display: none;
	background: #397801;
	color: #fff;
	border: none;
	border-radius: 0.2em;
	width: 48px;
	height: 48px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.18);
	cursor: pointer;
	z-index: 9999;
	transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
}

#back-to-top:hover {
	background: #428c01;
}

@media (max-width: 600px) {
	#back-to-top {
		bottom: 20px;
		right: 20px;
		width: 40px;
		height: 40px;
	}
}