/*
 * Mbus — WordPress glue.
 *
 * assets/css/mockup.css is the design, copied from the mockup and not to be
 * edited. This file is everything the mockup never had to think about: the
 * admin bar, editor content, pagination, comments, and the fact that a real
 * site has pages other than the homepage. Nothing here restyles a section —
 * if a rule would change how a mockup section looks, it belongs in the
 * mockup, not here.
 */

/* ---------------------------------------------------------------------------
 * Layout under the fixed header
 *
 * The mockup only ever shows the homepage, whose hero deliberately sits
 * behind the translucent fixed header. Every other template starts with
 * ordinary content, which would otherwise be covered by the header's 4rem.
 * ------------------------------------------------------------------------ */

body:not(.mbus-front-page) .site-main {
	padding-top: 4rem;
}

.admin-bar .mbus-site-header {
	top: 32px;
}

@media screen and (max-width: 782px) {
	.admin-bar .mbus-site-header {
		top: 46px;
	}
}

/* The logo is a link in the theme (it is a plain div in the mockup), so the
   anchor must not introduce underlines or a colour of its own. */
.mbus-logo,
.mbus-logo:hover,
.mbus-logo:focus {
	text-decoration: none;
}

.mbus-logo img {
	width: 2rem;
	height: 2rem;
	border-radius: 0.5rem;
	object-fit: contain;
}

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

/* wp_nav_menu() wraps items in <li>; the mockup's nav is a flat row of <a>.
   Stripping list affordances makes the two render identically. */
.mbus-primary-nav ul,
.mbus-footer-column ul,
.mbus-mobile-menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mbus-primary-nav ul {
	display: flex;
	align-items: center;
	gap: 2rem;
}

.mbus-primary-nav a {
	color: rgb(30, 41, 59);
	text-decoration: none;
}

.mbus-primary-nav a:hover {
	opacity: 0.7;
}

.mbus-footer-column a {
	color: rgba(255, 255, 255, 0.55);
	text-decoration: none;
}

.mbus-footer-column a:hover {
	color: #fff;
}

.mbus-mobile-menu {
	background: rgba(255, 255, 255, 0.97);
	border-top: 1px solid rgb(226, 232, 240);
}

.mbus-mobile-menu a {
	color: rgb(30, 41, 59);
	text-decoration: none;
}

/* `hidden` must win over the utility `display` the mockup's classes set,
   otherwise the collapsed mobile menu stays visible. */
[hidden] {
	display: none !important;
}

.mbus-mobile-tabs a {
	text-decoration: none;
}

/* ---------------------------------------------------------------------------
 * Search panel
 * ------------------------------------------------------------------------ */

/* The date inputs sit invisibly on top of their own label text (that is how
   the mockup gets a styled date field), so the native picker indicator must
   not draw over the design. */
.mbus-search-form__date::-webkit-calendar-picker-indicator {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
}

.mbus-search-form input[type="text"]::placeholder {
	color: rgb(203, 213, 225);
}

/* ---------------------------------------------------------------------------
 * Editor content
 *
 * The mockup has no long-form body copy, so everything a page or post can
 * contain is defined here rather than inherited from a section.
 * ------------------------------------------------------------------------ */

.mbus-entry__content {
	color: rgb(51, 65, 85);
	font-size: 1rem;
	line-height: 1.75;
}

.mbus-entry__content > * + * {
	margin-top: 1.25rem;
}

.mbus-entry__content h1,
.mbus-entry__content h2,
.mbus-entry__content h3,
.mbus-entry__content h4 {
	font-family: Manrope, sans-serif;
	font-weight: 700;
	color: rgb(15, 23, 42);
	line-height: 1.25;
	margin-top: 2.5rem;
}

.mbus-entry__content h2 { font-size: 1.875rem; }
.mbus-entry__content h3 { font-size: 1.5rem; }
.mbus-entry__content h4 { font-size: 1.25rem; }

