/**
 * Theme Name:   Graph-X
 * Theme URI:    https://graph-x.co.uk/
 * Author:       Thoughts & Ideas
 * Author URI:   https://www.thoughtsideas.uk/
 * Template:     storefront
 * Version:      0.1.19
 * License:      GNU General Public License v3 or later
 * License URI:  http://www.gnu.org/licenses/gpl-3.0.html
 * Text Domain:  graphx
 */

 /* Brand Colors
   ========================================================================== */
:root {

	--color-white:                     hsl(0, 0%, 100%);

	--color-neutral-05:                hsl(0, 0%, 95%);
	--color-neutral-10:                hsl(0, 0%, 90%);
	--color-neutral-25:                hsl(0, 0%, 75%);
	--color-neutral-50:                hsl(0, 0%, 35%);
	--color-neutral-75:                hsl(0, 0%, 25%);
	--color-neutral-90:                hsl(0, 0%, 10%);
	--color-neutral:                   var( --color-neutral-10 );

	--color-black:                     hsl(201, 74%, 6%);
	--color-gold:                      hsl(34, 28%, 43%);

	--color-vekto:                     #24a8e0;

	--color-dark:                      #151515;

	--color-primary:                   hsl(205, 100%, 26%);
	--color-secondary:                 hsl(312, 63%, 24%);
	--color-active:                    var( --color-gold );
	--color-text:                      var( --color-black );
}

/* Spacing
   ========================================================================== */
:root {
  --space-7: 48px;
}

/* Font Stacks
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,400;0,700;1,400;1,700&display=swap');

:root {

	--font-family-primary:
		'Source Sans Pro',
		-apple-system,
		blinkmacsystemfont,
		'Segoe UI',
		roboto,
		helvetica,
		arial,
		sans-serif;

	--font-family-body:
		'Source Sans Pro',
		-apple-system,
		blinkmacsystemfont,
		'Segoe UI',
		roboto,
		helvetica,
		arial,
		sans-serif;

	--font-family-code:
		'SF Mono',
		'Monaco',
		'Inconsolata',
		'Fira Mono',
		'Droid Sans Mono',
		'Source Code Pro',
		monospace;

	--font-family-pre:
		'Courier 10 Pitch',
		courier,
		monospace;

}

/* Font Weights
	*
	* Require less font weights to be loaded.
	* Adjust weights we don't use to display the closest weight we do.
	*
	* 1. 100 - Thin (Hairline).
	* 2. 200 - Extra Light (Ultra Light).
	* 3. 300 - Light.
	* 4. 400 - Normal.
	* 5. 500 - Medium.
	* 6. 600 - Semi Bold (Demi Bold).
	* 7. 700 - Bold.
	* 8. 800 - Extra Bold (Ultra Bold).
	* 9. 900 - Black (Heavy).
		========================================================================== */

:root {

	--font-weight-thin:           400; /* [1] */
	--font-weight-light-extra:    400; /* [2] */
	--font-weight-light:          400; /* [3] */
	--font-weight-normal:         500; /* [4] */
	--font-weight-medium:         500; /* [5] */
	--font-weight-bold-semi:      700; /* [6] */
	--font-weight-bold:           700; /* [7] */
	--font-weight-bold-extra:     700; /* [8] */
	--font-weight-black:          700; /* [9] */

}

/* Font Sizes
 *
 * Type Scale: Perfect Fith (~1.5)
   ========================================================================== */

:root {

	--font-size--body-s: 66.6875%;
	--font-size--body-m: 100%;
	--font-size--body-l: 150%;

}

@media ( min-width: 1200px ) {

	:root {
		--font-size--body-s: 12px;
		--font-size--body-m: 112.5%;
		--font-size--body-l: 27px;
	}

}

@media ( min-width: 1400px ) {

	:root {
		--font-size--body-s: 13.33px;
		--font-size--body-m: 125%;
		--font-size--body-l: 30px;
	}

}

