/**
 * GluJoy — mobile app shell + homepage SEO title.
 * Desktop unchanged; mobile (≤1024 / ≤767) feels like a native app.
 */

/* ========== Homepage SEO H1 (desktop + mobile) ========== */
.gj-home-seo-title {
	max-width: var(--global-content-width, 1290px);
	margin: 0 auto;
	padding: 1.15rem var(--global-content-edge-padding, 1.25rem) 0.35rem;
	box-sizing: border-box;
}

.gj-home-h1 {
	margin: 0 !important;
	font-family: "DM Serif Display", Georgia, "Times New Roman", serif !important;
	font-size: clamp(1.55rem, 2.8vw, 2.05rem) !important;
	font-weight: 400 !important;
	line-height: 1.2 !important;
	letter-spacing: -0.015em !important;
	color: #1a1a1a !important;
	text-transform: none !important;
}

.gj-home-seo-sub {
	margin: 0.35rem 0 0 !important;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
	font-size: 0.95rem !important;
	line-height: 1.45 !important;
	color: #6a6660 !important;
	max-width: 36rem;
}

/* ========== Desktop: hide app tab bar ========== */
.gj-app-tabbar {
	display: none;
}

/* =========================================================
   APP SHELL — tablets & phones
   ========================================================= */
@media (max-width: 1024px) {
	html {
		-webkit-text-size-adjust: 100%;
		scroll-behavior: smooth;
	}

	body.gj-has-app-shell {
		-webkit-tap-highlight-color: transparent;
		overscroll-behavior-y: contain;
		background: #f3f1ed !important;
	}

	/* Compact header that scrolls naturally with the page. */
	body.gj-has-app-shell #masthead {
		position: static !important;
		top: auto !important;
		z-index: 300 !important;
		background: #ffffff !important;
		backdrop-filter: none !important;
		-webkit-backdrop-filter: none !important;
		border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
		box-shadow: none !important;
		padding-top: 0 !important;
	}

	body.gj-has-app-shell #masthead .site-header-inner,
	body.gj-has-app-shell #masthead .site-main-header-wrap {
		min-height: 52px !important;
	}

	/* Room for bottom tab bar */
	body.gj-has-app-shell {
		padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
	}

	/* Bottom tab bar — app navigation */
	.gj-app-tabbar {
		display: grid !important;
		grid-template-columns: repeat(5, minmax(0, 1fr));
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 400;
		height: calc(64px + env(safe-area-inset-bottom, 0px));
		padding: 5px 8px calc(5px + env(safe-area-inset-bottom, 0px));
		background: rgba(255, 255, 255, 0.95);
		backdrop-filter: saturate(1.25) blur(14px);
		-webkit-backdrop-filter: saturate(1.25) blur(14px);
		border-top: 1px solid rgba(37, 68, 62, 0.1);
		box-shadow: 0 -10px 32px rgba(30, 25, 15, 0.1);
		box-sizing: border-box;
	}

	.gj-app-tabbar__item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 3px;
		min-height: 48px;
		padding: 4px;
		text-decoration: none !important;
		color: #77726e !important;
		font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif;
		box-shadow: none !important;
		border: 0 !important;
		border-radius: 14px;
		transition: color 0.18s ease, background 0.18s ease, transform 0.18s ease;
		-webkit-tap-highlight-color: transparent;
	}

	.gj-app-tabbar__item:nth-child(1) {
		--gj-tab-color: #3d998e;
		--gj-tab-bg: #e9f5f2;
	}

	.gj-app-tabbar__item:nth-child(2) {
		--gj-tab-color: #6f9954;
		--gj-tab-bg: #edf5e8;
	}

	.gj-app-tabbar__item:nth-child(3) {
		--gj-tab-color: #c7902a;
		--gj-tab-bg: #fcf3da;
	}

	.gj-app-tabbar__item:nth-child(4) {
		--gj-tab-color: #5277b8;
		--gj-tab-bg: #edf1fa;
	}

	.gj-app-tabbar__item:nth-child(5) {
		--gj-tab-color: #d56b5d;
		--gj-tab-bg: #faecea;
	}

	.gj-app-tabbar__item:active {
		background: var(--gj-tab-bg);
		transform: translateY(1px);
	}

	.gj-app-tabbar__item:focus-visible {
		outline: 2px solid var(--gj-tab-color);
		outline-offset: -2px;
	}

	.gj-app-tabbar__item.is-active {
		color: var(--gj-tab-color) !important;
		background: var(--gj-tab-bg);
	}

	.gj-app-tabbar__icon {
		display: flex;
		line-height: 0;
		color: var(--gj-tab-color);
		opacity: 0.76;
		transition: opacity 0.18s ease, transform 0.18s ease;
	}

	.gj-app-tabbar__item.is-active .gj-app-tabbar__icon {
		opacity: 1;
		transform: translateY(-1px);
	}

	.gj-app-tabbar__label {
		font-size: 10px;
		font-weight: 600;
		letter-spacing: 0.04em;
		text-transform: uppercase;
		line-height: 1.2;
	}

	.gj-app-tabbar__item.is-active .gj-app-tabbar__label {
		font-weight: 800;
		color: var(--gj-tab-color);
	}

	/* Leaderboard ad: compact app banner */
	.gj-ad-slot--leaderboard {
		padding: 0.65rem 0.85rem !important;
	}

	.gj-ad-slot--leaderboard .gj-ad-slot__label {
		font-size: 9px !important;
	}
}

