/*
SL Freight brand styles.

Loaded last (it depends on both the child stylesheet and the Gutenberg
front-end stylesheet), so these rules win over the Genesis Sample defaults and
over the inline styles generated from config/appearance.php.

Colour values here mirror config/appearance.php. If a brand colour changes,
change it in BOTH places: appearance.php drives the editor palette, this file
drives the theme chrome.

Contents
	1.  Custom properties
	2.  Typography
	3.  Layout widths
	4.  Site header
	5.  Buttons
	6.  Hero
	6b. Page intro (interior pages)
	7.  Trust bar
	8.  Services
	9.  About band
	10. Footer
	11. Media queries
*/


/* 1. Custom properties
---------------------------------------------------------------------------- */

:root {
	--sl-navy: #021C35;
	--sl-navy-deep: #01101F;
	--sl-navy-hover: #04355F;
	--sl-accent: #2A7FC9;
	--sl-white: #FFFFFF;
	--sl-off-white: #F5F7FA;
	--sl-border: #E2E8F0;
	--sl-text: #1A2733;
	--sl-muted: #5A6B7C;

	--sl-font-heading: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--sl-font-body: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;

	--sl-content-width: 1200px;
	--sl-gutter: 24px;
	--sl-section-y: 80px;
	--sl-radius: 4px;
}


/* 2. Typography
---------------------------------------------------------------------------- */

body {
	color: var(--sl-text);
	font-family: var(--sl-font-body);
	font-size: 17px;
	line-height: 1.65;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	color: var(--sl-navy);
	font-family: var(--sl-font-heading);
	font-weight: 800;
	letter-spacing: -0.01em;
	line-height: 1.1;
}

h1 {
	font-size: 44px;
}

h2 {
	font-size: 34px;
}

h3 {
	font-size: 20px;
	font-weight: 700;
}

h4 {
	font-size: 18px;
	font-weight: 700;
}

/* Uppercase is the treatment for section headings in the design, not for
   editorial content - applying it to bare h2/h3 would shout every post title
   and every heading a client writes in a page. */
.sl-hero__title,
.sl-page-intro__title,
.sl-services__title,
.sl-about-band__title,
.sl-trust__title,
.sl-card__title,
.sl-uppercase {
	text-transform: uppercase;
}

a {
	color: var(--sl-navy);
}

a:focus,
a:hover {
	color: var(--sl-accent);
}

/* Theme icons (see sl_freight_get_icon) ship with no width/height so they can
   scale with font-size. Give them a bounded default so an icon dropped into a
   widget or shortcode can never render at its full viewBox size. */
.sl-icon {
	height: 1em;
	vertical-align: middle;
	width: 1em;
}

/* Wide letterspaced uppercase label that sits above every section heading. */
.sl-eyebrow {
	color: var(--sl-accent);
	font-family: var(--sl-font-body);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.26em;
	line-height: 1.4;
	margin-bottom: 12px;
	text-transform: uppercase;
}

/* Dark sections invert the eyebrow and all text. */
.sl-hero .sl-eyebrow,
.sl-about-band .sl-eyebrow {
	color: rgba(255, 255, 255, 0.72);
	margin-left: 0;
	padding-left: 0;
}

.sl-hero h1,
.sl-hero h2,
.sl-hero p,
.sl-trust-bar h3,
.sl-trust-bar p,
.sl-about-band h2,
.sl-about-band p,
.sl-about-band li {
	color: var(--sl-white);
}


/* 3. Layout widths
---------------------------------------------------------------------------- */

.site-inner,
.footer-widgets .wrap,
.site-header > .wrap {
	max-width: var(--sl-content-width);
}

.site-inner {
	padding: 60px var(--sl-gutter) 0;
}

/* ...except when the first block is full-width (the hero), which sits flush
   under the header. */
.first-block-align-full .site-inner {
	padding-top: 0;
}

/* The base stylesheet gives `.content` width:65% from 960px up and only unsets
   the float for full-width-content, so a full-width page still rendered its
   body copy in a 65% column centred inside the content area. This theme has no
   sidebars at all, so the content column is always the full width. */
.full-width-content .content {
	width: 100%;
}

/* Sections that break out to full width still align their inner content to the
   same column as the header.

   Note the `__inner-container` selectors: a core Group block renders an extra
   `.wp-block-group__inner-container` div around its children, so targeting the
   child blocks directly (`.sl-services > .wp-block-columns`) never matches and
   the content spanned the whole viewport. */
