/*
 * Mobile-only UX fixes for the Avada/Fusion Builder site.
 * Every rule is scoped inside @media (max-width: 800px) — Avada's own
 * configured "Small" device breakpoint (fusion_options: visibility_small).
 * Nothing here can affect layout above 800px.
 */

@media (max-width: 800px) {

	/* ------------------------------------------------------------------ *
	 * Fix #1 — Kontakt Os: contact-info icon grid stuck at 2 columns.
	 * The 4 columns (Vores lokation / Telefon / Email / Åbningstider)
	 * hardcode --awb-width-small:50% (2x2 grid). Force full-width stack
	 * and scale the oversized icons down to suit a single column.
	 * ------------------------------------------------------------------ */
	body.page-id-1150 .fusion-builder-column-5,
	body.page-id-1150 .fusion-builder-column-6,
	body.page-id-1150 .fusion-builder-column-7,
	body.page-id-1150 .fusion-builder-column-8 {
		--awb-width-small: 100% !important;
		--awb-spacing-right-small: 0 !important;
		--awb-spacing-left-small: 0 !important;
		--awb-margin-bottom-small: 30px !important;
	}

	body.page-id-1150 .fusion-builder-column-5 .fb-icon-element,
	body.page-id-1150 .fusion-builder-column-6 .fb-icon-element,
	body.page-id-1150 .fusion-builder-column-7 .fb-icon-element,
	body.page-id-1150 .fusion-builder-column-8 .fb-icon-element {
		--awb-font-size: 48px !important;
		--awb-width: 60px !important;
		--awb-height: 60px !important;
		--awb-line-height: 60px !important;
	}

	/* ------------------------------------------------------------------ *
	 * Fix #2 — Contact form privacy checkbox: tiny tap target.
	 * Enlarge the box itself and make the whole label row tappable.
	 * ------------------------------------------------------------------ */
	.fusion-form-checkbox-field .fusion-form-checkbox {
		align-items: flex-start;
		display: flex;
		gap: 12px;
	}

	.fusion-form-checkbox-field .fusion-form-checkbox input[type="checkbox"] {
		flex-shrink: 0;
		height: 26px !important;
		margin: 0 !important;
		width: 26px !important;
	}

	.fusion-form-checkbox-field .fusion-form-checkbox label {
		line-height: 1.4;
		padding-top: 3px;
	}

	/* ------------------------------------------------------------------ *
	 * Fix #3 — Blog: "Featured Posts" hero cards use a fixed 300px top
	 * padding tuned for desktop, with no responsive override. Far too
	 * tall relative to their content on a 375px screen.
	 * ------------------------------------------------------------------ */
	body.page-id-1206 .fusion-post-cards-2 .post-card {
		--awb-padding-top: 140px !important;
		--awb-padding-bottom: 30px !important;
	}

	/* ------------------------------------------------------------------ *
	 * Fix #4 — Selskaber: intro copy is markup as an <h3> Title element,
	 * so Avada's heading typography (bold + text-transform:capitalize)
	 * lands on 6+ lines of body-length text. Fine on desktop as a short
	 * 2-3 line pull quote; heavy on a single mobile column. Normalize to
	 * body-text weight/case only below 800px — desktop untouched.
	 * ------------------------------------------------------------------ */
	body.page-id-878 .fusion-title-4 .fusion-title-heading {
		font-weight: 400 !important;
		text-transform: none !important;
	}

	/* ------------------------------------------------------------------ *
	 * Fix #7 — Sitewide: social icon tap targets are ~16-24px effective,
	 * under the ~44px recommended minimum. Applies wherever the Avada
	 * "Social Links" element appears (footers, contact/about sections).
	 * ------------------------------------------------------------------ */
	.fusion-social-links .fusion-social-network-icon {
		height: 44px !important;
		width: 44px !important;
	}

	.fusion-social-links .fusion-social-network-icon:before {
		font-size: 18px !important;
	}

	/* ------------------------------------------------------------------ *
	 * Fix #8 — Tapas Fredag: uneven vertical rhythm between menu items
	 * with vs. without a description line. Give the recurring section
	 * separator graphic consistent breathing room so each item block
	 * reads as an even-height row regardless of description length.
	 * ------------------------------------------------------------------ */
	body.page-id-2216 .fusion-image-element:has(img[alt="Light Section Separator"]) {
		margin-bottom: 22px !important;
		margin-top: 22px !important;
	}

	/* ------------------------------------------------------------------ *
	 * Fix #9 — Sitewide: section-to-section spacing hardcoded at desktop
	 * values (80-100px margin/padding on the full-width section wrapper)
	 * with no mobile override at all — same gap on a 375px phone as on a
	 * 1440px desktop. This is the single biggest contributor to pages
	 * feeling loosely/inconsistently spaced on mobile: ~100 instances of
	 * literal 80-100px section gaps across all 16 pages. Matched by exact
	 * inline-style value so only genuinely oversized gaps are touched —
	 * sections that were already given a smaller value are left alone.
	 * ------------------------------------------------------------------ */
	.fusion-fullwidth[style*="--awb-margin-top:100px"] { --awb-margin-top: 48px !important; }
	.fusion-fullwidth[style*="--awb-margin-bottom:100px"] { --awb-margin-bottom: 48px !important; }
	.fusion-fullwidth[style*="--awb-padding-top:100px"] { --awb-padding-top: 48px !important; }
	.fusion-fullwidth[style*="--awb-padding-bottom:100px"] { --awb-padding-bottom: 48px !important; }
	.fusion-fullwidth[style*="--awb-margin-top:90px"] { --awb-margin-top: 44px !important; }
	.fusion-fullwidth[style*="--awb-margin-top:80px"] { --awb-margin-top: 40px !important; }
	.fusion-fullwidth[style*="--awb-margin-bottom:80px"] { --awb-margin-bottom: 40px !important; }
	.fusion-fullwidth[style*="--awb-padding-bottom:100px"] { --awb-padding-bottom: 48px !important; }

	/* ------------------------------------------------------------------ *
	 * Fix #10 — Sitewide: oversized decorative icons with no mobile size.
	 * Fusion Builder supports a per-breakpoint icon size, but these were
	 * only ever configured for desktop, so mobile inherits the full-size
	 * desktop value verbatim. Matched by exact inline-style value so only
	 * the specific oversized presets are touched, never a small icon that
	 * was already sized correctly for its context.
	 * ------------------------------------------------------------------ */
	/* Plain glyph icons at 120px (no circle background) — 27 instances across the 9 catering-package pages */
	[style*="--awb-font-size:120px"] {
		--awb-font-size: 48px !important;
	}

	/* "circle-yes" boxed icons at a ~98.56px circle / 49.28px glyph — home page feature icons */
	[style*="--awb-width:98.56px"] {
		--awb-width: 64px !important;
		--awb-height: 64px !important;
		--awb-line-height: 64px !important;
		--awb-font-size: 32px !important;
	}

	/* ------------------------------------------------------------------ *
	 * Fix #11 — Buffeter hub: the 4-item buffet gallery row was built as
	 * a 5-column layout (20% each on desktop). The first 2 columns were
	 * given a 50% mobile width (pairing them 2-up correctly); the last 2
	 * were left at their default 100%, so they fall out of the grid and
	 * render full-width, alone, each twice the size of the first two.
	 * Match them to 50% so all 4 form a clean 2x2 grid.
	 * ------------------------------------------------------------------ */
	body.postid-2386 .fusion-builder-nested-column-11,
	body.postid-2386 .fusion-builder-nested-column-12 {
		--awb-width-small: 50% !important;
	}

}