/*
Theme Name:   Katholische Kirche Prignitz
Theme URI:    https://katholische-kirche-prignitz.de
Description:  Child theme for Ollie. Carries the brand styling for the Pastoraler Raum Prignitz.
Author:       Agentur Allison
Author URI:   https://agentur-allison.com
Template:     ollie
Version:      1.4.4
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Tags:         full-site-editing, block-styles, style-variations, translation-ready, custom-logo, custom-menu
Text Domain:  ollie-child
*/

/* No underline on the active menu item or dropdown-parent hover (mirrors Ollie's specificity; loads after Ollie). */
.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container .current-menu-item > a,
.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container .has-child button:hover {
	text-decoration: none;
}

/* Keyboard-only two-tone focus ring; stays visible on light/dark sections and in forced-colours mode. */
.wp-block-button__link:focus-visible {
	outline: 2px solid transparent;
	outline-offset: 2px;
	box-shadow: 0 0 0 2px var(--wp--preset--color--base), 0 0 0 4px var(--wp--preset--color--main);
}

/* Outline button ("Kontur"): green border/text, darker-green transparent ghost on hover/focus. */
.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color) {
	color: var(--wp--preset--color--primary-alt);
	border-color: var(--wp--preset--color--primary-alt);
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-outline > .wp-block-button__link:focus {
	background-color: transparent;
	color: var(--wp--custom--color--button-hover);
	border-color: var(--wp--custom--color--button-hover);
}

/* Captions: left-aligned, ~12px, small top margin (overrides Ollie's centred figcaption). */
div[class*="wp-block-"] figcaption {
	margin-top: 2px;
	font-size: 0.75rem;
	text-align: left;
}

/* Dropdown item spacing: ~12px vertical link padding for a roomier gap between items, horizontal kept at spacing--medium. */
.wp-block-navigation__responsive-container:not(.is-menu-open) :where(.wp-block-navigation__submenu-container) a,
.wp-block-navigation__responsive-container:not(.is-menu-open) :where(.wp-block-navigation__submenu-container) .wp-block-navigation-submenu__toggle {
	padding: 0.75rem var(--wp--preset--spacing--medium) !important;
}

/* Inset pale-gold hairline between dropdown items (gradient so it can inset; not above first / below last). */
.wp-block-navigation__responsive-container:not(.is-menu-open) :where(.wp-block-navigation__submenu-container) .wp-block-navigation-item + .wp-block-navigation-item {
	background-image: linear-gradient(var(--wp--preset--color--gold-pale), var(--wp--preset--color--gold-pale));
	background-repeat: no-repeat;
	background-position: top center;
	background-size: calc(100% - 2 * var(--wp--preset--spacing--medium)) 1px;
}

/* Sticky nav: display:contents on the header lets .site-nav pin page-wide while the logo scrolls; top clears the admin bar. */
.site-header:has(.site-nav) {
	display: contents;
}
.site-nav {
	position: sticky;
	top: calc(0px + var(--wp-admin--admin-bar--height, 0px));
	z-index: 100;
}

/* Carousel Block as flex item (e.g. inside a Row group): the browser default min-width:auto stops the
   block shrinking below its content width, so it spans all slides side by side and forces horizontal
   page scroll. min-width:0 lets it shrink to the container; Swiper then sizes the slides correctly. */
.wp-block-cb-carousel-v2 {
	min-width: 0;
}

/* CLS guard: before Swiper initialises, slides sit at their natural image width, making the
   carousel ~490px taller than its final height; on init everything below jumps up (CLS 0.47).
   Pre-sizing the slides to the block's configured layout (4 per view / 20px gap from 768px,
   1 per view below) makes the first paint match the initialised state. Must be kept in sync
   with the carousel block settings on the homepage. */
.cb-carousel-block .swiper:not(.swiper-initialized) .swiper-slide {
	width: calc((100% - 60px) / 4);
	margin-right: 20px;
}
@media (max-width: 767px) {
	.cb-carousel-block .swiper:not(.swiper-initialized) .swiper-slide {
		width: 100%;
	}
}

/* The Carousel Block reserves 4x the pagination bullet size (64px) below the slides for the
   bullets; not needed here. Same selector as the plugin rule, wins by load order. */
.wp-block-cb-carousel-v2[data-cb-pagination="true"] .swiper-horizontal {
	margin-bottom: 0;
}

/* Gottesdienstwoche pattern (gd-* classes): desktop lays each day out as a grid with the day cell
   left and the services right; below 600px the day cell stacks above. Service rows are 3-column
   grids so times, type and place align across days. Service rows whose cells are all empty are
   hidden on the front end only: the editor loads this file too (Ollie's add_editor_style picks up
   parent and child style.css), but its CSS transform drops the :has() rules, so empty rows stay
   visible and editable in the canvas. */
/* Plain selectors on purpose: the editor's CSS transform drops :where()/:has() rules,
   and this reset must apply inside the editor canvas too. */
.gd-week p,
.gd-week .wp-block-group {
	margin-block-start: 0;
}
.gd-week .gd-range {
	margin-top: 0.25em;
	font-size: 0.9375rem;
	color: var(--wp--preset--color--secondary);
}
.gd-day-row {
	display: grid;
	grid-template-columns: 11em 1fr;
	column-gap: var(--wp--preset--spacing--medium);
	padding: 0.75rem 0.5rem;
	border-top: 1px solid var(--wp--preset--color--border-light);
}
.gd-days > .wp-block-group:first-child {
	border-top: none;
}
.gd-day {
	font-weight: 600;
}
.is-sunday .gd-day {
	font-weight: 700;
}
.gd-feast {
	font-size: 0.8125rem;
	color: var(--wp--preset--color--secondary);
}
.gd-service {
	display: grid;
	grid-template-columns: 6em 10em 1fr;
	column-gap: 1.5ch;
}
.gd-service:not(:has(p:not(:empty))) {
	display: none;
}
.gd-time {
	text-align: right;
	font-variant-numeric: tabular-nums;
}
.gd-place {
	font-weight: 500;
}
.gd-event {
	display: grid;
	grid-template-columns: 6.5em 1fr;
	column-gap: 1.5ch;
	margin-bottom: 0.75rem;
}
.gd-event-date {
	font-weight: 600;
}
.gd-week .gd-events {
	margin-block-start: var(--wp--preset--spacing--large);
}
.gd-event:not(:has(p:not(:empty))) {
	display: none;
}
.gd-events:not(:has(.gd-event p:not(:empty))) {
	display: none;
}
@media (max-width: 599px) {
	.gd-day-row {
		grid-template-columns: 1fr;
		row-gap: 0.25rem;
	}
	.gd-daycell {
		display: flex;
		align-items: baseline;
		gap: 0.75ch;
	}
	.gd-service {
		grid-template-columns: 5em 8em 1fr;
		column-gap: 1ch;
	}
}

/* Utility: add "no-underline" to any block to remove link underlines in every state (buttons unaffected). */
.no-underline,
.no-underline a,
.no-underline a:hover,
.no-underline a:focus {
	text-decoration: none;
}