/**
 * Honesha Elementor widgets.
 * Uses the site's Elementor global colour / typography variables, with the
 * design-system values as fallbacks.
 */

.hon-facts,
.hon-itinerary,
.hon-list,
.hon-prices,
.hon-faqs {
	--hon-ink: var(--e-global-color-primary, #23211C);
	--hon-text: var(--e-global-color-text, #57534A);
	--hon-gold: var(--e-global-color-accent, #C99A3F);
	--hon-gold-700: var(--e-global-color-gold700, #8C6A24);
	--hon-gold-300: var(--e-global-color-gold300, #E7CE97);
	--hon-forest-800: var(--e-global-color-forest800, #36433A);
	--hon-forest-900: var(--e-global-color-forest900, #26302A);
	--hon-sage-700: var(--e-global-color-sage700, #6B7A5C);
	--hon-sage-300: var(--e-global-color-sage300, #C2CBB4);
	--hon-cream: var(--e-global-color-cream100, #F5F1E8);
	--hon-border: var(--e-global-color-border, #E4DECF);
	--hon-muted: var(--e-global-color-muted, #6F6A5D);
	--hon-white: var(--e-global-color-white, #FFFFFF);
	--hon-danger: var(--e-global-color-danger, #B4543B);
	--hon-radius: 8px;
	--hon-shadow: 0 14px 40px rgba(35, 33, 28, .10);
	--hon-ease: cubic-bezier(.22, .61, .36, 1);
	--hon-label-family: var(--e-global-typography-secondary-font-family, "Lato"), sans-serif;
	--hon-label-weight: var(--e-global-typography-secondary-font-weight, 700);
	--hon-label-size: var(--e-global-typography-secondary-font-size, 12px);
	--hon-label-tracking: var(--e-global-typography-secondary-letter-spacing, .18em);
	--hon-h3-family: var(--e-global-typography-h3-font-family, "Lato"), sans-serif;
	--hon-h3-weight: var(--e-global-typography-h3-font-weight, 700);
	--hon-h3-size: var(--e-global-typography-h3-font-size, clamp(18px, 1.2rem + .4vw, 22px));
	--hon-h3-line: var(--e-global-typography-h3-line-height, 1.3);
	--hon-text-family: var(--e-global-typography-text-font-family, "Lato"), sans-serif;
	--hon-text-size: var(--e-global-typography-text-font-size, 16px);
	--hon-text-line: var(--e-global-typography-text-line-height, 1.65);
	font-family: var(--hon-text-family);
	color: var(--hon-text);
}

/* Small-caps label shared by several blocks. */
.hon-facts__label,
.hon-itinerary__label,
.hon-itinerary__meta,
.hon-itinerary__toggle-all,
.hon-acc-card__level,
.hon-prices__caption,
.hon-prices__table thead th {
	font-family: var(--hon-label-family);
	font-weight: var(--hon-label-weight);
	font-size: var(--hon-label-size);
	letter-spacing: var(--hon-label-tracking);
	text-transform: uppercase;
	line-height: 1.4;
}

/* Editor-only empty state. */
.hon-empty {
	padding: 16px 20px;
	border: 1px dashed var(--e-global-color-border, #E4DECF);
	border-radius: 8px;
	color: var(--e-global-color-muted, #6F6A5D);
	font-size: 14px;
	background: var(--e-global-color-cream100, #F5F1E8);
}

/* ------------------------------------------------------------------ Facts */

.hon-facts {
	background: var(--hon-forest-800);
	color: var(--hon-white);
	border-radius: var(--hon-radius);
	padding: clamp(20px, 3vw, 32px) clamp(20px, 4vw, 40px);
}

.hon-facts__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 20px 32px;
	margin: 0;
}

.hon-facts__item {
	margin: 0;
	padding-left: 16px;
	border-left: 1px solid rgba(231, 206, 151, .28);
}

.hon-facts__label {
	margin: 0 0 6px;
	color: var(--hon-gold-300);
}

.hon-facts__value {
	margin: 0;
	color: var(--hon-white);
	font-family: var(--hon-h3-family);
	font-weight: var(--hon-h3-weight);
	font-size: var(--hon-h3-size);
	line-height: var(--hon-h3-line);
}

/* -------------------------------------------------------------- Itinerary */

.hon-itinerary__toolbar {
	display: flex;
	justify-content: flex-end;
	margin-bottom: 8px;
}

.hon-itinerary button.hon-itinerary__toggle-all {
	appearance: none;
	min-height: 0;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	padding: 6px 0;
	font-family: var(--hon-label-family);
	font-weight: var(--hon-label-weight);
	font-size: var(--hon-label-size);
	letter-spacing: var(--hon-label-tracking);
	text-transform: uppercase;
	color: var(--hon-gold-700);
	cursor: pointer;
	text-decoration: underline;
	text-decoration-color: transparent;
	text-underline-offset: 4px;
	transition: text-decoration-color 200ms var(--hon-ease), color 200ms var(--hon-ease);
}

.hon-itinerary button.hon-itinerary__toggle-all:hover,
.hon-itinerary button.hon-itinerary__toggle-all:focus {
	background: none;
	border: 0;
	box-shadow: none;
	color: var(--hon-ink);
	text-decoration-color: currentColor;
}

.hon-itinerary__day {
	border-top: 1px solid var(--hon-border);
}

.hon-itinerary__day:last-child {
	border-bottom: 1px solid var(--hon-border);
}

.hon-itinerary h3.hon-itinerary__heading,
.hon-faqs h3.hon-faqs__heading {
	margin: 0;
	padding: 0;
	font-size: inherit;
	line-height: inherit;
}

/* Buttons: selectors are doubled up to beat the Elementor kit's global
   button styles (".elementor-kit-N button" and its :hover/:focus). */
.hon-itinerary button.hon-itinerary__header,
.hon-faqs button.hon-faqs__question {
	appearance: none;
	display: flex;
	align-items: center;
	gap: 6px 20px;
	width: 100%;
	min-height: 0;
	margin: 0;
	padding: 20px 0;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: var(--hon-ink);
	text-align: left;
	text-transform: none;
	letter-spacing: normal;
	white-space: normal;
	cursor: pointer;
	font: inherit;
	transition: color 200ms var(--hon-ease);
}

.hon-itinerary button.hon-itinerary__header:hover,
.hon-itinerary button.hon-itinerary__header:focus,
.hon-itinerary button.hon-itinerary__header:active,
.hon-faqs button.hon-faqs__question:hover,
.hon-faqs button.hon-faqs__question:focus,
.hon-faqs button.hon-faqs__question:active {
	background: none;
	border: 0;
	box-shadow: none;
	color: var(--hon-ink);
}

.hon-itinerary__header:focus-visible,
.hon-faqs__question:focus-visible,
.hon-itinerary__toggle-all:focus-visible,
.hon-acc-card__thumb:focus-visible,
.hon-acc-card__name:focus-visible,
.hon-prices__scroll:focus-visible {
	outline: 2px solid var(--hon-gold);
	outline-offset: 3px;
}

.hon-itinerary__label {
	flex: 0 0 84px;
	color: var(--hon-gold-700);
}

.hon-itinerary__title {
	flex: 1 1 auto;
	color: var(--hon-ink);
	font-family: var(--hon-h3-family);
	font-weight: var(--hon-h3-weight);
	font-size: var(--hon-h3-size);
	line-height: var(--hon-h3-line);
	text-transform: var(--e-global-typography-h3-text-transform, none);
	letter-spacing: var(--e-global-typography-h3-letter-spacing, normal);
}

/* +/− icon drawn with two bars. */
.hon-itinerary__icon,
.hon-faqs__icon {
	position: relative;
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	border: 1px solid var(--hon-border);
	border-radius: 50%;
	color: var(--hon-gold-700);
	transition: background-color 200ms var(--hon-ease), border-color 200ms var(--hon-ease);
}

.hon-itinerary__icon::before,
.hon-itinerary__icon::after,
.hon-faqs__icon::before,
.hon-faqs__icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 12px;
	height: 1.5px;
	margin: -.75px 0 0 -6px;
	background: currentColor;
	border-radius: 1px;
	transition: transform 220ms var(--hon-ease), opacity 220ms var(--hon-ease);
}

.hon-itinerary__icon::after,
.hon-faqs__icon::after {
	transform: rotate(90deg);
}

.is-open > .hon-itinerary__heading .hon-itinerary__icon::after,
.is-open > .hon-faqs__heading .hon-faqs__icon::after {
	transform: rotate(0deg);
	opacity: 0;
}

.hon-itinerary__header:hover .hon-itinerary__icon,
.hon-faqs__question:hover .hon-faqs__icon {
	border-color: var(--hon-gold);
	background: var(--hon-cream);
}

/* Panels animate height via grid rows. */
.hon-itinerary__panel,
.hon-faqs__panel {
	display: grid;
	grid-template-rows: 0fr;
	visibility: hidden;
	transition: grid-template-rows 260ms var(--hon-ease), visibility 0s linear 260ms;
}

.is-open > .hon-itinerary__panel,
.is-open > .hon-faqs__panel {
	grid-template-rows: 1fr;
	visibility: visible;
	transition: grid-template-rows 260ms var(--hon-ease), visibility 0s;
}

.hon-itinerary__inner,
.hon-faqs__inner {
	min-height: 0;
	overflow: hidden;
}

.hon-itinerary__body {
	padding: 0 0 24px;
}

@media (min-width: 768px) {
	.hon-itinerary__body {
		padding-left: 104px; /* label column + gap */
	}
}

/* Phones: the day label sits above the title so titles get the full width. */
@media (max-width: 600px) {
	.hon-itinerary button.hon-itinerary__header {
		flex-wrap: wrap;
		row-gap: 4px;
	}
	.hon-itinerary__label {
		flex: 0 0 100%;
	}
	.hon-itinerary__title {
		flex: 1 1 0;
		min-width: 0;
	}
}

.hon-itinerary__text p,
.hon-faqs__answer p {
	margin: 0 0 1em;
	font-size: var(--hon-text-size);
	line-height: var(--hon-text-line);
	color: var(--hon-text);
}

.hon-itinerary__text p:last-child,
.hon-faqs__answer p:last-child {
	margin-bottom: 0;
}

.hon-itinerary__meta {
	margin: 16px 0 0;
	color: var(--hon-muted);
}

.hon-itinerary__meta strong {
	color: var(--hon-ink);
	font-weight: 700;
}

/* Accommodation card. */
.hon-acc-card {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 20px;
	margin-top: 20px;
	padding: 14px;
	background: var(--hon-white);
	border: 1px solid var(--hon-border);
	border-radius: var(--hon-radius);
	box-shadow: var(--hon-shadow);
}

.hon-acc-card__thumbs {
	display: grid;
	grid-template-columns: repeat(3, 72px);
	gap: 6px;
}

.hon-acc-card__thumb {
	display: block;
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: 6px;
	background: var(--hon-cream);
}

.hon-acc-card__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 260ms var(--hon-ease);
}

.hon-acc-card__thumb:hover .hon-acc-card__img {
	transform: scale(1.05);
}

.hon-acc-card__info {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.hon-acc-card__name {
	color: var(--hon-ink);
	font-weight: 700;
	font-size: 17px;
	line-height: 1.3;
	text-decoration: none;
	transition: color 180ms var(--hon-ease);
}

.hon-acc-card__name:hover {
	color: var(--hon-gold-700);
}

.hon-acc-card__details {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
}

.hon-acc-card__level {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--hon-cream);
	border: 1px solid var(--hon-border);
	color: var(--hon-gold-700);
	font-size: 11px;
}

.hon-acc-card__location {
	color: var(--hon-muted);
	font-size: 14px;
}

@media (max-width: 480px) {
	.hon-acc-card__thumbs {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		width: 100%;
	}
}

/* ------------------------------------------------------------------- List */

.hon-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 10px;
}

.hon-list__item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0;
	line-height: var(--hon-text-line);
	font-size: var(--hon-text-size);
}

.hon-list__icon {
	flex: 0 0 auto;
	display: inline-flex;
	margin-top: calc((var(--hon-text-line) * 1em - 18px) / 2);
	color: var(--hon-sage-700);
}

.hon-list--cross .hon-list__icon {
	color: var(--hon-danger);
}

.hon-list--dot .hon-list__icon {
	color: var(--hon-gold);
}

.hon-list__svg {
	display: block;
	width: 18px;
	height: 18px;
}

.hon-list__text {
	color: var(--hon-text);
}

/* ----------------------------------------------------------------- Prices */

.hon-prices__scroll {
	overflow-x: auto;
	background: var(--hon-white);
	border: 1px solid var(--hon-border);
	border-radius: var(--hon-radius);
	box-shadow: var(--hon-shadow);
}

.hon-prices__table {
	width: 100%;
	min-width: 560px;
	margin: 0;
	border-collapse: collapse;
	font-size: 15px;
}

.hon-prices__caption {
	caption-side: top;
	padding: 16px 20px 0;
	text-align: left;
	color: var(--hon-gold-700);
}

.hon-prices__table th,
.hon-prices__table td {
	padding: 14px 20px;
	border: 0;
	border-bottom: 1px solid var(--hon-border);
	background: none;
	text-align: left;
	vertical-align: top;
}

.hon-prices__table tbody tr:last-child > * {
	border-bottom: 0;
}

.hon-prices__table thead th {
	color: var(--hon-muted);
	white-space: nowrap;
}

.hon-prices__season {
	color: var(--hon-ink);
	font-weight: 700;
}

.hon-prices__months {
	color: var(--hon-text);
}

.hon-prices__price {
	color: var(--hon-ink);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.hon-prices__table thead th:nth-child(n+3),
.hon-prices__table .hon-prices__price {
	text-align: right;
}

.hon-prices__table tbody tr:nth-child(even) > * {
	background: rgba(245, 241, 232, .5);
}

/* Small screens: stack rows as cards instead of scrolling. */
@media (max-width: 600px) {
	.hon-prices__scroll {
		overflow: visible;
		background: none;
		border: 0;
		box-shadow: none;
	}

	.hon-prices__table {
		min-width: 0;
	}

	.hon-prices__caption {
		display: block;
		padding: 0 0 12px;
	}

	.hon-prices__table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	.hon-prices__table,
	.hon-prices__table tbody,
	.hon-prices__table tr,
	.hon-prices__table th,
	.hon-prices__table td {
		display: block;
	}

	.hon-prices__table tbody tr {
		margin-bottom: 12px;
		background: var(--hon-white);
		border: 1px solid var(--hon-border);
		border-radius: var(--hon-radius);
		overflow: hidden;
	}

	.hon-prices__table tbody tr:nth-child(even) > * {
		background: none;
	}

	.hon-prices__table tbody th,
	.hon-prices__table tbody td {
		display: flex;
		justify-content: space-between;
		gap: 16px;
		padding: 10px 16px;
		text-align: right;
	}

	.hon-prices__table tbody tr:last-child > * {
		border-bottom: 1px solid var(--hon-border);
	}

	.hon-prices__table tbody tr > *:last-child {
		border-bottom: 0;
	}

	.hon-prices__table tbody [data-label]::before {
		content: attr(data-label);
		color: var(--hon-muted);
		font-weight: 700;
		font-size: 12px;
		letter-spacing: .12em;
		text-transform: uppercase;
		text-align: left;
	}

	.hon-prices__season {
		background: var(--hon-cream) !important;
	}
}

.hon-prices__from {
	margin: 0;
	color: var(--hon-ink);
	font-family: var(--hon-h3-family);
	font-weight: var(--hon-h3-weight);
	font-size: var(--hon-h3-size);
	line-height: var(--hon-h3-line);
}

.hon-prices__note {
	display: block;
	margin-top: 4px;
	color: var(--hon-muted);
	font-family: var(--hon-text-family);
	font-weight: 400;
	font-size: 14px;
}

/* ------------------------------------------------------------------- FAQs */

.hon-faqs__item {
	border-top: 1px solid var(--hon-border);
}

.hon-faqs__item:last-child {
	border-bottom: 1px solid var(--hon-border);
}

.hon-faqs__text {
	flex: 1 1 auto;
	color: var(--hon-ink);
	font-weight: 700;
	font-size: 17px;
	line-height: 1.45;
}

.hon-faqs__answer {
	padding: 0 52px 22px 0;
}

@media (max-width: 480px) {
	.hon-faqs__answer {
		padding-right: 0;
	}
}

/* ---------------------------------------------------------- Reduced motion */

@media (prefers-reduced-motion: reduce) {
	.hon-itinerary__panel,
	.hon-faqs__panel,
	.is-open > .hon-itinerary__panel,
	.is-open > .hon-faqs__panel,
	.hon-itinerary__icon,
	.hon-faqs__icon,
	.hon-itinerary__icon::before,
	.hon-itinerary__icon::after,
	.hon-faqs__icon::before,
	.hon-faqs__icon::after,
	.hon-acc-card__img,
	.hon-acc-card__name,
	.hon-itinerary__toggle-all {
		transition: none;
	}

	.hon-acc-card__thumb:hover .hon-acc-card__img {
		transform: none;
	}
}
