/* ==========================================================================
   kcb.css - Kingdom Community Bank site layer.

   Loaded LAST in header.inc, after bootstrap.css / fonts.css / style.css, so
   it wins over the purchased template at equal specificity. Everything KCB
   adds or corrects lives here rather than being edited into the 340KB
   template stylesheet, which stays vendor-clean and replaceable.

   NOTE: header.inc loads this with a ?v= query string. Bump that version
   whenever you edit this file or the edge cache will keep serving the old
   copy (same rule as the FVA portal's portal.css).

   Sections:
     1. Responsive safety net
     2. Header
     3. Footer
     4. Money tools cards
     5. Home page slider
   ========================================================================== */


/* ==========================================================================
   1. RESPONSIVE SAFETY NET
   --------------------------------------------------------------------------
   The template wraps the whole document in .page { overflow-x: hidden }, so
   anything wider than the screen is not scrolled to - it is silently CLIPPED.
   A 600px video on a 375px phone simply loses its right-hand third and nobody
   notices. These rules stop content going over the edge in the first place.
   ========================================================================== */

/* Images and embeds never exceed their column. `height: auto` keeps the
   aspect ratio when a width/height attribute is present in the markup. */
.page img,
.page iframe,
.page video,
.page object,
.page embed {
	max-width: 100%;
}

.page img {
	height: auto;
}

/* Long unbroken strings (URLs, member numbers, e-mail addresses) wrap instead
   of pushing the layout wide. */
.page p,
.page li,
.page td,
.page dd {
	overflow-wrap: break-word;
}

/* Responsive 16:9 video embed. Wrap an iframe in TWO divs:
       <div class="kcb-video-outer">
         <div class="kcb-video"><iframe src="..." ...></iframe></div>
       </div>
   padding-bottom rather than aspect-ratio, because this site still gets a
   long tail of older iOS Safari.

   The outer div is what carries max-width, and that is not decoration. A
   percentage padding resolves against the width of the CONTAINING BLOCK, not
   against the element itself - so with max-width on the same element that
   holds padding-bottom: 56.25%, an 800px-wide video sitting in a 1170px
   container gets 658px of padding instead of 450px and the box is far too
   tall. Splitting them makes the percentage resolve against the 800px
   limiter, which is what the 16:9 ratio assumes. */
.kcb-video-outer {
	max-width: 800px;
	margin: 0 auto;
}

.kcb-video {
	position: relative;
	width: 100%;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
}

.kcb-video iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* A table that genuinely cannot reflow (a rate table, a repayment schedule)
   goes inside this so it scrolls on its own rather than being cut off.
   -webkit-overflow-scrolling gives momentum scrolling on iOS. */
