/*
Theme Name: Benny's
Theme URI:
Description: Custom child theme for Benny's Bike Shop.
Author: Salt Design / S H
Template: generatepress
Version: 1.0
Text Domain: bennys
*/

/* =========================================================
   BENNY'S – GLOBAL DESIGN SYSTEM
   ========================================================= */


/* ---------------------------------------------------------
   Fonts
   --------------------------------------------------------- */

@font-face {
	font-family: "Archivo Narrow";
	src: url("assets/fonts/archivo-narrow-variable.woff2") format("woff2");
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
}

@font-face {
	font-family: "Instrument Sans";
	src: url("assets/fonts/instrument-sans-variable.woff2") format("woff2");
	font-style: normal;
	font-weight: 400 700;
	font-stretch: 75% 100%;
	font-display: swap;
}


/* ---------------------------------------------------------
   Global variables
   --------------------------------------------------------- */

:root {

	/* Fonts */
	--font-heading: "Archivo Narrow", sans-serif;
	--font-body: "Instrument Sans", sans-serif;

	/* Colours */
	--color-black: #111111;
	--color-white: #ffffff;
	--color-green: #174f43;
	--color-grey: #6d6d6d;
	--color-light-grey: #f4f4f2;
	--color-border: #d8d8d5;

	/* Layout */
	--container-width: 1200px;
	--page-gutter: 30px;

	/* Section spacing */
	--space-xs: 10px;
	--space-sm: 20px;
	--space-md: 40px;
	--space-lg: 60px;
	--space-xl: 100px;

	/* Transitions */
	--transition: 180ms ease;
}


/* ---------------------------------------------------------
   Base
   --------------------------------------------------------- */

html {
	box-sizing: border-box;
}

*,
*::before,
*::after {
	box-sizing: inherit;
}

body {
	margin: 0;
	font-family: var(--font-body);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.45;
	color: var(--color-black);
	background: var(--color-white);
	-webkit-font-smoothing: antialiased;
}


/* ---------------------------------------------------------
   Typography
   --------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {
	margin-top: 0;
	font-family: var(--font-heading);
	font-weight: 700;
	line-height: 0.95;
	letter-spacing: -0.015em;
	color: var(--color-black);
}

h1 {
	font-size: clamp(52px, 6vw, 88px);
}

h2 {
	font-size: clamp(36px, 4vw, 56px);
}

h3 {
	font-size: clamp(28px, 3vw, 38px);
}

h4 {
	font-size: 24px;
}

h5 {
	font-size: 20px;
}

h6 {
	font-size: 17px;
}

p {
	margin-top: 0;
	margin-bottom: 1.25em;
}

a {
	color: inherit;
}

/* =========================================================
   GENERATEPRESS OVERRIDES
   ========================================================= */


/* ---------------------------------------------------------
   General reset / theme overrides
   --------------------------------------------------------- */

body,
button,
input,
select,
textarea {
	font-family: var(--font-body);
}

.site-content {
	padding: 0;
}

.inside-article,
.separate-containers .inside-article,
.one-container .site-content {
	padding: 0;
}

.entry-content,
.entry-summary,
.page-content {
	margin: 0;
}

.entry-content > *:last-child,
.entry-summary > *:last-child {
	margin-bottom: 0;
}

.site-main {
	margin: 0;
}


/* Remove default GeneratePress content backgrounds/shadows */
.separate-containers .inside-article,
.separate-containers .comments-area,
.separate-containers .page-header,
.separate-containers .paging-navigation {
	background: transparent;
}


/* ---------------------------------------------------------
   Images
   --------------------------------------------------------- */

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

figure {
	margin: 0;
}


/* ---------------------------------------------------------
   Lists
   --------------------------------------------------------- */

ul,
ol {
	margin-top: 0;
}

.entry-content ul,
.entry-content ol {
	margin-bottom: 1.5em;
}


/* ---------------------------------------------------------
   Forms
   --------------------------------------------------------- */

input,
textarea,
select,
button {
	font-size: inherit;
}

input,
textarea,
select {
	border-radius: 0;
	box-shadow: none;
}

