/*!
Theme Name: Stag Blocks
Theme URI: https://stagblocks.com/
Author: Codestag
Author URI: https://codestag.com/
Description: Stag Blocks is a content-focused beautiful theme for blogging and story-telling, we have tuned it to work flawlessly with the new Gutenberg editor and our very own Stag Blocks plugin. Creating content-rich websites is easy with Stag Blocks. Find more information about Stag Blocks at https://stagblocks.com.
Version: 1.0.11
License: GNU General Public License v3 or later
License URI: LICENSE
Text Domain: stag-blocks
Tags: one-column, custom-colors, editor-style, custom-logo, custom-menu, theme-options, translation-ready, blog, sticky-post, threaded-comments

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

CSS normalization based in part on normalize.css by
Nicolas Gallagher and Jonathan Neal http://necolas.github.io/normalize.css/
*/
/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Normalize
# Accessibility
# Layout
# Typography
# Elements
# Links
# Forms
# Header
	# Main navigation menu
# Content navigation
# Footer
# Infinite scroll
# Additional color selectors
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Normalize
--------------------------------------------------------------*/
/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
/* Document
	 ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
	line-height: 1.15;
	/* 1 */
	-webkit-text-size-adjust: 100%;
	/* 2 */
}

/* Sections
	 ========================================================================== */
/**
	 * Remove the margin in all browsers.
	 */
body {
	margin: 0;
}

link {
	display: none;
}

/**
	 * Correct the font size and margin on `h1` elements within `section` and
	 * `article` contexts in Chrome, Firefox, and Safari.
	 */
h1 {
	font-size: 2em;
	margin: 0.67em 0;
}




/* Grouping content
	 ========================================================================== */
/**
	 * 1. Add the correct box sizing in Firefox.
	 * 2. Show the overflow in Edge and IE.
	 */
hr {
	-webkit-box-sizing: content-box;
	        box-sizing: content-box;
	/* 1 */
	height: 0;
	/* 1 */
	overflow: visible;
	/* 2 */
}

/**
	 * 1. Correct the inheritance and scaling of font size in all browsers.
	 * 2. Correct the odd `em` font sizing in all browsers.
	 */
pre {
	font-family: monospace, monospace;
	/* 1 */
	font-size: 1em;
	/* 2 */
}

/* Text-level semantics
	 ========================================================================== */
/**
	 * Remove the gray background on active links in IE 10.
	 */
a {
	background-color: transparent;
}

/**
	 * 1. Remove the bottom border in Chrome 57-
	 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
	 */
abbr[title] {
	border-bottom: none;
	/* 1 */
	text-decoration: underline;
	/* 2 */
	-webkit-text-decoration: underline dotted;
	        text-decoration: underline dotted;
	/* 2 */
	/* phpcs:ignore */
}

/**
	 * Add the correct font weight in Chrome, Edge, and Safari.
	 */
b,
strong {
	font-weight: bolder;
}

/**
	 * 1. Correct the inheritance and scaling of font size in all browsers.
	 * 2. Correct the odd `em` font sizing in all browsers.
	 */
code,
kbd,
samp {
	font-family: monospace, monospace;
	/* 1 */
	font-size: 1em;
	/* 2 */
}

/**
	 * Add the correct font size in all browsers.
	 */
small {
	font-size: 80%;
}

/**
	 * Prevent `sub` and `sup` elements from affecting the line height in
	 * all browsers.
	 */
sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

/* Embedded content
	 ========================================================================== */
/**
	 * Remove the border on images inside links in IE 10.
	 */
img {
	border-style: none;
}

/* Forms
	 ========================================================================== */
/**
	 * 1. Change the font styles in all browsers.
	 * 2. Remove the margin in Firefox and Safari.
	 */
button,
input,
optgroup,
select,
textarea {
	font-family: inherit;
	/* 1 */
	font-size: 100%;
	/* 1 */
	line-height: 1.15;
	/* 1 */
	margin: 0;
	/* 2 */
	background: #F2F2F2;
}

/**
	 * Show the overflow in IE.
	 * 1. Show the overflow in Edge.
	 */
button,
input {
	/* 1 */
	overflow: visible;
}

/**
	 * Remove the inheritance of text transform in Edge, Firefox, and IE.
	 * 1. Remove the inheritance of text transform in Firefox.
	 */
button,
select {
	/* 1 */
	text-transform: none;
}

/**
	 * Correct the inability to style clickable types in iOS and Safari.
	 */
button,
[type='button'],
[type='reset'],
[type='submit'] {
	-webkit-appearance: button;
}

/**
	 * Remove the inner border and padding in Firefox.
	 */
button::-moz-focus-inner,
[type='button']::-moz-focus-inner,
[type='reset']::-moz-focus-inner,
[type='submit']::-moz-focus-inner {
	border-style: none;
	padding: 0;
}

/**
	 * Restore the focus styles unset by the previous rule.
	 */
button:-moz-focusring,
[type='button']:-moz-focusring,
[type='reset']:-moz-focusring,
[type='submit']:-moz-focusring {
	outline: 1px dotted ButtonText;
}

/**
	 * Correct the padding in Firefox.
	 */
fieldset {
	padding: 0.35em 0.75em 0.625em;
}

/**
	 * 1. Correct the text wrapping in Edge and IE.
	 * 2. Correct the color inheritance from `fieldset` elements in IE.
	 * 3. Remove the padding so developers are not caught out when they zero out
	 *    `fieldset` elements in all browsers.
	 */
legend {
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	/* 1 */
	color: inherit;
	/* 2 */
	display: table;
	/* 1 */
	max-width: 100%;
	/* 1 */
	padding: 0;
	/* 3 */
	white-space: normal;
	/* 1 */
}

/**
	 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
	 */
progress {
	vertical-align: baseline;
}

/**
	 * Remove the default vertical scrollbar in IE 10+.
	 */
textarea {
	overflow: auto;
}

/**
	 * 1. Add the correct box sizing in IE 10.
	 * 2. Remove the padding in IE 10.
	 */
[type='checkbox'],
[type='radio'] {
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	/* 1 */
	padding: 0;
	/* 2 */
}

/**
	 * Correct the cursor style of increment and decrement buttons in Chrome.
	 */
[type='number']::-webkit-inner-spin-button,
[type='number']::-webkit-outer-spin-button {
	height: auto;
}

/**
	 * 1. Correct the odd appearance in Chrome and Safari.
	 * 2. Correct the outline style in Safari.
	 */
[type='search'] {
	-webkit-appearance: textfield;
	/* 1 */
	outline-offset: -2px;
	/* 2 */
}

/**
	 * Remove the inner padding in Chrome and Safari on macOS.
	 */
[type='search']::-webkit-search-decoration {
	-webkit-appearance: none;
}

/**
	 * 1. Correct the inability to style clickable types in iOS and Safari.
	 * 2. Change font properties to `inherit` in Safari.
	 */
::-webkit-file-upload-button {
	-webkit-appearance: button;
	/* 1 */
	font: inherit;
	/* 2 */
}

/* Interactive
	 ========================================================================== */
/*
	 * Add the correct display in Edge, IE 10+, and Firefox.
	 */
details {
	display: block;
}

/*
	 * Add the correct display in all browsers.
	 */
summary {
	display: list-item;
}

/* Misc
	 ========================================================================== */
/**
	 * Add the correct display in IE 10+.
	 */
template {
	display: none;
}

/**
	 * Add the correct display in IE 10.
	 */
[hidden] {
	display: none;
}

/**
	 * Hide lazy load placeholders when browser does not have JS enabled.
	 * Should override everything, therefore !important.
	 */
.no-js .lazy {
	display: none !important;
}

/*--------------------------------------------------------------
	# Accessibility
	--------------------------------------------------------------*/
/* Text meant only for screen readers. */
.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute !important;
	height: 1px;
	width: 1px;
	overflow: hidden;
	word-wrap: normal !important;
	/* Many screen reader and browser combinations announce broken words as they would appear visually. */
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	-webkit-box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	        box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	color: #21759b;
	display: block;
	font-size: 14px;
	font-size: 0.875rem;
	font-weight: bold;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
	/* Above WP toolbar. */
}

/* Do not show the outline on the skip link target. */
#primary[tabindex='-1']:focus {
	outline: 0;
}

/*--------------------------------------------------------------
	# Layouts
	--------------------------------------------------------------*/
body {
	position: relative;
	width: 100%;
}

.site {
	display: block !important;
  grid-template-columns: none !important;
  transform: none !important;    /* in case you pushed it sideways */
  height: 100%;
	width: 100%;
	margin: 0 auto;
	-webkit-transform: translateX(0);
	        transform: translateX(0);
	-webkit-transition: 300ms ease all;
	transition: 300ms ease all;
}

body.menu-toggled {
	overflow: hidden;
}

body.menu-toggled .site {
	-webkit-transform: translateX(-280px);
	        transform: translateX(-280px);
}

.header-container {
	max-width: 1440px;
	margin: 0 auto;
	padding-left: 1.2rem;
	padding-right: 1.2rem;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
}

.site-branding {
	margin: 1em 0 0;
}

.primary-menu-container .search-toggle {
	display: none;
}

.primary-menu-container .header-search-form {
	display: none;
}

.header-search-form .search-submit {
	display: none;
}

