/* =====================================================================
   ORCHESTRATO - BLENDED SITE STYLESHEET (HEADER + FOOTER ONLY)
   Every rule is scoped to #orc_header / #orc_footer (or an orc_ prefixed
   class), so nothing here affects page-body content.
   Colours, fonts and sizes are taken from orchestrato.com's Kadence theme as
   it renders by default (the "dark" palette the site ships with):
     header/footer bg  #215387  (palette2)
     button bg         #2B6CB0  (palette1)
     hover / current   #f7630c  (palette14)
     dropdown text     #F7F7F7  (palette8)
   Fonts: Source Sans Pro (now "Source Sans 3" on Google Fonts) for body/nav,
   Montserrat for headings. Loaded in Header.txt.
   ===================================================================== */

:root {
	--orc_blue: #215387;
	--orc_blue_light: #2B6CB0;
	--orc_orange: #f7630c;
	--orc_white: #ffffff;
	--orc_off_white: #F7F7F7;
	--orc_grey: #E1E1E1;
	--orc_grey_dark: #515151;
	--orc_drawer_bg: #215387;
	--orc_border: rgba(255, 255, 255, 0.1);
	--orc_font: 'Source Sans 3', 'Source Sans Pro', sans-serif;
	--orc_content_width: 1290px;
	--orc_edge: 1.5rem;
	--orc_header_height: 80px;
}

/* ---------- shared ---------- */
#orc_header,
#orc_footer {
	font-family: var(--orc_font);
	font-size: 17px;
	line-height: 1.6;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
}

#orc_header *,
#orc_header *::before,
#orc_header *::after,
#orc_footer *,
#orc_footer *::before,
#orc_footer *::after {
	box-sizing: border-box;
}

#orc_header .orc_container,
#orc_footer .orc_container {
	width: 100%;
	max-width: var(--orc_content_width);
	margin: 0 auto;
	padding-left: var(--orc_edge);
	padding-right: var(--orc_edge);
}

#orc_header ul,
#orc_footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

#orc_header a,
#orc_footer a {
	text-decoration: none;
	transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

#orc_header button {
	font-family: inherit;
	cursor: pointer;
}

.orc_skip_link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100001;
	padding: 10px 16px;
	background: var(--orc_white);
	color: var(--orc_blue);
	font-family: var(--orc_font);
	font-weight: 600;
}

.orc_skip_link:focus {
	left: 16px;
	top: 16px;
}

/* =====================================================================
   HEADER
   ===================================================================== */
#orc_header {
	position: relative;
	z-index: 1000;
	background: var(--orc_blue);
}

/* The header row runs full width so the buttons sit hard right, but the left
   padding keeps the logo aligned with the 1290px content edge, where it sits
   on the live site. */
#orc_header .orc_header_row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	max-width: none;
	padding-left: max(var(--orc_edge), calc((100% - var(--orc_content_width)) / 2 + var(--orc_edge)));
	min-height: var(--orc_header_height);
}

/* ---------- logo ---------- */
#orc_header .orc_logo {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

#orc_header .orc_logo a {
	display: block;
	line-height: 0;
}

#orc_header .orc_logo img {
	display: block;
	width: 75px;
	max-width: 75px;
	height: auto;
}

/* ---------- right side ---------- */
#orc_header .orc_header_right {
	display: flex;
	flex: 1 1 auto;
	min-width: 0;
	align-items: center;
	justify-content: flex-end;
	gap: 0.5rem;
}

/* menu fills the space between logo and buttons, centred within it;
   the buttons never shrink and stay pinned to the right */
#orc_header .orc_desktop_nav {
	display: flex;
	flex: 1 1 auto;
	min-width: 0;
	justify-content: center;
}

#orc_header .orc_header_right > .orc_header_button,
#orc_header .orc_header_account {
	flex-shrink: 0;
}

/* ---------- desktop nav ---------- */
#orc_header .orc_menu {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
}

#orc_header .orc_menu > li {
	position: relative;
	display: flex;
	align-items: center;
}

#orc_header .orc_menu > li > a {
	display: flex;
	align-items: center;
	padding: 0.6em calc(1.72em / 2);
	color: var(--orc_white);
	font-family: var(--orc_font);
	font-size: 17px;
	font-weight: 400;
	line-height: 1.6;
	white-space: nowrap;
	background: transparent;
	border: 0;
}

#orc_header .orc_menu_label {
	font-size: 17px;
	font-weight: 400;
}

#orc_header .orc_menu > li > a:hover,
#orc_header .orc_menu > li:hover > a,
#orc_header .orc_menu > li.orc_current > a {
	color: var(--orc_orange);
}

