/*
 * Trade Travel brand stylesheet (docs/brand-guidelines.md, sections 2, 6 and 7).
 *
 * Covers what the theme and Tour Master have no settings for. Colours and fonts that DO have dashboard
 * settings are set there (inc/brand-defaults.php) and are not overridden here, so dashboard changes keep working.
 *
 * Loaded last on the front end, after the theme, Tour Master and their generated CSS, so these rules win on
 * order without !important. The only !important rules are the two the brand treats as absolute (no capitals,
 * keyboard focus ring): the theme, plugins and page builder set uppercase and outline:none in 127+ places,
 * some as inline styles, which nothing else can override.
 *
 * Layers: 0 tokens · 1 global rules · 2 theme touch-ups · 3 brand components. The nav bar and footer are the
 * theme's own and managed in the dashboard, so nothing here styles them.
 */

/* ---------- 0 · tokens (brand-guidelines.md, section 8) ---------- */

:root {
	--tt-white: #ffffff;
	--tt-blue: #30418d;
	--tt-red: #dd2a30;
	--tt-red-hover: #b42227;
	--tt-wine: #8d3d62;
	--tt-lilac: #b8b0ca;
	--tt-lilac-tint: #efedf4;
	--tt-ink: #000000;
	--tt-ink-muted: #4b4b5c;
	--tt-focus: var(--tt-blue);

	--tt-font-display: "Argent", "EB Garamond", Georgia, serif;
	--tt-font-body: "Open Sans", Arial, sans-serif;

	--tt-space-1: 4px;  --tt-space-2: 8px;  --tt-space-3: 12px;
	--tt-space-4: 16px; --tt-space-5: 24px; --tt-space-6: 32px;
	--tt-space-7: 48px; --tt-space-8: 64px; --tt-space-9: 96px;

	--tt-radius-sm: 4px;
	--tt-radius-md: 8px;
	--tt-radius-lg: 16px;
	--tt-radius-pill: 999px;
	--tt-shadow-card: 0 6px 20px rgba(48, 65, 141, 0.14);
	--tt-hairline: 1px solid var(--tt-lilac);

	--tt-content-width: 1200px;
	--tt-text-width: 720px;
	--tt-tap-min: 48px;
}

/* ---------- 1 · global rules ---------- */

/* Never capitals: headings, buttons, pills, labels, navigation (brand book, voice and copy).
   Text typed in capitals stays as typed; this only stops the theme from forcing it.
   The nav bar and footer are left out: their text-transform settings belong to the dashboard. */
body *:not(.traveltour-top-bar *, .traveltour-header-wrap *, .traveltour-mobile-header *, footer *),
body *:not(.traveltour-top-bar *, .traveltour-header-wrap *, .traveltour-mobile-header *, footer *)::before,
body *:not(.traveltour-top-bar *, .traveltour-header-wrap *, .traveltour-mobile-header *, footer *)::after {
	text-transform: none !important;
}

/* Keyboard focus: 3px solid blue ring with a 2px white gap, on every link, button and field.
   :focus-visible = keyboard only, so mouse and touch users don't see a ring after clicking. */
body a:focus-visible,
body button:focus-visible,
body input:focus-visible,
body select:focus-visible,
body textarea:focus-visible,
body summary:focus-visible,
body [tabindex]:focus-visible {
	outline: 3px solid var(--tt-focus) !important;
	outline-offset: 2px !important;
	box-shadow: 0 0 0 2px var(--tt-white) !important;
}

/* Tap targets at least 48px tall: buttons */
body .gdlr-core-button,
body .tourmaster-button,
body .tourmaster-tour-search-submit,
body input[type="submit"],
body input[type="button"] {
	min-height: var(--tt-tap-min);
	box-sizing: border-box;
}

