/*
 * Holly Finds Brand 1.2.0
 * Adds to the Blocksy theme only. Each block below works only while its
 * switch is on (body class), so a feature turned off leaves no trace.
 * Fonts, content and URLs are not changed.
 *
 * Colors: Navy #1F2A44 · Navy hover #34415F · Dusty Rose #8E4459 (accent only)
 */

/* ---------- 1. Sticky header (Settings: "Sticky header") ---------- */

body.hfb-sticky #header,
body.hfb-sticky header.ct-header {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	z-index: 50;
	background-color: var(--hfb-header-bg, #FFFFFF);
	transition: box-shadow 0.2s ease;
}

/* Keep it below the WordPress admin bar while you're logged in. */
body.hfb-sticky.admin-bar #header,
body.hfb-sticky.admin-bar header.ct-header {
	top: 32px;
}
@media (max-width: 782px) {
	body.hfb-sticky.admin-bar #header,
	body.hfb-sticky.admin-bar header.ct-header {
		top: 46px;
	}
}
@media (max-width: 600px) {
	/* On small phones the admin bar scrolls away, so the header sits at the very top. */
	body.hfb-sticky.admin-bar #header,
	body.hfb-sticky.admin-bar header.ct-header {
		top: 0;
	}
}

/* Soft line once the page has scrolled. */
body.hfb-sticky.hfb-scrolled #header,
body.hfb-sticky.hfb-scrolled header.ct-header {
	box-shadow: 0 1px 0 #ECE4D9, 0 6px 18px rgba(31, 42, 68, 0.06);
}

/* Fallback used by the script only if the theme blocks "sticky". */
body.hfb-sticky.hfb-fixed #header,
body.hfb-sticky.hfb-fixed header.ct-header {
	position: fixed;
	left: 0;
	right: 0;
}

/* Jump links (#section) land below the sticky header, not under it. */
html:has(body.hfb-sticky) {
	scroll-padding-top: calc(var(--hfb-header-h, 96px) + 12px);
}

/* ---------- 1b. Centered header (Settings: "Centered header") ---------- */

/* Blocksy 2.1.60 prints each header row as
   #header > div[data-device="desktop|mobile"] > div[data-row] > div.ct-container
   (or .ct-container-fluid when a row is set to full width; a sticky row adds a
   div[data-sticky] wrapper in between). Only the header's inner container is
   narrowed: the white header bar itself still spans the screen, and post
   content, fonts and the footer are not touched. */
body.hfb-header-width #header [data-row] > :is(.ct-container, .ct-container-fluid),
body.hfb-header-width header.ct-header [data-row] > :is(.ct-container, .ct-container-fluid) {
	box-sizing: border-box;
	width: 100%;
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 24px;
	padding-right: 24px;
}
@media (max-width: 689px) {
	body.hfb-header-width #header [data-row] > :is(.ct-container, .ct-container-fluid),
	body.hfb-header-width header.ct-header [data-row] > :is(.ct-container, .ct-container-fluid) {
		padding-left: 20px;
		padding-right: 20px;
	}
}

/* ---------- 2. Logo size (Settings: "Logo size") ---------- */

body.hfb-logo #header [data-device="desktop"] .site-logo-container,
body.hfb-logo header.ct-header [data-device="desktop"] .site-logo-container {
	--logo-max-height: var(--hfb-logo-desktop, 64px);
}
body.hfb-logo #header [data-device="mobile"] .site-logo-container,
body.hfb-logo header.ct-header [data-device="mobile"] .site-logo-container {
	--logo-max-height: var(--hfb-logo-mobile, 48px);
}
body.hfb-logo #header [data-device="desktop"] .site-logo-container img,
body.hfb-logo header.ct-header [data-device="desktop"] .site-logo-container img {
	height: var(--hfb-logo-desktop, 64px);
	max-height: none;
	width: auto;
}
body.hfb-logo #header [data-device="mobile"] .site-logo-container img,
body.hfb-logo header.ct-header [data-device="mobile"] .site-logo-container img {
	height: var(--hfb-logo-mobile, 48px);
	max-height: none;
	width: auto;
}

/* ---------- 3. Navy buttons (Settings: "Navy buttons") ---------- */

/* Blocksy's own button colors, so theme-made buttons follow too. */
body.hfb-buttons {
	--theme-button-background-initial-color: #1F2A44;
	--theme-button-background-hover-color: #34415F;
	--theme-button-text-initial-color: #FFFFFF;
	--theme-button-text-hover-color: #FFFFFF;
	--theme-button-border-radius: 999px;
	--buttonInitialColor: #1F2A44;
	--buttonHoverColor: #34415F;
}

/* Every button: block buttons, theme buttons, form buttons, MailPoet.
   Header icons (search, menu) and the search box are left alone. */
body.hfb-buttons :is(
	.wp-element-button,
	.wp-block-button__link,
	.ct-button,
	a.button,
	button.button,
	input[type="submit"],
	button[type="submit"],
	.mailpoet_submit,
	.wp-block-search__button
):not(#header *):not(.ct-header *):not(.ct-search-form *):not(.ct-panel *) {
	background-color: #1F2A44 !important;
	background-image: none !important;
	color: #FFFFFF !important;
	border: 1.5px solid #1F2A44 !important;
	border-radius: 999px !important;
	font-family: "Jost", var(--theme-font-family, sans-serif);
	font-size: 14px !important;
	font-weight: 500;
	letter-spacing: 0.8px;
	line-height: 1.4;
	padding: 10px 24px !important;
	text-decoration: none !important;
	box-shadow: none;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

body.hfb-buttons :is(
	.wp-element-button,
	.wp-block-button__link,
	.ct-button,
	a.button,
	button.button,
	input[type="submit"],
	button[type="submit"],
	.mailpoet_submit,
	.wp-block-search__button
):not(#header *):not(.ct-header *):not(.ct-search-form *):not(.ct-panel *):is(:hover, :focus-visible) {
	background-color: #34415F !important;
	border-color: #34415F !important;
	color: #FFFFFF !important;
}

/* Outline-style buttons stay outlined, in navy. */
body.hfb-buttons .is-style-outline > .wp-block-button__link:not(#header *):not(#hfb-a):not(#hfb-b) {
	background-color: transparent !important;
	color: #1F2A44 !important;
	border-color: #1F2A44 !important;
}
body.hfb-buttons .is-style-outline > .wp-block-button__link:not(#header *):not(#hfb-a):not(#hfb-b):is(:hover, :focus-visible) {
	background-color: #1F2A44 !important;
	color: #FFFFFF !important;
}

/* Clear keyboard focus ring, in the rose accent. */
body.hfb-buttons :is(.wp-element-button, .wp-block-button__link, .ct-button, .mailpoet_submit, input[type="submit"], button[type="submit"]):focus-visible {
	outline: 2px solid #8E4459;
	outline-offset: 3px;
}

/* Easy to tap on phones: at least 44px tall. */
@media (max-width: 689px) {
	body.hfb-buttons :is(.wp-block-button__link, .ct-button, a.button):not(#header *):not(.ct-header *) {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: 44px;
		box-sizing: border-box;
	}
	body.hfb-buttons :is(input[type="submit"], button[type="submit"], .mailpoet_submit):not(#header *):not(.ct-header *) {
		min-height: 44px;
	}
}

/* ---------- 4. Navy footer (Settings: "Navy footer") ---------- */

body.hfb-footer #footer {
	background-color: #1F2A44 !important;
	color: #D6DAE3;
}
body.hfb-footer #footer [data-row="top"],
body.hfb-footer #footer [data-row="middle"] {
	background-color: #1F2A44 !important;
}
body.hfb-footer #footer [data-row="bottom"] {
	background-color: #18213A !important;
	border-top: 1px solid #2F3A57;
}
body.hfb-footer #footer :is(p, li, span, div, small, h2, h3, h4, h5, h6, .widget-title, .ct-footer-copyright) {
	color: #D6DAE3 !important;
}
body.hfb-footer #footer a:not(.wp-block-button__link):not(.wp-element-button):not(.ct-button) {
	color: #FFFFFF !important;
}
body.hfb-footer #footer a:not(.wp-block-button__link):not(.wp-element-button):not(.ct-button):is(:hover, :focus-visible) {
	color: #E8CFCF !important;
}
/* Buttons inside the navy footer turn blush, so they still show. */
body.hfb-buttons.hfb-footer #footer#footer :is(.wp-element-button, .wp-block-button__link, .ct-button, input[type="submit"], button[type="submit"], .mailpoet_submit) {
	background-color: #E8CFCF !important;
	border-color: #E8CFCF !important;
	color: #1F2A44 !important;
}
body.hfb-buttons.hfb-footer #footer#footer :is(.wp-element-button, .wp-block-button__link, .ct-button, input[type="submit"], button[type="submit"], .mailpoet_submit):is(:hover, :focus-visible) {
	background-color: #FFFFFF !important;
	border-color: #FFFFFF !important;
	color: #1F2A44 !important;
}