#orc_header .orc_chevron {
	width: 0.7em;
	height: 0.7em;
	margin-left: 0.2em;
	margin-top: 0.1em;
	transition: transform 0.2s ease;
}

/* ---------- desktop dropdowns ---------- */
#orc_header .orc_sub_menu {
	position: absolute;
	top: 100%;
	left: 50%;
	width: 250px;
	margin-left: -125px;
	background: var(--orc_blue);
	box-shadow: 0 2px 13px 0 rgba(0, 0, 0, 0.1);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-10px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
	z-index: 1001;
}

#orc_header .orc_menu > li:hover > .orc_sub_menu,
#orc_header .orc_menu > li.orc_focus_open > .orc_sub_menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s;
}

#orc_header .orc_menu > li:hover > a .orc_chevron,
#orc_header .orc_menu > li.orc_focus_open > a .orc_chevron {
	transform: rotate(180deg);
}

#orc_header .orc_sub_item {
	position: relative;
}

#orc_header .orc_sub_link {
	display: flex;
	align-items: center;
	width: 100%;
	padding: 0.25em 1em;
	color: var(--orc_off_white);
	font-size: 16px;
	line-height: 1.6;
	background: var(--orc_blue);
}

#orc_header .orc_sub_link:hover,
#orc_header .orc_sub_item.orc_current > .orc_sub_link {
	color: var(--orc_white);
	background: var(--orc_blue_light);
}

#orc_header .orc_sub_icon {
	flex-shrink: 0;
	width: 1em;
	height: 1em;
	margin-right: 0.4em;
}

/* third level and deeper fly out to the right */
#orc_header .orc_sub_menu_nested {
	top: 0;
	left: 100%;
	margin-left: 0;
}

#orc_header .orc_sub_item:hover > .orc_sub_menu_nested,
#orc_header .orc_sub_item:focus-within > .orc_sub_menu_nested {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s;
}

/* ---------- header button + account buttons ---------- */
/* The account buttons sit right of "AI Readiness Assessment" and share its
   styling. Firefish only renders the relevant pair (Register + Login, or
   My Account + Logout). */
#orc_header .orc_header_account {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

#orc_header .orc_header_account .orc_account_button {
	margin-left: 0;
}

#orc_header .orc_header_button,
#orc_header .orc_account_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-left: 0.5rem;
	padding: 0.4em 1em;
	min-height: 44px;
	background: var(--orc_blue_light);
	color: var(--orc_white);
	font-size: 17px;
	font-weight: 400;
	line-height: 1.6;
	border-radius: 10px;
	white-space: nowrap;
	font-family: inherit;
	border: 0;
	cursor: pointer;
	box-shadow: 0 0 0 -7px rgba(0, 0, 0, 0);
}

#orc_header .orc_header_button:hover,
#orc_header .orc_header_button:focus-visible,
#orc_header .orc_account_button:hover,
#orc_header .orc_account_button:focus-visible {
	background: var(--orc_orange);
	color: var(--orc_white);
	box-shadow: 0 15px 25px -7px rgba(0, 0, 0, 0.1);
}

/* ---------- burger ---------- */
/* justify-content is flex-end because Firefish stretches the button wider
   than its icon; centring left the icon short of the right edge */
#orc_header .orc_menu_toggle {
	display: none;
	align-items: center;
	justify-content: flex-end;
	flex: 0 0 auto;
	width: auto;
	margin: 0 0 0 auto;
	float: none;
	/* no right padding, so the icon lines up with the container's right
	   edge the same distance in as the logo is from the left */
	padding: 0.4em 0 0.4em 0.6em;
	color: var(--orc_white);
	background: transparent;
	border: 0;
	border-radius: 0;
	font-size: 40px;
	line-height: 1;
	box-shadow: none;
}

#orc_header .orc_menu_toggle svg {
	width: 1em;
	height: 1em;
}

/* ---------- mobile drawer ---------- */
#orc_header .orc_drawer {
	position: fixed;
	inset: 0;
	z-index: 100000;
	visibility: hidden;
	pointer-events: none;
}

#orc_header .orc_drawer_overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.6);
	opacity: 0;
	transition: opacity 0.25s ease;
}

#orc_header .orc_drawer_inner {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	max-width: 340px;
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	background: var(--orc_drawer_bg);
	color: var(--orc_off_white);
	opacity: 0;
	transform: translateX(100%);
	transition: transform 0.25s ease, opacity 0.25s ease;
}

body.orc_drawer_open {
	overflow: hidden;
}

body.orc_drawer_open #orc_header .orc_drawer {
	visibility: visible;
	pointer-events: auto;
}

body.orc_drawer_open #orc_header .orc_drawer_overlay {
	opacity: 1;
}

