/*
Theme Name: FF Starter Kit
Author: Freerange Future
Author URI: https://freerangefuture.com/
Description: Freerange Future agency starter — a flexible, accessible parent theme and starter kit for agencies and studios
Version: 1.1.0
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ff-starter-kit
Domain Path: /languages
*/


/* ==========================================================================
   1. DESIGN TOKENS — Primitives & Defaults
   Child themes override these to apply brand styling.
   ========================================================================== */

:root {
	/* ----- Primitive colours (override in child theme) ----- */
	--color-primary-full:   #0066cc;
	--color-primary-mid:    #3385d6;
	--color-primary-light:  #99c2eb;
	--color-secondary-full: #004b99;
	--color-secondary-mid:  #3373b3;
	--color-secondary-light:#99b9d9;
	--color-accent-full:    #2ecc71;
	--color-accent-mid:     #6edd9a;
	--color-accent-light:   #b7eece;
	--color-neutral-light-full: #ffffff;
	--color-neutral-light-mid:  #f0f0f0;
	--color-neutral-light-dark: #e0e0e0;
	--color-neutral-dark-full:  #111827;
	--color-neutral-dark-mid:   #4b5563;
	--color-neutral-dark-light: #9ca3af;

	/* ----- Typography (override in child theme) ----- */
	--font-heading: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--font-body:    system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	/* Font weight tokens */
	--fw-light:     300;
	--fw-medium:    500;
	--fw-bold:      600;

	/* Type scale */
	--fs-base:   16px;
	--fs-s:      1rem;      /* 16px */
	--fs-m:      1.125rem;  /* 18px */
	--fs-l:      1.25rem;   /* 20px */
	--fs-xl:     1.5rem;    /* 24px */
	--fs-2xl:    2rem;      /* 32px */
	--fs-3xl:    2.5rem;    /* 40px */
	--fs-4xl:    3rem;      /* 48px */

	/* Line heights */
	--lh-s:   1.375;  /* ~22px at 16 */
	--lh-m:   1.333;  /* ~24px at 18 */
	--lh-l:   1.4;    /* ~28px at 20 */
	--lh-xl:  1.333;  /* ~32px at 24 */
	--lh-2xl: 1.25;   /* ~40px at 32 */
	--lh-3xl: 1;      /* ~40px at 40 */
	--lh-4xl: 1;      /* ~48px at 48 */
	--lh-body: 1.45;

	/* ----- Spacing scale (override in child theme) ----- */
	--space-1:  0.25rem;  /* 4px  */
	--space-2:  0.5rem;   /* 8px  */
	--space-3:  1rem;     /* 16px */
	--space-4:  1.5rem;   /* 24px */
	--space-5:  2rem;     /* 32px */
	--space-6:  2.5rem;   /* 40px */
	--space-7:  3rem;     /* 48px */
	--space-8:  3.5rem;   /* 56px */
	--space-9:  4rem;     /* 64px */
	--space-10: 4.5rem;   /* 72px */
	--space-11: 5rem;     /* 80px */
	--space-12: 6.5rem;   /* 104px */

	/* ----- Radius ----- */
	--radius-none: 0;
	--radius-xs:   8px;
	--radius-sm:   10px;
	--radius-md:   20px;
	--radius-lg:   30px;
	--radius-full: 999px;

	/* ----- Shadows ----- */
	--shadow-sm: 0 1px 2px rgba(16,24,40,0.05);
	--shadow:    0 6px 18px rgba(15,23,42,0.08);

	/* ----- Surface semantic tokens (default = neutral light) -----
	   These are the tokens that ALL blocks consume.
	   Surface classes (.surface-*) override these via CSS specificity.
	   ----- */
	--surface-background:   var(--color-neutral-light-full);
	--surface-headline:     var(--color-neutral-dark-full);
	--surface-body:         var(--color-neutral-dark-full);
	--surface-button-bg:    var(--color-primary-full);
	--surface-button-label: var(--color-neutral-light-full);
	--surface-button-hover-bg: var(--color-secondary-full);
	--surface-link:         var(--color-primary-full);

	/* ----- Semantic font colour tokens ----- */
	--font-headline:        var(--color-neutral-dark-full);
	--font-body:            var(--color-neutral-dark-full);
	--font-highlight:       var(--color-primary-full);
	--font-contrast:        var(--color-accent-full);
	--font-invert-headline: var(--color-neutral-light-full);
	--font-invert-body:     var(--color-neutral-light-full);

	/* ----- Icon tokens ----- */
	--icon-primary:         var(--color-primary-full);
	--icon-secondary:       var(--color-secondary-full);

	/* ----- Button semantic tokens (global, outside surface context) ----- */
	--btn-primary-bg:       var(--color-primary-full);
	--btn-primary-hover:    var(--color-secondary-full);
	--btn-primary-pressed:  var(--color-neutral-dark-full);
	--btn-primary-label:    var(--color-neutral-light-full);
	--btn-secondary-bg:     var(--color-accent-full);
	--btn-secondary-hover:  var(--color-accent-mid);
	--btn-secondary-label:  var(--color-neutral-dark-full);
}