/* links styled as buttons: centre the label in the taller box */
body a.gdlr-core-button,
body a.tourmaster-button,
body div.tourmaster-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* Tap targets at least 48px tall: fields */
body input[type="text"],
body input[type="email"],
body input[type="tel"],
body input[type="number"],
body input[type="search"],
body input[type="password"],
body select {
	min-height: var(--tt-tap-min);
	box-sizing: border-box;
}

/* Gentle corners: radius-sm on buttons and inputs.
   Buttons use !important: the page builder writes each button's radius as an inline style (Button element >
   "border radius"), which only !important can override. Brand decision: button corners are always radius-sm. */
body .gdlr-core-button,
body .tourmaster-button,
body .tourmaster-tour-search-submit,
body input[type="submit"],
body input[type="button"] {
	border-radius: var(--tt-radius-sm) !important;
}

/* fields; the .tourmaster-form-field versions match Tour Master's own (more specific) "radius 0" rule */
body input[type="text"],
body input[type="email"],
body input[type="tel"],
body input[type="number"],
body input[type="search"],
body input[type="password"],
body select,
body textarea,
body .tourmaster-form-field input[type="text"],
body .tourmaster-form-field input[type="email"],
body .tourmaster-form-field input[type="tel"],
body .tourmaster-form-field input[type="number"],
body .tourmaster-form-field input[type="password"],
body .tourmaster-form-field select,
body .tourmaster-form-field textarea {
	border-radius: var(--tt-radius-sm);
}

/* ---------- 2 · theme touch-ups ---------- */

/* Tour cards: radius-md, lilac hairline at rest, lift with shadow-card on hover only (brand: borders, not shadows).
   !important: tour listing elements write the card radius and frame shadow as inline styles (page builder >
   Tour element > frame shadow / border radius). Brand decision: cards always look the same, so those two
   element options have no effect (recorded in the exceptions list, traveltour-child/README.md). */
body .tourmaster-tour-grid-inner,
body .tourmaster-tour-modern-inner {
	border-radius: var(--tt-radius-md) !important;
	border: var(--tt-hairline);
	box-shadow: none !important;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

body .tourmaster-tour-grid-inner:hover,
body .tourmaster-tour-modern-inner:hover {
	box-shadow: var(--tt-shadow-card) !important;
	transform: translateY(-2px);
}

/* some grid styles put the shadow on the outer frame instead (the related-tours selector matches Tour Master's own) */
body .tourmaster-tour-grid.tourmaster-tour-frame,
body .tourmaster-single-related-tour.tourmaster-style-grid-with-frame .tourmaster-tour-grid {
	box-shadow: none;
}

/* Booking / enquiry sidebar on tour pages: a panel, so radius-md and a hairline instead of a heavy shadow */
body .tourmaster-tour-booking-bar-outer {
	border-radius: var(--tt-radius-md);
	border: var(--tt-hairline);
	box-shadow: none;
}

/* Enquiry form: each step has one main action, so it's the red primary button (brand: one red action per view) */
body #nt-enquiry-form .nt-enquiry-next,
body #nt-enquiry-form .nt-enquiry-submit {
	background: var(--tt-red);
	color: var(--tt-white);
	font-weight: 700;
}

body #nt-enquiry-form .nt-enquiry-next:hover,
body #nt-enquiry-form .nt-enquiry-submit:hover {
	background: var(--tt-red-hover);
}

/* ---------- 3 · brand components (brand-guidelines.md, section 7; markup in inc/brand-components.php) ---------- */

/* The nav bar and footer are deliberately not styled here: they are the theme's own, managed in the dashboard
   (Theme Options, Appearance > Menus and Widgets). See "Nav bar and footer" in the child theme README. */

/* -- footer contact: [tt_footer_contact], white text for a dark footer -- */
body .tt-footer-contact__wordmark {
	font-family: var(--tt-font-display);
	font-size: 32px;
	line-height: 40px;
	color: var(--tt-white);
	margin-bottom: var(--tt-space-4);
}

body .tt-footer-contact p,
body .tt-footer-contact a {
	color: var(--tt-white);
}

