/*
 * Styles for classes used in the Elementor pages, header and footer (set in Advanced → CSS Classes).
 * Colors, fonts, heading sizes and default buttons come from Elementor Site Settings.
 */

/* Section variants */
.bk-sec--tint { background-color: #fbeedd; }

.bk-sec--dark,
.bk-sec--dark .bk-on-dark,
.bk-sec--dark .bk-on-dark p { color: rgba(255, 248, 238, 0.85); }

.bk-sec--dark a { color: var(--bk-butter); }
.bk-sec--dark a:hover { color: #fff; }

/* Text helpers */
.bk-eyebrow-el p {
	margin: 0;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--bk-crust);
}

.bk-lede p { margin: 0; font-size: 1.1875rem; line-height: 1.6; }
.bk-lede p + p { margin-top: 1rem; }
.bk-small p { margin: 0; font-size: 0.9375rem; font-weight: 600; }
.bk-measure { max-width: 46rem; }

/* Cards */
.bk-card-box {
	border: 1px solid rgba(43, 26, 18, 0.12);
	border-radius: 20px;
	background: #fff;
	box-shadow: 0 18px 40px -24px rgba(43, 26, 18, 0.35);
}

.bk-card-title .elementor-heading-title { font-size: 1.375rem; }

.bk-card-el {
	padding: 2rem 1.75rem;
	border: 1px solid rgba(43, 26, 18, 0.12);
	border-radius: 20px;
	background: #fff;
}

/*
 * Equal-width, equal-height cards when the row is horizontal. Only from tablet up: in the stacked
 * mobile column, flex-basis 0 plus overflow:hidden (image cards) would collapse the cards to 0 height.
 */
@media (min-width: 768px) {
	.bk-equal > .e-con-inner > .elementor-widget,
	.bk-equal > .elementor-widget { flex: 1 1 0; align-self: stretch; }
}

.bk-card-el .elementor-icon-box-title { margin-bottom: 0.5rem; }
.bk-card-el .elementor-icon-box-description { margin: 0; font-size: 0.9875rem; line-height: 1.6; }

/* Buttons. Two-class selectors win over the kit's default button colors. */
.elementor-widget-button.bk-btn-ghost .elementor-button {
	border: 2px solid var(--bk-crust);
	background: transparent;
	color: var(--bk-crust);
}

.elementor-widget-button.bk-btn-ghost .elementor-button:hover,
.elementor-widget-button.bk-btn-ghost .elementor-button:focus {
	background: var(--bk-crust);
	color: #fff;
}

.elementor-widget-button.bk-btn-light .elementor-button { background: var(--bk-butter); color: var(--bk-cocoa); }
.elementor-widget-button.bk-btn-light .elementor-button:hover,
.elementor-widget-button.bk-btn-light .elementor-button:focus { background: #fff; color: var(--bk-cocoa); }

/* Stats strip */
.bk-stats { border-block: 1px solid rgba(43, 26, 18, 0.1); }
.bk-stats .elementor-widget-counter { flex: 1 1 140px; }
.bk-stats .elementor-counter-number-wrapper { font-family: var(--bk-font-heading); font-size: clamp(2.25rem, 1.8rem + 2vw, 3.25rem); font-weight: 600; color: var(--bk-crust); }
.bk-stats .elementor-counter-title { font-size: 0.9375rem; font-weight: 600; color: var(--bk-cocoa); }

/* About timeline */
.bk-timeline .elementor-icon-list-item { align-items: flex-start; padding-block: 0.5rem; }
.bk-timeline .elementor-icon-list-icon i,
.bk-timeline .elementor-icon-list-icon svg { font-size: 0.5rem; width: 0.5rem; color: var(--bk-crust); fill: var(--bk-crust); margin-top: 0.55em; }
.bk-timeline .elementor-icon-list-text { line-height: 1.5; }

/*
 * FAQ (Essential Addons Advanced Accordion). Prefixed with .bk-faq so these outrank EA's own
 * ".eael-adv-accordion .eael-accordion-list .eael-accordion-header" rules, including hover/active.
 */
.bk-faq .eael-adv-accordion .eael-accordion-list { margin-bottom: 0.75rem; border: 1px solid rgba(43, 26, 18, 0.12); border-radius: 14px; overflow: hidden; background: #fff; }
.bk-faq .eael-adv-accordion .eael-accordion-list .eael-accordion-header,
.bk-faq .eael-adv-accordion .eael-accordion-list .eael-accordion-header:hover,
.bk-faq .eael-adv-accordion .eael-accordion-list .eael-accordion-header.active {
	padding: 1.1rem 1.3rem;
	background: #fff;
	color: var(--bk-cocoa);
}
.bk-faq .eael-adv-accordion .eael-accordion-list .eael-accordion-header:hover { color: var(--bk-crust); }
.bk-faq .eael-adv-accordion .eael-accordion-list .eael-accordion-header.active { color: var(--bk-crust); }
.bk-faq .eael-adv-accordion .eael-accordion-tab-title { font-family: var(--bk-font-heading); font-size: 1.125rem; font-weight: 600; color: inherit; }
.bk-faq .eael-adv-accordion .eael-accordion-list .eael-accordion-content { padding: 0 1.3rem 1.1rem; border: 0; background: #fff; color: var(--bk-cocoa); }


/* Header */
.bk-header { position: relative; z-index: 20; border-bottom: 1px solid rgba(43, 26, 18, 0.1); }

/*
 * HFE's frontend.js sets an inline width on the menu's <nav> on every window resize, copied from its
 * shrink-to-fit parent; after the widget has been hidden (tablet/mobile) that is 0px and the menu
 * wraps one item per line. Keep the natural width.
 */
.bk-nav .hfe-nav-menu nav.hfe-nav-menu__layout-horizontal { width: auto !important; }

.bk-nav .hfe-nav-menu a.hfe-menu-item { font-weight: 600; color: var(--bk-cocoa); }
.bk-nav .hfe-nav-menu a.hfe-menu-item:hover,
.bk-nav .hfe-nav-menu .current-menu-item > a.hfe-menu-item { color: var(--bk-crust); }

@media (max-width: 767px) {
	.bk-header-cta { display: none; }
}

/*
 * Mobile menu: ElementsKit "Header Offcanvas" widget (.bk-offcanvas) in the header, tablet and below.
 * Its panel content (logo, menu, CTA) is edited with the widget's "Edit Content" button.
 */
.bk-offcanvas .ekit_navSidebar-button { display: grid; place-items: center; width: 44px; height: 44px; }

/*
 * Open/close motion. ElementsKit's defaults animate right/top with a 0.4s delay, a snap easing and a
 * 1.2s delay on the content; replace them with one transform/opacity slide from the right.
 * Duration comes from the widget's "Transition Duration" setting (--transition-duration).
 */
.bk-offcanvas .ekit-wid-con .ekit-sidebar-group {
	--bk-oc-time: var(--transition-duration, 0.45s);
	--bk-oc-ease: cubic-bezier(0.32, 0.72, 0, 1);
}

.bk-offcanvas .ekit-wid-con .ekit-sidebar-group .ekit-overlay {
	left: 0;
	right: 0;
	background-color: rgba(43, 26, 18, 0.45);
	cursor: pointer;
	transition: opacity var(--bk-oc-time) ease, visibility 0s linear var(--bk-oc-time);
}
.bk-offcanvas .ekit-wid-con .ekit-sidebar-group.ekit_isActive .ekit-overlay {
	transition: opacity var(--bk-oc-time) ease, visibility 0s;
}

.bk-offcanvas .ekit-wid-con .ekit-sidebar-group .ekit-sidebar-widget {
	right: 0;
	opacity: 1;
	transform: translate3d(100%, 0, 0);
	transition: transform var(--bk-oc-time) var(--bk-oc-ease), visibility 0s linear var(--bk-oc-time);
	will-change: transform;
}
.bk-offcanvas .ekit-wid-con .ekit-sidebar-group.ekit_isActive .ekit-sidebar-widget {
	transform: none;
	transition: transform var(--bk-oc-time) var(--bk-oc-ease), visibility 0s;
}

/* Content follows the panel in with a short fade-up instead of arriving 1.2s later. */
.bk-offcanvas .ekit-wid-con .ekit-sidebar-group .ekit_sidebar-widget-container {
	top: 0;
	visibility: visible;
	opacity: 0;
	transform: translate3d(0, 12px, 0);
	transition: opacity 0.2s ease, transform 0.2s ease;
}
.bk-offcanvas .ekit-wid-con .ekit-sidebar-group.ekit_isActive .ekit_sidebar-widget-container {
	opacity: 1;
	transform: none;
	transition: opacity var(--bk-oc-time) ease 0.1s, transform var(--bk-oc-time) var(--bk-oc-ease) 0.1s;
}

@media (prefers-reduced-motion: reduce) {
	.bk-offcanvas .ekit-wid-con .ekit-sidebar-group { --bk-oc-time: 0.01s; }
}

/* Below the WordPress admin bar when logged in (the header's z-index keeps the panel under it). */
body.admin-bar .bk-offcanvas .ekit-sidebar-widget { top: var(--wp-admin--admin-bar--height, 0px); }

/*
 * Close button: a round outline button, centered on the logo row (logo: 38px tall, 16px from the top).
 * Icon, colors and hover colors are set in the widget (Style → Closed).
 */
.bk-offcanvas .ekit-wid-con .ekit-sidebar-group .ekit_widget-heading { float: none; padding: 0; }
.bk-offcanvas .ekit-wid-con .ekit_close-side-widget {
	display: grid;
	place-items: center;
	top: 15px;
	right: 16px;
	width: 40px;
	height: 40px;
	border-color: rgba(43, 26, 18, 0.18);
	line-height: 1;
	transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.bk-mmenu { min-height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px)); }

.bk-mmenu__logo { margin-inline: -16px; padding: 4px 16px 12px; border-bottom: 1px solid rgba(43, 26, 18, 0.1); }
/* Full-bleed divider: outranks Elementor's ".elementor.elementor .e-con > .elementor-widget { max-width: 100% }". */
.bk-mmenu.e-con > .elementor-widget.bk-mmenu__logo { max-width: none; }
/* ElementsKit sizes every svg in the panel to 1em; restore the logo mark's size. */
.bk-mmenu__logo .bk-brand__mark { width: 38px; height: 38px; }

/* Item padding is set in the nav widget (Style → Menu Item). */
.bk-mmenu__nav .hfe-nav-menu li + li { border-top: 1px solid rgba(43, 26, 18, 0.08); }
.bk-mmenu__nav .hfe-nav-menu a.hfe-menu-item {
	font-family: var(--bk-font-heading);
	font-size: 1.75rem;
	font-weight: 600;
	line-height: 1.2;
	color: var(--bk-cocoa);
	background: transparent;
}
.bk-mmenu__nav .hfe-nav-menu a.hfe-menu-item:hover,
.bk-mmenu__nav .hfe-nav-menu .current-menu-item > a.hfe-menu-item { color: var(--bk-crust); }

/* CTA pinned to the bottom of the panel. */
.bk-mmenu__cta { margin-top: auto; }
.bk-mmenu__cta .elementor-button { padding-block: 16px; font-size: 1rem; }

/* Footer */
.bk-footer-links .elementor-icon-list-item a { color: rgba(255, 248, 238, 0.85); }
.bk-footer-links .elementor-icon-list-item a:hover { color: #fff; }
.bk-copyright { margin-top: 1rem; padding-top: 1.5rem; border-top: 1px solid rgba(255, 248, 238, 0.15); }
.bk-copyright .hfe-copyright-wrapper,
.bk-copyright .hfe-copyright-wrapper a { font-size: 0.875rem; color: rgba(255, 248, 238, 0.7); }

/* Photo hero (Home): text sits on a dark gradient over the photo */
.bk-hero--photo .bk-eyebrow-el p { color: var(--bk-butter); }
.bk-hero--photo .bk-lede p { color: rgba(255, 248, 238, 0.9); }

.elementor-widget-button.bk-btn-ghost-light .elementor-button {
	border: 2px solid rgba(255, 248, 238, 0.8);
	background: transparent;
	color: var(--bk-cream);
}

.elementor-widget-button.bk-btn-ghost-light .elementor-button:hover,
.elementor-widget-button.bk-btn-ghost-light .elementor-button:focus {
	border-color: var(--bk-cream);
	background: var(--bk-cream);
	color: var(--bk-cocoa);
}

/* Photos placed with the Image widget */
.bk-photo img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 24px;
	box-shadow: 0 24px 48px -28px rgba(43, 26, 18, 0.55);
}

/* Image Box cards ("How we bake"): full-bleed photo on top, text padded below. */
.bk-card-el.bk-image-card { padding: 0; overflow: hidden; }
.bk-image-card .elementor-image-box-wrapper .elementor-image-box-img { width: 100%; margin: 0; }
.bk-image-card .elementor-image-box-img img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 0;
}
.bk-image-card .elementor-image-box-content { padding: 1.5rem 1.6rem 1.75rem; }
.bk-image-card .elementor-image-box-title { margin: 0 0 0.5rem; color: var(--bk-crust); }
.bk-image-card .elementor-image-box-description { margin: 0; font-size: 0.9875rem; line-height: 1.6; }

/* Logo ([bakestik_logo]): loaf mark + Fraunces wordmark + small tracked tagline */
/* Two-class selectors: Elementor Site Settings link colors (.elementor-kit-N a) would otherwise win. */
.bk-brand.bk-brand--dark,
.bk-brand.bk-brand--light {
	display: inline-flex;
	align-items: center;
	gap: 0.65rem;
	color: var(--bk-crust);
	text-decoration: none;
}

.bk-brand.bk-brand--dark:hover,
.bk-brand.bk-brand--dark:focus { color: var(--bk-crust); }

.bk-brand__mark {
	flex: none;
	width: 46px;
	height: 46px;
	transition: transform 0.35s ease;
}

.bk-brand:hover .bk-brand__mark { transform: rotate(-6deg) scale(1.04); }

.bk-brand__text { display: flex; flex-direction: column; line-height: 1; }

.bk-brand__name {
	font-family: var(--bk-font-heading);
	font-size: 1.875rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1;
}

.bk-brand__tag {
	margin-top: 0.3rem;
	font-family: var(--bk-font-body);
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.24em;
	white-space: nowrap;
	text-transform: uppercase;
	color: var(--bk-cocoa);
	opacity: 0.75;
}

.bk-brand.bk-brand--light,
.bk-brand.bk-brand--light:hover,
.bk-brand.bk-brand--light:focus { color: var(--bk-cream); }
.bk-brand--light .bk-brand__tag { color: var(--bk-butter); opacity: 1; }

@media (max-width: 767px) {
	.bk-brand__mark { width: 38px; height: 38px; }
	.bk-brand__name { font-size: 1.5rem; }
	.bk-brand__tag { font-size: 0.5625rem; letter-spacing: 0.2em; }
}

@media (prefers-reduced-motion: reduce) {
	.bk-brand__mark { transition: none; }
	.bk-brand:hover .bk-brand__mark { transform: none; }
}

/* Header button stays on one line when the header gets narrow (tablet). */
.bk-header-cta .elementor-button { white-space: nowrap; }