/* ==========================================================================
   2. DEFAULT SURFACE CLASS
   The parent theme provides a single default surface.
   Child themes define the full palette of surface classes.
   ========================================================================== */

.surface-neutral-light,
[class*="surface-"] {
	/* Fallback: any surface class gets at least these defaults */
	background-color: var(--surface-background);
	color: var(--surface-body);
}

/* The default neutral-light surface (explicit) */
.surface-neutral-light {
	--surface-background:   var(--color-neutral-light-full);
	--surface-headline:     var(--color-neutral-dark-full);
	--surface-body:         var(--color-neutral-dark-full);
	--surface-button-bg:    var(--color-primary-full);
	--surface-button-label: var(--color-neutral-light-full);
	--surface-button-hover-bg: var(--color-secondary-full);
	--surface-link:         var(--color-primary-full);
}


/* ==========================================================================
   3. BASE STYLES
   ========================================================================== */

html { font-size: var(--fs-base); box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

body {
	margin: 0;
	font-family: var(--font-body);
	color: var(--surface-body);
	background: var(--surface-background);
	line-height: var(--lh-body);
	-webkit-font-smoothing: antialiased;
}

/* Headings consume surface + heading font */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading);
	color: var(--surface-headline);
	margin-top: 0;
	margin-bottom: var(--space-2);
	font-weight: var(--fw-bold);
}

h1 { font-size: var(--fs-4xl); line-height: var(--lh-4xl); }
h2 { font-size: var(--fs-3xl); line-height: var(--lh-3xl); }
h3 { font-size: var(--fs-2xl); line-height: var(--lh-2xl); }
h4 { font-size: var(--fs-xl);  line-height: var(--lh-xl);  }
h5 { font-size: var(--fs-l);   line-height: var(--lh-l);   }
h6 { font-size: var(--fs-m);   line-height: var(--lh-m);   }

p {
	margin-top: 0;
	margin-bottom: var(--space-2);
	color: var(--surface-body);
}

/* Links */
a { color: var(--surface-link, var(--surface-button-bg)); text-decoration: underline; }
a:hover, a:focus { color: var(--surface-button-hover-bg); }

/* Container */
.container {
	width: 100%;
	max-width: 1100px;
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--space-5);
	padding-right: var(--space-5);
}

.container-fluid, div[class*="wp-container-core-columns-is-layout"] {
	padding-left: var(--space-8) !important;
	padding-right: var(--space-8) !important;
	margin-left: auto;
	margin-right: auto;
}


/* ==========================================================================
   4. BUTTONS — consume surface tokens
   ========================================================================== */

.button {
	display: inline-block;
	padding: var(--space-3) var(--space-5);
	border-radius: var(--radius-full);
	background: var(--surface-button-bg);
	color: var(--surface-button-label);
	text-decoration: none;
	border: none;
	cursor: pointer;
	font-family: var(--font-body);
	font-weight: var(--fw-bold);
	font-size: var(--fs-s);
	line-height: 1;
	transition: background-color 0.2s ease, color 0.2s ease;
}
.button:hover {
	background: var(--surface-button-hover-bg);
	color: var(--surface-button-label);
}
.button:focus {
	outline: 2px solid var(--surface-button-bg);
	outline-offset: 2px;
}

.text-link {
	font-weight: 700;
	position: relative;
	padding-right: 30px;
	display: inline-block;
	text-decoration: none;
	color: var(--surface-headline);
}
.text-link:after {
	content: '';
	width: 20px;
	height: 20px;
	display: block;
	background: url('assets/images/icon-arrow-circle.svg') no-repeat center;
	background-size: contain;
	transform: rotate(180deg);
	position: absolute;
	right: 0;
	top: 2px;
}
.text-link.download:after {
	background: url('assets/images/icon-download.svg') no-repeat center;
	background-size: contain;
	transform: unset;
	right: auto;
	left: 0;
}
.text-link.download, .text-link.external {
	padding-left: 30px;
	padding-right: 0;
}
.text-link.external:after {
	background: url('assets/images/icon-external-link.svg') no-repeat center;
	background-size: contain;
	transform: unset;
	right: auto;
	left: 0;
}