@media screen and (min-width: 48em) {
	.primary-menu-container {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
	}
	.primary-menu-container .menu + .search-toggle {
		display: inline;
		padding-left: 1.5rem;
		cursor: pointer;
	}
	.header-search-form {
		position: absolute;
		top: -5rem;
		left: 0;
		background: white;
		width: 100%;
	}
	.search-toggle.toggled-on + .header-search-form {
		display: block;
		top: 0;
		border-bottom: 1px solid #E0E0E0;
		-webkit-box-shadow: 0px 1px 6px #e0e0e0;
		        box-shadow: 0px 1px 6px #e0e0e0;
		-webkit-animation-name: bounceInDown;
		        animation-name: bounceInDown;
		-webkit-animation-delay: 0ms;
		        animation-delay: 0ms;
		-webkit-animation-duration: 0.8s;
		        animation-duration: 0.8s;
		-webkit-animation-fill-mode: both;
		        animation-fill-mode: both;
	}
	.search-off .site-header .header-search-form {
		-webkit-transition: 0.1s ease-in-out all;
		transition: 0.1s ease-in-out all;
	}
	.header-search-form .search-form,
	.header-search-form .search-form label {
		display: block;
		width: 100%;
	}
	.header-search-form .search-form label {
		max-width: 1440px;
		margin: 0 auto;
	}
	.header-search-form .search-form .search-field {
		display: block;
		width: 100%;
		background: white;
		border: 0;
		font-size: 26px;
		padding: 1.5rem 1rem 1.5rem 1rem;
	}
	.search-toggled .site-header .site-branding,
	.search-toggled .site-header .menu,
	.search-toggle.toggled-on {
		opacity: 0;
		-webkit-transition: ease-out 1s all;
		transition: ease-out 1s all;
	}
}


/*--------------------------------------------------------------
	# Typography
	--------------------------------------------------------------*/
body,
button,
input,
select,
optgroup,
textarea {
	color: #333;
	font-family: 'Poppins', serif;
	font-size: 17px;
	font-size: calc(17 / 16)rem;
	line-height: 1.7;
}

body > * {
	word-wrap: break-word;
}
h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: 'Poppins', sans-serif;
	font-weight: 700;
	clear: both;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}

h1 {
	font-size: 32px;
	font-size: 2rem;
}

h2 {
	font-size: 28.8px;
	font-size: 1.8rem;
}

h3 {
	font-size: 25.6px;
	font-size: 1.6rem;
}

h4 {
	font-size: 20.8px;
	font-size: 1.3rem;
}

h5 {
	font-size: 17.6px;
	font-size: 1.1rem;
}

h6 {
	font-size: 14.4px;
	font-size: 0.9rem;
	text-transform: uppercase;
}

p {
	margin-top: 1em;
	margin-bottom: 1em;
}

.entry-header h1.entry-title,
.entry-header h2.entry-title {
	font-size: 32px;
	font-size: 2rem;
	line-height: 1.4;
	margin: 0.3em 0;
	font-weight: 600;
}

dfn,
cite,
em,
i {
	font-style: italic;
}

blockquote {
	margin: 0 1.5em;
}

address {
	margin: 0 0 1.5em;
}

pre {
	background: #eee;
	font-family: 'Courier 10 Pitch', Courier, monospace;
	font-size: 15px;
	font-size: 0.9375rem;
	line-height: 1.6;
	margin-bottom: 1.6em;
	max-width: 100%;
	overflow: auto;
	padding: 1.6em;
}

code,
kbd,
tt,
var {
	font-family: Monaco, Consolas, 'Andale Mono', 'DejaVu Sans Mono', monospace;
	font-size: 12.8px;
	font-size: 0.8em;
}

abbr,
acronym {
	border-bottom: 1px dotted #666;
	cursor: help;
}

mark,
ins {
	background: #fff9c0;
	text-decoration: none;
}

big {
	font-size: 125%;
}

/*--------------------------------------------------------------
	# Elements
	--------------------------------------------------------------*/
html {
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}

*,
*:before,
*:after {
	/* Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
	-webkit-box-sizing: inherit;
	        box-sizing: inherit;
}

body {
	background: #fff;
	/* Fallback for when there is no custom background color defined. */
	position: relative;
}

blockquote,
q {
	quotes: '' '';
}

hr {
	background-color: #e0e0e0;
	border: 0;
	height: 1px;
}

ul,
ol {
	margin: 0 0 1.5em 3em;
}

ul {
	list-style: disc;
}

ol {
	list-style: decimal;
}

li > ul,
li > ol {
	margin-bottom: 0;
	margin-left: 1.5em;
}

dt {
	font-weight: bold;
}

dd {
	margin: 0 1.5em 1.5em;
}

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

figure {
	/* Extra wide images within figure tags don't overflow the content area. */
	margin: 0.5em 0;
}

table {
	margin: 0 0 1.5em;
	width: 100%;
}

audio {
	width: 100%;
}

/* ORDERED AND UNORDERED LISTS */
ul {
  padding-left: .1rem !important; /* reduce from default ~2rem */
  margin-bottom: 1.5rem; /* optional: space after list */
}

ul li {
  margin-bottom: 0.75rem; /* adds space between list items */
  line-height: 1.6; /* improves readability */
}

/* Neutralize earlier global bullet override so we don't get double markers */
.entry-content ul li::marker { content: none !important; }

/* === Canonical, flush-left lists in post content === */
.entry-content ul.wp-block-list,
.entry-content ol.wp-block-list {
  list-style: none !important;   /* remove native markers */
}

/* NUDGES so lists align flush with headings */
.entry-content ul.wp-block-list { margin-left: 0.07em; }   /* bullets → right a hair */
.entry-content ol.wp-block-list { margin-left: -3.05em; }  /* numbers → left a hair */

/* Bullets: custom dot that never hangs outside */
.entry-content ul.wp-block-list li {
  position: relative;
  padding-left: 1.2em;           /* space between dot and text */
  margin: 0 0 .6rem 0;
}

.entry-content ul.wp-block-list li::before {
  content: "";
  position: absolute;
  left: 0;                          /* aligns with heading edge */
  top: .6em;                        /* vertical centering */
  width: .45em;
  height: .45em;
  border-radius: 50%;
  background: currentColor;
}

