/*
Theme Name: Helipad
Theme URI: https://www.helipad.co.uk
Description: Child theme for helipad.co.uk. Carries the approved design's colour, type and layout tokens so every Divi module inherits them, and self hosts the two webfonts. Built for Divi 4.
Author: Helipad
Version: 1.0.2
Template: Divi
Text Domain: helipad
*/

/* ---------------------------------------------------------------------------
   Do not enqueue style.css from functions.php.

   Divi already handles it: with a child theme active and no stylesheet
   enqueued by the child, Divi enqueues the parent style.css first and this
   file second, in that order. Enqueueing it here as well loads it twice and
   can put it in front of the parent.
   --------------------------------------------------------------------------- */


/* ---------------------------------------------------------------------------
   1. Tokens

   Every value below comes from the approved design. Change a colour here and
   it changes across the site, including inside the three Helipad modules,
   which read the same custom property names.
   --------------------------------------------------------------------------- */

:root {
	/* Surfaces */
	--hp-bg:              #0A0C0E;   /* the base, near black and slightly cool */
	--hp-panel:           #0D1013;   /* cards, modals, inset blocks */
	--hp-panel-alt:       #111517;   /* occasional second level surface */

	/* Ink. Warm off white, never pure white. */
	--hp-fg:              #F4F2EE;
	--hp-fg-rgb:          244, 242, 238;

	/* Text is set on the foreground colour at reduced alpha, never in grey. */
	--hp-fg-80:           rgba(var(--hp-fg-rgb), .80);  /* emphasised body, addresses */
	--hp-fg-72:           rgba(var(--hp-fg-rgb), .72);  /* footer links */
	--hp-fg-66:           rgba(var(--hp-fg-rgb), .66);  /* standard body copy */
	--hp-fg-62:           rgba(var(--hp-fg-rgb), .62);  /* secondary labels */
	--hp-fg-58:           rgba(var(--hp-fg-rgb), .58);  /* tertiary, card blurbs */
	--hp-fg-50:           rgba(var(--hp-fg-rgb), .50);  /* timestamps, meta */

	/* Accent. Burnt orange, used sparingly: small type, hairlines, 7 to 9px dots. */
	--hp-accent:          #C4713F;
	--hp-accent-rgb:      196, 113, 63;
	--hp-accent-hover:    rgba(var(--hp-accent-rgb), .60);

	/* The Redhill marker on the map, and nothing else. */
	--hp-hq:              rgba(178, 74, 60, .78);

	/* Rules and borders. Nothing on the site uses a solid border colour. */
	--hp-rule-07:         rgba(var(--hp-fg-rgb), .07);
	--hp-rule-10:         rgba(var(--hp-fg-rgb), .10);
	--hp-rule-16:         rgba(var(--hp-fg-rgb), .16);

	/* Type */
	--hp-font-body:       "Schibsted Grotesk", "Helvetica Neue", Helvetica, sans-serif;
	--hp-font-display:    Carlito, Calibri, Candara, sans-serif;
	--hp-font-mono:       ui-monospace, SFMono-Regular, Menlo, monospace;

	/* Scale */
	--hp-h1:              clamp(38px, 5.6vw, 86px);
	--hp-h2:              clamp(26px, 2.6vw, 42px);
	--hp-h3:              clamp(22px, 2.1vw, 30px);
	--hp-body:            16px;
	--hp-body-small:      15px;

	/* Layout */
	--hp-page-max:        2400px;
	--hp-gutter:          clamp(20px, 3.2vw, 64px);
	--hp-section-major:   clamp(96px, 13vh, 180px);
	--hp-section-minor:   clamp(44px, 7vh, 80px);
	--hp-section-footer:  clamp(64px, 9vh, 120px);
	--hp-section-first:   clamp(140px, 20vh, 220px);   /* clears the fixed nav */
	--hp-card-pad:        clamp(36px, 4.5vw, 72px);
}


