/* =========================================================
   SITE CHROME — header & footer   (dyd-child, 2026-10-23)

   Rebuilt to the 2026 mockups. Unlike jen.css this is GLOBAL:
   the child theme's parts/header.html and parts/footer.html
   override the parent's, so every page gets this - the shop,
   the Sensei courses and lessons, and the old pages too.

   Values sampled from the mockup artboards (1024px wide), not
   estimated by eye:
     footer navy      #022a5f
     accent orange    #fd5516  (already the brand orange)
     header content   93% of page width (x40 -> x993 of 1024)
     header band      ~7.2% of page width tall
     footer band      ~7.3% of page width tall
     social icons     23px glyph circles on a 32px pitch
   ========================================================= */

.dydchrome {
	--dydc-max:  1320px;                      /* matches the .jen bands */
	--dydc-edge: clamp(16px, 2.4vw, 32px);    /* matches --jen-edge     */
	--dydc-navy: #012f69;
	--dydc-navy-deep: #022a5f;
	--dydc-orange: #fd5417;
}

.dydchrome-inner {
	width: calc(100% - 2 * var(--dydc-edge));
	max-width: var(--dydc-max);
	margin-inline: auto !important;
	gap: clamp(14px, 2vw, 32px) !important;
}


/* ---------------------------------------------------------
   HEADER
   --------------------------------------------------------- */

.dydhdr {
	background: #fff;
	padding-block: 14px;
	position: relative;
	z-index: 5;
}

.dydhdr-brand.wp-block-group { gap: 14px !important; flex-wrap: nowrap; }
.dydhdr-brand .wp-block-site-logo img { width: 72px; height: auto; display: block; }

/* The thin rule between badge and wordmark in the mockup. */
.dydhdr-lockup {
	border-left: 1px solid rgba(1, 47, 105, .22);
	padding-left: 14px;
}
.dydhdr-lockup > * { margin-block: 0 !important; }

.dydhdr .dydhdr-name,
.dydhdr .dydhdr-name a {
	font-family: "Poppins", system-ui, sans-serif;
	font-size: clamp(1.02rem, 1.3vw, 1.2rem);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -.01em;
	text-transform: none;       /* Course uppercases every heading */
	color: var(--dydc-navy);
	text-decoration: none;
	display: block;
	max-width: 10ch;            /* breaks to two lines, as drawn */
}

.dydhdr .dydhdr-tag {
	font-family: "Poppins", system-ui, sans-serif;
	font-size: .575rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--dydc-orange);
	margin: .35em 0 0 !important;
	white-space: nowrap;
}

.dydhdr .dydhdr-nav { flex: 1 1 auto; }
.dydhdr .dydhdr-nav .wp-block-navigation__container { gap: clamp(14px, 1.9vw, 30px); }
.dydhdr .dydhdr-nav a {
	font-family: "Poppins", system-ui, sans-serif;
	font-size: .94rem;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	color: #1b3a63;
	text-decoration: none;
	padding-bottom: 4px;
}
.dydhdr .dydhdr-nav a:hover { color: var(--dydc-orange); }

/* Active page: orange plus the underline from the mockup. */
.dydhdr .dydhdr-nav .current-menu-item > a,
.dydhdr .dydhdr-nav .current_page_item > a {
	color: var(--dydc-orange);
	box-shadow: inset 0 -2px 0 0 var(--dydc-orange);
}

.dydhdr .dydhdr-talk > .wp-block-button__link {
	background: var(--dydc-orange);
	color: #fff;
	font-family: "Poppins", system-ui, sans-serif;
	font-size: .92rem;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	border-radius: 999px;
	padding: .85em 1.9em;   /* symmetric again since the phone glyph came out */
	white-space: nowrap;
}
.dydhdr .dydhdr-talk > .wp-block-button__link:hover { background: #e04409; }


/* ---------------------------------------------------------
   FOOTER
   --------------------------------------------------------- */

.dydftr {
	background: var(--dydc-navy-deep);
	padding-block: clamp(20px, 2.2vw, 30px);
	color: #fff;
}

.dydftr .dydftr-lockup > * { margin-block: 0 !important; }
.dydftr .dydftr-name,
.dydftr .dydftr-name a {
	font-family: "Poppins", system-ui, sans-serif;
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.15;
	text-transform: none;
	color: #fff;
	text-decoration: none;
}
.dydftr .dydftr-tag {
	font-family: "Poppins", system-ui, sans-serif;
	font-size: .575rem;
	font-weight: 500;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .78);
	margin: .45em 0 0 !important;
	white-space: nowrap;
}