.kcb-scroll {
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* Layout tables used purely for centring/positioning (this site has a number
   of them, inherited) behave like a block on narrow screens. */
.kcb-layout-table,
.kcb-layout-table > tbody > tr > td {
	display: block;
	width: 100% !important;
	max-width: 100%;
}

/* Form controls sized with a `size` attribute or a pixel width can be wider
   than a phone. Never let one out of its container. */
.page input,
.page select,
.page textarea {
	max-width: 100%;
}

/* Legacy member forms (mydetails, online_requests, loan_applications).
   Those inputs were sized with size='60%' / size='45%' / size='20%'. The size
   attribute counts CHARACTERS and must be a plain integer - a percentage is
   invalid, so browsers fell back to parsing the leading digits: size='60%'
   became a 60-CHARACTER box about 446px wide, which no phone can show. The
   attribute has been replaced with these two classes. */
.kcb-in-wide {
	width: 55%;
	min-width: 180px;
	max-width: 340px;
}

.kcb-in-short {
	width: 140px;
	max-width: 100%;
}

/* Those forms put a 40%-wide right-aligned label beside each input. Below
   phone width there is no room for two columns, so the label goes above its
   field and both run full width. The labels carry inline widths, which is why
   this needs !important to reach them. */
@media (max-width: 575.98px) {
	.page form label[style*="width: 40%"],
	.page form label[style*="width:40%"] {
		display: block;
		width: 100% !important;
		text-align: left !important;
		margin-bottom: 4px;
	}
	.kcb-in-wide,
	.kcb-in-short {
		width: 100%;
		max-width: 100%;
	}
}

/* Loan calculator: the "how much do you need to borrow" row was a two-cell
   layout table holding a 396px range slider and a 220px amount box - 644px
   wide in total, so a third of it was clipped on a phone. Now a flex row that
   wraps. */
.kcb-calc-amount {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: center;
	gap: 10px 24px;
	text-align: left;
	margin-bottom: 10px;
}

.kcb-calc-slider {
	flex: 1 1 300px;
	max-width: 460px;
}

.kcb-calc-slider input[type="range"] {
	width: 100%;
}

.kcb-calc-value {
	flex: 0 0 200px;
	max-width: 200px;
}

/* Touch targets: the template's small buttons are below the 44px recommended
   minimum on phones, and side-by-side buttons end up too close to tap. */
@media (max-width: 575.98px) {
	.page .button-sm {
		min-height: 44px;
		line-height: 1.4;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
}


/* ==========================================================================
   2. HEADER
   --------------------------------------------------------------------------
   The RD Navbar skeleton and its data-* attributes are left exactly as the
   template expects - core.min.js reads them to switch between the static
   (desktop) and fixed (mobile) layouts. What is restyled here is the content
   KCB put INSIDE the aside panel: the contact details and the three call to
   action buttons, which were previously a <table> of stacked rows.
   ========================================================================== */

/* The phone and e-mail blocks share one column rather than sitting side by
   side. This is what makes the three buttons fit on a single row: the aside
   panel is 950px wide on a desktop, and two contact blocks in a row left only
   413px for the actions, so they wrapped onto three ragged rows of differing
   heights. Stacked, the contacts take ~270px and the buttons get ~650px -
   enough for one tidy row, and a shorter header into the bargain. */
.kcb-header-contacts {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* Contact block: icon beside a two-line body, wrapping cleanly. */
.kcb-header-contact {
	display: flex;
	align-items: center;
	gap: 12px;
	line-height: 1.3;
}

/* Sizing and colour come from the template's own .icon-md / .icon-modern,
   which stay on the element - only the flex behaviour is set here. */
.kcb-header-contact .kcb-header-contact-icon {
	flex: 0 0 auto;
}

.kcb-header-contact-main {
	min-width: 0;
}

.kcb-header-contact-primary {
	display: block;
	font-weight: 700;
	color: #222222;
	font-size: 1.05em;
}

.kcb-header-contact-primary:hover {
	color: #92118f;
}

.kcb-header-contact-note {
	display: block;
	font-size: 0.8em;
	margin-top: 2px;
}

/* The three actions. A wrapping row - not a table - so they sit side by side
   where there is room and stack full width on a phone. */
.kcb-header-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

/* margin: 0 is doing real work. The template applies a 40px top margin to any
   .button that follows a sibling (its vertical stacking convention). Inside a
   flex row that pushed the 2nd and 3rd buttons 40px down the line, so the
   three sat at different heights and the row was 80px tall instead of 40px.
   The gap property handles the spacing here instead. */
.kcb-header-actions .button {
	flex: 0 1 auto;
	white-space: nowrap;
	margin: 0;
}

/* Inside the fixed (mobile/tablet) panel the actions go full width and become
   properly tappable, and the whole panel is allowed to scroll if the phone is
   short - previously long panels could not be reached. */
.rd-navbar-fixed .rd-navbar-collapse-content {
	max-width: calc(100vw - 20px);
	max-height: calc(100vh - 76px);
	overflow-y: auto;
}

.rd-navbar-fixed .kcb-header-actions {
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
}

.rd-navbar-fixed .kcb-header-actions .button {
	width: 100%;
	text-align: center;
}

/* On desktop the template spaces the aside children with margin-left: 50px,
   which is too much once the actions are a compact row. */
@media (min-width: 1200px) {
	.rd-navbar-corporate.rd-navbar-static .rd-navbar-collapse-content > * + * {
		margin-left: 30px;
	}
}

/* The announcement banner (tblWebsiteSettings settingID 2). Was an inline
   styled div; now it can breathe and stays legible on a phone. */
.kcb-banner {
	display: block;
	width: 100%;
	background-color: #8d0178;
	color: #ffffff;
	text-align: center;
	font-size: 1em;
	font-weight: 400;
	padding: 8px 16px;
	line-height: 1.4;
}

a.kcb-banner:hover,
a.kcb-banner:focus {
	color: #ffffff;
	background-color: #7a0167;
	text-decoration: none;
}


/* ==========================================================================
   3. FOOTER
   --------------------------------------------------------------------------
   Replaces a nested col-md-6 grid that paired each accreditation logo with a
   caption in a two-column ladder - the rows never lined up because the logos
   are different heights. Now: three equal information columns, then a single
   even strip of accreditations, then the legal line.
   ========================================================================== */

.kcb-footer {
	padding-top: 40px;
	padding-bottom: 20px;
}

.kcb-footer h4 {
	font-size: 1.15em;
	margin-bottom: 14px;
}

/* Three columns that collapse to one on a phone without Bootstrap's
   col-sm quirks. auto-fit means two columns on a tablet, three on desktop. */
.kcb-footer-cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 30px 40px;
}

.kcb-footer-cols p {
	font-size: 0.9em;
	line-height: 1.6;
}

.kcb-footer-branches .kcb-branch + .kcb-branch {
	margin-top: 14px;
}

.kcb-footer-links {
	list-style: none;
	padding: 0;
	margin: 0;
	font-size: 0.9em;
	line-height: 1.9;
}

.kcb-footer-links a:hover {
	text-decoration: underline;
}

.kcb-footer-social {
	margin-top: 18px;
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 0.9em;
}

/* Accreditation strip: every logo gets the same box, vertically centred, with
   its caption underneath. Wraps to as many rows as it needs. */
.kcb-accreditations {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 24px;
	margin-top: 40px;
	padding-top: 30px;
	border-top: 1px solid rgba(255, 255, 255, 0.18);
	text-align: center;
}

.kcb-accreditation {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.kcb-accreditation-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 64px;
	margin-bottom: 10px;
}

.kcb-accreditation-logo img {
	max-height: 64px;
	max-width: 100%;
	width: auto;
}

/* The FSCS mark is supplied on a white background and needs one behind it. */
.kcb-accreditation-logo.kcb-on-white {
	background-color: #ffffff;
	padding: 6px 10px;
	border-radius: 3px;
}

.kcb-accreditation p {
	font-size: 0.75em;
	line-height: 1.5;
	margin: 0;
}

.kcb-accreditation a {
	text-decoration: underline;
}

/* Legal strip: reversed logo beside the regulatory wording. */
.kcb-footer-legal {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 24px;
	margin-top: 30px;
	padding-top: 24px;
	border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.kcb-footer-legal-logo {
	flex: 0 0 150px;
}

.kcb-footer-legal-logo img {
	width: 150px;
}

.kcb-footer-legal-text {
	flex: 1 1 300px;
}

.kcb-footer-legal-text p {
	font-size: 0.75em;
	line-height: 1.6;
	margin-bottom: 8px;
}

.kcb-footer-legal-text .kcb-footer-privacy {
	font-size: 0.95em;
	font-weight: 700;
}

.kcb-footer-legal-text .kcb-footer-privacy a {
	text-decoration: underline;
}

@media (max-width: 575.98px) {
	.kcb-footer-legal {
		justify-content: center;
		text-align: center;
	}
}


/* ==========================================================================
   4. MONEY TOOLS CARDS
   --------------------------------------------------------------------------
   Used on money_tools.asp and on the home page. Two large, obviously
   clickable cards - the whole card is the link, not just the button.
   ========================================================================== */

.kcb-tools {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 30px;
	margin-top: 30px;
	text-align: left;
}

.kcb-tool-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 30px;
	background-color: #ffffff;
	border: 1px solid #e4e4e8;
	border-top: 4px solid #92118f;
	border-radius: 4px;
	color: #333333;
	transition: box-shadow .2s ease, transform .2s ease;
}

a.kcb-tool-card:hover,
a.kcb-tool-card:focus {
	color: #333333;
	text-decoration: none;
	box-shadow: 0 8px 24px -8px rgba(0, 0, 0, .28);
	transform: translateY(-2px);
}

.kcb-tool-card.kcb-tool-budget {
	border-top-color: #3793a8;
}

.kcb-tool-icon {
	font-size: 40px;
	line-height: 1;
	color: #92118f;
	margin-bottom: 14px;
}

.kcb-tool-budget .kcb-tool-icon {
	color: #3793a8;
}

.kcb-tool-card h4 {
	margin: 0 0 10px;
	font-size: 1.25em;
}

.kcb-tool-card p {
	font-size: 0.95em;
	line-height: 1.6;
	margin: 0 0 18px;
}

/* Pushes the call to action to the bottom so cards of different text lengths
   still line their buttons up. */
.kcb-tool-cta {
	margin-top: auto;
	font-weight: 700;
	color: #92118f;
}

.kcb-tool-budget .kcb-tool-cta {
	color: #3793a8;
}

/* Free-standing note about third-party tools / data protection. */
.kcb-tool-note {
	margin-top: 30px;
	padding: 16px 20px;
	background-color: #f4f4f6;
	border-left: 4px solid #cfcfd6;
	font-size: 0.85em;
	line-height: 1.6;
}

.kcb-tool-note p:last-child {
	margin-bottom: 0;
}

/* Inline promo used part-way down a content page (budgeting, benefits). */
.kcb-tool-promo {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px;
	margin: 26px 0;
	padding: 22px 26px;
	background-color: #f7f2f7;
	border-left: 5px solid #92118f;
	border-radius: 3px;
}

.kcb-tool-promo-body {
	flex: 1 1 260px;
}

.kcb-tool-promo-body h4 {
	margin: 0 0 6px;
	font-size: 1.1em;
}

.kcb-tool-promo-body p {
	margin: 0;
	font-size: 0.9em;
	line-height: 1.55;
}

.kcb-tool-promo .button {
	flex: 0 0 auto;
}

@media (max-width: 575.98px) {
	.kcb-tool-promo .button {
		width: 100%;
		text-align: center;
	}
}


/* Home page promo bar (currently the Tapped film).
   A single compact strip, deliberately NOT one of the template's
   "section section-xs" blocks - those carry 40px of vertical padding, which on
   this bar meant 80px of space around 84px of text and pushed the carousel far
   down the first screen.

   Distinct from .kcb-banner in section 2, which is the database-driven
   announcement bar emitted by header.inc on every page. This one is hard-coded
   on the home page only. If the two ever appear together, this sits below it.

   The whole strip is the link, so there is no small "click here" target. */
.kcb-promo-bar {
	display: block;
	background-color: #ff99e9;
	color: #1a1a1a;
	text-align: center;
	padding: 10px 16px;
	font-size: 17px;
	line-height: 1.4;
	text-decoration: none;
}

.kcb-promo-bar:hover,
.kcb-promo-bar:focus {
	background-color: #ff85e4;
	color: #1a1a1a;
	text-decoration: underline;
}

.kcb-promo-bar-title {
	font-weight: 700;
}

/* Stops the line running edge to edge on a very wide screen. */
.kcb-promo-bar-inner {
	display: inline-block;
	max-width: 1170px;
}

@media (max-width: 575.98px) {
	.kcb-promo-bar {
		font-size: 15px;
		padding: 9px 14px;
	}
}


/* ==========================================================================
   5. HOME PAGE SLIDER
   --------------------------------------------------------------------------
   The slide caption is KCB purple (#92118f) sitting straight on the
   photograph. The template lays a white scrim over the image to keep that
   readable - but only below 768px: from tablet up it sets
   `.swiper-slider-light .swiper-slide::before { display: none }`, so on
   desktop the legibility of the headline depends entirely on how pale that
   part of the photograph happens to be. That is why the slides have always
   had to be washed-out stock images.

   *** THAT SCRIM NEVER SHOWS. Do not try to use it. ***

   The slider runs with data-effect="interleave", and for that effect the
   template sets `.swiper-slider-light[data-effect='interleave'] .slide-inner
   { background: inherit }`. So .slide-inner paints the photograph a SECOND
   time, and .slide-inner sits ABOVE .swiper-slide::before in the paint order.
   Measured on the live page, every slide's inner covers its slide exactly, so
   the ::before scrim is completely hidden while the carousel is at rest.

   It becomes visible for one reason only: the interleave effect translates
   .slide-inner sideways, which briefly UNCOVERS the scrim underneath. That is
   what produced the "washed out, mostly white on the left" first paint - a
   97%-white gradient flashing through wherever the inner had slid away from,
   then vanishing once the carousel settled.

   So the scrim is applied to .slide-inner::before instead, where it sits
   between the photograph and the caption and is therefore always in effect,
   in every state, with nothing to uncover. The ::before on .swiper-slide is
   switched off entirely.

   (If the slider is ever changed away from data-effect="interleave",
   .slide-inner loses its inherited background and this reasoning changes.)

   See images/README-slider.txt for the image spec.
   ========================================================================== */

/* Retire the template's scrim layer. At rest it is invisible, and in motion it
   is a flash of white - it cannot do anything useful either way. */
.swiper-slider-light .swiper-slide::before {
	display: none;
}

/* A soft white halo behind the purple text catches the case where a new
   photograph is dark exactly where the headline falls. */
.swiper-slider-light .swiper-slide-caption h2 {
	text-shadow: 0 1px 10px rgba(255, 255, 255, .75);
}

/* Caption treatment for a BUSY photograph.
   Used by the money tools slide (the desk and calculator shot). That picture
   has a dark sweater, a mid-tone hand and a lot of fine detail - calculator
   keys, fingers, foliage - right where the caption falls.

   It does three things, not one:

     1. a scrim on .slide-inner::before - the layer that actually works, see
        the section note above;
     2. the light spans go from weight 300 to 400. Thin type over fine detail
        reads badly however bright the background is, and this is a large part
        of what makes the caption legible. They still read as light against
        the 700 bold word beside them;
     3. a tighter, brighter halo so each glyph keeps its own edge.

   ON THE SHAPE OF THE GRADIENT. This started as the template's shape - darkest
   at the left edge, clearing to the right - and that is wrong for this
   photograph. The picture is at its LIGHTEST on the left (white desk, pale
   out-of-focus background) and at its darkest through the middle, where the
   sweater and hand are. A left-heavy gradient therefore put 90 per cent white
   over the part that needed none, bleaching the pot plant out of the top-left
   corner, while the genuinely dark middle got the weakest coverage.

   Measured column by column - the white alpha each column needs to lift its
   darkest pixels to 3:1 against the purple - the requirement is nearly flat at
   55 to 60 per cent all the way across, not a slope at all. And the caption
   does not begin until x = 7.8%, so the strip to the left of it needs nothing
   whatsoever.

   Hence this shape: essentially clear at the left edge, rising over the ~100px
   before the text starts, a plateau of just over 60 per cent behind the words,
   then falling away to nothing past them. That measures zero per cent of the
   caption area below the 3:1 WCAG AA minimum for large text - the same
   compliance the 90 per cent version achieved - with a left edge of 5 per cent
   instead of 90. The photograph survives; the text is still legible.

   (3:1 is the correct bar here: the headline is 44px, comfortably "large text"
   under WCAG. Much of the caption sits between 3:1 and 4.5:1, which is the
   threshold for body copy and does not apply to a headline this size.)

   Every selector carries .swiper-slider-light so it outranks the general slide
   rules in this file at any width, media query or not. */
.swiper-slider-light .kcb-slide-busy-photo .slide-inner {
	position: relative;
}

.swiper-slider-light .kcb-slide-busy-photo .slide-inner::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 0;
	pointer-events: none;
	background: linear-gradient(to right, rgba(255, 255, 255, .05) 0%, rgba(255, 255, 255, .60) 7%, rgba(255, 255, 255, .64) 55%, rgba(255, 255, 255, .42) 72%, rgba(255, 255, 255, .12) 88%, rgba(255, 255, 255, 0) 100%);
}

/* The caption has to sit above that scrim rather than under it. */
.swiper-slider-light .kcb-slide-busy-photo .slide-inner > .container {
	position: relative;
	z-index: 1;
}

/* The weight is set on the INNER span, not on .font-weight-light itself.
   .font-weight-light is a Bootstrap utility declared `font-weight: 300
   !important`, so no amount of specificity on that element can override it and
   the only way to win there would be another !important. The caption nests a
   plain <span class="wow"> inside each weight span, and that inner element
   carries no font-weight declaration at all - so a normal rule on it takes
   effect and inherits nothing. The bold span is untouched: its inner span
   keeps inheriting 700. */
.swiper-slider-light .kcb-slide-busy-photo .swiper-slide-caption .font-weight-light > .wow {
	font-weight: 400;
}

.swiper-slider-light .kcb-slide-busy-photo .swiper-slide-caption h2 {
	text-shadow: 0 1px 4px rgba(255, 255, 255, .95), 0 0 14px rgba(255, 255, 255, .85);
}

/* Per-slide caption lift.
   Slide 2 is the St Andrews photograph, and the Swilcan Bridge sits low on the
   left - x 10-19%, y 61-71% of the image - which is exactly where the "Join
   now" button lands. Measured on the live page, the button occupies y 56-66%
   of the slide, so it covered the top half of the bridge.

   Only wide screens are affected, which is why this is inside a media query.
   The slide box is around 570px tall at every width, so on a narrower viewport
   the slide is much squarer than the 2.47:1 image; `cover` then centre-crops
   the image horizontally and the bridge is off-screen entirely. At roughly
   1100px and up the whole width comes into view and the two collide. Above
   about 1800px the centred container has moved the caption far enough right
   that they no longer overlap, but the lift is harmless there.

   translateY rather than adjusting the caption's padding: the caption is
   centred by a flex parent, so a padding change moves the text by only HALF
   the amount and shifts again whenever the headline rewraps. A transform moves
   it by exactly this many pixels, whatever the content does. */
@media (min-width: 992px) {
	.kcb-slide-caption-up .swiper-slide-caption {
		transform: translateY(-55px);
	}
}

/* On a phone the three-part headline runs long; tighten it so the "Join now"
   button stays on screen with it. */
@media (max-width: 575.98px) {
	.swiper-slider-light .swiper-slide-caption h2 {
		line-height: 1.25;
	}
	.swiper-slider-light .swiper-slide-caption .button {
		margin-top: 8px;
	}
}