/**
Theme Name: Taxi Theme
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: taxi-theme
Template: astra
*/

/* ==========================================================================
   Site header & footer - gradient brand chrome, matching the app's design
   system (indigo -> magenta gradient, Space Grotesk / Manrope).
   ========================================================================== */

:root {
	--taxi-ink: #0f172a;
	--taxi-muted: #64748b;
	--taxi-grad-1: oklch(58% 0.19 265);
	--taxi-grad-2: oklch(60% 0.19 330);
	--taxi-grad-dark-1: oklch(46% 0.17 266);
	--taxi-grad-dark-2: oklch(50% 0.19 320);
	--taxi-grad-dark-3: oklch(53% 0.19 350);
	--taxi-border: #e2e8f0;
}

body {
	font-family: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

#masthead.site-header {
	position: relative;
	overflow: hidden;
	background: linear-gradient(120deg, var(--taxi-grad-dark-1), var(--taxi-grad-dark-2), var(--taxi-grad-dark-3));
	border-bottom: none;
	box-shadow: 0 8px 24px oklch(30% 0.12 290 / 0.25);
}

/*
 * overflow:hidden above exists only to clip the decorative blurred circles
 * (::before/::after) to the header bar. The mobile dropdown menu renders
 * as a normal-flow child of this same element, though, and needs to
 * expand well below the header's own 70px height - clipped by the same
 * rule, it gets full layout dimensions (position, size) but never
 * actually paints, silently "disappearing" while open. Lift the clip only
 * while the menu is open; it's back in place the instant it closes.
 */
body.ast-main-header-nav-open #masthead.site-header {
	overflow: visible;
}

#masthead.site-header::before {
	content: "";
	position: absolute;
	top: -60px;
	right: 120px;
	width: 220px;
	height: 220px;
	border-radius: 999px;
	background: oklch(90% 0.12 340 / 0.18);
	filter: blur(6px);
	pointer-events: none;
}

#masthead.site-header::after {
	content: "";
	position: absolute;
	bottom: -80px;
	left: 60px;
	width: 180px;
	height: 180px;
	border-radius: 999px;
	background: oklch(85% 0.14 260 / 0.16);
	filter: blur(6px);
	pointer-events: none;
}

#masthead .ast-primary-header-bar {
	position: relative;
	height: 70px !important;
	min-height: 0 !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

#masthead .site-primary-header-wrap {
	height: 70px !important;
	min-height: 0 !important;
	box-sizing: border-box;
	max-width: 1240px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 40px;
	padding-right: 40px;
}

#masthead .ast-builder-grid-row {
	height: 100%;
	align-items: center;
}

#masthead .ast-site-identity {
	display: flex;
	align-items: center;
	gap: 12px;
}

#masthead .ast-site-identity::before {
	content: "";
	flex-shrink: 0;
	width: 30px;
	height: 30px;
	background-color: #ffffff;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 17h14M6 17v-4l1.5-4.5A2 2 0 0 1 9.4 7h5.2a2 2 0 0 1 1.9 1.5L18 13v4M7 17a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zM20 17a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 17h14M6 17v-4l1.5-4.5A2 2 0 0 1 9.4 7h5.2a2 2 0 0 1 1.9 1.5L18 13v4M7 17a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zM20 17a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z'/%3E%3C/svg%3E");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}

/*
 * Astra paints its own opaque background on this inner bar (the
 * "Header Background Color" customizer target), which otherwise sits on
 * top of and completely hides the gradient set on #masthead itself.
 */
#masthead.site-header .main-header-bar,
#masthead.site-header .ast-above-header-bar,
#masthead.site-header .ast-below-header-bar {
	background: transparent !important;
}

#masthead .site-title,
#masthead .site-title a {
	font-family: 'Space Grotesk', sans-serif;
	font-weight: 700;
	font-size: 24px;
	letter-spacing: -0.02em;
	color: #ffffff !important;
	transition: opacity 0.15s ease;
}

#masthead .site-title a:hover {
	opacity: 0.85;
}

#masthead .main-header-menu {
	gap: 20px;
}

#masthead .main-header-menu .menu-item > .menu-link {
	position: relative;
	height: auto !important;
	display: inline-flex !important;
	align-items: center;
	line-height: 1.2 !important;
	font-weight: 600;
	font-size: 14px;
	color: #ffffff;
	background-color: oklch(100% 0 0 / 0.16);
	border: 1px solid oklch(100% 0 0 / 0.3);
	padding: 9px 16px !important;
	border-radius: 999px;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

#masthead .main-header-menu .menu-item {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

#masthead .main-header-menu .menu-item:not(.current-menu-item) > .menu-link:hover {
	color: #ffffff;
	background-color: oklch(100% 0 0 / 0.24);
	border-color: oklch(100% 0 0 / 0.45);
}

#masthead .main-header-menu .current-menu-item > .menu-link {
	color: oklch(20% 0.03 265);
	background-color: #ffffff;
	border-color: transparent;
}

#masthead .main-header-menu .current-menu-item > .menu-link:hover {
	color: oklch(20% 0.03 265);
	background-color: #ffffff;
}

/*
 * "Log out" is always the last item in this menu (see inc/front-page.php) -
 * per the design, it's plain text, not a pill, unlike the other nav items.
 */
