/*
 * MCF Scotland — site specific overrides.
 * Loaded last, after the template stylesheets.
 *
 * BRAND PALETTE (navy)
 * --------------------------------------------------------------------------
 * The template shipped five demo accent colours. This build uses the
 * "protein" demo, whose accent was cyan #00b0d5, with an orange gradient
 * (#ff5600 -> #ffa705) on the shared base components.
 *
 * Those have been rewritten in place inside style.css / responsive.css to:
 *
 *     #12294b   navy       primary — buttons, links, active nav, headings accent
 *     #1e4a87   navy light secondary — gradient partner, hovers
 *     #eef3fa   navy tint  pale wash behind imagery (was #edf8ff)
 *
 * Cyan was also baked into several flat PNGs, which were hue-shifted to match:
 *     img/banner/protein_banner_bg.png
 *     img/images/choose_img_shape.png
 *     img/brand/s_brand_logo01..06.png
 *     img/icon/features_icon01..06.png
 *
 * So to re-skin the site, change those values in style.css / responsive.css
 * and re-run the same hue shift over that image list.
 *
 * LOGO
 * --------------------------------------------------------------------------
 * img/logo/mcf_logo.png        navy artwork — white backgrounds (header, off-canvas)
 * img/logo/mcf_logo_white.png  white artwork — dark backgrounds (mobile menu)
 * Both are the supplied MCF mark, trimmed to its ink bounds. The template
 * constrains them via .logo img (154px) and .nav-logo img (150px).
 */

/* Nothing to override at present — the palette lives in the files above. */

/* Line-up role label ------------------------------------------------------ */
/*
 * .blog-overlay-tag was built for a category <a>; the template hangs the pill
 * styling off `> a` only. Our roles are not links, so mirror that rule onto the
 * <span> — without it the text sits naked and half off the card edge.
 */
.blog-overlay-tag > span {
	display: inline-block;
	background: #fff;
	box-shadow: 0px 16px 32px 0px rgba(137, 137, 137, .20);
	padding: 10px 20px;
	line-height: 1;
	border-radius: 50px;
	font-size: 13px;
	font-weight: 700;
	color: var(--mcf-navy, #12294b);
	position: relative;
	z-index: 1;
}

/* Names run to two lines at some widths — keep every card the same height */
.protein-blog .blog-post-item {
	height: calc(100% - 30px);
}
.protein-blog .blog-post-content .title {
	min-height: 2.6em;
}

/* Footer social row ------------------------------------------------------- */
/*
 * .fw-btn is the app-store badge slot — it stacks children with margin-top,
 * which turns a social row into a vertical column. This is a proper row.
 */
.footer-widget .fw-social {
	margin-top: 25px;
}
.footer-widget .fw-social ul {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.footer-widget .fw-social ul li {
	margin: 0;
}
.footer-widget .fw-social ul li a {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .08);
	color: #fff;
	font-size: 15px;
	transition: background .2s, color .2s;
}
.footer-widget .fw-social ul li a:hover,
.footer-widget .fw-social ul li a:focus-visible {
	background: #fff;
	color: #12294b;
}

/* Line-up portraits -------------------------------------------------------- */
/*
 * Supplied photos arrive at wildly different ratios (a 1600x1195 studio shot
 * next to a 370x370 headshot). object-fit crops every card to the same square
 * and biases the focal point upward so faces are never cut at the chin.
 *
 * Note there is deliberately NO overflow:hidden here. .blog-overlay-tag is
 * positioned bottom:-17px so the role pill hangs below the image edge by
 * design; clipping the thumb cuts the pill in half.
 */
.lineup-thumb {
	position: relative;
}
.lineup-thumb img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	object-position: 50% 22%;
	display: block;
	border-radius: 8px 8px 0 0;
	transition: filter .35s ease;
}
/* a brightness hover rather than a zoom — a zoom needs clipping, see above */
.blog-post-item:hover .lineup-thumb img {
	filter: brightness(1.05);
}

/* Older Safari has no aspect-ratio — fall back to a fixed height */
@supports not (aspect-ratio: 1 / 1) {
	.lineup-thumb img { height: 340px; }
}

/* Role pill: give long roles room and stop them wrapping mid-phrase */
.lineup-thumb .blog-overlay-tag {
	left: 16px;
	right: 16px;
}
.lineup-thumb .blog-overlay-tag > span {
	white-space: nowrap;
	font-size: 12px;
	padding: 9px 16px;
}

/* Decorative section watermark --------------------------------------------- */
/*
 * .section-title .overlay-title is 200px display type sitting behind the
 * heading. A value containing a space or hyphen wraps and the second line
 * lands on the content below it. Keep it on one line and inert.
 */
.section-title .overlay-title {
	white-space: nowrap;
	pointer-events: none;
	user-select: none;
}

/*
 * The template scales this to 140px on tablets and no further, so a seven
 * letter word is still ~490px wide and pushes a horizontal scrollbar onto
 * phones. Bring it down to something that actually fits the viewport.
 */
@media (max-width: 767px) {
	.section-title .overlay-title {
		font-size: 90px;
	}
}
@media (max-width: 479px) {
	.section-title .overlay-title {
		font-size: 58px;
	}
}

/* Roll of past ministers --------------------------------------------------- */
.lineup-alumni {
	margin-top: 30px;
	padding: 30px 34px;
	border-radius: 10px;
	background: #eef3fa;
	text-align: center;
}
.lineup-alumni h5 {
	font-size: 15px;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #12294b;
	margin: 0 0 12px;
}
.lineup-alumni p {
	margin: 0;
	color: #55637c;
	font-size: 15px;
	line-height: 1.9;
}