/* ---------------------------------------------------------------------------
   2. Webfonts, served from this theme

   Both faces are SIL Open Font License 1.1, so self hosting is permitted.
   The licences are in fonts/ beside the files.

   Carlito is the metric compatible stand in for Calibri, which is what the
   design names. Serving Carlito ourselves means the headings look the same on
   a Mac, a phone and a Windows machine, instead of only where Calibri happens
   to be installed.

   Note on weight. The design asks for body weight 300. Schibsted Grotesk has
   no 300; its lightest cut is 400, so the approved design was already
   rendering at 400 and that is what is set below. Nothing changes visually.
   --------------------------------------------------------------------------- */

@font-face {
	font-family: "Schibsted Grotesk";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("fonts/schibsted-grotesk-latin-400-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
		U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
		U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Schibsted Grotesk";
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url("fonts/schibsted-grotesk-latin-400-italic.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
		U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
		U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Schibsted Grotesk";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("fonts/schibsted-grotesk-latin-700-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
		U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
		U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: Carlito;
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("fonts/carlito-latin-400-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
		U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
		U+2215, U+FEFF, U+FFFD;
}


/* ---------------------------------------------------------------------------
   3. The page
   --------------------------------------------------------------------------- */

html,
body,
body.et-db #et-boc,
#page-container {
	background-color: var(--hp-bg);
}

body {
	color: var(--hp-fg-66);
	font-family: var(--hp-font-body);
	font-size: var(--hp-body);
	font-weight: 400;
	line-height: 1.72;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Keep measure sensible. The design holds body copy to 70 to 72 characters. */
.hp-measure,
.hp-measure p {
	max-width: 71ch;
}

p {
	text-wrap: pretty;
}

/* The whole site is square. No radius anywhere, including on Divi's own
   buttons, inputs and images. */
#page-container .et_pb_button,
#page-container .et_pb_module,
#page-container .et_pb_image img,
#page-container input,
#page-container select,
#page-container textarea,
#page-container button {
	border-radius: 0;
}


/* ---------------------------------------------------------------------------
   4. Headings

   The display face at weight 400, large, with tight negative tracking is the
   whole typographic idea. Adding weight breaks it, so bold is turned off
   rather than left to a plugin or an editor to get right.
   --------------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6,
#page-container h1,
#page-container h2,
#page-container h3,
#page-container h4,
#page-container h5,
#page-container h6 {
	font-family: var(--hp-font-display);
	font-weight: 400;
	color: var(--hp-fg);
}

h1, #page-container h1 {
	font-size: var(--hp-h1);
	line-height: 1.02;
	letter-spacing: -.014em;
	text-wrap: balance;
}

h2, #page-container h2 {
	font-size: var(--hp-h2);
	line-height: 1.1;
}

h3, #page-container h3 {
	font-size: var(--hp-h3);
	line-height: 1.12;
}


/* ---------------------------------------------------------------------------
   5. Repeated components
   --------------------------------------------------------------------------- */

/* Eyebrow, then 22 to 28px of space, then the heading. The most repeated
   pattern on the site. */
.hp-eyebrow {
	display: block;
	margin: 0 0 24px;
	font-family: var(--hp-font-mono);
	font-size: 14px;
	letter-spacing: .25em;
	text-transform: uppercase;
	color: var(--hp-accent);
	line-height: 1.4;
}

/* Meta label: timestamps, counts, small print. */
.hp-meta {
	font-family: var(--hp-font-mono);
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--hp-fg-50);
}

/* Card */
.hp-card {
	background: var(--hp-panel);
	border: 1px solid var(--hp-rule-16);
	padding: var(--hp-card-pad);
	transition: border-color .4s ease;
}

.hp-card:hover {
	border-color: var(--hp-accent-hover);
}

.hp-card p:last-child {
	margin-bottom: 0;
}

/* Small body, used in card blurbs. */
.hp-blurb {
	font-size: var(--hp-body-small);
	line-height: 1.66;
	color: var(--hp-fg-58);
}


/* ---------------------------------------------------------------------------
   6. Links and buttons

   The primary call to action is the pale block, not an orange one. The design
   is explicit that one orange button on a page is already one too many.
   --------------------------------------------------------------------------- */

#page-container a {
	color: var(--hp-accent);
	text-decoration: none;
	transition: color .3s ease, opacity .3s ease;
}