body .tt-footer-contact__phone {
	font-size: 24px;
	font-weight: 700;
}

/* -- type styles editors can use on any element (brand type scale) -- */
body .tt-display { font-family: var(--tt-font-display); font-size: 56px; line-height: 60px; font-weight: 500; color: var(--tt-blue); }
body .tt-subhead { font-family: var(--tt-font-body); font-size: 20px; line-height: 28px; font-weight: 700; }
body .tt-body-lg { font-size: 20px; line-height: 32px; }
body .tt-small { font-size: 16px; line-height: 24px; color: var(--tt-ink-muted); }
@media (max-width: 767px){ body .tt-display { font-size: 40px; line-height: 46px; } }

/* -- button: [tt_button] -- */
body .tt-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--tt-tap-min);
	padding: var(--tt-space-3) var(--tt-space-5);
	border: 2px solid transparent;
	border-radius: var(--tt-radius-sm);
	font-family: var(--tt-font-body);
	font-size: 18px;
	line-height: 24px;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
}
body .tt-btn--primary { background: var(--tt-red); color: var(--tt-white); }
body .tt-btn--primary:hover { background: var(--tt-red-hover); color: var(--tt-white); }
body .tt-btn--secondary { background: var(--tt-white); border-color: var(--tt-blue); color: var(--tt-blue); }
body .tt-btn--secondary:hover { background: var(--tt-lilac-tint); color: var(--tt-blue); }
body .tt-btn--onblue { background: var(--tt-white); color: var(--tt-blue); }
body .tt-btn--onblue:hover { background: var(--tt-lilac-tint); color: var(--tt-blue); }

/* -- pill: [tt_pill] -- */
body .tt-pill {
	display: inline-block;
	padding: var(--tt-space-1) var(--tt-space-3);
	border: 1px solid var(--tt-wine);
	border-radius: var(--tt-radius-pill);
	background: var(--tt-wine);
	color: var(--tt-white);
	font-size: 14px;
	line-height: 20px;
	font-weight: 700;
}
body .tt-pill--outline { background: transparent; color: var(--tt-wine); }

/* -- eyebrow: [tt_eyebrow] -- */
body .tt-eyebrow {
	margin: 0 0 var(--tt-space-2);
	color: var(--tt-wine);
	font-family: var(--tt-font-body);
	font-size: 14px;
	line-height: 20px;
	font-weight: 700;
	letter-spacing: 0.5px;
}

/* -- fact bar: [tt_fact_bar] -- */
body .tt-factbar {
	display: flex;
	flex-wrap: wrap;
	gap: var(--tt-space-1) 0;
	padding: var(--tt-space-3) var(--tt-space-4);
	border-radius: var(--tt-radius-sm);
	background: var(--tt-lilac);
	color: var(--tt-ink);
	font-weight: 700;
}
body .tt-factbar span + span::before {
	content: "\00b7";
	margin: 0 var(--tt-space-2);
}

/* -- price block: [tt_price] -- */
body .tt-price {
	padding: var(--tt-space-5);
	border-radius: var(--tt-radius-md);
	background: var(--tt-wine);
	color: var(--tt-white);
}
body .tt-price p { margin: 0; color: var(--tt-white); }
body .tt-price__label { font-size: 16px; line-height: 24px; }
body .tt-price p.tt-price__figure { margin: var(--tt-space-1) 0; }
body .tt-price__amount { font-size: 40px; line-height: 44px; font-weight: 600; }
body .tt-price__city { font-size: 18px; font-weight: 700; }
body .tt-price__supplement { font-size: 16px; line-height: 24px; }