.sl-trust-bar > .wp-block-group__inner-container,
.sl-services > .wp-block-group__inner-container,
.sl-page-intro > .wp-block-group__inner-container,
.sl-hero__inner,
.sl-page-intro__inner,
.sl-about-band__grid {
	margin-left: auto;
	margin-right: auto;
	max-width: var(--sl-content-width);
	width: 100%;
}


/* 4. Site header
---------------------------------------------------------------------------- */

.site-header {
	background-color: var(--sl-white);
	border-bottom: 1px solid var(--sl-border);
	box-shadow: 0 1px 12px rgba(2, 28, 53, 0.06);
	padding: 0 var(--sl-gutter);
	position: sticky;
	top: 0;
	z-index: 9999;
}

.site-header > .wrap {
	margin-left: auto;
	margin-right: auto;
}

/* The base stylesheet gives every `.wrap` a clearfix ::before/::after. Inside a
   flex container those become flex items, so `gap` was indenting the logo from
   the left edge and the menu from the right. Drop them on the wraps this theme
   turns into flex rows. */
.site-header > .wrap::before,
.site-header > .wrap::after,
.footer-widgets .wrap::before,
.footer-widgets .wrap::after {
	display: none;
}

/* Header logo is sized by HEIGHT, so the header bar stays a predictable depth
   whatever the logo's aspect ratio. 50px at every screen size.

   The `.site-container` in these selectors is not decoration: lib/output.php
   generates `.wp-custom-logo .site-container .custom-logo-link { aspect-ratio }`
   from the Customizer "Logo Width" value, at (0,3,0). These have to match it to
   win. Because of this, that Customizer control no longer governs the header
   logo - change the height here instead. */
.wp-custom-logo .title-area {
	padding-bottom: 12px;
	padding-top: 12px;
}

.wp-custom-logo .site-container .title-area {
	max-width: none;
	width: auto;
}

.wp-custom-logo .site-container .custom-logo-link {
	aspect-ratio: auto;
	display: block;
	line-height: 0;
}

.wp-custom-logo .site-container .custom-logo {
	height: 50px;
	max-width: none;
	width: auto;
}

.genesis-nav-menu a {
	color: var(--sl-navy);
	font-family: var(--sl-font-body);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
}

.genesis-nav-menu a:focus,
.genesis-nav-menu a:hover,
.genesis-nav-menu .current-menu-item > a {
	color: var(--sl-accent);
}

/* Active-item underline from the design. The CTA is excluded: it is a filled
   navy button, so navy "current" text on it would be invisible - which is what
   happened on the page the CTA links to. */
.nav-primary .genesis-nav-menu > .current-menu-item:not(.nav-cta) > a {
	box-shadow: inset 0 -3px 0 0 var(--sl-navy);
	color: var(--sl-navy);
}

/* "Get a Quote" menu item. Add the CSS class `nav-cta` to the menu item in
   Appearance > Menus (enable CSS Classes under Screen Options first). */
.genesis-nav-menu .nav-cta > a {
	background-color: var(--sl-navy);
	border-radius: var(--sl-radius);
	color: var(--sl-white);
	padding: 13px 20px;
}

.genesis-nav-menu .nav-cta > a:focus,
.genesis-nav-menu .nav-cta > a:hover {
	background-color: var(--sl-navy-hover);
	color: var(--sl-white);
}

/* Envelope before, chevron after. Both are inline SVG data URIs, so the CTA
   needs no extra markup inside the menu item. */
.genesis-nav-menu .nav-cta > a::before,
.genesis-nav-menu .nav-cta > a::after {
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	content: "";
	display: inline-block;
	height: 1em;
	vertical-align: -0.15em;
	width: 1em;
}

.genesis-nav-menu .nav-cta > a::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M2.4 6a1.8 1.8 0 0 1 1.8-1.8h15.6A1.8 1.8 0 0 1 21.6 6v.36L12 12.3 2.4 6.36V6zm0 2.47V18a1.8 1.8 0 0 0 1.8 1.8h15.6A1.8 1.8 0 0 0 21.6 18V8.47L12.47 14.1a.9.9 0 0 1-.94 0L2.4 8.47z'/%3E%3C/svg%3E");
	margin-right: 9px;
}

.genesis-nav-menu .nav-cta > a::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 5 7 7-7 7'/%3E%3C/svg%3E");
	margin-left: 12px;
	width: 0.65em;
}

.menu-toggle,
.sub-menu-toggle {
	color: var(--sl-navy);
}

/* Icon-only burger: font-size 0 hides the "Menu" text visually but keeps it
   in the button for screen readers. */
.menu-toggle {
	font-size: 0;
}

