/*
Theme Name: Featherlight
Theme URI: https://example.com/featherlight
Author: Transformational Outsourcing
Description: A lightweight, minimal starter theme built to get out of the way of the Elementor page builder. Full Elementor Theme Builder support (header, footer, single, archive locations), honours Elementor's "Hide Title" setting, and inherits Elementor Global Colors and Fonts.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
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: featherlight
Tags: one-column, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, block-styles, wide-blocks
*/

/* ---------- Design tokens (fall back gracefully when Elementor globals are absent) ---------- */
:root {
	--fl-color-primary: var(--e-global-color-primary, #1f2937);
	--fl-color-text: var(--e-global-color-text, #374151);
	--fl-color-accent: var(--e-global-color-accent, #2563eb);
	--fl-color-muted: #6b7280;
	--fl-color-border: #e5e7eb;
	--fl-color-bg: #ffffff;
	--fl-font-body: var(--e-global-typography-text-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
	--fl-font-heading: var(--e-global-typography-primary-font-family, var(--fl-font-body));
	--fl-container: 1140px;
	--fl-gutter: 20px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--fl-color-bg);
	color: var(--fl-color-text);
	font-family: var(--fl-font-body);
	font-size: 1rem;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}
img, svg, video, iframe { max-width: 100%; height: auto; }
figure { margin: 0 0 1.5em; }

/* ---------- Typography ---------- */
h1, h2, h3, h4, h5, h6 {
	margin: 0 0 .6em;
	color: var(--fl-color-primary);
	font-family: var(--fl-font-heading);
	line-height: 1.25;
	font-weight: 700;
}
h1 { font-size: 2.25rem; }
h2 { font-size: 1.75rem; }
h3 { font-size: 1.4rem; }
h4 { font-size: 1.2rem; }
p { margin: 0 0 1.25em; }
a { color: var(--fl-color-accent); text-decoration: underline; text-underline-offset: 2px; }
a:hover, a:focus { text-decoration: none; }
blockquote { margin: 0 0 1.5em; padding-left: 1em; border-left: 4px solid var(--fl-color-border); font-style: italic; }
code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9em; }
pre { overflow: auto; padding: 1em; background: #f3f4f6; }
table { width: 100%; border-collapse: collapse; margin-bottom: 1.5em; }
th, td { padding: .5em; border: 1px solid var(--fl-color-border); text-align: left; }
hr { border: 0; border-top: 1px solid var(--fl-color-border); margin: 2em 0; }

/* ---------- Forms ---------- */
input, textarea, select, button { font: inherit; }
input[type="text"], input[type="email"], input[type="url"], input[type="password"],
input[type="search"], input[type="tel"], input[type="number"], textarea, select {
	width: 100%;
	padding: .6em .8em;
	border: 1px solid var(--fl-color-border);
	border-radius: 4px;
	background: #fff;
}
button, input[type="submit"], .button {
	display: inline-block;
	padding: .6em 1.2em;
	border: 0;
	border-radius: 4px;
	background: var(--fl-color-accent);
	color: #fff;
	cursor: pointer;
	text-decoration: none;
}
button:hover, input[type="submit"]:hover, .button:hover { opacity: .9; }

/* ---------- Layout ---------- */
.fl-container {
	width: 100%;
	max-width: var(--fl-container);
	margin: 0 auto;
	padding: 0 var(--fl-gutter);
}
.site-main { padding: 40px 0; }

/* Pages built with Elementor: let Elementor own the full canvas */
body.fl-elementor-page .site-main { padding: 0; }
body.fl-elementor-page .site-main > .fl-container { max-width: none; padding: 0; }

/* ---------- Header ---------- */
.site-header { border-bottom: 1px solid var(--fl-color-border); }
.site-header .fl-container {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-top: 16px;
	padding-bottom: 16px;
}
.site-branding { display: flex; align-items: center; gap: 12px; }
.site-title { margin: 0; font-size: 1.4rem; font-weight: 700; }
.site-title a { color: var(--fl-color-primary); text-decoration: none; }
.site-description { margin: 0; font-size: .875rem; color: var(--fl-color-muted); }
.custom-logo { display: block; max-height: 60px; width: auto; }

/* ---------- Navigation ---------- */
.fl-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 24px; }
.fl-nav li { position: relative; }
.fl-nav a { color: var(--fl-color-primary); text-decoration: none; padding: 6px 0; display: block; }
.fl-nav a:hover, .fl-nav .current-menu-item > a { color: var(--fl-color-accent); }
.fl-nav .sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 99;
	min-width: 200px;
	flex-direction: column;
	gap: 0;
	padding: 8px 16px;
	background: #fff;
	box-shadow: 0 6px 20px rgba(0,0,0,.08);
}
.fl-nav li:hover > .sub-menu, .fl-nav li:focus-within > .sub-menu { display: flex; }
.fl-nav .sub-menu .sub-menu { top: 0; left: 100%; }
.fl-menu-toggle { display: none; background: transparent; color: var(--fl-color-primary); border: 1px solid var(--fl-color-border); padding: 6px 12px; }

@media (max-width: 767px) {
	.fl-menu-toggle { display: inline-block; }
	.fl-nav { flex-basis: 100%; display: none; }
	.fl-nav.is-open { display: block; }
	.fl-nav ul { flex-direction: column; gap: 0; }
	.fl-nav .sub-menu { position: static; display: flex; box-shadow: none; padding: 0 0 0 16px; }
}

/* ---------- Content ---------- */
.entry-header { margin-bottom: 1.5em; }
.entry-title a { color: inherit; text-decoration: none; }
.entry-meta, .entry-footer { font-size: .875rem; color: var(--fl-color-muted); }
.entry-meta a, .entry-footer a { color: inherit; }
.post-thumbnail { margin-bottom: 1.5em; }
.post-thumbnail img { display: block; width: 100%; }
.fl-post-list article { padding-bottom: 2em; margin-bottom: 2em; border-bottom: 1px solid var(--fl-color-border); }
.page-header { margin-bottom: 2em; }
.page-links { clear: both; margin: 1.5em 0; }
.navigation.pagination .nav-links, .post-navigation .nav-links { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; }
.navigation.pagination .page-numbers { padding: 4px 10px; border: 1px solid var(--fl-color-border); text-decoration: none; }
.navigation.pagination .current { background: var(--fl-color-accent); color: #fff; border-color: var(--fl-color-accent); }

/* ---------- Comments ---------- */
.comments-area { margin-top: 3em; }
.comment-list { list-style: none; padding: 0; }
.comment-list .children { list-style: none; padding-left: 2em; }
.comment-body { padding: 1em 0; border-bottom: 1px solid var(--fl-color-border); }
.comment-meta { font-size: .875rem; color: var(--fl-color-muted); }
.comment-author .avatar { float: left; margin-right: 12px; border-radius: 50%; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--fl-color-border); padding: 24px 0; font-size: .875rem; color: var(--fl-color-muted); }
.site-footer .fl-container { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }
.site-footer .fl-nav a { color: var(--fl-color-muted); }

/* ---------- WordPress core alignment & accessibility ---------- */
.alignleft { float: left; margin: 0 1.5em 1em 0; }
.alignright { float: right; margin: 0 0 1em 1.5em; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.alignwide { max-width: calc(var(--fl-container) + 200px); margin-left: auto; margin-right: auto; }
.alignfull { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); }
.wp-caption, .wp-block-image figcaption { font-size: .875rem; color: var(--fl-color-muted); }
.sticky, .bypostauthor, .gallery-caption, .wp-caption-text {}
.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;
	top: 8px; left: 8px; z-index: 100000; padding: 12px 20px;
	background: #fff; color: var(--fl-color-primary); box-shadow: 0 0 0 2px var(--fl-color-accent);
}