/* =============================================================================
   HV-THEME  ·  GeneratePress child  ·  v4.0
   Replicates Tuning theme "default" colour scheme (stg.helveticaauto.ca):
     · Light header  : white #FFFFFF, dark text #1F242E, blue accent #125DF0
     · Light body    : white #FFFFFF / alt #EDF2FD
     · Dark footer   : #17181A (always dark, matching the tuning footer sections)
     · Dropdowns     : always dark #1C212B (extra_bg_color)
   ============================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap');

/* ── DESIGN TOKENS ───────────────────────────────────────────────────────────── */
:root {
	/* Light scheme (body / header) — matches tuning scheme_default / scheme_light */
	--bg:          #FFFFFF;
	--bg-alt:      #EDF2FD;
	--bg-alt2:     #DFE8FC;
	--border:      #D5DFF6;
	--border2:     #C5D4F5;
	--text:        #797C7F;
	--text-lt:     #A5A6AA;
	--heading:     #1F242E;
	--accent:      #125DF0;
	--accent-h:    #024AD9;

	/* Dark / "extra" scheme — used in footer and dark content sections */
	--dark-bg:     #17181A;
	--dark-bg2:    #202223;
	--drop-bg:     #1C212B;
	--drop-bg2:    #161B24;
	--dark-border: #3C3F47;
	--dark-border2:#53535C;
	--dark-text:   #D2D3D5;
	--dark-muted:  #96999F;
	--dark-head:   #FFFEFE;

	/* Shared */
	--font:   'Manrope', sans-serif;
	--base:   1rem;
	--max-w:  1290px;
	--nav-h:  72px;
}

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

html { font-size: 17px; }

body {
	font-family: var(--font);
	font-size:   var(--base);
	line-height: 1.7em;
	font-weight: 400;
	background:  var(--bg) !important;
	color:       var(--text);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	margin: 0;
}

.site { background: var(--bg) !important; }

/* ── TYPOGRAPHY ──────────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
	font-family:   var(--font);
	font-weight:   600;
	color:         var(--heading);
	line-height:   1.1em;
	margin-top:    0.9em;
	margin-bottom: 0.45em;
}
h1 { font-size: 3.353em; line-height: 1em;    }
h2 { font-size: 2.765em; line-height: 1.02em; }
h3 { font-size: 2.059em; }
h4 { font-size: 1.647em; }
h5 { font-size: 1.412em; }
h6 { font-size: 1.118em; }

p  { margin: 0 0 1.65em; }
ul, ol { padding-left: 1.5em; margin-bottom: 1.65em; }
li > ol, li > ul { margin-bottom: 0; }

blockquote {
	border-left: 3px solid var(--accent);
	margin:      1.65em 0;
	padding:     0.8em 1.5em;
	color:       var(--text);
	background:  var(--bg-alt);
}
blockquote p:last-child { margin-bottom: 0; }

hr { border: none; border-top: 1px solid var(--border); margin: 2em 0; }

code, kbd, samp {
	font-size:     0.875em;
	background:    var(--bg-alt);
	border:        1px solid var(--border);
	padding:       0.15em 0.4em;
	border-radius: 3px;
}
pre {
	background: var(--bg-alt);
	border:     1px solid var(--border);
	padding:    1.2em 1.5em;
	overflow-x: auto;
}
pre code { background: none; border: none; padding: 0; }

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

/* ── LINKS ───────────────────────────────────────────────────────────────────── */
a { color: var(--accent); text-decoration: none; transition: color 0.3s ease; }
a:hover, a:focus { color: var(--accent-h); outline: none; }

/* ── LAYOUT SHELL ─────────────────────────────────────────────────────────────── */
.site-content,
.site-main,
article,
.inside-article,
.content-area { background: transparent !important; }

.entry-content,
.page-content { color: var(--text); background: transparent !important; }

.site-content { padding: 0 !important; }
.content-area { width: 100% !important; max-width: 100% !important; float: none !important; }

