/**
 * Remade Worcester — main.css
 *
 * Structure:
 *  1. CSS Custom Properties (Design Tokens)
 *  2. Base / Reset
 *  3. Typography
 *  4. Layout & Utilities
 *  5. Navigation
 *  6. Hero
 *  7. Cards
 *  8. Buttons
 *  9. Opening Hours
 * 10. Gallery / Lightbox
 * 11. Workshop Archive & Single
 * 12. Blog
 * 13. Forms (Gravity Forms overrides)
 * 14. Footer
 * 15. Accessibility
 * 16. Responsive overrides
 */


/* ==========================================================================
   1. CSS Custom Properties
   ========================================================================== */

:root {
	/* Brand Colours */
	--color-green:         #22e622;
	--color-green-dark:    #0e5f0e;
	--color-green-light:   #defbde;
	--color-green-mid:     #18a318;

	/* Neutrals */
	--color-white:         #ffffff;
	--color-off-white:     #f9faf7;
	--color-grey-100:      #f4f4f4;
	--color-grey-200:      #e8e8e8;
	--color-grey-400:      #aaaaaa;
	--color-grey-600:      #666666;
	--color-grey-800:      #333333;
	--color-black:         #1a1a1a;

	/* Typography */
	--font-heading:        'Special Elite', serif;
	--font-body:           'Poppins', sans-serif;


	--fs-xs:    0.75rem;   /* 12px */
	--fs-sm:    0.875rem;  /* 14px */
	--fs-base:  1rem;      /* 16px */
	--fs-md:    1.125rem;  /* 18px */
	--fs-lg:    1.25rem;   /* 20px */
	--fs-xl:    1.5rem;    /* 24px */
	--fs-2xl:   1.875rem;  /* 30px */
	--fs-3xl:   2.25rem;   /* 36px */
	--fs-4xl:   3rem;      /* 48px */

	--fw-regular: 400;
	--fw-medium:  500;
	--fw-semi:    600;
	--fw-bold:    700;

	--lh-tight:   1.2;
	--lh-snug:    1.4;
	--lh-base:    1.6;
	--lh-relaxed: 1.8;

	/* Spacing */
	--space-1:  0.25rem;
	--space-2:  0.5rem;
	--space-3:  0.75rem;
	--space-4:  1rem;
	--space-5:  1.25rem;
	--space-6:  1.5rem;
	--space-8:  2rem;
	--space-10: 2.5rem;
	--space-12: 3rem;
	--space-16: 4rem;
	--space-20: 5rem;
	--space-24: 6rem;

	/* Layout */
	--container-max: 1200px;
	--border-radius:     6px;
	--border-radius-lg: 12px;
	--border-radius-xl: 20px;

	/* Shadows */
	--shadow-sm:  0 1px 3px rgba(0,0,0,0.08);
	--shadow-md:  0 4px 16px rgba(0,0,0,0.10);
	--shadow-lg:  0 8px 32px rgba(0,0,0,0.12);

	/* Transitions */
	--transition: 0.2s ease;
	--transition-slow: 0.4s ease;

	/* Header height (used for scroll offset) */
	--header-height: 72px;
}


/* ==========================================================================
   2. Base / Reset
   ========================================================================== */

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

html {
	scroll-behavior: smooth;
	scroll-padding-top: var(--header-height);
}

body {
	font-family: var(--font-body);
	font-size: var(--fs-base);
	font-weight: var(--fw-regular);
	line-height: var(--lh-base);
	color: var(--color-grey-800);
	background-color: var(--color-white);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

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

a {
	color: var(--color-green-mid);
	text-decoration: none;
	transition: color var(--transition);
}

a:hover {
	color: var(--color-green-dark);
	text-decoration: underline;
}

/* Skip to content link (accessibility) */
.skip-to-content {
	position: absolute;
	top: -100%;
	left: var(--space-4);
	z-index: 9999;
	padding: var(--space-2) var(--space-4);
	background: var(--color-green);
	color: var(--color-white);
	font-weight: var(--fw-bold);
	border-radius: 0 0 var(--border-radius) var(--border-radius);
	transition: top var(--transition);
}

.skip-to-content:focus {
	top: 0;
	color: var(--color-white);
	text-decoration: none;
}


/* ==========================================================================
   3. Typography
   ========================================================================== */

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
	font-family: var(--font-heading);
	font-weight: var(--fw-regular); /* Special Elite is display weight by default */
	line-height: var(--lh-tight);
	color: var(--color-grey-800);
}