/* Numbers: fixed-width number column with breathing room */
.entry-content ol.wp-block-list { counter-reset: cslist; }
.entry-content ol.wp-block-list li {
  position: relative;
  counter-increment: cslist;
  padding-left: 3.5ch;              /* gap from number to text */
  margin: 0 0 .9rem 0;
}
.entry-content ol.wp-block-list li::before {
  content: counter(cslist) ".";
  position: absolute;
  left: 0;                          /* same left edge as bullets */
  width: 2.6ch;                     /* number column width */
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/*--------------------------------------------------------------
	# Links
	--------------------------------------------------------------*/
a {
	color: #3575FF;
	text-decoration: none;
}

a:hover,
a:focus,
a:active {
	color: #0252ff;
}

a:focus {
	outline: thin dotted;
}

a:hover,
a:active {
	outline: 0;
}

/*--------------------------------------------------------------
	# Forms
	--------------------------------------------------------------*/
button,
input[type='button'],
input[type='reset'],
input[type='submit'] {
	border: 1px solid transparent;
	border-radius: 2px;
	background: #3575FF;
	color: white;
	font-size: 17px;
	font-size: 1rem;
	line-height: 1.7;
	padding: 7.5px 10px;
	cursor: pointer;
}

button:hover,
input[type='button']:hover,
input[type='reset']:hover,
input[type='submit']:hover {
	border-color: transparent;
}

button:active,
button:focus,
input[type='button']:active,
input[type='button']:focus,
input[type='reset']:active,
input[type='reset']:focus,
input[type='submit']:active,
input[type='submit']:focus {
	border-color: transparent;
}

input[type='text'],
input[type='email'],
input[type='url'],
input[type='password'],
input[type='search'],
input[type='number'],
input[type='tel'],
input[type='range'],
input[type='date'],
input[type='month'],
input[type='week'],
input[type='time'],
input[type='datetime'],
input[type='datetime-local'],
input[type='color'],
textarea {
	color: #666;
	border: 1px solid #e0e0e0;
	border-radius: 2px;
	padding: 7.5px 10px;
	outline: none;
}

input[type='text']:focus,
input[type='email']:focus,
input[type='url']:focus,
input[type='password']:focus,
input[type='search']:focus,
input[type='number']:focus,
input[type='tel']:focus,
input[type='range']:focus,
input[type='date']:focus,
input[type='month']:focus,
input[type='week']:focus,
input[type='time']:focus,
input[type='datetime']:focus,
input[type='datetime-local']:focus,
input[type='color']:focus,
textarea:focus {
	color: #666;
}

select {
	color: #666;
	border-radius: 2px;
	padding: 7.5px 10px;
	border: 1px solid #e0e0e0;
}

textarea {
	width: 100%;
}

/*--------------------------------------------------------------
	# Header
	--------------------------------------------------------------*/
.site-header {
	padding-bottom: 2em;
}

.header-image {
	margin: 0 auto;
}

.header-image img {
	display: block;
	margin: 0 auto;
}

.custom-logo-link {
	display: inline-block;
	margin: 0 auto 1em;
}

.site-title {
	margin: 0;
	font-family: 'IBM Plex Mono', monospace;
	font-size: 38px;
	font-weight: bold;
	line-height: 1.2;
	color: #333332;
}

/* Desktop only: keep logo text on one line */
@media screen and (min-width: 48em) {
  .site-title {
    white-space: nowrap;
  }
}

.site-title a {
	text-decoration: none;
	color: inherit;
}

.site-description {
	margin: 0.4375em 0 0;
	font-family: 'Poppins', sans-serif;
	font-size: 17px;
	font-weight: inherit;
	line-height: 1.4;
	word-wrap: break-word;
	color: #757575;
}

.archive:not(.error404) .page-header,
.search:not(.search-no-results) .page-header {
	margin-bottom: 2rem;
	padding-bottom: 2rem;
	border-bottom: 1px solid #E0E0E0;
}

.author .page-header {
	text-align: center;
}

body:not(.search-no-results) .page-header .page-title {
	margin: 0 auto;
	max-width: 960px;
}

.page-header .archive-description {
	max-width: 960px;
	margin: 0.6rem auto;
	font-weight: 300;
	font-style: italic;
}

.page-header .archive-description p {
	margin: 0;
}

@media screen and (min-width: 48em) {
	body:not(.search-no-results) .page-header .page-title,
	.page-header .archive-description {
		padding-left: 1.2rem;
		padding-right: 1.2rem;
	}
}
/*--------------------------------------------------------------
	## Main navigation menu
	--------------------------------------------------------------*/
.main-navigation {
  max-width: 1140px;
  margin: 0 auto;
  padding-right: 1rem;   /* Change this from 9rem to 1rem (or 0) */
  padding-left: 1rem;
  padding-top: 1rem;
  position: relative;
}
.main-navigation .menu > li.current-menu-item > a {
	color: #3575FF;
	border: 2px solid #3575FF;
	border-radius: 2px;
}
.main-navigation .menu li a:hover,
.main-navigation .menu li a:focus {
	color: #3575FF;
}

.menu-toggle {
	display: block;
	margin: -0.2em 0 0 1em;
	padding: 0 0 0.5em;
	background: transparent;
	color: #333;
}

.menu-toggle .menu-toggle-icon {
	width: 40px;
}

.menu-close-btn {
	background: transparent;
	width: 45px;
}

.main-navigation a {
	display: block;
	width: 100%;
	padding: 0.5em 1em 0.5em 0;
	text-decoration: none;
	color: black;
}

.main-navigation ul {
	display: block;
	list-style: none;
	margin: 0;
	padding: 0;
	padding-right: 1.5rem; /* Increase as needed to prevent overlap */
}

.main-navigation li {
	position: relative;
}

.main-navigation ul ul li {
	padding-left: 1em;
}

.main-navigation .dropdown,
.main-navigation button.dropdown-toggle {
	display: none;
}

.main-navigation .menu {
	display: none;
}

.main-navigation .menu-close-btn {
	display: none;
}

@media screen and (max-width: 871px) {
	.main-navigation.toggled-on .menu-toggle {
		display: none;
	}
	.main-navigation.toggled-on .menu {
		display: block;
	}

	.main-navigation.toggled-on .header-search-form {
		display: block;
	}

	.main-navigation.toggled-on .menu-close-btn {
		display: block;
		position: absolute;
		right: 0.2em;
		top: 1em;
	}

	.main-navigation.toggled-on .primary-menu-container {
		height: 100vh;
		width: 280px;
		position: absolute;
		z-index: 1000;
		top: 0;
		right: -280px;
		background-color: #333;
		-webkit-transition: 0.5s;
		transition: 0.5s;
		overflow-x: hidden
	}
	.main-navigation.toggled-on .menu {
		padding: 3em 1em 1em;
	}
	.main-navigation.toggled-on .menu li a {
		padding: 0.4em 0.5em;
		color: white;
		display: inline-block;
		width: auto;
	}
	.main-navigation.toggled-on .menu ul li {
		padding-left: 0;
	}

	.main-navigation.toggled-on .menu > li.current-menu-item > a {
		border: 0;
	}

	.main-navigation.toggled-on .search-form {
		padding: 0 1.2em;
	}
	.main-navigation.toggled-on .search-field {
		width: 100%;
		background: #333;
		color: white;
		border: 2px solid white;
	}
	.main-navigation.toggled-on .header-search-form {
		padding-bottom: 2em;
	}
}

@media screen and (min-width: 960px) {
	.menu-toggle {
		display: none;
	}
	.main-navigation ul li {
		margin: 0 0 0 1.9em;
	}
	.main-navigation ul li:first-child {
		margin-left: 0;
	}
	.main-navigation ul ul {
		display: none;
		position: absolute;
		top: 100%;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
		background: white;
		margin-left: 0;
		-webkit-box-shadow: 0px 1px 6px rgba(51, 51, 51, 0.1);
		        box-shadow: 0px 1px 6px rgba(51, 51, 51, 0.1);
		z-index: 1;
	}
	.main-navigation ul ul a {
		width: 200px;
	}
	.main-navigation ul ul li {
		padding-left: 0;
		margin-left: 0;
	}
	.main-navigation ul ul li a {
		width: 218px;
		background: none;
		padding: 0.5em 0.8em;
	}
	.main-navigation ul ul ul {
		top: 0;
		left: 100%;
		min-height: 100%;
	}
	.main-navigation .menu {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-wrap: wrap;
		    flex-wrap: wrap;
		-webkit-box-pack: end;
		    -ms-flex-pack: end;
		        justify-content: flex-end;
		-webkit-box-flex: 1;
		    -ms-flex: 1;
		        flex: 1;
	}

  /* Desktop only: prevent navigation from wrapping */
  @media screen and (min-width: 48em) {
    .main-navigation .menu {
      flex-wrap: nowrap !important;
    }
  }


	.main-navigation .sub-menu {
		padding: 0.2em 0 0.2em;
	}
	.main-navigation .menu-item-has-children,
	.main-navigation .page_item_has_children {
		padding-right: 0.7em;
	}
	.main-navigation .dropdown,
	.main-navigation button.dropdown-toggle {
		display: block;
		background: transparent;
		position: absolute;
		right: 0;
		top: 50%;
		width: 0.7em;
		height: 0.7em;
		font-size: inherit;
		line-height: inherit;
		margin: 0;
		padding: 0;
		border: none;
		border-radius: 0;
		-webkit-transform: translateY(-50%);
		        transform: translateY(-50%);
		overflow: visible;
	}
	.main-navigation .dropdown-symbol {
		display: block;
		background: transparent;
		position: absolute;
		right: 20%;
		top: 35%;
		width: 60%;
		height: 60%;
		border: solid black;
		border-width: 0 2px 2px 0;
		-webkit-transform: translateY(-50%) rotate(45deg);
		        transform: translateY(-50%) rotate(45deg);
	}
	.main-navigation ul ul .dropdown,
	.main-navigation ul ul button.dropdown-toggle {
		top: 45%;
		right: 1em;
	}
	.main-navigation ul ul .dropdown-symbol {
		-webkit-transform: rotate(-45deg);
		        transform: rotate(-45deg);
	}
	/*
		 * If the dropdown toggle is active with JS, then
		 * we'll take care of showing the submenu with JS.
		 *
		 * "focus-within" is an alternative to focus class for
		 * supporting browsers (all but IE/Edge) for no-JS context
		 * (e.g. AMP) See https://caniuse.com/#feat=css-focus-within
		 */
	.main-navigation li:hover > ul,
	.main-navigation li.toggled-on > ul,
	.main-navigation:not(.has-dropdown-toggle) li:focus > ul,
	.main-navigation:not(.has-dropdown-toggle) li:focus-within > ul {
		display: block;
	}
}

/*--------------------------------------------------------------
	# Content navigation
	--------------------------------------------------------------*/
.site-main .comment-navigation,
.site-main .posts-navigation,
.site-main .post-navigation {
	margin: 0 auto 2em;
	max-width: calc(47.5 * 16)px;
	/* Fallback for older browsers. */
	max-width: 47.5rem;
	overflow: hidden;
	/* padding: 0 20px; */
	font-family: 'IBM Plex Sans', sans-serif;
}

.nav-links {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}

@media screen and (min-width: 960px) {
	.nav-links > div {
		-webkit-box-flex: 1;
		    -ms-flex: 1;
		        flex: 1;
	}

	.nav-links .nav-previous {
		-webkit-box-ordinal-group: 3;
		    -ms-flex-order: 2;
		        order: 2;
	}

	.comment-navigation .nav-next,
	.posts-navigation .nav-previous,
	.post-navigation .nav-previous {
		text-align: end;
	}
	.nav-next h3 {
		margin-left: 20px;
	}

	.nav-previous h3 {
		margin-right: 20px;
	}

}

.post-navigation-sub {
	text-decoration: none;
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
}

.nav-links a {
	display: block;
	color: #333;
}
.nav-links a:hover,
.nav-links a:focus {
	color: #3575FF;
}

.post-navigation-sub img {
	width: 10px;
}
.nav-previous .post-navigation-sub img {
	margin-left: 10px;
}

.nav-next .post-navigation-sub img {
	margin-right: 10px;
}

.nav-prev .post-navigation-sub {
	-webkit-box-pack: end;
	    -ms-flex-pack: end;
	        justify-content: end;
}

.nav-previous h3,
.nav-next h3 {
	margin-top: 10px;
}


.posts-navigation a {
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
}

.posts-navigation .separator {
	display: inline-block;
	width: 20px;
}

.posts-navigation h5 {
	font-weight: 500;
}

@media screen and (max-width: 871px) {
	.nav-links {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-flow: column;
		        flex-flow: column;
	}

	.posts-navigation .nav-links, .post-navigation .nav-links {
		text-align: center;
	}

	.posts-navigation .nav-next, .post-navigation .nav-next {
		margin-bottom: 1.5em;
	}

	.posts-navigation .nav-previous {
		text-align: inherit;
	}

	.posts-navigation .nav-next {
		margin-top: 1em;
	}
}

/*--------------------------------------------------------------
	# Footer
	--------------------------------------------------------------*/
.site-footer {
	margin: 0;
	padding: 2em 0;
	font-family: 'Poppins', sans-serif;
	background: #111111;
}

.site-info {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
}
.site-info .credits-logo {
	display: inline-block;
	padding-left: 0.4em;
	vertical-align: bottom;
}

.footer-social-icons {
  display: flex;
  align-items: center;
  gap: 1rem;    /* increase this value for more space between icons */
}

.footer-social-icons a svg {
  fill: #ffffff;
  transition: fill 0.3s ease;
}

.footer-social-icons a:hover svg {
  fill: #64dd17;
}

.jetpack-social-navigation {
	text-align: center;
	font-size: 30px;
}
.jetpack-social-navigation ul {
	margin: 0 !important;
}
.jetpack-social-navigation li + li {
	margin-left: 5px;
}
.jetpack-social-navigation a {
	color: #333;
}
.jetpack-social-navigation a:hover {
	color: #000;
}

/*--------------------------------------------------------------
	# Infinite scroll
	--------------------------------------------------------------*/
/* Globally hidden elements when Infinite Scroll is supported and in use. */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
	/* Theme Footer (when set to scrolling) */
	display: none;
}

/* When Infinite Scroll has reached its end we need to re-display elements that were hidden (via .neverending) before. */
.infinity-end.neverending .site-footer {
	display: block;
}