/* =========================================================
   LINKS
   ========================================================= */

a {
	color: inherit;
	text-decoration: none;
	transition:
		color var(--transition),
		opacity var(--transition);
}

.entry-content a:not(.button):not(.wp-element-button) {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

.entry-content a:not(.button):not(.wp-element-button):hover {
	opacity: 0.65;
}

/* =========================================================
   BUTTONS
   ========================================================= */

button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.button,
.wp-block-button__link,
.wp-element-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;

	min-height: 48px;
	padding: 12px 22px;

	border: 1px solid var(--color-green);
	border-radius: 0;

	background: var(--color-green);
	color: var(--color-white);

	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.01em;

	text-decoration: none;
	cursor: pointer;

	transition:
		background-color var(--transition),
		color var(--transition),
		border-color var(--transition);
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
.button:hover,
.wp-block-button__link:hover,
.wp-element-button:hover {
	background: var(--color-black);
	border-color: var(--color-black);
	color: var(--color-white);
}

.button--outline,
.is-style-outline > .wp-block-button__link {
	background: transparent;
	color: var(--color-black);
	border-color: var(--color-black);
}

.button--outline:hover,
.is-style-outline > .wp-block-button__link:hover {
	background: var(--color-black);
	color: var(--color-white);
	border-color: var(--color-black);
}

.text-link {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;

	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;

	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

.text-link:hover {
	opacity: 0.6;
}

/* =========================================================
   TYPOGRAPHY REFINEMENT
   ========================================================= */

body {
	font-size: 16px;
	line-height: 1.5;
}

p,
li,
input,
textarea,
select {
	font-family: var(--font-body);
	font-weight: 400;
}

p {
	margin: 0 0 1.25em;
}

small {
	font-size: 0.875em;
}


/* ---------------------------------------------------------
   Headings
   --------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--font-heading);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: -0.015em;
	margin: 0 0 0.45em;
}

h1 {
	font-size: clamp(52px, 6vw, 88px);
	line-height: 0.9;
}

h2 {
	font-size: clamp(38px, 4.5vw, 58px);
	line-height: 0.92;
}

h3 {
	font-size: clamp(28px, 3vw, 38px);
	line-height: 0.96;
}

h4 {
	font-size: 24px;
	line-height: 1;
}

h5 {
	font-size: 20px;
	line-height: 1.05;
}

h6 {
	font-size: 17px;
	line-height: 1.1;
}


/* ---------------------------------------------------------
   Utility typography
   --------------------------------------------------------- */

.eyebrow,
.section-label {
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.lead {
	font-size: clamp(20px, 2vw, 28px);
	line-height: 1.35;
}

.display-heading {
	font-family: var(--font-heading);
	font-size: clamp(64px, 9vw, 128px);
	font-weight: 700;
	line-height: 0.82;
	letter-spacing: -0.025em;
	text-transform: uppercase;
}

/* =========================================================
   GUTENBERG BLOCK DEFAULTS
   ========================================================= */

.entry-content > * {
	margin-block-start: 0;
	margin-block-end: var(--space-md);
}

.entry-content > *:last-child {
	margin-bottom: 0;
}


/* Headings inside content */
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
	margin-top: var(--space-lg);
	margin-bottom: var(--space-sm);
}

.entry-content > h1:first-child,
.entry-content > h2:first-child,
.entry-content > h3:first-child {
	margin-top: 0;
}


/* Paragraphs */
.entry-content p {
	margin-bottom: 1.25em;
}


/* Lists */
.entry-content ul,
.entry-content ol {
	padding-left: 1.4em;
	margin-bottom: 1.5em;
}

.entry-content li + li {
	margin-top: 0.35em;
}


/* Quotes */
.wp-block-quote {
	margin: var(--space-lg) 0;
	padding-left: var(--space-md);
	border-left: 2px solid var(--color-black);
}

.wp-block-quote p {
	font-size: clamp(20px, 2vw, 28px);
	line-height: 1.35;
}


/* Images */
.wp-block-image {
	margin-bottom: var(--space-md);
}

.wp-block-image img {
	width: 100%;
}


/* Galleries */
.wp-block-gallery {
	margin-bottom: var(--space-lg);
}


/* Columns */
.wp-block-columns {
	gap: var(--space-md);
	margin-bottom: var(--space-lg);
}

.wp-block-column > *:last-child {
	margin-bottom: 0;
}


/* Groups */
.wp-block-group {
	margin-bottom: var(--space-lg);
}


/* Separators */
.wp-block-separator {
	border: 0;
	border-top: 1px solid var(--color-border);
	margin: var(--space-lg) 0;
}

/* =========================================================
   LAYOUT UTILITIES
   ========================================================= */

.section {
	padding-block: var(--space-xl);
}

.section--compact {
	padding-block: var(--space-lg);
}

.section--flush {
	padding-block: 0;
}

.container {
	width: min(
		calc(100% - (var(--page-gutter) * 2)),
		var(--container-width)
	);
	margin-inline: auto;
}

.stack > * + * {
	margin-top: var(--space-md);
}

.stack--sm > * + * {
	margin-top: var(--space-sm);
}

.stack--lg > * + * {
	margin-top: var(--space-lg);
}


/* ---------------------------------------------------------
   Global layout
   --------------------------------------------------------- */

.bennys-container {
	width: min(
		calc(100% - (var(--page-gutter) * 2)),
		var(--container-width)
	);
	margin-inline: auto;
}

.bennys-section {
	padding-block: var(--space-xl);
}

/* =========================================================
   SITE HEADER
   ========================================================= */

.site-header,
.main-navigation {
	background: var(--color-white);
}

.main-navigation .inside-navigation {
	width: min(
		calc(100% - (var(--page-gutter) * 2)),
		var(--container-width)
	);
	margin-inline: auto;
}


/* ---------------------------------------------------------
   Logo
   --------------------------------------------------------- */

.navigation-branding {
	margin-right: auto;
}

.navigation-branding img,
.site-logo img {
	display: block;
	width: auto;
	max-height: 48px;
}


/* ---------------------------------------------------------
   Primary navigation
   --------------------------------------------------------- */

.main-navigation .main-nav > ul {
	align-items: center;
}

.main-navigation .main-nav > ul > li > a {
	padding-inline: 17px;

	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.035em;
	text-transform: uppercase;

	color: var(--color-black);

	transition:
		color var(--transition),
		opacity var(--transition);
}

.main-navigation .main-nav > ul > li > a:hover,
.main-navigation .main-nav > ul > li:hover > a,
.main-navigation .main-nav > ul > li[class*="current-menu-"] > a {
	color: var(--color-green);
	background: transparent;
}


/* Last item doesn't need right padding */
.main-navigation .main-nav > ul > li:last-child > a {
	padding-right: 0;
}

/* ---------------------------------------------------------
   Dropdown navigation
   --------------------------------------------------------- */

.main-navigation ul ul {
	width: 240px;
	padding: 12px 0;

	background: var(--color-white);
	border: 1px solid var(--color-border);

	box-shadow: none;
}

.main-navigation ul ul li {
	background: transparent;
}

.main-navigation ul ul li a {
	padding: 10px 18px;

	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.25;

	color: var(--color-black);
	background: transparent;
}

.main-navigation ul ul li a:hover,
.main-navigation ul ul li:hover > a,
.main-navigation ul ul li[class*="current-menu-"] > a {
	color: var(--color-green);
	background: transparent;
}


/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */

@media (max-width: 767px) {

	:root {
		--page-gutter: 20px;
		--space-xl: 60px;
	}

	body {
		font-size: 16px;
	}
	h1 {
		font-size: clamp(44px, 13vw, 64px);
	}

	h2 {
		font-size: clamp(34px, 10vw, 48px);
	}

	h3 {
		font-size: clamp(26px, 8vw, 34px);
	}

	.lead {
		font-size: 20px;
	}

	.display-heading {
		font-size: clamp(58px, 18vw, 88px);
	}

	.wp-block-columns {
		gap: var(--space-sm);
	}

}