/* =========================================================================
   Monarch Networks – custom styles
   All project customisations live here (per Porto docs).
   ========================================================================= */

/* ---------------------------------------------------------------------------
   Text logo: "Monarch" bold, "Networks" tucked underneath, left aligned.
   Used in the header and footer in place of an image logo.
--------------------------------------------------------------------------- */
.monarch-logo {
	display: inline-flex;
	align-items: center;
	line-height: 1;
	text-decoration: none;
	padding: 6px 0;
}

.monarch-logo-crown {
	color: var(--secondary);
	/* Sized so the crown glyph sits within the height of the stacked
	   wordmark (a Font Awesome crown fills roughly 70% of its font-size). */
	font-size: 3.1rem;
	margin-right: 14px;
	flex: 0 0 auto;
	line-height: 1;
}

.monarch-logo-text {
	display: inline-block;
	line-height: 1;
}

/* Shrink the crown along with the wordmark when the sticky header shrinks */
.header-effect-shrink .header-body.sticky-header-active .monarch-logo-crown {
	font-size: 2.6rem;
	margin-right: 12px;
}

.monarch-logo .monarch-logo-name {
	display: block;
	font-family: 'Poppins', sans-serif;
	font-weight: 800;
	font-size: 1.95rem;
	letter-spacing: -0.5px;
	color: var(--light);
	text-transform: none;
}

/* Wordmark reads as one solid colour (the M is not tinted). */
.monarch-logo .monarch-logo-name em {
	font-style: normal;
	color: inherit;
}

.monarch-logo .monarch-logo-sub {
	display: block;
	font-family: 'Oswald', 'Poppins', sans-serif;
	font-weight: 500;
	font-size: 0.72rem;
	letter-spacing: 4px;
	text-transform: uppercase;
	color: var(--primary--200);
	margin-top: 2px;
	padding-left: 2px;
}

/* Slightly smaller wordmark once the sticky header shrinks */
.header-effect-shrink .header-body.sticky-header-active .monarch-logo .monarch-logo-name {
	font-size: 1.6rem;
}
.header-effect-shrink .header-body.sticky-header-active .monarch-logo .monarch-logo-sub {
	font-size: 0.64rem;
	letter-spacing: 3.5px;
}

/* Footer variant sits on the dark footer background */
#footer .monarch-logo .monarch-logo-name {
	font-size: 1.5rem;
}
#footer .monarch-logo .monarch-logo-sub {
	font-size: 0.6rem;
}
#footer .monarch-logo-crown {
	font-size: 2.5rem;
	margin-right: 12px;
}

/* ---------------------------------------------------------------------------
   Dark-mode header: keep the bar on the deep slate background and make the
   nav links legible against it.
--------------------------------------------------------------------------- */
html.dark #header .header-body {
	background-color: var(--dark--100);
	border-bottom-color: rgba(255, 255, 255, 0.06);
}

html.dark #header .header-nav-main nav > ul > li > a {
	color: var(--light-rgba-80);
}
html.dark #header .header-nav-main nav > ul > li > a:hover,
html.dark #header .header-nav-main nav > ul > li.dropdown.open > a,
html.dark #header .header-nav-main nav > ul > li > a.active {
	color: var(--light);
}

/* ---------------------------------------------------------------------------
   Audience / service icon circles used on the home page feature boxes.
--------------------------------------------------------------------------- */
.monarch-icon-circle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 88px;
	height: 88px;
	border-radius: 50%;
	background-color: var(--secondary-rgba-20);
	color: var(--secondary);
	font-size: 2rem;
	transition: background-color 0.3s ease, color 0.3s ease;
}

.monarch-audience-card:hover .monarch-icon-circle,
.monarch-service-card:hover .monarch-icon-circle {
	background-color: var(--secondary);
	color: #1a1a1a;
}

/* Path cards (Managed vs One-off) */
.monarch-path-card {
	height: 100%;
	border-radius: var(--border-radius2x);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.monarch-path-card:hover {
	transform: translateY(-6px);
}

/* Accent top-bar used on the "why us" tiles */
.monarch-tile {
	border-radius: var(--border-radius);
	transition: transform 0.3s ease;
}
.monarch-tile:hover {
	transform: translateY(-4px);
}

/* Give the amber secondary buttons readable dark text */
.btn-secondary,
.btn-secondary:focus {
	color: #1a1a1a;
}
.btn-secondary:hover {
	color: #1a1a1a;
}

/* ---------------------------------------------------------------------------
   Hero backgrounds – brand gradients (used until real photography is added).
--------------------------------------------------------------------------- */
.monarch-hero-1 {
	background-color: var(--dark);
	background-image:
		radial-gradient(circle at 80% 20%, var(--primary-rgba-30), transparent 45%),
		radial-gradient(circle at 10% 90%, rgba(240, 168, 48, 0.12), transparent 40%),
		linear-gradient(135deg, var(--dark-200) 0%, var(--dark--100) 55%, var(--tertiary) 100%);
	background-size: cover;
}
.monarch-hero-2 {
	background-color: var(--dark);
	background-image:
		radial-gradient(circle at 15% 25%, var(--primary-rgba-30), transparent 45%),
		radial-gradient(circle at 90% 85%, rgba(240, 168, 48, 0.12), transparent 42%),
		linear-gradient(135deg, var(--tertiary) 0%, var(--dark--100) 50%, var(--dark-200) 100%);
	background-size: cover;
}

/* Faint circuit-style texture overlay for a subtle tech feel */
.monarch-hero-1::before,
.monarch-hero-2::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(var(--light-rgba-10) 1px, transparent 1px),
		linear-gradient(90deg, var(--light-rgba-10) 1px, transparent 1px);
	background-size: 48px 48px;
	opacity: 0.06;
	pointer-events: none;
}