.site-header .menu-toggle::before {
	font-size: 36px;
	height: 36px;
	line-height: 1;
	margin-right: 0;
	top: 0;
	width: 36px;
}


/* 5. Buttons
---------------------------------------------------------------------------- */

/* No `.site-container` scope: custom.css is loaded as an editor stylesheet too,
   where that wrapper does not exist. inline-styles.php no longer generates
   competing button rules, so plain selectors are enough in both contexts. */
.wp-block-button .wp-block-button__link {
	background-color: var(--sl-navy);
	border-radius: var(--sl-radius);
	color: var(--sl-white);
	font-family: var(--sl-font-body);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.1em;
	padding: 16px 28px;
	text-transform: uppercase;
}

.wp-block-button .wp-block-button__link:focus,
.wp-block-button .wp-block-button__link:hover {
	background-color: var(--sl-navy-hover);
	color: var(--sl-white);
}

/* Block style: Arrow. */
.wp-block-button.is-style-sl-arrow .wp-block-button__link::after,
.wp-block-button.is-style-sl-outline-light .wp-block-button__link::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 5 7 7-7 7'/%3E%3C/svg%3E");
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	content: "";
	display: inline-block;
	height: 1em;
	margin-left: 18px;
	vertical-align: -0.12em;
	width: 0.7em;
}

/* Block style: Outline on dark. */
.wp-block-button.is-style-sl-outline-light .wp-block-button__link {
	background-color: transparent;
	border: 2px solid rgba(255, 255, 255, 0.55);
	color: var(--sl-white);
}

.wp-block-button.is-style-sl-outline-light .wp-block-button__link:focus,
.wp-block-button.is-style-sl-outline-light .wp-block-button__link:hover {
	background-color: var(--sl-white);
	border-color: var(--sl-white);
	color: var(--sl-navy);
}

.wp-block-button.is-style-sl-outline-light .wp-block-button__link:focus::after,
.wp-block-button.is-style-sl-outline-light .wp-block-button__link:hover::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23021C35' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 5 7 7-7 7'/%3E%3C/svg%3E");
}


/* 6. Hero
---------------------------------------------------------------------------- */

.sl-hero {
	padding: 0 var(--sl-gutter);
}

/* The left-to-right scrim that keeps the headline legible over photography.
   Kept in CSS rather than an inline block style: WordPress 7.0 runs
   safecss_filter_attr() over block wrapper styles and silently drops rgba(). */
.sl-hero::before {
	background-image: linear-gradient(90deg, rgba(2, 28, 53, 0.92) 0%, rgba(2, 28, 53, 0.72) 38%, rgba(2, 28, 53, 0.1) 72%, rgba(2, 28, 53, 0) 100%);
	bottom: 0;
	content: "";
	left: 0;
	pointer-events: none;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 1;
}

.sl-hero .wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
}

.sl-hero__inner {
	max-width: var(--sl-content-width);
}

.sl-hero__title {
	font-size: 68px;
	margin-bottom: 18px;
	text-transform: uppercase;
}

.sl-hero__sub {
	font-size: 24px;
	font-weight: 500;
	margin-bottom: 18px;
}

.sl-hero__text {
	font-size: 17px;
	margin-bottom: 34px;
	max-width: 30em;
	opacity: 0.88;
}

.sl-hero__actions {
	margin-bottom: 0;
}


/* 6b. Page intro (interior pages)
---------------------------------------------------------------------------- */

.sl-page-intro {
	padding: 72px var(--sl-gutter);
}

.sl-page-intro__inner {
	margin-left: auto;
	margin-right: auto;
	max-width: var(--sl-content-width);
	width: 100%;
}

.sl-page-intro .sl-eyebrow {
	color: rgba(255, 255, 255, 0.72);
}

.sl-page-intro h1,
.sl-page-intro p {
	color: var(--sl-white);
}

.sl-page-intro__title {
	font-size: 46px;
	margin-bottom: 16px;
}

.sl-page-intro__text {
	margin-bottom: 0;
	max-width: 46em;
	opacity: 0.88;
}

/* Body content below a full-width page intro, which has removed the top
   padding from .site-inner. */
.sl-page-body {
	padding-bottom: var(--sl-section-y);
	padding-top: var(--sl-section-y);
}


/* 7. Trust bar
---------------------------------------------------------------------------- */

.sl-trust-bar {
	padding: 38px var(--sl-gutter);
}

.sl-trust-bar__grid {
	gap: 0;
	margin-bottom: 0;
}