h1, .h1 { font-size: var(--fs-4xl); }
h2, .h2 { font-size: var(--fs-3xl); }
h3, .h3 { font-size: var(--fs-2xl); }
h4, .h4 { font-size: var(--fs-xl); }
h5, .h5 { font-size: var(--fs-lg); }
h6, .h6 { font-size: var(--fs-md); }

.display-heading {
	font-family: var(--font-heading);
	font-size: clamp(var(--fs-3xl), 5vw, var(--fs-4xl));
	line-height: var(--lh-tight);
}

p {
	margin-bottom: var(--space-4);
}

p:last-child {
	margin-bottom: 0;
}

/* Section headings with green underline accent */
.section-heading {
	font-family: var(--font-heading);
	font-size: var(--fs-3xl);
	color: var(--color-grey-800);
	position: relative;
	margin-bottom: var(--space-8);
}

.section-heading::after {
	content: '';
	display: block;
	width: 60px;
	height: 4px;
	background-color: var(--color-green);
	margin-top: var(--space-3);
	filter: url(#noise);

}

.section-heading--center {
	text-align: center;
}

.section-heading--center::after {
	margin-left: auto;
	margin-right: auto;
}

/* Lead text */
.lead {
	font-size: var(--fs-md);
	line-height: var(--lh-relaxed);
	font-weight: var(--fw-regular);
	color: var(--color-grey-600);
}

/* Colour utilities */
.text-green  { color: var(--color-green-mid) !important; }
.text-dark   { color: var(--color-grey-800) !important; }
.text-muted  { color: var(--color-grey-600) !important; }


/* ==========================================================================
   4. Layout & Utilities
   ========================================================================== */

.section {
	padding: var(--space-16) 0;
}

.section--sm {
	padding: var(--space-10) 0;
}

.section--lg {
	padding: var(--space-24) 0;
}

.bg-off-white   { background-color: var(--color-off-white); }
.bg-green-light { background-color: var(--color-green-light); }
.bg-green       { background-color: var(--color-green); }
.bg-green-mid   { background-color: var(--color-green-mid); }
.bg-green-dark  { background-color: var(--color-green-dark); }
.bg-dark        { background-color: var(--color-grey-800); }
.bg-grey-light  { background-color: var(--color-grey-100); }

/* Divider */
.divider {
	border: none;
	border-top: 2px solid var(--color-grey-200);
	margin: var(--space-8) 0;
}

.divider--green {
	border-top-color: var(--color-green-light);
}


/* ==========================================================================
   5. Navigation
   ========================================================================== */

.site-header {
	position: sticky;
	top: 0;
	z-index: 1000;
	background-color: var(--color-white);
	border-bottom: 2px solid var(--color-green-light);
	padding: var(--space-2) 0;
}

.site-header .navbar {
	height: 100%;
	padding: 0;
}

/* Logo */
.navbar-brand {
	padding: var(--space-2) 0;
}

.navbar-brand img {
	width: 100%;
	max-width: 140px;
	height: auto;
}

/* Nav links */
.navbar-nav .nav-link {
	font-family: var(--font-heading);
	font-weight: var(--fw-regular); /* Special Elite is display weight by default */
	line-height: var(--lh-tight);
	font-size: var(--fs-xl) !important;
	color: var(--color-grey-800);
	padding: var(--space-2) var(--space-3) !important;
	letter-spacing: 0.02em;
	transition: color var(--transition);
	position: relative;
}

.navbar-nav .nav-link::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: var(--space-3);
	right: var(--space-3);
	height: 2px;
	background-color: var(--color-green);
	transform: scaleX(0);
	transition: transform var(--transition);
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
	color: var(--color-green);
	text-decoration: none;
}

