/*!
Theme Name: Africa shipping logistics
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: africa-shipping-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.

Africa shipping 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/
*/

:root {
	--background: #ffffff;
	--foreground: #0f172a;
	--secondary: #f1f5f9;
	--secondary-foreground: #0f172a;
	--muted: #f1f5f9;
	--muted-foreground: #64748b;
	--card: #ffffff;
	--card-foreground: #0f172a;
	--border: #e2e8f0;
	--navy: #0d1e3d;
	--navy-deep: #081329;
	--navy-foreground: #ffffff;
	--brand-red: #ef4444;
	--brand-red-hover: #dc2626;
	--brand-orange: #f97316;
}

html {
	scroll-behavior: smooth;
}

[id] {
	scroll-margin-top: 110px;
}

.bg-secondary {
	background-color: #f1f5f9 !important;
}

/**
 * Style Contact Form 7 elements (Global & Light background forms)
 */
.wpcf7 {
	width: 100%;
}

.wpcf7-form h3 {
	font-family: var(--font-display, inherit) !important;
	font-weight: 800 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.025em !important;
	color: #0d1e3d !important;
	font-size: 1.125rem !important;
	margin-top: 3rem !important;
	padding-top: 0.5rem !important;
	margin-bottom: 1.25rem !important;
	padding-bottom: 0.625rem !important;
	border-bottom: 1px solid #e2e8f0 !important;
	display: block !important;
	clear: both !important;
}

.wpcf7-form h3:first-child,
.wpcf7-form > div:first-child h3,
.wpcf7-form > h3:first-child {
	margin-top: 0 !important;
	padding-top: 0 !important;
}

.wpcf7-form label {
	display: block !important;
	font-size: 0.875rem !important;
	font-weight: 600 !important;
	color: #334155 !important;
	margin-bottom: 0.25rem !important;
}

.wpcf7-form-control-wrap {
	display: block !important;
	width: 100% !important;
	margin-top: 0.25rem !important;
}

/* Light Background CF7 Input Fields */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="number"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="date"],
.wpcf7-form select,
.wpcf7-form textarea {
	display: block;
	width: 100% !important;
	border-radius: 0.5rem !important;
	background-color: #f8fafc !important;
	border: 1px solid #cbd5e1 !important;
	padding: 0.75rem 1rem !important;
	font-size: 0.9375rem !important;
	color: #0f172a !important;
	outline: none !important;
	box-sizing: border-box !important;
	transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, background-color 0.15s ease-in-out;
}

.wpcf7-form input[type="text"]::placeholder,
.wpcf7-form input[type="email"]::placeholder,
.wpcf7-form input[type="tel"]::placeholder,
.wpcf7-form textarea::placeholder {
	color: #94a3b8 !important;
}

.wpcf7-form input[type="text"]:focus,
.wpcf7-form input[type="email"]:focus,
.wpcf7-form input[type="tel"]:focus,
.wpcf7-form select:focus,
.wpcf7-form textarea:focus {
	border-color: #ef4444 !important;
	background-color: #ffffff !important;
	box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15) !important;
}

.wpcf7-form select option {
	color: #0f172a !important;
	background-color: #ffffff !important;
}

/* Global / Light Submit Button */
.wpcf7-form input[type="submit"],
.wpcf7-form button[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 0.5rem !important;
	background-color: #ef4444 !important;
	border: none !important;
	padding: 0.875rem 2rem !important;
	font-size: 0.9375rem !important;
	font-weight: 700 !important;
	color: #ffffff !important;
	letter-spacing: 0.05em !important;
	cursor: pointer !important;
	transition: background-color 0.15s ease-in-out, transform 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
	text-transform: uppercase !important;
	box-shadow: 0 1px 3px 0 rgba(239, 68, 68, 0.2) !important;
	margin-top: 1rem !important;
}

.wpcf7-form input[type="submit"]:hover,
.wpcf7-form button[type="submit"]:hover {
	background-color: #dc2626 !important;
	box-shadow: 0 4px 6px -1px rgba(239, 68, 68, 0.3) !important;
}

.wpcf7-form input[type="submit"]:disabled,
.wpcf7-form button[type="submit"]:disabled {
	opacity: 0.7 !important;
}