/* Offset body below fixed header */
.hfeed .site-content,
.singular .site-content { padding-top: var(--nav-h) !important; }

/* ── HEADER ──────────────────────────────────────────────────────────────────── */
/*
   Matches Header Main (ID 97) on staging:
   White background, dark text, blue on hover.
   Layout: logo left, nav right — compact height.
*/
.site-header {
	position:      fixed;
	top:           0;
	left:          0;
	right:         0;
	z-index:       9000;
	background:    var(--bg) !important;
	border-bottom: 1px solid var(--border) !important;
	padding:       0 !important;
	transition:    box-shadow 0.3s ease;
}

.site-header.is-sticky,
.site-header.scrolled { box-shadow: 0 2px 20px rgba(31,36,46,0.08); }

.inside-header {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	padding:         0 40px;
	max-width:       var(--max-w);
	margin:          0 auto;
	min-height:      var(--nav-h);
}

.site-title       { display: none; }
.site-description { display: none; }

.site-logo,
.custom-logo-link { display: flex; align-items: center; flex-shrink: 0; }

.site-logo img,
.custom-logo-link img,
.custom-logo {
	height:    45px !important;
	width:     auto !important;
	max-width: none !important;
	display:   block;
}

/* ── PRIMARY NAVIGATION ──────────────────────────────────────────────────────── */
/*
   tuning scheme_light:
     text_dark #1F242E  (default link colour)
     text_link #125DF0  (hover / active)
   No underline — colour change only.
   Padding 0.8em top/bottom matches tuning compact header row.
*/
.main-navigation { display: flex; align-items: center; }

.main-navigation ul {
	list-style:  none;
	margin:      0;
	padding:     0;
	display:     flex;
	flex-wrap:   wrap;
	align-items: center;
}

.main-navigation ul li { position: relative; }

.main-navigation ul li a {
	font-family: var(--font);
	font-size:   16px;
	font-weight: 600;
	color:       var(--heading);
	display:     block;
	padding:     0.8em 16px;
	white-space: nowrap;
	transition:  color 0.3s ease;
	line-height: 1.4em;
}

.main-navigation ul li a:hover,
.main-navigation ul li:hover > a,
.main-navigation ul li.current-menu-item > a,
.main-navigation ul li.current-menu-parent > a,
.main-navigation ul li.current-menu-ancestor > a {
	color: var(--accent) !important;
}

/* ── DROPDOWNS ───────────────────────────────────────────────────────────────── */
/*
   Always dark regardless of page scheme.
   tuning: extra_bg_color #1C212B, border-radius 10px
*/
.main-navigation ul ul {
	position:      absolute;
	top:           100%;
	left:          0;
	z-index:       9100;
	background:    var(--drop-bg);
	border:        1px solid var(--dark-border);
	border-radius: 10px;
	min-width:     220px;
	opacity:       0;
	visibility:    hidden;
	transform:     translateY(6px);
	transition:    opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
	box-shadow:    0 12px 40px rgba(0,0,0,0.18);
	padding:       6px 0;
}

.main-navigation ul li:hover > ul,
.main-navigation ul li:focus-within > ul {
	opacity:    1;
	visibility: visible;
	transform:  translateY(0);
}

/* tuning: extra_text #D2D3D5 → extra_hover #FFFEFE */
.main-navigation ul ul li a {
	font-size:   15px;
	font-weight: 400;
	color:       var(--dark-text) !important;
	padding:     10px 20px;
	transition:  color 0.2s ease, background 0.2s ease;
}
.main-navigation ul ul li a:hover,
.main-navigation ul ul li:hover > a {
	color:      var(--dark-head) !important;
	background: rgba(255,255,255,0.06);
}

.main-navigation ul ul ul { top: 0; left: 100%; }

.menu-toggle {
	display:     none;
	background:  transparent;
	border:      1px solid var(--border);
	color:       var(--heading);
	font-family: var(--font);
	font-size:   15px;
	font-weight: 600;
	padding:     8px 14px;
	cursor:      pointer;
	transition:  border-color 0.3s ease, color 0.3s ease;
}
.menu-toggle:hover { border-color: var(--accent); color: var(--accent); }