/* -- info panel: [tt_panel] [tt_day] -- */
body .tt-panel {
	padding: var(--tt-space-6);
	border-radius: var(--tt-radius-md);
	background: var(--tt-blue);
	color: var(--tt-white);
}
body .tt-panel p,
body .tt-panel dd,
body .tt-panel dt { color: inherit; }
body .tt-panel__title {
	margin: 0 0 var(--tt-space-4);
	color: inherit;
	font-family: var(--tt-font-display);
	font-size: 24px;
	line-height: 32px;
	font-weight: 500;
}
body .tt-panel--tint { background: var(--tt-lilac-tint); color: var(--tt-ink); }
body .tt-panel--tint .tt-panel__title { color: var(--tt-blue); }
body .tt-panel__days { margin: 0; }
body .tt-panel__day {
	display: grid;
	grid-template-columns: 112px 1fr;
	gap: var(--tt-space-4);
	padding: var(--tt-space-3) 0;
	border-top: 1px solid rgba(255, 255, 255, 0.25);
}
body .tt-panel--tint .tt-panel__day { border-top-color: var(--tt-lilac); }
body .tt-panel__day:first-child { border-top: 0; }
body .tt-panel__day dt { font-weight: 700; }
body .tt-panel__day dd { margin: 0; }
@media (max-width: 767px){
	body .tt-panel__day { grid-template-columns: 80px 1fr; gap: var(--tt-space-3); }
}

/* -- numbered points: [tt_points] [tt_point] -- */
body .tt-points { list-style: none; margin: 0; padding: 0; counter-reset: tt-point; }
body .tt-point {
	position: relative;
	margin: 0 0 var(--tt-space-6);
	padding-left: 64px;
	counter-increment: tt-point;
}
body .tt-point::before {
	content: counter(tt-point);
	position: absolute;
	left: 0;
	top: 0;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--tt-red);
	color: var(--tt-white);
	font-weight: 700;
	font-size: 20px;
	line-height: 44px;
	text-align: center;
}
body .tt-point__title {
	margin: 0 0 var(--tt-space-2);
	color: var(--tt-wine);
	font-family: var(--tt-font-body);
	font-size: 20px;
	line-height: 28px;
	font-weight: 700;
}
body .tt-point__text { margin: 0; }

/* -- phone: [tt_phone] -- */
body .tt-phone {
	display: inline-flex;
	align-items: center;
	gap: var(--tt-space-2);
	min-height: var(--tt-tap-min);
	color: var(--tt-blue);
	font-size: 24px;
	line-height: 32px;
	font-weight: 700;
}

/* -- home banner: [tt_home_banner]. The photo takes the width; the headline sits on the blue panel, never on the photo. -- */
body .tt-banner { position: relative; overflow: hidden; border-radius: var(--tt-radius-lg); }
body .tt-banner__image { display: block; width: 100%; height: 560px; object-fit: cover; }
body .tt-banner__panel {
	position: absolute;
	left: var(--tt-space-6);
	bottom: var(--tt-space-6);
	max-width: 560px;
	padding: var(--tt-space-6);
	border-radius: var(--tt-radius-md);
	background: var(--tt-blue);
	color: var(--tt-white);
}
body .tt-banner__headline {
	margin: 0 0 var(--tt-space-3);
	color: var(--tt-white);
	font-family: var(--tt-font-display);
	font-size: 44px;
	line-height: 50px;
	font-weight: 500;
}
body .tt-banner__text { margin: 0 0 var(--tt-space-5); color: var(--tt-white); font-size: 20px; line-height: 32px; }
body .tt-banner__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tt-space-4); margin: 0; }
body .tt-banner__call { color: var(--tt-white); font-size: 18px; }
body .tt-banner__call a { color: var(--tt-white); font-weight: 700; text-decoration: underline; }
@media (max-width: 767px){
	body .tt-banner__image { height: 300px; }
	body .tt-banner__panel { position: static; max-width: none; border-radius: 0; padding: var(--tt-space-5); }
	body .tt-banner__headline { font-size: 32px; line-height: 40px; }
}

/* -- tour card: every tour listing (inc/tour-card.php). Code-owned: Tour Master's tour item colour settings
      (title, price) apply only to the sidebar widget list now. -- */

