/* ==========================================================================
   Aros Hundesalon – custom styles
   Colors and fonts are set in Elementor › Site Settings (Global Colors/Fonts).
   The variables below mirror them for use in custom CSS.
   Add the helper classes via Elementor › Advanced › CSS Classes.
   ========================================================================== */

:root {
	--aros-primary: #5a1f3d;
	--aros-primary-dark: #4a1832;
	--aros-accent: #731638;
	--aros-bg: #f6ece9;
	--aros-surface: #fbf6f4;
	--aros-rose: #ecdad0;
	--aros-line: #e6d3cf;
	--aros-text: #3a2a31;
	--aros-muted: #6f5a62;
	--aros-radius: 18px;
	--aros-shadow: 0 6px 24px rgba(90, 31, 61, .08);
}

body {
	background-color: var(--aros-bg);
	color: var(--aros-text);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
	text-wrap: balance;
	hyphens: auto;
	overflow-wrap: break-word;
}

/* Card: rounded surface with soft shadow (Container › CSS Classes: aros-card) */
.aros-card {
	background: var(--aros-surface);
	border-radius: var(--aros-radius);
	box-shadow: var(--aros-shadow);
}

/* Short underline below a heading (Heading widget › CSS Classes: aros-underline) */
.aros-underline .elementor-heading-title::after {
	content: "";
	display: block;
	width: 40px;
	height: 2px;
	margin-top: 14px;
	background: var(--aros-primary);
}
.aros-underline.elementor-align-center .elementor-heading-title::after,
.aros-underline[style*="center"] .elementor-heading-title::after {
	margin-left: auto;
	margin-right: auto;
}

/* Bullet lists in a Text Editor widget
   aros-paw-list  → bordeaux paw bullets
   aros-check-list → check-circle bullets */
.aros-paw-list ul,
.aros-check-list ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.aros-paw-list li,
.aros-check-list li {
	position: relative;
	padding-left: 30px;
	margin-bottom: 10px;
}
.aros-paw-list li::before,
.aros-check-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .25em;
	width: 18px;
	height: 18px;
	background: center / contain no-repeat;
}
.aros-paw-list li::before { background-image: url("../icons/17-pote-boredeaux.png"); }
.aros-check-list li::before { background-image: url("../icons/34-ok.png"); }

/* Two-column list (desktop only) */
@media (min-width: 768px) {
	.aros-cols-2 ul { columns: 2; column-gap: 40px; }
	.aros-cols-2 li { break-inside: avoid; }
}

/* Vertical dividers between columns of a row (Container › CSS Classes: aros-dividers), desktop only */
@media (min-width: 1025px) {
	.aros-dividers > .e-con-inner > .e-con + .e-con,
	.aros-dividers > .e-con + .e-con {
		border-left: 1px solid var(--aros-line);
	}
}

/* Booking rows: highlight the row when its checkbox is ticked */
.aros-service:has(input:checked) {
	outline: 2px solid var(--aros-accent);
	background: #fff;
}

@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; scroll-behavior: auto !important; }
}

/* ==========================================================================
   Header & footer (Elementor templates "aros-header" / "aros-footer")
   ========================================================================== */

.aros-site-header {
	position: sticky;
	top: 0;
	z-index: 100;
}
.admin-bar .aros-site-header { top: 32px; }
@media (max-width: 782px) {
	.admin-bar .aros-site-header { top: 0; }
}