#masthead .main-header-menu .menu-item:last-child > .menu-link {
	background-color: transparent;
	border-color: transparent;
	color: #ffffff;
	opacity: 0.85;
	padding: 9px 10px !important;
	font-weight: 600;
}

#masthead .main-header-menu .menu-item:last-child > .menu-link:hover {
	background-color: transparent;
	opacity: 1;
}

/*
 * The hamburger/close toggle is Astra's own inline SVG (fill:currentColor)
 * with no color of its own set - it inherits the theme's default link
 * blue, which is both low-contrast and off-brand against the purple/
 * magenta gradient bar. Match it to the rest of the header chrome: white
 * icon on the same translucent pill used for the desktop nav items.
 */
#masthead .ast-mobile-menu-trigger-minimal {
	color: #ffffff;
	background-color: oklch(100% 0 0 / 0.16);
	border: 1px solid oklch(100% 0 0 / 0.3);
	border-radius: 10px;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

/*
 * The SVG carries fill="currentColor" in its markup, but Astra's own CSS
 * sets `fill` directly (a hardcoded blue, not currentColor) - a
 * stylesheet's `fill` always wins over the element's own presentation
 * attribute, so the color override above never reaches the icon itself.
 * Target fill directly rather than relying on currentColor inheritance.
 */
#masthead .ast-mobile-menu-trigger-minimal svg {
	fill: #ffffff;
}

#masthead .ast-mobile-menu-trigger-minimal:hover,
#masthead .ast-mobile-menu-trigger-minimal:focus {
	color: #ffffff;
	background-color: oklch(100% 0 0 / 0.24);
	border-color: oklch(100% 0 0 / 0.45);
}

/*
 * Astra collapses the header into a dropdown menu by adding this class to
 * <body> once the nav can't fit inline (JS-measured against the header's
 * own configured break point, not a fixed CSS media query) - it reuses the
 * SAME <ul> as the desktop pill nav above, just repositioned into a
 * dropdown with Astra's own near-white background. Unscoped, the white
 * pill styling meant for the purple gradient bar applies there too,
 * rendering white text on a near-white dropdown - invisible.
 */
/*
 * The dropdown itself is a bare <ul> with no panel of its own - full-bleed
 * pills flush against the screen edges, dropping straight onto whatever
 * page content happens to sit underneath with no visual separation. Give
 * it a proper solid panel instead; its own opaque background also covers
 * the decorative header circles now bleeding through behind it (they're
 * only visible because #masthead's overflow is lifted while this is open).
 */
body.ast-header-break-point #masthead .main-header-menu {
	position: relative;
	z-index: 5;
	background: #ffffff;
	padding: 16px;
	gap: 10px;
	border-radius: 0 0 20px 20px;
	box-shadow: 0 16px 32px oklch(20% 0.05 290 / 0.25);
}

body.ast-header-break-point #masthead .main-header-menu .menu-item > .menu-link {
	color: var(--taxi-ink);
	background-color: transparent;
	border-color: var(--taxi-border);
}

body.ast-header-break-point #masthead .main-header-menu .menu-item:not(.current-menu-item) > .menu-link:hover {
	color: var(--taxi-ink);
	background-color: oklch(96% 0.01 265);
	border-color: var(--taxi-border);
}

body.ast-header-break-point #masthead .main-header-menu .current-menu-item > .menu-link {
	color: #ffffff;
	background: linear-gradient(120deg, var(--taxi-grad-dark-1), var(--taxi-grad-dark-2));
	border-color: transparent;
}

body.ast-header-break-point #masthead .main-header-menu .current-menu-item > .menu-link:hover {
	color: #ffffff;
	background: linear-gradient(120deg, var(--taxi-grad-dark-1), var(--taxi-grad-dark-2));
}

body.ast-header-break-point #masthead .main-header-menu .menu-item:last-child > .menu-link {
	color: var(--taxi-ink);
	opacity: 1;
}

#colophon.site-footer {
	background: linear-gradient(120deg, oklch(24% 0.05 270), oklch(26% 0.07 320));
	border-top: 1px solid oklch(60% 0.19 330 / 0.4);
	margin-top: 0;
}

#colophon .site-below-footer-wrap {
	background: transparent !important;
	padding-top: 22px;
	padding-bottom: 22px;
}

#colophon .site-below-footer-wrap.ast-container {
	box-sizing: border-box;
	max-width: 1240px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 40px;
	padding-right: 40px;
}

#colophon .ss-footer-copyright {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}

#colophon .ss-footer-brand {
	display: flex;
	align-items: baseline;
	gap: 4px;
}

#colophon .ss-footer-brand-name {
	font-family: 'Space Grotesk', sans-serif;
	font-weight: 700;
	font-size: 15px;
	color: #ffffff;
}

#colophon .ss-footer-brand-tagline {
	font-size: 13px;
	color: oklch(85% 0.01 270 / 0.6);
}

#colophon .ss-footer-copy {
	margin: 0;
	font-family: 'Manrope', sans-serif;
	font-size: 13px;
	color: oklch(85% 0.01 270 / 0.65);
}

@media (max-width: 600px) {
	#masthead .site-primary-header-wrap {
		padding-left: 16px;
		padding-right: 16px;
	}

	#masthead .site-title,
	#masthead .site-title a {
		font-size: 19px;
	}

}