/*
 * godtræ – small helpers on top of Elementor.
 *
 * Colours and fonts come from Elementor → Site Settings (Global Colors /
 * Global Fonts). The --gt-* variables below only point at those globals,
 * with the design values as fallback. Change a colour in Site Settings and
 * everything here follows.
 *
 * Global Colors (set up in step 3):
 *   Primary   #2E2D2B  ink / anthracite – headings, dark band
 *   Secondary #D3BEA3  sand – secondary sections
 *   Text      #6B6762  muted body text
 *   Accent    #A64B3A  brick – buttons, links, accents
 *   gtwhite   #FAF8F5  page background
 *   gtline    #DDD6CB  hairlines on white
 *   gtlinesand #B9A385 hairlines on sand
 *   gtph      #EDE3D4  image placeholders
 */

/* ---------- Fonts (self-hosted, OFL licensed) ---------- */
@font-face {
	font-family: "Fraunces";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/fraunces-latin-600-normal.woff2") format("woff2");
}

@font-face {
	font-family: "Italiana";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/italiana-latin-400-normal.woff2") format("woff2");
}

/* ---------- Tokens mapped to Elementor globals ---------- */
:root {
	--gt-ink: var(--e-global-color-primary, #2E2D2B);
	--gt-sand: var(--e-global-color-secondary, #D3BEA3);
	--gt-muted: var(--e-global-color-text, #6B6762);
	--gt-brick: var(--e-global-color-accent, #A64B3A);
	--gt-white: var(--e-global-color-gtwhite, #FAF8F5);
	--gt-line: var(--e-global-color-gtline, #DDD6CB);
	--gt-line-sand: var(--e-global-color-gtlinesand, #B9A385);
	--gt-ph: var(--e-global-color-gtph, #EDE3D4);

	--gt-font-logo: var(--e-global-typography-gtlogo-font-family, "Fraunces"), Georgia, serif;
	--gt-font-tantra: var(--e-global-typography-gttantra-font-family, "Italiana"), Georgia, serif;

	--gt-mobile-bar-height: 56px;
}

body {
	background-color: var(--gt-white);
	color: var(--gt-muted);
	-webkit-font-smoothing: antialiased;
}

/* ---------- Headline accent ----------
 * In any Heading widget, wrap a word in <em> to get the italic brick accent:
 *   Dit hjem. Dine idéer. <em>Skabt på mål.</em>
 * On the dark band the accent is a lighter brick for contrast.
 */
.elementor-heading-title em {
	font-style: italic;
	color: var(--gt-brick);
}

.gt-on-dark .elementor-heading-title em {
	color: #E0937F;
}

/* ---------- "Tantra sofa" name ----------
 * In a Heading or Text widget: <span class="gt-tantra">Tantra sofa</span>
 */
.gt-tantra {
	font-family: var(--gt-font-tantra);
	font-style: normal;
	font-weight: 400;
	color: var(--gt-brick);
	letter-spacing: 0.01em;
}

/* ---------- Logo wordmark (used in header/footer Heading widget) ---------- */
.gt-logo .elementor-heading-title,
.gt-logo-text {
	font-family: var(--gt-font-logo);
	font-weight: 600;
	letter-spacing: -0.035em;
	line-height: 1;
}

/* ---------- Text links inside Text Editor widgets ---------- */
.elementor-widget-text-editor a {
	color: var(--gt-brick);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---------- Hairline lists (spec rows, contact rows, service grid) ----------
 * Add class "gt-rows" to a Text Editor widget and write a simple list.
 */
.gt-rows ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.gt-rows li {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 0;
	border-top: 1px solid var(--gt-line);
}

.gt-rows li:last-child {
	border-bottom: 1px solid var(--gt-line);
}

.gt-on-sand .gt-rows li {
	border-color: var(--gt-line-sand);
}

/* On sand, secondary text switches to ink for contrast. */
.gt-on-sand .elementor-widget-text-editor,
.gt-on-sand .elementor-widget-text-editor p {
	color: var(--gt-ink);
}

/* ---------- Placeholder label on images ---------- */
.gt-ph-label {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 9px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgba(46, 45, 43, 0.55);
}

/* ---------- Language switcher [godtrae_sprog] ---------- */
.gt-lang {
	font-size: 12px;
	color: var(--gt-muted);
}

.gt-lang a {
	color: inherit;
	text-decoration: none;
}

.gt-lang a.is-current {
	color: var(--gt-ink);
	font-weight: 700;
}

/* ---------- Mobile sticky bar ----------
 * Build a Container in the footer template with CSS class "gt-mobile-bar",
 * holding two Button widgets ("Ring" and "Få tilbud"). It is fixed to the
 * bottom of the screen on mobile and hidden from tablet width upwards.
 */
.gt-mobile-bar {
	display: none !important;
}

@media (max-width: 767px) {
	.gt-mobile-bar {
		display: flex !important;
		position: fixed !important;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 999;
		width: 100% !important;
		min-height: var(--gt-mobile-bar-height);
		padding-bottom: env(safe-area-inset-bottom);
		background: var(--gt-white);
		border-top: 1px solid var(--gt-line);
	}

	.gt-mobile-bar > .elementor-element {
		flex: 1 1 50%;
	}

	.gt-mobile-bar .elementor-button {
		width: 100%;
		min-height: var(--gt-mobile-bar-height);
		justify-content: center;
		border-radius: 0;
	}

	/* Keep the bottom of every page visible above the bar. */
	body {
		padding-bottom: calc(var(--gt-mobile-bar-height) + env(safe-area-inset-bottom));
	}
}

/* Never show the fixed bar inside the Elementor editor preview frame. */
.elementor-editor-active .gt-mobile-bar {
	position: static !important;
}

/* ---------- Accessibility ---------- */
:focus-visible {
	outline: 2px solid var(--gt-brick);
	outline-offset: 3px;
}

.skip-link:focus {
	z-index: 100000;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}