/* =====================================================================
   ATLANTA CANCER CARE — HEADER
   File:   salient-child/css/acc/acc-header.css
   Needs:  acc-tokens.css
   Loads:  on every page when acc-config.php features → header is true.

   Restyles Salient's own header markup. It does NOT replace header.php,
   the menus, the Yext search box or the off-canvas menu. Everything is
   scoped to Salient's ids (#header-outer, #header-secondary-outer,
   #slide-out-widget-area) so nothing else on the page is touched.

   Markup added by acc-header-footer.php:
     li.acc-menu-phone   first item in the secondary (utility) bar
     li.acc-nav-cta      last item in the main menu + off-canvas menu
     .acc-mobile-actions call + appointment buttons, moved into
                         .mobile-header .inner by acc-header.js
   Salient's header switches to the mobile layout at 1300px.
   ===================================================================== */


/* ---------------------------------------------------------------------
   1. Utility bar (Yext search, phone, Patient Portal, Contact Us)
   Keeps the existing light bar from Salient's Custom CSS (forest text,
   lock icon before Patient Portal). Adds the phone number and turns
   Contact Us into an outline button so the gold button in the
   main bar is the one primary action.
   --------------------------------------------------------------------- */
body #header-secondary-outer .acc-menu-phone > a .menu-title-text::before { display: none !important; }  /* no lock icon on the phone */
body #header-secondary-outer .acc-menu-phone > a .menu-title-text {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	color: var(--acc-heading) !important;
	font-weight: var(--acc-fw-bold) !important;
}
body #header-secondary-outer .acc-menu-phone .acc-icon { width: 15px; height: 15px; flex: none; color: var(--acc-green); }
body #header-secondary-outer a:hover .menu-title-text { text-decoration: underline; text-decoration-color: var(--acc-hover-mark); text-decoration-thickness: 2px; text-underline-offset: 0.2em; }

/* Contact Us (#menu-item-45): solid forest → outline forest */
body #header-secondary-outer #menu-item-45 > a {
	background: transparent !important;
	box-shadow: inset 0 0 0 1.5px var(--acc-dark-green) !important;
}
body #header-secondary-outer #menu-item-45 > a .menu-title-text { color: var(--acc-heading) !important; }
body #header-secondary-outer #menu-item-45 > a:hover { background: var(--acc-dark-green) !important; }
body #header-secondary-outer #menu-item-45 > a:hover .menu-title-text { color: #fff !important; text-decoration: none; }

/* Yext search: submit button in the brand green (was #008457, not in the palette) */
body[data-form-submit="regular"] #header-secondary-outer button[type=submit].js-yext-submit { background: var(--acc-green-ink) !important; }
body #header-secondary-outer input[type=text].js-yext-query { font-family: var(--acc-font-body) !important; font-size: 14px !important; }


/* ---------------------------------------------------------------------
   2. Main bar
   --------------------------------------------------------------------- */
body #header-outer,
body #header-outer header#top {
	background-color: var(--acc-cream) !important;
}
body #header-outer[data-box-shadow="small"] { box-shadow: 0 1px 0 var(--acc-line) !important; }
body #header-outer.acc-is-scrolled { box-shadow: 0 1px 0 var(--acc-line), 0 8px 24px -18px rgba(22, 41, 31, 0.35) !important; }

/* Top-level items */
body #header-outer header#top nav > ul.sf-menu > li > a {
	white-space: nowrap;
	font-family: var(--acc-font-body) !important;
	font-weight: var(--acc-fw-medium) !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	color: var(--acc-heading) !important;
}
body #header-outer header#top nav > ul.sf-menu > li:not(.acc-nav-cta) > a .menu-title-text {
	position: relative;
	padding-bottom: 4px;
}
body #header-outer header#top nav > ul.sf-menu > li:not(.acc-nav-cta) > a .menu-title-text::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -2px;
	height: 2px;
	background: var(--acc-hover-mark);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--acc-dur) var(--acc-ease);
}
body #header-outer header#top nav > ul.sf-menu > li:not(.acc-nav-cta):is(:hover, :focus-within, .sfHover, .current-menu-item, .current-menu-ancestor, .current-menu-parent) > a .menu-title-text::after {
	transform: scaleX(1);
}

/* Appointment button at the end of the main menu.
   Salient positions menu links with its own padding (to line them up with
   the logo), so the link keeps that padding and the inner label becomes
   the button. That's how Salient's own "button" menu items are built. */