.mbus-entry__content a {
	color: var(--mbus-primary);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.mbus-entry__content ul,
.mbus-entry__content ol {
	padding-left: 1.5rem;
}

.mbus-entry__content ul { list-style: disc; }
.mbus-entry__content ol { list-style: decimal; }

.mbus-entry__content li + li {
	margin-top: 0.5rem;
}

.mbus-entry__content blockquote {
	border-left: 3px solid var(--mbus-primary);
	padding-left: 1.25rem;
	font-style: italic;
	color: rgb(71, 85, 105);
}

.mbus-entry__content img,
.mbus-entry__content iframe {
	max-width: 100%;
	height: auto;
	border-radius: 1rem;
}

.mbus-entry__content code,
.mbus-entry__content pre {
	background: rgb(248, 250, 252);
	border: 1px solid rgb(241, 245, 249);
	border-radius: 0.5rem;
	font-size: 0.875rem;
}

.mbus-entry__content code { padding: 0.125rem 0.375rem; }

.mbus-entry__content pre {
	padding: 1rem;
	overflow-x: auto;
}

.mbus-entry__content table {
	width: 100%;
	border-collapse: collapse;
	display: block;
	overflow-x: auto;
}

.mbus-entry__content th,
.mbus-entry__content td {
	border: 1px solid rgb(226, 232, 240);
	padding: 0.625rem 0.875rem;
	text-align: left;
}

.alignwide,
.alignfull {
	max-width: 100%;
}

.alignleft {
	float: left;
	margin: 0 1.5rem 1rem 0;
}

.alignright {
	float: right;
	margin: 0 0 1rem 1.5rem;
}

.aligncenter {
	margin-left: auto;
	margin-right: auto;
	display: block;
}

.wp-caption-text,
.wp-element-caption {
	font-size: 0.8125rem;
	color: rgb(148, 163, 184);
	text-align: center;
	margin-top: 0.5rem;
}

.mbus-post-card a,
.mbus-bus-card a {
	text-decoration: none;
}

/* ---------------------------------------------------------------------------
 * Pagination & comments
 * ------------------------------------------------------------------------ */

.pagination {
	display: flex;
	justify-content: center;
	gap: 0.5rem;
	margin-top: 3rem;
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding: 0 0.75rem;
	border-radius: 0.75rem;
	border: 1px solid rgb(226, 232, 240);
	font-size: 0.875rem;
	font-weight: 600;
	color: rgb(71, 85, 105);
	text-decoration: none;
	transition: all 0.15s;
}

.pagination .page-numbers:hover {
	border-color: var(--mbus-primary);
	color: var(--mbus-primary);
}

.pagination .page-numbers.current {
	background: var(--mbus-primary);
	border-color: var(--mbus-primary);
	color: #fff;
}

.mbus-comments {
	max-width: 42rem;
	margin: 4rem auto 0;
}

.mbus-comments ol {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mbus-comments .comment-body {
	padding: 1.5rem 0;
	border-top: 1px solid rgb(241, 245, 249);
}

.mbus-comments .children {
	list-style: none;
	padding-left: 1.5rem;
}

.mbus-comments input[type="text"],
.mbus-comments input[type="email"],
.mbus-comments input[type="url"],
.mbus-comments textarea {
	width: 100%;
	padding: 0.75rem 1rem;
	border: 2px solid rgb(226, 232, 240);
	border-radius: 1rem;
	font-size: 0.9375rem;
	outline: none;
}

.mbus-comments input:focus,
.mbus-comments textarea:focus {
	border-color: var(--mbus-primary);
}

.mbus-comments .submit {
	padding: 0.875rem 2rem;
	border: 0;
	border-radius: 1rem;
	background: var(--mbus-primary);
	color: #fff;
	font-family: Manrope, sans-serif;
	font-weight: 700;
	cursor: pointer;
}

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

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

.screen-reader-text:focus {
	background-color: #fff;
	clip-path: none;
	color: var(--mbus-primary);
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 1rem;
	line-height: normal;
	padding: 1rem 1.5rem;
	text-decoration: none;
	top: 1rem;
	width: auto;
	z-index: 100000;
	border-radius: 0.75rem;
	box-shadow: rgba(0, 0, 0, 0.14) 0 8px 32px;
}

:focus-visible {
	outline: 2px solid var(--mbus-primary);
	outline-offset: 2px;
}

/* The mockup animates on hover and on scroll; honour a reader who has asked
   the OS for less of that. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ---------------------------------------------------------------------------
 * Full-width content
 *
 * page.php/single.php hold prose to a ~672px measure, which is right for
 * reading and wrong for anything designed to span the page. A page carrying
 * Bus Booking Manager's own layout shortcodes — [bus-search-form] renders a
 * wide horizontal route search, [bus-search] a full results table — gets
 * this class instead of the narrow one (mbus_content_is_full_width()).
 *
 * The plugin's markup also ships its own grid/table widths, so the only job
 * here is to stop the theme constraining it: no max-width, and no inherited
 * prose measure on its descendants.
 * ------------------------------------------------------------------------ */

.mbus-entry--wide {
	max-width: none;
	width: 100%;
}

/* The plugin's search form is a horizontal row of fields that collapses on
   narrow screens by its own rules; it must be free to use the full width it
   was designed for. */
.mbus-entry--wide .mbus-entry__content > * {
	max-width: none;
}

/* Its results tables can genuinely exceed the viewport on a phone. Scroll
   them rather than letting the page itself scroll sideways. */
.mbus-entry--wide .mbus-entry__content table {
	display: block;
	overflow-x: auto;
	max-width: 100%;
}

/* ---------------------------------------------------------------------------
 * Stop dropdown
 *
 * Replaces the browser's <datalist>, which cannot be styled and in most
 * browsers only appears once the visitor types — where Bus Booking
 * Manager's own form opens its list on click. This is that behaviour in
 * the mockup's design language: the same radius, border, shadow and slate
 * palette the search card itself uses.
 * ------------------------------------------------------------------------ */

.mbus-stop-list {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	/* Above the search card's own stacking context, and above the fixed
	   header's z-50 is unnecessary — but it must clear the sibling fields,
	   which are painted after it in source order. */
	z-index: 60;
	background: #fff;
	border: 1px solid rgb(226, 232, 240);
	border-radius: 1rem;
	box-shadow: rgba(0, 0, 0, 0.12) 0 12px 32px;
	overflow: hidden;
}

.mbus-stop-list ul {
	list-style: none;
	margin: 0;
	padding: 0.375rem;
	/* Roughly six rows, then scroll — a long catalog must not run off the
	   bottom of the viewport. */
	max-height: 17rem;
	overflow-y: auto;
}

.mbus-stop-list__option {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	padding: 0.625rem 0.75rem;
	border-radius: 0.75rem;
	font-family: Manrope, sans-serif;
	font-size: 0.9375rem;
	font-weight: 600;
	color: rgb(15, 23, 42);
	cursor: pointer;
	transition: background-color 0.12s, color 0.12s;
}

.mbus-stop-list__option:hover,
.mbus-stop-list__option.is-active {
	background: color-mix(in oklab, var(--mbus-primary) 8%, transparent);
	color: var(--mbus-primary);
}

.mbus-stop-list__icon {
	width: 1rem;
	height: 1rem;
	flex-shrink: 0;
	color: rgb(148, 163, 184);
}

.mbus-stop-list__option:hover .mbus-stop-list__icon,
.mbus-stop-list__option.is-active .mbus-stop-list__icon {
	color: var(--mbus-primary);
}

.mbus-stop-list__empty {
	margin: 0;
	padding: 0.875rem 1rem;
	font-size: 0.875rem;
	color: rgb(148, 163, 184);
}

/* While the arrival list is being narrowed to the stops reachable from the
   chosen departure. */
.mbus-stop-list.is-loading {
	opacity: 0.6;
	pointer-events: none;
}

/* The dropdown is positioned against this wrapper, not the field box
   inside it. Both carry `relative` in the mockup's own markup, so the
   wrapper gets an explicit class the script can match unambiguously. */
.mbus-stop-field {
	position: relative;
}

/* ---------------------------------------------------------------------------
 * Search field focus
 *
 * The thing that reads as "the field" is the 72px bordered box, not the
 * bare <input> inside it — the input is transparent and borderless by the
 * mockup's own design. So the global :focus-visible outline below drew a
 * rectangle around the input, floating inside the box it belongs to.
 *
 * The box takes the focus state instead, via :focus-within, which also
 * covers the invisible date inputs that sit on top of their own labels.
 * border-color is declared here rather than inline in the template for
 * exactly this reason: an inline style outranks any rule, so the focus
 * colour could not win without !important on every declaration.
 * ------------------------------------------------------------------------ */

.mbus-search-field {
	border-color: rgb(226, 232, 240);
}

.mbus-search-field:focus-within {
	border-color: var(--mbus-primary);
}

/* The inputs carry `outline-none` in the mockup's own class list; theme.css
   loads after mockup.css, so without this the global rule below would win
   on equal specificity and reinstate the outline. Focus stays visible — it
   moves to the box border above, which is the larger and clearer target. */
.mbus-search-form input:focus,
.mbus-search-form input:focus-visible {
	outline: none;
	box-shadow: none;
}

/* Buttons keep the outline: they have no surrounding box to light up. */
.mbus-search-form button:focus-visible {
	outline: 2px solid var(--mbus-primary);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
 * Date fields
 *
 * These are readonly text inputs wearing Bus Booking Manager's own field
 * ids, so its jQuery UI datepicker — styling, active dates, off-days —
 * attaches to them directly. The theme only has to make them look like the
 * mockup's date fields, which are plain text, not inputs.
 * ------------------------------------------------------------------------ */

.mbus-date-input {
	cursor: pointer;
	/* Readonly inputs are still focusable, which is what opens the picker. */
	min-width: 0;
}

.mbus-date-input::placeholder {
	/* The mockup's own muted "Select date" grey. */
	color: rgb(203, 213, 225);
	opacity: 1;
}

.mbus-date-input--return::placeholder {
	color: rgb(196, 205, 216);
}

/* The mockup renders the return field as "＋ Add return date". The plus is
   part of that invitation, so it goes once a date has actually been picked
   — otherwise the field reads "＋ 5 October 2026". :has() is the only way
   to react to a *following* sibling; where it is unsupported the plus
   simply stays, which is untidy rather than broken. */
.mbus-date-affordance:has(+ .mbus-date-input--return:not(:placeholder-shown)) {
	display: none;
}

/* The calendar itself is the plugin's: assets/js/search-form.js puts its
   .wbbm-datepicker-modern skin on #ui-datepicker-div, and that skin (in
   the plugin's own wbbm-search-modern.css) sets its own z-index at a
   higher specificity than this. This is only the floor for the moment
   before the skin lands, and for a site that has dequeued that CSS —
   jQuery UI appends one shared panel to <body>, which must still clear
   the fixed header. */
.ui-datepicker {
	z-index: 100 !important;
}

/* ---------------------------------------------------------------------------
 * Components inside editor content
 *
 * [bus-search-form] / [mbus-search-form] put the search panel inside
 * .mbus-entry__content, which styles prose: a 1.75 line-height, a slate
 * body colour, and list rules. Those are right for a paragraph and wrong
 * for a component, and they are why the panel looked different on a page
 * than it does in the homepage hero, where nothing wraps it.
 *
 * Inheritance is the larger half of it. The mockup sizes most text with
 * Tailwind classes that set their own line-height, but the ones using an
 * arbitrary size (the `text-[10px]` field labels) set only font-size — so
 * they were inheriting a 17.5px line box for 10px text and pushing the
 * stack inside each 72px field out of position.
 *
 * So the panel opts out of prose entirely and goes back to the mockup's
 * own defaults. Anything the design wants is already declared on the
 * elements themselves.
 * ------------------------------------------------------------------------ */

.mbus-entry__content .mbus-search-card {
	color: rgb(15, 23, 42);
	font-size: 1rem;
	line-height: 1.5;
}

/* .mbus-stop-list's own rules already win on list-style and padding (same
   specificity, declared later), but nothing there resets the prose
   list-item spacing, which was pushing the dropdown options apart. */
.mbus-entry__content .mbus-search-card li + li {
	margin-top: 0;
}

/* Prose puts 1.25rem between sibling blocks. Inside the panel the spacing
   is the mockup's own gap/space-y utilities. */
.mbus-entry__content .mbus-search-card > * + * {
	margin-top: 0;
}

/* ---------------------------------------------------------------------------
 * Colour utilities on links
 *
 * WordPress emits this from theme.json's elements.link setting:
 *
 *     a:where(:not(.wp-element-button)) { color: #0ea472; }
 *
 * It is a weak selector — :where() contributes no specificity — but it is
 * *unlayered*, and every utility in mockup.css lives in @layer utilities.
 * A layered rule loses to an unlayered one no matter how specific it is,
 * so that rule beat .text-white on every anchor: the Log Out and Sign Up
 * buttons in the header, and Explore Offers on the promo banner, were all
 * painting primary-green text on a primary-green button.
 *
 * Re-asserted here rather than by dropping the theme.json setting, which
 * still gives a sensible link colour to plugin and WooCommerce output that
 * the theme does not style itself.
 *
 * Anything else the design paints on an <a> through a utility class needs
 * the same treatment, for the same reason — a colour set by inline style
 * or by a theme rule of our own is unaffected, since both are unlayered
 * too. Only text-white is used that way today.
 * ------------------------------------------------------------------------ */

a.text-white,
a.text-white:hover,
a.text-white:focus {
	color: #fff;
}


/* ---------------------------------------------------------------------------
 * Search results page
 *
 * How tall this page is depends entirely on the query: a route with no
 * buses renders the search panel and nothing after it, which leaves the
 * footer sitting directly under the header on a tall screen.
 *
 * The floor is the viewport minus the fixed header, so the main region
 * always reaches the fold and the footer starts at or below it. A page
 * with real results is taller than this and unaffected.
 * ------------------------------------------------------------------------ */

.mbus-search-page .site-main {
	min-height: calc(100vh - 4rem);
}

/* ---------------------------------------------------------------------------
 * FAQ accordion
 *
 * The one homepage section the mockup does not contain, so its look is
 * assembled from the utilities the mockup does define — the same card,
 * radius, border and type as the feature and testimonial cards — and only
 * the accordion mechanics are written here, because no utility provides
 * them.
 *
 * Built on <details>/<summary>, so the open/closed state, keyboard
 * operation and screen-reader semantics are the browser's rather than
 * something the theme has to reimplement and get wrong.
 * ------------------------------------------------------------------------ */

.mbus-faq__item {
	overflow: hidden;
}

.mbus-faq__question {
	/* Safari still paints a disclosure triangle without this, and it sits
	   awkwardly beside the design's own icon chip. */
	list-style: none;
}

.mbus-faq__question::-webkit-details-marker {
	display: none;
}

.mbus-faq__question::marker {
	content: '';
}

.mbus-faq__question:focus-visible {
	outline: 2px solid var(--mbus-primary);
	outline-offset: -2px;
	border-radius: 1rem;
}

/* The plus turns into a minus as the answer opens — one glyph doing both
   jobs, which is why the icon is a plus rather than a chevron. */
.mbus-faq__item[open] .mbus-faq__icon {
	transform: rotate(45deg);
}

/* The mockup has no `pb-5`, and the padding belongs to the answer rather
   than to the summary above it, so it is declared here. */
.mbus-faq__answer {
	padding-bottom: 1.25rem;
}

.mbus-faq__answer-text {
	margin: 0;
}

/* Hovering anywhere on the row should feel like the rest of the design's
   cards, which lift on hover. */
.mbus-faq__item:hover {
	box-shadow: rgba(0, 0, 0, 0.08) 0 8px 24px !important;
}