/* ===== GV Itinerary — front-end styles =====
 * Scoped under .gv-itin so the styles never bleed into the host theme.
 * Mobile-first; inherits the theme's font / base color where it can, but
 * doesn't depend on Enfold (or any other theme) being present.
 *
 * Theming: every brand color, border, padding, and width below reads a CSS
 * custom property with the shipped value as its fallback. The Display
 * Settings page (Itineraries → Display Settings) emits overrides as inline
 * CSS on .gv-itin via GV_Itinerary_Settings::inline_css() — change values
 * there, not here.
 */

.gv-itin {
	max-width: var(--gv-itin-max-width, 800px);
	margin: 0 auto;
	line-height: 1.55;
	box-sizing: border-box;
}

.gv-itin *,
.gv-itin *::before,
.gv-itin *::after {
	box-sizing: inherit;
}

/* ----- Header ----- */

.gv-itin__header {
	margin: 0 0 24px;
}

.gv-itin__title {
	margin: 0 0 6px;
	font-size: 1.75rem;
	line-height: 1.2;
}

.gv-itin__meta {
	margin: 0 0 16px;
	color: #555;
	font-size: 0.95rem;
}

.gv-itin__overview {
	margin: 0;
}

.gv-itin__overview p:first-child { margin-top: 0; }
.gv-itin__overview p:last-child  { margin-bottom: 0; }

/* ----- Section headings ----- */

.gv-itin__section-heading {
	margin: 28px 0 12px;
	font-size: 1.25rem;
	line-height: 1.25;
}

/* ----- Practical info (definition list) ----- */

.gv-itin__kv {
	margin: 0 0 16px;
	padding: 0;
	border-top: 1px solid var(--gv-itin-border, #e3e3e3);
}

.gv-itin__kv-label {
	margin: 12px 0 4px;
	font-weight: 600;
}

.gv-itin__kv-value {
	margin: 0 0 12px;
	padding: 0;
}

.gv-itin__kv-value p:first-child { margin-top: 0; }
.gv-itin__kv-value p:last-child  { margin-bottom: 0; }

@media (min-width: 640px) {
	.gv-itin__kv {
		display: grid;
		grid-template-columns: minmax(140px, 25%) 1fr;
		gap: 10px 18px;
	}
	.gv-itin__kv-label,
	.gv-itin__kv-value { margin: 0; }
	.gv-itin__kv-label { padding-top: 2px; }
}

/* ----- Accordion (card-per-day) -----
 * Each day is a self-contained card with a visible border so the rows don't
 * disappear into a light host-theme background. The toggle row has a subtle
 * fill, and hover/open states swap a brand-coloured left bar in to mark
 * "this is the active row".
 */

.gv-itin__day {
	margin: 0 0 8px;
	background: #fff;
	border: 1px solid var(--gv-itin-border, #d0d6dc);
	border-radius: 4px;
	overflow: hidden;
}

.gv-itin__day-heading {
	margin: 0;
	padding: 0;
	font-size: inherit;        /* button drives the visual weight */
	font-weight: inherit;
}

.gv-itin__day-toggle {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	min-height: 56px;          /* > 44px tap target */
	padding: 14px 16px;
	background: var(--gv-itin-header-bg, #f5f8fa);
	border: 0;
	border-left: 4px solid transparent;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: background-color 0.15s ease, border-left-color 0.15s ease;
}

.gv-itin__day-toggle:hover {
	background: var(--gv-itin-header-bg-active, #e9eff5);
	border-left-color: var(--gv-itin-primary, #6786a1);
}

.gv-itin__day-toggle[aria-expanded="true"] {
	background: var(--gv-itin-header-bg-active, #e9eff5);
	border-left-color: var(--gv-itin-primary, #6786a1);
	border-bottom: 1px solid var(--gv-itin-border, #d0d6dc);
}

.gv-itin__day-toggle:focus-visible {
	outline: 2px solid var(--gv-itin-accent, #4f6c87);
	outline-offset: -2px;
	background: var(--gv-itin-header-bg-active, #e9eff5);
}

.gv-itin__day-num {
	flex: 0 0 auto;
	display: inline-block;
	padding: 2px 10px;
	border-radius: 999px;
	background: var(--gv-itin-primary, #6786a1);
	color: #fff;
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1.6;
	white-space: nowrap;
}

.gv-itin__day-title {
	flex: 1 1 auto;
	font-weight: 600;
	font-size: 1.05rem;
}

.gv-itin__day-chevron {
	flex: 0 0 auto;
	width: 10px;
	height: 10px;
	margin-right: 4px;
	border-right: 2px solid var(--gv-itin-primary, #6786a1);
	border-bottom: 2px solid var(--gv-itin-primary, #6786a1);
	transform: rotate(45deg);
	transition: transform 0.2s ease;
}

.gv-itin__day-toggle[aria-expanded="true"] .gv-itin__day-chevron {
	transform: rotate(-135deg);
}

.gv-itin__day-body {
	padding: var(--gv-itin-body-pad-y, 12px) var(--gv-itin-body-pad-x, 18px);
}

/* [hidden] is the source of truth; the rule below keeps things consistent
 * if a theme has restyled [hidden] away. */
.gv-itin__day-body[hidden] {
	display: none;
}

/* ----- Time-blocks ----- */

.gv-itin__block {
	margin: 16px 0;
}

.gv-itin__block:first-child { margin-top: 4px; }
.gv-itin__block:last-child  { margin-bottom: 0; }

.gv-itin__block-label {
	margin: 0 0 6px;
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--gv-itin-accent, #4f6c87);
	font-weight: 700;
}

.gv-itin__block-desc {
	margin: 0;
}

.gv-itin__block-desc p:first-child { margin-top: 0; }
.gv-itin__block-desc p:last-child  { margin-bottom: 0; }

.gv-itin__block-photo {
	margin: 12px 0 0;
	padding: 0;
}

.gv-itin__block-img {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: 4px;
}

.gv-itin__empty {
	margin: 12px 0;
	color: #6b6b6b;
	font-style: italic;
}

/* ----- Editors-only note (broken/unpublished shortcode) -----
 * Rendered only for logged-in users who can edit posts; visitors get nothing.
 */
.gv-itin-editor-note {
	padding: 10px 14px;
	border: 1px dashed #b0b8bf;
	border-radius: 4px;
	color: #555;
	font-style: italic;
}

/* ----- Tablet+ ----- */

@media (min-width: 640px) {
	.gv-itin__title     { font-size: 2rem; }
	.gv-itin__day-body  { padding: var(--gv-itin-body-pad-y, 16px) var(--gv-itin-body-pad-x, 22px); }
}

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

@media (prefers-reduced-motion: reduce) {
	.gv-itin__day-toggle,
	.gv-itin__day-chevron {
		transition: none;
	}
}