/*
Theme Name: Rota Akaryakıt
Theme URI: https://www.wpdenizi.com/rota-akaryakit
Author: WP Denizi
Author URI: https://www.wpdenizi.com
Description: Block-based (FSE) theme for fuel stations and dealers: today's fuel prices at a glance with the change since yesterday and a quick price table, fuel offers with the pump price crossed out, ready Instagram posts and stories of the prices and offers with Feed Deck, station services, partner brands, fleet and job applications, gallery and opening hours with "open now" (24/7 too). Six station concepts with their own colours, fonts and home layouts; locally hosted fonts.
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.0
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: rota-akaryakit
Update URI: https://www.wpdenizi.com/rota-akaryakit
Domain Path: /languages
Tags: full-site-editing, block-patterns, block-styles, style-variations, wide-blocks, editor-style, custom-colors, custom-menu, featured-images, translation-ready, accessibility-ready, blog
*/

/*
 * Styles live in theme.json. This file holds the rules theme.json cannot
 * express: the header, the six home layouts and the concept details.
 */

.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;
}

:where(.wp-site-blocks) :where(h1, h2, .rka-h, .rka-cat-title) {
	text-transform: var(--wp--custom--heading--transform, none);
	letter-spacing: var(--wp--custom--heading--tracking, normal);
}

/* 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);
}

/* Buttons */
.wp-block-button__link {
	border-radius: var(--wp--custom--btn--radius, 8px);
}
.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	border: 1px solid currentColor;
	color: inherit;
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: color-mix(in srgb, currentColor 10%, transparent);
}
.wp-block-button.is-style-rota-accent > .wp-block-button__link {
	background: var(--wp--preset--color--accent);
	border: 1px solid var(--wp--preset--color--accent);
	color: var(--wp--preset--color--on-accent);
}
.wp-block-button.is-style-rota-accent > .wp-block-button__link:hover {
	filter: brightness(0.92);
}
body .rak-btn,
body .rka-add,
body .rka-tabs a,
body .rka-chip-link {
	border-radius: var(--wp--custom--btn--radius, 8px);
}

/* 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-strong);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.wp-block-details summary {
	cursor: pointer;
	font-weight: 600;
}

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

.wp-block-post-content > :is(h2, h3):not(:first-child) {
	margin-block-start: var(--wp--preset--spacing--60);
}

/* Links inside text are underlined (WCAG: not by colour alone). */
.rota-check a,
.rak-consent a,
.rota-notice a,
:where(.wp-block-post-content, .rak-about-text, .rka-party-note) :where(p, li) a {
	text-decoration: underline;
	text-underline-offset: 2px;
}
:where(.wp-block-post-content) :where(.rak-more, .rak-btn, .rka-chip-link, .rka-event-body h3 a, .rka-tabs a) {
	text-decoration: none;
}

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

/* ==========================================================================
   Header
   ========================================================================== */
.rka-header {
	position: relative;
	z-index: 20;
	border-bottom: 1px solid var(--wp--preset--color--line);
}
.rka-header.is-dark {
	border-bottom-color: rgba(255, 255, 255, 0.12);
}
.rka-brand {
	min-width: 0;
	max-width: 340px;
}
.rka-brand .wp-block-site-title {
	line-height: 1.05;
	font-size: var(--wp--preset--font-size--x-large);
	font-family: var(--wp--preset--font-family--display);
}
.rka-brand .wp-block-site-title a {
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
}
.rka-header.is-dark .wp-block-site-title a,
.rka-header.is-dark .wp-block-navigation a {
	color: var(--wp--preset--color--on-dark);
}
.rka-header .wp-block-navigation a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}
.rka-header .wp-block-navigation a:hover,
.rka-header .wp-block-navigation .current-menu-item > a {
	text-decoration: underline;
	text-underline-offset: 6px;
	text-decoration-thickness: 2px;
}
.rka-header.is-dark .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--dark);
	color: var(--wp--preset--color--on-dark);
}
.rka-header .wp-block-navigation__responsive-container-open,
.rka-header .wp-block-navigation__responsive-container-close {
	min-width: 44px;
	min-height: 44px;
	justify-content: center;
}
.rka-head-btns {
	gap: 8px;
}
.rka-head-btns .wp-block-button__link {
	white-space: nowrap;
	padding: 0.6rem 1.1rem;
}
.rka-topbar .rak-info ul {
	gap: 6px 22px;
}
.rka-topbar .rak-open {
	background: rgba(255, 255, 255, 0.14);
	color: inherit;
}
.rka-header-row.is-centered .rka-brand {
	flex-direction: column;
	max-width: none;
	text-align: center;
}
.rka-header-row.is-centered .rka-navwrap {
	flex-wrap: wrap !important;
	justify-content: center;
}

