/*
Theme Name: Srilor
Theme URI: https://srilor.com
Author: Srilor
Description: The official Srilor block theme, built on the Srilor app version 2 design system: paper, tea-crate stencil place names, station-board facts, ticket-stub chips, rubber stamps and the Island Pass as a railway ticket. Every section is editable in the Site Editor. Pair with the Srilor Core plugin.
Version: 0.5.0
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 7.4
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: srilor
Tags: block-theme, full-site-editing, travel, custom-colors, editor-style
*/

/* =====================================================================
   0. Foundations: paper grain, selection, focus
   ===================================================================== */
:root {
	--srilor-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.09 0 0 0 0 0.12 0 0 0 0 0.1 0 0 0 0.07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	--srilor-grain-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	--srilor-ease: cubic-bezier(.2,.8,.2,1);
	--srilor-notch-bg: var(--wp--preset--color--paper);
}
body { background-image: var(--srilor-grain); -webkit-font-smoothing: antialiased; }
.has-tea-background-color, .has-ink-background-color { background-image: var(--srilor-grain-light); }
.has-card-background-color, .has-teal-tint-background-color, .has-cinnamon-tint-background-color { background-image: var(--srilor-grain); }
::selection { background: var(--wp--preset--color--teal); color: var(--wp--preset--color--ink); }
:focus-visible { outline: 2px solid var(--wp--preset--color--teal-deep); outline-offset: 2px; }

/* Dark surfaces (tea): readable defaults */
.has-tea-background-color, .has-ink-background-color { color: var(--wp--preset--color--card); }
.has-tea-background-color a:where(:not(.wp-element-button)), .has-ink-background-color a:where(:not(.wp-element-button)) { color: #9FE0CC; }
.has-tea-background-color { --srilor-notch-bg: var(--wp--preset--color--tea); }
.has-card-background-color { --srilor-notch-bg: var(--wp--preset--color--card); }
.has-teal-tint-background-color { --srilor-notch-bg: var(--wp--preset--color--teal-tint); }

/* Accent in headings: select words and press Ctrl/Cmd+I. On paper they print in deep teal, on tea in logo teal. */
:where(h1, h2, h3, .wp-block-heading, .wp-block-post-title) em { font-style: normal; color: var(--wp--preset--color--teal-deep); }
:where(.has-tea-background-color, .has-ink-background-color, .wp-block-cover) :where(h1, h2, h3, .wp-block-heading) em { color: var(--wp--preset--color--teal); }

/* =====================================================================
   1. Type helpers (block styles)
   ===================================================================== */
.is-style-eyebrow {
	font-size: 0.75rem !important;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-2);
}
:where(.has-tea-background-color, .wp-block-cover) .is-style-eyebrow { color: #BFD0C8; }
.is-style-lead { font-size: var(--wp--preset--font-size--large); line-height: 1.5; color: var(--wp--preset--color--ink-2); }
:where(.has-tea-background-color, .wp-block-cover) .is-style-lead { color: #D5E2DC; }
.is-style-board-value {
	font-family: var(--wp--preset--font-family--board);
	font-weight: 800;
	text-transform: uppercase;
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1;
}

/* The rubber stamp: a small tilted label. Pick the ink with the text colour. */
.is-style-stamp {
	display: inline-block;
	width: auto !important;
	border: 2px solid currentColor;
	border-radius: 3px;
	padding: 0.2rem 0.5rem 0.15rem;
	font-family: var(--wp--preset--font-family--board);
	font-weight: 800;
	font-size: 0.8125rem !important;
	letter-spacing: 0.14em;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--wp--preset--color--teal-deep);
	transform: rotate(-3deg);
	mix-blend-mode: multiply;
}
:where(.has-tea-background-color, .wp-block-cover) .is-style-stamp { mix-blend-mode: normal; color: var(--wp--preset--color--card); }
.is-style-stamp.has-text-color { color: inherit; }

/* =====================================================================
   2. Buttons: teal fill, tea outline, cinnamon for paying, ticket-stub chips
   ===================================================================== */
.wp-element-button, .wp-block-button__link { transition: background-color .2s, color .2s, transform .2s var(--srilor-ease); }
.wp-block-button__link:active { transform: translateY(1px); }
.wp-block-button.is-style-outline .wp-block-button__link { background: transparent; color: var(--wp--preset--color--tea); border: 1.5px solid currentColor; padding: calc(0.9rem - 1.5px) calc(1.4rem - 1.5px); }
.wp-block-button.is-style-outline .wp-block-button__link:hover { background: var(--wp--preset--color--tea); color: var(--wp--preset--color--card); }
:where(.has-tea-background-color, .wp-block-cover) .wp-block-button.is-style-outline .wp-block-button__link { color: var(--wp--preset--color--card); border-color: rgba(255,255,255,.6); }
:where(.has-tea-background-color, .wp-block-cover) .wp-block-button.is-style-outline .wp-block-button__link:hover { background: var(--wp--preset--color--card); color: var(--wp--preset--color--tea); }
.wp-block-button.is-style-tea .wp-block-button__link { background: var(--wp--preset--color--tea); color: var(--wp--preset--color--card); }
.wp-block-button.is-style-tea .wp-block-button__link:hover { background: var(--wp--preset--color--ink); }
.wp-block-button.is-style-accent .wp-block-button__link { background: var(--wp--preset--color--cinnamon); color: var(--wp--preset--color--card); }
.wp-block-button.is-style-accent .wp-block-button__link:hover { background: var(--wp--preset--color--cinnamon-ink); }
.wp-block-button.is-style-dashed .wp-block-button__link { background: transparent; color: var(--wp--preset--color--tea); border: 1.5px dashed currentColor; }
.wp-block-button.is-style-chip .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--ink);
	border: 1.5px solid currentColor;
	border-radius: 4px;
	padding: 0.5rem 0.85rem 0.45rem;
	font-family: var(--wp--preset--font-family--board);
	font-weight: 700;
	font-size: 0.875rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	line-height: 1;
}
.wp-block-button.is-style-chip .wp-block-button__link:hover,
.wp-block-button.is-style-chip.is-selected .wp-block-button__link { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--paper); border-color: var(--wp--preset--color--ink); }
:where(.has-tea-background-color, .wp-block-cover) .wp-block-button.is-style-chip .wp-block-button__link { color: var(--wp--preset--color--card); }
:where(.has-tea-background-color, .wp-block-cover) .wp-block-button.is-style-chip .wp-block-button__link:hover { background: var(--wp--preset--color--card); color: var(--wp--preset--color--tea); border-color: var(--wp--preset--color--card); }

/* =====================================================================
   3. Surfaces: card, printed strip, the railway ticket
   ===================================================================== */