/* ---------- 5. Phone menu and search popup (Settings: "Light phone menu & search") ---------- */

body.hfb-menu #offcanvas .ct-panel-inner,
body.hfb-menu #search-modal {
	background-color: #FBF7F2 !important;
}
body.hfb-menu #offcanvas :is(.ct-menu-link, .menu a) {
	color: #1F2A44 !important;
}
body.hfb-menu #offcanvas :is(.current-menu-item, .current_page_item) > .ct-menu-link,
body.hfb-menu #offcanvas :is(.current-menu-item, .current_page_item) > a {
	color: #8E4459 !important;
}
body.hfb-menu #offcanvas .ct-menu-link:is(:hover, :focus-visible) {
	color: #8E4459 !important;
}
body.hfb-menu #offcanvas [data-id="mobile-menu"] li {
	border-color: #ECE4D9 !important;
}
body.hfb-menu :is(#offcanvas, #search-modal) .ct-toggle-close {
	color: #1F2A44 !important;
	--theme-icon-color: #1F2A44;
	--theme-icon-hover-color: #8E4459;
}
body.hfb-menu #search-modal :is(input[type="search"], .modal-field) {
	color: #1F2A44 !important;
	border-color: #1F2A44 !important;
}
body.hfb-menu #search-modal input[type="search"]::placeholder {
	color: #5E6577;
	opacity: 1;
}