/*--------------------------------------------------------------
	* Animation Styles
	--------------------------------------------------------------*/
@-webkit-keyframes bounceInDown {
	from,
	60%,
	75%,
	90%,
	to {
		-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
		        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
	}
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, -3000px, 0);
		        transform: translate3d(0, -3000px, 0);
	}
	60% {
		opacity: 1;
		-webkit-transform: translate3d(0, 25px, 0);
		        transform: translate3d(0, 25px, 0);
	}
	75% {
		-webkit-transform: translate3d(0, -10px, 0);
		        transform: translate3d(0, -10px, 0);
	}
	90% {
		-webkit-transform: translate3d(0, 5px, 0);
		        transform: translate3d(0, 5px, 0);
	}
	to {
		-webkit-transform: translate3d(0, 0, 0);
		        transform: translate3d(0, 0, 0);
	}
}
@keyframes bounceInDown {
	from,
	60%,
	75%,
	90%,
	to {
		-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
		        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
	}
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, -3000px, 0);
		        transform: translate3d(0, -3000px, 0);
	}
	60% {
		opacity: 1;
		-webkit-transform: translate3d(0, 25px, 0);
		        transform: translate3d(0, 25px, 0);
	}
	75% {
		-webkit-transform: translate3d(0, -10px, 0);
		        transform: translate3d(0, -10px, 0);
	}
	90% {
		-webkit-transform: translate3d(0, 5px, 0);
		        transform: translate3d(0, 5px, 0);
	}
	to {
		-webkit-transform: translate3d(0, 0, 0);
		        transform: translate3d(0, 0, 0);
	}
}

@-webkit-keyframes bounceOutUp {
	20% {
		-webkit-transform: translate3d(0, -10px, 0);
		        transform: translate3d(0, -10px, 0);
	}
	40%,
	45% {
		opacity: 1;
		-webkit-transform: translate3d(0, 20px, 0);
		        transform: translate3d(0, 20px, 0);
	}
	to {
		opacity: 0;
		-webkit-transform: translate3d(0, -2000px, 0);
		        transform: translate3d(0, -2000px, 0);
	}
}

@keyframes bounceOutUp {
	20% {
		-webkit-transform: translate3d(0, -10px, 0);
		        transform: translate3d(0, -10px, 0);
	}
	40%,
	45% {
		opacity: 1;
		-webkit-transform: translate3d(0, 20px, 0);
		        transform: translate3d(0, 20px, 0);
	}
	to {
		opacity: 0;
		-webkit-transform: translate3d(0, -2000px, 0);
		        transform: translate3d(0, -2000px, 0);
	}
}

/******************************************************************
* Content Area Styles.
*******************************************************************/
.post-thumbnail {
	display: block;
	max-width: 63.5rem;
	margin: auto;
}

.arrow-left {
	display: inline-block;
	-webkit-transform: rotate(180deg);
	        transform: rotate(180deg);
}

.arrow-right {
	display: inline-block;
}

.entry-content {
    margin-top: 1rem;
  }

/*--------------------------------------------------------------
	# Additional color selectors.
	--------------------------------------------------------------*/
.sticky-badge .sticky-text,
.comment-form .form-submit input {
	background: #3575FF;
}

.comment-meta a:hover, .comment-meta a:focus {
	color: #3575FF;
}

/* Brand font and logo size */
.site-title {
  font-size: 1.75rem !important;
  margin: 0 !important;
  padding-bottom: 1rem !important;
}

 .brand-name {
  // font-family: 'IBM Plex Mono', monospace;
  // font-weight: 600;
  // font-size: 32px;                /* Default desktop font size */
  letter-spacing: 0.6px;
  // color: white;                 /* Default desktop color */
  // text-decoration: none;
  line-height: 1.3;
  display: inline-block;
  margin: 0;
}

.brand-name .underscore {
  color: var(--brand-green);     /* Works in both desktop and mobile */
}

/* ================================================
   CONSOLIDATED NAVIGATION FIX - PREVENTS CLS
   This replaces all conflicting navigation rules
   ================================================ */
@media screen and (min-width: 769px) {
  /* Navigation links - single consistent rule */
  .main-navigation ul li a,
  .main-navigation a {
    position: relative;
    padding: 0 10px;
    padding-bottom: 20px !important;  /* Single consistent value */
    color: #ffffff !important;
    text-decoration: none;
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 400;
    font-size: 1.1rem;
    letter-spacing: 0.3px;
    display: inline-block;
    line-height: 1;
    transition: color 0.3s ease;
  }
  
  /* Underline - single consistent rule */
  .main-navigation ul li a::after,
  .main-navigation a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -18px !important;  /* Single consistent position */
    width: 0;
    height: 9px !important;   /* Single consistent height */
    background-color: #64dd17;
    transition: width 0.3s ease;
    border-radius: 3px;
    pointer-events: none;
  }
  
  /* Hover state - animate width */
  .main-navigation ul li a:hover::after,
  .main-navigation a:hover::after,
  .main-navigation ul li a:focus::after,
  .main-navigation a:focus::after {
    width: 100%;
  }
  
  /* Active/Current page - full width underline */
  .main-navigation .current-menu-item > a::after,
  .main-navigation .current_page_item > a::after,
  .main-navigation .current-menu-ancestor > a::after {
    width: 100%;
  }
  
  /* Clean up any borders or extra styling */
  .main-navigation .current-menu-item > a,
  .main-navigation .current_page_item > a,
  .main-navigation .current-menu-ancestor > a {
    color: #ffffff !important;
    border: none !important;
    padding-bottom: 20px !important;  /* Ensure consistency */
  }
}

/* Hover effect for footer social icons */
.footer-social-icons a svg {
  fill: #ffffff;
  transition: fill 0.3s ease;
}

.footer-social-icons a:hover svg {
  fill: #64dd17;
}

/* Make sure SVGs don't override fill */
.footer-social-icons svg[fill] {
  fill: inherit !important;
}
/* Import font */
//@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Condensed:wght@600&display=swap');

/* Header styling */
.site-header {
  position: sticky;
  top: 0;
  z-index: 111;
  background-color: #111111 !important;
  transition: background-color 1s ease;
  color: white !important;
  padding-top: 15px !important;
  padding-bottom: 1rem !important; /* No padding so underline sits at bottom */
  touch-action: pan-y;
}

.brand-name {
  color: #fff;
}

.site-header.menu-open {
  background-color: #fff !important;
}

body.mobile-menu-open .brand-name {
  color: #fff;
}

body.mobile-menu-open .brand-name .underscore {
  color: var(--brand-green);
}

/* 4. Mobile nav wrapper sits under header */
.mobile-navigation-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;               /* *below* header's 1001 */
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.mobile-navigation-wrapper.open {
  visibility: visible;
  opacity: 1;
}

/* 5. Menu sliding effect (optional) */
.mobile-nav-menu {
  transform: translateX(100%);
  transition: transform 0.6s ease;
}
.mobile-navigation-wrapper.open .mobile-nav-menu {
  transform: translateX(0);
}

/* Logo/Title styling */
.site-title,
.site-title a {
  font-size: 1.75rem !important;
  color: white !important;
  font-family: 'IBM Plex Mono', monospace !important;
  font-weight: 700 !important;
  text-decoration: none;
}

.brand-name .underscore {
  color: #64dd17;
}

/* Social icons hover effect */
.footer-social-icons a svg {
  fill: white;
  transition: fill 0.3s ease;
}

.footer-social-icons a:hover svg {
  fill: #64dd17;
}

/* ----------------------
   GLOBAL TYPOGRAPHY
------------------------ */

body {
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 400;
  font-size: 1.1rem;
  color: #1e1e1e;
  line-height: 1.65;
}

h1, h3, .section-title {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-weight: 500;
  letter-spacing: 0.3px;
  color: #000;
}

h2 {
  font-family: 'IBM Plex Sans Condensed', sans-serif !important;
  font-weight: 300 !important;
  font-size: 1.9rem;
  color: #111111;
  letter-spacing: 0.3px;
}

.icbCards h2 {
  font-family: 'IBM Plex Mono', monospace !important;
  font-weight: 600 !important;
  font-size: 1.8rem !important;
  letter-spacing: 0.3px !important;
}


/* ----------------------
   BLOG POSTS
------------------------ */

.single-post .entry-title,
.single-post h1.entry-title {
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 600;
  font-size: 2.4rem;
  line-height: 1.3;
  color: #111111;
  margin-bottom: 0.5rem;
}

.single-post .post-meta,
.single-post .entry-meta,
.single-post .byline {
  display: flex !important;
  gap: 0.25rem;
  align-items: center;
  font-size: 0.9rem;
  color: #666666 !important;
  font-weight: 400;
  flex-wrap: wrap;
}

.single-post .posted-on,
.single-post .byline,
.single-post .author {
  color: #666666 !important;
  font-weight: 400 !important;
}

.single-post .author a,
.single-post .posted-on a {
  color: #64dd17 !important;
  font-weight: 400 !important;
  text-decoration: none;
}

.single-post .entry-content > p:first-of-type {
  font-size: 1.1rem;
  font-weight: 400;
  color: #333;
  margin-bottom: 2rem;
}

.blog .entry-title,
.blog h2.entry-title,
.archive .entry-title,
.archive h2.entry-title,
.blog .entry-title a,
.blog h2.entry-title > a {
  font-family: 'IBM Plex Sans Condensed', sans-serif;
  font-weight: 500;
  font-size: 3rem;
  color: #111111 !important;
  letter-spacing: 0.2px;
  line-height: 1.25;
  margin-bottom: 0.25rem;
}