body,
button,
input,
textarea {
	color: var( --color-text );
	font-family: var( --font-family-body );
	font-feature-settings: "dlig";
	font-size: var( --font-size--body-m );
	font-variant-ligatures: discretionary-ligatures;
	font-weight: var( --font-weight-medium );
	line-height: 1.3333;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	text-size-adjust: 100%;
}

a {
	color: var( --color-active );
}

/* ==========================================================================
 * #Headings
 *
 * Style Headings.
   ========================================================================== */

:root {

	--font-heading-size--level-1: 3rem; /* 48px */
	--font-heading-size--level-2: 1.875rem; /* 30px */
	--font-heading-size--level-3: 1.5rem; /* 24px */
	--font-heading-size--level-4: 1rem; /* 18px */
	--font-heading-size--level-5: 0.875rem; /* 14px */

}

@media ( min-width: 1200px ) {

	:root {

		--font-heading-size--level-1: 6.6667rem; /* 120px */
		--font-heading-size--level-2: 4.1666rem; /* 75px */
		--font-heading-size--level-3: 1.6667rem; /* 30px */
		--font-heading-size--level-4: 1rem; /* 18px */
		--font-heading-size--level-5: 0.875rem; /* 14px */
	}

}

h1, h2, h3, h4, h5, h6,
.c-heading {
	margin-top: 0;
	margin-bottom: 0;
	font-weight: var( --font-weight-bold );
	line-height: 1.2777;
	letter-spacing: 0;
	color: var( --color-neutral-90 );
}

/* Modifier: Style
 *
 * Apply style (only) changes to sections.
   ========================================================================== */

/**
 * Heading: Primary
 *
 * 1. Centre image correctly when used as inline for h1.
 */
h1,
.heading--level-1,
.is-style-heading--level-1 {
	font-family: var( --font-family-primary );
	font-size: var( --font-heading-size--level-1 );
	font-weight: var( --font-weight-bold-extra );
	line-height: 1.0769;
	letter-spacing: -0.025em;
	color: currentColor;
	text-transform: uppercase;
}

h1.has-text-align-center,
.is-style-heading--level-1.has-text-align-center {
	margin-right: auto; /* [1] */
	margin-left: auto; /* [1] */
}

/**
 * Heading: Secondary
 */
h2,
.heading--level-2,
.is-style-heading--level-2 {
	font-family: var( --font-family-body );
	font-size: var( --font-heading-size--level-2 );
	font-weight: var( --font-weight-bold );
	letter-spacing: 0.03em;
	line-height: 1.25;
	text-transform: uppercase;
	color: currentColor;
}

/**
 * Heading: Tertiary
 */
h3,
.heading--level-3,
.is-style-heading--level-3 {
	font-size: var( --font-heading-size--level-3 );
	font-weight: var( --font-weight-bold );
	line-height: 1.0625;
	color: currentColor;
}

h4,
.heading--level-4,
.is-style-heading--level-4 {
	font-size: var( --font-heading-size--level-4 );
	font-weight: var( --font-weight-bold );
	color: currentColor;
}

h5,
.heading--level-5,
.is-style-heading--level-5 {
	font-size: 0.875rem;
	font-weight: var( --font-weight-bold );
	color: currentColor;
}

/* Add spacing when headings are next to p.
   ========================================================================== */
p + h1,
p + h2,
p + h3,
p + h4,
p + h5,
p + h6,
p + .heading,
.heading + .heading {
	margin-top: var( --space-4 );
}

.heading + p {
	margin-top: var( --space-4 );
}

/* Add spacing when headings are following an sibling element.
   ========================================================================== */
* + .heading {
	margin-top: var( --space-5 );
}

.is-style-heading--level-2 + .is-style-heading--level-1,
.is-style-heading--level-3 + .is-style-heading--level-1,
.is-style-heading--level-4 + .is-style-heading--level-1,
.is-style-heading--level-5 + .is-style-heading--level-1 {
	margin-top: var( --space-1 );
}

.is-style-heading--level-1 + p,
.is-style-heading--level-2 + p,
.is-style-heading--level-3 + p,
.is-style-heading--level-4 + p,
.is-style-heading--level-5 + p {
	margin-top: var( --space-4 );
}

