/*
 * Header and footer of the permit portal (subset of portal.css), used on the public form pages.
 * Loaded after the WordPress page styles so the chrome looks exactly like the Permit Panel.
 */
@import url('fonts/redhattext.css');
@import url('fonts/robotoslab.css');
@import url('fonts/roboto.css');

/* Every rule is scoped under body.cf-page so it outranks Hello Elementor's rules for the same
   .site-header/.site-footer class names (theme.css), keeping the chrome identical to the Permit Panel. */
.cf-page .site-header, .cf-page .site-footer { max-width: none; width: auto; margin-inline: 0; }
.cf-page .header-inner, .cf-page .footer-inner { width: auto; }

/* Permit portal design tokens and base text (in the portal these sit on :root and body; here they are
   scoped to the header/footer so they cannot change the WordPress-styled page body). */
:root {
	--permit-color-heading: #112337;
	--permit-color-accent: #24438a;
	--permit-color-border-strong: #686e77;
	--permit-color-soft: #f7f8fa;
}
.cf-page .site-header, .cf-page .site-footer, .cf-page .header-accent {
	font-family: Roboto, Arial, sans-serif;
	color: #4e4e4e;
	line-height: normal;
}
.cf-page .site-header {
	background: #ffffff;
	border-bottom: 0;
	position: sticky;
	top: 0;
	z-index: 20;
}
.cf-page .header-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
.cf-page .logo-wrap { display: inline-flex; align-items: center; }
.cf-page .site-logo { max-width: 340px; width: 100%; height: auto; }
.cf-page .header-accent {
	height: 10px;
	background: #234287;
}
.cf-page .site-nav {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
}
.cf-page .site-nav a {
	text-decoration: none;
	color: #000000;
	font-family: 'Red Hat Text', Roboto, Arial, sans-serif;
	font-weight: 600;
	font-size: 18px;
	padding: 7px 0;
}
.cf-page .site-nav a:hover { color: #000000; }
.cf-page .site-footer {
	margin-top: 40px;
	border-top: 1px solid #e8e8e8;
	padding: 20px 16px;
	background: #ffffff;
}
.cf-page .footer-inner {
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	gap: 6px;
	color: #4e4e4e;
	font-size: 13px;
}
@media (max-width: 860px) {
  .cf-page .site-logo { max-width: 240px; }
  .cf-page .site-nav { gap: 10px; }
  .cf-page .site-nav a { font-size: 15px; }
}
.cf-page .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.cf-page .site-header {
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
	z-index: 30;
}
.cf-page .header-inner {
	max-width: 1140px;
	gap: 24px;
	min-height: 98px;
}
.cf-page .site-nav-toggle {
	display: none;
	border: 0;
	background: transparent;
	padding: 8px;
	margin-left: auto;
	cursor: pointer;
}
.cf-page .site-nav-toggle-bar {
	display: block;
	width: 22px;
	height: 2px;
	margin: 4px 0;
	background: #000000;
}
.cf-page .site-nav {
	justify-content: flex-end;
}
.cf-page .site-nav a, .cf-page .footer-nav a {
	position: relative;
}
.cf-page .site-nav a::after, .cf-page .footer-nav a::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: center;
	transition: transform 0.2s ease;
}
.cf-page .site-nav a:hover::after, .cf-page .site-nav a:focus-visible::after, .cf-page .footer-nav a:hover::after, .cf-page .footer-nav a:focus-visible::after {
	transform: scaleX(1);
}
.cf-page .site-footer {
	margin-top: 40px;
	border-top: 0;
	background: var(--permit-color-accent);
	color: #ffffff;
	padding: 20px 16px;
}
.cf-page .site-footer a {
	color: #ffffff;
	text-decoration: none;
}
.cf-page .footer-inner {
	max-width: 1140px;
	display: flex;
	justify-content: space-between;
	gap: 24px;
	align-items: flex-start;
	color: #ffffff;
	font-size: 14px;
}
.cf-page .footer-primary, .cf-page .footer-secondary {
	display: grid;
	gap: 8px;
}
.cf-page .footer-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
}
.cf-page .footer-copy {
	font-size: 18px;
}
.cf-page .footer-credit, .cf-page .footer-address, .cf-page .footer-social {
	font-family: 'Red Hat Text', Roboto, Arial, sans-serif;
	font-weight: 600;
}
.cf-page .footer-social {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	justify-self: end;
}
.cf-page .footer-social svg {
	width: 19px;
	height: 19px;
	display: block;
}
@media (max-width: 860px) {
  .cf-page .header-inner {
		min-height: 84px;
		flex-wrap: wrap;
		padding-top: 10px;
		padding-bottom: 10px;
	}
  .cf-page .site-nav-toggle {
		display: inline-block;
	}
  .cf-page .site-nav {
		display: none;
		width: 100%;
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
		padding-bottom: 8px;
	}
  .cf-page .site-nav.open {
		display: flex;
	}
  .cf-page .footer-inner {
		display: flex;
		flex-direction: column;
	}
  .cf-page .footer-social {
		justify-self: start;
	}
}