.is-style-card { background-color: var(--wp--preset--color--card); border: 1px solid var(--wp--preset--color--line); border-radius: 10px; padding: clamp(1.25rem, 2.5vw, 1.75rem); }

/* Printed strip (the short answer): a coloured rule on the left, like the app's Notice. */
.is-style-short-answer {
	position: relative;
	background-color: var(--wp--preset--color--teal-tint);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 4px;
	padding: 1.25rem 1.5rem 1.25rem 1.75rem;
}
.is-style-short-answer::before { content: ""; position: absolute; left: 0.6rem; top: 0.9rem; bottom: 0.9rem; width: 3px; border-radius: 2px; background: var(--wp--preset--color--teal); }
.is-style-short-answer > :first-child { margin-top: 0; }

/* The cardboard railway ticket. Columns inside: the first column is the stub (keep it near 30%). */
.is-style-ticket {
	--stub: 30%;
	position: relative;
	background-color: var(--wp--preset--color--card);
	background-image: var(--srilor-grain);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 4px;
	box-shadow: 0 1px 0 rgba(22,32,27,.05), 0 18px 40px rgba(15,61,48,.12);
}
.is-style-ticket::before, .is-style-ticket::after {
	content: ""; position: absolute; left: calc(var(--stub) - 11px); width: 22px; height: 22px; border-radius: 50%;
	background: var(--srilor-notch-bg); border: 1px solid var(--wp--preset--color--line); z-index: 2;
}
.is-style-ticket::before { top: -12px; clip-path: inset(50% 0 0 0); }
.is-style-ticket::after { bottom: -12px; clip-path: inset(0 0 50% 0); }
.is-style-ticket > .wp-block-columns { margin: 0; gap: 0 !important; align-items: stretch !important; }
.is-style-ticket > .wp-block-columns > .wp-block-column { padding: clamp(1.5rem, 3vw, 2.5rem); }
.is-style-ticket > .wp-block-columns > .wp-block-column:first-child { border-right: 2px dashed var(--wp--preset--color--line); }
@media (max-width: 781px) {
	.is-style-ticket::before, .is-style-ticket::after { display: none; }
	.is-style-ticket > .wp-block-columns > .wp-block-column:first-child { border-right: 0; border-bottom: 2px dashed var(--wp--preset--color--line); }
}

/* =====================================================================
   4. Images: rounded media and the phone frame for real app screenshots
   ===================================================================== */
.wp-block-image.is-style-media img { border-radius: 10px; }
.wp-block-image:is(.is-style-phone, .is-style-phone-tilt-left, .is-style-phone-tilt-right) { margin-inline: auto; max-width: 290px; }
.wp-block-image:is(.is-style-phone, .is-style-phone-tilt-left, .is-style-phone-tilt-right) img {
	display: block; width: 100%; height: auto; aspect-ratio: 9 / 19.5; object-fit: cover; object-position: top center;
	border-radius: 38px; border: 9px solid #0B1512; background: #0B1512;
	box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 30px 60px rgba(11,21,18,.35);
}
.wp-block-image.is-style-phone-tilt-left img { transform: rotate(-4deg); }
.wp-block-image.is-style-phone-tilt-right img { transform: rotate(4deg); }
.wp-block-image:is(.is-style-phone, .is-style-phone-tilt-left, .is-style-phone-tilt-right) figcaption { text-align: center; margin-top: 1rem; }

/* =====================================================================
   5. Rules and lists: ruled rows instead of boxes
   ===================================================================== */
.wp-block-separator.is-style-rule-strong { border: 0 !important; border-top: 2px solid var(--wp--preset--color--ink) !important; width: 100% !important; max-width: none; opacity: 1; }
.wp-block-separator.is-style-trail {
	border: 0 !important; width: 100% !important; max-width: none; height: 6px; opacity: 1;
	background-image: radial-gradient(circle, currentColor 1.5px, transparent 2px); background-size: 10px 6px; background-repeat: repeat-x; background-position: left center;
	color: var(--wp--preset--color--ink-3);
}
ul.is-style-checks { list-style: none; padding-left: 0; }
ul.is-style-checks li { position: relative; padding-left: 1.75rem; margin-bottom: 0.5rem; }
ul.is-style-checks li::before { content: ""; position: absolute; left: 0; top: 0.35em; width: 1rem; height: 0.55rem; border-left: 2.5px solid var(--wp--preset--color--teal); border-bottom: 2.5px solid var(--wp--preset--color--teal); transform: rotate(-45deg); }
:where(ul, ol).is-style-ruled { list-style: none; padding-left: 0; counter-reset: srilor-row; border-bottom: 2px solid var(--wp--preset--color--ink); }
:where(ul, ol).is-style-ruled > li { counter-increment: srilor-row; position: relative; padding: 0.9rem 0 0.9rem 3.25rem; border-top: 1px solid var(--wp--preset--color--line); margin: 0; min-height: 2.75rem; }
:where(ul, ol).is-style-ruled > li:first-child { border-top: 2px solid var(--wp--preset--color--ink); }
:where(ul, ol).is-style-ruled > li::before { content: counter(srilor-row, decimal-leading-zero); position: absolute; left: 0; top: 0.7rem; font-family: var(--wp--preset--font-family--board); font-weight: 800; font-size: 1.6rem; line-height: 1; color: var(--wp--preset--color--cinnamon-ink); }
:where(.has-tea-background-color) :where(ul, ol).is-style-ruled { border-color: rgba(255,255,255,.35); }
:where(.has-tea-background-color) :where(ul, ol).is-style-ruled > li { border-top-color: rgba(255,255,255,.18); }
:where(.has-tea-background-color) :where(ul, ol).is-style-ruled > li:first-child { border-top-color: rgba(255,255,255,.35); }
:where(.has-tea-background-color) :where(ul, ol).is-style-ruled > li::before { color: var(--wp--preset--color--cinnamon-light); }

/* FAQ: Details blocks as ruled, numbered rows */
.srilor-faq { counter-reset: srilor-faq; }
.wp-block-details { counter-increment: srilor-faq; }
.wp-block-details summary { cursor: pointer; list-style: none; display: grid; grid-template-columns: auto 1fr auto; gap: 1rem; align-items: baseline; font-weight: 600; font-size: 1.0625rem; }
.wp-block-details summary::-webkit-details-marker { display: none; }
.srilor-faq .wp-block-details summary::before { content: counter(srilor-faq, decimal-leading-zero); font-family: var(--wp--preset--font-family--board); font-weight: 800; font-size: 1.5rem; line-height: 1; color: var(--wp--preset--color--cinnamon-ink); min-width: 2.25rem; }
.wp-block-details summary::after { content: "+"; font-family: var(--wp--preset--font-family--board); font-weight: 800; font-size: 1.6rem; line-height: 1; color: var(--wp--preset--color--tea); transition: transform .25s var(--srilor-ease); }
.wp-block-details[open] summary::after { transform: rotate(45deg); }
.wp-block-details > :not(summary) { color: var(--wp--preset--color--ink-2); }
.srilor-faq .wp-block-details > :not(summary) { padding-left: 3.25rem; }
.srilor-faq .wp-block-details:last-of-type { border-bottom: 2px solid var(--wp--preset--color--ink); }
.srilor-faq .wp-block-details:first-of-type { border-top: 2px solid var(--wp--preset--color--ink); }