/* ==========================================================================
   5. VIDEO MODALS
   ========================================================================== */

.video-modal-trigger {
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	margin: 0 auto;
	transition: all 0.2s ease-in-out;
}
.video-modal-trigger:hover {
	transform: scale(1.1);
	cursor: pointer;
}
.video-modal.modal-dialog { max-width: 1100px; }
.modal-header { border: 0 !important; }
.modal-header .btn-close { opacity: 1 !important; }
.iframe-wrapper {
	position: relative;
	overflow: hidden;
	width: 100%;
	padding-top: 56.25%;
}
.iframe-wrapper iframe {
	position: absolute;
	top: 0; left: 0; bottom: 0; right: 0;
	width: 100%; height: 100%;
}
.play-button {
	width: calc(100% - 30px);
	border-radius: var(--radius-md);
	height: 100%;
	font-size: 0;
	z-index: 99;
	transition: all .2s ease-in-out;
}
.play-button:after {
	margin: 0 auto;
	width: 78px; height: 78px;
	content: '';
	display: block;
	background: url('assets/images/icon-play.svg') #fff;
	background-size: contain;
	transition: all .2s ease-in-out;
	border-radius: 50%;
}

.image-wrapper { position: relative; }


/* ==========================================================================
   6. FORMS — consume surface tokens
   ========================================================================== */

input, textarea, select {
	font: inherit;
	padding: 0.5em;
	border: 1px solid #e6e9ee;
	border-radius: var(--radius-sm);
	background: #fff;
	color: var(--surface-body);
}
input::placeholder, select::placeholder { font-style: italic; }

/* Choices.js dropdown — surface-aware */
.choices {
	width: 100%;
	font-family: inherit;
	font-size: 1em;
	color: var(--surface-body);
	position: relative !important;
}
.choices[data-type*=select-one] .choices__inner {
	background-color: #fff;
	border: 1px solid var(--surface-body);
	border-radius: 6px;
	padding: 6px 10px;
	min-height: 45px;
	box-shadow: none;
	z-index: 9;
	position: relative;
	transition: border-color 0.2s, box-shadow 0.2s;
}
.choices[data-type*=select-one]::after {
	z-index: 10;
	display: block;
	position: absolute;
	right: 20px;
	top: 21px;
	border: solid var(--surface-body);
	border-width: 0 2px 2px 0;
	display: inline-block;
	padding: 3px;
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	transition: all 0.2s ease-in-out;
}
.choices[data-type*=select-one].is-open::after {
	margin-top: 0 !important;
	border: solid var(--surface-body) !important;
	border-width: 0 2px 2px 0 !important;
	transform: rotate(-135deg);
	-webkit-transform: rotate(-135deg);
}
.choices__list--dropdown, .choices__list[aria-expanded] {
	border: 1px solid var(--surface-body) !important;
	margin-top: -4px !important;
	padding: 12px 0;
}
.choices__list--dropdown .choices__item, .choices__list[aria-expanded] .choices__item {
	font-size: 1em;
	padding: 10px 18px;
}
.choices__list--single { padding: 6px 0 !important; }

/* Focus state */
.choices.is-focused .choices__inner {
	border-color: var(--surface-button-bg);
	box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
}
.choices__placeholder { color: var(--surface-body); }

/* Dropdown list */
.choices__list--dropdown {
	background-color: var(--surface-background);
	border: 1px solid var(--surface-body);
	border-radius: 6px;
	margin-top: 4px;
	max-height: 200px;
	overflow-y: auto;
	box-shadow: 0 4px 12px rgba(0,0,0,0.1);
	z-index: 999;
}
.choices__item--choice {
	padding: 8px 12px;
	cursor: pointer;
	transition: background-color 0.15s;
}
.choices__item--choice:hover {
	background-color: var(--surface-button-hover-bg);
	color: var(--surface-button-label);
}
.choices__item--selectable {
	background-color: transparent;
	color: var(--surface-body);
	border-radius: 4px;
	margin-right: 4px;
	padding: 3px 6px;
}
.choices__button {
	color: var(--surface-body);
	background: transparent;
	font-size: 12px;
	margin-left: 4px;
}
.choices__list--dropdown::-webkit-scrollbar { width: 6px; }
.choices__list--dropdown::-webkit-scrollbar-thumb {
	background-color: rgba(0,0,0,0.2);
	border-radius: 3px;
}

