/**
 * Header search styling.
 *
 * Astra's header-search component (slide-search variant) renders as:
 *   .ast-search-menu-icon.slide-search
 *     > form.search-form > input.search-field
 *     > .ast-search-icon > a.slide-search.astra-search-icon (toggle)
 *
 * Astra's defaults hide the form and only show the icon; clicking the icon
 * adds .ast-dropdown-active which slides a 235px input out next to the icon.
 *
 * On desktop we override that entirely: the icon trigger is hidden and the
 * form is permanently visible as a pill input filling the available space
 * between the logo and the menu.
 *
 * On mobile (body.ast-header-break-point) we keep the icon trigger and
 * reposition the form, when active, as a full-width row pinned to the
 * bottom of the header bar instead of the default inline slide-out.
 */

:root {
	--csg-search-border: #d4d4d8;
	--csg-search-border-focus: #6c6f74;
	--csg-search-bg: #ffffff;
	--csg-search-fg: #1f2937;
	--csg-search-placeholder: #6b7280;
	--csg-search-radius: 999px;
	--csg-search-height: 40px;
	--csg-search-padding-x: 1.25rem;
	--csg-search-max-width: 520px;
}

/* ---------------------------------------------------------------------------
 * Desktop: permanent pill input, no icon trigger.
 * The .ast-header-break-point body class is *absent* on desktop, so we use
 * :not() to scope these rules.
 * ------------------------------------------------------------------------ */

body:not(.ast-header-break-point) .ast-header-search .ast-search-menu-icon.slide-search {
	display: flex;
	align-items: center;
	width: 100%;
	max-width: var(--csg-search-max-width);
	padding: 0;
	visibility: visible;
	opacity: 1;
}

body:not(.ast-header-break-point) .ast-header-search .ast-search-menu-icon.slide-search .search-form {
	position: static;
	visibility: visible;
	opacity: 1;
	width: 100%;
	padding: 0;
	transform: none;
	background: transparent;
	box-shadow: none;
	border-radius: var(--csg-search-radius);
	border-width: 1px;
}

body:not(.ast-header-break-point) .ast-header-search .ast-search-menu-icon.slide-search .search-form label {
	width: 100%;
}