body #header-outer header#top nav > ul.sf-menu > li.acc-nav-cta { margin-left: 8px; }
body #header-outer header#top nav > ul.sf-menu > li.acc-nav-cta > a .menu-title-text {
	display: inline-block;
	padding: 11px 18px;
	border-radius: var(--acc-radius-sm);
	background: var(--acc-cta);
	color: var(--acc-cta-text) !important;
	font-weight: var(--acc-fw-bold) !important;
	font-size: 15px;
	line-height: 1.2;
	white-space: nowrap;
	transition: background-color var(--acc-dur) var(--acc-ease);
}
body #header-outer header#top nav > ul.sf-menu > li.acc-nav-cta > a:hover .menu-title-text,
body #header-outer header#top nav > ul.sf-menu > li.acc-nav-cta > a:focus-visible .menu-title-text { background: var(--acc-cta-hover); }
body #header-outer header#top nav > ul.sf-menu > li.acc-nav-cta > a:focus-visible { outline: none !important; }
body #header-outer header#top nav > ul.sf-menu > li.acc-nav-cta > a:focus-visible .menu-title-text { outline: 3px solid var(--acc-focus); outline-offset: 2px; }

/* Room for the appointment button: slightly smaller items between 1300 and 1600px */
@media (min-width: 1301px) and (max-width: 1599px) {
	body #header-outer header#top nav > ul.sf-menu > li > a {
		font-size: 15px !important;
		padding-left: 9px !important;
		padding-right: 9px !important;
	}
}

/* Salient's Custom CSS centers the menu absolutely at 1600px and up. That
   centering ignores the logo (about 490px wide) and, with the appointment
   button added, the menu would run into it. Keep Salient's normal
   right-aligned position at every width instead. */
@media (min-width: 1600px) {
	body.acc-ds header#top nav[aria-label="Main Menu"] {
		position: static !important;
		left: auto !important;
		top: auto !important;
		transform: none !important;
	}
}


/* ---------------------------------------------------------------------
   3. Dropdowns (Salient "minimal" dropdown style)
   --------------------------------------------------------------------- */
body #header-outer nav > ul.sf-menu > li ul.sub-menu {
	background: #fff !important;
	border: 1px solid var(--acc-line) !important;
	border-top: 3px solid var(--acc-dark-green) !important;
	border-radius: 0 0 var(--acc-radius-sm) var(--acc-radius-sm) !important;
	box-shadow: 0 16px 32px -20px rgba(22, 41, 31, 0.35) !important;
}
body #header-outer nav > ul.sf-menu li ul.sub-menu li a {
	font-family: var(--acc-font-body) !important;
	font-size: 15px !important;
	font-weight: var(--acc-fw-regular) !important;
	color: var(--acc-heading) !important;
	background: transparent !important;
}
body #header-outer nav > ul.sf-menu li ul.sub-menu li a:hover,
body #header-outer nav > ul.sf-menu li ul.sub-menu li a:focus-visible,
body #header-outer nav > ul.sf-menu li ul.sub-menu li.current-menu-item > a {
	color: var(--acc-green-ink) !important;
	background: var(--acc-sage-light) !important;
}
/* Keyboard users: open a dropdown when keyboard focus is inside it (Salient
   only opens on hover). Uses :focus-visible, not :focus-within, so a mouse
   click inside a dropdown no longer pins a second copy of the menu open.
   The Services mega menu keeps Salient's own positioning (no transform
   reset), which is what split it in two on wide screens. */
body #header-outer nav > ul.sf-menu > li:not(.megamenu):has(:focus-visible) > ul.sub-menu {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	transform: none !important;
	pointer-events: auto !important;
}
body #header-outer nav > ul.sf-menu > li.megamenu:has(:focus-visible) > ul.sub-menu {
	visibility: visible !important;
	opacity: 1 !important;
	pointer-events: auto !important;
}
/* Escape pressed (acc-header.js): close it even though focus is still inside */
body #header-outer nav > ul.sf-menu > li.acc-closed > ul.sub-menu {
	display: none !important;
}

/* Services mega menu: the three column headings are menu items named "–"
   that link to "http://-". Hide the dash and its dead link. The real fix
   (rename the columns or make them plain column headings) is in the
   deployment guide. */
body #header-outer li.megamenu > ul.sub-menu > li > a[href^="http://-"],
body #slide-out-widget-area .off-canvas-menu-container li > a[href^="http://-"] {
	display: none !important;
}
body #header-outer li.megamenu > ul.sub-menu > li > ul.sub-menu { padding-top: 0 !important; }
/* Off-canvas: the dash item's children stay visible and flat */
body #slide-out-widget-area li:has(> a[href^="http://-"]) > ul.sub-menu {
	display: block !important;
	position: static !important;
	padding-left: 0 !important;
}


