/* ============================================================
   ExcelGurus - the header: "Get Excel Help" button and sticky header, 1.0.0
   Rev:0 2026/10/05 - David 2026/10/05: "Get Excel Help" becomes a solid blue
          pill on every page (his option B), with a green dot in front of
          the words only while he is online (the online line's rule: Monday
          to Friday, 8 a.m. to 6 p.m. Eastern, never on a US federal
          holiday); the header sticks to the top while scrolling, with a soft
          shadow once scrolled. docs/header-cta-2026-10-05.md.
          Review, same day, before anything went live: the phone row did
          not fit at 360 px with the dot on (Astra's 1em after the logo was
          left out of the sum), so the logo loses that space and two narrow
          tiers shrink the gaps and the logo (420 px and narrower, under
          360 px); a narrow desktop band (922 to 1023 px) tightens the menu
          so the pill does not wrap; the admin bar's height is added to
          the scroll padding and the open phone menu's height.

   Goes in: wp-content/uploads/eg/css/eg-header-1.0.0.css
            Deployed with deploy/deploy-assets.ps1 -Subfolder css. The file
            name carries the version: a change ships under a new name plus
            an edit of the WPCode snippet's <link> (src/wpcode/eg-header-cta.html).
   Loaded by: the site-wide header snippet, as a <link> in the head, after
            Astra's own CSS (WPCode prints site_wide_header snippets on
            wp_head at priority 10; the theme's styles print at 8).

   WHAT IT STYLES
   - Desktop (922 px and wider): menu item 154 ("Get Excel Help", the last
     item of the Main Menu once Client Login has moved to the footer) in
     #ast-desktop-header, as the pill. Scoped by its id, which only the
     desktop copy of the menu carries (the phone copy has the class only),
     so the phone dropdown is not touched by these rules.
   - Phones and tablets (up to 921.99 px, Astra's switch): Astra's header
     HTML element 1, placed before the menu toggle in the mobile header
     (astra-settings header-mobile-items, src/theme/header-html-1.html):
     a.eg-hdr-cta inside .ast-header-html-1.
   - The green dot: a ::before on either pill, drawn only while the html
     element has the class eg-online-now. eg-online-1.1.0.js sets that class
     in the head, before the first paint, so the dot never appears after
     the pill is drawn and never moves it. If the script does not run, there
     is no class and no dot: it never shows at the wrong time.
   - The sticky header: #masthead, with Astra's admin-bar offsets, a shadow
     once html.eg-scrolled is set (eg-header-1.0.0.js), and room kept above
     in-page targets (scroll-padding-top) so an anchor never lands under it.

   Site rule: no em dashes or en dashes anywhere in this file.
   ============================================================ */

/* ---- 1. The sticky header ------------------------------------------- */

/* Astra already makes .site-header position:relative with z-index 99. 999
   keeps the header above the image lightbox's zoom button (z-index 100) as
   content scrolls under it, and below the admin bar (99999) and the
   lightbox itself (100000). */
#masthead {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	z-index: 999;
	background: #fff;
	transition: box-shadow .2s ease;
}
html.eg-scrolled #masthead {
	box-shadow: 0 2px 14px rgba(15, 23, 42, .10);
}
/* WordPress's admin bar (logged-in users only): 32 px, 46 px at 782 px and
   narrower, and not fixed at 600 px and narrower (core admin-bar.css). */
.admin-bar #masthead {
	top: 32px;
}
@media screen and (max-width: 782px) {
	.admin-bar #masthead {
		top: 46px;
	}
}
@media screen and (max-width: 600px) {
	.admin-bar #masthead {
		top: 0;
	}
}
/* In-page jumps the browser makes itself (a link to #section, a page opened
   with a #hash, the form's scrollIntoView) keep the header's height clear:
   80 px bar plus its 1 px border, on desktop and phones alike. Astra's own
   smooth scroll for # links measures the header instead (data-stick-support,
   set by eg-header-1.0.0.js). */
html {
	scroll-padding-top: 81px;
}
/* Logged in, the header sticks below the admin bar, so the browser's own
   jumps keep the bar's height clear too (32 px, 46 px at 782 px and
   narrower; at 600 px and narrower the bar scrolls away). Astra's smooth
   scroll for # links does not count the admin bar, and CSS cannot change
   that: check in-page links logged out. A browser without :has() keeps
   81 px. */