.wpcf7-response-output {
	margin: 1.25rem 0 0 0 !important;
	padding: 0.875rem 1.25rem !important;
	border-radius: 0.5rem !important;
	font-size: 0.875rem !important;
	font-weight: 500 !important;
	border: 1px solid #cbd5e1 !important;
	background-color: #f8fafc !important;
	color: #0f172a !important;
}

.wpcf7-not-valid-tip {
	color: #ef4444 !important;
	font-size: 0.8125rem !important;
	margin-top: 0.375rem !important;
	font-weight: 500 !important;
}

/**
 * Style Contact Form 7 elements inside Navy / Dark containers (e.g. Hero block form)
 */
.bg-navy .wpcf7,
.bg-navy-deep .wpcf7 {
	width: 100%;
}

.bg-navy .wpcf7-form p,
.bg-navy-deep .wpcf7-form p {
	color: rgba(255, 255, 255, 0.85) !important;
	margin: 0 !important;
}

.bg-navy .wpcf7-form h2,
.bg-navy .wpcf7-form h3,
.bg-navy-deep .wpcf7-form h2,
.bg-navy-deep .wpcf7-form h3 {
	color: #ffffff !important;
	border-bottom-color: rgba(255, 255, 255, 0.2) !important;
}

.bg-navy .wpcf7-form label,
.bg-navy-deep .wpcf7-form label {
	color: #e2e8f0 !important;
	font-weight: 600 !important;
}

.bg-navy .wpcf7-form-control-wrap,
.bg-navy-deep .wpcf7-form-control-wrap {
	display: block;
	width: 100%;
	margin-top: 0.375rem !important;
}

.bg-navy .wpcf7-form input[type="text"],
.bg-navy .wpcf7-form input[type="email"],
.bg-navy .wpcf7-form input[type="tel"],
.bg-navy .wpcf7-form select,
.bg-navy .wpcf7-form textarea,
.bg-navy-deep .wpcf7-form input[type="text"],
.bg-navy-deep .wpcf7-form input[type="email"],
.bg-navy-deep .wpcf7-form input[type="tel"],
.bg-navy-deep .wpcf7-form select,
.bg-navy-deep .wpcf7-form textarea {
	display: block;
	width: 100% !important;
	border-radius: 0.375rem !important;
	background-color: rgba(255, 255, 255, 0.12) !important;
	border: 1px solid rgba(255, 255, 255, 0.2) !important;
	padding: 0.625rem 0.75rem !important;
	font-size: 0.875rem !important;
	color: #ffffff !important;
	outline: none !important;
	box-sizing: border-box !important;
	transition: border-color 0.15s ease-in-out, background-color 0.15s ease-in-out;
}

.bg-navy .wpcf7-form input[type="text"]::placeholder,
.bg-navy .wpcf7-form input[type="email"]::placeholder,
.bg-navy .wpcf7-form input[type="tel"]::placeholder,
.bg-navy .wpcf7-form textarea::placeholder,
.bg-navy-deep .wpcf7-form input[type="text"]::placeholder,
.bg-navy-deep .wpcf7-form input[type="email"]::placeholder,
.bg-navy-deep .wpcf7-form input[type="tel"]::placeholder,
.bg-navy-deep .wpcf7-form textarea::placeholder {
	color: rgba(255, 255, 255, 0.5) !important;
}

.bg-navy .wpcf7-form input[type="text"]:focus,
.bg-navy .wpcf7-form input[type="email"]:focus,
.bg-navy .wpcf7-form input[type="tel"]:focus,
.bg-navy .wpcf7-form select:focus,
.bg-navy .wpcf7-form textarea:focus,
.bg-navy-deep .wpcf7-form input[type="text"]:focus,
.bg-navy-deep .wpcf7-form input[type="email"]:focus,
.bg-navy-deep .wpcf7-form input[type="tel"]:focus,
.bg-navy-deep .wpcf7-form select:focus,
.bg-navy-deep .wpcf7-form textarea:focus {
	border-color: #ef4444 !important;
	background-color: rgba(255, 255, 255, 0.18) !important;
}

.bg-navy .wpcf7-form select option,
.bg-navy-deep .wpcf7-form select option {
	color: #0d1e3d !important;
	background-color: #ffffff !important;
}