/* MCF L.O.L. strapline ----------------------------------------------------- */
.lol-strap {
	font-style: italic;
	font-weight: 600;
	color: #12294b;
}

/* Gallery tiles ------------------------------------------------------------ */
/*
 * The supplied photos run from 0.56 (tall portrait) to 1.78 (16:9) — a three
 * fold spread that makes an untamed grid look ragged. Crop every tile to a
 * common 4:3 so the wall reads as deliberate.
 *
 * The fixed box also means the layout is known before the image downloads,
 * which is what makes loading="lazy" safe next to isotope: the grid measures
 * correctly even for tiles that have not fetched yet.
 */
.gallery-product-item img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
}

@supports not (aspect-ratio: 4 / 3) {
	.gallery-product-item img { height: 260px; }
}

/* Sub-title on dark sections ---------------------------------------------- */
/*
 * .white-title only recolours .title. The sub-title keeps the brand accent,
 * which was a light cyan in the original theme and is now navy — invisible on
 * the #222 video band. Lift it to a light tint of the same hue.
 */
.section-title.white-title .sub-title {
	color: #9fc0ee;
}

/* Mandate icons ------------------------------------------------------------ */
/* .features-icon was built around an 80px image; these are glyphs now */
.features-icon i {
	font-size: 54px;
	line-height: 1;
	color: #12294b;
	transition: color .3s ease, transform .3s ease;
}
.features-item:hover .features-icon i,
.features-item.active .features-icon i {
	color: #1e4a87;
	transform: translateY(-3px);
}

/* Contact cards ------------------------------------------------------------ */
/* Reuses the mandate card so the two sections read as one system */
.contact-card {
	display: block;
	height: calc(100% - 30px);
	text-decoration: none;
	color: inherit;
}
.contact-card .contact-value {
	font-size: 18px;
	font-weight: 600;
	color: #12294b;
	margin-bottom: 6px;
	word-break: break-word;
}
.contact-card .contact-hint {
	font-size: 14px;
	color: #6b7890;
}
a.contact-card:hover .contact-value,
a.contact-card:focus-visible .contact-value {
	color: #1e4a87;
}
a.contact-card:focus-visible {
	outline: 2px solid #12294b;
	outline-offset: 3px;
}

.contact-note {
	max-width: 760px;
	margin: 20px auto 0;
}
.contact-note p {
	color: #55637c;
	margin: 0;
}

/* Contrast repairs on dark grounds ----------------------------------------- */
/*
 * The theme used a light cyan accent, which read fine on the dark footer and
 * video band. Navy does not. These are the places where the accent is used as
 * a text colour over something dark — lift them to a light tint of the brand.
 */
.protein-footer .fw-link > ul > li > a:hover,
.protein-footer .fw-link > ul > li > a:focus-visible,
.protein-footer .footer-quick-link ul li a:hover,
.protein-footer .footer-quick-link ul li a:focus-visible {
	color: #9fc0ee;
}

/* Card hover panel --------------------------------------------------------- */
/*
 * .features-item::before paints the dark hover panel at z-index:-1, and the
 * text flips to white to sit on it. Without a stacking context on the card the
 * panel falls behind the SECTION background, so on any tinted section the text
 * turned white on a light ground and vanished. z-index:1 scopes it to the card.
 */
.features-item {
	z-index: 1;
}

/* icon has to lift off the dark panel too */
.features-item:hover .features-icon i,
.features-item.active .features-icon i {
	color: #9fc0ee;
}
.contact-card:hover .contact-value,
.contact-card.active .contact-value {
	color: #fff;
}
.contact-card:hover .contact-hint,
.contact-card.active .contact-hint {
	color: #b5b5b5;
}

/* Avatar placeholder for line-up cards without a photo ---------------------- */
/* Same square footprint as a real portrait so the grid never shifts */
.lineup-avatar {
	width: 100%;
	aspect-ratio: 1 / 1;
	display: grid;
	place-items: center;
	background: linear-gradient(135deg, #eef3fa 0%, #dce5f2 100%);
	border-radius: 8px 8px 0 0;
	color: #9bb0cc;
}
.lineup-avatar i {
	font-size: 76px;
	line-height: 1;
}

@supports not (aspect-ratio: 1 / 1) {
	.lineup-avatar { height: 340px; }
}

/* About section portrait --------------------------------------------------- */
/*
 * The theme caps this at max-width:188px (150px on tablets) and sizes the disc
 * behind it at a fixed 306px, so a small portrait floats inside an oversized
 * circle. Two changes:
 *
 *  1. The cap is raised. An <img> with only max-width set never scales ABOVE
 *     its natural size, so a small file still renders sharp at 1:1 — the cap
 *     simply stops being the limit once a larger file is supplied.
 *  2. The disc is sized as a PERCENTAGE of the portrait rather than a fixed
 *     pixel value, so the composition stays balanced at any image size.
 */
.choose-img {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	z-index: 1;
}

.choose-img .main-img {
	max-width: 460px;
	width: auto;
	height: auto;
	position: relative;
	z-index: 2;
}

.choose-img .shape {
	width: 150%;
	max-width: none;
	height: auto;
	z-index: 0;
}

@media (max-width: 1199px) {
	.choose-img .main-img { max-width: 340px; }
}

@media (max-width: 991px) {
	/* back into the flow once the two columns stack */
	.choose-img {
		position: relative;
		left: auto;
		right: auto;
		top: auto;
		transform: none;
		margin-top: 50px;
	}
	.choose-img .main-img { max-width: 300px; }
}