/* GTranslate wrapper */
.gtranslate_wrapper {
	margin-right: var(--space-5);
	min-width: 170px;
}
.gtranslate_wrapper .choices { margin-bottom: 0 !important; }
.gtranslate_wrapper .choices[data-type*=select-one]::after { right: 15px; top: 15px; }
.gtranslate_wrapper .choices[data-type*=select-one] .choices__inner {
	background-color: transparent !important;
	font-size: 16px !important;
	font-weight: 400 !important;
	min-height: 40px !important;
}
.gtranslate_wrapper .choices .choices__list--single { padding: 0 !important; }
.gtranslate_wrapper .choices__item--selectable {
	background-color: transparent !important;
	padding: 0 25px 0 5px !important;
	margin-right: 0 !important;
}
.gtranslate_wrapper .choices__list--dropdown .choices__item,
.choices__list[aria-expanded] .choices__item {
	font-size: 16px !important;
	padding: 5px 12px !important;
}


/* ==========================================================================
   7. SR-ONLY
   ========================================================================== */

.sr-only {
	position: absolute !important;
	width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}


/* ==========================================================================
   8. SITE HEADER & NAV
   ========================================================================== */

.site-header #toolbar {
	padding-top: var(--space-3);
	padding-bottom: var(--space-3);
}
.site-branding {
	padding-top: var(--space-5);
	padding-bottom: var(--space-5);
}
.site-logo img {
	max-height: 64px;
	height: auto;
	width: 100px;
}
.wp-image { max-width: 100%; }

.menu, .menu ul, .ctas {
	list-style: none;
	margin: 0;
	padding: 0;
}
.menu li a {
	color: inherit;
	text-decoration: none;
}
.menu .sub-menu { display: none; }
.menu .has-icon {
	display: flex;
	align-items: center;
	gap: var(--space-3);
}

.icon-phone {
	background: url('assets/images/icon-phone.svg') no-repeat center center;
	background-size: contain;
	display: inline-block;
	width: 24px; height: 24px;
}
.icon-email {
	background: url('assets/images/icon-email.svg') no-repeat center center;
	background-size: contain;
	display: inline-block;
	width: 30px; height: 26px;
}


/* ==========================================================================
   9. SWIPER — consume surface tokens for pagination
   ========================================================================== */

.swiper-button-prev svg, .swiper-button-next svg { display: none !important; }
.swiper-button-prev, .swiper-button-next {
	background: url('assets/images/icon-arrow-circle.svg') no-repeat center !important;
	background-size: contain !important;
	width: 30px !important; height: 30px !important;
	position: relative !important;
	left: auto !important; right: auto !important;
	margin: 0 !important;
	top: 0 !important; bottom: 0 !important;
}
.swiper-button-next { transform: rotate(180deg); }

.swiper-pagination-bullet {
	background: transparent !important;
	border: 1.5px solid var(--surface-button-bg) !important;
	opacity: 1 !important;
}
.swiper-pagination-bullet.swiper-pagination-bullet-active {
	background: var(--surface-button-bg) !important;
}


/* ==========================================================================
   10. BLOCK MODULE COMMON STYLES
   ========================================================================== */

/* All blocks output .module — consume surface tokens */
.module {
	background-color: var(--surface-background);
	color: var(--surface-body);
}
.module h1, .module h2, .module h3, .module h4, .module h5, .module h6 {
	color: var(--surface-headline);
}
.module p, .module li {
	color: var(--surface-body);
}
.module a:not(.button) {
	color: var(--surface-link, var(--surface-headline));
}
.module .button {
	background: var(--surface-button-bg);
	color: var(--surface-button-label);
}
.module .button:hover {
	background: var(--surface-button-hover-bg);
}

.module .intro {
	margin-bottom: var(--space-5);
}

/* Block spacing utilities — applied via ACF fields */
.pad-top-small   { padding-top: var(--space-7); }
.pad-top-medium  { padding-top: var(--space-9); }
.pad-top-large   { padding-top: var(--space-12); }
.pad-top-none    { padding-top: 0; }

.pad-bottom-small   { padding-bottom: var(--space-7); }
.pad-bottom-medium  { padding-bottom: var(--space-9); }
.pad-bottom-large   { padding-bottom: var(--space-12); }
.pad-bottom-none    { padding-bottom: 0; }