/* ==========================================================================
   Home: welcome
   ========================================================================== */
.rka-hero {
	position: relative;
	overflow: hidden;
	padding-top: var(--wp--preset--spacing--80);
	padding-bottom: var(--wp--preset--spacing--80);
}
.rka-hero > * {
	position: relative;
	z-index: 1;
}
.rka-kicker {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
}
.rka-hero-title {
	font-size: clamp(2.3rem, 1.4rem + 3.4vw, 4.4rem);
	line-height: 1.04;
	margin: 0;
}
.rka-hero-text {
	max-width: 38ch;
	color: var(--wp--preset--color--contrast-2);
	margin: 0;
}
.rka-hero-img {
	margin: 0;
}
.rka-hero-img img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}
.rka-hero-buttons {
	margin-top: var(--wp--preset--spacing--30);
}
.rka-hero-buttons .wp-block-button__link {
	padding: 0.85rem 1.6rem;
}
.rka-hero-open {
	margin-top: var(--wp--preset--spacing--20);
}

/* Restaurant & grill: dark split, copper frame */
.rka-hero.is-dark-split {
	background: radial-gradient(circle at 85% 20%, rgba(164, 86, 31, 0.28), transparent 45%), var(--wp--preset--color--dark) !important;
}
.rka-hero.is-dark-split .rka-kicker {
	color: #e3a46d;
}
.rka-hero.is-dark-split .rka-kicker::before {
	content: "";
	display: inline-block;
	width: 42px;
	height: 1px;
	margin-right: 12px;
	vertical-align: middle;
	background: currentColor;
}
.rka-hero.is-dark-split .rka-hero-text {
	color: var(--wp--preset--color--on-dark-2);
}
.rka-hero-img.is-framed {
	position: relative;
	padding: 0 18px 18px 0;
}
.rka-hero-img.is-framed::before {
	content: "";
	position: absolute;
	inset: 18px 0 0 18px;
	border: 1px solid #c98a55;
}
.rka-hero-img.is-framed img {
	position: relative;
	aspect-ratio: 4 / 5;
}

/* Daytime café: centred text, wide round picture, info strip */
.rka-hero.is-stack {
	text-align: center;
	padding-bottom: var(--wp--preset--spacing--70);
	background: radial-gradient(circle at 10% 15%, var(--wp--preset--color--accent-soft) 0 140px, transparent 141px), radial-gradient(circle at 92% 30%, var(--wp--preset--color--primary-soft) 0 200px, transparent 201px), var(--wp--preset--color--base-2) !important;
}
.rka-hero.is-stack .rka-hero-text {
	margin-inline: auto;
}
.rka-hero.is-stack .rka-hero-center {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
}
.rka-hero-img.is-wide-round {
	max-width: var(--wp--style--global--wide-size);
	margin: var(--wp--preset--spacing--70) auto 0 !important;
}
.rka-hero-img.is-wide-round img {
	aspect-ratio: 21 / 9;
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: var(--wp--preset--shadow--float);
}
.rka-hero-info {
	margin: calc(-1 * var(--wp--preset--spacing--60)) auto 0 !important;
	position: relative;
	z-index: 2;
	width: fit-content;
	max-width: calc(100% - 32px);
	padding: 14px 24px;
	border-radius: 999px;
	background: var(--wp--preset--color--base);
	box-shadow: var(--wp--preset--shadow--card);
}
.rka-hero-info ul {
	justify-content: center;
}

/* Third-wave coffee: big type, square picture with an offset block */
.rka-hero.is-type .rka-hero-title {
	font-size: clamp(2.6rem, 1.2rem + 5vw, 5.6rem);
	line-height: 0.95;
}
.rka-hero.is-type {
	border-bottom: 2px solid var(--wp--preset--color--contrast);
}
.rka-hero-img.is-offset {
	position: relative;
}
.rka-hero-img.is-offset img {
	position: relative;
	z-index: 1;
	aspect-ratio: 1;
	border: 2px solid var(--wp--preset--color--contrast);
}
.rka-hero-img.is-offset::after {
	content: "";
	position: absolute;
	inset: 18px -18px -18px 18px;
	background: var(--wp--preset--color--accent);
}