.is-style-heading--level-1 + .wp-block-columns,
.is-style-heading--level-2 + .wp-block-columns,
.is-style-heading--level-3 + .wp-block-columns,
.is-style-heading--level-4 + .wp-block-columns,
.is-style-heading--level-5 + .wp-block-columns {
	margin-top: var( --space-4 );
}

/* Remove margin when item is on it's own
   ========================================================================== */
.wp-block-group__inner-container .is-style-heading--level-1:only-child,
.wp-block-group__inner-container .is-style-heading--level-2:only-child,
.wp-block-group__inner-container .is-style-heading--level-3:only-child,
.wp-block-group__inner-container .is-style-heading--level-4:only-child,
.wp-block-group__inner-container .is-style-heading--level-5:only-child {
  margin-bottom: 0;
}

/* Container
   ========================================================================== */

/* Header
   ========================================================================== */
.site-header {
	margin-bottom: 0;
	margin: 0 !important; /* Override for Storefront. */
	padding-top: 0;
	padding-bottom: 0;
	border-bottom-width: 0;
	background-color: #03131B;
	box-shadow: 0 0 30px hsla(312, 5%, 82%, 0.3);
}

@media (min-width: 768px) {

	.site-header {
		position: sticky;
		z-index: 30;
		top: 0;
	}

	/* body.admin-bar .site-header {
		top: 32px;
	} */

}

.site-branding {
	margin-top: 1.5rem;
	margin-bottom: 1.5rem;
}

.site-header .custom-logo-link img,
.site-branding img {
	width: 37px;
}

button.menu-toggle,
button.menu-toggle:hover {
	margin-top: 10px;
	border-color: transparent
}

button.menu-toggle::after,
button.menu-toggle::before,
button.menu-toggle span::before {
	color: var( --color-active );
}

.main-navigation {
	font-size: 18px;
	font-weight: var( --font-weight-bold );
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.main-navigation ul li a,
.site-title a,
ul.menu li a,
.site-branding h1 a,
button.menu-toggle,
button.menu-toggle:hover,
.handheld-navigation .dropdown-toggle {
	color: var( --color-neutral-10 );
}

.main-navigation ul li a:hover,
.main-navigation ul li:hover > a,
.site-title a:hover,
.site-header ul.menu li.current-menu-item > a {
	color: var( --color-white );
}

.main-navigation ul li a:hover,
.main-navigation ul li:hover > a,
.site-title a:hover,
.main-navigation ul li a:focus,
.main-navigation ul li:focus > a,
.site-title a:focus {
	/* @TODO: Set: Header interactive colours. */
}

@media (min-width: 768px) {

	.storefront-primary-navigation .col-full {
		display: flex;
		flex-direction: row;
	}

	.woocommerce-active .site-header .site-header-cart {
		flex: 0 0 auto;
	}

	.site-header .site-branding img {
		width: 37px;
	}

	.storefront-primary-navigation .primary-navigation {
		text-align: right;
	}

	.woocommerce-active .site-header .site-branding {
		width: auto;
	}

}

.main-navigation ul.menu ul.sub-menu,
.main-navigation ul.nav-menu ul.children {
	background-color: #fff;
	border-top: 1px solid #eee;
}

.main-navigation ul.menu ul li a,
.main-navigation ul.nav-menu ul li a {
	border: 1px solid #eee;
	border-top: 0;
}

@media (min-width: 768px) {

	.site-header-cart {
		position: initial;
	}

}

/* Header: Cart
   ========================================================================== */
.woocommerce-active .site-header .site-header-cart {
	width: auto;
	float: none;
}

.woocommerce-active .site-header .site-header-cart:hover .widget_shopping_cart,
.woocommerce-active .site-header .site-header-cart:focus .widget_shopping_cart {
	left: calc(-300px + 90px);
}

.woocommerce-active .site-header .site-header-cart li {
	position: relative;
}

.woocommerce-active .site-header .site-header-cart .cart-contents::after,
.woocommerce-active .site-header .site-header-cart .cart-contents .count,
.woocommerce-active .site-header .site-header-cart .cart-contents .amount {
	/* @TODO: Set colour for cart contents. */
}

.woocommerce-active .site-header .site-header-cart .count {
	display: none;
	visibility: hidden;
}

.woocommerce-active .site-header .site-header-cart .cart-contents::after {
	float: none;
}

.woocommerce-active .site-header .site-header-cart div.widget_shopping_cart {
	width: 100%;
	box-shadow: 0px 5px 5px #ccc;
}

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

	.woocommerce-active .site-header .site-header-cart div.widget_shopping_cart {
		width: 300px;
	}

}

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

	.woocommerce-active .site-header .site-header-cart .woocommerce-mini-cart {
		height: auto;
	}

}