body:not(.ast-header-break-point) .ast-header-search .ast-search-menu-icon.slide-search .search-field,
body:not(.ast-header-break-point) .ast-header-search .ast-search-menu-icon.slide-search.ast-dropdown-active .search-field {
	width: 100%;
	height: var(--csg-search-height);
	padding: 0 var(--csg-search-padding-x);
	border: 1px solid var(--csg-search-border);
	border-radius: var(--csg-search-radius);
	background-color: var(--csg-search-bg);
	color: var(--csg-search-fg);
	font-size: 0.9375rem;
	line-height: 1.4;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

body:not(.ast-header-break-point) .ast-header-search .ast-search-menu-icon.slide-search .search-field:focus {
	width: 100%;
	border-color: var(--csg-search-border-focus);
	box-shadow: 0 0 0 3px rgba(108, 111, 116, 0.12);
	outline: none;
}

body:not(.ast-header-break-point) .ast-header-search .ast-search-menu-icon.slide-search .search-field::placeholder {
	color: var(--csg-search-placeholder);
	opacity: 1;
}

/* The click-to-expand affordance is redundant when the input is always visible. */
body:not(.ast-header-break-point) .ast-header-search .ast-search-menu-icon.slide-search .ast-search-icon {
	display: none;
}

/* Let the search component flex-grow inside the header section so it occupies
 * the slack between the logo and the menu, matching the Figma design. */
body:not(.ast-header-break-point) .ast-header-search {
	flex: 1 1 auto;
	min-width: 0;
	margin-inline: 1.5rem;
}

/* ---------------------------------------------------------------------------
 * Mobile / responsive: keep icon trigger; expanded form becomes a full-width
 * row anchored to the bottom of the header bar.
 * ------------------------------------------------------------------------ */

/* Anchor the absolute-positioned form to the header bar, not to the small
 * search icon container. Astra sets position:relative on .ast-search-menu-icon
 * by default (for its own slide-out animation); overriding to static here
 * lets the form's left:0/right:0 resolve against .main-header-bar instead. */
body.ast-header-break-point .main-header-bar {
	position: relative;
}

body.ast-header-break-point .ast-header-search .ast-search-menu-icon.slide-search {
	position: static !important;
}

body.ast-header-break-point .ast-header-search .ast-search-menu-icon.slide-search.ast-dropdown-active .search-form {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	width: 100%;
	margin: 0;
	padding: 0.625rem 1rem;
	background-color: var(--csg-search-bg);
	box-shadow: 0 6px 12px -4px rgba(15, 23, 42, 0.15);
	transform: none !important;
	visibility: visible !important;
	opacity: 1 !important;
	z-index: 100;
	border-radius: 0;
}

body.ast-header-break-point .ast-header-search .ast-search-menu-icon.slide-search.ast-dropdown-active .search-form label {
	width: 100%;
	display: block;
}

body.ast-header-break-point .ast-header-search .ast-search-menu-icon.slide-search.ast-dropdown-active .search-field {
	width: 100%;
	height: var(--csg-search-height);
	padding: 0 var(--csg-search-padding-x);
	border: 1px solid var(--csg-search-border);
	border-radius: var(--csg-search-radius);
	background-color: var(--csg-search-bg);
	color: var(--csg-search-fg);
	font-size: 1rem;
}

body.ast-header-break-point .ast-header-search .ast-search-menu-icon.slide-search.ast-dropdown-active .search-field:focus {
	border-color: var(--csg-search-border-focus);
	box-shadow: 0 0 0 3px rgba(108, 111, 116, 0.12);
	outline: none;
}

body.ast-header-break-point .ast-header-search .ast-search-menu-icon.slide-search.ast-dropdown-active .search-field::placeholder {
	color: var(--csg-search-placeholder);
	opacity: 1;
}

/* ---------------------------------------------------------------------------
 * Above-header bar tweaks.
 * ------------------------------------------------------------------------ */

.ast-above-header-bar {
	border-bottom: none !important;
}

.site-above-header-wrap.ast-builder-grid-row-container.site-header-focus-item.ast-container {
	min-height: 0 !important;
	padding-bottom: 5px;
}

/* spread logo and search as wide as it's possible */
.site-header .ast-main-header-wrap .ast-builder-grid-row {
	grid-template-columns: 1fr auto;
}

/* ---------------------------------------------------------------------------
 * Location widget: visible on mobile.
 * Astra's customizer can hide the above-header row on mobile; override here.
 * ------------------------------------------------------------------------ */
@media (max-width: 921px) {
	.ast-above-header-bar {
		display: block !important;
	}

	/* Each layout element inside the above-header may have its own display:none
	 * generated by Astra's responsive visibility toggles — force all visible. */
	.ast-above-header-bar .ast-builder-layout-element {
		display: block !important;
	}

	/* Astra sets min-height: 50px on these — override to auto so the bar
	 * doesn't add unnecessary whitespace around the compact location widget. */
	.ast-mobile-header-wrap .ast-above-header-bar,
	.ast-above-header-bar .site-above-header-wrap {
		min-height: auto !important;
	}

	/* Compact & centered for mobile */
	.ast-above-header-bar .site-above-header-wrap .ast-builder-grid-row {
		display: flex !important;
		justify-content: center;
		padding-block: 6px;
	}

	.ast-above-header-bar .coastal-nearest-store {
		display: inline-flex !important;
		font-size: 13px;
	}
}

/* ---------------------------------------------------------------------------
 * Footer tweaks.
 * ------------------------------------------------------------------------ */

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

.footer-extra-spacing {
	padding-bottom: 100px;
}

@media (max-width: 921px) {
	footer .site-below-footer-wrap[data-section="section-below-footer-builder"] {
		background-color: #DCE9F580;
    	padding-top: 10px;
	}

	.site-below-footer-wrap .wp-block-group{
		flex-direction: column;
	}

	.footer-extra-spacing {
		padding-bottom: 40px;
	}
}

.wp-block-social-links .wp-block-social-link.wp-social-link {
	background-color: black;
}

#astra-footer-menu {
	gap: 24px;
}