/* ==========================================================================
   11. DOTPOINTS — brand-styled list markers
   ========================================================================== */

.dotpoints-brand ul, .dotpoints-brand ol {
	list-style-type: none;
	padding-left: 0;
	margin-bottom: var(--space-5);
}
.dotpoints-brand ul:not(.ctas) li, .dotpoints-brand ol li {
	position: relative;
	padding-left: 25px;
}
.dotpoints-brand ul:not(.ctas) li:before, .dotpoints-brand ol li:before {
	content: '';
	background: url('assets/images/icon-gear.png');
	display: block;
	width: 16px; height: 16px;
	position: absolute;
	left: 0; top: 4px;
	background-size: cover;
}

ul, ol { padding-left: 20px; }
ul li, ol li { margin-bottom: var(--space-2); }


/* ==========================================================================
   12. CTAs
   ========================================================================== */

.ctas {
	margin-top: var(--space-5);
	margin-bottom: var(--space-3);
}


/* ==========================================================================
   13. ACCORDION — consume surface tokens
   ========================================================================== */

.accordion-item-heading { font-weight: 700; }
.accordion-item-button::after {
	background-color: var(--surface-button-bg);
}
.accordion-item-button:hover::after {
	background-color: var(--surface-button-hover-bg);
}


/* ==========================================================================
   14. MISCELLANEOUS COMPONENTS
   ========================================================================== */

.font-large { font-size: 2em; }
.font-large * { font-size: 1em; }
.font-large .title { font-size: 2em; }

.large-text { font-size: 1.2em; line-height: 1.4em; }
.has-border { border: 1px solid var(--surface-button-bg); }

.nav-tabs .nav-item { width: 100%; margin-bottom: var(--space-3); }
.nav-tabs .nav-link { width: 100%; border-radius: 0; }

.social-links {
	list-style: none;
	padding-left: 0;
	display: flex;
	gap: 10px !important;
}
.social-links li a {
	font-size: 0 !important;
	width: 32px; height: 32px;
	border-radius: 0;
	background: 0 0;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}
.social-links li a:before { height: 32px; width: 32px; }
.social-links a[href*="facebook"]:before {
	content: '';
	background: url('assets/images/social-fb.svg') no-repeat center;
	background-size: contain;
	display: block;
}
.social-links a[href*="instagram"]:before {
	content: '';
	background: url('assets/images/social-ig.svg') no-repeat center;
	background-size: contain;
	display: block;
}
.social-links a[href*="youtube"]:before {
	content: '';
	background: url('assets/images/social-youtube.svg') no-repeat center;
	background-size: contain;
	display: block;
}
.social-links a[href*="linkedin"]:before {
	content: '';
	background: url('assets/images/social-linkedin.svg') no-repeat center;
	background-size: contain;
	display: block;
}

.column-count-2 { column-count: 2; }
.txt-center { text-align: center; }
.mw-50 { max-width: 50%; }

.wp-block-columns .wp-block-columns {
	padding-left: 0 !important;
	padding-right: 0 !important;
}
.post-featured-image .wp-image { width: 100%; }
.single .post-content *:not(.module, .wp-block-columns) {
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
}
.relative { position: relative; }

.modal-dialog { max-width: calc(100% - 200px); }


/* ==========================================================================
   15. BREADCRUMBS
   ========================================================================== */

.breadcrumbs ol { list-style: none; padding-left: 0; margin-bottom: 0; }
.breadcrumbs li { display: inline-block; margin: 5px 10px 5px 0; }
.breadcrumbs li a { font-weight: 700; text-decoration: none; }
.breadcrumb-separator { position: relative; margin-right: 10px; }
.breadcrumb-separator::before {
	content: '';
	display: block;
	width: 7px; height: 7px;
	border: solid var(--surface-body);
	border-width: 0 2px 2px 0;
	display: inline-block;
	padding: 2px;
	transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	position: relative;
	top: -2px;
}


/* ==========================================================================
   16. FOOTER
   ========================================================================== */

.site-footer .widget img { max-width: 100%; }


/* ==========================================================================
   17. GRAVITY FORMS
   ========================================================================== */

.gform_wrapper form.grid {
	justify-content: space-between;
	align-items: flex-end;
}
body:not(.gform-admin) .module form.grid .gform_fields {
	display: flex !important;
}


/* ==========================================================================
   18. ANIMATIONS
   ========================================================================== */

