/*
 * Redesign — Theme-level CSS.
 *
 * Rules that live outside the bundle but are required by the
 * integration (fixed navbar offset, body-class gating, legacy CSS
 * conflict overrides). Keep this file thin; most styling should
 * come from the bundle's CSS.
 *
 * Load order: after nav.css / footer.css / hero.css.
 */


/* ─── Brand palette extensions ───────────────────────────────────────
   Tokens introduced by redesigned sections (Figma file
   o7TW9TI14xVpo4cvpexryD) that aren't in the bundle's
   design-system.css. Additive — the bundle's existing tokens are
   untouched and continue to drive nav / hero / footer. New section
   CSS should reference these names rather than inlining hex values. */
:root {
	--brand-dark-navy: #093055;
	--brand-bright-blue: #006fe7;
	--brand-bright-blue-card: rgba(0, 99, 218, 0.85);
	--brand-mint-green: #c8feb6;
	--brand-sand: #eae9e3;
	--brand-text-muted: #6a757e;
}


/* ─── Legacy reset overrides ─────────────────────────────────────────
   The legacy main.min.css ships rules like `ul { list-style: disc }`
   and `ol, ul { margin: 0 0 1.5em 3em }` (specificity 0,0,1) that
   beat design-system.css's `*, *::before, *::after { margin: 0;
   padding: 0 }` global reset (specificity 0,0,0). Without these
   overrides, the browser-default `padding-left: 40px` on a <ul>
   pushes navbar links right of center and adds visible bullet
   indents inside mega panels, the footer, and the mobile drawer.

   Scoped to redesign chrome containers so legacy templates stay
   unaffected. */
.navbar ul,
.navbar ol,
.mega ul,
.mega ol,
.mobile-overlay ul,
.mobile-overlay ol,
.footer ul,
.footer ol,
.hpv5-section ul,
.hpv5-section ol {
	margin: 0;
	padding: 0;
	list-style: none;
}


/* ─── :visited link color ────────────────────────────────────────────
   Legacy main.min.css ships `a:visited { color: purple }` (specificity
   0,1,1) which beats the bundle's `.navbar__link { color: navy }`
   (specificity 0,1,0). After visiting a nav target, the link turns
   purple — not what the design wants.

   Two-layer fix:
   (1) Catch-all under chrome containers sets visited <a> to inherit;
       this works for anchors whose visible color comes from CHILD
       elements (mega item title/desc, login title/desc, footer brand).
   (2) Per-class :visited rules re-state the color for anchors that
       set their own color directly. Specificity (0,2,0 from .class +
       :visited) beats `a:visited` (0,1,1). */

.navbar a:visited,
.mega a:visited,
.mobile-overlay a:visited,
.login-dropdown a:visited,
.footer a:visited,
.hpv5-section a:visited {
	color: inherit;
}