.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link.active::after {
	transform: scaleX(1);
}

/* Dropdown */
.navbar-nav .dropdown-menu {
	border: 1px solid var(--color-grey-200);
	border-radius: var(--border-radius);
	box-shadow: var(--shadow-md);
	padding: var(--space-2) 0;
	margin-top: var(--space-1);
}

.navbar-nav .dropdown-item {
	font-family: var(--font-body);
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	color: var(--color-grey-800);
	padding: var(--space-2) var(--space-4);
	transition: background-color var(--transition), color var(--transition);
}

.navbar-nav .dropdown-item:hover,
.navbar-nav .dropdown-item.active {
	background-color: var(--color-green-light);
	color: var(--color-green-dark);
}

/* Newsletter button in header */
.btn-newsletter {
	font-size: var(--fs-sm);
	padding: var(--space-2) var(--space-4);
	white-space: nowrap;
}

/* Mobile toggler */
.navbar-toggler {
	border: 2px solid var(--color-green);
	padding: var(--space-2);
	border-radius: var(--border-radius);
}

.navbar-toggler:focus {
	box-shadow: 0 0 0 3px rgba(45,122,45,0.25);
}

.navbar-toggler-icon {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%232d7a2d' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

@media (min-width: 991.98px) {

	.navbar-nav .nav-link {
		font-size: var(--fs-xs) !important;
	}
}

@media (min-width: 1200px) {

	.navbar-nav .nav-link {
		font-size: var(--fs-base) !important;
	}
}

/* ==========================================================================
   6. Hero
   ========================================================================== */

.hero {
	position: relative;
	min-height: 520px;
	display: flex;
	align-items: center;
	overflow: hidden;
	background-color: var(--color-grey-800);
}

.hero__image {
	position: absolute;
	inset: 0;
	object-fit: cover;
	width: 100%;
	height: 100%;
	opacity: 0.3;
}

.hero__content {
	position: relative;
	z-index: 1;
	color: var(--color-white);
	padding: var(--space-20) 0;
}

.hero__headline {
	font-family: var(--font-heading);
	font-size: clamp(var(--fs-2xl), 5vw, var(--fs-4xl));
	line-height: var(--lh-tight);
	color: var(--color-white);
	margin-bottom: var(--space-4);
	text-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

.hero__subheadline {
	font-size: var(--fs-lg);
	line-height: var(--lh-snug);
	color: rgba(255,255,255,0.9);
	margin-bottom: var(--space-8);
	max-width: 520px;
	text-shadow: 0 1px 4px rgba(0,0,0,0.3);
}


/* ==========================================================================
   7. Cards
   ========================================================================== */

.card-remade {
	overflow: hidden;
	height: 100%;
	display: flex;
	flex-direction: column;
	padding: 1.5rem;
	position: relative;
	background-color: var(--color-white);
}

.card-remade:after {
	border: 2px solid var(--color-grey-400);
	content: "";
	inset: 0;
	position: absolute;
	filter: url(#noise);
}

.card-remade:hover {
	box-shadow: var(--shadow-md);
	transform: translateY(-2px);
}

.card-remade__image {
	aspect-ratio: 16 / 9;
	object-fit: cover;
	width: 100%;
}

.card-remade__body {
	padding: var(--space-5);
	flex: 1;
	display: flex;
	flex-direction: column;
}

.card-remade__title {
	font-family: var(--font-heading);
	font-size: var(--fs-xl);
	line-height: var(--lh-snug);
	margin-bottom: var(--space-3);
}

.card-remade__title a {
	color: var(--color-grey-800);
	text-decoration: none;
}

.card-remade__title a:hover {
	color: var(--color-green);
}

.card-remade__meta {
	font-size: var(--fs-sm);
	color: var(--color-grey-600);
	margin-bottom: var(--space-3);
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	align-items: center;
}

.card-remade__excerpt {
	font-size: var(--fs-sm);
	color: var(--color-grey-600);
	line-height: var(--lh-base);
	flex: 1;
	margin-bottom: var(--space-4);
}

.card-remade__footer {
	margin-top: auto;
}

/* Badge / event type pill */
.badge-event {
	display: inline-block;
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	padding: var(--space-1) var(--space-3);
	border-radius: 100px;
	background-color: var(--color-green-light);
	color: var(--color-green-dark);
}

.badge-event--bookable {
	background-color: var(--color-green-mid);
	color: var(--color-white);
}

.badge-event--recurring {
	background-color: var(--color-green-light);
	color: var(--color-green-dark);
}


/* ==========================================================================
   8. Buttons
   ========================================================================== */

.btn-green {
	background-color: var(--color-green-mid);
	color: var(--color-white);
	border: 2px solid var(--color-green-mid);
	font-family: var(--font-body);
	font-weight: var(--fw-semi);
	font-size: var(--fs-sm);
	letter-spacing: 0.03em;
	padding: var(--space-3) var(--space-6);
	border-radius: var(--border-radius);
	transition: background-color var(--transition), border-color var(--transition), transform var(--transition);
	display: inline-block;
	text-decoration: none;
	cursor: pointer;
}

.btn-green:hover {
	background-color: var(--color-green-dark);
	border-color: var(--color-green-dark);
	color: var(--color-white);
	text-decoration: none;
	transform: translateY(-1px);
}

.btn-green:focus-visible {
	outline: 3px solid var(--color-green-mid);
	outline-offset: 2px;
}

.btn-outline-green {
	background-color: #fff;
	color: var(--color-green-mid);
	border: 2px solid var(--color-green-mid);
	font-family: var(--font-body);
	font-weight: var(--fw-semi);
	font-size: var(--fs-sm);
	letter-spacing: 0.03em;
	padding: var(--space-3) var(--space-6);
	border-radius: var(--border-radius);
	transition: background-color var(--transition), color var(--transition);
	display: inline-block;
	text-decoration: none;
	cursor: pointer;
}

.btn-outline-green:hover {
	background-color: var(--color-green);
	color: var(--color-white);
	text-decoration: none;
}

.btn-outline-green:focus-visible {
	outline: 3px solid var(--color-green-mid);
	outline-offset: 2px;
}

.btn-white {
	background-color: var(--color-white);
	color: var(--color-green-mid);
	border: 2px solid var(--color-white);
	font-family: var(--font-body);
	font-weight: var(--fw-bold);
	font-size: var(--fs-sm);
	padding: var(--space-3) var(--space-6);
	border-radius: var(--border-radius);
	transition: background-color var(--transition), color var(--transition);
	display: inline-block;
	text-decoration: none;
	cursor: pointer;
}

.btn-white:hover {
	background-color: var(--color-green-light);
	color: var(--color-green-dark);
	text-decoration: none;
}

/* Used on green backgrounds — white outlined version of btn-outline-green */
.btn-outline-white {
	background-color: transparent;
	color: var(--color-white) !important;
	border-color: rgba(255,255,255,0.7) !important;
}

.btn-outline-white:hover {
	background-color: var(--color-white) !important;
	color: var(--color-green) !important;
}

/* CTA Strip heading sizes */
.cta-strip__heading {
	font-family: var(--font-heading);
	font-size: var(--fs-2xl);
}

.cta-strip__subheading {
	font-size: var(--fs-md);
	line-height: var(--lh-snug);
}


/* ==========================================================================
   9. Opening Hours
   ========================================================================== */

.opening-hours {
	font-size: var(--fs-sm);
}

.opening-hours__table {
	width: 100%;
	border-collapse: collapse;
}

.opening-hours__table tr {
	border-bottom: 1px solid var(--color-grey-600);
}

.opening-hours__table tr:last-child {
	border-bottom: none;
}

.opening-hours__table td {
	padding: var(--space-2) 0;
}

.opening-hours__day {
	font-weight: var(--fw-semi);
	color: var(--color-white);
	width: 120px;
}

.opening-hours__time {
	color: rgba(255,255,255,0.75);
}

.opening-hours__closed {
	color: var(--color-grey-400);
	font-weight: var(--fw-bold);
}

.opening-hours-light .opening-hours__table tr {
	border-bottom: 1px solid var(--color-green);
}

.opening-hours-light .opening-hours__day {
	color: var(--color-grey-800);
}

.opening-hours-light .opening-hours__time,
.opening-hours-light .opening-hours__closed {
	color: var(--color-grey-600);
}


	/* ==========================================================================
       10. Gallery / Lightbox
       ========================================================================== */

.gallery-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: var(--space-4);
}

.gallery-item {
	position: relative;
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: var(--border-radius);
	cursor: pointer;
}

.gallery-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--transition-slow);
}