.sl-trust {
	align-items: center;
	border-left: 1px solid rgba(255, 255, 255, 0.16);
	display: flex;
	gap: 18px;
	padding: 6px 28px;
}

.sl-trust:first-child {
	border-left: 0;
	padding-left: 0;
}

.sl-trust__icon {
	color: var(--sl-white);
	flex: 0 0 auto;
	font-size: 42px;
	line-height: 0;
}

.sl-trust__icon .sl-icon {
	height: 1em;
	width: 1em;
}

.sl-trust__title {
	font-size: 15px;
	letter-spacing: 0.04em;
	margin-bottom: 4px;
}

.sl-trust__meta {
	font-size: 14px;
	margin-bottom: 0;
	opacity: 0.8;
}


/* 8. Services
---------------------------------------------------------------------------- */

.sl-services {
	padding: var(--sl-section-y) var(--sl-gutter);
}

.sl-services__intro {
	margin-bottom: 44px;
}

.sl-services__title {
	font-size: 30px;
	margin-bottom: 0;
}

.sl-services__grid {
	gap: 26px;
	margin-bottom: 0;
}

.sl-card__media {
	margin-bottom: 18px;
}

.sl-card__media img {
	border-radius: var(--sl-radius);
	display: block;
	height: 210px;
	object-fit: cover;
	width: 100%;
}

.sl-card__title {
	font-size: 17px;
	margin-bottom: 10px;
}

.sl-card__text {
	color: var(--sl-muted);
	font-size: 15px;
	margin-bottom: 0;
}


/* 9. About band
---------------------------------------------------------------------------- */

.sl-about-band {
	padding: 64px var(--sl-gutter);
}

.sl-about-band__grid {
	margin-bottom: 0;
}

.sl-about-band__title {
	font-size: 34px;
	margin-bottom: 0;
}