#page-container a:hover {
	color: var(--hp-fg);
}

#page-container .et_pb_button,
#page-container .et_pb_button:hover {
	background-color: var(--hp-fg);
	border: 0;
	color: var(--hp-bg);
	font-family: var(--hp-font-mono);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: .22em;
	text-transform: uppercase;
	padding: 19px 34px;
	line-height: 1;
	transition: background-color .3s ease, color .3s ease;
}

/* Divi adds an arrow glyph and extra padding on hover. Both are off. */
#page-container .et_pb_button:after,
#page-container .et_pb_button:before {
	display: none;
}

#page-container .et_pb_button:hover {
	background-color: var(--hp-accent);
	color: var(--hp-fg);
	padding: 19px 34px;
}

/* The quieter second action: a hairline box rather than a filled block. */
#page-container .hp-button-ghost.et_pb_button,
#page-container .hp-button-ghost.et_pb_button:hover {
	background-color: transparent;
	border: 1px solid var(--hp-rule-16);
	color: var(--hp-fg-80);
}

#page-container .hp-button-ghost.et_pb_button:hover {
	border-color: var(--hp-accent-hover);
	color: var(--hp-fg);
}


/* ---------------------------------------------------------------------------
   7. Layout and sections
   --------------------------------------------------------------------------- */

#page-container .et_pb_row,
#page-container .et_pb_row.et_pb_row_fullwidth {
	max-width: var(--hp-page-max);
	width: 100%;
	padding-left: var(--hp-gutter);
	padding-right: var(--hp-gutter);
}

#page-container .et_pb_section {
	background-color: transparent;
	padding-top: var(--hp-section-major);
	padding-bottom: 0;
}

/* Put this class on the first section of every page so it clears the fixed
   nav. */
#page-container .hp-section-first {
	padding-top: var(--hp-section-first);
}

#page-container .hp-section-minor {
	padding-top: var(--hp-section-minor);
}

/* The last section before the footer. */
#page-container .hp-section-last {
	padding-bottom: var(--hp-section-footer);
}

/* Rule between stacked blocks. */
.hp-rule {
	border: 0;
	border-top: 1px solid var(--hp-rule-10);
	margin: 0;
}


/* ---------------------------------------------------------------------------
   8. Navigation and footer
   --------------------------------------------------------------------------- */

#main-header,
#main-header.et-fixed-header {
	background-color: rgba(10, 12, 14, .88);
	backdrop-filter: blur(10px);
	box-shadow: none;
	border-bottom: 1px solid var(--hp-rule-07);
}

#top-menu a,
#et-top-navigation #top-menu li a {
	font-family: var(--hp-font-mono);
	font-size: 11px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--hp-fg-72);
}

#top-menu a:hover,
#et-top-navigation #top-menu li a:hover {
	color: var(--hp-fg);
	opacity: 1;
}

#top-menu li.current-menu-item > a {
	color: var(--hp-accent);
}

#main-footer {
	background-color: var(--hp-bg);
	border-top: 1px solid var(--hp-rule-07);
}

#footer-bottom {
	background-color: transparent;
}

#main-footer a,
#footer-bottom a {
	color: var(--hp-fg-72);
}

#main-footer a:hover,
#footer-bottom a:hover {
	color: var(--hp-fg);
}


/* ---------------------------------------------------------------------------
   9. Forms

   Square, hairline, on the panel colour. Divi's defaults are rounded and pale.
   --------------------------------------------------------------------------- */

#page-container input[type="text"],
#page-container input[type="email"],
#page-container input[type="tel"],
#page-container input[type="url"],
#page-container input[type="number"],
#page-container input[type="date"],
#page-container select,
#page-container textarea {
	background-color: var(--hp-panel);
	border: 1px solid var(--hp-rule-16);
	color: var(--hp-fg);
	font-family: var(--hp-font-body);
	font-size: var(--hp-body);
	padding: 16px 18px;
	transition: border-color .3s ease;
}