.gallery-item:hover img {
	transform: scale(1.05);
}

.gallery-item__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,0);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background var(--transition);
}

.gallery-item:hover .gallery-item__overlay {
	background: rgba(0,0,0,0.25);
}

.gallery-item__icon {
	color: var(--color-white);
	font-size: var(--fs-2xl);
	opacity: 0;
	transition: opacity var(--transition);
}

.gallery-item:hover .gallery-item__icon {
	opacity: 1;
}

/* Lightbox overlay */
.lightbox-overlay {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 9999;
	background: rgba(0,0,0,0.92);
	align-items: center;
	justify-content: center;
	padding: var(--space-4);
}

.lightbox-overlay.is-open {
	display: flex;
}

.lightbox-inner {
	position: relative;
	max-width: 90vw;
	max-height: 90vh;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.lightbox-image {
	max-width: 100%;
	max-height: 80vh;
	object-fit: contain;
	border-radius: var(--border-radius);
}

.lightbox-caption {
	color: rgba(255,255,255,0.8);
	font-size: var(--fs-sm);
	margin-top: var(--space-3);
	text-align: center;
}

.lightbox-close {
	position: absolute;
	top: calc(-1 * var(--space-10));
	right: 0;
	background: none;
	border: none;
	color: var(--color-white);
	font-size: var(--fs-2xl);
	cursor: pointer;
	line-height: 1;
	padding: var(--space-2);
	transition: color var(--transition);
}

.lightbox-close:hover {
	color: var(--color-grey-400);
}

.lightbox-prev,
.lightbox-next {
	position: fixed;
	top: 50%;
	transform: translateY(-50%);
	background: rgba(255,255,255,0.15);
	border: none;
	color: var(--color-white);
	font-size: var(--fs-xl);
	padding: var(--space-3) var(--space-4);
	cursor: pointer;
	border-radius: var(--border-radius);
	transition: background var(--transition);
}

.lightbox-prev { left: var(--space-4); }
.lightbox-next { right: var(--space-4); }

.lightbox-prev:hover,
.lightbox-next:hover {
	background: rgba(255,255,255,0.3);
}


/* ==========================================================================
   11. Workshop Archive & Single
   ========================================================================== */

/* Filter buttons */
.workshop-filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-bottom: var(--space-8);
}