/* Search buttons: navy too. Color only, so the icon button keeps its shape. */
body.hfb-buttons .ct-search-form :is(button[type="submit"], .wp-element-button) {
	background-color: #1F2A44 !important;
	border-color: #1F2A44 !important;
	color: #FFFFFF !important;
	--theme-button-text-initial-color: #FFFFFF;
	--theme-icon-color: #FFFFFF;
}
body.hfb-buttons .ct-search-form :is(button[type="submit"], .wp-element-button):is(:hover, :focus-visible) {
	background-color: #34415F !important;
	border-color: #34415F !important;
}

/* ---------- 6. Footer logo ([hollyfinds_footer_logo]) ---------- */

/* WordPress wraps the shortcode in empty paragraphs; hide them (no gap). */
#footer p:empty,
.hfb-footer-logo-wrap + p:empty {
	display: none !important;
	margin: 0 !important;
}

.hfb-footer-logo-wrap {
	width: 100%;
	text-align: center;
}
.hfb-footer-logo-wrap.hfb-align-left {
	text-align: left;
}
.hfb-footer-logo-wrap.hfb-align-right {
	text-align: right;
}
.hfb-footer-logo {
	display: inline-block;
	line-height: 0;
	margin-bottom: 10px;
}
.hfb-footer-logo img {
	display: block;
	height: auto;
	max-width: 100%;
}