@media only screen and (min-width: 769px) {
/* ----------------------
   HEADER STYLING
------------------------ */

.site-header {
  background-color: #111111 !important;
  color: #ffffff !important;
  position: sticky;
  top: 0;
  z-index: 9999;
  padding-top: 24px;
  padding-bottom: 18px;
  transition: transform 0.3s ease;
}

.site-header.header--hidden {
  transform: translateY(-100%);
}

.site-title {
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 600;
  font-size: 2rem; /* 32px */
  letter-spacing: 0.6px;
  line-height: 1.3;
  margin: 0 !important;
  padding-left: 1.2rem;
}

.site-title a {
  color: #ffffff !important;
  text-decoration: none !important;
}

.site-title .underscore {
  color: #64dd17;
}

 .main-navigation {
    display: flex !important;
  }

  .main-navigation ul {
    display: flex !important;
    flex-wrap: nowrap;
    align-items: center;
  }

  .site-header .mobile-nav-toggle {
  display: none !important;
}
 .mobile-navigation-wrapper,
  .mobile-menu-wave,
  .wave-wrapper.mobile-menu-wave {
    display: none !important;
    visibility: hidden !important;
  }

  .header-wave:not(.mobile-menu-wave) {
    display: block !important;
    visibility: visible !important;
  }

   .site-header + .header-wave.wave-wrapper {
    display: none !important;
  }

  /* Show only the in-menu wave */
  .mobile-navigation-wrapper .header-wave.wave-wrapper {
    display: block !important;
  }

/* ======================
   DESKTOP SEARCH WIDGET
   ====================== */

/* 2) Container for icon + form */
.desktop-search-container {
  // position: absolute;
  // right: -2rem;
  // top: 2rem;
  // transform: translateY(-50%);
  // display: flex;
  // align-items: center;
  // z-index: 1000;
}

/* 3) Click target for opening the form */
.desktop-search-icon-container {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 8px;
}

/* 4) The magnifier SVG */
.desktop-search-icon {
  width: 24px;
  height: 24px;
  filter: brightness(0) invert(1);
  transition: filter 0.3s ease;
}

/* 5) Wrapper around the form, hidden by default */
.desktop-search-form-container {
  position: absolute;
          right: 10px;
        bottom: -40px;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-20px);
  transition: all 0.3s ease;
  background-color: #111111;
  padding-right: 0;
  z-index: 1002;
}

/* 6) When JS adds "visible" */
.desktop-search-form-container.visible {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

/* 7) The <form> element */
.desktop-search-form {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  background-color: #111111;
}

/* 8) Text input */
.desktop-search-input {
  background: transparent;
  border: none;
  padding: 10px 30px 10px 15px;
  font-size: 15px;
  width: 200px;
  outline: none;
  color: white !important;
}

.desktop-search-input::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

/* 9) "×" clear button */
.desktop-clear-search {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  color: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  display: none;
}

/* 10) Show clear button when there's text */
.desktop-search-input:not(:placeholder-shown) + .desktop-clear-search {
  display: block;
}

/* target the wrapper containing the footer‐wave */
.secondary-footer + .footer-merge-wrapper {
  margin-top: -5px !important; /* nudge the wave up 1px to hide its transparent top edge */
}
}

/* ==========================================================================  
   Variables & Base Styles - Desktop and Mobile                                                       
   ========================================================================== */
:root {
  --brand-green: #64dd17;
  --brand-white: #F2F2F2;
  --bg-dark: #111111;
  --bg-search: #333333;
  --footer-text: #cccccc;
}

/* Reset overflow & base mobile hide */
body {
  overflow-x: hidden;
  width: 100%;
  position: relative;
}


/* Base button reset & layout */
.btn {
  display: inline-block;
  padding: 1rem 1.5rem;
  border-radius: 10px;
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 700;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  border: none;
}

.btn-primary {
  background-color: #65ce48;
  color: #ffffff;
  border: none;
}

.btn-primary,
.btn-primary * {
  color: #ffffff !important;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: #6ee744 !important;
  color: #ffffff !important;
}

/* ───────────────────────────────────────────────
   SEARCH FORM: always hidden until icon clicked
─────────────────────────────────────────────── */

/* 1) completely hide the form by default */
.header-search-form {
  display: none !important;
}

/* 2) leave the little magnifier icon visible
   (you may already have rules for .search-toggle —
// just ensure it's never set to display:none) */
.search-toggle {
  display: block !important;
  cursor: pointer;
}

/* 3) when <body> has .search-open, show the form */
body.search-open .header-search-form {
  display: block !important;
}

/* ----------------------
MAIN CONTENT
------------------------ */
.site-content,
.content-area,
#primary {
  /* left/right gutters */
  padding-left: 0rem;
  padding-right: 0rem;
  margin-top: 0;
  padding-top: 0;
  border: none;
}

/*  Remove extra space before the first block on any page */
.site-content > *:first-child,
.site-main > *:first-child,
.entry-content > *:first-child {
  margin-top: 0 !important;
  padding-top: 2rem !important;
}


/* ----------------------
SHARED WAVEFORM WRAPPER
------------------------ */
/* Base wrapper for both header & footer waves */
.wave-wrapper {
  line-height: 0;
  overflow: hidden;
  width: 100vw;
  position: relative;
  z-index: 2;
  margin: -1px 0;        /* lifts each wave 1px into its neighbor */
}

/* ----------------------
HEADER WAVE
------------------------ */
.header-wave.wave-wrapper {
  margin-top: -2px;      /* kill antialias gap at top */
  margin-bottom: 0;
}

/* Slightly shorter header wave */
.header-wave svg {
  height: 27px;          /* match your old JPG height exactly */
}

/* Pull the content (hero) up into the wave */
.header-wave + #content {
  margin-top: -50px;     /* adjust until it kisses the green perfectly */
}

/* ----------------------
FOOTER WAVE
------------------------ */
/* Footer sits flush, no bump */
.footer-wave.wave-wrapper {
  margin-top: 1px;
  margin-bottom: 0;
}

/* ---------------------------------------------------
   CORE FOOTER LAYOUT
--------------------------------------------------- */

/* 1) Full‐width wrappers (no extra shifting hacks) */
.green-bar-wrapper {
  width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  overflow-x: hidden;
}

/* 2) Wave separator: hide that 1px gap without altering the SVG path */
.green-bar-wrapper .footer-wave {
  margin-bottom: -20px;         /* pulls up to hide the white line */
  position: relative;
  z-index: 2;
  width: 100%;
  overflow: hidden;
}
.green-bar-wrapper .footer-wave svg {
  display: block;
  width: 100%;
  height: 80px;             /* your intended wave height */
  preserve-aspect-ratio: none;
}

/* 3) "Let's connect" strip: center up to 1280px, 2rem gutters */
.secondary-footer {
  background-color: #f6f2ec;
  margin-bottom: -40px;     /* pull behind the 80px wave */
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
  padding: 0rem;               /* Remove all padding from outer container */
  display: flex;
  width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
  position: relative;
  z-index: 1;
}

.secondary-footer .secondary-footer-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 4rem 3rem;       /* Only padding here - matches footer exactly */
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  box-sizing: border-box;
}

.secondary-footer-inner > div:first-child {
  padding-left: 0;
  margin-left: 0;
}

.secondary-footer-inner,
.footer-content {
  max-width: 1280px;
  margin: 1rem auto;
  padding: 3rem 3rem;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  width: 100%;
}

.secondary-footer .btn-primary {
  margin-top: 1rem;   /* ↑ adjust this value to taste */
  padding: 10px 24px;
}

.footer-left,
.footer-right {
  flex: 1;
  box-sizing: border-box;
}

.footer-right {
  /* your existing properties... */
  margin-right: 1rem; /* Pull social icons further left */
}

/* 6) Subscribe area */
.footer-left .subscribe-text {
  color: #e0e0e0;
  margin-bottom: 1.5rem;
}
.footer-left .subscribe-form {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}
.footer-left .subscribe-form input[type="email"] {
  flex: 1;
  max-width: 300px;
  height: 48px;
  padding: 0.75rem 1rem;
  border-radius: 5px;
  border: none;
  box-sizing: border-box;
}
.footer-left .subscribe-form button {
  background-color: #65ce48;
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 0rem 1.5rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.3s;
  height: 48px;
}
.footer-left .subscribe-form button:hover {
  background-color: #114d00;
}

/* 7) Social & copyright */
.footer-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.footer-top-section {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding-top: 1.5rem;
}
.footer-social-icons {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
}
.footer-social-icons svg {
  width: 24px;
  height: 24px;
  fill: #e0e0e0;
  transition: fill 0.3s;
}
.footer-social-icons a:hover svg {
  fill: #64dd17;
}
.footer-top-section .site-info {
  align-self: flex-start;  /* move copyright under the left edge of icons */
  margin-top: 4rem;
  text-align: left;
  font-size: 0.875rem;
  color: #999;
  box-sizing: border-box;
}

/* ----------------------
CASE STUDY CARDS AND PAGES
------------------------ */
/* Apply IBM Plex Mono only to H1s on Portfolio child pages */
body.parent-pageid-160 h1.entry-title,
body.page-id-324 h1.entry-title {
  font-family: 'IBM Plex Mono', monospace !important;
  font-weight: 400 !important;
  font-size: 2rem;
}

.icbCards > a[class^="card"] {
  display: block;
  border-radius: 28px !important;
  box-shadow: 0 2px 16px rgba(0,0,0,0.2) !important;
  background: #1e1e1e !important;
  border: 2px solid #333333 !important;
  margin-bottom: 2.2rem !important;
  overflow: hidden !important;
  padding: 1.5rem !important;
  transition: box-shadow 0.25s;
}

.icbCards > a[class^="card"]:hover {
  box-shadow: 0 4px 32px rgba(100,221,23,0.13) !important;
  border-color: #65ce48 !important;
}

.icbCards > a[class^="card"] h2,
.icbCards > a.card h2 {
  color: #ffffff !important;
}

.icbCards > a[class^="card"] p,
.icbCards > a.card p {
  color: #e0e0e0 !important;
}

.icbCards .btnWrapper {
  display: flex;
  justify-content: flex-end;
  padding-top: 0.5rem;
}

/* Kill any padding on the card itself */
.icbCards > a.card {
  padding: 0 !important;
}

/* Inner padding on content block only */
.icbCards > a.card > .content {
  padding: 1.5rem 1rem !important;
}

