/*
Theme Name: Rota Rehber
Theme URI: https://example.com/rota-rehber
Author: WP Denizi
Author URI: https://example.com
Description: Block-based (FSE) city guide theme: business directory with "open now", duty pharmacies, prayer times, weather, bus times, listings, events and ad places, with an app feel on phones (add to home screen, bottom bar, offline pages). Seven guide concepts; locally hosted fonts.
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.0
Version: 0.1.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: rota-rehber
Update URI: https://www.wpdenizi.com/rota-rehber
Domain Path: /languages
Tags: blog, news, full-site-editing, block-patterns, block-styles, style-variations, wide-blocks, editor-style, custom-colors, custom-menu, featured-images, translation-ready, accessibility-ready, one-column
*/

/*
 * Styles live in theme.json. This file only holds the few rules
 * theme.json cannot express.
 */

.wp-site-blocks > * + * {
	margin-block-start: 0;
}

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

.skip-link.screen-reader-text:focus {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	z-index: 100000;
}

/* Card: is-style-rota-card block style (functions.php) */
.is-style-rota-card {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: var(--wp--preset--shadow--card);
}

/* Secondary button: is-style-outline */
.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	border: 1px solid var(--wp--preset--color--line-strong);
	color: var(--wp--preset--color--contrast);
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--contrast);
}

/* Accent button: for the single main call on a page */
.wp-block-button.is-style-rota-accent > .wp-block-button__link {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--on-accent);
}

/* Badge: is-style-rota-badge (paragraph) */
.is-style-rota-badge {
	display: inline-block;
	padding: 0.25rem 0.625rem;
	border-radius: var(--wp--custom--radius--sm);
	background: var(--wp--preset--color--primary-soft);
	color: var(--wp--preset--color--primary);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

/* Icon box */
.rota-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--primary-soft);
	color: var(--wp--preset--color--primary);
}
.rota-icon svg {
	width: 24px;
	height: 24px;
}

/* Aligned numbers */
.rota-numeric {
	font-variant-numeric: tabular-nums;
}

/* FAQ summary row */
.wp-block-details summary {
	cursor: pointer;
	font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

.rota-plain-list {
	list-style: none;
}

/* Plain link lists (footer services): no underline until hover. */
.rota-plain-list a {
	text-decoration: none;
}

.rota-plain-list a:hover,
.rota-plain-list a:focus-visible {
	text-decoration: underline;
}

/* Breathing room above headings inside page and post content. */
.wp-block-post-content > :is(h2, h3):not(:first-child) {
	margin-block-start: var(--wp--preset--spacing--60);
}

/* WooCommerce buttons outside blocks (My account, notices). */
.woocommerce a.button,
.woocommerce button.button {
	display: inline-block;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	border: 0;
	border-radius: 8px;
	padding: 10px 18px;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.4;
	text-decoration: none;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

.woocommerce a.button.alt {
	background: var(--wp--preset--color--accent, #d7262f);
}

/* Guide: the hero search sits over the picture. */
.rr-hero {
	position: relative;
	overflow: hidden;
}

.rr-hero .wp-block-cover__inner-container {
	max-width: 860px;
	margin-inline: auto;
}

.rr-hero .wp-block-cover__inner-container > * + * {
	margin-block-start: var(--wp--preset--spacing--40);
}

.rr-hero h1 {
	text-wrap: balance;
}

/* Business, listing and event pages: content and details side by side. */
.rr-single-side {
	position: sticky;
	top: 24px;
}

@media (max-width: 781px) {
	.rr-single-side {
		position: static;
	}
	.rr-hide-mobile {
		display: none !important;
	}
}

/* Section heads with a "see all" link. */
.rr-sechead {
	gap: var(--wp--preset--spacing--30);
}

.rr-sechead a {
	font-weight: 600;
	text-decoration: none;
}

.rr-sechead a:hover {
	text-decoration: underline;
}

@media (max-width: 781px) {
	.rr-single .rr-single-col-side {
		order: -1;
	}
}

/* Tablet and small laptop: the menu always takes its own row under the logo
   and the buttons. Otherwise whether it fits on the first row depends on the
   moment the web fonts arrive, and the page jumps while loading. */
@media (min-width: 600px) and (max-width: 1199px) {
	header .wp-block-group.alignwide:has(> .wp-block-navigation) {
		flex-wrap: wrap !important;
		row-gap: var(--wp--preset--spacing--30);
	}
	header .wp-block-group.alignwide > .wp-block-navigation {
		order: 3;
		flex-basis: 100%;
	}
}

/* Phone: logo, name and menu button stay on one row; the name gets a size that
   fits, so the menu button never drops to a second row. */
@media (max-width: 599px) {
	header .wp-block-group.alignwide:has(> .wp-block-navigation) {
		flex-wrap: nowrap !important;
		gap: 12px;
	}
	header .wp-block-group.alignwide:has(> .wp-block-navigation) > .wp-block-group:first-child {
		flex: 1 1 auto;
		min-width: 0;
	}
	header .wp-block-site-title {
		font-size: clamp(1rem, 4.4vw, 1.25rem) !important;
		line-height: 1.2;
	}
	header .wp-block-group.alignwide > .wp-block-navigation {
		flex: 0 0 auto;
	}
}