.workshop-filter-btn {
	background: var(--color-grey-100);
	border: 2px solid var(--color-grey-200);
	color: var(--color-grey-600);
	font-family: var(--font-body);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semi);
	padding: var(--space-2) var(--space-4);
	border-radius: 100px;
	cursor: pointer;
	transition: all var(--transition);
}

.workshop-filter-btn:hover,
.workshop-filter-btn.is-active {
	background: var(--color-green-mid);
	border-color: var(--color-green-mid);
	color: var(--color-white);
}

/* Single workshop */
.workshop-meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
	margin-bottom: var(--space-6);
	padding: var(--space-4);
	background: var(--color-green-light);
	border-radius: var(--border-radius);
	border-left: 4px solid var(--color-green);
}

.workshop-meta__item {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semi);
	color: var(--color-grey-800);
}

/* Dates list */
.workshop-dates {
	list-style: none;
	padding: 0;
	margin: 0 0 var(--space-6);
}

.workshop-dates li {
	padding: var(--space-3) var(--space-4);
	border-bottom: 1px solid var(--color-grey-200);
	font-size: var(--fs-sm);
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.workshop-dates li:first-child {
	border-top: 1px solid var(--color-grey-200);
}

.workshop-dates__spaces {
	font-size: var(--fs-xs);
	color: var(--color-grey-600);
}

/* Booking form section */
.booking-form-section {
	background: var(--color-off-white);
	border: 1px solid var(--color-grey-200);
	border-radius: var(--border-radius-lg);
	padding: var(--space-8);
	margin-top: var(--space-8);
}

.booking-form-section h3 {
	font-size: var(--fs-xl);
	margin-bottom: var(--space-6);
	color: var(--color-green);
}


/* Workshop sidebar box */
.workshop-sidebar-box {
	border-radius: var(--border-radius-lg);
}

/* Workshop notes block */
.workshop-notes {
	border-left: 4px solid var(--color-green);
}

/* Workshop featured image */
.workshop-featured-image img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

/* ==========================================================================
   12. Blog
   ========================================================================== */

.blog-categories {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-bottom: var(--space-8);
}

.blog-category-link {
	font-size: var(--fs-xs);
	font-weight: var(--fw-semi);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--color-grey-600);
	padding: var(--space-1) var(--space-3);
	border: 1px solid var(--color-grey-200);
	border-radius: 100px;
	transition: all var(--transition);
	text-decoration: none;
}