.dydftr .dydftr-nav a {
	font-family: "Poppins", system-ui, sans-serif;
	font-size: .88rem;
	font-weight: 400;
	text-transform: none;
	color: rgba(255, 255, 255, .92);
	text-decoration: none;
}
.dydftr .dydftr-nav a:hover { color: #fff; text-decoration: underline; }
.dydftr .dydftr-nav .wp-block-navigation__container { gap: 0; flex-wrap: wrap; }

/* The thin pipes between footer links. */
.dydftr .dydftr-nav .wp-block-navigation-item {
	padding-inline: clamp(8px, 1.1vw, 15px);
	position: relative;
}
.dydftr .dydftr-nav .wp-block-navigation-item + .wp-block-navigation-item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 1px;
	height: 12px;
	background: rgba(255, 255, 255, .34);
}

.dydftr .dydftr-social { gap: 9px !important; }
.dydftr .dydftr-social .wp-social-link {
	width: 31px;
	height: 31px;
	border: 1px solid rgba(255, 255, 255, .55);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent !important;
}
.dydftr .dydftr-social .wp-social-link a { padding: 0; }
.dydftr .dydftr-social svg { width: 16px; height: 16px; fill: #fff; }
.dydftr .dydftr-social .wp-social-link:hover { border-color: var(--dydc-orange); }
.dydftr .dydftr-social .wp-social-link:hover svg { fill: var(--dydc-orange); }

.dydftr-legal { margin-top: 14px !important; }
.dydftr .dydftr-legaltext {
	font-family: "Poppins", system-ui, sans-serif;
	font-size: .74rem;
	color: rgba(255, 255, 255, .6);
	margin: 0 !important;
}


/* ---------------------------------------------------------
   SMALL SCREENS
   --------------------------------------------------------- */

@media (max-width: 880px) {
	.dydchrome-inner { justify-content: center !important; text-align: center; }
	.dydhdr-brand.wp-block-group { justify-content: center; }
	.dydhdr .dydhdr-name { max-width: none; }
	.dydftr .dydftr-lockup { text-align: center; }
	.dydftr-legal { justify-content: center !important; }
}


/* ---------------------------------------------------------
   UTILITY MENU  (the hamburger)

   Holds the store side of the site - Shop, Cart, Login - on every
   page, so none of it has to sit in the header competing with
   "Let's Talk". On phones the same panel also carries the main
   page links, which is why the inline nav is hidden there rather
   than given an overlay of its own: two hamburgers side by side
   in a 100px header is worse than one.

   chrome.js drives the open/close state, relabels Login once a
   visitor is signed in, and hangs the item count off Cart. None of
   that is required for the links to work.
   --------------------------------------------------------- */

.dydmenu { position: relative; order: 3; margin-left: auto; }
.dydhdr .dydchrome-inner > .dydhdr-cta { order: 4; }

.dydmenu-toggle {
	width: 42px;
	height: 42px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	background: transparent;
	border-radius: 999px;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}
.dydmenu-toggle:hover { background: rgba(1, 47, 105, .06); }
.dydmenu-toggle:focus-visible { outline: 2px solid var(--dydc-orange); outline-offset: 2px; }

.dydmenu-bars { position: relative; }
.dydmenu-bars,
.dydmenu-bars::before,
.dydmenu-bars::after {
	display: block;
	width: 20px;
	height: 2px;
	background: var(--dydc-navy);
	border-radius: 2px;
	transition: transform .18s ease, background-color .18s ease;
}
.dydmenu-bars::before,
.dydmenu-bars::after { content: ""; position: absolute; left: 0; }
.dydmenu-bars::before { top: -6px; }
.dydmenu-bars::after  { top: 6px; }

.dydmenu-toggle:hover .dydmenu-bars,
.dydmenu-toggle:hover .dydmenu-bars::before,
.dydmenu-toggle:hover .dydmenu-bars::after { background: var(--dydc-orange); }

/* Open: the middle bar goes, the outer two cross. */
.dydmenu.is-open .dydmenu-bars { background: transparent !important; }
.dydmenu.is-open .dydmenu-bars::before { transform: translateY(6px) rotate(45deg); }
.dydmenu.is-open .dydmenu-bars::after  { transform: translateY(-6px) rotate(-45deg); }

.dydmenu-panel {
	position: absolute;
	right: 0;
	top: calc(100% + 12px);
	min-width: 210px;
	padding: 8px 0;
	background: #fff;
	border: 1px solid rgba(1, 47, 105, .12);
	border-radius: 14px;
	box-shadow: 0 14px 34px rgba(1, 47, 105, .16);
	z-index: 60;
	display: none;
}
.dydmenu.is-open .dydmenu-panel { display: block; }

/* One link style for both halves of the panel. */
.dydmenu-panel a {
	display: block;
	font-family: "Poppins", system-ui, sans-serif;
	font-size: .92rem;
	font-weight: 500;
	line-height: 1.3;
	text-transform: none;
	text-decoration: none;
	color: #1b3a63;
	padding: .58em 18px;
}
.dydmenu-panel a:hover { color: var(--dydc-orange); background: rgba(253, 84, 23, .07); }
.dydmenu-panel .current-menu-item > a,
.dydmenu-panel .current_page_item > a { color: var(--dydc-orange); }

.dydmenu-util { list-style: none; margin: 0; padding: 0; }
.dydmenu-util li { margin: 0; }

/* The page links live inline on desktop, so the panel only needs
   the store items; the rule above them appears with them. */
.dydmenu-panel .dydmenu-pages { display: none; }
.dydmenu-panel .dydmenu-pages .wp-block-navigation__container { gap: 0; }
.dydmenu-panel .dydmenu-pages .wp-block-navigation-item { padding-inline: 0; }

/* Woo still injects its own header widgets; functions.php strips
   them. Belt and braces in case a future release renames the block. */
.dydhdr .wp-block-woocommerce-mini-cart,
.dydhdr .wp-block-woocommerce-customer-account { display: none !important; }

@media (max-width: 880px) {
	.dydhdr .dydhdr-nav { display: none; }
	.dydmenu { order: 2; margin-left: 0; }
	.dydmenu-panel .dydmenu-pages { display: flex; }
	.dydmenu-util { border-top: 1px solid rgba(1, 47, 105, .12); margin-top: 8px; padding-top: 8px; }
}

/* On phones the page links share the panel with Shop/Cart/Login, so they
   need the same full-width hit area. A navigation block left to itself
   sizes each item to its text, which makes the hover bands ragged. */
.dydmenu-panel .dydmenu-pages,
.dydmenu-panel .dydmenu-pages .wp-block-navigation__container {
	width: 100%;
	align-items: stretch;
}
.dydmenu-panel .dydmenu-pages .wp-block-navigation-item { width: 100%; }
.dydmenu-panel .dydmenu-pages .wp-block-navigation-item__content,
.dydmenu-panel .dydmenu-pages a { display: block; width: 100%; }


/* ---------------------------------------------------------
   FLOATING STORE CART

   The header has no cart by design - Shop, Cart and Login sit in
   the utility menu - but a cart behind a hamburger is too far away
   once someone is actually shopping. functions.php prints this on
   store pages only, hidden; chrome.js reveals it the moment the
   cart has something in it, so a browsing visitor never sees it.
   --------------------------------------------------------- */

.dydcart {
	position: fixed;
	right: clamp(16px, 2.4vw, 32px);
	bottom: clamp(16px, 2.4vw, 32px);
	z-index: 80;
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 13px 20px;
	border-radius: 999px;
	background: var(--dydc-orange, #fd5417);
	color: #fff;
	font-family: "Poppins", system-ui, sans-serif;
	font-size: .92rem;
	font-weight: 600;
	line-height: 1;
	text-transform: none;
	text-decoration: none;
	box-shadow: 0 10px 28px rgba(1, 47, 105, .28);
	transition: transform .16s ease, background-color .16s ease;
}
.dydcart[hidden] { display: none; }
.dydcart:hover { background: #e04409; color: #fff; transform: translateY(-2px); }
.dydcart:focus-visible { outline: 2px solid #012f69; outline-offset: 3px; }

.dydcart svg { width: 20px; height: 20px; display: block; }

.dydcart-count {
	min-width: 22px;
	height: 22px;
	padding-inline: 6px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background: rgba(255, 255, 255, .24);
	font-size: .78rem;
	line-height: 1;
}
.dydcart-count:empty { display: none; }

/* On a phone the glyph and the number say it; the word is redundant
   and the pill should not eat the thumb's half of the screen. */
@media (max-width: 600px) {
	.dydcart { padding: 13px 16px; }
	.dydcart-label {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
		border: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.dydcart { transition: none; }
	.dydcart:hover { transform: none; }
}