.fade-slide-up {
	position: relative;
	opacity: 0;
	transform: translateY(80px);
	transition: transform .7s ease 0s, opacity .7s ease 0s;
}
.fade-slide-up.animate {
	opacity: 1;
	transform: translateY(0);
	transition: transform 1.4s ease 0s, opacity 1.4s ease 0s;
}


/* ==========================================================================
   19. SEARCH
   ========================================================================== */

.post-item.search-item { margin-bottom: var(--space-5); }


/* ==========================================================================
   20. UTILITY CLASSES
   ========================================================================== */

/* Flex layout */
.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.block { display: block; }
.inline-block { display: inline-block; }
.hidden { display: none; }

.flex-fill-2 { flex: 0 0 50%; }
.flex-fill-3 { flex: 0 0 33.33%; }
.flex-fill-4 { flex: 0 0 25%; }
.flex-fill-5 { flex: 0 0 20%; }

.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }

.gap-1 { gap: var(--space-3); }
.gap-2 { gap: var(--space-5); }
.gap-3 { gap: var(--space-7); }
.gap-4 { gap: var(--space-9); }

.w-full { width: 100%; }
.w-auto { width: auto; }

/* Font weight */
.font-normal { font-weight: var(--fw-light); }
.font-semibold { font-weight: var(--fw-medium); }
.font-bold { font-weight: var(--fw-bold); }

/* Text alignment */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

/* Padding utilities */
.p-1 { padding: var(--space-3); }
.p-2 { padding: var(--space-5); }
.p-3 { padding: var(--space-7); }
.p-4 { padding: var(--space-9); }

.px-1 { padding-left: var(--space-3); padding-right: var(--space-3); }
.px-1h { padding-left: var(--space-4); padding-right: var(--space-4); }
.px-2 { padding-left: var(--space-5); padding-right: var(--space-5); }
.px-3 { padding-left: var(--space-7); padding-right: var(--space-7); }
.px-4 { padding-left: var(--space-9); padding-right: var(--space-9); }

.py-1 { padding-top: var(--space-3); padding-bottom: var(--space-3); }
.py-2 { padding-top: var(--space-5); padding-bottom: var(--space-5); }
.py-3 { padding-top: var(--space-7); padding-bottom: var(--space-7); }
.py-4 { padding-top: var(--space-9); padding-bottom: var(--space-9); }

.pleft-1 { padding-left: var(--space-3); }
.pleft-2 { padding-left: var(--space-5); }
.pleft-3 { padding-left: var(--space-7); }
.pleft-4 { padding-left: var(--space-9); }
.pright-1 { padding-right: var(--space-3); }
.pright-2 { padding-right: var(--space-5); }
.pright-3 { padding-right: var(--space-7); }
.pright-4 { padding-right: var(--space-9); }

.ptop-1 { padding-top: var(--space-3); }
.ptop-2 { padding-top: var(--space-5); }
.ptop-3 { padding-top: var(--space-7); }
.ptop-4 { padding-top: var(--space-9); }

.pbottom-1 { padding-bottom: var(--space-3); }
.pbottom-1h { padding-bottom: var(--space-4); }
.pbottom-2 { padding-bottom: var(--space-5); }
.pbottom-3 { padding-bottom: var(--space-7); }
.pbottom-4 { padding-bottom: var(--space-9); }

/* Margin utilities */
.m-1 { margin: var(--space-3); }
.m-2 { margin: var(--space-5); }
.m-3 { margin: var(--space-7); }
.m-4 { margin: var(--space-9); }

.mx-1 { margin-left: var(--space-3); margin-right: var(--space-3); }
.mx-2 { margin-left: var(--space-5); margin-right: var(--space-5); }
.mx-3 { margin-left: var(--space-7); margin-right: var(--space-7); }
.mx-4 { margin-left: var(--space-9); margin-right: var(--space-9); }

.my-1 { margin-top: var(--space-3); margin-bottom: var(--space-3); }
.my-2 { margin-top: var(--space-5); margin-bottom: var(--space-5); }
.my-3 { margin-top: var(--space-7); margin-bottom: var(--space-7); }
.my-4 { margin-top: var(--space-9); margin-bottom: var(--space-9); }

.mt-1 { margin-top: var(--space-3); }
.mt-2 { margin-top: var(--space-5); }
.mt-3 { margin-top: var(--space-7); }
.mt-4 { margin-top: var(--space-9); }