/* Patisserie: arched picture, handwritten name */
.rka-hero.is-arch-hero {
	background: radial-gradient(var(--wp--preset--color--base-3) 1.5px, transparent 1.6px) 0 0 / 22px 22px, var(--wp--preset--color--base-2) !important;
}
.rka-script {
	margin: 0;
	font-family: var(--wp--preset--font-family--script, var(--wp--preset--font-family--display));
	font-size: clamp(1.8rem, 1.2rem + 1.6vw, 2.6rem);
	line-height: 1;
	color: var(--wp--preset--color--primary);
}
.rka-hero-img.is-arch img {
	aspect-ratio: 4 / 5;
	border-radius: 999px 999px var(--wp--custom--radius--lg) var(--wp--custom--radius--lg);
	border: 8px solid var(--wp--preset--color--base);
	box-shadow: var(--wp--preset--shadow--float);
}

/* Burger: red poster, tilted picture with a sticker */
.rka-hero.is-poster {
	background: repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0.05) 0 14px, transparent 14px 28px), var(--wp--preset--color--primary) !important;
}
.rka-hero.is-poster .rka-kicker,
.rka-hero.is-poster .rka-hero-text {
	color: var(--wp--preset--color--on-primary);
}
.rka-hero.is-poster .rka-hero-title {
	font-size: clamp(3rem, 1.6rem + 6vw, 7rem);
	line-height: 0.9;
	color: var(--wp--preset--color--on-primary);
}
.rka-hero.is-poster .is-style-outline .wp-block-button__link {
	color: var(--wp--preset--color--on-primary);
}
.rka-hero-img.is-tilt {
	position: relative;
}
.rka-hero-img.is-tilt img {
	transform: rotate(3deg);
	border: 6px solid var(--wp--preset--color--contrast);
	border-radius: var(--wp--custom--radius--md);
	box-shadow: 14px 14px 0 var(--wp--preset--color--contrast);
}
.rka-hero.is-poster .rak-open {
	background: var(--wp--preset--color--contrast);
	color: #fff;
}

/* Seafood: cover picture */
.rka-hero.is-cover {
	padding-top: var(--wp--preset--spacing--80);
	padding-bottom: calc(var(--wp--preset--spacing--80) + 40px);
}
.rka-hero.is-cover .rka-kicker {
	color: #f2b8a5;
}
.rka-hero.is-cover .rka-hero-title,
.rka-hero.is-cover .rka-hero-text {
	color: #fff;
}
.rka-hero.is-cover .is-style-outline .wp-block-button__link {
	color: #fff;
}
.rka-hero.is-cover::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 40px;
	z-index: 2;
	background: var(--wp--preset--color--base-2);
	-webkit-mask: radial-gradient(28px at 50% 0, transparent 98%, #000) 0 0 / 56px 40px repeat-x;
	mask: radial-gradient(28px at 50% 0, transparent 98%, #000) 0 0 / 56px 40px repeat-x;
}
.rka-hero.is-cover .rak-open.is-shut {
	background: rgba(255, 255, 255, 0.9);
}

/* ==========================================================================
   Home: sections
   ========================================================================== */
.rka-home-body > .rka-band:first-child {
	margin-top: calc(-1 * var(--wp--preset--spacing--70));
}
.rka-band {
	padding-top: var(--wp--preset--spacing--80);
	padding-bottom: var(--wp--preset--spacing--80);
}
.rka-band.is-dark .rka-h,
.rka-band.is-dark .rak-more {
	color: var(--wp--preset--color--on-dark);
}
.rka-band.is-dark .rka-event {
	background: rgba(255, 255, 255, 0.04);
	border-color: rgba(255, 255, 255, 0.14);
	color: var(--wp--preset--color--on-dark);
}
.rka-band.is-dark .rka-event-body h3 a,
.rka-band.is-dark .rka-event-price {
	color: var(--wp--preset--color--on-dark);
}
.rka-band.is-dark .rka-event-when,
.rka-band.is-dark .rka-event-type {
	color: var(--wp--preset--color--on-dark-2);
}
.rka-band.is-dark .rka-event-date {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--on-accent);
}
.rka-is-info.is-line {
	padding: 18px 0;
	border-top: 1px solid var(--wp--preset--color--line);
	border-bottom: 1px solid var(--wp--preset--color--line);
}
.rka-is-info.is-line .rak-info ul {
	justify-content: center;
}
.rka-narrow {
	max-width: 860px;
}
.rka-visit .rota-map,
.rka-visit iframe {
	border-radius: var(--wp--custom--radius--lg);
}