/* =====================================================================
   6. Header: a station board that travels with you
   - Ticker row (ink): which coast is dry this month, and the time in Colombo.
   - Bar: logo, numbered platform-style navigation, search, ticket "Get the app".
   - On scroll the ticker slides away and the bar tightens; scrolling down hides the bar,
     scrolling up brings it back. A dotted route line under the bar fills as you read,
     with a stop for every section heading (assets/js/srilor.js).
   - The header is fixed; on paper pages its template part keeps the space, so nothing jumps.
   - Nothing that traps fixed children (transform, filter, backdrop-filter) sits on the header
     while the menu is open, so the full-screen menu always covers the screen.
   ===================================================================== */
:root { --srilor-tick-h: 34px; --srilor-bar-h: 80px; --srilor-bar-h-s: 64px; }
@media (max-width: 781px) { :root { --srilor-tick-h: 30px; --srilor-bar-h: 64px; --srilor-bar-h-s: 58px; } }
html { scroll-padding-top: calc(var(--srilor-bar-h-s) + 1.5rem); }

.wp-site-blocks > header.wp-block-template-part:has(> .srilor-header.is-light) { height: calc(var(--srilor-tick-h) + var(--srilor-bar-h)); }
.srilor-header {
	--srilor-roll: var(--wp--preset--color--teal-deep);
	--srilor-route-bg: var(--wp--preset--color--paper);
	--srilor-route-dot: var(--wp--preset--color--ink-3);
	--srilor-route-dot-on: var(--wp--preset--color--cinnamon);
	position: fixed; z-index: 60; left: 0; right: 0; top: var(--srilor-top, 0px);
	margin: 0 !important; padding: 0 !important; color: var(--wp--preset--color--ink);
	transition: transform .5s var(--srilor-ease), color .3s;
}
.admin-bar .srilor-header { top: var(--srilor-top, var(--wp-admin--admin-bar--height, 32px)); }
.srilor-header > * { margin-block: 0 !important; }
.srilor-header::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; transition: background-color .35s, box-shadow .35s, opacity .35s; }
.srilor-header.is-light::before { background-color: var(--wp--preset--color--paper); background-image: var(--srilor-grain); box-shadow: inset 0 -2px 0 var(--wp--preset--color--ink); }
.srilor-header.is-light.is-scrolled::before { background-color: rgba(243,238,227,.9); background-image: none; -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); box-shadow: 0 10px 30px -18px rgba(22,32,27,.35); }
.srilor-header.is-over {
	--srilor-roll: var(--wp--preset--color--teal);
	--srilor-route-bg: #0B2E24;
	--srilor-route-dot: rgba(255,252,247,.32);
	--srilor-route-dot-on: var(--wp--preset--color--cinnamon-light);
	color: var(--wp--preset--color--card);
}
.srilor-header.is-over::before { top: var(--srilor-tick-h); background: linear-gradient(180deg, rgba(11,21,18,.62), rgba(11,21,18,0)); height: calc(var(--srilor-bar-h) + 3rem); }
.srilor-header.is-over.is-scrolled::before { top: 0; height: auto; background-color: var(--wp--preset--color--tea); background-image: var(--srilor-grain-light); }
html:not(.js) .srilor-header.is-over { position: absolute; }

.srilor-header.is-scrolled { transform: translateY(calc(-1 * var(--srilor-tick-h))); }
.srilor-header.is-hidden { transform: translateY(-100%); }
html.has-modal-open .srilor-header, .srilor-header:has(.is-menu-open) { transform: none !important; transition: none; }
html.has-modal-open .srilor-header::before { -webkit-backdrop-filter: none; backdrop-filter: none; }

/* Ticker row */
.srilor-header__ticker { padding-top: 0 !important; padding-bottom: 0 !important; font-family: var(--wp--preset--font-family--board); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1; }
.srilor-header__ticker > .wp-block-group { height: var(--srilor-tick-h); gap: 1rem; }
.srilor-ticker { display: flex; align-items: center; gap: 1rem; align-self: stretch; min-width: 0; margin: 0 0 0 -12px; padding-left: 12px; overflow: hidden; white-space: nowrap; color: inherit; text-decoration: none; }
.srilor-ticker__now { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--wp--preset--color--teal); }
.srilor-ticker__now i { position: relative; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--wp--preset--color--teal); }
.srilor-ticker__now i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--wp--preset--color--teal); animation: srilor-beacon 2.2s cubic-bezier(.2,.8,.2,1) infinite; }
.srilor-ticker__now b, .srilor-ticker__cell b { color: var(--wp--preset--color--card); font-weight: 800; }
.srilor-ticker__cell { display: inline-flex; align-items: center; gap: 0.45rem; padding-left: 1rem; border-left: 1px solid rgba(255,252,247,.16); color: rgba(255,252,247,.6); }
.srilor-ticker__cell::before { content: ""; width: 6px; height: 6px; background: var(--wp--preset--color--cinnamon-light); transform: rotate(45deg); flex: none; }
.srilor-ticker__cell.is-good::before { background: var(--wp--preset--color--teal); border-radius: 50%; transform: none; }
.srilor-ticker__short { display: none; }
.srilor-ticker__more { color: var(--wp--preset--color--teal); padding-left: 0.25rem; }
.srilor-ticker__more::after { content: " \2192"; }
a.srilor-ticker:hover .srilor-ticker__more, a.srilor-ticker:focus-visible .srilor-ticker__more { text-decoration: underline; text-underline-offset: 3px; }
.srilor-clock { margin: 0 !important; white-space: nowrap; color: rgba(255,252,247,.6); }
.srilor-clock time { color: var(--wp--preset--color--card); font-weight: 800; font-variant-numeric: tabular-nums; margin-left: 0.3rem; }
.srilor-clock::after { content: "LKT"; margin-left: 0.45rem; padding: 2px 4px; border: 1px solid rgba(255,252,247,.3); border-radius: 3px; font-size: 0.68rem; }
@keyframes srilor-beacon { 0% { transform: scale(1); opacity: .9; } 80%, 100% { transform: scale(2.6); opacity: 0; } }