.mb-1 { margin-bottom: var(--space-3); }
.mb-1h { margin-bottom: var(--space-4); }
.mb-2 { margin-bottom: var(--space-5); }
.mb-3 { margin-bottom: var(--space-7); }
.mb-4 { margin-bottom: var(--space-9); }

/* Border radius utilities */
.rounded-sm, .module .rounded-sm { border-radius: var(--radius-sm) !important; }
.rounded, .module .rounded { border-radius: var(--radius-md) !important; }
.rounded-full, .module .rounded-full { border-radius: var(--radius-full) !important; }

.radius-xs  { border-radius: var(--radius-xs); }
.radius-sm  { border-radius: var(--radius-sm); }
.radius-md  { border-radius: var(--radius-md); }
.radius-lg  { border-radius: var(--radius-lg); }
.radius     { border-radius: var(--radius-sm); }

/* Shadow utilities */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow { box-shadow: var(--shadow); }


/* ==========================================================================
   21. MOBILE NAVIGATION
   ========================================================================== */

.mobile-menu-navbar, .mobile-menu { display: none; }

@media screen and (max-width: 1199px) {
	.modal-dialog { max-width: calc(100% - 120px); }
}

@media screen and (max-width: 991px) {
	.modal-dialog { max-width: calc(100% - 60px); }
	.module:not(.split) .intro { display: block !important; }
	.module:not(.split) .intro .ctas { margin-top: var(--space-3) !important; }

	.mobile-menu-navbar { display: block; }
	.mobile-menu-navbar button {
		min-width: 40px !important;
		min-height: 40px !important;
		border-radius: 0 !important;
		font-size: 0 !important;
		padding: 0 !important;
		position: relative;
		z-index: 3;
		background-color: transparent !important;
	}
	.navbar-header button .screen-reader {
		text-indent: -9999px;
		float: none;
		font-size: 0em;
		width: 0; height: 0;
	}
	.screen-reader.close {
		opacity: 0; visibility: hidden;
		position: absolute; left: 0; z-index: -1;
	}
	.menu-overlay .screen-reader { opacity: 0; visibility: hidden; }
	.menu-overlay .screen-reader.close { opacity: 1; visibility: visible; }
	body.menu-overlay { overflow: hidden; }

	.mobile-menu {
		display: block;
		box-sizing: border-box;
		position: fixed;
		top: 0; left: 0;
		width: 100%;
		opacity: 0; visibility: hidden;
		transition: opacity .2s, visibility 0s .2s;
		z-index: 1000;
		height: 100vh;
		margin: 0; padding: 0;
		background: var(--surface-background);
		overflow-x: auto;
		overflow-y: scroll;
		-webkit-overflow-scrolling: touch;
	}
	.icon-bar {
		background: var(--surface-body);
		display: block;
		width: 35px; height: 4px;
		border-radius: 4px;
		margin: 0;
		z-index: 2;
		filter: unset !important;
	}
	.menu-overlay .icon-bar { background: var(--surface-body); }
	.menu-overlay .navbar-header button .screen-reader { color: #fff; }

	.icon-bar.top {
		top: 7px; right: 0;
		transition: transform .2s, top .2s .2s;
		position: absolute;
	}
	.icon-bar.middle {
		top: 18px; right: 0;
		transition: transform .2s, top .2s .2s;
		position: absolute;
	}
	.icon-bar.bottom {
		bottom: 6px; right: 0;
		transition: transform .2s, bottom .2s .2s;
		position: absolute;
	}

	.mobile-menu #mega-menu, .mobile-menu #mega-menu .mega-menu-parents { display: block; }
	body.mega-menu-open .mobile-menu { opacity: 1; visibility: visible; }
	body.mobile-menu-open .icon-bar.top { transform: rotate(45deg); top: 18px; }
	body.mobile-menu-open .icon-bar.bottom { transform: rotate(-45deg); bottom: 18px; }
	body.mobile-menu-open .icon-bar.middle { opacity: 0; }
}

@media (max-width: 720px) {
	.container { padding-left: var(--space-5); padding-right: var(--space-5); }
}


/* ==========================================================================
   22. LOCATION PIN BLOCK
   ========================================================================== */

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

.location-pin-title {
	margin-bottom: var(--space-5);
}

.location-pin-map {
	width: 100%;
	height: 450px;
	border-radius: var(--radius-md);
	overflow: hidden;
}

/* Editor placeholder */
.location-pin-preview {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	height: 200px;
	border: 2px dashed currentColor;
	border-radius: var(--radius-md);
	opacity: 0.5;
	text-align: center;
}

.location-pin-preview-icon {
	font-size: 2rem;
	line-height: 1;
}

.location-pin-preview p {
	margin: 0;
	font-size: var(--fs-s);
}

@media (max-width: 767px) {
	.location-pin-map {
		height: 320px;
	}
}


/* ==========================================================================
   23. INFO LINKS BLOCK
   ========================================================================== */

/* Outer module is transparent — spacing only, no background */
.info-links {
	padding: var(--space-6) 0;
}

/* Inner card carries the surface class and all visual treatment */
.info-links-inner {
	padding: var(--space-6);
	border-radius: var(--radius-md);
	background-color: var(--surface-background);
	color: var(--surface-body);
	height: 100%;
}

.info-links-title {
	font-family: var(--font-heading);
	font-size: var(--fs-xl);
	font-weight: var(--fw-bold);
	line-height: var(--lh-xl);
	color: var(--surface-headline);
	margin-bottom: var(--space-5);
}

.info-links-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.info-links-item {
	display: flex;
	align-items: center;
	gap: var(--space-3);
}

.info-links-icon {
	flex: 0 0 20px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.info-links-icon img {
	width: 20px;
	height: 20px;
	object-fit: contain;
}

.info-links-label {
	font-family: var(--font-body);
	font-size: var(--fs-m);
	line-height: var(--lh-m);
	color: var(--surface-body);
	text-decoration: none;
}

a.info-links-label {
	color: var(--surface-link);
	text-decoration: underline;
	text-underline-offset: 3px;
}

a.info-links-label:hover {
	text-decoration: none;
}


/* ==========================================================================
   24. SPACER BLOCK
   Vertical spacing block. Height set via ACF radio field.
   Tokens: --space-7 = 48px, --space-9 = 64px, --space-12 = 104px
   ========================================================================== */


.spacer.small       { height: var(--space-7); }   /* 48px  */
.spacer.medium      { height: var(--space-9); }   /* 64px  */
.spacer.large       { height: var(--space-12); }  /* 104px */
.spacer.extra-large { height: calc(var(--space-12) * 1.5); } /* ~156px */

@media (max-width: 767px) {
	.spacer.small       { height: var(--space-5); }  /* 32px */
	.spacer.medium      { height: var(--space-7); }  /* 48px */
	.spacer.large       { height: var(--space-9); }  /* 64px */
	.spacer.extra-large { height: var(--space-12); } /* 104px */
}

/* Editor placeholder label */
.spacer .spacer-label {
	margin: 0;
	padding: var(--space-2) var(--space-3);
	font-size: var(--fs-xs);
	font-style: italic;
	color: var(--color-neutral-dark-mid, #666);
	text-align: center;
	pointer-events: none;
}


/* ==========================================================================
   25. SHARE THIS
   ========================================================================== */

.share-this ul {
	padding-left: 0 !important;
	display: flex;
	margin: 0;
	align-items: center;
}

.share-this p {
	margin-bottom: 0;
	margin-right: 15px;
	font-size: 18px;
	font-weight: 600;
}

.share-this li {
	float: left;
	margin: 0 5px;
	position: relative;
}

.share-this li:last-child {
	margin-right: 0;
}

.share-this li a {
	display: block;
	width: 32px;
	height: 32px;
}

.share-this li a.facebook {
	background-image: url('assets/images/icon-facebook.svg');
	background-size: contain;
	background-repeat: no-repeat;
	height: 28px;
	width: 28px;
	filter: brightness(0);
}

.share-this li a.x {
	background-image: url('assets/images/icon-x.svg');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	filter: brightness(0);
}

.share-this li a.email {
	background-image: url('assets/images/icon-email.svg');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	filter: brightness(0);
}

.share-this li a.linkedin {
	background-image: url('assets/images/icon-linkedin.svg');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	filter: brightness(0);
}

.share-this li .clipboard {
	background-image: url('assets/images/icon-clipboard.svg');
	background-size: 25px;
	background-repeat: no-repeat;
	background-position: center;
	font-size: 0;
	width: 29px;
	height: 26px;
	filter: brightness(0);
}

.share-this li a:hover,
.share-this li .clipboard:hover {
	cursor: pointer;
	filter: brightness(0) invert(1);
}

.clipboard-tooltip {
	display: none;
	color: #fff !important;
	border-radius: 5px;
	padding: 2px 7px;
	position: absolute;
	font-size: 0.7em;
	width: 200px;
	top: 0;
	line-height: 1.4em;
	margin-left: 40px;
	background: #000;
}