/* ---------------------------------------------------------------------------
   Dark blocks in place of full-bleed bright blue.
   The primary blue stays vivid for text, icons and buttons, but as a large
   background it is dialled right back to a subtle tinted-dark treatment.
--------------------------------------------------------------------------- */

/* Page header banner (e.g. Services) */
.monarch-page-header.page-header {
	background-color: var(--dark);
	background-image:
		radial-gradient(circle at 85% 30%, var(--primary-rgba-20), transparent 55%),
		linear-gradient(135deg, var(--dark-200) 0%, var(--dark--100) 100%);
	border-bottom: 1px solid var(--primary-rgba-20);
}

/* Call-to-action bands near the footer */
.monarch-cta {
	background-color: var(--dark--100);
	background-image:
		radial-gradient(circle at 12% 20%, var(--primary-rgba-20), transparent 45%),
		linear-gradient(135deg, var(--dark--100) 0%, var(--dark) 100%);
	border-top: 1px solid var(--primary-rgba-20);
	border-bottom: 1px solid var(--primary-rgba-20);
}

/* ---------------------------------------------------------------------------
   Contact form honeypot – hidden from people, still present for bots.
   Deliberately not display:none so automated fillers still target it.
--------------------------------------------------------------------------- */
.monarch-hp {
	position: absolute !important;
	left: -5000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---------------------------------------------------------------------------
   Form inputs on the dark background – give them a clear, visible outline
   with a brand-blue focus highlight.
--------------------------------------------------------------------------- */
/* Match Porto's own selector specificity (html.dark form:not(.form-style-4)
   .form-control) so these actually take effect over the theme defaults. */
html.dark form:not(.form-style-4) .form-control {
	background-color: var(--dark);
	border: 1px solid rgba(255, 255, 255, 0.22);
	color: var(--light);
}
html.dark form:not(.form-style-4) .form-control::placeholder {
	color: var(--light-rgba-40);
}
html.dark form:not(.form-style-4) .form-control:hover {
	border-color: rgba(255, 255, 255, 0.35);
}
html.dark form:not(.form-style-4) .form-control:focus {
	background-color: var(--dark);
	border-color: var(--primary);
	box-shadow: 0 0 0 0.2rem var(--primary-rgba-20);
	color: var(--light);
}

/* ---------------------------------------------------------------------------
   Icon lists (services bullets): give the text room so it never touches the
   icon. The small variant's default padding is too tight for check-circle.
--------------------------------------------------------------------------- */
.list.list-icons.list-icons-sm li {
	padding-left: 26px;
}
.list.list-icons.list-icons-sm li > [class*="fa-"]:first-child {
	top: 6px;
}

/* ---------------------------------------------------------------------------
   list-icons-style-2 borders follow the icon's own colour.
   Porto's skin hard-codes the circle border to --primary, which left amber
   ticks with a blue ring. Make the border match the text colour instead so
   the Managed (blue) and One-off (amber) cards each stay a single colour.
--------------------------------------------------------------------------- */
.list.list-icons.list-icons-style-2 li > .text-color-primary:first-child {
	border-color: var(--primary) !important;
}
.list.list-icons.list-icons-style-2 li > .text-color-secondary:first-child {
	border-color: var(--secondary) !important;
}

/* ---------------------------------------------------------------------------
   Footer sub-menu: clean inline links with a subtle dot separator
   (replaces the default angle-right arrows).
--------------------------------------------------------------------------- */
#sub-menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 1.25rem;
}
#sub-menu ul li {
	position: relative;
	padding: 0;
	margin: 0;
}
#sub-menu ul li + li::before {
	content: "";
	position: absolute;
	left: -0.7rem;
	top: 50%;
	transform: translateY(-50%);
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background-color: var(--light-rgba-40);
}

/* ---------------------------------------------------------------------------
   Hero: fade the whole slide's content in together as one smooth unit,
   rather than staggering each element (which looked janky against the
   carousel's own fade + height transition).
--------------------------------------------------------------------------- */
.monarch-hero-content {
	animation: monarchHeroIn 1s ease both;
}
@keyframes monarchHeroIn {
	from { opacity: 0; transform: translateY(20px); }
	to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
	.monarch-hero-content { animation: none; }
}