/* equal heights: the listing's float columns become a wrapping flex row, so each card can fill its row's height.
   Masonry listings keep the theme's own positioning. */
body .tourmaster-tour-item-holder:not([data-layout="masonry"]):has(> .gdlr-core-item-list > .tt-tour-card),
body .tourmaster-tour-item-holder:not([data-layout="masonry"]):has(> .tt-tour-card) {
	display: flex;
	flex-wrap: wrap;
}
body .tourmaster-tour-item-holder:has(.tt-tour-card)::before,
body .tourmaster-tour-item-holder:has(.tt-tour-card)::after {
	display: none;
}
body .tourmaster-tour-item-holder > .gdlr-core-item-list:has(> .tt-tour-card) {
	display: flex;
	float: none;
}
body .tourmaster-tour-item-holder > .tt-tour-card { flex: 0 0 100%; }

/* tour highlights on the tour page: [nt_tour_highlights] (inc/tour-highlights.php), a wrapping row of icon + line */
body .tt-highlights {
	display: flex;
	flex-wrap: wrap;
	gap: var(--tt-space-4) var(--tt-space-6);
	margin: 0 0 var(--tt-space-5);
	padding: 0;
	list-style: none;
}
body .tt-highlights li {
	display: flex;
	flex: 0 1 auto;
	align-items: center;
	gap: var(--tt-space-3);
	margin: 0;
	color: var(--tt-ink);
	font-size: 18px;
	line-height: 26px;
}
body .tt-highlights li > i {
	flex: none;
	width: 28px;
	color: var(--tt-blue);
	font-size: 24px;
	text-align: center;
}
@media (max-width: 767px){
	body .tt-highlights { display: grid; grid-template-columns: 1fr 1fr; gap: var(--tt-space-4); }
	body .tt-highlights li { align-items: flex-start; font-size: 16px; line-height: 24px; }
	body .tt-highlights li > i { font-size: 20px; }
}

/* carousels: the slider writes each slide's width (and display:block) inline; a flex row gives the slides one
   height and the card fills its slide */
body .gdlr-core-flexslider .slides:has(> li > .tt-tour-card) { display: flex; }
body .gdlr-core-flexslider .slides > li > .tt-tour-card { height: calc(100% - var(--tt-space-6)); }

/* sidebar "widget" tour list keeps Tour Master's markup; its ribbon shows the tour's badge, shaped as the pill.
   Colours stay inline: inc/tour-badges.php feeds the badge's own colours into Tour Master's ribbon settings. */
body .tourmaster-tour-widget .tourmaster-thumbnail-ribbon {
	display: inline-block;
	padding: var(--tt-space-1) var(--tt-space-3);
	border-radius: var(--tt-radius-pill);
	font-size: 14px;
	font-weight: 700;
	line-height: 20px;
}
body .tourmaster-tour-widget .tourmaster-thumbnail-ribbon-cornor { display: none; }

body .tt-tour-card {
	display: flex;
	width: 100%;
	margin-bottom: var(--tt-space-6);
}
body .tt-tour-card__inner {
	display: flex;
	flex-direction: column;
	width: 100%;
	overflow: hidden;
	background: var(--tt-white);
	border: var(--tt-hairline);
	border-radius: var(--tt-radius-md);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
/* brand: at rest a hairline only; on hover the whole card lifts */
body .tt-tour-card__inner:hover,
body .tt-tour-card__inner:focus-within {
	transform: translateY(-2px);
	box-shadow: var(--tt-shadow-card);
}
@media (prefers-reduced-motion: reduce){
	body .tt-tour-card__inner { transition: none; }
	body .tt-tour-card__inner:hover,
	body .tt-tour-card__inner:focus-within { transform: none; }
}

/* 3:2 photo, cropped to fill; the pill sits on its top-right corner */
body .tt-tour-card__media-wrap { position: relative; }
body .tt-tour-card__media-wrap .tt-tour-card__pill {
	position: absolute;
	top: var(--tt-space-3);
	right: var(--tt-space-3);
	margin: 0;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}
body .tt-tour-card__media {
	display: block;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--tt-lilac-tint);
}
body .tt-tour-card__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