.sl-checklist {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sl-checklist li {
	align-items: center;
	display: flex;
	font-size: 17px;
	gap: 12px;
	margin-bottom: 14px;
}

.sl-checklist li:last-child {
	margin-bottom: 0;
}

.sl-checklist .sl-icon {
	color: var(--sl-white);
	flex: 0 0 auto;
	height: 22px;
	opacity: 0.9;
	width: 22px;
}


/* 10. Footer
---------------------------------------------------------------------------- */

.footer-widgets {
	background-color: var(--sl-white);
	border-top: 1px solid var(--sl-border);
	padding: 54px var(--sl-gutter);
}

/* Side padding sits on the section, not the wrap, so the wrap edge lines up
   with the header wrap rather than sitting a gutter inside it. */
.footer-widgets .wrap {
	padding: 0;
}

.footer-widget-area {
	padding-left: 0;
	padding-right: 0;
}

.footer-widgets .widget-title {
	color: var(--sl-navy);
	font-family: var(--sl-font-body);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.24em;
	margin-bottom: 18px;
	text-transform: uppercase;
}

.footer-widgets p,
.footer-widgets li {
	color: var(--sl-text);
	font-size: 15px;
}

.footer-widgets img {
	max-width: 200px;
}

/* Icon-led contact line. Use in a footer widget as:
   <p class="sl-contact">[icon markup]<span>+44 333 577 0667</span></p> */
.sl-contact {
	align-items: flex-start;
	display: flex;
	gap: 12px;
	margin-bottom: 12px;
}

.sl-contact:last-child {
	margin-bottom: 0;
}

.sl-contact .sl-icon {
	color: var(--sl-navy);
	flex: 0 0 auto;
	height: 18px;
	margin-top: 3px;
	width: 18px;
}

.sl-social {
	display: inline-flex;
	gap: 14px;
}

.sl-social__link {
	align-items: center;
	background-color: var(--sl-navy);
	border-radius: 50%;
	color: var(--sl-white);
	display: inline-flex;
	height: 38px;
	justify-content: center;
	width: 38px;
}

.sl-social__link:focus,
.sl-social__link:hover {
	background-color: var(--sl-accent);
	color: var(--sl-white);
}

.sl-social .sl-icon {
	height: 19px;
	width: 19px;
}

/* `.site-footer` is the navy bottom bar - see lib/footer.php. */
.site-footer {
	background-color: var(--sl-navy);
	border-top: 0;
	color: rgba(255, 255, 255, 0.7);
	padding: 0 var(--sl-gutter);
}

.site-footer .wrap {
	margin-left: auto;
	margin-right: auto;
	max-width: var(--sl-content-width);
	padding: 18px 0;
}

.sl-bottom-bar {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	justify-content: space-between;
}

.sl-bottom-bar p {
	color: rgba(255, 255, 255, 0.72);
	font-size: 12px;
	letter-spacing: 0.16em;
	margin-bottom: 0;
	text-transform: uppercase;
}

.sl-bottom-bar a {
	color: inherit;
	text-decoration: none;
}

.sl-bottom-bar a:focus,
.sl-bottom-bar a:hover {
	color: var(--sl-white);
	text-decoration: underline;
}


/* 11. Media queries
---------------------------------------------------------------------------- */

/* The responsive menu breaks at 1024px (config/responsive-menus.php) but the
   base stylesheet switches to the desktop header at 960px. Hold the mobile
   header until 1024px so the two agree. */
@media only screen and (max-width: 1023px) {

	:root {
		--sl-section-y: 56px;
	}

	.js .nav-primary {
		display: none;
	}

	.menu-toggle,
	.sub-menu-toggle {
		display: block;
		visibility: visible;
	}

	.nav-primary {
		clear: left;
		float: none;
		width: 100%;
	}

	.genesis-nav-menu .nav-cta > a {
		display: inline-block;
		margin: 8px 0;
	}

	.sl-page-intro__title,
	.sl-hero__title {
		font-size: 46px;
	}

	.sl-services__title,
	.sl-about-band__title {
		font-size: 30px;
	}

	.sl-trust {
		border-left: 0;
		border-top: 1px solid rgba(255, 255, 255, 0.16);
		padding: 18px 0;
	}

	.sl-trust:first-child {
		border-top: 0;
		padding-top: 0;
	}

	.sl-card__media img {
		height: 200px;
	}

}

@media only screen and (min-width: 1024px) {

	/* Direct child only: `.nav-primary` has its own structural `.wrap`, and the
	   unscoped selector was turning that into a second flex row too. */
	.site-header > .wrap {
		align-items: center;
		display: flex;
		gap: 32px;
		justify-content: space-between;
	}

	.nav-primary .genesis-nav-menu {
		justify-content: flex-end;
	}

	.site-header .nav-primary {
		float: none;
		margin: 0;
		padding-bottom: 0;
		padding-top: 0;
		width: auto;
	}

	/* Vertical padding is kept here, unlike the nav: without it the 100px logo
	   sits flush against the top and bottom edges of the header bar. */
	.site-header .title-area {
		float: none;
		margin: 0;
		width: auto;
	}

	.nav-primary .genesis-nav-menu {
		align-items: center;
		display: flex;
		gap: 4px;
		width: auto;
	}

}

/* Four footer widget areas, not the three the base stylesheet assumes - and a
   flex row rather than its floats, which the clearfix above no longer contains.
   Starts at 768px so the base 960px float rule is never the active layout. */
@media only screen and (min-width: 768px) {

	.footer-widgets .wrap {
		align-items: flex-start;
		display: flex;
		flex-wrap: wrap;
		gap: 40px;
	}

	/* Two up on tablet - four across is unreadable at this width. Restored to
	   four in the 1024px block below. */
	.footer-widget-area {
		flex: 1 1 calc(50% - 20px);
		float: none;
		width: auto;
	}

}

/* Four across once there is room. Must come after the 768px rule above, which
   would otherwise win at equal specificity. */
@media only screen and (min-width: 1024px) {

	.footer-widget-area {
		flex: 1 1 0;
	}

}

/* Columns stack below 782px (core + lib/gutenberg/front-end.css). A column
   with the "First on mobile" style (lib/patterns.php) moves to the top of the
   stack. Ignored when "Stack on mobile" is switched off. */
@media only screen and (max-width: 781px) {

	.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column.is-style-sl-mobile-first {
		order: -1;
	}

}

@media only screen and (max-width: 767px) {

	:root {
		--sl-gutter: 18px;
	}

	h1 {
		font-size: 34px;
	}

	h2 {
		font-size: 26px;
	}

	.sl-page-intro__title,
	.sl-hero__title {
		font-size: 38px;
	}

	.sl-hero__sub {
		font-size: 19px;
	}

	.sl-hero::before {
		background-image: linear-gradient(180deg, rgba(2, 28, 53, 0.88) 0%, rgba(2, 28, 53, 0.78) 100%);
	}

	.sl-bottom-bar {
		justify-content: flex-start;
	}

	.footer-widgets .wrap {
		display: block;
	}

	.footer-widget-area {
		margin-bottom: 32px;
	}

}

@media only screen and (max-width: 479px) {

	.sl-page-intro__title,
	.sl-hero__title {
		font-size: 32px;
	}

	.wp-block-button .wp-block-button__link {
		padding: 14px 20px;
	}

}