/* Shared contrast corrections. Loaded after every page-specific stylesheet. */

/* The brand red is an accent. Avoid low-contrast grey copy on large red fields. */
.journal-intro {
	color: var(--bp-white);
	background: var(--bp-deep);
}
.journal-intro > div > p { color: rgba(255, 255, 255, .82); }
.journal-intro h2 em { color: var(--bp-acid); }

.journal-index {
	color: var(--bp-deep);
	background: var(--bp-paper);
}
.journal-index__heading {
	border-color: rgba(12, 23, 19, .28);
}
.journal-index__heading > p,
.journal-index__heading > p strong { color: var(--bp-deep); }

.journal-card,
.journal-card--1,
.journal-card--2,
.journal-card--3,
.journal-card--4 {
	color: var(--bp-deep);
	background: var(--bp-white);
	border: 1px solid rgba(12, 23, 19, .18);
}
.journal-card--featured {
	color: var(--bp-white);
	background: var(--bp-deep);
	border-color: var(--bp-deep);
}
.journal-card > p {
	color: #3f4b47;
	opacity: 1;
}
.journal-card--featured > p { color: rgba(255, 255, 255, .82); }
.journal-card__meta,
.journal-card__link { border-color: currentColor; }
.journal-card__link:hover,
.journal-card h3 a:hover { color: var(--bp-acid); }

.journal-pagination a,
.journal-pagination .current {
	color: var(--bp-deep);
	background: var(--bp-white);
	border-color: rgba(12, 23, 19, .35);
}
.journal-pagination .current {
	color: var(--bp-white);
	background: var(--bp-deep);
	border-color: var(--bp-deep);
}

.journal-article__nav {
	color: var(--bp-white);
	background: var(--bp-deep);
}
.journal-article__nav a {
	color: inherit;
	border-color: rgba(255, 255, 255, .3);
}
.journal-article__body,
.journal-article__content { color: var(--bp-deep); }
.journal-article__content p { color: #3f4b47; }
.journal-article__content section {
	border-color: rgba(12, 23, 19, .28);
}

/* Other shared templates that previously placed grey text on brand red. */
.hire-trust,
.hire-category-acid,
.contact-quick,
.hotel-card-featured,
.shop-card-featured {
	color: var(--bp-white);
	background: #8f0808;
}
.hire-trust p,
.hotel-card-featured :is(.hotel-card-meta, .hotel-card-copy > p, .hotel-location span),
.shop-card-featured :is(.shop-card-details span, .shop-card-contact span) {
	color: rgba(255, 255, 255, .82);
}
.hotel-card-featured .hotel-card-meta span:last-child { color: var(--bp-white); }
.hotel-card-featured :is(.hotel-amenities li, .hotel-location),
.shop-card-featured :is(.shop-card-details > div, .shop-card-contact) {
	border-color: rgba(255, 255, 255, .45);
}

.button-acid {
	color: var(--bp-white);
	background: #a60808;
}

/* Explicit foregrounds for every content-bearing dark surface. This avoids
 * inherited body/card colours turning dark after a component is moved or a
 * page-specific stylesheet changes its load order. */
.cafes-hero,
.cafes-route,
.hire-category-dark,
.hotels-hero,
.home-ride-card--dark,
.home-store-category--4,
.gps-hero,
.tours-hero,
.workshop-hero,
.workshop-process,
.workshop-service-dark,
.workshop-service-coral,
.faq-help,
.things-hero {
	color: var(--bp-white);
}

.cafes-hero :is(h1, p, a, strong),
.cafes-route :is(h2, li, strong),
.hire-category-dark :is(h2, h3, p, a, strong),
.hotels-hero :is(h1, h2, p, a, strong),
.home-ride-card--dark :is(h2, h3, p, a, strong),
.home-store-category--4 :is(h2, h3, p, a, strong),
.gps-hero :is(h1, h2, p, a, strong),
.tours-hero :is(h1, h2, p, a, strong),
.workshop-hero :is(h1, h2, p, a, strong),
.workshop-process :is(h2, h3, p, a, strong),
.workshop-service-dark :is(h3, p, strong),
.workshop-service-coral :is(h3, p, strong),
.faq-help :is(h2, h3, p, a, strong),
.things-hero :is(h1, h2, p, a, strong) {
	color: inherit;
}

/* The featured recommendation card uses the brand red as a dark surface. */
.cafe-card-featured,
.cafe-card-coral {
	color: var(--bp-white);
	background: #8f0808;
}
.cafe-card-featured :is(h3, address, .cafe-area, .text-link),
.cafe-card-coral :is(h3, address, .cafe-area, .text-link) {
	color: var(--bp-white);
}
.cafe-card-featured address,
.cafe-card-coral address { border-color: rgba(255, 255, 255, .45); }

/* The red accent card needs a single dark foreground; its inherited grey labels
 * and links do not have enough contrast against the red surface. */
.cafe-card-acid,
.cafe-card-acid :is(h3, p, address, .cafe-area, .text-link) {
	color: var(--bp-deep);
}
.cafe-card-acid address { border-color: rgba(23, 42, 36, .5); }

/* Pale lavender complements the hotel rider section's purple surface better
 * than the global red accent while retaining clear emphasis. */
.hotel-rider-copy h2 em,
.hotel-rider-points li > span {
	color: #c9c0ff;
}

/* Keep the hotel amenities grid legible over its orange surface. */
.hotel-detail-amenity-grid {
	border-top-color: rgba(23, 42, 36, .6);
}
.hotel-detail-amenity-grid > div {
	border-right-color: rgba(23, 42, 36, .6);
	border-bottom-color: rgba(23, 42, 36, .6);
}
.hotel-detail-amenity-grid > div:nth-child(2n) {
	border-right: 0;
}
@media (max-width: 760px) {
	.hotel-detail-amenity-grid > div { border-right: 0; }
}

/* Accurate Tenerife location-map prototype for Barceló Tenerife. */
.hotel-location-map--tenerife {
	min-height: 0;
	background: transparent;
}
.hotel-location-map--tenerife > img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.hotel-location-map--tenerife .hotel-map-pin--accurate {
	top: var(--hotel-map-y);
	left: var(--hotel-map-x);
	right: auto;
	bottom: auto;
	transform: translate(-50%, -100%);
	box-shadow: 0 .35rem 1rem rgba(23, 42, 36, .28);
}
/* Buttons must retain their own contrast even inside coloured cards. */
.button-dark,
.cafe-card-featured .button-dark {
	color: var(--bp-white);
	background: var(--bp-deep);
}
.button-light {
	color: var(--bp-deep);
	background: var(--bp-white);
}