/* Lists of posts */
.rka-loop .rka-card {
	height: 100%;
}
.rka-loop .wp-block-post-title a {
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
}
.rka-loop .wp-block-post-title a:hover {
	color: var(--wp--preset--color--primary);
}
.rka-card-cat a {
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
}

/* Pages */
.rka-page-band .wp-block-post-title {
	margin: 0;
}
.rka-menu-page .rka-tabs {
	--rka-sticky: 0px;
}
.rka-qr-head {
	gap: 12px;
}
.rka-qr-head .wp-block-site-title a {
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
}
.rka-qr-head .rak-open-wrap {
	margin: 0;
}
.rka-qr-main .rka-menu {
	--rka-bg: var(--wp--preset--color--base-2);
}
.rka-event-single .rka-lead p {
	color: var(--wp--preset--color--contrast-2);
}
.rka-event-box .rota-details {
	margin: 0;
}

/* Footer */
.rka-footer .wp-block-site-title a,
.rka-footer a {
	text-decoration: none;
}
.rka-footer a:hover,
.rka-footer a:focus-visible {
	text-decoration: underline;
}
.rka-footer .rak-hours.is-dark {
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--on-dark);
	--rc-line: rgba(255, 255, 255, 0.16);
	--rc-muted: var(--wp--preset--color--on-dark-2);
}
.rka-footer .rak-hours.is-dark .rka-h {
	font-size: var(--wp--preset--font-size--large);
	color: var(--wp--preset--color--on-dark);
}
.rka-footer .rak-hours.is-dark .rak-btn-ghost {
	color: var(--wp--preset--color--on-dark);
	border-color: rgba(255, 255, 255, 0.4);
}
.rka-footer .rka-price-info.is-dark .rka-price-notes {
	background: rgba(255, 255, 255, 0.06);
	color: var(--wp--preset--color--on-dark-2);
}
.rka-footer .rka-price-info.is-dark .rka-price-notes .is-strong {
	color: var(--wp--preset--color--on-dark);
}
.rka-footer .rka-price-info.is-dark .rka-price-notes li::before {
	background: var(--wp--preset--color--accent);
}
.rka-footer .rak-open.is-open {
	background: rgba(46, 160, 90, 0.2);
	color: #bdf0cf;
}
.rka-footer .rak-open.is-shut {
	background: rgba(255, 120, 100, 0.18);
	color: #ffd2c9;
}

/* ==========================================================================
   Concepts: rka-c-<concept> on <body>
   ========================================================================== */

/* Town station */
.rka-c-istasyon .rak-h { font-weight: 800; letter-spacing: -0.02em; }
.rka-c-istasyon .rak-offer, .rka-c-istasyon .rak-service { box-shadow: none; }

/* Highway service area */
.rka-c-otoyol .rak-h, .rka-c-otoyol .rka-h { font-size: clamp(2.4rem, 5vw, 3.6rem); line-height: 0.95; text-transform: uppercase; font-weight: 400; }
.rka-c-otoyol .rak-offer-body h3, .rka-c-otoyol .rak-service h3 { font-family: var(--wp--preset--font-family--display); font-weight: 400; font-size: 1.45rem; letter-spacing: 0.02em; text-transform: uppercase; line-height: 1; }
.rka-c-otoyol .rak-price-value strong { font-weight: 400; letter-spacing: 0.02em; }
.rka-c-otoyol .rak-prices.is-strip { border-top: 4px solid var(--wp--preset--color--accent); }

/* Autogas & LPG */
.rka-c-otogaz .rak-offer, .rka-c-otogaz .rak-service, .rka-c-otogaz .rak-price { border-color: transparent; box-shadow: 0 12px 30px -18px rgba(15, 107, 79, 0.45); }
.rka-c-otogaz .rak-fuel-lpg { outline: 2px solid var(--wp--preset--color--accent); outline-offset: -2px; }

