/* =========================================================
   VIKAND — header / footer chrome DESIGN.
   Layered over fw-chrome.css (structure). Every value here is
   measured from live vikand.com, not estimated.
   ========================================================= */

:root {
	--fw-logo-max-height:          73px;   /* live logo 800x291 shown at 200x73 */
	--fw-header-inner-max-width:   1200px;
	/* Live's header is 90px TALL IN TOTAL, so the 90px inner carries no
	   vertical padding — with 8px top and bottom the whole header came out
	   106px and pushed every page down 16px. */
	--fw-header-inner-padding:     0;
}

/* ---- Header ---------------------------------------------------- */
.fw-header { background: #fff; }
.fw-header__inner {
	min-height: 90px;
	/* The chrome uses the same column as the page content: 95% of the viewport
	   up to a 1200px ceiling. A fixed 20px gutter put the logo at x20 on a
	   phone where the design has it at x10. */
	width: 95%;
	max-width: 1200px;
	margin: 0 auto;
}
.fw-logo img { max-height: 73px; width: auto; }

/* Top-level nav links. Live: #333, 12px, weight 400, uppercase, Maven,
   padding 15px 25px 15px 20px. */
.fw-header__nav .fw-nav > li > a {
	display: block;
	color: #333;
	font-size: 12px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: normal;
	/* 15.6px, not 12px. Live's links are 46px tall (15 + 15.6 + 15) and a
	   line-height of 1 makes them 42, which lifts the whole nav and reports as
	   a four-pixel error on every page of the site. */
	line-height: 1.3;
	white-space: nowrap;
	text-decoration: none;
	/* 20px each side by default. Live reserves an extra 5px on the right of
	   the items that open a dropdown, for the arrow, and only those. Giving
	   every item the wider padding made the nav 15px too wide and shifted it
	   left on all 75 pages. */
	padding: 15px 20px;
}
.fw-header__nav .fw-nav > li.menu-item-has-children > a {
	position: relative;
	padding-right: 25px;
}
/* The arrow itself. Live draws it as a Font Awesome fa-angle-down in an 8x12
   box, 8px after the label and centred on it. Drawing it in CSS keeps the
   glyph without pulling an icon font onto every page for one character. */
.fw-header__nav .fw-nav > li.menu-item-has-children > a::after {
	content: "";
	position: absolute;
	right: 9px;
	top: 50%;
	width: 6px;
	height: 6px;
	margin-top: -5px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
}
.fw-header__nav .fw-nav > li > a:hover { color: var(--fw-secondary); }

/* Live sits the nav 20px from the top of the 90px header, not centred on it:
   the links run y20 to y66 inside a 90px header. */
.fw-header__inner > .fw-header__nav { align-self: flex-start; margin-top: 20px; }

/* ---- Footer -------------------------------------------------------
   Measured off live (contact-us, 1440px): the footer is 457px tall —
   72px of section padding, 45px inside it, then a four column row and
   the copyright 21px under the tallest column.
   ------------------------------------------------------------------- */
/* Live's footer stands 506px: 96 above its 309px content box, 101 below. At
   72/76 it came out 50px short on every page of the site. The inner grid's own
   45px is inside that box, not additional to it. */
.vk-footer { background: #2a2c37; color: #999; padding: 96px 0 101px; }
/* The footer keeps a wider gutter than the header: measured at 390px its
   column is 352 wide starting at x19, which is 90% of the viewport, where the
   header's logo sits at x10 on a 95% column. */
.vk-footer__inner {
	width: 90%;
	max-width: 1200px;
	box-sizing: border-box;
	margin: 0 auto;
	padding: 45px 30px;
	display: grid;
	/* Live's link columns are 212 / 212 / 154 wide on a 232 pitch; a 1fr last
	   column made it 386 and stopped "Seafarer Human Sustainability" wrapping.
	   The tracks carry the 20px inset on .vk-footer__col, so the fourth is 174
	   to render a 154 column. The trailing 1fr is live's empty right-hand space:
	   without it the copyright bar spanned 908px instead of the full 1140. */
	grid-template-columns: 290px 232px 232px 174px 1fr;
	row-gap: 21px;
}

/* Brand: logo 170x62, five 32px social circles 19px under it. */
.vk-footer__logo img { display: block; width: 170px; height: 62px; }
.vk-footer__social {
	display: flex; gap: 14.5px; list-style: none;
	margin: 19px 0 0; padding: 0;
}
.vk-footer__social a {
	display: flex; align-items: center; justify-content: center;
	width: 32px; height: 32px; border-radius: 50%;
	background: #88a6c3; color: #fff; font-size: 14.6px; text-decoration: none;
	/* Live eases the swap rather than snapping it. */
	transition: background-color 0.3s, color 0.3s;
}
/* Measured on live 2026-09-10 (forced :hover, contact-us at 1920): the circle
   and the glyph swap colours -- background #88a6c3 -> #fff and the icon
   #fff -> #88a6c3, over 0.3s. Ours lightened the circle to #b0c4db and left
   the glyph white, which is not what the design does. */
.vk-footer__social a:hover { background: #fff; color: #88a6c3; }

/* Columns: 14px/19.6 throughout. The headings are white and carry their colon.
   They are bold: live wraps them in a <strong>, and measuring the paragraph
   around it rather than the text itself made them look like regular weight. */
.vk-footer__col { padding-right: 20px; }
.vk-footer__heading {
	color: #fff; font-size: 14px; font-weight: 700;
	line-height: 19.6px; margin: 0 0 21px;
}
.vk-footer__col ul { list-style: none; margin: 0; padding: 0; }
.vk-footer__col li { margin: 0; }
.vk-footer__col a {
	display: block; color: #88a6c3; font-size: 14px;
	line-height: 19.6px; text-decoration: none;
}
/* Live takes these to white on hover, measured the same way. Ours lightened
   them to #b0c4db, which barely reads against the footer. */
.vk-footer__col a:hover { color: #fff; }

.vk-footer__bar { grid-column: 1 / -1; }
.vk-footer__bar p { color: #999; font-size: 14px; line-height: 19.6px; margin: 0; }
.vk-footer__bar a { color: #88a6c3; text-decoration: none; }
/* The bottom bar's links had no hover state at all -- Privacy Notice simply
   did not react. Every other footer link on the site goes white on hover
   (.vk-footer__col a:hover above); this one now does the same. */
.vk-footer__bar a:hover { color: #fff; }

@media (max-width: 979px) {
	.vk-footer { padding: 40px 0; }
	/* No side padding: the 95% width above already leaves the gutter the
	   design uses, and adding 20px on top of it narrowed the columns. */
	.vk-footer__inner { grid-template-columns: 1fr 1fr; gap: 30px; padding: 0; }
}
@media (max-width: 599px) {
	.vk-footer__inner { grid-template-columns: 1fr; }
}

/* Footer logo below the desktop breakpoint.
   Live stacks the footer and lets the logo fill its column: measured at
   282px/390, 433/600, 554/768 and 708/980 — 72.2% of the viewport at every
   one of them. Holding it at the desktop 170px left it a third of the size
   the design shows on a phone. */
@media (max-width: 1199px) {
	.vk-footer__logo img {
		width: 72.2vw;
		max-height: none;
		height: auto;
	}
}

/* ==========================================================================
   Navigation dropdowns
   The framework draws the panel with no ground of its own: transparent, no
   shadow, and its links at the page's 18px on a 32px line. Live's is a white
   card, 216px wide, with a soft shadow and 12px links on 26px rows — and it
   fades in rather than snapping. Every value below is measured off live.
   ========================================================================== */

.fw-nav .sub-menu {
	min-width: 216px;
	/* 20px top and bottom. Live's panel is 144 tall around four 26px rows —
	   the 40px is the column wrapper its mega-menu plugin adds, and without it
	   the panel closed 40px short of live's. */
	padding: 20px 0;
	background: #fff;
	border: 1px solid #fff;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
	/* Shown by opacity rather than `display`, so it can fade the way live's
	   does. `display: none` cannot be transitioned. */
	display: block;
	visibility: hidden;
	opacity: 0;
	margin-top: 8px;
	transition: margin-top 0.3s ease-in, opacity 0.3s ease-in, visibility 0.3s ease-in;
}

.fw-nav li:hover > .sub-menu,
.fw-nav li:focus-within > .sub-menu {
	visibility: visible;
	opacity: 1;
	margin-top: 0;
}

.fw-nav .sub-menu a {
	display: block;
	padding: 5px 20px;
	font-size: 12px;
	font-weight: 400;
	line-height: 15.6px;
	letter-spacing: normal;
	text-transform: none;
	color: #333;
	white-space: nowrap;
}

.fw-nav .sub-menu a:hover,
.fw-nav .sub-menu a:focus {
	color: #88a6c3;
}

/* The top-level links are live's near-black, not the theme's primary blue.
   Direct children only: written as `.fw-nav .menu-item > a` it reached into
   the dropdown as well and took the panel's links from #333 to #111. */
.fw-header__nav .fw-nav > li > a,
.fw-header__nav .fw-nav > .menu-item > a {
	color: #111;
}