/* ==========================================================================
   Howl Core — mobile-first styles for the trip finder, cards and testimonials.
   Change the brand in one place: the tokens below. Elementor's Site Settings
   (Global Colors / Fonts) can reuse the same hex values.
   ========================================================================== */

:root {
	--howl-night: #1f2a44;      /* midnight blue: headings, dark sections   */
	--howl-moon: #f6f1e7;       /* moonlight cream: soft section background */
	--howl-ember: #b35c12;      /* campfire amber: primary buttons (AA on white text) */
	--howl-ember-dark: #8f4a0e;
	--howl-forest: #2f5d50;     /* forest green: badges, accents            */
	--howl-ink: #1d1f24;        /* body text                                */
	--howl-muted: #5b6170;      /* secondary text                           */
	--howl-line: #e3ddd1;       /* borders                                  */
	--howl-white: #ffffff;
	--howl-radius: 12px;
	--howl-shadow: 0 1px 2px rgba(31, 42, 68, 0.06), 0 8px 24px rgba(31, 42, 68, 0.08);
	--howl-gap: clamp(16px, 3vw, 28px);
}

/* Most themes set this globally; repeated here so the components never overflow. */
.howl-finder, .howl-finder *, .howl-btn, .howl-cards *, .howl-quotes *, .howl-empty { box-sizing: border-box; }

/* ---------- Buttons ---------- */
:where(.howl-btn) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;           /* comfortable tap target */
	padding: 12px 22px;
	border: 2px solid transparent;
	border-radius: 999px;
	font: inherit;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
:where(.howl-btn--primary) { background: var(--howl-ember); color: var(--howl-white); }
:where(.howl-btn--primary):hover,
:where(.howl-btn--primary):focus-visible { background: var(--howl-ember-dark); color: var(--howl-white); }
:where(.howl-btn--secondary) { background: transparent; color: var(--howl-night); border-color: var(--howl-night); }
:where(.howl-btn--secondary):hover,
:where(.howl-btn--secondary):focus-visible { background: var(--howl-night); color: var(--howl-white); }
.howl-btn:focus-visible,
.howl-finder__select:focus-visible { outline: 3px solid var(--howl-ember); outline-offset: 2px; }

/* ---------- Trip finder (hero search) ---------- */
.howl-finder {
	display: grid;
	gap: 12px;
	width: 100%;
	max-width: 960px;
	margin-inline: auto;
	padding: 16px;
	background: var(--howl-white);
	border-radius: var(--howl-radius);
	box-shadow: var(--howl-shadow);
	text-align: left;
}
.howl-finder__field { display: grid; gap: 4px; }
.howl-finder__label {
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--howl-muted);
}
.howl-finder__select {
	width: 100%;
	min-height: 48px;
	padding: 10px 40px 10px 12px;
	border: 1px solid var(--howl-line);
	border-radius: 8px;
	background: var(--howl-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231f2a44' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 14px center;
	color: var(--howl-ink);
	font: inherit;
	font-size: 1rem;            /* 16px stops iOS from zooming in */
	-webkit-appearance: none;
	appearance: none;
}
.howl-finder__submit { width: 100%; }

@media (min-width: 768px) {
	.howl-finder {
		grid-template-columns: repeat(3, 1fr) auto;
		align-items: end;
		padding: 20px;
	}
	.howl-finder__submit { width: auto; }
}

/* ---------- Destination cards ---------- */
.howl-cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--howl-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}
@media (min-width: 640px)  { .howl-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .howl-cards { grid-template-columns: repeat(3, 1fr); } }

.howl-card {
	display: flex;
	flex-direction: column;
	margin: 0;
	overflow: hidden;
	background: var(--howl-white);
	border: 1px solid var(--howl-line);
	border-radius: var(--howl-radius);
	box-shadow: var(--howl-shadow);
}
.howl-card__media {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;        /* reserves space: no layout shift */
	background: var(--howl-moon);
	overflow: hidden;
}
.howl-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}
.howl-card:hover .howl-card__img { transform: scale(1.04); }
.howl-card__badge {
	position: absolute;
	top: 12px;
	left: 12px;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--howl-forest);
	color: var(--howl-white);
	font-size: 0.75rem;
	font-weight: 600;
}
.howl-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 10px;
	padding: 18px 18px 20px;
}
.howl-card__title { margin: 0; font-size: 1.25rem; line-height: 1.3; }
.howl-card__title a { color: var(--howl-night); text-decoration: none; }
.howl-card__title a:hover { text-decoration: underline; }
.howl-card__text { margin: 0; color: var(--howl-muted); font-size: 0.9375rem; line-height: 1.55; }
.howl-card__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--howl-ink);
	font-size: 0.875rem;
}
.howl-card__facts li::before { content: "•"; margin-right: 6px; color: var(--howl-ember); }
.howl-card__footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: auto;
	padding-top: 12px;
	border-top: 1px solid var(--howl-line);
}
.howl-card__price { margin: 0; color: var(--howl-muted); font-size: 0.875rem; }
.howl-card__price strong { color: var(--howl-night); font-size: 1.125rem; }

/* ---------- Testimonials ---------- */
.howl-quotes {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--howl-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}
@media (min-width: 900px) { .howl-quotes { grid-template-columns: repeat(3, 1fr); } }

.howl-quote figure {
	display: flex;
	flex-direction: column;
	gap: 14px;
	height: 100%;
	margin: 0;
	padding: 24px;
	background: var(--howl-white);
	border-radius: var(--howl-radius);
	box-shadow: var(--howl-shadow);
}
.howl-quote__stars { margin: 0; color: var(--howl-ember); letter-spacing: 2px; }
.howl-quote__text { margin: 0; padding: 0; border: 0; color: var(--howl-ink); font-size: 1rem; line-height: 1.6; }
.howl-quote__text p { margin: 0 0 0.75em; }
.howl-quote__text p:last-child { margin-bottom: 0; }
.howl-quote__by { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.howl-quote__by strong { display: block; color: var(--howl-night); }
.howl-quote__avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.howl-quote__meta { display: block; color: var(--howl-muted); font-size: 0.875rem; }

/* ---------- Empty state ---------- */
.howl-empty {
	padding: 32px 24px;
	background: var(--howl-moon);
	border-radius: var(--howl-radius);
	text-align: center;
}
.howl-empty__title { margin: 0 0 6px; color: var(--howl-night); font-size: 1.25rem; font-weight: 700; }

/* ---------- Accessibility helper (themes usually include this too) ---------- */
.howl-card .screen-reader-text,
.howl-finder .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
	.howl-card__img, .howl-btn { transition: none; }
	.howl-card:hover .howl-card__img { transform: none; }
}