.bg-navy .wpcf7-form input[type="submit"],
.bg-navy-deep .wpcf7-form input[type="submit"] {
	display: block;
	width: 100% !important;
	margin-top: 1.25rem !important;
	border-radius: 0.375rem !important;
	background-color: #ef4444 !important;
	border: none !important;
	padding: 0.875rem 1.25rem !important;
	font-size: 0.875rem !important;
	font-weight: 700 !important;
	color: #ffffff !important;
	letter-spacing: 0.05em !important;
	cursor: pointer !important;
	transition: background-color 0.15s ease-in-out;
	text-transform: uppercase !important;
}

.bg-navy .wpcf7-form input[type="submit"]:hover,
.bg-navy-deep .wpcf7-form input[type="submit"]:hover {
	background-color: #dc2626 !important;
}

.bg-navy .wpcf7-form input[type="submit"]:disabled,
.bg-navy-deep .wpcf7-form input[type="submit"]:disabled {
	opacity: 0.7 !important;
}

.bg-navy .wpcf7-response-output {
	margin: 1rem 0 0 0 !important;
	padding: 0.75rem 1rem !important;
	border-radius: 0.375rem !important;
	font-size: 0.875rem !important;
	border: 1px solid rgba(255, 255, 255, 0.15) !important;
	color: #ffffff !important;
}

/* Custom Block Spacing Utilities (Padding & Margin Adjustments) */
.pt-0 {
	padding-top: 0 !important;
}

.pt-6 {
	padding-top: 1.5rem !important;
}

.pt-10 {
	padding-top: 2.5rem !important;
}

.pt-12 {
	padding-top: 3rem !important;
}

.pt-16 {
	padding-top: 4rem !important;
}

.pt-24 {
	padding-top: 6rem !important;
}

.pt-32 {
	padding-top: 8rem !important;
}

.pb-0 {
	padding-bottom: 0 !important;
}

.pb-6 {
	padding-bottom: 1.5rem !important;
}

.pb-10 {
	padding-bottom: 2.5rem !important;
}

.pb-12 {
	padding-bottom: 3rem !important;
}

.pb-16 {
	padding-bottom: 4rem !important;
}

.pb-24 {
	padding-bottom: 6rem !important;
}

.pb-32 {
	padding-bottom: 8rem !important;
}

.mt-0 {
	margin-top: 0 !important;
}

.mt-6 {
	margin-top: 1.5rem !important;
}

.mt-12 {
	margin-top: 3rem !important;
}

.mt-16 {
	margin-top: 4rem !important;
}

.-mt-6 {
	margin-top: -1.5rem !important;
}

.-mt-12 {
	margin-top: -3rem !important;
}

.-mt-16 {
	margin-top: -4rem !important;
}

.mb-0 {
	margin-bottom: 0 !important;
}

.mb-4 {
	margin-bottom: 1rem !important;
}

.mb-6 {
	margin-bottom: 1.5rem !important;
}

.mb-8 {
	margin-bottom: 2rem !important;
}

.mb-10 {
	margin-bottom: 2.5rem !important;
}

.mb-12 {
	margin-bottom: 3rem !important;
}

@media (min-width: 768px) {
	.md\:pt-0 {
		padding-top: 0 !important;
	}

	.md\:pt-10 {
		padding-top: 2.5rem !important;
	}

	.md\:pt-16 {
		padding-top: 4rem !important;
	}

	.md\:pt-24 {
		padding-top: 6rem !important;
	}

	.md\:pt-32 {
		padding-top: 8rem !important;
	}

	.md\:pb-0 {
		padding-bottom: 0 !important;
	}

	.md\:pb-10 {
		padding-bottom: 2.5rem !important;
	}

	.md\:pb-16 {
		padding-bottom: 4rem !important;
	}

	.md\:pb-24 {
		padding-bottom: 6rem !important;
	}

	.md\:pb-32 {
		padding-bottom: 8rem !important;
	}
}

/* Rich Text & Block Typography (.prose-asl) */
.prose-asl h2 {
	font-family: var(--font-display, inherit) !important;
	font-weight: 800 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.025em !important;
	color: #0d1e3d !important;
	/* text-navy */
	font-size: 1.75rem !important;
	margin-top: 0 !important;
	margin-bottom: 0.5rem !important;
}