/* ---------------------------------------------------------------------
   4. Focus (visible on the cream bar and on the dark utility bar)
   --------------------------------------------------------------------- */
body #header-outer a:focus-visible,
body #slide-out-widget-area a:focus-visible {
	outline: 3px solid var(--acc-focus) !important;
	outline-offset: 2px !important;
	border-radius: 2px;
}


/* ---------------------------------------------------------------------
   5. Mobile / tablet (Salient's mobile header below 1300px)
   --------------------------------------------------------------------- */
.acc-mobile-actions { display: none; }
@media (max-width: 1299px) {
	.acc-mobile-actions {
		display: grid;
		grid-template-columns: 1fr 1.4fr;
		gap: 8px;
		padding: 8px var(--acc-gutter);
		background: var(--acc-cream);
		border-bottom: 1px solid var(--acc-line);
	}
	.acc-mobile-actions a {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		min-height: 44px;
		padding: 0 14px;
		border-radius: var(--acc-radius-sm);
		font: var(--acc-fw-bold) 15px/1 var(--acc-font-body) !important;
		text-decoration: none !important;
		white-space: nowrap;
	}
	.acc-mobile-actions__call {
		border: 1.5px solid var(--acc-dark-green);
		color: var(--acc-dark-green) !important;
		background: #fff;
	}
	.acc-mobile-actions__call .acc-icon { width: 18px; height: 18px; }
	.acc-mobile-actions__appt {
		background: var(--acc-cta);
		color: var(--acc-cta-text) !important;
	}
	.acc-mobile-actions__appt:hover { background: var(--acc-cta-hover); }
	.acc-mobile-actions a:focus-visible { outline: 3px solid var(--acc-focus); outline-offset: 2px; }

	/* The main menu CTA is part of the desktop bar only. Salient also copies
	   menu buttons into its mobile header row, where the label ran over the
	   logo, so hide every copy inside the header below 1300px. The mobile
	   button bar and the slide-out menu keep their own buttons. */
	body #header-outer .acc-nav-cta,
	body #header-outer header#top nav > ul.sf-menu > li.acc-nav-cta { display: none !important; }
}
@media (min-width: 700px) and (max-width: 1299px) {
	.acc-mobile-actions { grid-template-columns: auto auto; justify-content: end; }
}
/* 1000–1299px: the utility bar above already shows the phone number */
@media (min-width: 1000px) and (max-width: 1299px) {
	.acc-mobile-actions { grid-template-columns: auto; }
	.acc-mobile-actions__call { display: none !important; }
}
/* The utility-bar phone is redundant next to the mobile call button */
@media (max-width: 999px) {
	body #header-secondary-outer .acc-menu-phone { display: none !important; }
}


/* ---------------------------------------------------------------------
   6. Off-canvas menu (mobile)
   --------------------------------------------------------------------- */
body #slide-out-widget-area {
	background: var(--acc-dark-green) !important;
}
body #slide-out-widget-area .off-canvas-menu-container li a {
	font-family: var(--acc-font-head) !important;
	color: var(--acc-cream) !important;
}
body #slide-out-widget-area .off-canvas-menu-container ul.sub-menu li a {
	font-family: var(--acc-font-body) !important;
	font-size: 17px !important;
}
body #ajax-content-wrap #slide-out-widget-area ul.sub-menu li.back a { background-color: var(--acc-green-ink) !important; }
body #slide-out-widget-area li.acc-nav-cta > a {
	display: inline-block !important;
	margin-top: 16px;
	padding: 12px 22px !important;
	border-radius: var(--acc-radius-sm);
	background: var(--acc-cta) !important;
	color: var(--acc-cta-text) !important;
	font-family: var(--acc-font-body) !important;
	font-weight: var(--acc-fw-bold) !important;
	font-size: 17px !important;
}

/* ---------------------------------------------------------------------
   7. Services mega menu: no box around each column
   The dropdown panel style in section 3 also matched the lists inside the
   mega menu's three columns, drawing a bordered box (with a dark top rule)
   around each one. Only the outer panel keeps the frame, like the other
   dropdowns.
   --------------------------------------------------------------------- */
body #header-outer header#top nav > ul.sf-menu > li.megamenu > ul.sub-menu ul.sub-menu,
body #header-outer nav > ul.sf-menu > li.megamenu > ul.sub-menu > li > ul.sub-menu {
	border: 0 !important;
	border-top: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	background: transparent !important;
}
body #header-outer nav > ul.sf-menu > li.megamenu > ul.sub-menu > li {
	border: 0 !important;
	box-shadow: none !important;
}