/*
Theme Name: Barefoot Frontline Fleet
Theme URI: https://fleet.bfazambia.com/
Author: Barefoot Frontline Agency
Author URI: https://bfazambia.com/
Description: Elementor-ready theme for Barefoot Frontline Fleet, the fleet management and vehicle tracking division of Barefoot Frontline Agency (Lusaka, Zambia), official Zambia partner of Skytrack. Paving the way. One Step Ahead. Brand colours, system sans-serif type, built-in SEO (titles, meta descriptions, Open Graph, Schema.org incl. FAQ) and a one-click importer for nine pages.
Version: 1.0.0
Requires at least: 6.2
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: barefoot-frontline-fleet
Tags: custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, one-column, full-width-template, business
*/

/* ==========================================================================
   1. Brand tokens
   Mirrored in functions.php (BAREFOOT_PALETTE) for the block editor palette
   and the Elementor global kit. Change a colour in both places.
   ========================================================================== */
:root {
	--bf-primary: #E9009A;        /* Barefoot Magenta */
	--bf-secondary: #009AA2;      /* Frontline Teal */
	--bf-white: #FFFFFF;
	--bf-primary-dark: #B8007A;   /* accessible magenta for text/hover */
	--bf-secondary-dark: #00737A; /* accessible teal for text/backgrounds */
	--bf-ink: #1A1A2E;
	--bf-muted: #4A4F63;
	--bf-surface: #EEF8F9;
	--bf-surface-alt: #FDF0F8;
	--bf-border: #E6EEF0;

	/* One sans-serif family everywhere: each device's own system UI font
	   (San Francisco on Apple, Segoe UI on Windows, Roboto on Android).
	   Crisp on mobile and nothing extra to download. */
	--bf-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
	--bf-font-heading: var(--bf-font);
	--bf-font-body: var(--bf-font);

	--bf-container: 1200px;
	--bf-gutter: clamp(1rem, 0.8rem + 1vw, 1.5rem);
	--bf-radius: 14px;
}


/* ==========================================================================
   2. Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--bf-white);
	color: var(--bf-ink);
	font-family: var(--bf-font-body);
	font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}
img, video { max-width: 100%; height: auto; }
a { color: var(--bf-secondary-dark); }
a:hover, a:focus { color: var(--bf-primary-dark); }
:focus-visible { outline: 2px solid var(--bf-primary); outline-offset: 2px; }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--bf-font-heading);
	color: var(--bf-ink);
	line-height: 1.2;
	margin: 0 0 .5em;
}
h1 { font-size: clamp(1.875rem, 1.4rem + 2.4vw, 3.25rem); font-weight: 700; letter-spacing: -0.01em; }
h2 { font-size: clamp(1.5rem, 1.25rem + 1.3vw, 2.25rem); font-weight: 700; letter-spacing: -0.01em; }
h3 { font-size: clamp(1.125rem, 1.05rem + .4vw, 1.375rem); font-weight: 700; }

.screen-reader-text {
	border: 0; clip: rect(1px,1px,1px,1px); clip-path: inset(50%);
	height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0;
	position: absolute !important; word-wrap: normal !important;
}
.skip-link:focus {
	clip: auto; clip-path: none; height: auto; width: auto;
	left: 1rem; top: 1rem; z-index: 100000;
	padding: .75rem 1rem; background: var(--bf-white); color: var(--bf-ink);
	box-shadow: 0 4px 16px rgba(0,0,0,.2);
}

.bf-container {
	width: 100%;
	max-width: calc(var(--bf-container) + 2 * var(--bf-gutter));
	margin-inline: auto;
	padding-inline: var(--bf-gutter);
}

.bf-button {
	display: inline-block;
	padding: .8em 1.6em;
	border-radius: 999px;
	background: var(--bf-primary);
	color: var(--bf-white);
	font-family: var(--bf-font-heading);
	font-weight: 700;
	text-decoration: none;
	line-height: 1.2;
	transition: background-color .2s ease;
}
.bf-button:hover, .bf-button:focus { background: var(--bf-primary-dark); color: var(--bf-white); }

/* ==========================================================================
   3. Header
   ========================================================================== */
.bf-topbar {
	background: var(--bf-secondary-dark);
	color: var(--bf-white);
	font-size: .875rem;
}
.bf-topbar .bf-container {
	display: flex; flex-wrap: wrap; gap: .25rem 1.5rem;
	justify-content: space-between; align-items: center;
	padding-block: .45rem;
}
.bf-topbar p { margin: 0; }
.bf-topbar a { color: var(--bf-white); }
.bf-topbar__tagline { font-weight: 700; letter-spacing: .05em; }