/* Footer
   ========================================================================== */
.site-footer {
	background-color: var( --color-neutral-10 );
	color: #636363;
}

.site-footer .widget .widget-title {
	margin-bottom: 24px;
	padding-bottom: 0;
	border-bottom-width: 0;
	line-height: 1.25;
	font-size: 18px;
	font-weight: var( --font-weight-bold );
	color: #03131B;
}

.site-footer .widget_nav_menu ul li {
	margin-bottom: 24px;
}

.site-footer a {
	text-decoration: none;
}

.site-footer a:hover,
.site-footer a:focus {
	text-decoration: underline;
}

.site-footer .menu {
	line-height: 1.25;
	font-size: 16px;
	font-weight: var( --font-weight-normal );
	text-transform: uppercase;
	color: #636363;
}

.site-footer .site-info {
	font-size: 12px;
	line-height: 1.25;
	color: #636363;
}

/* Navigation
   ========================================================================== */
.storefront-primary-navigation {

}

.cart-contents .woocommerce-Price-amount {
	display: none;
	visibility: hidden;
}

@media ( min-width: 768px ) {

	.main-navigation ul.menu > li > a,
	.main-navigation ul.nav-menu > li > a {
		padding: 1.5rem 1rem;
		line-height: 2rem
	}

}

/* Buttons
   ========================================================================== */
.hentry .entry-content .wp-block-button,
.wp-block-button {

}

.hentry .entry-content .wp-block-button .wp-block-button__link,
.wp-block-button .wp-block-button__link {
	padding: 12px 24px;
	border: 2px solid transparent;
	font-family: var( --font-family-body );
	font-weight: var( --font-weight-bold );
	font-size: 16px;
	letter-spacing: 0.1em;
	text-align: center;
	text-transform: uppercase;
	color: #24a8e0;
}

.hentry .entry-content .wp-block-button.is-style-btn--primary .wp-block-button__link,
.is-style-btn--primary .wp-block-button__link {
	border-radius: 50rem;
}

.hentry .entry-content .wp-block-button.is-style-btn--outline .wp-block-button__link,
.is-style-btn--outline .wp-block-button__link {
	background-color: transparent;
	border: 2px solid currentColor;
	border-radius: 50rem;
}

.hentry .entry-content .has-vekto-background-color .wp-block-button.is-style-btn--outline .wp-block-button__link,
.has-vekto-background-color .is-style-btn--outline .wp-block-button__link {
	color: var( --color-white );
}

button.menu-toggle {
	color: var( --color-text );
	background-color: var( --color-active );
}



/* Widgets
   ========================================================================== */
.widget_nav_menu ul li::before {
	content: '';
}

.widget_nav_menu ul li {
	padding-left: 0;
}

.widget-title {
	font-weight: var( --font-weight-bold );
}

/* Group
   ========================================================================== */
.wp-block-group.is-style-hero {
	overflow: hidden;
	margin-top: 40px;
	padding-top: 0;
	padding-bottom: 0;
	border-radius: 4pt;
}

.wp-block-group.is-style-hero .wp-block-media-text__media img {
	margin-right: auto;
	margin-left: auto;
	max-width: 75%;
}

/* Media & Text
   ========================================================================== */