/* [aros_nav] menu */
.aros-nav { position: static; }
.aros-menu {
	display: flex;
	align-items: center;
	gap: 30px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.aros-menu a {
	display: block;
	padding: 6px 0;
	border-bottom: 2px solid transparent;
	color: var(--aros-text);
	font-family: "Lato", sans-serif;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-decoration: none;
	transition: color .2s, border-color .2s;
}
.aros-menu a:hover,
.aros-menu a:focus-visible { color: var(--aros-accent); }
.aros-menu .current-menu-item > a,
.aros-menu .current_page_item > a {
	color: var(--aros-primary);
	border-color: var(--aros-primary);
}

.aros-nav .aros-nav__toggle {
	display: none;
	align-items: center;
	padding: 8px;
	border: 0;
	border-radius: 6px;
	background: none;
	color: var(--aros-primary);
	cursor: pointer;
}
.aros-nav .aros-nav__toggle:hover,
.aros-nav .aros-nav__toggle:focus { background: none; color: var(--aros-accent); }

@media (max-width: 1100px) {
	.aros-menu { gap: 18px; }
}

@media (max-width: 1024px) {
	.aros-nav .aros-nav__toggle { display: inline-flex; }
	.aros-menu {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 8px 24px 20px;
		background: var(--aros-bg);
		border-bottom: 1px solid var(--aros-line);
		box-shadow: var(--aros-shadow);
	}
	.aros-menu.is-open { display: flex; }
	.aros-menu a { padding: 14px 0; border-bottom: 1px solid var(--aros-line); }
	.aros-menu .current-menu-item > a { border-color: var(--aros-line); }

	/* Header row: brand · button · toggle */
	.aros-header-nav { order: 3; position: static !important; }
	.aros-header-nav .elementor-widget-container,
	.aros-header-nav .elementor-shortcode { position: static; }
	.aros-header { position: relative; }
}

@media (max-width: 600px) {
	.aros-header { --gap: 8px; --column-gap: 8px; --row-gap: 8px; --padding-left: 12px; --padding-right: 12px; }
	.aros-nav .aros-nav__toggle { padding: 4px; }
	.aros-header-cta .elementor-button-text { display: none; }
	.aros-header-cta .elementor-button { padding: 10px 12px; }
	.aros-header-cta .elementor-button-icon { margin: 0; }
}

/* Brand block (logo + name) keeps its natural width instead of Elementor's 100% default */
.e-con.aros-brand {
	--width: auto;
	flex: 0 0 auto;
}

/* ==========================================================================
   Forside hero (container class "aros-hero")
   ========================================================================== */

/* Sundhedstjek bubble floats over the photo (container class "aros-hero-bubble") */
.aros-hero > .e-con-inner > .aros-hero-bubble,
.aros-hero > .aros-hero-bubble {
	position: absolute;
	right: 4%;
	top: 44%;
	transform: translateY(-50%);
	text-align: center;
}
.aros-hero-bubble .elementor-widget-text-editor p { margin: 0; }

/* Cards row sits above the hero photo */
.aros-hero-cards { position: relative; }

@media (max-width: 1024px) {
	.aros-hero > .e-con-inner > .aros-hero-bubble,
	.aros-hero > .aros-hero-bubble { right: 3%; top: 40%; width: 170px; }
}

/* Mobile: photo on top, fading down into the blush background */
@media (max-width: 767px) {
	.aros-hero.e-con::before {
		background-image: linear-gradient(180deg, rgba(246,236,233,0) 0, rgba(246,236,233,0) 190px, var(--aros-bg) 270px) !important;
	}
}

/* ==========================================================================
   Behandlinger (booking list)
   ========================================================================== */

.aros-service { transition: border-color .2s, background-color .2s; }
.aros-service:has(.aros-pick:checked) {
	outline: 0;
	border-color: var(--aros-accent) !important;
	background-color: #fff !important;
}
.aros-pick {
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: var(--aros-primary);
	cursor: pointer;
}
.aros-svc-name .aros-svc-sub { font-weight: 400; color: var(--aros-muted); font-size: .9em; }
.aros-service .elementor-widget-text-editor p { margin: 0; }
.aros-svc-time p { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.aros-svc-time .aros-clock { width: 18px; height: 18px; margin: 0; }
.aros-svc-price .elementor-heading-title { white-space: nowrap; }
.aros-inline-heart { display: inline-block; width: 22px; vertical-align: middle; margin-left: 4px; }

/* Summary bar */
.aros-booking-summary {
	display: none;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 14px;
	padding: 14px 18px;
	border-radius: 10px;
	background: var(--aros-primary);
	color: #fff;
	box-shadow: 0 10px 30px rgba(74, 24, 50, .3);
}
.aros-booking-summary.is-visible { display: flex; }
.aros-booking-summary strong { color: #fff; }
.aros-booking-summary-wrap { position: sticky; bottom: 16px; z-index: 5; margin-top: 8px; }
.aros-booking-send {
	padding: 10px 18px;
	border-radius: 10px;
	background: var(--aros-rose);
	color: var(--aros-primary) !important;
	font-family: "Lato", sans-serif;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	text-decoration: none;
}
.aros-booking-send:hover { background: #fff; }

/* Sidebar sticks while scrolling the long list (desktop) */
@media (min-width: 1025px) {
	.aros-booking-sidebar { position: sticky; top: 120px; }
}

/* Phone: checkbox | icon | text, with time, price and button stacked under the text */
@media (max-width: 767px) {
	.aros-service.e-con {
		display: grid !important;
		grid-template-columns: 22px 40px minmax(0, 1fr);
		grid-template-areas:
			"check icon body"
			"check icon time"
			"check icon price"
			".     .    btn";
		column-gap: 12px;
		row-gap: 6px;
		align-items: center;
	}
	.aros-service > .aros-svc-check { grid-area: check; }
	.aros-service > .aros-svc-icon  { grid-area: icon; align-self: start; }
	.aros-service > .aros-svc-body  { grid-area: body; --width: 100%; }
	.aros-service > .aros-svc-time  { grid-area: time; width: auto !important; }
	.aros-service > .aros-svc-price { grid-area: price; width: auto !important; }
	.aros-service > .aros-svc-btn   { grid-area: btn; }
	.aros-svc-btn .elementor-button { width: 100%; justify-content: center; }
}

/* Service text block takes the leftover space, so time/price/button stay inside the row */
.aros-service > .aros-svc-body.e-con {
	--width: auto;
	flex: 1 1 0;
	min-width: 0;
}

/* Container that fills the leftover space in a row (Container › CSS Classes: aros-grow) */
.e-con.aros-grow {
	--width: auto;
	flex: 1 1 0;
	min-width: 0;
}
@media (max-width: 1024px) {
	.e-con.aros-grow { flex: 1 1 auto; }
}

/* Photo that fills its row height and fades in from the left (Image widget › CSS Classes: aros-fade-left) */
.aros-fade-left,
.aros-fade-left .elementor-widget-container { height: auto; align-self: stretch; }
.aros-fade-left img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 25%);
	mask-image: linear-gradient(90deg, transparent 0, #000 25%);
}
@media (max-width: 767px) {
	.aros-fade-left img { max-height: 320px; -webkit-mask-image: none; mask-image: none; }
}

/* Centered underline (Heading › CSS Classes: aros-underline aros-underline-center) */
.aros-underline-center .elementor-heading-title::after { margin-left: auto; margin-right: auto; }

/* Photo on white background blends into the blush page (Image › CSS Classes: aros-multiply) */
.aros-multiply img { mix-blend-mode: multiply; }

/* Faded decoration in the corner of a card (Image › CSS Classes: aros-deco) */
.e-con > .aros-deco {
	position: absolute;
	right: 22px;
	bottom: 18px;
	opacity: .55;
	pointer-events: none;
}
@media (max-width: 767px) {
	.e-con > .aros-deco { display: none; }
}