/* Tame heading margins */
.icbCards > a.card > .content > h2 {
  margin: 0.25rem 0 0.5rem !important;
}

/* Sub-text spacing */
.icbCards > a.card > .content > p {
  margin: 0 0 0.5rem !important;
}

/* Breathing room around Learn more block */
.icbCards > a.card > .btnWrapper {
  margin-top: 2rem !important;
  margin-bottom: 2rem !important;
}

/* Learn more buttons → match btn-primary */
.icbCards > a.card > .btnWrapper > a,
.icbCards > a.card > .btnWrapper > button,
.icbCards .btnWrapper a,
.icbCards .btnWrapper button {
  display: inline-block !important;
  background-color: #65ce48 !important;
  color: #ffffff !important;
  padding: 0.75rem 1.5rem !important;
  border-radius: 10px !important;
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  border: none !important;
  transition: background-color 0.3s ease;
}

.icbCards .btnWrapper a:hover,
.icbCards .btnWrapper a:focus,
.icbCards .btnWrapper button:hover,
.icbCards .btnWrapper button:focus {
  background-color: #6ee744 !important;
  color: #ffffff !important;
}


/* ----------------------
TABLE FORMATTING
------------------------ */
table,
table td,
table th {
  border: none !important;
  border-collapse: collapse !important;
  outline: none !important;
  box-shadow: none !important;
}

.education-awards-section {
  display: flex;
  gap: 4rem;
  padding: 3rem 2rem;
  background-color: #f5f5f5;
}

.education-awards-section > div {
  flex: 1;
  padding: 2rem;
  background-color: #ffffff;
  border-radius: 8px;
}

/* ----------------------
CONTACT NINJA FORM SETTINGS
------------------------ */
.nf-form-cont .nf-element[type="submit"] {
  background-color: #64dd17;
  color: #ffffff;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 10px;
  font-weight: bold;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
  width: auto;
  display: inline-block;
}

.nf-form-fields-required,
.nf-required,
.nf-form-content .nf-form-fields-required {
  display: none !important;
}

.nf-form-cont .nf-element[type="submit"]:hover {
  background-color: #114D00;
}

/* ----------------------
GAP FIXES
------------------------ */

/* ───────────────────────────────────────────────────────────
   1) Kill all grid/transform on the root containers
─────────────────────────────────────────────────────────── */
@media screen and (min-width: 871px) {
.site,
#page,
#content,
.site-content,
.content-area,
#primary {
  display: block !important;
  grid-template-columns: none !important;
  transform: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}
}

/* ───────────────────────────────────────────────────────────
   2) Remove any left/right padding on the html/body
─────────────────────────────────────────────────────────────────────── */
html,
body {
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden !important;
  touch-action: pan-y;
}

/* Fix any gaps between elements */
.site-header, 
.site-header + div {
  margin-bottom: 0 !important;
  border-bottom: none !important;
}

/* Fix header gap - all devices */
header.site-header {
    margin-bottom: -2px !important;
    }

div[style*="line-height: 0; overflow: hidden;"] {
    margin-top: -1px !important;
}

/* Target any horizontal lines that might appear */
hr, 
.divider,
.separator {
  display: none !important;
}

html, body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
}

body {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* ==========================================================================  
   Mobile Navigation                                                      
   ========================================================================== */
@media only screen and (max-width: 871px) {

/* Ensure smooth performance on mobile devices */
.site-header {
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -webkit-touch-callout: none;
  pointer-events: auto;
}

/* CRITICAL: Prevent horizontal overflow on all devices */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}

/* Prevent apage scrolling once inside the panel */
body.mobile-menu-open {
  height: 100vh !important;
  overflow: hidden !important;
  position: fixed !important;
  width: 100% !important;
}

/* Also contain any overscroll bounce inside the panel itself */
.mobile-navigation-wrapper.open,
.mobile-nav-menu {
  overscroll-behavior: none;
}

  /* ----------------------
     HEADER TRANSITIONS & SCROLL BEHAVIOR
  ------------------------ */
  
  /* ----------------------
     HEADER TRANSITIONS & SCROLL BEHAVIOR
  ------------------------ */
  
  .site-header {
    position: sticky;
    top: 0;
    z-index: 1001;
    background-color: #111111;
    transition: 
      background-color 1s ease;
    padding-top: 10px;
    padding-bottom: 1rem;
    transform: translateY(0);
    width: 100%;
    max-width: 100vw;
  }

  .site-header.header--hidden {
    transform: translateY(-100%);
  }

  body.mobile-menu-open .site-header {
    background-color: #111111 !important;
    transition: background-color 0.3s ease;
  }

  body.mobile-menu-open .site-header.header--hidden {
    transform: translateY(0) !important;
  }

  .site-title,
  .site-title a,
  .brand-name {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 28px;
    font-weight: 600;
    color: #ffffff;
    text-decoration: none;
    transition: color 1s ease;
    margin: 0;
    padding-left: 1rem;
    text-align: left !important;
    justify-content: flex-start !important;
  }

  .site-title p {
    text-align: left !important;
    margin: 0;
  }

  body.mobile-menu-open .site-title,
  body.mobile-menu-open .site-title a,
  body.mobile-menu-open .brand-name {
    color: #ffffff !important;
  }

  .brand-name .underscore,
  body.mobile-menu-open .brand-name .underscore {
    color: #64dd17 !important;
  }

  /* ----------------------
     MOBILE TOGGLE BUTTON
  ------------------------ */
  
  .site-header .mobile-nav-toggle {
    display: flex;
    position: absolute;
    top: 50%;
    right: 1rem;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    background: transparent !important; /* Always transparent */
    border: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1003; /* Above everything */
    pointer-events: auto;
    border-radius: 4px;
    /* Remove all background transitions */
  }

  /* Remove hover background effect - keep transparent */
  .site-header .mobile-nav-toggle:hover {
    background: transparent !important;
  }

  /* Focus state for accessibility - subtle outline only */
  .site-header .mobile-nav-toggle:focus-visible {
    outline: 2px solid #64dd17;
    outline-offset: 2px;
    background: transparent !important;
  }

  /* ----------------------
     HAMBURGER LINES
  ------------------------ */
  
  .mobile-nav-toggle .hamburger-line {
    position: absolute;
    width: 26px;
    height: 3px;
    background: #64dd17;
    left: 50%;
    transform: translateX(-50%);
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
    border-radius: 2px;
  }

  .mobile-nav-toggle .hamburger-line:nth-of-type(1) { 
    top: 16px; 
  }
  .mobile-nav-toggle .hamburger-line:nth-of-type(2) { 
    top: 26px; 
  }

  /* Smooth X animation when menu opens */
  .mobile-nav-toggle.open .hamburger-line:nth-of-type(1) {
    transform: translateX(-50%) translateY(5px) rotate(45deg);
  }

  .mobile-nav-toggle.open .hamburger-line:nth-of-type(2) {
    transform: translateX(-50%) translateY(-5px) rotate(-45deg);
  }

  /* ----------------------
     MOBILE NAVIGATION WRAPPER
  ------------------------ */
  
  .mobile-navigation-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    max-width: 100vw; /* Prevent overflow */
    height: 100dvh; /* Better mobile support */
    z-index: 1000; /* Below header */
    opacity: 1;
    visibility: visible;
    transition: none;
    pointer-events: none;
    overflow: hidden; /* Prevent any internal overflow */
  }

  .mobile-navigation-wrapper.open {
    background: rgba(0, 0, 0, 0.3);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  /* ----------------------
     MOBILE MENU PANEL
  ------------------------ */
  
  .mobile-nav-menu {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 100vw; /* Prevent overflow */
    background: #ffffff;
    transform: translateX(100%);
    transition: transform 0.7s;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden; /* Prevent horizontal overflow */
    overscroll-behavior: contain;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1);
  }

  .mobile-navigation-wrapper.open .mobile-nav-menu {
    transform: translateX(0);
  }

  /* ----------------------
     MENU ITEMS STYLING
  ------------------------ */
  
  .mobile-menu-items {
    list-style: none;
    margin: 0;
    padding: 0;
    padding-top: 100px; /* REDUCED from 6rem to position items closer to header */
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden; /* Prevent horizontal overflow */
    -webkit-overflow-scrolling: touch;
    width: 100%;
    max-width: 100%;
  }

  .mobile-menu-items li {
    border: none;
    padding: 0;
    width: 100%;
    max-width: 100%;
  }

  .mobile-menu-items li a {
    display: block;
    color: #111111;
    text-decoration: none;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 3rem; /* REDUCED from 3rem (15% reduction) */
    font-weight: 400;
    padding: 1rem; /* Your existing padding */
    transition: all 0.3s ease;
    pointer-events: auto;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  .mobile-menu-items li a:hover,
  .mobile-menu-items li a:focus {
    background: rgba(0, 0, 0, 0.05);
    color: #111111;
  }

  /* Current menu item styling */
  .mobile-menu-items li.current-menu-item > a {
    color: #111111;
    border-left: 6px solid #64dd17;
    padding-left: 34px; /* Adjust for border */
  }

  /* ----------------------
     BODY SCROLL LOCK
  ------------------------ */
  
  body.mobile-menu-open {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
    max-width: 100vw !important; /* Prevent overflow */
    height: 100vh !important;
  }

  /* Additional safety for header visibility when menu is open */
  body.mobile-menu-open .site-header {
    position: sticky !important;
    transform: translateY(0) !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* ----------------------
     HIDE DESKTOP ELEMENTS
  ------------------------ */
  
  .main-navigation,
  .header-wave{
     display: none !important;
  }

  /* ----------------------
     SITE BRANDING LAYOUT
  ------------------------ */
  
  .site-header .header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 1rem;
    max-width: 1440px;
    width: 100%;
    margin: 0 auto;
    transform: translateZ(0); /* Force hardware acceleration */
    
    //overflow: hidden; /* Prevent any overflow */
  }

  .site-branding {
    margin: 10px 0 0;
    max-width: calc(100% - 60px);
    overflow: hidden;
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
  }

  .site-header .site-branding {
    margin-right: auto !important;
    margin-left: 0 !important;
}

  /* Adjust brand name positioning if needed */
  .site-header .brand-name {
    margin-left: 0;
    padding-left: 0rem;
    white-space: nowrap;
    overflow: hidden;
    text-align: left;
  }

  /* Target the brand name ONLY in mobile menu header */
  .mobile-menu-header .site-branding .brand-name {
    margin-top: 1px; /* Adjust this value to move text down */
    padding-top: 6px; /* Additional spacing if needed */
    padding-left: 15px;
  }

  .site-header .brand-name {
   // margin-left: -10px; /* Start with -10px, adjust as needed */
  }

  /* ----------------------
     PERFORMANCE & SMOOTH SCROLLING
  ------------------------ */

  /* Ensure content doesn't jump when header is hidden */
  .site-content,
  #primary,
  main#primary,
  .content-area {
    transition: none; /* Remove any existing transitions that might conflict */
    max-width: 100vw;
    overflow-x: hidden;
  }

  /* Ensure header content stays properly aligned during transitions */
  .site-header .header-container {
    transform: translateZ(0); /* Force hardware acceleration */
  }

  /* Prevent text selection during header animations */
  .site-header.header--hidden * {
    user-select: none;
    -webkit-user-select: none;
  }

  /* Smooth performance on mobile devices */
  .mobile-navigation-wrapper.open {
    overscroll-behavior: contain;
  }

  /* ----------------------
     PREVENT HORIZONTAL OVERFLOW
  ------------------------ */
  
  /* Apply overflow prevention to all major containers */
  .site,
  #page,
  .site-content,
  .content-area,
  #primary,
  main {
    max-width: 100vw;
    overflow-x: hidden;
  }

  /* ----------------------
     ACCESSIBILITY & UX
  ------------------------ */
  
  /* Smooth focus management */
  .mobile-menu-items a:focus {
    outline: 2px solid #64dd17;
    outline-offset: -2px;
  }

  /* Close menu when resized to desktop */
  @media screen and (min-width: 769px) {
    body.mobile-menu-open {
      overflow: auto !important;
      position: static !important;
      width: auto !important;
      height: auto !important;
      max-width: none !important;
    }
  }
}

