/**
 * Website deals, styled to match the holiday proposal.
 *
 * Loaded only when "Match the holiday quote tool" is on and MooQuote is active.
 * The colours arrive as custom properties from Quote_Theme; this file handles
 * what a palette swap cannot — the serif headings, the calmer cards, the gold
 * small-caps eyebrows and the solid buttons that make a proposal read like a
 * proposal rather than a listings site.
 *
 * Written as overrides on top of frontend-holiday-ui.css so the original stays
 * untouched and unticking the setting restores it exactly.
 */

.lmhp-browser,
.lmhp-detail {
	font-family: var(--lmhp-q-font-body);
}

/* Headings ---------------------------------------------------------------- */

.lmhp-browser h1,
.lmhp-browser h2,
.lmhp-browser h3,
.lmhp-detail h1,
.lmhp-detail h2,
.lmhp-detail h3,
.lmhp-card__title,
.lmhp-detail__standfirst,
.lmhp-pricing__title,
.lmhp-related-card__body h3 {
	font-family: var(--lmhp-q-font-heading);
	font-weight: 400;
	letter-spacing: -0.01em;
}

/* Cards ------------------------------------------------------------------- */

/*
 * The originals are 26px-rounded with a lifting shadow. The proposal uses a
 * quieter card with a hairline border so the photography carries the page.
 */
.lmhp-card,
.lmhp-detail,
.lmhp-related-card {
	border-radius: var(--lmhp-q-radius) !important;
	background: var(--lmhp-surface) !important;
	box-shadow: var(--lmhp-glow) !important;
}

.lmhp-card:hover,
.lmhp-related-card:hover {
	transform: none;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.07) !important;
	border-color: var(--lmhp-accent-2) !important;
}

/* Eyebrows and small caps labels ------------------------------------------ */

/*
 * Every block on a proposal is labelled with a small gold caps line. Mapping
 * the deals' existing labels onto it is most of what makes the two read as one
 * product.
 */
.lmhp-card__price-label,
.lmhp-detail__price-label,
.lmhp-detail__eyebrow,
.lmhp-pricing__meta-label {
	font-family: var(--lmhp-q-font-body);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--lmhp-accent-2);
}

/*
 * The copy-link button.
 *
 * It used to take only the proposal's button font from here, on the assumption
 * that the palette would arrive through the custom properties in the base sheet
 * — which it does, right up until the site's own theme styles `button` and wins
 * on specificity. The colours are restated here for the same reason the enquiry
 * and card buttons below restate theirs.
 *
 * Outline rather than solid: this sits directly above the price and "Find out
 * More", and a second filled button in the primary colour competes with the one
 * that matters. Hairline border, muted proposal text, primary on hover — the
 * quiet end of the same palette.
 */
.lmhp-share-copy {
	font-family: var(--lmhp-q-font-button);
	border-color: var(--lmhp-border) !important;
	background: transparent !important;
	color: var(--lmhp-soft) !important;
	box-shadow: none !important;
}

/*
 * :not(.is-copied) because this rule is in a later sheet than the confirmation
 * state it would otherwise outrank — without it, moving the pointer over the
 * button you just pressed repaints the green "copied" pill back to accent while
 * "Link copied" is still sitting beside it.
 */
.lmhp-share-copy:hover:not(.is-copied) {
	border-color: var(--lmhp-accent) !important;
	background: rgba(var(--lmhp-accent-rgb), 0.06) !important;
	color: var(--lmhp-accent) !important;
}

/* Price ------------------------------------------------------------------- */

.lmhp-card__price-value,
.lmhp-detail__price,
.lmhp-pricing__meta-value {
	font-family: var(--lmhp-q-font-heading);
	font-weight: 400;
	letter-spacing: -0.02em;
	color: var(--lmhp-q-price);
}

/*
 * The discounted-price and "was" rules that lived here went with the markup —
 * see the note in frontend-holiday-ui.css. Cards now show one price, so there is
 * no saving for the two documents to disagree about.
 */
.lmhp-price-caveat {
	font-family: var(--lmhp-q-font-body);
}

/* Buttons ----------------------------------------------------------------- */

/*
 * Solid, squared-off and in the primary colour, exactly like "Choose this
 * holiday" on a proposal — rather than a white pill with a coloured outline.
 */
.lmhp-card__button,
.lmhp-related-card__button,
.lmhp-enquiry-trigger,
.lmhp-enquiry-submit {
	font-family: var(--lmhp-q-font-button);
	border-radius: var(--lmhp-q-radius-image) !important;
	background: var(--lmhp-accent) !important;
	border: 1px solid var(--lmhp-accent) !important;
	color: var(--lmhp-on-accent) !important;
	font-weight: 600;
	letter-spacing: 0.02em;
	box-shadow: none !important;
}

.lmhp-card__button:hover,
.lmhp-related-card__button:hover,
.lmhp-enquiry-trigger:hover,
.lmhp-enquiry-submit:hover {
	background: var(--lmhp-accent-2) !important;
	border-color: var(--lmhp-accent-2) !important;
	filter: none;
	transform: none;
}

/*
 * The share control sits directly against the call to action at the bottom of
 * a card, so it takes the same corner radius — a perfect circle beside a
 * squared-off proposal button reads as a stray element from another design.
 *
 * It stays an outline while the call to action is filled. Two solid buttons
 * side by side would read as two equal actions, and share is not one: it is
 * what you do after deciding, not instead of deciding.
 */