html:has(> body.admin-bar) {
	scroll-padding-top: 113px;
}
@media screen and (max-width: 782px) {
	html:has(> body.admin-bar) {
		scroll-padding-top: 127px;
	}
}
@media screen and (max-width: 600px) {
	html:has(> body.admin-bar) {
		scroll-padding-top: 81px;
	}
}
@media print {
	#masthead {
		position: static;
		box-shadow: none;
	}
}

/* ---- 2. Desktop: menu item 154 as the pill ---------------------------- */

#ast-desktop-header #menu-item-154 {
	display: flex;
	align-items: center;
	margin-left: 22px;
	line-height: normal;
}
#ast-desktop-header #menu-item-154 > .menu-link {
	display: inline-flex;
	align-items: center;
	height: auto;
	padding: 11px 20px;
	border: 1.5px solid #046bd2;
	border-radius: 999px;
	background: #046bd2;
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.15;
	white-space: nowrap;
	text-decoration: none;
	box-shadow: 0 2px 10px rgba(4, 107, 210, .28);
	transition: background-color .15s, border-color .15s;
}
#ast-desktop-header #menu-item-154 > .menu-link .menu-text {
	color: inherit;
}
/* Astra's dropdown arrow icon: hidden on desktop by a body class already;
   kept out of the pill even if that class is missing. */
#ast-desktop-header #menu-item-154 > .menu-link > .ast-icon {
	display: none;
}
#ast-desktop-header #menu-item-154 > .menu-link:hover,
#ast-desktop-header #menu-item-154 > .menu-link:focus-visible {
	background: #045cb4;
	border-color: #045cb4;
	color: #fff;
}
/* Astra's own a:focus-visible is a thin dotted outline in the text color,
   which is white here: invisible on the white header. */
#ast-desktop-header #menu-item-154 > .menu-link:focus-visible {
	outline: 2px solid #045cb4;
	outline-offset: 3px;
}
html.eg-online-now #ast-desktop-header #menu-item-154 > .menu-link::before {
	content: "";
	flex: none;
	width: 10px;
	height: 10px;
	margin-right: 10px;
	border-radius: 50%;
	background: #22c55e;
	box-shadow: 0 0 0 2px #fff;
}
/* Room for the pill on one line. Astra puts 1em after the logo for a site
   title beside it, and this site shows none. From 922 to 1023 px the menu
   was 20 px too wide with the dot on (Windows, 17 px scrollbar), so the
   pill wrapped to a second row under it; there the menu links are a little
   closer and the pill a little nearer. The pill keeps its own padding: its
   rule above has two ids. */
#ast-desktop-header .site-logo-img {
	padding-right: 0;
}
@media (min-width: 922px) and (max-width: 1023.98px) {
	#ast-desktop-header .main-header-menu > .menu-item > .menu-link {
		padding: 0 .8em;
	}
	#ast-desktop-header #menu-item-154 {
		margin-left: 14px;
	}
}

/* ---- 3. Phones and tablets: the pill in the header bar ------------------ */

/* Astra wraps the HTML element's content in a <p> (wpautop) and gives the
   element a 1.857 line height on the mobile bar. */