.blog-category-link:hover,
.blog-category-link.current-cat {
	background-color: var(--color-green);
	border-color: var(--color-green);
	color: var(--color-white);
	text-decoration: none;
}

/* Single post */
.post-content {
	font-size: var(--fs-md);
	line-height: var(--lh-relaxed);
	max-width: 720px;
}

.post-content h2,
.post-content h3,
.post-content h4 {
	margin-top: var(--space-8);
	margin-bottom: var(--space-4);
}

.post-content ul,
.post-content ol {
	margin-bottom: var(--space-4);
	padding-left: var(--space-6);
}

.post-content li {
	margin-bottom: var(--space-2);
}

.post-content blockquote {
	border-left: 4px solid var(--color-green);
	padding-left: var(--space-5);
	margin: var(--space-6) 0;
	font-style: italic;
	color: var(--color-grey-600);
}

.post-category-tag {
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-green);
}

.post-date {
	font-size: var(--fs-sm);
	color: var(--color-grey-400);
}


/* ==========================================================================
   13. Forms (Gravity Forms overrides)
   ========================================================================== */

.gform_wrapper {
	font-family: var(--font-body) !important;
}

.gform_wrapper .gfield_label {
	font-weight: var(--fw-semi) !important;
	font-size: var(--fs-sm) !important;
	color: var(--color-grey-800) !important;
	margin-bottom: var(--space-1) !important;
}

.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="number"],
.gform_wrapper textarea,
.gform_wrapper select {
	font-family: var(--font-body) !important;
	font-size: var(--fs-sm) !important;
	border: 2px solid var(--color-grey-200) !important;
	border-radius: var(--border-radius) !important;
	padding: var(--space-3) var(--space-4) !important;
	width: 100% !important;
	transition: border-color var(--transition) !important;
	color: var(--color-grey-800) !important;
	background-color: var(--color-white) !important;
}

.gform_wrapper input:focus,
.gform_wrapper textarea:focus,
.gform_wrapper select:focus {
	border-color: var(--color-green) !important;
	outline: none !important;
	box-shadow: 0 0 0 3px rgba(45,122,45,0.15) !important;
}

.gform_wrapper .gform_submit_button {
	background-color: var(--color-green) !important;
	color: var(--color-white) !important;
	border: 2px solid var(--color-green) !important;
	font-family: var(--font-body) !important;
	font-weight: var(--fw-semi) !important;
	font-size: var(--fs-sm) !important;
	padding: var(--space-3) var(--space-8) !important;
	border-radius: var(--border-radius) !important;
	cursor: pointer !important;
	transition: background-color var(--transition), border-color var(--transition) !important;
}

.gform_wrapper .gform_submit_button:hover {
	background-color: var(--color-green-dark) !important;
	border-color: var(--color-green-dark) !important;
}