.site-header {
	position: sticky; top: 0; z-index: 999;
	background: var(--bf-white);
	border-bottom: 1px solid var(--bf-border);
}
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }
@media (max-width: 600px) { .admin-bar .site-header { top: 0; } }

.site-header__inner {
	display: flex; align-items: center; justify-content: space-between;
	gap: 1.5rem; min-height: 76px;
}
.site-branding { display: flex; align-items: center; gap: .75rem; }
.site-branding img { display: block; width: 170px; max-width: 42vw; height: auto; }
.bf-division {
	display: inline-block; padding: .3rem .7rem; border-radius: 999px;
	background: var(--bf-secondary-dark); color: var(--bf-white);
	font: 700 .75rem/1 var(--bf-font); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
}
@media (max-width: 420px) { .bf-division { display: none; } }
.bf-divisions { font-size: .875rem; }
.site-title { margin: 0; font-family: var(--bf-font-heading); font-weight: 800; font-size: 1.25rem; }
.site-title a { color: var(--bf-ink); text-decoration: none; }

/* Primary navigation */
.primary-nav ul { list-style: none; margin: 0; padding: 0; }
.primary-nav .menu { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1.5rem; }
.primary-nav a {
	display: block; padding: .5rem 0;
	color: var(--bf-ink); text-decoration: none;
	font-family: var(--bf-font-heading); font-weight: 600;
	border-bottom: 2px solid transparent;
}
.primary-nav a:hover, .primary-nav a:focus,
.primary-nav .current-menu-item > a,
.primary-nav .current_page_item > a { color: var(--bf-primary-dark); border-bottom-color: var(--bf-primary); }
.primary-nav .menu-item-has-children { position: relative; }
.primary-nav .menu > .menu-item-has-children > a::after {
	content: ""; display: inline-block; margin-left: .4em; vertical-align: .15em;
	border: 4px solid transparent; border-top-color: currentColor; border-bottom: 0;
}
.primary-nav .sub-menu a { padding: .55rem 0; white-space: nowrap; border-bottom: 0; }
.primary-nav .sub-menu { z-index: 1000; }
.primary-nav .sub-menu {
	position: absolute; left: 0; top: 100%; min-width: 220px;
	background: var(--bf-white); padding: .5rem 1rem;
	box-shadow: 0 12px 32px rgba(26,26,46,.12); border-radius: 10px;
	display: none;
}
.primary-nav .menu-item-has-children:hover > .sub-menu,
.primary-nav .menu-item-has-children:focus-within > .sub-menu { display: block; }
.primary-nav .bf-nav-cta > a {
	padding: .6rem 1.25rem; border-radius: 999px; border: 0;
	background: var(--bf-primary); color: var(--bf-white);
}
.primary-nav .bf-nav-cta > a:hover, .primary-nav .bf-nav-cta > a:focus { background: var(--bf-primary-dark); color: var(--bf-white); }

.menu-toggle {
	display: none;
	align-items: center; gap: .5rem;
	background: transparent; border: 2px solid var(--bf-ink); border-radius: 8px;
	padding: .45rem .7rem; color: var(--bf-ink);
	font: 600 .9rem var(--bf-font-heading); cursor: pointer;
}
.menu-toggle__bars, .menu-toggle__bars::before, .menu-toggle__bars::after {
	display: block; width: 18px; height: 2px; background: currentColor; position: relative; content: "";
}
.menu-toggle__bars::before { position: absolute; top: -6px; }
.menu-toggle__bars::after { position: absolute; top: 6px; }

@media (max-width: 1100px) {
	.menu-toggle { display: inline-flex; }
	.primary-nav {
		display: none;
		position: absolute; left: 0; right: 0; top: 100%;
		background: var(--bf-white);
		border-bottom: 1px solid var(--bf-border);
		box-shadow: 0 16px 32px rgba(26,26,46,.1);
	}
	.primary-nav.is-open { display: block; }
	.primary-nav .menu { flex-direction: column; align-items: stretch; gap: 0; padding: .5rem var(--bf-gutter) 1rem; }
	.primary-nav a { padding: .8rem 0; border-bottom: 1px solid var(--bf-border); }
	.primary-nav .sub-menu { position: static; display: block; box-shadow: none; padding: 0 0 0 1rem; }
	.primary-nav .bf-nav-cta > a { margin-top: .75rem; text-align: center; }
}

/* ==========================================================================
   4. Content (non-Elementor fallbacks: blog, archives, plain pages)
   ========================================================================== */
.site-main { display: block; }
.bf-page-hero {
	background: var(--bf-surface);
	border-bottom: 4px solid var(--bf-primary);
	padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem);
}
.bf-page-hero p { color: var(--bf-muted); margin: 0; }
.bf-eyebrow {
	text-transform: uppercase; letter-spacing: .14em; font-weight: 700;
	font-size: .8125rem; color: var(--bf-primary-dark); margin: 0 0 .5rem;
}
.bf-content { padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem); }
.bf-content .entry-content { max-width: 760px; }
.bf-content .entry-content > * + * { margin-top: 1.1em; }