.lmhp-share-copy {
	border-radius: var(--lmhp-q-btn-radius) !important;
	border-width: 1px !important;
	border-color: var(--lmhp-accent) !important;
	color: var(--lmhp-accent) !important;
	box-shadow: none !important;
	transform: none !important;
}

.lmhp-share-copy:hover {
	background: var(--lmhp-accent) !important;
	border-color: var(--lmhp-accent) !important;
	color: var(--lmhp-on-accent) !important;
	box-shadow: none !important;
}

/* Chips and badges -------------------------------------------------------- */

/* The proposal's "Best value" flag: gold, small caps, no gradient. */
.lmhp-card__badge {
	background: var(--lmhp-accent-2) !important;
	color: var(--lmhp-on-accent) !important;
	border: 0 !important;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	box-shadow: none !important;
}

.lmhp-chip {
	background: var(--lmhp-chip) !important;
	color: var(--lmhp-chip-text) !important;
	border: 1px solid var(--lmhp-border) !important;
	box-shadow: none !important;
	font-weight: 600;
	letter-spacing: 0.06em;
}

/* Facts and pricing rows -------------------------------------------------- */

/*
 * The proposal lists facts as label-left / value-right rows separated by
 * hairlines. The deals already use that shape, so it only needs the rule.
 */
.lmhp-facts__row,
.lmhp-pricing__row {
	border-bottom: 1px solid var(--lmhp-border);
}

/* Search ------------------------------------------------------------------ */

.lmhp-search,
.lmhp-search__panel,
.lmhp-search__form {
	border-radius: var(--lmhp-q-radius) !important;
	border-color: var(--lmhp-border) !important;
	box-shadow: var(--lmhp-glow) !important;
	font-family: var(--lmhp-q-font-body);
}

.lmhp-search input,
.lmhp-search select,
.lmhp-search__field input,
.lmhp-search__field select {
	font-family: var(--lmhp-q-font-body);
	border-radius: var(--lmhp-q-radius-image);
	border-color: var(--lmhp-border);
}

.lmhp-search input:focus,
.lmhp-search select:focus {
	border-color: var(--lmhp-accent-2);
	outline: none;
	box-shadow: 0 0 0 3px rgba(var(--lmhp-accent-2-rgb), 0.18);
}

/* ---------------------------------------------------------------------------
   Scale, shape and ground
   ---------------------------------------------------------------------------
   Matching the palette alone still left the deals reading as a different site.
   Measured side by side against a live proposal: the deals sat on white at 16px
   with a sans-serif 40px page title and 14px-rounded buttons, the proposal on
   cream at 17px with a Georgia 64px title and full pills. These rules carry the
   rest of that across.
   --------------------------------------------------------------------------- */

/*
 * The cream ground is most of the "same brand" feeling. Applied to the plugin's
 * own wrapper rather than <body> so a theme with its own page chrome is left
 * intact; the negative inline padding lets the colour run the full width.
 */
/*
 * The proposal puts the cream on <body>, which is why a deals page tinted only
 * inside its own wrapper still read as a white page with a coloured panel on
 * it. Tint the page itself — but only on pages that actually show deals, via
 * the body class, so the rest of the site keeps its own background.
 */
body.lmhp-quote-match {
	background: var(--lmhp-q-page);
}

.lmhp-browser,
.lmhp-detail {
	background: var(--lmhp-q-page);
	font-size: var(--lmhp-q-text);
}

.lmhp-browser {
	max-width: var(--lmhp-q-width);
	margin-left: auto;
	margin-right: auto;
}

/* Headings: the proposal's are serif and considerably larger. */
.lmhp-browser h2,
.lmhp-detail h2 {
	font-family: var(--lmhp-q-font-heading);
	font-size: var(--lmhp-q-h2);
	line-height: 1.15;
}

/*
 * The page title is the THEME's h1.entry-title and sits outside the plugin's
 * markup, so it is reachable only via the body class added on deals pages.
 */
.lmhp-quote-match .entry-title,
.lmhp-quote-match .lmhp-browser > h1,
.lmhp-quote-match .lmhp-detail > h1 {
	font-family: var(--lmhp-q-font-heading);
	font-size: var(--lmhp-q-h1);
	line-height: 1.05;
	color: var(--lmhp-accent);
	font-weight: 400;
}

/* Card titles keep the serif but stay a step below the section headings. */
.lmhp-card__title {
	font-family: var(--lmhp-q-font-heading);
	font-weight: 400;
}

/* Pill buttons, as on the proposal. */
.lmhp-card__button,
.lmhp-related-card__button,
.lmhp-search__field--submit button,
.lmhp-detail .lmhp-button {
	border-radius: var(--lmhp-q-btn-radius) !important;
	font-family: var(--lmhp-q-font-button);
}

/* The price is the loud figure on a proposal card. */
.lmhp-card__price-value {
	font-family: var(--lmhp-q-font-heading);
	font-size: calc(var(--lmhp-q-h2) * 0.95);
	line-height: 1.1;
}

@media (max-width: 700px) {
	.lmhp-quote-match .entry-title {
		font-size: calc(var(--lmhp-q-h1) * 0.55);
	}

	.lmhp-browser h2,
	.lmhp-detail h2 {
		font-size: calc(var(--lmhp-q-h2) * 0.7);
	}
}