/**
 * Header Component CSS — Blocksy Header Builder tweaks.
 *
 * This file is loaded on EVERY page (header is global).
 * Only styles for elements the Blocksy Customizer cannot control.
 *
 * RULES:
 * - Every var() MUST have a hardcoded fallback: var(--theme-palette-color-N, #hex)
 * - Every rule MUST have a WHY comment
 * - No !important — use cascade specificity
 *
 * @package Blocksy_Child
 */

/* ==========================================================================
   FiboSearch Bar in Header Builder (Middle Row)
   ========================================================================== */

/* FiboSearch bar container — sets max-width for the search bar in the header.
   WHY: FiboSearch is a third-party plugin. The Blocksy Customizer has no control
   over its container width. Without this, the search bar expands to fill the
   entire middle column. */
.header-fibosearch-bar {
	width: 100%;
	max-width: 562px;
}

/* FiboSearch inner wrapper — ensures it fills the container.
   WHY: FiboSearch sets its own max-width on this wrapper. We override to let
   our parent container control the width. */
.header-fibosearch-bar .dgwt-wcas-search-wrapp {
	max-width: 100%;
}

/* FiboSearch search input styling.
   WHY: FiboSearch renders its own <input> with default styles. The Blocksy
   Customizer has no control over third-party plugin input styling. Colors
   use Blocksy palette variables with fallbacks for graceful degradation. */
.header-fibosearch-bar .dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input {
	height: 48px;
	border-radius: 8px;
	border: 1px solid var(--theme-palette-color-16, #CFCFCF);
	background: var(--theme-palette-color-17, #FFFFFF);
	font-family: 'Museo Sans', sans-serif;
	font-size: 14px;
	color: var(--theme-palette-color-3, #746A5F);
	padding: 0 48px 0 16px;
}

/* FiboSearch placeholder text color.
   WHY: Same reason — third-party plugin input, no Blocksy Customizer control. */
.header-fibosearch-bar .dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input::placeholder {
	color: var(--theme-palette-color-4, #888888);
}

/* FiboSearch submit button — make transparent (icon-only).
   WHY: FiboSearch adds a submit button with a default background. We want
   icon-only (the magnifying glass SVG). No Blocksy Customizer control. */
.header-fibosearch-bar .dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp .dgwt-wcas-search-submit {
	background: transparent;
	border: none;
}

/* ==========================================================================
   Announcement Bar (Top Row)
   ========================================================================== */

/* Center-align the announcement bar text in the top row.
   WHY: The Blocksy Header Builder HTML element doesn't have a text-align
   option in its settings panel. The content is set via the Blocksy Customizer
   HTML field, but alignment requires CSS. */
[data-row="top"] [data-id="text"] {
	text-align: center;
}

/* ==========================================================================
   Bottom Row (Navigation) — Desktop Only
   ========================================================================== */

/* Hide the desktop bottom nav row on tablet/mobile.
   WHY: The desktop bottom row contains the navigation bar. On mobile, a
   hamburger menu + offcanvas replaces it. Scoped to [data-device="desktop"]
   so the mobile bottom row (which contains the search bar) stays visible.
   @date 2026-04-15 */
@media (max-width: 999px) {
	[data-device="desktop"] > [data-row="bottom"] {
		display: none;
	}
}

/* ==========================================================================
   Divider Element — Respect Customizer height setting
   ========================================================================== */

/* Override Blocksy flex stretch on divider elements.
   WHY: Blocksy flex container uses align-items:stretch which makes dividers
   span the full row height (e.g. 115px). The Customizer divider_height setting
   (24px) is ignored. This forces dividers to their configured height and
   centers them vertically in the row.
   @date 2026-04-15 */
[data-row="middle"] [data-id*="divider"] {
	align-self: center;
	height: var(--divider-height, 24px);
}

/* ==========================================================================
   Mobile Bottom Row — Search Bar
   ========================================================================== */

/* Mobile bottom row shows a full-width FiboSearch bar (matching live site).
   WHY: The Blocksy Header Builder places the search element in the mobile
   bottom row, but Blocksy has no padding/layout control for FiboSearch
   output. This ensures the search bar fills the row with proper spacing.
   @date 2026-04-15 */
[data-device="mobile"] > [data-row="bottom"] {
	background: #FFFFFF !important;
	padding: 4px 15px;
}

/* Fix mobile middle row height — Blocksy outputs 115px (desktop value) instead
   of the Customizer tablet/mobile values (64/56px). Override the container
   min-height and grid-template-rows to auto so the row sizes to its content.
   WHY: Blocksy CSS generation bug — responsive row height not applied to
   mobile device container. Content (logo ~50px, icons ~24px) only needs ~60px.
   @date 2026-04-15 */
[data-device="mobile"] > [data-row="middle"] > .ct-container {
	min-height: auto;
	grid-template-rows: auto;
}

[data-device="mobile"] > [data-row="bottom"] [data-id="search"] {
	width: 100%;
}

[data-device="mobile"] > [data-row="bottom"] [data-id="search"] .dgwt-wcas-search-wrapp {
	max-width: 100%;
	width: 100%;
}

/* ==========================================================================
   FiboSearch HTML Element — Hide on Tablet/Mobile
   ========================================================================== */

/* Hide the FiboSearch HTML element on tablet/mobile.
   WHY: On mobile, FiboSearch is too wide for the header middle row. The
   mobile layout uses a search icon trigger instead. The Blocksy Customizer
   HTML element visibility toggle doesn't distinguish between the search
   bar and other content in the same column. */
@media (max-width: 999px) {
	[data-row="middle"] [data-column="middle"] .ct-header-text {
		display: none;
	}
}


/* ==========================================================================
   iPad Pro (1024px) — Reduce header spacing
   ========================================================================== */

/* iPad Pro shows desktop header but at a narrow width. Reduce container
   padding so logo and elements do not have excessive left/right spacing.
   WHY: Blocksy desktop container has large padding at this width.
   @date 2026-04-16 */
@media (min-width: 1000px) and (max-width: 1080px) {
	/* iPad Pro: swap desktop header for mobile/tablet header.
	   WHY: At 1024px Blocksy renders desktop device, but iPad Pro should
	   show tablet layout (hamburger + search row). Hide desktop, show mobile.
	   @date 2026-04-16 */
	[data-device="desktop"] {
		display: none !important;
	}

	[data-device="mobile"] {
		display: block !important;
	}

	/* Reduce container padding for tablet spacing */
	#header .ct-container {
		padding-left: 15px !important;
		padding-right: 15px !important;
	}
}