.prose-asl h3 {
	font-family: var(--font-display, inherit) !important;
	font-weight: 800 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.025em !important;
	color: #0d1e3d !important;
	/* text-navy */
	font-size: 1.125rem !important;
	margin-top: 2rem !important;
	margin-bottom: 0.75rem !important;
	padding-bottom: 0.375rem !important;
	position: relative !important;
	display: block !important;
}

.prose-asl h3::after {
	content: "" !important;
	display: block !important;
	width: 2.5rem !important;
	height: 3px !important;
	background-color: #ef4444 !important;
	/* bg-brand-red */
	border-radius: 9999px !important;
	margin-top: 0.375rem !important;
}

.prose-asl strong,
.prose-asl b {
	color: #0d1e3d !important;
	font-weight: 700 !important;
}

.prose-asl p {
	color: #334155 !important;
	/* text-slate-700 */
	font-size: 0.9375rem !important;
	line-height: 1.65 !important;
	margin-bottom: 1.25rem !important;
}

.prose-asl ul {
	list-style: none !important;
	padding-left: 0 !important;
	margin-top: 1rem !important;
	margin-bottom: 1.5rem !important;
}

.prose-asl ul li {
	position: relative !important;
	padding-left: 1.5rem !important;
	margin-bottom: 0.625rem !important;
	color: #334155 !important;
	font-size: 0.9375rem !important;
	line-height: 1.625 !important;
}

.prose-asl ul li::before {
	content: "" !important;
	position: absolute !important;
	left: 0 !important;
	top: 0.55em !important;
	width: 0.5rem !important;
	height: 0.5rem !important;
	border-radius: 9999px !important;
	background-color: #ef4444 !important;
	/* bg-brand-red */
	box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.15) !important;
}

.prose-asl h3:empty {
	display: none !important;
}

.prose-asl a {
	color: #ef4444 !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	transition: color 0.15s ease !important;
}

.prose-asl a:hover {
	text-decoration: underline !important;
	color: #dc2626 !important;
}

/* Light text variant for dark backgrounds (e.g. .bg-navy) */
.prose-asl-light p,
.prose-asl-light ul li,
.bg-navy .prose-asl p,
.bg-navy .prose-asl ul li {
	color: #e2e8f0 !important;
}

.prose-asl-light strong,
.prose-asl-light b,
.prose-asl-light h2,
.prose-asl-light h3,
.prose-asl-light h4,
.bg-navy .prose-asl strong,
.bg-navy .prose-asl b,
.bg-navy .prose-asl h2,
.bg-navy .prose-asl h3,
.bg-navy .prose-asl h4 {
	color: #ffffff !important;
}

.prose-asl-light a,
.bg-navy .prose-asl a {
	color: #ff6b6b !important;
	font-weight: 600 !important;
}

.prose-asl-light a:hover,
.bg-navy .prose-asl a:hover {
	color: #ffffff !important;
	text-decoration: underline !important;
}

/* Specification Tables (.prose-asl table) */
.prose-asl table {
	width: 100% !important;
	max-width: 100% !important;
	border-collapse: separate !important;
	border-spacing: 0 !important;
	margin-top: 1rem !important;
	margin-bottom: 1.25rem !important;
	border-radius: 0.75rem !important;
	overflow: hidden !important;
	border: 1px solid #e2e8f0 !important;
	box-shadow: 0 1px 3px 0 rgba(15, 23, 42, 0.05) !important;
	background-color: #ffffff !important;
}

.prose-asl th,
.prose-asl thead td {
	background-color: #0d1e3d !important;
	/* bg-navy */
	color: #ffffff !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	font-size: 0.8125rem !important;
	letter-spacing: 0.05em !important;
	padding: 0.75rem 1rem !important;
	border: none !important;
	text-align: left !important;
}

.prose-asl td {
	padding: 0.75rem 1rem !important;
	border-bottom: 1px solid #f1f5f9 !important;
	color: #334155 !important;
	font-size: 0.875rem !important;
	line-height: 1.5 !important;
}

.prose-asl tbody tr:last-child td {
	border-bottom: none !important;
}

.prose-asl tbody tr:nth-child(even) {
	background-color: #f8fafc !important;
}

.prose-asl tbody tr:hover {
	background-color: #f1f5f9 !important;
}