#ast-mobile-header .ast-header-html-1 {
	margin-right: 4px;
}
#ast-mobile-header .ast-header-html-1 .ast-builder-html-element {
	line-height: 1;
}
#ast-mobile-header .ast-header-html-1 .ast-builder-html-element > p {
	display: flex;
	align-items: center;
	margin: 0;
}
#ast-mobile-header .ast-header-html-1 a.eg-hdr-cta {
	display: inline-flex;
	align-items: center;
	padding: 7px 12px;
	border: 1.5px solid #046bd2;
	border-radius: 999px;
	background: #046bd2;
	color: #fff;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.15;
	white-space: nowrap;
	text-decoration: none;
	box-shadow: 0 2px 10px rgba(4, 107, 210, .28);
	transition: background-color .15s, border-color .15s;
}
#ast-mobile-header .ast-header-html-1 a.eg-hdr-cta:hover,
#ast-mobile-header .ast-header-html-1 a.eg-hdr-cta:focus-visible {
	background: #045cb4;
	border-color: #045cb4;
	color: #fff;
}
#ast-mobile-header .ast-header-html-1 a.eg-hdr-cta:focus-visible {
	outline: 2px solid #045cb4;
	outline-offset: 2px;
}
html.eg-online-now #ast-mobile-header .ast-header-html-1 a.eg-hdr-cta::before {
	content: "";
	flex: none;
	width: 8px;
	height: 8px;
	margin-right: 6px;
	border-radius: 50%;
	background: #22c55e;
	box-shadow: 0 0 0 2px #fff;
}
/* The logo at 122 px wide (the approved preview). The theme sets the logo to
   width 200px, max-width 200px; max-width wins. Astra's 1em after the logo
   (for a site title beside it, which this site does not show) is taken out:
   on a phone it is 14.6 px of the row. */
#ast-mobile-header .site-logo-img {
	padding-right: 0;
}
@media (max-width: 921.99px) {
	#ast-mobile-header .custom-logo-link img {
		max-width: 122px;
		height: auto;
	}
}
/* So the logo, the pill (with its dot) and the menu toggle fit on one row
   with the toggle clear of the right edge, summed from the theme's CSS (not
   rendered; to check in the preview at 320, 360, 375 and 421 px):
   - 421 to 921 px: as approved, the row is about 337 px with the dot.
   - 360 to 420 px: the logo at 108 px, 10 px between the two sides, 16 px
     between the pill and the toggle: about 305 px (Segoe UI) to 311 px
     (SF Pro, estimated) of the 320 px inside the bar at 360 px.
   - Under 360 px: 14 px bar padding, the logo at 84 px, the pill a size
     smaller: about 271 to 276 px of the 292 px inside the bar at 320 px
     (the width of the WCAG reflow test and the first iPhone SE). */
@media (max-width: 420px) {
	#ast-mobile-header .ast-builder-grid-row {
		grid-column-gap: 10px;
	}
	#ast-mobile-header .ast-header-html-1 {
		padding-right: 6px;
		margin-right: 0;
	}
	#ast-mobile-header .custom-logo-link img {
		max-width: 108px;
	}
}
@media (max-width: 359.98px) {
	#masthead #ast-mobile-header .ast-primary-header-bar {
		padding-left: 14px;
		padding-right: 14px;
	}
	#ast-mobile-header .custom-logo-link img {
		max-width: 84px;
	}
	#ast-mobile-header .ast-header-html-1 a.eg-hdr-cta {
		padding: 6px 10px;
		font-size: 12.5px;
	}
}

/* ---- 4. Phones and tablets: the dropdown menu ------------------------- */

/* Main Menu serves the dropdown too, so item 154 is in it. Once the pill is
   in the bar it is left out of the dropdown, as in the approved preview.
   Only while the pill is there: before the theme setting goes in (or if it
   is taken out) the item stays, and a browser without :has() keeps it. */
#ast-mobile-header:has(.eg-hdr-cta) .menu-item-154 {
	display: none;
}
/* The open dropdown now sticks with the header, so it scrolls inside itself
   when it is taller than the screen below the bar (a phone held sideways). */
@media (max-width: 921.99px) {
	#ast-mobile-header .ast-mobile-header-content {
		max-height: calc(100vh - 81px);
		max-height: calc(100dvh - 81px);
		overflow-y: auto;
		overscroll-behavior: contain;
	}
	/* Logged in: the admin bar above the header as well (32 px, then 46 px
	   at 782 px and narrower; kept at 46 px below 600 px, where the bar
	   scrolls away, so the menu's end is never under the screen's edge). */
	.admin-bar #ast-mobile-header .ast-mobile-header-content {
		max-height: calc(100vh - 113px);
		max-height: calc(100dvh - 113px);
	}
}
@media screen and (max-width: 782px) {
	.admin-bar #ast-mobile-header .ast-mobile-header-content {
		max-height: calc(100vh - 127px);
		max-height: calc(100dvh - 127px);
	}
}