/* ----------------------
   HIDE MOBILE ON DESKTOP
------------------------ */
@media screen and (min-width: 769px) {
  .mobile-nav-toggle,
  .mobile-navigation-wrapper {
    display: none !important;
  }
  
  /* Ensure desktop nav shows */
  .main-navigation {
    display: flex !important;
  }
  
  /* Reset header background on desktop */
  .site-header {
    background-color: #111111 !important;
    transform: translateY(0) !important;
    position: sticky !important;
  }
  
  .site-header.header--hidden {
    transform: translateY(0) !important;
  }
  
  .site-title,
  .site-title a,
  .brand-name {
    color: #ffffff !important;
  }
}

/* ---------------------------------------------------
   MOBILE RESPONSES (up to 768px)
--------------------------------------------------- */
@media (max-width: 871px) {
  
 .site-content {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    margin-top: -4rem;
    box-sizing: border-box;
  }

  /* Lock body scroll when menu open */
  body.mobile-menu-open {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
    height: 100vh !important;
  }

  /* Hide that leftover search field in the slide-out */
  .mobile-nav-menu .mobile-search-item {
    display: none !important;
  }

  /* Remove desktop underline indicator */
  .main-navigation .current-menu-item > a::after,
  .main-navigation .current_page_item > a::after {
    display: none !important;
  }

  /* —— "Let's connect" section —— */
  .secondary-footer {
    width: 100vw;
    margin: 0;
    background-color: #f6f2ec;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    box-sizing: border-box;
    position: relative;
    z-index: 1;
    margin-bottom: -25px; /* pull up under wave */
    padding-bottom: 10px;
    padding-right: 2rem;
    padding-left: 2rem;
  }

  .green-bar-wrapper {
    /* span the full viewport */
    width: 100vw;
    margin: 0;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    box-sizing: border-box;
    z-index: 2;
  }
  
.secondary-footer-inner {
  display: flex;
  flex-direction: column;  /* ← Mobile should be column layout */
  margin: 0 auto;
  padding: 0rem 2rem;     /* ← Match footer mobile padding */
  max-width: 100%;
  box-sizing: border-box;
}

  .secondary-footer-text {
  text-align: left;
  flex: 1;
}

   .secondary-footer .btn-primary {
    margin-top: 30px;
  }

  /* —— Wave —— */
  .footer-wave {
    width: 100%;
    margin-top: -20px;
    margin-bottom: -2px;
    position: relative;
    z-index: 2;
    overflow: hidden; /* Important for mobile */
  }
  
  .footer-wave svg {
    width: 100%;
    height: 80px;
    display: block;
    /* Ensure proper scaling on mobile */
    preserve-aspect-ratio: none;
    /* Force the SVG to stretch */
    min-width: 100%;
  }

  .site-footer {
    width: 100%;
    margin: 0;
    margin-top: -20px;
    margin-bottom: -20px;
    padding: 0rem 0rem; /* Match secondary footer padding */
    background: #111;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
  }
  
  .site-footer .footer-inner {
    padding: 0rem; /* No additional padding */
    max-width: 100%;
    margin: 0;
  }

  .footer-content {
    flex-direction: column;
    align-items: flex-start;
    padding: 3rem 2rem;
    width: 100%;
  }

  .footer-left {
    width: 100%;
    margin-bottom: 2rem;
    margin-left: 0;
  }

  .footer-left .subscribe-text {
    margin-bottom: 1rem;
    font-size: 1.125rem; 
    line-height: 1.6; 
    max-width: 100%; 
    width: 100%; 
    font-family: 'IBM Plex Sans', sans-serif; 
    font-weight: 400;
    color: #E0E0E0;
  }

  .footer-left .subscribe-form {
    display: flex;
    flex-direction: row; /* Keep horizontal layout */
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    margin-bottom: 2rem;
  }
  
  .footer-left .subscribe-form input[type="email"] {
    width: 200px; /* Fixed width to match earlier screenshot */
    height: 48px;
    padding: 0.75rem 1rem;
    border-radius: 5px;
    border: none;
    box-sizing: border-box;
    font-size: 16px; /* Prevent iOS zoom */
  }
  
  .footer-left .subscribe-form button {
    width: auto;
    height: 48px;
    padding: 0.75rem 1.5rem;
    background-color: #65ce48;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.3s;
    white-space: nowrap;
    flex-shrink: 0;
  }
  
  .footer-left .subscribe-form button:hover {
    background-color: #114d00;
  }

  /* —— Social & copyright (right column) —— */
  .footer-right {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .footer-top-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start !important;
    text-align: left !important;
    padding-top: 0;
  }

  .footer-social-icons {
    display: flex;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    gap: 1rem;
    margin-bottom: 3rem;
    width: 100%;
  }
  
  .footer-social-icons svg {
    width: 24px;
    height: 24px;
    fill: #e0e0e0;
    transition: fill 0.3s;
    flex-shrink: 0;
  }
  
  .footer-social-icons a:hover svg {
    fill: #64dd17;
  }

  /* —— COPYRIGHT FIX - Override global flex centering —— */
  .site-info {
    color: #ccc;
    font-size: 0.875rem;
    /* Override the global flex centering properties */
    display: flex !important;
    justify-content: flex-start !important; /* Change from center to flex-start */
    align-items: flex-start !important;     /* Change from center to flex-start */
    text-align: left !important;
    align-self: flex-start !important;
    padding: 0 !important;
    width: 100% !important;
  }

  .site-footer .site-info {
    text-align: left !important;
    align-self: flex-start !important;
    justify-self: flex-start !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    width: 100% !important;
  }

  /* Additional specificity for copyright alignment */
  .footer-content .footer-right .footer-top-section .site-info {
    text-align: left !important;
    align-self: flex-start !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    display: flex !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
  }

  /* 1) Bio & My Approach boxes on mobile (p.has-background.has-large-font-size) */
  p.has-background.has-x-large-font-size, 
  p.has-background.has-large-font-size {
    padding-left: 1rem;
    padding-right: 1rem;
    margin-left: 0rem;
    margin-right: 0rem;
    font-size: 2rem;
    line-height: 1.4;
  }

  /* only target your two-column group with a background */
  .wp-block-columns.has-background {
    /* override the large desktop gutters */
    padding-left: 1.2rem;
    padding-right: 1.2rem;
    line-height: 1.4;
    font-size: 1rem;
  }

  h2.has-background.has-x-large-font-size {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* ==========================================================================
   ashlingam.xyz — COLOR INVERSION OVERRIDE
   Black ↔ White swap for header, footer, body, mobile nav, waves
   
   Add this at the END of your style.css or enqueue as a separate stylesheet.
   ========================================================================== */

/* ---------- CSS VARIABLES ---------- */
:root {
  --bg-dark:       #ffffff;   /* was #111111 */
  --bg-light:      #111111;   /* was #ffffff — now the page background */
  --text-primary:  #e0e0e0;   /* light text on dark body */
  --text-heading:  #ffffff;   /* headings on dark body */
  --text-muted:    #999999;
  --brand-green:   #64dd17;   /* unchanged */
}


/* ==========================================================================
   1. BODY / PAGE BACKGROUND
   ========================================================================== */
body {
  background-color: #111111 !important;
  color: #e0e0e0 !important;
}


/* ==========================================================================
   2. HEADER — dark → white
   ========================================================================== */
.site-header {
  background-color: #ffffff !important;
}

/* Brand / site title */
.site-title,
.site-title a,
.brand-name {
  color: #111111 !important;
}

/* Green underscore stays green */
.brand-name .underscore {
  color: #64dd17 !important;
}

/* Desktop nav links */
@media screen and (min-width: 769px) {
  .main-navigation ul li a,
  .main-navigation a {
    color: #111111 !important;
  }

  /* Underline on hover — keep green */
  .main-navigation ul li a::after,
  .main-navigation a::after {
    background-color: #64dd17;
  }

  /* Current page link */
  .main-navigation .current-menu-item > a,
  .main-navigation .current_page_item > a,
  .main-navigation .current-menu-ancestor > a {
    color: #111111 !important;
  }

  /* Dropdown arrow */
  .main-navigation .dropdown-symbol {
    border-color: #111111;
  }

  /* Desktop search styling (if re-enabled) */
  .desktop-search-form-container {
    background-color: #ffffff;
  }
  .desktop-search-form {
    background-color: #ffffff;
  }
  .desktop-search-input {
    color: #111111 !important;
  }
  .desktop-search-input::placeholder {
    color: rgba(0, 0, 0, 0.35);
  }
  .desktop-clear-search {
    color: rgba(0, 0, 0, 0.35);
  }
}


/* ==========================================================================
   3. TYPOGRAPHY — text on dark background
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
  color: #ffffff;
}

p, li, span, div, td, th, dd, dt, label, figcaption {
  color: #e0e0e0;
}

/* Blog entry titles */
.entry-title,
.entry-title a {
  color: #ffffff !important;
}

/* Blog post meta */
.entry-meta,
.byline,
.posted-on {
  color: #999999 !important;
}

/* Single post adjustments */
.single-post .entry-title,
.single-post h1.entry-title {
  color: #ffffff !important;
}

.single-post .entry-content > p:first-of-type {
  color: #cccccc;
}

/* Links — keep brand blue or go green */
a {
  color: #64dd17;
}
a:hover,
a:focus,
a:active {
  color: #76ff03;
}

/* Post author/date links */
.single-post .author a,
.single-post .posted-on a {
  color: #64dd17 !important;
}

/* Nav links in content */
.nav-links a {
  color: #e0e0e0;
}
.nav-links a:hover,
.nav-links a:focus {
  color: #64dd17;
}


/* ==========================================================================
   4. CONTENT AREA
   ========================================================================== */
.site-content,
.content-area,
#primary,
.site-main {
  background-color: #111111;
}

/* Entry content */
.entry-content {
  color: #e0e0e0;
}

/* Blockquotes */
blockquote {
  border-left-color: #64dd17;
  color: #cccccc;
}

/* Code blocks */
pre {
  background: #1a1a1a;
  color: #e0e0e0;
}

code, kbd, tt, var {
  color: #e0e0e0;
}

/* Tables */
table {
  color: #e0e0e0;
}

/* HR */
hr {
  background-color: #333333;
}

/* Forms on dark bg */
input[type='text'],
input[type='email'],
input[type='url'],
input[type='password'],
input[type='search'],
input[type='number'],
input[type='tel'],
textarea,
select {
  background: #1a1a1a;
  color: #e0e0e0;
  border-color: #333333;
}

button,
input[type='button'],
input[type='reset'],
input[type='submit'] {
  background: #64dd17;
  color: #111111;
}


/* ==========================================================================
   5. SECONDARY FOOTER (beige) — keep or darken
   ========================================================================== */
.secondary-footer {
  background-color: rgba(200, 210, 220, 0.08) !important;
  border-bottom: 2px solid #333333 !important;
  margin-bottom: 0 !important
}

.secondary-footer h2 {
  color: #ffffff !important;
}

.secondary-footer p {
  color: #cccccc !important;
}


/* ==========================================================================
   6. MAIN FOOTER — dark → white
   ========================================================================== */
.site-footer {
  background: #111111 !important;
}

/* Footer text */
.footer-left .subscribe-text {
  color: #ffffff !important;
}

/* Subscribe input */
.footer-left .subscribe-form input[type="email"] {
  background: #f2f2f2;
  color: #111111;
  border: 1px solid #e0e0e0;
}

/* Social icons */
.footer-social-icons svg {
  fill: #ffffff !important;
}
.footer-social-icons a:hover svg {
  fill: #64dd17 !important;
}

/* Copyright */
.site-info {
  color: #666666 !important;
}

.footer-top-section .site-info {
  color: #666666 !important;
}


/* ==========================================================================
   7. MOBILE NAV — white header → dark on open, white panel
   ========================================================================== */
@media only screen and (max-width: 871px) {

  /* Header starts white on mobile */
  .site-header {
    background-color: #ffffff !important;
    transition: background-color 1s ease;
  }

  /* Brand text starts dark on white header */
  .site-title,
  .site-title a,
  .brand-name {
    color: #111111 !important;
    transition: color 1s ease;
  }

  /* When menu opens — header transitions to dark */
  body.mobile-menu-open .site-header {
    background-color: #111111 !important;
  }

  /* Brand text transitions to white */
  body.mobile-menu-open .site-title,
  body.mobile-menu-open .site-title a,
  body.mobile-menu-open .brand-name {
    color: #ffffff !important;
  }

  /* Green underscore always stays green */
  .brand-name .underscore,
  body.mobile-menu-open .brand-name .underscore {
    color: #64dd17 !important;
  }

  /* Hamburger lines — keep green */
  .mobile-nav-toggle .hamburger-line {
    background: #64dd17;
  }

  /* Mobile nav panel — white */
  .mobile-nav-menu {
    background: #ffffff !important;
  }

  /* Mobile menu links — dark text on white */
  .mobile-menu-items li a {
    color: #111111 !important;
  }

  .mobile-menu-items li a:hover,
  .mobile-menu-items li a:focus {
    background: rgba(0, 0, 0, 0.05);
    color: #111111 !important;
  }

  /* Current menu item */
  .mobile-menu-items li.current-menu-item > a {
    color: #111111 !important;
    border-left-color: #64dd17;
  }

  /* Overlay backdrop */
  .mobile-navigation-wrapper.open {
    background: rgba(0, 0, 0, 0.3);
  }

  /* Mobile footer */
  .footer-content {
    background: #111111;
  }

  .footer-left .subscribe-text {
    color: #e0e0e0 !important;
  }
}

/* Mobile header positioning + slide animation */
@media only screen and (max-width: 871px) {

  header.site-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;

    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);

    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;

    transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  }

  header.site-header.header--hidden {
    transform: translate3d(0, -100%, 0) !important;
    -webkit-transform: translate3d(0, -100%, 0) !important;
    transition: none !important;
  }

  body.mobile-menu-open header.site-header,
  body.mobile-menu-open header.site-header.header--hidden {
    transform: translate3d(0, 0, 0) !important;
    -webkit-transform: translate3d(0, 0, 0) !important;
  }


  header.site-header {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

  header.site-header .site-title,
  header.site-header .site-title a,
  header.site-header .brand-name {
    line-height: 1.15 !important;
    font-size: 24px !important;
  }

/* ==========================================================================
   8. DESKTOP HEADER — ensure no conflict
   ========================================================================== */
@media screen and (min-width: 769px) {
  .site-header {
    background-color: #ffffff !important;
  }

  .site-header.header--hidden {
    transform: translateY(-100%);
  }

  .site-title,
  .site-title a,
  .brand-name {
    color: #111111 !important;
  }
}

/* ==========================================================================
   9. CASE STUDY CARDS (if applicable)
   ========================================================================== */
.icbCards > a[class^="card"] {
  background: #1a1a1a !important;
  border-color: #333333 !important;
  transition: border-color 0.2s ease;
}
.icbCards > a[class^="card"]:hover {
  border-color: #65ce48 !important;
}
.icbCards h2 {
  color: #ffffff !important;
}


/* ==========================================================================
   10. ARCHIVE / SEARCH HEADERS
   ========================================================================== */
.archive:not(.error404) .page-header,
.search:not(.search-no-results) .page-header {
  border-bottom-color: #333333;
}

.page-header .archive-description {
  color: #cccccc;
}


/* ==========================================================================
   11. COMMENTS AREA (if enabled)
   ========================================================================== */
.comment-meta a {
  color: #e0e0e0;
}
.comment-meta a:hover,
.comment-meta a:focus {
  color: #64dd17;
}


/* ==========================================================================
   12. WORDPRESS BLOCK OVERRIDES
   ========================================================================== */

/* Subtle card lift for text containers on dark bg */
.entry-content .has-background,
.entry-content .wp-block-group,
.entry-content .wp-block-column {
  background-color: #1a1a1a !important;
  border-radius: 8px;
}

/* Restore transparent gray box on dark background */
.has-background[style*="0a1d29"] {
  background-color: rgba(200, 210, 220, 0.08) !important;
}

/* List markers on dark bg */
.entry-content ul.wp-block-list li::before {
  background: #e0e0e0;
}

.entry-content ol.wp-block-list li::before {
  color: #e0e0e0;
}

/* Ninja Form fields → white background */
.nf-form-cont input[type="text"],
.nf-form-cont input[type="email"],
.nf-form-cont input[type="tel"],
.nf-form-cont input[type="url"],
.nf-form-cont textarea,
.nf-form-cont select {
  background-color: #ffffff !important;
  color: #111111 !important;
  border: 1px solid #e0e0e0 !important;
}

/* Ninja Form submit button → match btn-primary */
.nf-form-cont input[type="submit"],
.nf-form-cont .nf-element[type="submit"] {
  background-color: #65ce48 !important;
  color: #ffffff !important;
  padding: 0.75rem 1.5rem !important;
  border-radius: 10px !important;
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-weight: 700 !important;
  border: none !important;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.nf-form-cont input[type="submit"]:hover,
.nf-form-cont input[type="submit"]:focus,
.nf-form-cont .nf-element[type="submit"]:hover,
.nf-form-cont .nf-element[type="submit"]:focus {
  background-color: #6ee744 !important;
  color: #ffffff !important;
}

/* Blog/archive entry title links → white */
body.blog h2.entry-title > a,
body.blog .entry-title a,
body.archive h2.entry-title > a,
body.archive .entry-title a {
  color: #ffffff !important;
}

/* Category tag links → white */
.cat-links a,
span.cat-links a[rel="category tag"] {
  color: #ffffff !important;
}

/* "Continue Reading" link → white */
a.read-more-link {
  color: #ffffff !important;
}