/*
Theme Name: Hansen Trucking Custom Theme
Theme URI: https://hansentrucking.com/
Author: Up At Last
Author URI: https://upatlast.com/
Description: A purpose-built theme for hansentrucking.com. Every public page on this site is one block of hand-written HTML that carries its own navigation and footer, so the theme's job is deliberately small: serve the stylesheets, get out of the way on canvas pages, and supply real site chrome on the few pages that need it (privacy policy, 404, posts). No page builder, no jQuery, no theme JavaScript.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 7.1
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: hansen-trucking-ual
Tags: custom-logo, custom-menu, one-column
*/

/* -----------------------------------------------------------------------------
   HOW THE CSS IS LAYERED
   -----------------------------------------------------------------------------
   Four stylesheets load on the front end, in this order. The order matters — it
   is the same order the site ran under the old hello-elementor + child setup, so
   nothing re-shuffles when the theme changes.

     1. base.css        Normalize/reset and base element styles. A verbatim copy
                        of Hello Elementor's reset.css + theme.css, which the
                        site design was authored on top of. Kept so the design
                        renders identically without depending on that theme.

     2. style.css       This file. Theme chrome only — the nav and footer that
                        wrap pages which are NOT on the canvas template.

     3. hero-styles.css The hero treatments (split, framed card, blended) and the
                        ported per-page fixes that used to live in Elementor Pro
                        per-widget Custom CSS. Formerly the child theme's
                        style.css.

     4. kit-design.css  The site design itself, ~36 KB, exported from what was
                        Elementor's Site Settings > Custom CSS (a Pro feature).
                        Loads last, so it wins ties — same as before.

   -----------------------------------------------------------------------------
   WHERE THIS FILE APPLIES
   -----------------------------------------------------------------------------
   Almost nowhere, by design. 20-odd pages use template-canvas.php, which prints
   no theme markup at all — their nav and footer are inside their own HTML. This
   file styles the chrome for the handful of pages that fall through to page.php,
   index.php or 404.php.

   The rules below are a deliberate copy of the chrome CSS embedded in those
   pages, so the two look identical. If the site nav is restyled, change it in
   both places.

   Up At Last, September 2026.
   -------------------------------------------------------------------------- */

/* -----------------------------------------------------------------------------
   The page background
   -----------------------------------------------------------------------------
   kit-design.css still carries `body{background:var(--ht-paper)}` — a warm cream,
   left over from an earlier light-page design. The site is dark everywhere now,
   but nobody noticed, because the dark is painted by .htx, a div inside the
   content, and .htx covers the body on every page.

   Except one. On /contact-us/ the hand-written markup closes .htx before the
   quote form, so the form and the space around it sat straight on the cream.

   `html body` rather than `body`: kit-design.css loads after this file, so an
   equal-specificity rule would lose. This is the one place in this stylesheet
   that has to out-specify the design sheet rather than just precede it.
   -------------------------------------------------------------------------- */

html,
html body {
	background-color: #0E1216;
}

.htx {
	--chassis: #0E1216;
	--slate: #1A2129;
	--slate2: #151B21;
	--diesel: #0F2A44;
	--ink: #F2F4F6;
	--ink-body: #B8C2CC;
	--ink-mute: #7E8A94;
	--hairline: #232C36;
	--hairline-2: #2E3944;
	--red: #C8232C;
	--red-2: #D63438;
	--amber: #E3A94A;
	--sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--display: "Inter Tight", "Inter", var(--sans);
	--slab: "Keep On Truckin", Georgia, serif;
	--mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	background: var(--chassis);
	color: var(--ink-body);
	font-family: var(--sans);
	font-size: 16px;
	line-height: 1.65;
}

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

.htx a { color: inherit; text-decoration: none; }
.htx img { max-width: 100%; display: block; }

/* --- Top bar ------------------------------------------------------------- */

.htx .nav {
	padding: 14px 32px;
	border-bottom: 1px solid var(--hairline);
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 14px;
	background: var(--chassis);
}

.htx .nav .mark { display: inline-flex; align-items: center; height: 42px; }

.htx .nav .mark img {
	height: 100%;
	width: auto;
	filter: brightness(0) invert(1) drop-shadow(1.5px 1.5px 0 rgba(0, 0, 0, .55));
}

.htx .nav nav {
	display: flex;
	gap: 22px;
	font-size: 14px;
	font-weight: 600;
	color: var(--ink-body);
}

.htx .nav nav a.active,
.htx .nav nav li.current-menu-item > a {
	color: var(--ink);
	border-bottom: 2px solid var(--red);
	padding-bottom: 2px;
}