/* Fleet & commercial fuel */
.rka-c-filo .rak-offer, .rka-c-filo .rak-service, .rka-c-filo .rak-hours, .rka-c-filo .rak-apply { border: 1px solid var(--wp--preset--color--contrast-3); box-shadow: none; }
.rka-c-filo .rak-h { font-weight: 600; letter-spacing: -0.01em; }
.rka-c-filo .rak-fleet { background: var(--wp--preset--color--dark); color: var(--wp--preset--color--on-dark); }
.rka-c-filo .rak-fleet-text > p, .rka-c-filo .rak-perks .rak-ico { color: inherit; opacity: 0.9; }
.rka-c-filo .rak-fleet .rak-btn { background: var(--wp--preset--color--accent); border-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--on-accent); }

/* Station with market & café */
.rka-c-market .rak-offer, .rka-c-market .rak-service { border-color: transparent; box-shadow: 0 10px 30px -18px rgba(14, 94, 99, 0.35); }
.rka-c-market .rka-kicker { display: inline-block; padding: 6px 14px; border-radius: 999px; background: var(--wp--preset--color--accent); color: var(--wp--preset--color--on-accent); letter-spacing: 0.06em; }
.rka-c-market .rka-kicker::before { display: none; }

/* Fuel & EV charging */
.rka-c-sarj .rak-h { font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1; }
.rka-c-sarj .rak-offer, .rka-c-sarj .rak-service, .rka-c-sarj .rak-hours { border: 2px solid var(--wp--preset--color--contrast); box-shadow: none; }
.rka-c-sarj .rak-service:hover, .rka-c-sarj .rak-offer:hover { box-shadow: 6px 6px 0 var(--wp--preset--color--accent); }
.rka-c-sarj .rak-prices.is-strip { box-shadow: 0 0 0 1px var(--wp--preset--color--accent), 0 20px 50px -30px rgba(0, 0, 0, 0.55); }

/* ==========================================================================
   Small screens
   ========================================================================== */
@media (max-width: 1000px) {
	.rka-head-btns .rka-prices-btn {
		display: none;
	}
}
@media (max-width: 781px) {
	.rka-brand .wp-block-site-title {
		font-size: var(--wp--preset--font-size--large);
	}
	.rka-hero {
		padding-top: var(--wp--preset--spacing--70);
		padding-bottom: var(--wp--preset--spacing--70);
	}
	.rka-hero-img.is-framed {
		padding: 0 12px 12px 0;
	}
	.rka-hero-img.is-framed img {
		aspect-ratio: 4 / 3;
	}
	.rka-hero-img.is-offset::after {
		inset: 10px -10px -10px 10px;
	}
	.rka-hero-img.is-tilt img {
		box-shadow: 8px 8px 0 var(--wp--preset--color--contrast);
	}
	.rka-hero-img.is-arch img {
		aspect-ratio: 1;
	}
	.rka-hero-info {
		border-radius: var(--wp--custom--radius--lg);
	}
	.rka-topbar .rak-info li:not(.rak-info-open):not(:has(a[href^="tel"])) {
		display: none;
	}
	.rka-head-btns .wp-block-button__link {
		padding: 0.55rem 0.9rem;
	}
}
@media (max-width: 480px) {
	.rka-brand .wp-block-site-title {
		font-size: var(--wp--preset--font-size--medium);
	}
	.rka-header .rka-brand {
		max-width: 52vw;
	}
}

/* Text colours of the welcome on dark and coloured backgrounds */
.rka-hero.has-text-color :is(h1, h2, .rka-hero-title) {
	color: inherit;
}

/* ---------- Today's prices right under the welcome ---------- */
.rka-prices-wrap { position: relative; z-index: 3; margin-top: calc(-1 * clamp(2.5rem, 5vw, 4rem)) !important; padding-left: var(--wp--style--root--padding-left, 20px); padding-right: var(--wp--style--root--padding-right, 20px); }
.rka-prices-wrap > .rak-prices { max-width: var(--wp--style--global--wide-size, 1280px); margin-left: auto !important; margin-right: auto !important; }
.rka-prices-wrap:not(:has(.rak-prices)) { display: none; }
.rka-hero:has(+ .rka-prices-wrap .rak-prices) { padding-bottom: calc(clamp(4rem, 8vw, 7rem) + 2rem) !important; }
.rka-hero .rak-open.is-open, .rka-hero .rak-open.is-open span { color: #1d5e2c !important; }
.rka-hero .rak-open.is-shut, .rka-hero .rak-open.is-shut span { color: #8a1c1c !important; }