.bf-post-grid {
	display: grid; gap: 1.5rem;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
}
.bf-card {
	background: var(--bf-white); border-radius: var(--bf-radius);
	box-shadow: 0 6px 24px rgba(26,26,46,.08); overflow: hidden;
	display: flex; flex-direction: column;
}
.bf-card__body { padding: 1.25rem 1.25rem 1.5rem; }
.bf-card__title { font-size: 1.25rem; margin: .25rem 0 .5rem; }
.bf-card__title a { color: var(--bf-ink); text-decoration: none; }
.bf-card__title a:hover { color: var(--bf-primary-dark); }
.bf-card time { font-size: .875rem; font-weight: 600; color: var(--bf-secondary-dark); }
.bf-card img { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.bf-pagination { margin-top: 2.5rem; }
.bf-pagination .nav-links { display: flex; flex-wrap: wrap; gap: .5rem; }
.bf-pagination .page-numbers {
	padding: .4rem .85rem; border-radius: 8px; border: 1px solid var(--bf-border);
	text-decoration: none; color: var(--bf-ink);
}
.bf-pagination .current { background: var(--bf-primary); border-color: var(--bf-primary); color: var(--bf-white); }

/* Elementor: use the theme's sans-serif in every widget, whatever the kit or
   an add-on sets, so type is consistent across the site and on mobile. */
.elementor-widget-heading .elementor-heading-title,
.elementor-widget-text-editor,
.elementor-button,
.elementor-icon-box-title,
.elementor-icon-box-description,
.elementor-image-box-title,
.elementor-image-box-description,
.elementor-icon-list-text,
.elementor-tab-title,
.elementor-tab-content,
.elementor-accordion .elementor-tab-title a,
.elementor-widget-container {
	font-family: var(--bf-font) !important;
}
.elementor-widget-text-editor p:last-child { margin-bottom: 0; }

@media (max-width: 767px) {
	/* Comfortable reading on phones: no tiny text, no cramped headings. */
	.elementor-widget-text-editor { font-size: 16px; line-height: 1.6; }
	.elementor-heading-title { overflow-wrap: anywhere; hyphens: auto; }
	.elementor-icon-list-text { font-size: 15px; }
	.elementor-button { font-size: 15px !important; }
}

/* Elementor full-width pages: let Elementor own the canvas. */
.elementor-page .site-main { padding: 0; }

/* Contact form shortcode [barefoot_contact_form] */
.bf-form { display: grid; gap: 1rem; }
.bf-form__row { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.bf-form label { display: block; font-weight: 600; margin-bottom: .35rem; }
.bf-form input, .bf-form textarea, .bf-form select {
	width: 100%; padding: .75rem .9rem; font: inherit; color: var(--bf-ink);
	border: 1px solid #C9D3D8; border-radius: 10px; background: var(--bf-white);
}
.bf-form input:focus, .bf-form textarea:focus, .bf-form select:focus { border-color: var(--bf-secondary); outline: 2px solid var(--bf-secondary); outline-offset: 0; }
.bf-form button { border: 0; cursor: pointer; font-size: 1rem; justify-self: start; }
.bf-form__hp { position: absolute; left: -9999px; }
.bf-notice { padding: .9rem 1rem; border-radius: 10px; margin-bottom: 1rem; font-weight: 600; }
.bf-notice--ok { background: #E6F6EF; color: #0B5E3B; }
.bf-notice--err { background: #FDECEC; color: #8A1C1C; }

/* ==========================================================================
   5. Footer
   ========================================================================== */
.site-footer { background: var(--bf-ink); color: #D5D7E0; }
.site-footer a { color: var(--bf-white); }
.site-footer a:hover, .site-footer a:focus { color: var(--bf-primary); }
.site-footer__grid {
	display: grid; gap: 2rem 3rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
	padding-block: clamp(3rem, 2.5rem + 2vw, 4.5rem) 2rem;
}
.site-footer h2 { color: var(--bf-white); font-size: 1.0625rem; margin-bottom: 1rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: .45rem; }
.site-footer__tagline { font: 800 1.25rem/1.3 var(--bf-font-heading); color: var(--bf-white); margin: 0 0 .75rem; }
.site-footer__tagline span { color: #4FD3DA; }
.site-footer__bottom {
	border-top: 1px solid #34364D;
	padding-block: 1.25rem; font-size: .875rem; color: #B9BCCB;
	display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between;
}
.site-footer__bottom p { margin: 0; }