/* InnerG Footer — structural + typography/colour rules. Elements now
   render as plain PHP (no Elementor per-instance controls), so this file
   also carries real default colour/typography, matching the reference
   design's dark-footer scale: headings at --footer-text/35%, body copy at
   --footer-text/55%, legal/copyright at --footer-text/25%.

   Sizes below are the reference's *desktop* (min-width:1024px) values —
   its own responsive type-scale bumps text-sm to 15px and text-[10px] to
   12px above that breakpoint (and icons tagged width="13" to 16px), which
   is what actually renders at any normal desktop viewport. Used flat here
   rather than reproducing the reference's full 3-tier breakpoint scale. */

.innerg-footer-about__logo {
	margin-block-end: 1.5rem;
}

.innerg-footer-about__logo img {
	display: block;
	height: auto;
}

.innerg-footer-about__desc {
	max-width: 20rem;
	/* em (not rem) so a wrapping .innerg-footer-element's own font-size
	   (its per-instance font_scale style control) actually scales this —
	   see Footer_Renderer::instance_style(). Same reasoning on every other
	   font-size in this file. */
	font-size: 0.9375em;
	line-height: 1.625;
	/* var() with the original color-mix() as fallback so a per-instance
	   text_color style override (also set on .innerg-footer-element as a
	   custom property) cascades in without needing !important; unset
	   stays exactly as it was. Same pattern on every text colour below. */
	color: var( --innerg-footer-element-color, color-mix( in srgb, var( --footer-text, #fff ) 55%, transparent ) );
	margin: 0 0 2rem;
}

.innerg-footer-nav-columns {
	display: flex;
	flex-wrap: wrap;
}

.innerg-footer-nav-columns__title {
	font-family: var( --font-sans );
	font-size: 0.75em;
	font-weight: 500;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	color: var( --innerg-footer-element-color, color-mix( in srgb, var( --footer-text, #fff ) 35%, transparent ) );
	margin: 0 0 1.25rem;
}

.innerg-footer-nav-columns__list {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.innerg-footer-nav-columns__list a {
	font-size: 0.9375em;
	color: var( --innerg-footer-element-color, color-mix( in srgb, var( --footer-text, #fff ) 55%, transparent ) );
	text-decoration: none;
	transition: color 0.2s ease;
}

.innerg-footer-nav-columns__list a:hover {
	color: var( --footer-text, #fff );
}

.innerg-footer-contact {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 0.9375em;
	color: var( --innerg-footer-element-color, color-mix( in srgb, var( --footer-text, #fff ) 55%, transparent ) );
}

.innerg-footer-contact li {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
}

.innerg-footer-contact a {
	color: inherit;
	text-decoration: none;
}

.innerg-footer-contact a:hover {
	color: var( --footer-text, #fff );
}

.innerg-footer-contact__icon {
	display: inline-flex;
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	margin-block-start: 0.2em;
	color: var( --accent );
}

.innerg-footer-contact__icon svg {
	width: 100%;
	height: 100%;
}

/* Social icons: bordered square button, matching the reference's footer
   treatment specifically (the same Social Networks element looks
   different — a plain inline icon — anywhere else it's used). */
#innerg-footer .innerg-social {
	gap: 0.75rem;
}

#innerg-footer .innerg-social__link {
	width: 2.25rem;
	height: 2.25rem;
	align-items: center;
	justify-content: center;
	border: 1px solid color-mix( in srgb, var( --footer-text, #fff ) 20%, transparent );
	color: color-mix( in srgb, var( --footer-text, #fff ) 50%, transparent );
}

#innerg-footer .innerg-social__link:hover {
	border-color: var( --accent );
	color: color-mix( in srgb, var( --footer-text, #fff ) 50%, transparent );
}

#innerg-footer .innerg-social__link svg {
	width: 16px;
	height: 16px;
}

.innerg-newsletter__heading {
	font-size: 0.9375em;
	color: var( --innerg-footer-element-color, var( --footer-text, #fff ) );
	margin: 0 0 1rem;
}

/* Input + button rendered as one merged control: shared border, no gap,
   transparent input background, solid accent-coloured button. */
.innerg-newsletter__form {
	display: flex;
	flex-wrap: wrap; /* NOT nowrap — .innerg-newsletter__feedback (below)
	                     has flex-basis:100% and relies on wrapping to drop
	                     to its own line; nowrap forced it into a 3-way
	                     shrink contest with the input, which is what was
	                     actually squeezing the input down, not the input's
	                     own sizing. Input+button now shrink low enough
	                     (see flex-basis:0%/min-width below) that they stay
	                     on one line without needing to disable wrap at all. */
	gap: 0;
	max-width: 22rem;
}

.innerg-newsletter__email {
	/* flex-basis 0 (not auto) so the input — not the fixed-size button —
	   is what shrinks first when space is tight; min-width keeps it from
	   collapsing away entirely. */
	flex: 1 1 0%;
	min-width: 3rem;
	padding: 0.75rem 1rem;
	background: transparent;
	border: 1px solid color-mix( in srgb, var( --footer-text, #fff ) 20%, transparent );
	border-inline-end: none;
	color: var( --footer-text, #fff );
	font-size: 0.875em;
	font-family: inherit;
}

.innerg-newsletter__email::placeholder {
	color: color-mix( in srgb, var( --footer-text, #fff ) 45%, transparent );
}

.innerg-newsletter__email:focus {
	outline: none;
	border-color: var( --accent );
}

.innerg-newsletter__submit {
	flex: 0 0 auto;
	padding: 0.75rem 1.25rem;
	background: var( --accent );
	border: 1px solid var( --accent );
	color: #fff;
	font-size: 0.75em;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.innerg-newsletter__submit:hover {
	background: color-mix( in srgb, var( --accent ) 82%, black );
	border-color: color-mix( in srgb, var( --accent ) 82%, black );
}

/* Copyright and Legal Menu are two independent elements (each its own
   .innerg-footer-element instance, placed in whichever columns the admin
   chooses — by default the two columns of the legal row, side by side).
   No shared outer flex wrapper between them any more; each styles itself
   standalone. */
.innerg-footer-copyright {
	font-size: 0.75em;
	color: var( --innerg-footer-element-color, color-mix( in srgb, var( --footer-text, #fff ) 25%, transparent ) );
	margin: 0;
}

.innerg-footer-copyright p {
	margin: 0;
}

.innerg-footer-legal-menu {
	display: block;
}

.innerg-footer-legal__menu {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.innerg-footer-legal__menu a {
	font-size: 0.75em;
	color: var( --innerg-footer-element-color, color-mix( in srgb, var( --footer-text, #fff ) 25%, transparent ) );
	text-decoration: none;
	transition: color 0.2s ease;
}

.innerg-footer-legal__menu a:hover {
	color: color-mix( in srgb, var( --footer-text, #fff ) 55%, transparent );
}

.innerg-newsletter__hp {
	position: absolute;
	inset-inline-start: -9999px;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.innerg-newsletter__feedback {
	flex-basis: 100%;
	margin: 0.5rem 0 0;
	font-size: 0.8125em;
}

.innerg-newsletter__feedback.is-error {
	color: #b3261e;
}

.innerg-newsletter .innerg-recaptcha-notice {
	flex-basis: 100%;
	color: color-mix( in srgb, var( --footer-text, #fff ) 55%, transparent );
}