#page-container input:focus,
#page-container select:focus,
#page-container textarea:focus {
	border-color: var(--hp-accent);
	outline: 0;
}

#page-container ::placeholder {
	color: var(--hp-fg-50);
}

#page-container label {
	font-family: var(--hp-font-mono);
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--hp-fg-62);
}


/* ---------------------------------------------------------------------------
   10. Accessibility

   The design has no visible focus style of its own. One is added here, because
   every interactive element on the site needs to be reachable by keyboard and
   visible when it is. It only shows for keyboard users.
   --------------------------------------------------------------------------- */

#page-container a:focus-visible,
#page-container button:focus-visible,
#page-container input:focus-visible,
#page-container select:focus-visible,
#page-container textarea:focus-visible,
#page-container [tabindex]:focus-visible {
	outline: 2px solid var(--hp-accent);
	outline-offset: 3px;
}

/* Skip link, visible once focused. */
.hp-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100000;
}

.hp-skip-link:focus {
	left: var(--hp-gutter);
	top: 12px;
	background: var(--hp-fg);
	color: var(--hp-bg);
	padding: 12px 18px;
	font-family: var(--hp-font-mono);
	font-size: 11px;
	letter-spacing: .18em;
	text-transform: uppercase;
}

/* Honour a request for less movement. The design's three motion rules all
   become instant. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
}


/* ---------------------------------------------------------------------------
   11. Breakpoints

   The design is fluid and breaks in only four places. Three of them belong to
   individual components and live with those components. The one global change
   is the gutter on a phone.
   --------------------------------------------------------------------------- */

@media (max-width: 440px) {
	:root {
		--hp-gutter: 20px;
	}
}


/* ---------------------------------------------------------------------------
   12. Page patterns

   Three repeated blocks that are not modules: the stat band on the home page,
   the core services grid, and the numbered rail used on Our Story and Privacy.
   They are built as grids rather than Divi columns because the design's
   collapse points, 6 to 3 to 2 to 1, are not what Divi's own columns do.
   --------------------------------------------------------------------------- */

/* The hairline grid shared by the stat band and the services grid: one pixel
   of rule colour showing through the gaps, with each cell on the page colour. */
.hp-grid,
.hp-stats {
	display: grid;
	gap: 1px;
	background: var(--hp-rule-10);
	border: 1px solid var(--hp-rule-10);
}

.hp-grid > *,
.hp-stats > * {
	background: var(--hp-bg);
	padding: clamp(24px, 2.4vw, 40px);
}

/* Stat band, four figures */
.hp-stats {
	grid-template-columns: repeat(4, 1fr);
}

.hp-stat-figure {
	display: block;
	font-family: var(--hp-font-display);
	font-size: clamp(34px, 3.6vw, 56px);
	line-height: 1;
	color: var(--hp-fg);
	margin-bottom: 14px;
}

.hp-stat-figure sup,
.hp-stat-unit {
	font-size: .45em;
	vertical-align: super;
	letter-spacing: .02em;
}

.hp-stat-label {
	display: block;
	font-family: var(--hp-font-mono);
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--hp-fg-50);
	line-height: 1.6;
}

