/*
Theme Name: kuettel-solartechnik
Theme URI: https://kuettel-solartechnik.ch
Author: dominic
Description: Block theme for Erwin Küttel Solartechnik — Solar Blue and Küttel Indigo over documentary solar photography, Montserrat headings with Source Sans body. Faithful port of the original Astra/Spectra design: transparent masthead over the indigo hero, active-page pill in the navigation, dark three-column footer. Foundations only (tokens, masthead, footer); the page sections come from the kuettel-blocks plugin.
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 7.4
Version: 0.1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kuettel-solartechnik
Tags: block-theme, full-site-editing, accessibility-ready
*/

/**
 * Derived tokens that aren't editor-pickable palette colors. Palette colors
 * come from theme.json presets (primary #0274be, ink #0a0e21, indigo #243673…).
 */
:root {
	--ks-overlay-ink: rgba(10, 14, 33, 0.6);
	--ks-line-light: rgba(234, 234, 234, 0.9);
	--ks-line-dark: rgba(255, 255, 255, 0.14);
	--ks-ease: cubic-bezier(0.25, 1, 0.5, 1);
}

::selection {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
}

:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

/* =========================================================
   Masthead — transparent, laid over the indigo hero image.
   The first section of every page carries 160–200px top
   padding to make room, exactly like the original site.
   ========================================================= */
.ks-masthead {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 50;
	background: transparent;
}

/* Logo widths mirror the original transparent-header sizes. */
.ks-masthead .wp-block-site-logo img.custom-logo {
	width: 250px;
	height: auto;
}

@media (max-width: 920px) {
	.ks-masthead .wp-block-site-logo img.custom-logo {
		width: 150px;
	}
}

@media (max-width: 600px) {
	.ks-masthead .wp-block-site-logo img.custom-logo {
		width: 120px;
	}
}

/* No logo uploaded yet: show the site title in white instead. */
.ks-masthead .wp-block-site-title a {
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: 22px;
	text-decoration: none;
}

/* Navigation: white links over the hero; the current page sits on a
   Solar-Blue pill (the original Astra "menu-item current" treatment). */
.ks-masthead .wp-block-navigation-item__content {
	color: var(--wp--preset--color--white);
	font-size: 15px;
	padding: 19px 14px;
	text-decoration: none;
	transition: color 0.2s var(--ks-ease), background-color 0.2s var(--ks-ease);
}

.ks-masthead .wp-block-navigation-item__content:hover,
.ks-masthead .wp-block-navigation-item__content:focus-visible {
	color: var(--wp--preset--color--white);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.ks-masthead .wp-block-navigation-item__content[aria-current="page"] {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
}

/* Keep the items snug so the pill edges touch, as in the original menu. */
.ks-masthead .wp-block-navigation__container {
	gap: 4px;
}

/* =========================================================
   Mobile navigation
   Collapse to the burger below 920px (Astra's header breakpoint),
   earlier than core's 600px default.
   ========================================================= */
@media (max-width: 920px) {
	.ks-masthead .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none !important;
	}
	.ks-masthead .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex !important;
	}
}

/* Burger + close icons: white keyline square, minimal like the original. */
.ks-masthead .wp-block-navigation__responsive-container-open {
	color: var(--wp--preset--color--white);
	border: 1px solid rgba(255, 255, 255, 0.6);
	border-radius: 2px;
	padding: 8px;
}

.wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--ink);
}

/* Open overlay: white sheet, dark centered links. */
.wp-block-navigation__responsive-container.is-menu-open {
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--40);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	--navigation-layout-justification-setting: center;
	gap: var(--wp--preset--spacing--30);
	width: 100%;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	text-align: center;
	padding: 6px 14px;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content[aria-current="page"] {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
}

/* =========================================================
   Footer colophon — near-black, three columns, light hairlines.
   ========================================================= */
.ks-colophon {
	border-top: 1px solid #e6e6e6;
}

.ks-colophon h5 {
	color: var(--wp--preset--color--white);
	margin-bottom: 12px;
}

.ks-colophon p,
.ks-colophon a {
	color: var(--wp--preset--color--gray);
	font-size: 16px;
	text-decoration: none;
}

.ks-colophon a:hover,
.ks-colophon a:focus-visible {
	color: var(--wp--preset--color--primary);
}

/* Footer logo sits on its own white plate inside the image file — just size it. */
.ks-colophon .wp-block-site-logo img.custom-logo,
.ks-colophon .wp-block-image img {
	width: 190px;
	height: auto;
}

.ks-colophon .wp-block-site-title a {
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	text-decoration: none;
}

/* Copyright bar: hairline above, small quiet text. */
.ks-foot-bottom {
	border-top: 1px solid var(--ks-line-dark);
	margin-top: var(--wp--preset--spacing--50);
	padding-top: 20px;
	padding-bottom: 4px;
}

.ks-foot-bottom p {
	font-size: 14px;
	color: var(--wp--preset--color--gray);
}

/* =========================================================
   Scroll-to-top — the original site's floating square button.
   Hidden until scroll-top.js flips `data-visible` after 300px.
   ========================================================= */
.ks-scroll-top {
	position: fixed;
	right: 30px;
	bottom: 30px;
	z-index: 99;
	width: 45px;
	height: 45px;
	display: grid;
	place-items: center;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
	border: none;
	border-radius: 2px;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity 0.3s var(--ks-ease), transform 0.3s var(--ks-ease), visibility 0.3s;
}

.ks-scroll-top[data-visible="true"] {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.ks-scroll-top:hover {
	background: var(--wp--preset--color--primary-dark);
}

.ks-scroll-top svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}