body.orc_drawer_open #orc_header .orc_drawer_inner {
	opacity: 1;
	transform: translateX(0);
}

/* same side padding as .orc_drawer_content, so the close button's column
   lines up with the menu below */
#orc_header .orc_drawer_header {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	width: 100%;
	min-height: calc(1.2em + 24px);
	padding: 0 1.5em;
}

/* the two-bar close "X", as on the live drawer. The button takes the same
   20% column as the sub-menu carets (.orc_sub_toggle) and the bars are
   centred in it, so the X sits directly above the carets. */
#orc_header .orc_drawer_close {
	position: relative;
	flex: 0 0 20%;
	width: 20%;
	max-width: 20%;
	min-width: 0;
	height: 48px;
	margin: 0 0 0 auto;
	float: none;
	padding: 0;
	font-size: 24px;
	color: var(--orc_off_white);
	background: transparent;
	border: 0;
	box-shadow: none;
}

#orc_header .orc_close_bar {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0.75em;
	height: 2px;
	margin: -1px 0 0 -0.375em;
	background: currentColor;
	transform: rotate(45deg);
	transition: transform 0.2s ease;
}

#orc_header .orc_close_bar + .orc_close_bar {
	transform: rotate(-45deg);
}

#orc_header .orc_drawer_close:hover .orc_close_bar {
	transform: rotate(0deg);
}

#orc_header .orc_drawer_content {
	padding: 0 1.5em 1.5em;
}

/* ---------- mobile menu ---------- */
#orc_header .orc_mobile_menu li {
	font-size: 14px;
}

#orc_header .orc_mobile_link {
	display: block;
	flex-grow: 1;
	padding: 1em 0;
	color: var(--orc_off_white);
	font-family: var(--orc_font);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
}

#orc_header .orc_mobile_item:not(.orc_has_children) > .orc_mobile_link,
#orc_header .orc_mobile_row {
	border-bottom: 1px solid var(--orc_border);
}

#orc_header .orc_mobile_item.orc_current > .orc_mobile_link,
#orc_header .orc_mobile_item.orc_current > .orc_mobile_row > .orc_mobile_link,
#orc_header .orc_mobile_link:hover {
	color: var(--orc_orange);
}

/* parent row: link takes 80%, caret toggle 20% (adjust the two flex-basis
   values together to change the split) */
#orc_header .orc_mobile_row {
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	width: 100%;
}

#orc_header .orc_mobile_row > .orc_mobile_link {
	flex: 1 1 80%;
	width: auto;
	min-width: 0;
}

#orc_header .orc_sub_toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 20%;
	width: 20%;
	max-width: 20%;
	min-width: 0;
	margin: 0;
	float: none;
	padding: 0;
	color: var(--orc_off_white);
	background: transparent;
	border: 0;
	border-left: 1px solid var(--orc_border);
	border-radius: 0;
	box-shadow: none;
}

#orc_header .orc_sub_toggle svg {
	width: 1em;
	height: 1em;
	transition: transform 0.2s ease;
}

#orc_header .orc_sub_open > .orc_mobile_row > .orc_sub_toggle svg {
	transform: rotate(180deg);
}

#orc_header .orc_mobile_sub_menu {
	display: none;
	padding-left: 1em;
}

#orc_header .orc_sub_open > .orc_mobile_sub_menu {
	display: block;
}

/* ---------- account buttons (mobile drawer) ---------- */
#orc_header .orc_mobile_account {
	display: flex;
	flex-direction: column;
}

#orc_header .orc_mobile_account .orc_mobile_account_link {
	display: block;
	padding: 1em 0;
	font-family: var(--orc_font);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--orc_off_white);
	text-align: left;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--orc_border);
	cursor: pointer;
}

#orc_header .orc_mobile_account .orc_mobile_account_link:hover {
	color: var(--orc_orange);
}

/* ---------- breakpoint: drawer below 1200px ---------- */
@media (max-width: 1199px) {
	#orc_header .orc_desktop_nav,
	#orc_header .orc_header_right > .orc_header_button,
	#orc_header .orc_header_account {
		display: none;
	}

	#orc_header .orc_header_right {
		margin-left: auto;
	}

	#orc_header .orc_menu_toggle {
		display: inline-flex;
	}
}

@media (min-width: 1200px) {
	#orc_header .orc_drawer {
		display: none;
	}
}

/* =====================================================================
   FOOTER
   ===================================================================== */
#orc_footer {
	background: var(--orc_blue);
	color: var(--orc_white);
}

/* all footer text is 17px / 400; the column headings are 17px / 700 */
#orc_footer p,
#orc_footer a,
#orc_footer span,
#orc_footer li {
	font-family: var(--orc_font);
	font-size: 17px;
	font-weight: 400;
	line-height: 1.6;
}