.gform_wrapper .gfield_required {
	color: var(--color-green) !important;
}

.gform_wrapper .validation_message,
.gform_wrapper .gfield_error .gfield_label {
	color: #c0392b !important;
}

.gform_wrapper .gfield_error input,
.gform_wrapper .gfield_error textarea {
	border-color: #c0392b !important;
}

.gform_confirmation_wrapper {
	padding: var(--space-6);
	background: var(--color-green-light);
	border: 1px solid var(--color-green);
	border-radius: var(--border-radius);
	color: var(--color-green-dark);
	font-weight: var(--fw-semi);
}


/* ==========================================================================
   14. Footer
   ========================================================================== */

.site-footer {
	background-color: var(--color-grey-800);
	color: rgba(255,255,255,0.75);
	padding: var(--space-16) 0 var(--space-8);
}

.site-footer a {
	color: rgba(255,255,255,0.75);
	transition: color var(--transition);
}

.site-footer a:hover {
	color: var(--color-white);
	text-decoration: none;
}

.footer-heading {
	font-family: var(--font-heading);
	font-size: var(--fs-md);
	color: var(--color-white);
	margin-bottom: var(--space-4);
}

.footer-address {
	font-size: var(--fs-sm);
	line-height: var(--lh-relaxed);
}

.footer-social {
	display: flex;
	gap: var(--space-3);
	margin-top: var(--space-4);
}

.footer-social__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	background: rgba(255,255,255,0.1);
	border-radius: var(--border-radius);
	color: var(--color-white);
	font-size: var(--fs-md);
	transition: background var(--transition);
}

.footer-social__link:hover {
	background: var(--color-green);
	color: var(--color-white);
}

.footer-nav {
	list-style: none;
	padding: 0;
	margin: 0;
}

.footer-nav li + li {
	margin-top: var(--space-2);
}

.footer-nav a {
	font-size: var(--fs-sm);
}

.footer-bottom {
	border-top: 1px solid rgba(255,255,255,0.1);
	margin-top: var(--space-10);
	padding-top: var(--space-6);
	font-size: var(--fs-xs);
	color: rgba(255,255,255,0.5);
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
	justify-content: space-between;
	align-items: center;
}

.footer-charity-number {
	font-size: var(--fs-xs);
	color: rgba(255,255,255,0.5);
}


/* ==========================================================================
   15. Accessibility
   ========================================================================== */

/* Focus styles for keyboard navigation */
:focus-visible {
	outline: 3px solid var(--color-green);
	outline-offset: 2px;
	border-radius: 2px;
}

/* Hide visually but remain accessible to screen readers */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	white-space: nowrap;
	border-width: 0;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}


/* ==========================================================================
   15b. Search Form
   ========================================================================== */

.search-form {
	display: flex;
	gap: var(--space-2);
}

.search-form label {
	flex: 1;
}

.search-field {
	font-family: var(--font-body);
	font-size: var(--fs-sm);
	border: 2px solid var(--color-grey-200);
	border-radius: var(--border-radius);
	padding: var(--space-3) var(--space-4);
	width: 100%;
	transition: border-color var(--transition);
	color: var(--color-grey-800);
}

.search-field:focus {
	border-color: var(--color-green);
	outline: none;
	box-shadow: 0 0 0 3px rgba(45,122,45,0.15);
}

.search-submit {
	background-color: var(--color-green);
	color: var(--color-white);
	border: 2px solid var(--color-green);
	font-family: var(--font-body);
	font-weight: var(--fw-semi);
	font-size: var(--fs-sm);
	padding: var(--space-3) var(--space-5);
	border-radius: var(--border-radius);
	cursor: pointer;
	white-space: nowrap;
	transition: background-color var(--transition);
}

.search-submit:hover {
	background-color: var(--color-green-dark);
	border-color: var(--color-green-dark);
}

/* ==========================================================================
   15c. Pagination
   ========================================================================== */

.nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	align-items: center;
	justify-content: center;
}

.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 var(--space-3);
	font-family: var(--font-body);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semi);
	color: var(--color-grey-600);
	border: 2px solid var(--color-grey-200);
	border-radius: var(--border-radius);
	text-decoration: none;
	transition: all var(--transition);
}

