/*!
Theme Name: Dotline Logistics
Theme URI: http://underscores.me/
Author: Dotline Logistics
Author URI: http://underscores.me/
Description: Raw Underscores theme with the Dotline Sangotedo booking page as the homepage.
Version: 1.0.2
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: dotline-logistics
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Dotline Logistics is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/* Inner WordPress pages only. The booking app loads assets/css/booking.css. */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	height: auto;
	overflow-x: hidden;
	overflow-y: auto;
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	min-height: 100%;
	height: auto;
	overflow: auto;
	display: block;
	background: #F5F7FB;
	color: #101828;
	font-family: Inter, system-ui, sans-serif;
	font-size: 16px;
	line-height: 1.65;
	letter-spacing: -0.01em;
}

body.page,
body.blog,
body.single,
body.archive,
body.search,
body.error404,
body.home:not(.dotline-booking) {
	display: block;
	height: auto;
	min-height: 100vh;
	overflow: visible;
	grid-template-columns: none;
}

img,
video {
	max-width: 100%;
	height: auto;
}

a {
	color: #155EEF;
	text-decoration: none;
}

a:hover,
a:focus {
	color: #0B3FB3;
	text-decoration: underline;
}

h1, h2, h3, h4, h5, h6 {
	color: #101828;
	line-height: 1.25;
	letter-spacing: -0.03em;
	margin: 0 0 0.6em;
}

p {
	margin: 0 0 1em;
}

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	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: auto !important;
	clip-path: none;
	color: #101828;
	display: block;
	font-size: 0.9rem;
	font-weight: 700;
	height: auto;
	left: 12px;
	line-height: normal;
	padding: 10px 14px;
	text-decoration: none;
	top: 12px;
	width: auto;
	z-index: 100000;
	border-radius: 8px;
}

#page.site {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	overflow: visible;
	background: #F5F7FB;
}

.site-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 18px clamp(20px, 5vw, 56px);
	background: #071B34;
	color: #fff;
}

.site-branding {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

.site-title {
	margin: 0;
	font-size: 1.05rem;
	font-weight: 800;
	letter-spacing: -0.02em;
}

.site-title a,
.site-description {
	color: #fff;
	text-decoration: none;
}

.site-description {
	margin: 2px 0 0;
	font-size: 0.75rem;
	color: rgba(255, 255, 255, 0.7);
}

.custom-logo-link img,
.custom-logo {
	display: block;
	width: 44px;
	height: 44px;
	object-fit: cover;
	border-radius: 10px;
	background: #fff;
}

.main-navigation {
	position: relative;
}

.menu-toggle {
	display: none;
	border: 1px solid rgba(255, 255, 255, 0.2);
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
	border-radius: 10px;
	padding: 8px 12px;
	font: inherit;
	font-size: 0.82rem;
	font-weight: 700;
	cursor: pointer;
}

.main-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}

.main-navigation a {
	display: block;
	padding: 8px 12px;
	color: rgba(255, 255, 255, 0.86);
	font-size: 0.88rem;
	font-weight: 600;
	text-decoration: none;
	border-radius: 10px;
}

.main-navigation a:hover,
.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a {
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
	text-decoration: none;
}

.site-content,
.site-main {
	flex: 1 1 auto;
}

.site-main {
	width: min(820px, calc(100% - 40px));
	margin: 36px auto 56px;
	padding: 32px 28px;
	background: #fff;
	border: 1px solid #E7EBF2;
	border-radius: 20px;
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 8px 24px rgba(16, 24, 40, 0.04);
}

.entry-title {
	margin-bottom: 18px;
	font-size: clamp(1.7rem, 4vw, 2.3rem);
}

.entry-content h2 {
	margin-top: 1.4em;
}

.entry-content ul,
.entry-content ol {
	padding-left: 1.2em;
}

.alignleft {
	float: left;
	margin: 0 1.2em 1em 0;
}

.alignright {
	float: right;
	margin: 0 0 1em 1.2em;
}

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

.wp-block-image img,
.entry-content img {
	border-radius: 12px;
}

.widget-area {
	width: min(820px, calc(100% - 40px));
	margin: 0 auto 40px;
}

.site-footer {
	margin-top: auto;
	padding: 22px clamp(20px, 5vw, 56px);
	background: #071B34;
	color: rgba(255, 255, 255, 0.7);
	font-size: 0.82rem;
}

.site-footer a {
	color: #79B4FF;
}

@media (max-width: 782px) {
	.site-header {
		flex-wrap: wrap;
	}

	.menu-toggle {
		display: inline-flex;
	}

	.main-navigation ul {
		display: none;
		flex-direction: column;
		width: 100%;
		padding-top: 8px;
	}

	.main-navigation.toggled ul {
		display: flex;
	}
}