/* Bar */
.srilor-header__bar { padding-top: 0 !important; padding-bottom: 0 !important; }
.srilor-header__bar > .wp-block-group { min-height: var(--srilor-bar-h); gap: 1.25rem; transition: min-height .45s var(--srilor-ease); }
.srilor-header.is-scrolled .srilor-header__bar > .wp-block-group { min-height: var(--srilor-bar-h-s); }
.srilor-logo { margin: 0 !important; flex: none; }
.srilor-logo img { height: auto; border-radius: 0; transform-origin: 0 50%; transition: transform .45s var(--srilor-ease); }
.srilor-header.is-scrolled .srilor-logo img { transform: scale(.86); }
.srilor-header__actions { gap: 0.6rem !important; flex: none; }
.srilor-header__cta { flex: none; }

/* Navigation: platform numbers, ticket-stub current item, split-flap roll on hover */
.srilor-nav { flex: 1 1 auto; justify-content: center; }
.srilor-nav .wp-block-navigation__container { counter-reset: srilor-nav; }
.srilor-nav .wp-block-navigation-item { counter-increment: srilor-nav; }
.srilor-nav .srilor-nav-app { display: none; counter-increment: none; }
.srilor-nav .wp-block-navigation-item__content {
	display: inline-flex; align-items: flex-start; gap: 0.35rem; padding: 0.55rem 0.7rem !important;
	border: 1.5px solid transparent; border-radius: 4px; overflow: hidden;
	font-family: var(--wp--preset--font-family--board); font-size: 1rem; font-weight: 700; line-height: 1; letter-spacing: 0.07em; text-transform: uppercase; text-decoration: none;
	transition: background-color .2s, border-color .2s;
}
.srilor-nav .wp-block-navigation-item__content::before { content: counter(srilor-nav, decimal-leading-zero); font-size: 0.62rem; font-weight: 800; letter-spacing: 0.02em; color: var(--wp--preset--color--cinnamon); }
.srilor-header.is-over .srilor-nav .wp-block-navigation-item__content::before { color: var(--wp--preset--color--cinnamon-light); }
.srilor-nav .wp-block-navigation-item__content:hover { background-color: rgba(22,32,27,.06); }
.srilor-header.is-over .srilor-nav .wp-block-navigation-item__content:hover { background-color: rgba(255,252,247,.1); }
.srilor-nav .current-menu-item > .wp-block-navigation-item__content, .srilor-nav .wp-block-navigation-item__content[aria-current="page"] { border-color: currentColor; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.srilor-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__label { display: inline-block; text-shadow: 0 1.7em 0 var(--srilor-roll); transition: transform .45s var(--srilor-ease); }
	.srilor-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content:hover .wp-block-navigation-item__label,
	.srilor-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content:focus-visible .wp-block-navigation-item__label { transform: translateY(-1.7em); }
}

/* The menu is an overlay below 1100px and a row of platforms above it. */
/* core repeats these class names three times to win, so do the same plus the theme's own class */
.srilor-nav .wp-block-navigation__responsive-container-open.wp-block-navigation__responsive-container-open.wp-block-navigation__responsive-container-open,
.srilor-nav .wp-block-navigation__responsive-container-close.wp-block-navigation__responsive-container-close.wp-block-navigation__responsive-container-close {
	display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.6rem 0.8rem; border: 1.5px solid currentColor; border-radius: 4px; background: transparent; color: inherit;
	font-family: var(--wp--preset--font-family--board); font-size: 0.9rem; font-weight: 800; line-height: 1; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer;
}
.srilor-nav .wp-block-navigation__responsive-container-open::before { content: ""; width: 16px; height: 10px; background: linear-gradient(currentColor, currentColor) 0 0 / 100% 2px no-repeat, linear-gradient(currentColor, currentColor) 0 100% / 62% 2px no-repeat; }
.srilor-nav .wp-block-navigation__responsive-container-open svg, .srilor-nav .wp-block-navigation__responsive-container-close svg { display: none; }
@media (min-width: 1100px) {
	.srilor-nav .wp-block-navigation__responsive-container-open.wp-block-navigation__responsive-container-open.wp-block-navigation__responsive-container-open.always-shown { display: none; }
	.srilor-nav .wp-block-navigation__responsive-container.hidden-by-default:not(.is-menu-open) { display: block; position: relative; z-index: auto; width: 100%; background: none !important; color: inherit !important; }
	.srilor-nav .wp-block-navigation__responsive-container.hidden-by-default:not(.is-menu-open) .wp-block-navigation__responsive-container-close { display: none; }
	.srilor-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container { gap: 0.15rem; }
}
@media (max-width: 1099px) { .srilor-nav { flex: 0 0 auto; order: 3; } .srilor-header__bar > .wp-block-group { gap: 0.6rem; } .srilor-logo { margin-right: auto !important; } }
@media (max-width: 599px) { .srilor-header-search, .srilor-header__cta { display: none !important; } }