/* A form closed by staff: the notice shown in place of the form. */
.cf-page .cf-form-closed { border: 1px solid #c3c3c3; background: #f7f8fa; padding: 18px 22px; margin: 10px 0 30px; }
.cf-page .cf-form-closed p { margin: 0; font-size: 16px; line-height: 1.6; }

/* Staff preview of a form that is not published (or an older version). */
.cf-page .cf-preview-banner { position: sticky; top: 0; z-index: 50; background: #fff3d6; border-bottom: 2px solid #d99a00; color: #3d2c00;
    padding: 10px 16px; font: 600 15px/1.4 Arial, Helvetica, sans-serif; text-align: center; }

/* ------------------------------------------------------------------ Code Forms page (the tabbed lists of forms)
 * The WordPress page left these lists at Elementor's defaults: a dark grey bar behind a form link on hover — which also
 * stayed on the last link clicked, because it follows focus too — and no hover at all on the tabs. Here: a light band
 * with the brand navy, only while the mouse is over a link or the keyboard is on it. Elementor shows each list in two
 * versions: the desktop one (band drawn in ::before) and, up to 1024 px wide, the tablet/phone one (band on the link). */
.cf-page .elementor-tab-content .e--pointer-background .elementor-item::before {
	background: #eef2f9;
	border-left: 3px solid #24438a;
}
.cf-page .elementor-tab-content .e--pointer-background .elementor-item:hover,
.cf-page .elementor-tab-content .e--pointer-background .elementor-item:focus-visible {
	color: #24438a;
}
.cf-page .elementor-tab-content .elementor-nav-menu--dropdown .elementor-item:hover,
.cf-page .elementor-tab-content .elementor-nav-menu--dropdown .elementor-item:focus-visible {
	background-color: #eef2f9;
	color: #24438a;
	box-shadow: inset 3px 0 0 #24438a;
}
.cf-page .elementor-tab-content .elementor-item:focus-visible {
	outline: 2px solid #24438a;
	outline-offset: -2px;
}
/* A link clicked with the mouse keeps focus (also when coming back to the page): no highlight for that. */
.cf-page .elementor-tab-content .e--pointer-background .elementor-item:focus:not(:focus-visible):not(:hover) {
	color: #4e4e4e;
}
.cf-page .elementor-tab-content .e--pointer-background .elementor-item:focus:not(:focus-visible):not(:hover)::before {
	opacity: 0;
}
.cf-page .elementor-tab-content .elementor-nav-menu--dropdown .elementor-item:focus:not(:focus-visible):not(:hover) {
	background-color: transparent;
	color: #33373d;
}
/* A tab that is not open shows it can be clicked. */
.cf-page .elementor-widget-tabs .elementor-tab-title {
	transition: color .2s, background-color .2s;
}
.cf-page .elementor-widget-tabs .elementor-tab-title:not(.elementor-active):hover,
.cf-page .elementor-widget-tabs .elementor-tab-title:not(.elementor-active):hover a {
	color: #24438a;
	background-color: #f5f7fb;
}