body .tt-tour-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: flex-start;
	padding: var(--tt-space-5);
}
body .tt-tour-card__pill { margin: 0 0 var(--tt-space-3); }
body .tt-tour-card__title {
	margin: 0 0 var(--tt-space-2);
	font-family: var(--tt-font-display);
	font-size: 24px;
	line-height: 30px;
	font-weight: 500;
}
body .tt-tour-card__title a { color: var(--tt-blue); }
body .tt-tour-card__title a:hover { color: var(--tt-wine); }

/* meta line: duration · next departure (middots from CSS, like the fact bar) */
body .tt-tour-card__meta {
	margin: 0 0 var(--tt-space-4);
	color: var(--tt-ink-muted);
	font-size: 16px;
	line-height: 24px;
}
body .tt-tour-card__meta span + span::before {
	content: "·";
	margin: 0 var(--tt-space-2);
}

/* custom excerpt as a tick list; the tick is drawn, so it needs no icon font */
body .tt-tour-card__points {
	margin: 0 0 var(--tt-space-4);
	padding: 0;
	list-style: none;
}
body .tt-tour-card__points li {
	position: relative;
	margin: 0 0 var(--tt-space-1);
	padding-left: 28px;
	color: var(--tt-ink);
	font-size: 16px;
	line-height: 24px;
}
body .tt-tour-card__points li::before {
	content: "";
	position: absolute;
	left: 6px;
	top: 5px;
	width: 6px;
	height: 11px;
	border: solid var(--tt-blue);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

/* tour highlights on a card: the highlight's icon instead of the tick */
body .tt-tour-card__points--icons li::before { content: none; }
body .tt-tour-card__points--icons li > i {
	position: absolute;
	left: 0;
	top: 4px;
	width: 18px;
	color: var(--tt-blue);
	font-size: 16px;
	text-align: center;
}

/* price and button sit at the bottom, so cards in a row line up */
body .tt-tour-card__footer {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--tt-space-3);
	width: 100%;
	margin-top: auto;
	padding-top: var(--tt-space-4);
	border-top: 1px solid var(--tt-lilac-tint);
}
body .tt-tour-card__price { margin: 0; line-height: 1.2; }
body .tt-tour-card__price-label {
	display: block;
	margin-bottom: var(--tt-space-1);
	color: var(--tt-ink-muted);
	font-size: 14px;
}
body .tt-tour-card__price-amount {
	color: var(--tt-wine);
	font-size: 24px;
	font-weight: 700;
}
body .tt-tour-card__price-was {
	color: var(--tt-ink-muted);
	font-size: 16px;
}
body .tt-tour-card .tt-tour-card__link { margin: 0; }

/* row layout (medium / full listings, search results): photo left, content right; stacks on mobile */
@media (min-width: 768px){
	body .tt-tour-card--row .tt-tour-card__inner { flex-direction: row; }
	body .tt-tour-card--row .tt-tour-card__media-wrap {
		flex: 0 0 40%;
		max-width: 420px;
	}
	body .tt-tour-card--row .tt-tour-card__media {
		height: 100%;
		aspect-ratio: auto;
		min-height: 240px;
	}
	body .tt-tour-card--row .tt-tour-card__body { padding: var(--tt-space-6); }
}

/* -- spacing between components: each block component leaves 24px below it; buttons and pills in a row wrap with a gap -- */
body .tt-banner,
body .tt-factbar,
body .tt-price,
body .tt-panel,
body .tt-points,
body .tt-footer-contact { margin-bottom: var(--tt-space-5); }
body .tt-btn,
body .tt-pill { margin: 0 var(--tt-space-2) var(--tt-space-2) 0; }
body .tt-banner__actions .tt-btn { margin: 0; }