/* ── CONTENT ELEMENTS ─────────────────────────────────────────────────────────── */
.entry-title, .page-title { color: var(--heading); font-weight: 600; }
.entry-title a       { color: var(--heading); }
.entry-title a:hover { color: var(--accent);  }

.entry-meta, .post-meta, .entry-footer { color: var(--text-lt); font-size: 0.824em; }
.entry-meta a, .entry-footer a         { color: var(--text-lt); }
.entry-meta a:hover, .entry-footer a:hover { color: var(--accent); }

.cat-links a, .tags-links a { color: var(--accent); font-weight: 600; font-size: 0.824em; }
.cat-links a:hover, .tags-links a:hover { color: var(--accent-h); }

/* ── BUTTONS ─────────────────────────────────────────────────────────────────── */
button:not(.menu-toggle),
input[type="button"],
input[type="submit"],
input[type="reset"],
.wp-block-button__link,
.button,
.more-link {
	font-family: var(--font);
	font-size:   15px;
	font-weight: 600;
	padding:     17px 30px;
	background:  var(--accent);
	color:       #FFFFFF;
	border:      none;
	border-radius: 0;
	cursor:      pointer;
	display:     inline-flex;
	align-items: center;
	transition:  background 0.3s ease;
	text-decoration: none;
	line-height: 1.4em;
}
button:not(.menu-toggle):hover,
input[type="button"]:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover,
.button:hover,
.more-link:hover { background: var(--accent-h); color: #FFFFFF; }

.wp-block-button.is-style-outline .wp-block-button__link {
	background:  transparent;
	color:       var(--accent);
	border:      2px solid var(--accent);
	padding:     15px 28px;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background:  var(--accent);
	color:       #FFFFFF;
}

/* ── FORMS ───────────────────────────────────────────────────────────────────── */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
textarea,
select {
	font-family:  var(--font);
	font-size:    var(--base);
	color:        var(--text);
	background:   transparent;
	border:       1px solid var(--border);
	border-radius: 0;
	padding:      0.75em 1em;
	width:        100%;
	transition:   border-color 0.3s ease;
	outline:      none;
}
input:focus, textarea:focus, select:focus {
	border-color: var(--accent);
	color:        var(--heading);
}
::placeholder { color: var(--text-lt); opacity: 1; }
select option { background: var(--bg); color: var(--text); }
label { color: var(--text); font-size: 0.824em; font-weight: 600; display: block; margin-bottom: 0.4em; }

/* ── TABLES ──────────────────────────────────────────────────────────────────── */
table { border-collapse: collapse; width: 100%; color: var(--text); margin-bottom: 1.65em; }
th    { background: var(--bg-alt); color: var(--heading); font-weight: 600; padding: 0.8em 1em; border: 1px solid var(--border); text-align: left; }
td    { padding: 0.75em 1em; border: 1px solid var(--border); }
tr:hover td { background: var(--bg-alt); }

/* ── WIDGETS ─────────────────────────────────────────────────────────────────── */
.widget {
	margin-bottom: 2em;
	padding:       1.5em;
	background:    var(--bg-alt);
	border:        1px solid var(--border);
	color:         var(--text);
}
.widget-title, .widgettitle {
	color:          var(--heading);
	font-size:      1.118em;
	font-weight:    600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin:         0 0 1em;
	padding-bottom: 0.75em;
	border-bottom:  2px solid var(--accent);
}
.widget ul { list-style: none; padding: 0; margin: 0; }
.widget ul li { padding: 0.4em 0; border-bottom: 1px solid var(--border); }
.widget ul li:last-child { border-bottom: none; }
.widget ul li a { color: var(--text); }
.widget ul li a:hover { color: var(--accent); }

/* ── PAGINATION ──────────────────────────────────────────────────────────────── */
.pagination, nav.navigation.pagination { margin: 2em 0; text-align: center; }
.page-numbers {
	display:     inline-block;
	padding:     8px 14px;
	margin:      0 3px;
	color:       var(--text);
	border:      1px solid var(--border);
	font-weight: 600;
	font-size:   15px;
	transition:  all 0.3s ease;
}
.page-numbers:hover,
.page-numbers.current { background: var(--accent); border-color: var(--accent); color: #FFFFFF; }

/* ── FOOTER ──────────────────────────────────────────────────────────────────── */
/*
   Matches Footer Main (ID 8821): always dark #17181A.
   4 columns above + copyright bar below, same as tuning's extra_bg_color sections.
*/
.site-footer { background: var(--dark-bg) !important; }

.footer-bar-wrap {
	background:  var(--dark-bg) !important;
	border-top:  1px solid var(--dark-border) !important;
}

.footer-bar {
	background:  var(--dark-bg) !important;
	color:       var(--dark-muted) !important;
	font-family: var(--font);
	font-size:   0.824em;
	text-align:  center;
	padding:     1.5em 0;
}
.footer-bar a { color: var(--dark-muted) !important; transition: color 0.3s ease; }
.footer-bar a:hover { color: var(--accent) !important; }

/* Hide GP's "Powered by GeneratePress" */
.footer-bar .generated-by,
.footer-bar .powered-by { display: none; }

/* ── ELEMENTOR INTEGRATION ───────────────────────────────────────────────────── */
.elementor-page .site-content   { background: transparent !important; }
.elementor-page .content-area   { padding: 0 !important; }
.elementor-page .inside-article { padding: 0 !important; background: transparent !important; }

/* ── BLOCK EDITOR ────────────────────────────────────────────────────────────── */
.wp-block-separator { border-color: var(--border) !important; }
.wp-block-quote {
	border-left: 3px solid var(--accent);
	padding:     0.8em 1.5em;
	background:  var(--bg-alt);
	color:       var(--text);
}
.gallery-item img { border: 1px solid var(--border) !important; }

/* ── ADMIN BAR ───────────────────────────────────────────────────────────────── */
.admin-bar .site-header { top: 32px; }
@media screen and (max-width: 782px) { .admin-bar .site-header { top: 46px; } }

/* ── RESPONSIVE ──────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
	:root { --nav-h: 65px; }
	h1 { font-size: 2.5em;  }
	h2 { font-size: 2em;    }
	h3 { font-size: 1.65em; }
	.inside-header { padding: 0 24px; }
}

@media (max-width: 768px) {
	html { font-size: 15px; }
	:root { --nav-h: 60px; }
	h1 { font-size: 2em;    }
	h2 { font-size: 1.65em; }
	h3 { font-size: 1.35em; }
	h4 { font-size: 1.2em;  }

	.inside-header { padding: 0 16px; }

	.main-navigation { display: none; }
	.main-navigation.toggled { display: block; width: 100%; }

	.main-navigation ul {
		flex-direction: column;
		background:     var(--bg);
		border-top:     1px solid var(--border);
	}
	.main-navigation ul li a {
		padding:       14px 20px;
		border-bottom: 1px solid var(--border);
	}
	.main-navigation ul li:last-child a { border-bottom: none; }

	.main-navigation ul ul {
		position:      static;
		opacity:       1;
		visibility:    visible;
		transform:     none;
		box-shadow:    none;
		border:        none;
		border-radius: 0;
		background:    rgba(0,0,0,0.04);
		padding:       0;
	}
	.main-navigation ul ul li a { color: var(--text) !important; padding-left: 36px; }
	.main-navigation ul ul li a:hover { color: var(--accent) !important; }

	.menu-toggle { display: block; }

	button:not(.menu-toggle),
	input[type="button"],
	input[type="submit"],
	.wp-block-button__link,
	.button { padding: 14px 24px; }

	.widget { padding: 1em; }
}

@media (max-width: 480px) {
	.inside-header { padding: 0 12px; }
	.site-logo img, .custom-logo-link img { height: 36px !important; }
}
