/*
Theme Name:   Gills (Blocksy Child)
Theme URI:    https://gillsinternational.com
Description:  Child theme for Gills Food Solutions, built on Blocksy.
Author:       Gills International
Template:     blocksy
Version:      0.2.0
Requires PHP: 7.4
Text Domain:  gills
*/

/* ---------- Base ---------- */
body {
	font-family: var(--g-font-body);
	color: var(--g-text);
	background: var(--g-white);
}

h1, h2, h3, h4,
.g-heading {
	font-family: var(--g-font-heading);
	font-weight: 800;
	text-transform: uppercase;
	color: var(--g-ink);
	letter-spacing: -0.01em;
}

h1 { font-size: var(--g-fs-h1); line-height: 1; }
h2 { font-size: var(--g-fs-h2); line-height: 1.11; }
h3 { font-size: var(--g-fs-h3); line-height: 1.33; }

/* ---------- Utilities used by patterns ---------- */
.g-container { max-width: var(--g-container); margin-inline: auto; padding-inline: var(--g-gutter); }
.g-eyebrow {
	font-family: var(--g-font-body);
	font-size: 12px; line-height: 16px; font-weight: 700;
	letter-spacing: 1.2px; text-transform: uppercase;
	color: var(--g-red); margin: 0 0 8px;
}
.g-section { padding-block: var(--g-section-y); }
.g-bg-grey { background: var(--g-grey); }
.g-bg-grey-light { background: var(--g-grey-light); }
.g-bg-offwhite { background: var(--g-offwhite); }
.g-bg-cream { background: var(--g-cream); }
.g-bg-espresso { background: var(--g-espresso); color: var(--g-white); }

/* ---------- Buttons ---------- */
.g-btn,
.wp-block-button.is-style-g-primary .wp-block-button__link {
	display: inline-flex; align-items: center; gap: 8px;
	font-family: var(--g-font-body); font-size: 14px; font-weight: 600; line-height: 20px;
	padding: 10px 24px; border-radius: var(--g-radius-pill);
	background: var(--g-red); color: var(--g-white); border: 1px solid var(--g-red);
	text-decoration: none; transition: background .2s, border-color .2s, color .2s;
}
.g-btn:hover,
.wp-block-button.is-style-g-primary .wp-block-button__link:hover { background: var(--g-red-dark); border-color: var(--g-red-dark); color: var(--g-white); }

.g-btn--outline,
.wp-block-button.is-style-g-outline .wp-block-button__link {
	background: transparent; color: var(--g-white); border: 1px solid var(--g-white);
	padding: 10px 24px; border-radius: var(--g-radius-pill); font-size: 14px; font-weight: 600;
}
.g-btn--outline:hover,
.wp-block-button.is-style-g-outline .wp-block-button__link:hover { background: var(--g-white); color: var(--g-ink); }

.g-btn--secondary,
.wp-block-button.is-style-g-secondary .wp-block-button__link {
	background: var(--g-grey-light); color: var(--g-ink); border: 1px solid var(--g-grey-light);
	padding: 10px 24px; border-radius: var(--g-radius-pill); font-size: 14px; font-weight: 600;
}

/* WooCommerce buttons pick up the brand */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .woocommerce a.button.alt, .woocommerce button.button.alt {
	background: var(--g-red); color: var(--g-white); border-radius: var(--g-radius-pill);
	font-family: var(--g-font-body); font-weight: 600;
}
.woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover { background: var(--g-red-dark); color: var(--g-white); }

@media (max-width: 767px) {
	:root {
		--g-fs-h1: 36px;
		--g-fs-h2: 28px;
		--g-fs-h3: 20px;
		--g-section-y: 56px;
	}
}