@media ( max-width: 600px ) {
	.wp-block-media-text.has-media-on-the-right.is-stacked-on-mobile .wp-block-media-text__media {
		grid-row: 2;
	}

	.wp-block-group.is-style-hero .wp-block-media-text__media img {
		max-width: 100%;
	}

	.wp-block-group .wp-block-media-text .wp-block-media-text__content {
		padding: 24px 0;
	}

	.wp-block-media-text.has-media-on-the-right.is-stacked-on-mobile .wp-block-media-text__content {
		grid-row: 1;
	}
}

/* Single: Post
   ========================================================================== */
.single-post .site-content {
	margin-top: 80px;
}

.single-post .single__header + .single__feature {
	margin-top: 40px;
}

.single-post .single__content {
	margin-top: 40px;
}

.single__header {
  margin-top: 64px;
}

.single__header + .wp-block-group {
  margin-top: 40px;
}

@media ( min-width: 768px ) {
  .wp-block-post .wp-block-post-title {
    margin-bottom: 20px;
    font-size: 24px;
  }
}

.wp-block-post .wp-block-post-title {
  font-size: 34px;
}

.wp-block-post .wp-block-buttons {
  margin-top: 20px;
}
/* Single: Product
   ========================================================================== */
.single-product .site-content {
	margin-top: 80px;
}

.single-product div.product .woocommerce-product-gallery img {
	min-width: 100%;
}

.single-product .summary .single_add_to_cart_button {
	margin-right: 0.875em;
}

/* Single: Account
   ========================================================================== */
.woocommerce-account .site-content {
	margin-top: 80px;
}

/* Site Notice
   ========================================================================== */
.demo_store {
	position: relative;
	text-align: center;
	background-color: var( --color-vekto );
}

.demo_store::before {
  content: none;
}

.demo_store a {
	text-decoration: none;
}

/* WordPress
   ========================================================================== */
/* Fix Storefront `.alignfull` at smaller screen sizes. */
.alignfull {
	margin-right: calc(50% - 50vw);
	margin-left: calc(50% - 50vw);
	width: auto;
}

@media ( min-width: 66.4989em ) {

	.storefront-align-wide.page-template-template-fullwidth-php .hentry .entry-content .alignwide,
	.storefront-align-wide.storefront-full-width-content .hentry .entry-content .alignwide {
		margin-right: auto;
		margin-left: auto;
	}

	.storefront-align-wide.page-template-template-fullwidth-php .hentry .entry-content .alignwide,
	.storefront-align-wide.storefront-full-width-content .hentry .entry-content .alignwide {
		max-width: 100%;
	}

}

/* Vekto
   ========================================================================== */
.single-product.postid-10 .product_title {
	font-family:
		tachyon,
		-apple-system,
		blinkmacsystemfont,
		'Segoe UI',
		roboto,
		helvetica,
		arial,
		sans-serif;
		font-size: 3.3333rem;
}

.single-product.postid-10 .single_add_to_cart_button,
.single-product.postid-10 .storefront-sticky-add-to-cart__content-button,
.page-id-13 .wp-block-button.is-style-btn--primary .wp-block-button__link  {
	background-color: var( --color-vekto );
	color: var( --color-white );
}

/* Button Amazon
   ========================================================================== */
.button.amazon {
	padding: .6180469716em 1.41575em;
	font-size: var( --font-size--body-m );
	line-height: 1.3333;
	background-color: #FFA41C;
	border-color: #FF8F00;
	color: #232F3E;
}

@media ( max-width: 455px ) {
	.button.amazon {
		margin-top: 24px;
	}
}

.button.amazon:hover,
.button.amazon:focus {
	background-color: #FA8900;
	border-color: #ffffff;
}

/* Utilities
   ========================================================================== */

.has-heading-color {
	color: var( --color-dark );
}

.has-white-color {
	color: var( --color-white );
}

.has-heading-background-color {
	color: var( --color-dark );
}

.has-primary-background-color {
	background-color: var( --color-gold  );
}

.has-body-background-color {
	background-color: var( --color-text  );
}

.has-vekto-background-color {
	background-color: var( --color-vekto );
}