/* =========================================================
   PHONE — dense app feed (≤767)
   ========================================================= */
@media (max-width: 767px) {
	/* Minimal, non-sticky mobile brand header. */
	body.gj-has-app-shell #mobile-header .site-container {
		padding-top: 8px !important;
		padding-bottom: 8px !important;
	}

	body.gj-has-app-shell #mobile-header .site-main-header-inner-wrap,
	body.gj-has-app-shell #mobile-header .site-header-section,
	body.gj-has-app-shell #mobile-header .site-header-item {
		min-height: 48px !important;
		height: 48px !important;
	}

	body.gj-has-app-shell #mobile-header .mobile-site-branding {
		width: 48px !important;
		height: 48px !important;
	}

	body.gj-has-app-shell #mobile-header .mobile-site-branding .brand {
		display: block !important;
		width: 48px !important;
		height: 48px !important;
		background: url("../images/glujoy-mobile-icon.png") center / contain no-repeat;
	}

	body.gj-has-app-shell #mobile-header .mobile-site-branding .custom-logo {
		width: 48px !important;
		height: 48px !important;
		opacity: 0 !important;
	}

	/* Kill horizontal scroll jank */
	body.home,
	body.page-id-2,
	body.gj-has-app-shell {
		overflow-x: hidden !important;
	}

	body.home .site,
	body.page-id-2 .site,
	body.home .content-area,
	body.page-id-2 .content-area,
	body.home .site-main,
	body.page-id-2 .site-main {
		max-width: 100vw !important;
		overflow-x: hidden !important;
	}

	/* SEO title as app screen header */
	.gj-home-seo-title {
		padding: 0.85rem 1rem 0.25rem !important;
	}

	.gj-home-h1 {
		font-size: 1.45rem !important;
		line-height: 1.18 !important;
	}

	.gj-home-seo-sub {
		font-size: 0.88rem !important;
		color: #7a756e !important;
	}

	/* Page tint like app canvas */
	body.home .content-area,
	body.page-id-2 .content-area,
	body.home .site-main,
	body.page-id-2 .site-main {
		background: #f3f1ed !important;
	}

	body.home .entry-content.single-content,
	body.page-id-2 .entry-content.single-content {
		padding-bottom: 1.5rem !important;
	}

	/* —— AR Latest → stacked app cards —— */
	.gj-ar-latest {
		padding: 0.5rem 0 0.75rem !important;
		background: transparent !important;
		border-bottom: 0 !important;
	}

	.gj-ar-latest__inner {
		display: flex !important;
		flex-direction: column !important;
		gap: 0.85rem !important;
		padding: 0 0.85rem !important;
	}

	.gj-ar-latest__feature {
		background: #ffffff !important;
		border-radius: 16px !important;
		overflow: hidden !important;
		box-shadow: 0 8px 28px rgba(30, 25, 15, 0.07) !important;
		border: 1px solid rgba(0, 0, 0, 0.04) !important;
	}

	.gj-ar-latest__feature-media {
		aspect-ratio: 16 / 10 !important;
		border-radius: 0 !important;
	}

	.gj-ar-latest__feature-body {
		padding: 0.95rem 1rem 1.1rem !important;
		max-width: none !important;
	}

	.gj-ar-latest__feature-title {
		font-size: 1.35rem !important;
		line-height: 1.22 !important;
	}

	.gj-ar-latest__feature-deck {
		font-size: 0.92rem !important;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.gj-ar-latest__rail {
		background: #ffffff !important;
		border-radius: 16px !important;
		padding: 0.85rem 1rem 0.5rem !important;
		box-shadow: 0 8px 28px rgba(30, 25, 15, 0.07) !important;
		border: 1px solid rgba(0, 0, 0, 0.04) !important;
	}

	.gj-ar-latest__rail-title {
		font-size: 1.2rem !important;
		margin-bottom: 0.35rem !important;
		padding-bottom: 0.45rem !important;
		border-bottom-width: 2px !important;
	}

	.gj-ar-latest__item-link {
		grid-template-columns: 64px minmax(0, 1fr) !important;
		gap: 0.75rem !important;
		padding: 0.75rem 0 !important;
		min-height: 44px;
	}

	.gj-ar-latest__item-thumb {
		width: 64px !important;
		height: 64px !important;
		border-radius: 10px !important;
		overflow: hidden !important;
	}

	.gj-ar-latest__item-title {
		font-size: 0.95rem !important;
		font-weight: 700 !important;
	}

	.gj-ar-latest__more {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		min-height: 44px !important;
		padding: 0.55rem 1rem !important;
		margin: 0.35rem 0 0.65rem !important;
		border-radius: 999px !important;
		background: #f0f7f5 !important;
		color: #3d998e !important;
		font-weight: 700 !important;
		font-size: 12px !important;
		letter-spacing: 0.06em !important;
		text-transform: uppercase !important;
	}

	/* —— Section cards: full-bleed app panels —— */
	.home .kb-row-layout-id2_baede6-bf,
	.home .kb-row-layout-id2_f3c1a2-85,
	.home .kb-row-layout-id2_02a718-a1,
	.home .kb-row-layout-id2_ef3d7b-c8,
	.page-id-2 .kb-row-layout-id2_baede6-bf,
	.page-id-2 .kb-row-layout-id2_f3c1a2-85,
	.page-id-2 .kb-row-layout-id2_02a718-a1,
	.page-id-2 .kb-row-layout-id2_ef3d7b-c8 {
		padding-left: 0.85rem !important;
		padding-right: 0.85rem !important;
		padding-top: 0.45rem !important;
		padding-bottom: 0.45rem !important;
	}

	.home .kb-row-layout-id2_baede6-bf > .kt-row-column-wrap,
	.home .kb-row-layout-id2_f3c1a2-85 > .kt-row-column-wrap,
	.home .kb-row-layout-id2_02a718-a1 > .kt-row-column-wrap,
	.home .kb-row-layout-id2_ef3d7b-c8 > .kt-row-column-wrap,
	.page-id-2 .kb-row-layout-id2_baede6-bf > .kt-row-column-wrap,
	.page-id-2 .kb-row-layout-id2_f3c1a2-85 > .kt-row-column-wrap,
	.page-id-2 .kb-row-layout-id2_02a718-a1 > .kt-row-column-wrap,
	.page-id-2 .kb-row-layout-id2_ef3d7b-c8 > .kt-row-column-wrap {
		border-radius: 16px !important;
		padding: 1.15rem 0.95rem 1.25rem !important;
		box-shadow: 0 8px 28px rgba(30, 25, 15, 0.06) !important;
	}

	/* Recent Recipes uses the same rounded app-card rhythm as the other visible panels. */
	.home .kb-row-layout-id2_42c82f-ed,
	.page-id-2 .kb-row-layout-id2_42c82f-ed {
		width: auto !important;
		max-width: none !important;
		margin: 0.45rem 0.85rem !important;
		padding: 1.15rem 0.95rem 1.35rem !important;
		border-radius: 16px !important;
		background: #ffffff !important;
		box-shadow: 0 8px 28px rgba(30, 25, 15, 0.06) !important;
		overflow: hidden !important;
	}

	/* Section titles — app header size */
	.home .kb-row-layout-wrap h2.wp-block-kadence-advancedheading,
	.page-id-2 .kb-row-layout-wrap h2.wp-block-kadence-advancedheading {
		font-size: 1.35rem !important;
		margin-bottom: 0.85rem !important;
		line-height: 1.2 !important;
	}

	/* Recipe cards — single column, large touch targets */
	.home .kb-posts,
	.page-id-2 .kb-posts {
		display: grid !important;
		grid-template-columns: 1fr !important;
		gap: 1.15rem !important;
	}

	/* 2-col grids collapse to 1 for thumb comfort */
	.home .kb-posts.grid-sm-col-2,
	.home .kb-posts.grid-cols,
	.page-id-2 .kb-posts.grid-sm-col-2 {
		grid-template-columns: 1fr !important;
	}

	.home .kb-posts .loop-entry,
	.page-id-2 .kb-posts .loop-entry {
		background: transparent !important;
	}

	.home .kb-posts .loop-entry .post-thumbnail,
	.page-id-2 .kb-posts .loop-entry .post-thumbnail {
		border-radius: 14px !important;
		overflow: hidden !important;
		box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08) !important;
	}

	.home .kb-posts .loop-entry .entry-title,
	.home .kb-posts .loop-entry .entry-title a,
	.page-id-2 .kb-posts .loop-entry .entry-title,
	.page-id-2 .kb-posts .loop-entry .entry-title a {
		font-size: 1.1rem !important;
		line-height: 1.3 !important;
		font-weight: 600 !important;
	}

	.home .kb-posts .loop-entry > .entry-content-wrap,
	.page-id-2 .kb-posts .loop-entry > .entry-content-wrap {
		padding: 0.7rem 0.15rem 0.15rem !important;
	}

	/* Category badges larger for touch */
	.home .kb-posts .entry-taxonomies a,
	.page-id-2 .kb-posts .entry-taxonomies a {
		font-size: 10px !important;
		letter-spacing: 0.06em !important;
	}

	/* Browse / view-all buttons as pills */
	.home .kb-button,
	.home .wp-block-kadence-advancedbtn .kb-button,
	.page-id-2 .wp-block-kadence-advancedbtn .kb-button {
		min-height: 40px !important;
		padding: 0.5rem 0.85rem !important;
		font-size: 11px !important;
		border-radius: 999px !important;
	}

	/* Category gallery — horizontal app scroller */
	.home .kb-gallery-wrap-id-2_2be01c-99 .kb-gallery-ul,
	.home .kb-gallery-type-grid .kb-gallery-ul {
		display: flex !important;
		flex-wrap: nowrap !important;
		overflow-x: auto !important;
		overflow-y: hidden !important;
		gap: 0.75rem !important;
		padding: 0.25rem 0.15rem 0.65rem !important;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.home .kb-gallery-wrap-id-2_2be01c-99 .kb-gallery-ul::-webkit-scrollbar {
		display: none;
	}

	.home .kb-gallery-wrap-id-2_2be01c-99 .kadence-blocks-gallery-item,
	.home .kb-gallery-wrap-id-2_2be01c-99 .kb-gallery-ul > li {
		flex: 0 0 42% !important;
		max-width: 42% !important;
		scroll-snap-align: start;
		list-style: none !important;
	}

	/* Midpage ad — compact card */
	.gj-ad-slot--midpage {
		margin: 0.5rem 0.85rem !important;
		padding: 0.85rem 0.75rem !important;
		border-radius: 14px !important;
		border: 1px solid #e8e4dc !important;
		width: auto !important;
		box-sizing: border-box !important;
	}

	.gj-ad-default-image {
		border-radius: 10px !important;
		min-height: 100px !important;
	}

	.gj-ad-default-image__headline {
		font-size: 1.05rem !important;
	}

	/* Newsletter card — full width app card */
	.home .kadence-column2_ec37cd-c9,
	.home .kadence-column2_ee7cd5-30,
	.page-id-2 .kadence-column2_ec37cd-c9,
	.page-id-2 .kadence-column2_ee7cd5-30 {
		max-width: calc(100% - 1.7rem) !important;
	}

	.home .kadence-column2_ec37cd-c9,
	.page-id-2 .kadence-column2_ec37cd-c9 {
		border-radius: 16px 16px 0 0 !important;
		padding: 1.5rem 1.1rem 0.4rem !important;
	}

	.home .kadence-column2_ee7cd5-30,
	.page-id-2 .kadence-column2_ee7cd5-30 {
		border-radius: 0 0 16px 16px !important;
		padding: 0.55rem 1.1rem 1.35rem !important;
	}

	.home .kadence-column2_ec37cd-c9 .kt-adv-heading2_d221fb-8f,
	.home .kadence-column2_ec37cd-c9 h3 {
		font-size: 1.55rem !important;
	}

	.home .kadence-column2_ee7cd5-30 .mailerpress-optin-form__field input,
	.home .kadence-column2_ee7cd5-30 .mailerpress-optin-form__submit button {
		height: 48px !important;
		min-height: 48px !important;
		font-size: 16px !important; /* prevents iOS zoom */
		border-radius: 12px !important;
	}

	/* Meet GluJoy / about — app panel */
	.home .kb-row-layout-id2_e293e4-64,
	.page-id-2 .kb-row-layout-id2_e293e4-64 {
		width: 100% !important;
		max-width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding: 1.25rem 0.95rem !important;
	}

	/* Featured-in logos: horizontal scroll strip */
	.home .kb-gallery-wrap-id-2_e65687-02 .kb-gallery-ul,
	.home .kb-gallery-wrap-id-2_e65687-02 .kb-gallery-type-carousel .kb-gallery-ul {
		display: flex !important;
		flex-wrap: nowrap !important;
		overflow-x: auto !important;
		gap: 1.25rem !important;
		padding: 0.5rem 0.25rem !important;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.home .kb-gallery-wrap-id-2_e65687-02 .kb-gallery-ul::-webkit-scrollbar {
		display: none;
	}

	.home .kb-gallery-wrap-id-2_e65687-02 .kadence-blocks-gallery-item,
	.home .kb-gallery-wrap-id-2_e65687-02 li {
		flex: 0 0 auto !important;
	}

	.home .kb-gallery-wrap-id-2_e65687-02 img {
		max-height: 28px !important;
		max-width: 90px !important;
	}

	/* As featured label */
	.home .kt-adv-heading2_8806ab-05 {
		font-size: 13px !important;
		white-space: nowrap;
	}

	/* Remove promotional widgets, carousels, and selected sections from the compact mobile feed. */
	body.home .gj-ad-slot,
	body.home .kb-row-layout-id2_f3c1a2-85,
	body.home .kb-row-layout-id2_02a718-a1,
	body.home .kb-row-layout-id2_e293e4-64,
	body.home .kb-row-layout-id2_ef3d7b-c8,
	body.home .kb-row-layout-id2_7bd058-2f,
	body.home .kadence-column2_ec37cd-c9,
	body.home .kadence-column2_ee7cd5-30,
	body.gj-has-app-shell .gj-ar-footer-newsletter {
		display: none !important;
	}

	/* The app-style mobile view uses the bottom content tabs instead. */
	body.gj-has-app-shell .site-footer,
	body.gj-has-app-shell #colophon {
		display: none !important;
	}

	/* Mid-featured posts row: tighter */
	.home .kb-row-layout-id2_baede6-bf > .kt-row-column-wrap {
		padding-top: 1rem !important;
	}
}

/* Prefer reduced motion */
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	.gj-ar-latest__feature-media img {
		transition: none !important;
	}
}