#orc_footer p {
	margin: 0;
	color: var(--orc_white);
}

#orc_footer strong,
#orc_footer .orc_footer_heading {
	font-family: var(--orc_font);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.6;
}

#orc_footer a {
	color: var(--orc_white);
}

#orc_footer a:hover {
	color: var(--orc_orange);
}

/* address + Quick Links: orange text and matching orange underline on hover */
#orc_footer .orc_footer_top_row a:hover,
#orc_footer .orc_footer_top_row a:focus-visible {
	color: var(--orc_orange);
	text-decoration: underline;
	text-decoration-color: var(--orc_orange);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

/* ---------- top row ---------- */
/* spacing mirrors the live site's .site-top-footer-inner-wrap */
#orc_footer .orc_footer_top_row {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-column-gap: 30px;
	grid-row-gap: 30px;
	column-gap: 30px;
	row-gap: 30px;
	padding-top: 30px;
	padding-bottom: 30px;
}

#orc_footer .orc_footer_col {
	text-align: left;
}

/* 2x2 logo grid, filled in source order:
   CCS | HM Gov G-Cloud
   APSCo | Cyber Essentials */
#orc_footer .orc_footer_logos {
	display: grid;
	grid-template-columns: repeat(2, max-content);
	justify-content: center;
	align-items: center;
	justify-items: center;
	gap: 18px 24px;
}

#orc_footer .orc_footer_logos img {
	display: block;
	height: auto;
	max-width: 100%;
}

#orc_footer .orc_logo_ccs { width: 132px; }
#orc_footer .orc_logo_gcloud { width: 158px; }
#orc_footer .orc_logo_apsco { width: 132px; }
#orc_footer .orc_logo_cyber { width: 140px; }

/* ---------- middle row ---------- */
#orc_footer .orc_footer_middle_row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: center;
}

#orc_footer .orc_footer_copyright {
	text-align: center;
}

#orc_footer .orc_footer_social {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.71em;
	font-size: 1.3em;
}

/* filled squares in brand colour until hover, as on the live site */
#orc_footer .orc_social_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2em;
	height: 2em;
	/* icon sizing only (1.3 x 17px), so the squares stay 44px despite the
	   17px footer link rule */
	font-size: 22px;
	border-radius: 4px;
	color: var(--orc_white);
	background: var(--orc_grey);
}

#orc_footer .orc_social_button svg {
	width: 1em;
	height: 1em;
}

#orc_footer .orc_social_linkedin { background: #4875B4; }
#orc_footer .orc_social_facebook { background: #3b5998; }
#orc_footer .orc_social_youtube { background: #FF3333; }
#orc_footer .orc_social_instagram { background: #E1306C; }
#orc_footer .orc_social_spotify { background: #1DB954; }

#orc_footer .orc_social_button:hover,
#orc_footer .orc_social_button:focus-visible {
	color: rgb(81, 81, 81);
	background: rgb(43, 108, 176);
}

#orc_footer .orc_social_button svg {
	transition: fill 0.2s ease;
}

#orc_footer .orc_social_button:hover svg,
#orc_footer .orc_social_button:focus-visible svg {
	fill: rgb(81, 81, 81);
}

/* ---------- bottom row (Powered by Firefish) ---------- */
#orc_footer .orc_footer_bottom_row {
	display: flex;
	justify-content: center;
	align-items: center;
	padding-top: 30px;
	padding-bottom: 30px;
}

#orc_footer .orc_footer_bottom_row img {
	display: block;
	max-width: 100%;
	height: auto;
}

/* ---------- footer responsive ---------- */
@media (max-width: 1024px) {
	#orc_footer .orc_footer_top_row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	#orc_footer .orc_footer_col_empty {
		display: none;
	}

	#orc_footer .orc_footer_logos {
		grid-column: 1 / -1;
	}
}

@media (max-width: 767px) {
	/* stacked with margins rather than grid gap, so Head Office, Quick Links
	   and the accreditation logos keep a 30px space between them even if a
	   page style cancels the grid gap */
	#orc_footer .orc_footer_top_row {
		display: block;
	}

	#orc_footer .orc_footer_top_row > .orc_footer_col {
		margin: 0 0 30px;
	}

	#orc_footer .orc_footer_top_row > .orc_footer_col:last-child {
		margin-bottom: 0;
	}

	#orc_footer .orc_footer_middle_row {
		grid-template-columns: 1fr;
	}

	#orc_footer .orc_footer_middle_row {
		gap: 20px;
		padding-top: 10px;
	}

	/* keep the 2x2 on phones, letting the columns shrink to fit */
	#orc_footer .orc_footer_logos {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}