/* wp_nav_menu output, made to sit flat inside the flex row. */
.htx .nav nav ul {
	display: flex;
	gap: 22px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.htx .nav .phm {
	display: flex;
	gap: 8px;
	align-items: center;
	font-family: var(--mono);
	font-size: 12px;
	color: var(--ink-mute);
	letter-spacing: .06em;
	text-transform: uppercase;
}

.htx .nav .phm b {
	color: var(--amber);
	font-family: var(--display);
	font-size: 16px;
	font-weight: 800;
	letter-spacing: -.01em;
}

/* --- Page body ----------------------------------------------------------- */

/* Content on chrome pages brings its own card styling (the privacy policy is a
   white card); this only supplies the dark field it sits on. */
.htx .ht-main {
	background: var(--slate2);
	padding: 48px 0 64px;
	min-height: 40vh;
}

.htx .ht-main > .wr {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 32px;
}

/* Fallback typography for ordinary post/page content that has no styling of its
   own — a blog post, say. Scoped so it cannot reach hand-built page markup. */
.htx .ht-entry {
	max-width: 760px;
	margin: 0 auto;
	color: var(--ink-body);
}

.htx .ht-entry h1,
.htx .ht-entry h2,
.htx .ht-entry h3 {
	font-family: var(--display);
	color: var(--ink);
	letter-spacing: -.02em;
	line-height: 1.1;
}

.htx .ht-entry h1 { font-size: clamp(30px, 4vw, 46px); margin: 0 0 18px; font-weight: 800; }
.htx .ht-entry h2 { font-size: clamp(22px, 2.6vw, 30px); margin: 34px 0 12px; font-weight: 750; }
.htx .ht-entry h3 { font-size: 20px; margin: 26px 0 10px; font-weight: 700; }
.htx .ht-entry p { margin: 0 0 16px; }
.htx .ht-entry ul,
.htx .ht-entry ol { margin: 0 0 16px 20px; padding: 0; }
.htx .ht-entry li { margin: 6px 0; }
.htx .ht-entry a { color: var(--amber); text-decoration: underline; text-underline-offset: 3px; }
.htx .ht-entry img { border-radius: 10px; margin: 20px 0; }

.htx .ht-meta {
	font-family: var(--mono);
	font-size: 12px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ink-mute);
	margin: 0 0 22px;
}

.htx .btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 13px 20px;
	border-radius: 8px;
	font-weight: 700;
	font-size: 14px;
	border: 1px solid transparent;
	line-height: 1;
	cursor: pointer;
}

.htx .btn.primary { background: var(--amber); color: #161418; border-color: var(--amber); }
.htx .btn.ghost { color: var(--ink); border-color: var(--hairline-2); }

/* --- Footer -------------------------------------------------------------- */

.htx .foot {
	background: #0A0E12;
	border-top: 1px solid var(--hairline-2);
	padding: 52px 32px 28px;
}

.htx .foot .cols {
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	gap: 36px;
}

.htx .foot .mark { display: block; height: 56px; margin: 0 0 12px; }

.htx .foot .mark img {
	height: 100%;
	width: auto;
	filter: brightness(0) invert(1) drop-shadow(1.5px 1.5px 0 rgba(0, 0, 0, .55));
}

.htx .foot .kot-sm {
	font-family: var(--slab);
	color: var(--red-2);
	font-size: 20px;
	text-shadow: 1.5px 1.5px 0 rgba(0, 0, 0, .55);
	line-height: 1;
	margin: 6px 0 14px;
}

.htx .foot h5 {
	font-family: var(--display);
	font-size: 12px;
	color: var(--ink-mute);
	text-transform: uppercase;
	letter-spacing: .16em;
	font-weight: 700;
	margin: 0 0 12px;
}

.htx .foot ul { list-style: none; margin: 0; padding: 0; }
.htx .foot ul li { margin-bottom: 8px; }
.htx .foot ul a { color: var(--ink-body); font-size: 14px; }

.htx .foot .lg {
	max-width: 1200px;
	margin: 36px auto 0;
	padding-top: 22px;
	border-top: 1px solid var(--hairline);
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px;
	font-family: var(--mono);
	font-size: 11px;
	color: var(--ink-mute);
	letter-spacing: .06em;
	text-transform: uppercase;
}

/* --- Narrow screens ------------------------------------------------------ */

@media (max-width: 820px) {
	.htx .foot .cols { grid-template-columns: 1fr 1fr; gap: 26px; }
	.htx .nav { padding: 12px 20px; }
	.htx .nav nav,
	.htx .nav nav ul { gap: 16px; flex-wrap: wrap; }
	.htx .ht-main > .wr { padding: 0 20px; }
}

@media (max-width: 520px) {
	.htx .foot .cols { grid-template-columns: 1fr; }
}

/* Skip link — keyboard users land past the nav. */
.ht-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	background: #E3A94A;
	color: #161418;
	padding: 10px 16px;
	font-weight: 700;
	z-index: 100;
}

.ht-skip:focus { left: 8px; top: 8px; }