/*!
Theme Name: Livingstone
Theme URI: https://github.com/bsesic/livingstone
Author: Benjamin Schnabel
Author URI: https://www.benjaminschnabel.de
Description: A configurable multipurpose Full Site Editing block theme. Design your portfolio, blog, news site, landing page or shop entirely in the Site Editor — no page builder lock-in, no bloat.
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 8.0
Version: 1.3.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: livingstone
Domain Path: /languages
Tags: block-styles, full-site-editing, blog, portfolio, e-commerce, custom-colors, custom-logo, custom-menu, editor-style, featured-images, block-patterns, rtl-language-support, translation-ready, wide-blocks, style-variations
*/

/*
 * Livingstone is a block theme: the design lives in theme.json and the Site
 * Editor. This file carries the theme header plus accessibility helpers and a
 * few base rules that are awkward to express in theme.json.
 */

/* --- Accessibility --------------------------------------------------------- */

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	position: absolute !important;
	word-wrap: normal !important;
}

/* The WordPress block-theme skip link uses .skip-link.screen-reader-text. */
.screen-reader-text:focus,
.skip-link.screen-reader-text:focus {
	clip: auto;
	clip-path: none;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0.5rem 1rem;
	position: fixed !important;
	top: 6px;
	left: 6px;
	z-index: 100000;
	background-color: var(--wp--preset--color--surface, #fff);
	color: var(--wp--preset--color--primary, #733b2f);
}

/* Visible keyboard focus. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.wp-block-button__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary, #733b2f);
	outline-offset: 2px;
}

/* --- Form controls (CF7, WPForms, WooCommerce, comments, search) ----------- */

input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="password"],
input[type="date"],
textarea,
select {
	padding: 0.6rem 0.8rem;
	border: 1px solid var(--wp--preset--color--contrast, #212529);
	border-radius: 0;
	background-color: var(--wp--preset--color--surface, #fff);
	color: var(--wp--preset--color--contrast, #212529);
	font-size: 1rem;
	max-width: 100%;
}

.wpcf7-submit,
.wpforms-submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce .button {
	display: inline-block;
	padding: 0.6rem 1.2rem;
	border: 0;
	border-radius: 0;
	background-color: var(--wp--preset--color--primary, #733b2f);
	color: var(--wp--preset--color--base, #f5f6f0);
	font-weight: 600;
	cursor: pointer;
}

.wpcf7-submit:hover,
.wpforms-submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce .button:hover {
	background-color: var(--wp--preset--color--secondary, #a66d58);
}

/* --- Front-end effects (assets/js/livingstone.min.js) ---------------------- */

/* Back-to-top button. */
.livingstone-to-top {
	position: fixed;
	right: 1.25rem;
	bottom: 1.25rem;
	z-index: 999;
	width: 2.75rem;
	height: 2.75rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 0;
	background-color: var(--wp--preset--color--primary, #733b2f);
	color: var(--wp--preset--color--base, #f5f6f0);
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(0.5rem);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease, background-color 0.2s ease;
}

.livingstone-to-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.livingstone-to-top:hover {
	background-color: var(--wp--preset--color--secondary, #a66d58);
}

/* Reveal-on-scroll. */
.livingstone-reveal {
	opacity: 0;
	transform: translateY(1.5rem);
	transition: opacity 0.6s ease, transform 0.6s ease;
	will-change: opacity, transform;
}
.livingstone-reveal-left { transform: translateX(-1.5rem); }
.livingstone-reveal-right { transform: translateX(1.5rem); }
.livingstone-reveal-zoom { transform: scale(0.96); }

.livingstone-reveal.is-revealed {
	opacity: 1;
	transform: none;
}

/* Hover effects (CSS only). */
.livingstone-hover-lift {
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.livingstone-hover-lift:hover {
	transform: translateY(-0.35rem);
	box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.15);
}
.livingstone-hover-zoom {
	overflow: hidden;
}
.livingstone-hover-zoom img {
	transition: transform 0.4s ease;
}
.livingstone-hover-zoom:hover img {
	transform: scale(1.06);
}

/* Parallax background helper. */
[data-livingstone-parallax] {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/* In-page scroll-spy active link. */
.wp-block-navigation a.is-active,
[data-livingstone-spy] a.is-active {
	text-decoration: underline;
	text-underline-offset: 0.35em;
}

@media (prefers-reduced-motion: reduce) {
	.livingstone-to-top,
	.livingstone-reveal,
	.livingstone-hover-lift,
	.livingstone-hover-zoom img {
		transition: none;
	}
	.livingstone-reveal {
		opacity: 1;
		transform: none;
	}
}

/* --- Navigation variants --------------------------------------------------- */

/* Sticky header: add the class to the header group; JS adds .is-stuck on scroll. */
.livingstone-header-sticky {
	position: sticky;
	top: 0;
	z-index: 100;
	transition: box-shadow 0.2s ease, background-color 0.2s ease;
}
.livingstone-header-sticky.is-stuck {
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

/* Transparent header: sits over a full-height hero, turns solid on scroll. */
.livingstone-header-transparent {
	position: absolute;
	inset: 0 0 auto 0;
	z-index: 100;
	background-color: transparent !important;
	transition: background-color 0.25s ease, box-shadow 0.25s ease;
}
.livingstone-header-transparent .wp-block-site-title a,
.livingstone-header-transparent .wp-block-navigation,
.livingstone-header-transparent .wp-block-site-title {
	color: var(--wp--preset--color--base, #f5f6f0);
}
.livingstone-header-transparent.is-stuck {
	position: fixed;
	inset: 0 0 auto 0;
	background-color: var(--wp--preset--color--surface, #fff) !important;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.livingstone-header-transparent.is-stuck .wp-block-site-title a,
.livingstone-header-transparent.is-stuck .wp-block-navigation,
.livingstone-header-transparent.is-stuck .wp-block-site-title {
	color: var(--wp--preset--color--contrast, #212529);
}

/* Mega menu: add class "livingstone-mega" to a Navigation block to widen its
   submenus into a multi-column panel. */
.livingstone-mega .wp-block-navigation__submenu-container {
	min-width: min(92vw, 760px);
	padding: var(--wp--preset--spacing--40, 1.5rem);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 0.25rem 2rem;
	box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.12);
}

/* Vertical / sidebar navigation helper. */
.livingstone-nav-vertical .wp-block-navigation__container {
	flex-direction: column;
	align-items: flex-start;
	gap: 0.25rem;
}

/* --- Pattern helpers ------------------------------------------------------- */

/* Timeline. */
.livingstone-timeline {
	border-left: 2px solid var(--wp--preset--color--primary, #733b2f);
	margin-left: 0.5rem;
	padding-left: 1.75rem;
}
.livingstone-timeline-item {
	position: relative;
}
.livingstone-timeline-item::before {
	content: "";
	position: absolute;
	left: -2rem;
	top: 1.9rem;
	width: 0.7rem;
	height: 0.7rem;
	border-radius: 50%;
	background-color: var(--wp--preset--color--primary, #733b2f);
}

/* Skill / progress bars. */
.livingstone-skill {
	height: 0.6rem;
	background-color: var(--wp--preset--color--light, #f2f2f2);
	overflow: hidden;
}
.livingstone-skill-fill {
	height: 0.6rem;
	min-height: 0.6rem;
}
.livingstone-skill-fill.is-25 { width: 25%; }
.livingstone-skill-fill.is-50 { width: 50%; }
.livingstone-skill-fill.is-60 { width: 60%; }
.livingstone-skill-fill.is-75 { width: 75%; }
.livingstone-skill-fill.is-90 { width: 90%; }
.livingstone-skill-fill.is-100 { width: 100%; }

/* Scroll-snap carousel. */
.livingstone-carousel {
	display: flex;
	flex-wrap: nowrap;
	gap: 1.5rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-bottom: 1rem;
	-webkit-overflow-scrolling: touch;
}
.livingstone-carousel-item {
	scroll-snap-align: start;
	flex: 0 0 min(82%, 340px);
}

/* --- Tabs block (livingstone/tabs) ----------------------------------------- */
.livingstone-tabs__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	border-bottom: 2px solid var(--wp--preset--color--light, #f2f2f2);
	margin-bottom: 1.5rem;
}
.livingstone-tabs__tab {
	border: 0;
	border-bottom: 2px solid transparent;
	margin-bottom: -2px;
	padding: 0.6rem 1rem;
	background: transparent;
	color: inherit;
	font: inherit;
	cursor: pointer;
}
.livingstone-tabs__tab:hover {
	color: var(--wp--preset--color--primary, #733b2f);
}
.livingstone-tabs__tab.is-active {
	border-bottom-color: var(--wp--preset--color--primary, #733b2f);
	font-weight: 600;
}
/* Only hide inactive panels once JS has enhanced the block. */
.livingstone-tabs.is-enhanced .livingstone-tabs__panel:not(.is-active) {
	display: none;
}
/* Editor: separate tab titles for clarity. */
.livingstone-tab__title-edit {
	display: inline-block;
	font-weight: 600;
	margin-bottom: 0.5rem;
}