.page-numbers:hover {
	border-color: var(--color-green);
	color: var(--color-green);
	text-decoration: none;
}

.page-numbers.current {
	background-color: var(--color-green);
	border-color: var(--color-green);
	color: var(--color-white);
}

.page-numbers.dots {
	border-color: transparent;
	color: var(--color-grey-400);
}

/* ==========================================================================
   15d. 404 Page
   ========================================================================== */

.error-404-number {
	font-family: var(--font-heading);
	font-size: clamp(6rem, 20vw, 12rem);
	line-height: 1;
	color: var(--color-green-light);
	margin-bottom: var(--space-4);
	user-select: none;
}

/* ==========================================================================
   15e. Blog category bar
   ========================================================================== */

.blog-category-bar {
	position: sticky;
	top: var(--header-height);
	z-index: 100;
}

/* ==========================================================================
   16. Page Title Bar & Breadcrumb
   ========================================================================== */

.page-title-bar {
	padding: var(--space-10) 0;
}

.page-title-bar .section-heading {
	margin-bottom: 0;
}

.page-title-bar .section-heading::after {
	margin-top: var(--space-2);
}

/* Bootstrap breadcrumb overrides */
.breadcrumb {
	background: none;
	padding: 0;
	font-size: var(--fs-xs);
}

.breadcrumb-item + .breadcrumb-item::before {
	color: var(--color-grey-400);
}

.breadcrumb-item a {
	color: var(--color-green-mid);
	font-weight: var(--fw-medium);
}

.breadcrumb-item.active {
	color: var(--color-grey-600);
}

/* Small button variant */
.btn-sm {
	padding: var(--space-2) var(--space-4) !important;
	font-size: var(--fs-xs) !important;
}

/* Hero small variant */
.hero--small {
	min-height: 300px;
}

.hero--small .hero__content {
	padding: var(--space-12) 0;
}

/* ==========================================================================
   17. Responsive Overrides
   ========================================================================== */

@media (max-width: 991.98px) {

	:root {
		--header-height: auto;
	}

	.site-header {
		position: relative;
		height: auto;
	}

	.navbar-collapse {
		border-top: 1px solid var(--color-grey-200);
		padding: var(--space-4) 0;
	}

	.navbar-nav .nav-link {
		padding: var(--space-3) var(--space-4) !important;
		font-size: var(--fs-base);
	}

	.navbar-nav .nav-link::after {
		display: none;
	}

	.navbar-nav .dropdown-menu {
		border: none;
		box-shadow: none;
		padding-left: var(--space-4);
		background: var(--color-grey-100);
	}

	.hero {
		min-height: 380px;
	}

	.hero__headline {
		font-size: var(--fs-2xl);
	}

	.gallery-grid {
		grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	}

}

@media (max-width: 575.98px) {

	.section {
		padding: var(--space-10) 0;
	}

	.section--lg {
		padding: var(--space-16) 0;
	}

	.hero {
		min-height: 300px;
	}

	.hero__content {
		padding: var(--space-12) 0;
	}

	.workshop-meta {
		flex-direction: column;
		gap: var(--space-2);
	}

	.lightbox-prev,
	.lightbox-next {
		padding: var(--space-2) var(--space-3);
		font-size: var(--fs-base);
	}

}

/* ==========================================================================
   18. Helpers
   ========================================================================== */

.rough-border {
	display: inline-block;
	padding: 1.6rem 2.4rem;
	position: relative;
}

.rough-border:after {
	border: 2px solid black;
	content: "";
	inset: 0;
	position: absolute;
	filter: url(#noise);
}

#main-content,
.home #main-content .section-highlights {
	background-image: url("../images/bg-fabric.webp");
	background-size: contain;
	background-repeat: no-repeat;
}

.home #main-content {
	background-image: none;
}


#site-header .navbar {
}

.footer-logo {
	max-width: 140px;
}


.card-remade::before,
.card-remade::after {
	pointer-events: none;
}