/* Anchors that set color via their own class. */
.navbar__link:visited                  { color: var(--color-navy-950); }
.mega__promo-link:visited              { color: var(--color-blue-300); }
.mega__see-all:visited                 { color: var(--color-blue-300); }
.mega__bottom-cta--ghost:visited       { color: var(--color-navy-950); }
.mega__bottom-cta--primary:visited     { color: #fff; }
.login-dropdown__link:visited          { color: var(--color-navy-950); }
.mobile-overlay__direct-link:visited   { color: var(--color-navy-950); }
.mobile-overlay__login-link:visited    { color: var(--color-gray-500); }
.mobile-overlay__links a:visited       { color: var(--color-gray-600); }
.footer__links a:visited               { color: rgba(255, 255, 255, 0.4); }
.footer__legal a:visited               { color: rgba(255, 255, 255, 0.3); }
.btn--primary:visited                  { color: var(--color-text-on-blue); }
.btn--secondary:visited                { color: var(--color-text); }

/* ─── Fixed navbar offset ────────────────────────────────────────────
   Two ways content clears the 72px fixed navbar:

   (1) Pages whose top content block is a legacy .cy-group__hero —
       the legacy CSS rule
         body.has-hero-block .site-main .entry-content .cy-group__hero
           { padding-top: var(--cy-header-h) }
       already adds top padding to the hero block. We override
       --cy-header-h from its legacy 140px down to 72px so it clears
       our navbar and nothing more.

   (2) Pages without a hero block — we add 72px of body padding so
       generic content doesn't slide under the navbar.

   Hero pages (the redesigned front page) carry their own top padding
   inside the hero markup; no extra body padding needed. */
body {
	--wp-admin-bar-height: 0px;
	--cy-navbar-h: 72px;
	--cy-promo-h: 0px;
	--cy-header-h: calc(var(--cy-promo-h) + var(--cy-navbar-h));
	--nav-total-height: calc(var(--wp-admin-bar-height) + var(--cy-header-h));
}

body.has-rnv-promo {
	--cy-promo-h: 40px;
}

body.has-fixed-navbar:not(.has-hero-block),
body.has-fixed-navbar.capability-page,
body.calculator-page-body {
	padding-top: var(--cy-header-h);
}

body.has-hero {
	padding-top: 0;
}


/* ─── WP admin-bar collision ─────────────────────────────────────────
   WP already offsets the document when #wpadminbar is visible. The theme
   only needs to move fixed nav surfaces below that bar; content padding
   still clears the site header alone. */
body.admin-bar {
	--wp-admin-bar-height: 32px;
}

body.admin-bar .navbar {
	top: var(--wp-admin-bar-height);
}

body.admin-bar .mega,
body.admin-bar .mega__backdrop {
	top: var(--cy-header-h);
}

body.admin-bar .mobile-overlay,
body.admin-bar .mobile-overlay-backdrop {
	top: var(--nav-total-height);
}

body.admin-bar.has-fixed-navbar:not(.has-hero-block),
body.admin-bar.has-fixed-navbar.capability-page,
body.admin-bar.calculator-page-body {
	padding-top: var(--cy-header-h);
}

body.admin-bar.has-hero {
	padding-top: 0;
}

@media (max-width: 782px) {
	body.admin-bar {
		--wp-admin-bar-height: 46px;
	}
}

/* WP's admin-bar.min.css flips `#wpadminbar { position: absolute }`
 * at <=600px so it scrolls away with the page on phones. Force it back
 * to fixed so admins can hop to the dashboard / view drafts / etc.
 * without scrolling all the way back to the top. The html margin-top
 * WP sets (46px on mobile via the --wp-admin--admin-bar--height var)
 * still reserves space at the top, so content doesn't slide under. */
@media screen and (max-width: 600px) {
	#wpadminbar {
		position: fixed !important;
	}
}


/* ─── Floating admin "Edit" link ─────────────────────────────────────
   WP outputs the post-edit link inside <footer class="entry-footer">
   at the end of the entry content. Default: a plain inline link sitting
   as its own block just above the site footer. Here: lift it out of
   normal flow and pin it to the bottom-left of the viewport as a
   compact pill — logged-in admins can jump to the editor from any page
   without the link claiming space in the design. */

.edit-link {
	position: fixed;
	left: 16px;
	bottom: 16px;
	z-index: 9999;
	margin: 0;
	padding: 0;
}

.entry-footer .edit-link {
	display: inline-block;
}

.entry-footer .post-edit-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--brand-dark-navy, #093055);
	color: #fcfcfb;
	padding: 8px 14px;
	border-radius: 999px;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 13px;
	line-height: 1;
	text-decoration: none;
	box-shadow: 0 4px 16px rgba(9, 48, 85, 0.25);
	opacity: 0.75;
	transition: opacity 0.15s ease, transform 0.15s ease, background-color 0.15s ease;
}

.entry-footer .post-edit-link::before {
	content: "";
	display: inline-block;
	width: 14px;
	height: 14px;
	background-color: currentColor;
	/* Pencil/edit icon (material symbols "edit") as a CSS mask so the
	   glyph inherits the link's text color without needing an <svg>
	   injected into the theme. */
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a1 1 0 0 0 0-1.41l-2.34-2.34a1 1 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z'/></svg>") center / contain no-repeat;
	        mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a1 1 0 0 0 0-1.41l-2.34-2.34a1 1 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z'/></svg>") center / contain no-repeat;
}

.entry-footer .post-edit-link:hover,
.entry-footer .post-edit-link:focus {
	opacity: 1;
	background: #0f4a7c;
	color: #fcfcfb;
	text-decoration: none;
	transform: translateY(-1px);
}

/* Hide the "Home" / post-title screen-reader label so the pill stays
   compact visually — accessibility is preserved since it's still in
   the DOM. */
.entry-footer .screen-reader-text {
	position: absolute;
	clip: rect(1px, 1px, 1px, 1px);
	width: 1px;
	height: 1px;
	overflow: hidden;
}


/* ─── /events-and-webinar/ — CTA / footer breathing room ────────────
   The legacy cy/cta-home block has no bottom spacing of its own, so
   on this page the "Book a Demo" CTA banner butts directly against
   the footer. Add a generous bottom margin only on this page so the
   block stays unchanged everywhere else. */
body.events-webinars-page .cta-home-section {
	margin-bottom: 96px;
}

@media (max-width: 760px) {
	body.events-webinars-page .cta-home-section {
		margin-bottom: 64px;
	}
}