/* Full-screen menu: tea, the island traced behind, big stencil names on ruled rows */
.srilor-nav .wp-block-navigation__responsive-container.is-menu-open {
	padding: 0 clamp(1.25rem, 6vw, 3rem) 2rem !important;
	background-color: var(--wp--preset--color--tea) !important; color: var(--wp--preset--color--card) !important;
	background-image: url("assets/images/island-outline.svg"), var(--srilor-grain-light);
	background-repeat: no-repeat, repeat; background-position: right -14vw bottom -4vh, 0 0; background-size: min(78vw, 420px) auto, auto;
	animation: srilor-menu-in .45s var(--srilor-ease);
}
.srilor-nav .is-menu-open .wp-block-navigation__responsive-dialog { margin-top: 0; padding-top: calc(var(--srilor-bar-h-s) + 1.5rem); }
.admin-bar .srilor-nav .is-menu-open .wp-block-navigation__responsive-dialog { margin-top: var(--wp-admin--admin-bar--height, 32px); }
.srilor-nav .is-menu-open .wp-block-navigation__responsive-dialog::before { content: "Where to?"; position: absolute; top: calc((var(--srilor-bar-h-s) - 1rem) / 2 + 0.2rem); left: 0; font-family: var(--wp--preset--font-family--board); font-size: 0.9rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wp--preset--color--teal); }
.srilor-nav .is-menu-open .wp-block-navigation__responsive-container-close { position: absolute; top: calc((var(--srilor-bar-h-s) - 2.3rem) / 2); right: 0; border-color: rgba(255,252,247,.45); }
.srilor-nav .is-menu-open .wp-block-navigation__responsive-container-content { padding-top: 0 !important; align-items: stretch !important; }
.srilor-nav .is-menu-open .wp-block-navigation__container { width: 100%; gap: 0 !important; align-items: stretch !important; border-top: 2px solid rgba(255,252,247,.85); }
.srilor-nav .is-menu-open .wp-block-navigation-item { border-bottom: 1px solid rgba(255,252,247,.16); animation: srilor-row-in .5s var(--srilor-ease) both; }
.srilor-nav .is-menu-open .wp-block-navigation-item:nth-child(2) { animation-delay: .04s; }
.srilor-nav .is-menu-open .wp-block-navigation-item:nth-child(3) { animation-delay: .08s; }
.srilor-nav .is-menu-open .wp-block-navigation-item:nth-child(4) { animation-delay: .12s; }
.srilor-nav .is-menu-open .wp-block-navigation-item:nth-child(5) { animation-delay: .16s; }
.srilor-nav .is-menu-open .wp-block-navigation-item:nth-child(6) { animation-delay: .2s; }
.srilor-nav .is-menu-open .wp-block-navigation-item__content {
	display: flex; width: 100%; align-items: flex-start; gap: 0.9rem; padding: 0.85rem 0 !important; border: 0; border-radius: 0; overflow: visible;
	font-family: var(--wp--preset--font-family--stencil); font-weight: 800; font-size: clamp(2.1rem, 9.5vw, 3.4rem); line-height: 0.92; letter-spacing: 0;
}
.srilor-nav .is-menu-open .wp-block-navigation-item__content::before { font-family: var(--wp--preset--font-family--board); font-size: 0.85rem; padding-top: 0.35rem; color: var(--wp--preset--color--cinnamon-light); min-width: 1.4rem; }
.srilor-nav .is-menu-open .wp-block-navigation-item__content:hover, .srilor-nav .is-menu-open .wp-block-navigation-item__content:focus-visible { background: none; color: var(--wp--preset--color--teal); }
.srilor-nav .is-menu-open .current-menu-item > .wp-block-navigation-item__content { color: var(--wp--preset--color--teal); }
.srilor-nav .is-menu-open .srilor-nav-app { display: flex; justify-content: flex-start; align-self: flex-start; border-bottom: 0; margin-top: 1.75rem; }
.srilor-nav .is-menu-open .srilor-nav-app .wp-block-navigation-item__content {
	display: inline-flex; width: auto; align-items: center; padding: 0.95rem 3.6rem 0.95rem 1.2rem !important; position: relative; border-radius: 8px;
	background: var(--wp--preset--color--teal); color: var(--wp--preset--color--ink) !important;
	font-family: var(--wp--preset--font-family--board); font-size: 1.05rem; letter-spacing: 0.08em; line-height: 1;
	-webkit-mask: radial-gradient(circle 7px at calc(100% - 2.6rem) 0, #0000 97%, #000) top / 100% 51% no-repeat, radial-gradient(circle 7px at calc(100% - 2.6rem) 100%, #0000 97%, #000) bottom / 100% 51% no-repeat;
	mask: radial-gradient(circle 7px at calc(100% - 2.6rem) 0, #0000 97%, #000) top / 100% 51% no-repeat, radial-gradient(circle 7px at calc(100% - 2.6rem) 100%, #0000 97%, #000) bottom / 100% 51% no-repeat;
}
.srilor-nav .is-menu-open .srilor-nav-app .wp-block-navigation-item__content::before { content: ""; position: absolute; top: 8px; bottom: 8px; right: 2.6rem; min-width: 0; padding: 0; border-left: 1.5px dashed rgba(22,32,27,.45); }
.srilor-nav .is-menu-open .srilor-nav-app .wp-block-navigation-item__content::after { content: "\2192"; position: absolute; right: 0; width: 2.6rem; text-align: center; font-family: var(--wp--preset--font-family--text); font-size: 1.25rem; font-weight: 600; }
.srilor-nav .is-menu-open .wp-block-navigation__responsive-container-content::after { content: "7.87\00B0  N  \00B7  80.77\00B0  E  \2014  Sri Lanka"; display: block; order: 99; margin-top: 2.25rem; font-family: var(--wp--preset--font-family--board); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,252,247,.5); }
@keyframes srilor-menu-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes srilor-row-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* Search: a square stub that opens into a field */
.srilor-header-search { margin: 0 !important; }
.srilor-header-search .wp-block-search__inside-wrapper { border: 0 !important; padding: 0 !important; background: transparent !important; }
.srilor-header-search .wp-block-search__button {
	display: grid; place-items: center; width: 42px; height: 42px; min-width: 42px; margin: 0 !important; padding: 0 !important;
	border: 1.5px solid currentColor !important; border-radius: 8px; background: transparent !important; color: inherit !important;
}
.srilor-header-search .wp-block-search__button svg { width: 22px; height: 22px; min-width: 22px; fill: currentColor; }
.srilor-header-search .wp-block-search__input { height: 42px; padding: 0 0.9rem; margin-right: 0.4rem; border: 1.5px solid currentColor !important; border-radius: 8px; background: var(--wp--preset--color--card); color: var(--wp--preset--color--ink); font-size: 0.95rem; }
.srilor-header-search.wp-block-search__searchfield-hidden .wp-block-search__input { border-width: 0 !important; padding: 0; margin: 0; }
.srilor-header-search:not(.wp-block-search__searchfield-hidden) .wp-block-search__inside-wrapper { min-width: min(16rem, 40vw); }

/* Ticket button: notches and a perforated stub, cut with a mask so it works on any background */
.wp-block-button.is-style-notched { border-radius: 8px; }
.wp-block-button.is-style-notched:focus-within { outline: 2px solid currentColor; outline-offset: 3px; }
.wp-block-button.is-style-notched .wp-block-button__link {
	--stub: 2.5rem; position: relative; display: inline-flex; align-items: center;
	padding: 0.8rem calc(var(--stub) + 1rem) 0.8rem 1.1rem; border-radius: 8px;
	font-family: var(--wp--preset--font-family--board); font-size: 0.95rem; font-weight: 800; line-height: 1; letter-spacing: 0.08em; text-transform: uppercase;
	background-color: var(--wp--preset--color--teal); color: var(--wp--preset--color--ink);
	-webkit-mask: radial-gradient(circle 6px at calc(100% - var(--stub)) 0, #0000 97%, #000) top / 100% 51% no-repeat, radial-gradient(circle 6px at calc(100% - var(--stub)) 100%, #0000 97%, #000) bottom / 100% 51% no-repeat;
	mask: radial-gradient(circle 6px at calc(100% - var(--stub)) 0, #0000 97%, #000) top / 100% 51% no-repeat, radial-gradient(circle 6px at calc(100% - var(--stub)) 100%, #0000 97%, #000) bottom / 100% 51% no-repeat;
}
.wp-block-button.is-style-notched .wp-block-button__link:focus-visible { outline: none; }
.wp-block-button.is-style-notched .wp-block-button__link::before { content: ""; position: absolute; top: 7px; bottom: 7px; right: var(--stub); border-left: 1.5px dashed rgba(22,32,27,.45); }
.wp-block-button.is-style-notched .wp-block-button__link::after { content: "\2192"; position: absolute; top: 0; bottom: 0; right: 0; width: var(--stub); display: grid; place-items: center; font-family: var(--wp--preset--font-family--text); font-size: 1.15rem; font-weight: 600; transition: transform .3s var(--srilor-ease); }
.wp-block-button.is-style-notched .wp-block-button__link:hover { background-color: var(--wp--preset--color--card); color: var(--wp--preset--color--tea); }
.srilor-header.is-light .wp-block-button.is-style-notched .wp-block-button__link:hover { background-color: var(--wp--preset--color--tea); color: var(--wp--preset--color--card); }
.srilor-header.is-light .wp-block-button.is-style-notched .wp-block-button__link:hover::before { border-color: rgba(255,252,247,.45); }
.wp-block-button.is-style-notched .wp-block-button__link:hover::after { transform: translateX(3px); }

/* The route under the bar: dotted ahead, solid behind, a cinnamon dot where you are */
.srilor-route { position: absolute; left: 0; right: 0; top: 100%; height: 6px; pointer-events: none; opacity: 0; transition: opacity .35s;
	background: radial-gradient(circle, var(--srilor-route-dot) 1.1px, transparent 1.5px) 0 50% / 9px 6px repeat-x, var(--srilor-route-bg); box-shadow: inset 0 1px 0 rgba(22,32,27,.08); }
.srilor-header.is-scrolled .srilor-route { opacity: 1; }
.srilor-route__fill { position: absolute; left: 0; top: 2px; height: 2px; width: calc(var(--p, 0) * 100%); background: var(--wp--preset--color--teal); }
.srilor-route__stop { position: absolute; top: 50%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: var(--srilor-route-bg); box-shadow: 0 0 0 1.5px var(--srilor-route-dot); transition: background-color .3s, box-shadow .3s; }
.srilor-route__stop.is-passed { background: var(--wp--preset--color--teal); box-shadow: 0 0 0 1.5px var(--wp--preset--color--teal); }
.srilor-route__dot { position: absolute; top: 50%; left: calc(var(--p, 0) * 100%); width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; background: var(--srilor-route-dot-on); box-shadow: 0 0 0 2.5px var(--srilor-route-bg); }

@media (max-width: 781px) {
	.srilor-header__ticker { font-size: 0.72rem; letter-spacing: 0.06em; }
	.srilor-ticker { gap: 0.7rem; }
	.srilor-ticker__cell { padding-left: 0.7rem; }
	.srilor-ticker__more, .srilor-clock, .srilor-ticker__coast { display: none !important; }
	.srilor-ticker__short { display: inline; }
	.srilor-logo img { width: 84px !important; }
}
@media (max-width: 420px) { .srilor-ticker__now b { display: none; } }
@media (prefers-reduced-motion: reduce) {
	.srilor-header, .srilor-header::before, .srilor-header__bar > .wp-block-group, .srilor-logo img { transition: none; }
	.srilor-ticker__now i::after, .srilor-nav .is-menu-open .wp-block-navigation__responsive-container, .srilor-nav .is-menu-open .wp-block-navigation-item, .srilor-nav .wp-block-navigation__responsive-container.is-menu-open { animation: none; }
}
.editor-styles-wrapper .srilor-header { position: relative; top: auto; transform: none; }
.editor-styles-wrapper .srilor-header.is-over::before { top: 0; height: auto; background: var(--wp--preset--color--tea); }

/* =====================================================================
   7. Hero (cover with photo)
   ===================================================================== */
.srilor-hero { position: relative; overflow: hidden; min-height: min(100vh, 980px); display: flex; flex-direction: column; justify-content: center;
	padding-top: calc(var(--srilor-tick-h) + var(--srilor-bar-h) + clamp(2rem, 5vw, 4rem)) !important;
	background-color: var(--wp--preset--color--tea);
	background-image: url("assets/images/contours.svg"), radial-gradient(ellipse 60% 70% at 78% 45%, rgba(32,176,142,.2), transparent 70%), linear-gradient(180deg, #0B2E24 0%, var(--wp--preset--color--tea) 38%), var(--srilor-grain-light) !important;
	background-size: cover, auto, auto, auto !important; background-position: center, 0 0, 0 0, 0 0 !important; }
.srilor-hero > .wp-block-columns { width: 100%; }
.srilor-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: repeating-linear-gradient(90deg, var(--wp--preset--color--cinnamon-light) 0 14px, transparent 14px 22px); opacity: .55; }
.srilor-hero .is-style-lead { color: #d5e2dc; max-width: 34rem; }
.srilor-hero h1 { font-size: clamp(3.1rem, 6.1vw, 6rem); line-height: 0.88; letter-spacing: 0; text-shadow: 0 2px 30px rgba(11,21,18,.35); }
.srilor-hero-search { max-width: 34rem; }
.srilor-hero-search .wp-block-search__inside-wrapper { background: var(--wp--preset--color--card); border: 0; border-radius: 8px; padding: 6px 6px 6px 1rem; box-shadow: 0 20px 50px rgba(11,21,18,.35); }
.srilor-hero-search .wp-block-search__input { border: 0; background: transparent; color: var(--wp--preset--color--ink); font-size: 1rem; min-height: 50px; }
.srilor-hero-search .wp-block-search__input:focus { outline: none; }
.srilor-hero-search .wp-block-search__button { margin: 0; border-radius: 6px; padding: 0.8rem 1.4rem; }
.srilor-chips { gap: 0.5rem !important; }
.srilor-hero .srilor-hero-badges { margin-top: 1.75rem; }
.srilor-hero .srilor-badges__note { color: #d5e2dc; opacity: 1; }
.srilor-hero .srilor-badge { box-shadow: 0 14px 36px rgba(11,21,18,.32); }
/* Search sits under the store buttons as the quieter second path: look around first. */
.srilor-hero .srilor-hero-search { margin-top: 1.6rem; }
.srilor-hero .srilor-hero-search .wp-block-search__inside-wrapper { background: rgba(255,252,247,.08); border: 1px solid rgba(255,252,247,.24); box-shadow: none; transition: background .2s, border-color .2s; }
.srilor-hero .srilor-hero-search .wp-block-search__inside-wrapper:focus-within { background: rgba(255,252,247,.14); border-color: rgba(255,252,247,.55); }
.srilor-hero .srilor-hero-search .wp-block-search__input { color: #FFFCF7; min-height: 46px; }
.srilor-hero .srilor-hero-search .wp-block-search__input::placeholder { color: #b9cbc3; opacity: 1; }
.srilor-hero .srilor-stamp-deco { position: absolute; right: clamp(1rem, 4vw, 4rem); bottom: clamp(1.5rem, 4vw, 3rem); opacity: .9; }

/* =====================================================================
   8. Cards: place cards (photo, tea gradient, stencil name), experience tiles, trip cards
   ===================================================================== */
.srilor-place .wp-block-cover, .srilor-tile.wp-block-cover { border-radius: 10px; overflow: hidden; }
.srilor-place .wp-block-cover__image-background, .srilor-tile .wp-block-cover__image-background { transition: transform .6s var(--srilor-ease); }
.srilor-place:hover .wp-block-cover__image-background, .srilor-tile:hover .wp-block-cover__image-background { transform: scale(1.04); }
.srilor-place .wp-block-post-title, .srilor-tile .wp-block-heading {
	font-family: var(--wp--preset--font-family--stencil); font-weight: 800; text-transform: uppercase; line-height: 0.92; letter-spacing: 0; margin: 0; color: var(--wp--preset--color--card);
}
.srilor-place .wp-block-post-title { font-size: clamp(1.75rem, 2.4vw, 2.25rem); }
.srilor-place .wp-block-post-title a, .srilor-tile .wp-block-heading a { color: inherit; text-decoration: none; }
.srilor-place .wp-block-post-title a::after, .srilor-tile .wp-block-heading a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.srilor-place .wp-block-post-terms { color: #BFD0C8; margin: 0 0 0.35rem; }
.srilor-place .wp-block-post-terms a { color: inherit; text-decoration: none; position: relative; z-index: 2; }
.srilor-tile .wp-block-heading { font-size: clamp(2rem, 3vw, 2.75rem); }
.srilor-tile p { position: relative; z-index: 2; }
.srilor-trip { background-color: var(--wp--preset--color--card); border: 1px solid var(--wp--preset--color--line); border-radius: 10px; overflow: hidden; height: 100%; transition: transform .3s var(--srilor-ease), box-shadow .3s; }
.srilor-trip:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(15,61,48,.12); }
.srilor-trip .wp-block-post-featured-image { margin: 0; }
.srilor-trip .wp-block-post-featured-image img { aspect-ratio: 16 / 10; object-fit: cover; border-radius: 0; }
.srilor-trip .wp-block-post-title { font-family: var(--wp--preset--font-family--stencil); font-weight: 800; text-transform: uppercase; font-size: 1.85rem; line-height: 0.95; }
.srilor-trip .wp-block-post-title a { text-decoration: none; color: inherit; }

/* Mosaic grid on small screens */
@media (max-width: 781px) {
	.srilor-mosaic { grid-template-columns: 1fr 1fr !important; }
	.srilor-mosaic > :first-child { grid-column: span 2 !important; grid-row: span 1 !important; min-height: 320px !important; }
	.srilor-scroll-row > .wp-block-post-template { display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory; gap: 1rem; padding-bottom: 0.5rem; }
	.srilor-scroll-row > .wp-block-post-template > li { flex: 0 0 78%; scroll-snap-align: start; }
}

/* =====================================================================
   9. Section heads, footer, misc
   ===================================================================== */
.srilor-head { border-bottom: 2px solid var(--wp--preset--color--ink); padding-bottom: 0.6rem; }
:where(.has-tea-background-color) .srilor-head { border-bottom-color: rgba(255,255,255,.35); }
.srilor-head .wp-block-heading { margin: 0; }
.srilor-head p { margin: 0; }
.srilor-footer-links { list-style: none; padding-left: 0; font-size: 0.9375rem; line-height: 2.1; margin-top: 0.5rem; }
.srilor-footer-links a { text-decoration: none; color: #D5E2DC !important; }
.srilor-footer-links a:hover { color: #fff !important; text-decoration: underline; }
footer .wp-block-heading { color: #fff; }
.srilor-footer-title { font-family: var(--wp--preset--font-family--board) !important; font-weight: 800 !important; font-size: 1.125rem !important; letter-spacing: 0.08em; text-transform: uppercase; }

/* Itinerary days: numbered square day chips joined by a dotted route */
.srilor-days-list, .wp-block-post-content:has(> .srilor-day) { counter-reset: srilor-day; }
.srilor-day { counter-increment: srilor-day; position: relative; padding: 0 0 1.75rem 4.25rem; }
.srilor-day::before {
	content: "DAY " counter(srilor-day);
	position: absolute; left: 0; top: 0.1rem; width: 3.25rem; padding: 0.35rem 0 0.3rem; text-align: center;
	border: 1.5px solid var(--wp--preset--color--ink); border-radius: 4px; background: var(--wp--preset--color--paper);
	font-family: var(--wp--preset--font-family--board); font-weight: 800; font-size: 0.8rem; letter-spacing: 0.06em; line-height: 1.1;
}
.srilor-day:not(:last-child)::after {
	content: ""; position: absolute; left: calc(1.625rem - 1px); top: 2.6rem; bottom: 0.35rem; width: 2px;
	background-image: linear-gradient(var(--wp--preset--color--ink) 50%, transparent 0); background-size: 2px 6px;
}
.srilor-day > .wp-block-heading:first-child { margin-top: 0; }

/* Reveal on scroll (only when JavaScript runs, so content is always visible to crawlers) */
@media (prefers-reduced-motion: no-preference) {
	.js .srilor-reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--srilor-ease), transform .7s var(--srilor-ease); }
	.js .srilor-reveal.is-in { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
html:lang(si) body, :where(body) [lang="si"] { font-family: var(--wp--preset--font-family--noto-sinhala); }
html:lang(ta) body, :where(body) [lang="ta"] { font-family: var(--wp--preset--font-family--noto-tamil); }

/* Mini player (static, as in the app): tea glass capsule, cinnamon play button, progress line */
.srilor-miniplayer { position: relative; max-width: 26rem; background: rgba(15,61,48,.94); color: var(--wp--preset--color--card); border-radius: 999px; padding: 0.7rem 1.25rem 0.7rem 4.1rem; box-shadow: 0 18px 40px rgba(15,61,48,.25); overflow: hidden; }
.srilor-miniplayer p { margin: 0; font-size: 0.8125rem; line-height: 1.35; color: #BFD0C8; }
.srilor-miniplayer strong { color: var(--wp--preset--color--card); font-size: 0.9rem; }
.srilor-miniplayer::before { content: ""; position: absolute; left: 0.8rem; top: 50%; width: 2.4rem; height: 2.4rem; margin-top: -1.2rem; border-radius: 50%; background: var(--wp--preset--color--cinnamon-light) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M3 2l5 3-5 3z' fill='%2316201B'/%3E%3C/svg%3E") 58% 50% / 45% no-repeat; }
.srilor-miniplayer::after { content: ""; position: absolute; left: 1.4rem; right: 1.4rem; bottom: 0; height: 2px; background: linear-gradient(90deg, var(--wp--preset--color--cinnamon-light) 38%, rgba(255,255,255,.15) 38%); }

/* =====================================================================
   Guides index (the blog): numbered, ruled rows like the app's Guide
   ===================================================================== */
.srilor-topic-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; padding: 0; margin: var(--wp--preset--spacing--40) 0 var(--wp--preset--spacing--30); }
.srilor-topic-chips li { margin: 0; }
.srilor-topic-chips a { display: inline-block; padding: 0.45rem 0.7rem; border: 1.5px solid var(--wp--preset--color--ink); border-radius: 4px; color: inherit; text-decoration: none; font-family: var(--wp--preset--font-family--board); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1; }
.srilor-topic-chips a:hover, .srilor-topic-chips .current-cat a { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--paper); }
.srilor-guides .wp-block-post-template { counter-reset: srilor-guide; border-top: 2px solid var(--wp--preset--color--ink); }
.srilor-guide-row { position: relative; counter-increment: srilor-guide; display: grid; grid-template-columns: 4rem 1fr auto; column-gap: 1.25rem; row-gap: 0.25rem; padding: 1.4rem 0; border-bottom: 1px solid var(--wp--preset--color--line); }
.srilor-guide-row > * { grid-column: 2; margin: 0 !important; }
.srilor-guide-row::before { content: counter(srilor-guide, decimal-leading-zero); grid-column: 1; grid-row: 1 / span 3; font-family: var(--wp--preset--font-family--board); font-weight: 800; font-size: 2.2rem; line-height: 1; color: var(--wp--preset--color--cinnamon-ink); }
.srilor-guide-row .wp-block-post-title { font-family: var(--wp--preset--font-family--board); font-weight: 800; text-transform: uppercase; font-size: clamp(1.4rem, 2.6vw, 2rem); line-height: 1; letter-spacing: 0.01em; }
.srilor-guide-row .wp-block-post-title a { color: inherit; text-decoration: none; }
.srilor-guide-row .wp-block-post-title a::after { content: ""; position: absolute; inset: 0; }
.srilor-guide-row:hover .wp-block-post-title a { color: var(--wp--preset--color--teal-deep); }
.srilor-guide-row .wp-block-post-excerpt { color: var(--wp--preset--color--ink-2); max-width: 46rem; }
.srilor-guide-row .wp-block-post-excerpt__more-text { display: none; }
.srilor-guide-row__date { grid-column: 3 !important; grid-row: 1; align-self: start; font-family: var(--wp--preset--font-family--board); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--ink-3); }
.srilor-guide-row .wp-block-post-terms a { position: relative; z-index: 1; }
@media (max-width: 640px) {
	.srilor-guide-row { grid-template-columns: 2.75rem 1fr; column-gap: 0.75rem; }
	.srilor-guide-row::before { font-size: 1.5rem; }
	.srilor-guide-row__date { grid-column: 2 !important; grid-row: auto; }
}

/* =====================================================================
   Content pages: month by month, index rows, route days, archive answer
   ===================================================================== */
.srilor-month-chips { margin-bottom: var(--wp--preset--spacing--40) !important; }
.srilor-month { padding: 1.5rem 0 1.25rem; border-top: 1px solid var(--wp--preset--color--line); scroll-margin-top: calc(var(--srilor-bar-h-s) + 1rem); }
.srilor-month h3 { font-family: var(--wp--preset--font-family--stencil); font-weight: 800; text-transform: uppercase; font-size: clamp(2rem, 4vw, 2.8rem); line-height: 0.92; margin: 0 0 0.35rem; }
.srilor-month .is-style-eyebrow { margin: 0 0 0.6rem; }
.srilor-month__go, .srilor-month__events { font-size: 0.95rem; }
.srilor-month__go strong, .srilor-month__events strong { font-family: var(--wp--preset--font-family--board); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.85rem; margin-right: 0.25rem; }
.srilor-term-rows { border-top: 2px solid var(--wp--preset--color--ink); counter-reset: srilor-term; }
.srilor-term-row { counter-increment: srilor-term; display: grid; grid-template-columns: 3rem 1fr; column-gap: 1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--wp--preset--color--line); }
.srilor-term-row::before { content: counter(srilor-term, decimal-leading-zero); grid-row: 1 / span 2; font-family: var(--wp--preset--font-family--board); font-weight: 800; font-size: 1.6rem; line-height: 1; color: var(--wp--preset--color--cinnamon-ink); }
.srilor-term-row > * { grid-column: 2; margin: 0 !important; }
.srilor-term-row h3 { font-family: var(--wp--preset--font-family--board); font-weight: 800; text-transform: uppercase; font-size: 1.5rem; line-height: 1; margin-bottom: 0.35rem !important; }
.srilor-term-row h3 a { color: inherit; text-decoration: none; }
.srilor-term-row h3 a:hover { color: var(--wp--preset--color--teal-deep); }
.srilor-term-row p { color: var(--wp--preset--color--ink-2); }
.srilor-day__tip { font-size: 0.95rem; padding: 0.7rem 0.9rem; background: var(--wp--preset--color--teal-tint); border-left: 3px solid var(--wp--preset--color--teal-deep); border-radius: 0 6px 6px 0; }
.srilor-archive-answer { margin-block: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50) !important; }
.srilor-archive-answer p:last-child { margin: 0; }
.wp-block-post-content > h2.wp-block-heading { margin-top: var(--wp--preset--spacing--50); }
.wp-block-post-content > .alignfull + * { margin-top: var(--wp--preset--spacing--50); }
.wp-block-post-content > .alignfull { margin-top: var(--wp--preset--spacing--50); }
.wp-block-post-content > .alignfull:first-child { margin-top: 0; }

/* =====================================================================
   Touch: every tap target at least about 44px tall on phones
   ===================================================================== */
@media (max-width: 781px) {
	.wp-block-button.is-style-chip .wp-block-button__link, .srilor-topic-chips a { min-height: 42px; display: inline-flex; align-items: center; }
	.srilor-nav .wp-block-navigation__responsive-container-open.wp-block-navigation__responsive-container-open.wp-block-navigation__responsive-container-open,
	.srilor-nav .wp-block-navigation__responsive-container-close.wp-block-navigation__responsive-container-close.wp-block-navigation__responsive-container-close { min-height: 44px; padding-inline: 0.9rem; }
	.srilor-logo a { display: inline-block; padding-block: 8px; }
	.wp-block-details summary { min-height: 44px; padding-block: 0.65rem; }
	.wp-block-post-terms a, .srilor-breadcrumbs a { display: inline-block; padding-block: 6px; }
	.srilor-deck__btn { width: 42px; height: 42px; }
	.srilor-guide-row .wp-block-post-title a, .srilor-term-row h3 a { display: inline-block; padding-block: 4px; }
}