@media (max-width: 860px) {
	.hp-stats { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 440px) {
	.hp-stats { grid-template-columns: 1fr; }
}

/* Core services, six across */
.hp-grid-6 { grid-template-columns: repeat(6, 1fr); }

@media (max-width: 1340px) { .hp-grid-6 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { .hp-grid-6 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 440px)  { .hp-grid-6 { grid-template-columns: 1fr; } }

/* Two and three across, for the contact cards and the what-we-do blocks */
.hp-grid-3 { grid-template-columns: repeat(3, 1fr); }
.hp-grid-2 { grid-template-columns: repeat(2, 1fr); }

@media (max-width: 860px) {
	.hp-grid-3,
	.hp-grid-2 { grid-template-columns: 1fr; }
}

.hp-grid h3 {
	font-size: clamp(17px, 1.4vw, 21px);
	line-height: 1.2;
	margin: 0 0 12px;
}

.hp-grid p {
	font-size: var(--hp-body-small);
	line-height: 1.6;
	color: var(--hp-fg-58);
	margin: 0;
}

/* The numeral that opens a card or a rail entry */
.hp-numeral {
	display: block;
	font-family: var(--hp-font-mono);
	font-size: 11px;
	letter-spacing: .16em;
	color: var(--hp-accent);
	margin-bottom: 18px;
}

/* ---------------------------------------------------------------------------
   13. Numbered rail

   Our Story and the Privacy page both run a left column carrying a year or a
   numeral, a hairline rule, and the content to the right.
   --------------------------------------------------------------------------- */

.hp-rail {
	display: grid;
	grid-template-columns: 120px 1px 1fr;
	gap: 0 clamp(24px, 3vw, 56px);
}

.hp-rail + .hp-rail {
	margin-top: clamp(40px, 6vh, 80px);
}

.hp-rail-mark {
	font-family: var(--hp-font-mono);
	font-size: 11px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--hp-accent);
	padding-top: .4em;
}

.hp-rail-rule {
	background: linear-gradient(to bottom, transparent, var(--hp-rule-16) 12%, var(--hp-rule-16) 88%, transparent);
}

.hp-rail-body h2,
.hp-rail-body h3 {
	margin-top: 0;
}

.hp-rail-body p:last-child {
	margin-bottom: 0;
}

/* The design moves the numeral above its heading at 860px on Privacy, and
   narrows the year column at 980px on Our Story. */
@media (max-width: 980px) {
	.hp-rail { grid-template-columns: 76px 1px 1fr; }
}

@media (max-width: 860px) {
	.hp-rail { grid-template-columns: 1fr; }
	.hp-rail-rule { display: none; }
	.hp-rail-mark { padding-top: 0; margin-bottom: 10px; }
}

/* ---------------------------------------------------------------------------
   14. Hero

   Full bleed photograph with the headline over it. The crop is set in the
   design and must not be changed: the left edge sits just past the truck and
   both vehicles on the right stay in shot.
   --------------------------------------------------------------------------- */

.hp-hero {
	position: relative;
	min-height: clamp(560px, 86vh, 920px);
	display: flex;
	align-items: flex-end;
}

.hp-hero-veil {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to right, rgba(10, 12, 14, .82), rgba(10, 12, 14, .30) 62%, rgba(10, 12, 14, .55)),
		linear-gradient(to top, rgba(10, 12, 14, .9), transparent 55%);
	pointer-events: none;
}

.hp-hero-body {
	position: relative;
	z-index: 1;
	max-width: 62ch;
}

/* A pair of actions, square and side by side. */
.hp-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 34px;
}


/* ---------------------------------------------------------------------------
   15. Buttons sitting together

   Divi wraps every button module in its own block, so two buttons in one
   column stack. The design puts them side by side.
   --------------------------------------------------------------------------- */

#page-container .et_pb_button_module_wrapper {
	display: inline-block;
	margin: 0 14px 14px 0;
}

#page-container .et_pb_button_module_wrapper:last-child {
	margin-right: 0;
}

/* Screen reader only, used by the Contact page, which has no visible h1. */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}


/* ---------------------------------------------------------------------------
   16. Footer bottom line
   --------------------------------------------------------------------------- */

#footer-info {
	float: none;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	align-items: baseline;
	padding: 18px 0;
	font-size: 13px;
	line-height: 1.6;
	color: var(--hp-fg-50);
}

.hp-footer-company {
	flex: 1 1 32ch;
}

.hp-footer-links a {
	color: var(--hp-fg-72);
}

#footer-bottom .et-social-icons {
	float: none;
	margin: 0 0 8px;
	padding: 0;
}

#footer-bottom .et-social-icon a {
	color: var(--hp-fg-72);
}

#footer-bottom .et-social-icon a:hover {
	color: var(--hp-accent);
	opacity: 1;
}

@media (max-width: 640px) {
	#footer-info { display: block; }
	.hp-footer-links { display: block; margin-top: 10px; }
}