/* ============================================================================
   Astra chrome, painted dark.

   Astra is a light theme: white header dropdown, white footer band, and two
   #046bd2 blue accents (the mobile menu toggle and the back-to-top button).
   The site repaints text as pale #dff1f6, so every container Astra left white
   renders as white-on-white — the mobile menu and the footer both did.

   Rather than patching one body class at a time (which is how those two got
   missed), this file loads on every page and repaints Astra's own chrome once:
   the footer band, the mobile dropdown, submenus, the toggle and the back-to-top
   button. Site pages add their own scene styling on top; this is the floor.

   Also owns .tk-sitefoot, which used to live in tarot-story.css and therefore
   only existed on the front page.
   ========================================================================== */

/* ---------- 1. Astra's footer band: off everywhere ---------------------- */

/* Its only content is a duplicated "Copyright … Powered by Astra" line. The
   real footer is .tk-sitefoot below, which carries navigation and the legal
   disclaimer, and now renders on every page through wp_footer. */
#colophon.site-footer,
.site-footer > .site-below-footer-wrap,
.site-footer > .site-primary-footer-wrap {
	display: none !important;
}

/* Belt and braces: if any child of a leftover footer wrapper paints white,
   strip it so nothing can ever show as a bright band again. */
.site-footer .ast-builder-grid-row-container,
.site-footer .ast-builder-footer-grid-columns,
.site-footer .site-footer-section {
	background: transparent !important;
	border-color: rgba(223, 241, 246, .08) !important;
}

/* ---------- 2. Site footer (every page) --------------------------------- */

.tk-sitefoot {
	position: relative;
	width: 100%;
	margin: 0;
	padding: clamp(34px, 4vw, 56px) 0 clamp(26px, 3vw, 40px);
	background: #04070f;
	border-top: 1px solid rgba(223, 241, 246, .07);
	color: rgba(223, 241, 246, .62);
	font-family: 'Quicksand', system-ui, -apple-system, 'Segoe UI', sans-serif;
	text-align: left;
}

.tk-sitefoot__in {
	width: min(1120px, calc(100% - 44px));
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	gap: clamp(24px, 4vw, 56px);
	justify-content: space-between;
	align-items: flex-start;
}

.tk-sitefoot__brand {
	flex: 0 1 320px;
	min-width: 200px;
}

.tk-sitefoot__name {
	margin: 0 0 8px;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba(223, 241, 246, .8);
}

.tk-sitefoot__tag {
	margin: 0;
	font-size: 12px;
	line-height: 1.7;
	max-width: 30ch;
	color: rgba(223, 241, 246, .45);
}

.tk-sitefoot__nav {
	display: flex;
	flex-direction: column;
	flex: 0 1 auto;
	gap: 9px;
	min-width: 108px;
}

.tk-sitefoot__label {
	margin: 0 0 3px;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: rgba(223, 241, 246, .3);
}

.tk-sitefoot__nav a {
	font-size: 12.5px;
	letter-spacing: .06em;
	color: rgba(223, 241, 246, .62);
	text-decoration: none !important;
	transition: color .3s ease;
}

.tk-sitefoot__nav a:hover,
.tk-sitefoot__nav a:focus { color: rgb(155 124 246); }

.tk-sitefoot__base {
	width: min(1120px, calc(100% - 44px));
	margin: clamp(24px, 3vw, 38px) auto 0;
	padding-top: 16px;
	border-top: 1px solid rgba(223, 241, 246, .07);
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	justify-content: space-between;
	font-size: 11px;
	line-height: 1.6;
	color: rgba(223, 241, 246, .38);
}

@media (max-width: 640px) {
	.tk-sitefoot__in,
	.tk-sitefoot__base { width: calc(100% - 32px); }
	.tk-sitefoot__nav { gap: 12px 18px; }

	/* The back-to-top button is fixed bottom-right and was sitting on top of
	   "…entertainment only." Give the legal line a lane to breathe in. */
	.tk-sitefoot__base { padding-right: 58px; }
}

/* ---------- 3. Mobile dropdown menu ------------------------------------- */

.ast-mobile-header-wrap .ast-mobile-header-content,
.ast-mobile-header-wrap .ast-mobile-header-content .main-header-menu,
.ast-mobile-header-wrap .ast-mobile-header-content .ast-nav-menu,
.ast-mobile-header-wrap .ast-mobile-header-content li,
.ast-mobile-header-wrap .ast-mobile-header-content .menu-link {
	background: transparent !important;
}

.ast-mobile-header-wrap .ast-mobile-header-content {
	background: #070d1a !important;
	border-top: 1px solid rgba(223, 241, 246, .07);
	border-bottom: 1px solid rgba(223, 241, 246, .09);
	padding-bottom: 8px;
	box-shadow: 0 26px 50px -14px rgba(0, 0, 0, .78);
}

/* Nested items (Guides → its children) also inherit Astra's white. */
.ast-mobile-header-content .sub-menu,
.ast-mobile-header-content .children,
.ast-mobile-header-content .sub-menu .menu-link,
.ast-mobile-header-content .children .menu-link {
	background: transparent !important;
}

.ast-mobile-header-content .sub-menu .menu-link,
.ast-mobile-header-content .children .menu-link {
	padding-left: 40px !important;
	font-size: 12.5px;
	color: rgba(223, 241, 246, .64) !important;
}

/* Astra sets line-height: 3em here, which turns a seven-item menu into a 520px
   curtain. Tighten to something a thumb can still hit. */
.ast-mobile-header-content .menu-link {
	padding: 13px 22px !important;
	font-size: 13.5px;
	line-height: 1.45 !important;
	letter-spacing: .04em;
	color: rgba(223, 241, 246, .82) !important;
	border-top: 1px solid rgba(223, 241, 246, .07);
	transition: color .25s ease, background-color .25s ease;
}

.ast-mobile-header-content .ast-menu-toggle {
	line-height: 1 !important;
}

.ast-mobile-header-content li:first-child .menu-link { border-top: 0; }

.ast-mobile-header-content .menu-link:hover,
.ast-mobile-header-content .menu-link:focus,
.ast-mobile-header-content .current-menu-item > .menu-link,
.ast-mobile-header-content .current_page_item > .menu-link {
	color: #cbb6ff !important;
	background: rgba(155, 124, 246, .10) !important;
}

/* ---------- 4. Desktop submenus ----------------------------------------- */

/* Desktop only. On a phone Astra expands this same .sub-menu inline, and the
   rounded box + overflow:hidden turned it into a 71px tall window that clipped
   the third guide and floated over the items below. */
.ast-desktop .main-header-menu .sub-menu,
.ast-desktop .main-header-menu .children {
	background: #0a1226 !important;
	border: 1px solid rgba(223, 241, 246, .10);
	box-shadow: 0 22px 44px -18px rgba(0, 0, 0, .8);
	border-radius: 12px;
	overflow: hidden;
}

/* Inline expansion on phones: no box, just an inset tint and a left rule. */
.ast-mobile-header-content .sub-menu,
.ast-mobile-header-content .children {
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	overflow: visible !important;
	margin: 0 !important;
	background: rgba(155, 124, 246, .06) !important;
	box-shadow: inset 3px 0 0 rgba(155, 124, 246, .45) !important;
}

.main-header-menu .sub-menu .menu-link,
.main-header-menu .children .menu-link {
	background: transparent !important;
	color: rgba(223, 241, 246, .78) !important;
}

.main-header-menu .sub-menu .menu-link:hover,
.main-header-menu .children .menu-link:hover {
	background: rgba(155, 124, 246, .12) !important;
	color: #cbb6ff !important;
}

/* ---------- 5. Toggle buttons and back-to-top --------------------------- */

/* Astra's default accent (#046bd2) reads as a broken brand colour on navy,
   and a blue square in the corner is the first thing an eye lands on. */
.main-header-menu-toggle,
.ast-mobile-menu-trigger-minimal,
.main-header-menu-toggle .mobile-menu-toggle-icon,
.ast-mobile-menu-trigger-minimal .mobile-menu-toggle-icon,
.ast-menu-toggle {
	color: rgba(223, 241, 246, .86) !important;
}

.main-header-menu-toggle svg,
.ast-mobile-menu-trigger-minimal svg,
.ast-menu-toggle svg,
.mobile-menu-toggle-icon svg { fill: currentColor; }

.main-header-menu-toggle:hover,
.ast-mobile-menu-trigger-minimal:hover,
.ast-menu-toggle:hover { color: #cbb6ff !important; }

/* Astra's dotted focus ring looks like a broken border on a dark bar. Keep the
   keyboard affordance, restyle it. */
.main-header-menu-toggle:focus-visible,
.ast-menu-toggle:focus-visible {
	outline: 2px solid rgba(155, 124, 246, .75);
	outline-offset: 2px;
	border-radius: 10px;
}

.main-header-menu-toggle:focus:not(:focus-visible),
.ast-menu-toggle:focus:not(:focus-visible) { outline: none !important; }

#ast-scroll-top.ast-scroll-top-icon {
	width: 42px;
	height: 42px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(155, 124, 246, .16) !important;
	color: #cbb6ff !important;
	border: 1px solid rgba(155, 124, 246, .38);
	border-radius: 12px;
	box-shadow: 0 10px 26px -10px rgba(0, 0, 0, .7);
	backdrop-filter: blur(6px);
	transition: background-color .25s ease, color .25s ease;
}

#ast-scroll-top.ast-scroll-top-icon:hover,
#ast-scroll-top.ast-scroll-top-icon:focus {
	background: rgba(155, 124, 246, .30) !important;
	color: #ffffff !important;
}

#ast-scroll-top .ast-arrow-svg { fill: currentColor; width: 1em; height: 1em; }

/* ---------- 6. Language pill must not sit on the menu toggle ------------ */

/* Both are pinned to the top-right corner: .tk-lsw at right:10px, Astra's
   hamburger occupies the last 42px of the header. On a phone the pill landed
   on top of the button, leaving a clipped X poking out underneath. Move the
   pill left of the toggle on every page that still shows the site header —
   the immersive reading scene has no header, so it keeps the corner. */
@media (max-width: 921px) {
	body:not(.tk-immersive) .tk-lsw {
		top: 26px;
		/* clear of the 42px hamburger at the right edge with ~10px of air */
		right: 72px;
	}

	body.admin-bar:not(.tk-immersive) .tk-lsw {
		top: 58px;
	}
}

/* ---------- 7. Phone header: title vs. fixed pill ----------------------- */

/* .tk-lsw is position:fixed, so it floats over the header rather than sitting
   in its grid. At Astra's mobile title size the site name ran underneath the
   pill and got chopped mid-word. Pull the title down to a size that clears it,
   and let it ellipsis rather than collide if the name ever gets longer. */
@media (max-width: 640px) {
	body:not(.tk-immersive) .site-title,
	body:not(.tk-immersive) .site-title a {
		font-size: clamp(15px, 4.3vw, 19px) !important;
		line-height: 1.25;
		letter-spacing: .01em;
	}

	body:not(.tk-immersive) .site-title {
		max-width: calc(100vw - 168px);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}

/* ---------- 8. 404 and search: last pages on Astra's light card ---------- */

/* These two never got a dark body class, so Astra's white content card and
   slate text landed on top of the night sky: the site name in the header was
   near-invisible and the card punched a bright hole in the page. */

/* The sky layer paints over <body>, but if it is ever late or blocked the
   theme's own light grey shows through, so pin the floor colour as well. */
body.tk-has-sky.error404,
body.tk-has-sky.search,
body.tk-has-sky.archive,
body.tk-has-sky.blog,
body.tk-has-sky.category,
body.tk-has-sky.tag { background-color: #04070f !important; }

body.tk-has-sky.error404 .site-title,
body.tk-has-sky.error404 .site-title a,
body.tk-has-sky.search .site-title,
body.tk-has-sky.search .site-title a,
body.tk-has-sky.error404 h1,
body.tk-has-sky.search h1,
body.tk-has-sky.error404 .page-content,
body.tk-has-sky.search .page-content,
body.tk-has-sky.error404 .error-404,
body.tk-has-sky.error404 .error-404 *,
body.tk-has-sky.error404 .no-results,
body.tk-has-sky.search .no-results,
body.tk-has-sky.search article.post,
body.tk-has-sky.search article.post a {
	color: #dff1f6 !important;
}

body.tk-has-sky.error404 .error-404,
body.tk-has-sky.search .no-results,
body.tk-has-sky.search article.post {
	background: rgba(9, 16, 33, .74) !important;
	border: 1px solid rgba(223, 241, 246, .10);
	border-radius: 18px;
	box-shadow: 0 24px 60px -30px rgba(0, 0, 0, .9);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}

body.tk-has-sky.error404 input.search-field,
body.tk-has-sky.search input.search-field {
	background: rgba(255, 255, 255, .06) !important;
	border: 1px solid rgba(223, 241, 246, .18) !important;
	border-radius: 10px;
	color: #dff1f6 !important;
}

body.tk-has-sky.error404 input.search-field::placeholder,
body.tk-has-sky.search input.search-field::placeholder {
	color: rgba(223, 241, 246, .45) !important;
}

body.tk-has-sky.error404 .search-submit,
body.tk-has-sky.search .search-submit { color: #cbb6ff !important; }

/* ---------- 9. Search / archive listing --------------------------------- */

/* Astra renders each result inside .ast-article-inner, not on the <article>,
   so the earlier rule missed and every hit stayed a white card. Same story for
   the "Search Results for:" band above them. */
body.tk-has-sky.search .ast-article-inner,
body.tk-has-sky.archive .ast-article-inner,
body.tk-has-sky.blog .ast-article-inner,
body.tk-has-sky.category .ast-article-inner,
body.tk-has-sky.tag .ast-article-inner,
body.tk-has-sky.search .ast-archive-description,
body.tk-has-sky.archive .ast-archive-description,
body.tk-has-sky.blog .ast-archive-description {
	background: rgba(9, 16, 33, .74) !important;
	border: 1px solid rgba(223, 241, 246, .10);
	border-radius: 16px;
	box-shadow: 0 20px 48px -32px rgba(0, 0, 0, .85);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

body.tk-has-sky.search .ast-article-inner .entry-title,
body.tk-has-sky.search .ast-article-inner .entry-title a,
body.tk-has-sky.search .ast-article-inner .entry-content,
body.tk-has-sky.search .ast-article-inner .entry-meta,
body.tk-has-sky.search .ast-article-inner .entry-meta *,
body.tk-has-sky.search .ast-article-inner .ast-blog-single-element,
body.tk-has-sky.archive .ast-article-inner .entry-title,
body.tk-has-sky.archive .ast-article-inner .entry-title a,
body.tk-has-sky.archive .ast-article-inner .entry-content,
body.tk-has-sky.archive .ast-article-inner .entry-meta,
body.tk-has-sky.archive .ast-article-inner .entry-meta *,
body.tk-has-sky.blog .ast-article-inner .entry-title,
body.tk-has-sky.blog .ast-article-inner .entry-title a,
body.tk-has-sky.blog .ast-article-inner .entry-content,
body.tk-has-sky.blog .ast-article-inner .entry-meta,
body.tk-has-sky.blog .ast-article-inner .entry-meta *,
body.tk-has-sky.search .ast-archive-description *,
body.tk-has-sky.archive .ast-archive-description *,
body.tk-has-sky.blog .ast-archive-description * {
	color: rgba(223, 241, 246, .86) !important;
}

/* ---------- 10. Search submit button ------------------------------------ */

/* Astra's submit is a text button; with the field repainted dark the label
   overflowed the pill and read "Sea". Swap it for a search glyph. */

/* The <label> wraps the field and (in newer Astra) the icon button, but it is
   display:inline, so its box is only ~16px tall — used as the containing block
   that collapsed the absolutely positioned button to a 12px sliver. Make it a
   block so the button gets the full field height. */
body.tk-has-sky.error404 .search-form > label,
body.tk-has-sky.search .search-form > label { display: block; }

body.tk-has-sky.error404 .search-form { position: relative; }

body.tk-has-sky.error404 .search-form .search-submit,
body.tk-has-sky.search .search-form .search-submit {
	position: absolute;
	top: 2px;
	right: 2px;
	bottom: 2px;
	width: 42px;
	min-width: 42px;
	height: auto;
	min-height: 0;
	padding: 0;
	font-size: 0;
	color: transparent !important;
	border: 0 !important;
	border-radius: 10px;
	/* Inline SVG must be percent-encoded: raw < and > in a data URI are
	   silently dropped, which left a bare violet bar where the glyph should
	   be. */
	background-color: rgba(155, 124, 246, .14) !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cbb6ff' stroke-width='1.9' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M16.4 16.4 21 21'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: center center !important;
	background-size: 17px 17px !important;
	background-origin: padding-box !important;
	border-radius: 8px;
	box-shadow: none !important;
}

/* ---------- 11. right-to-left ------------------------------------------ */

/* Arabic, Hebrew, Persian and Urdu mirror the whole layout. Anything pinned
   with a physical `right` stays on the wrong edge and lands on top of the
   hamburger, so it has to be flipped by hand. */
html[dir="rtl"] .tk-lsw {
	right: auto;
	left: 10px;
}

@media (max-width: 921px) {
	html[dir="rtl"] body:not(.tk-immersive) .tk-lsw {
		right: auto;
		left: 72px;
	}
}

/* The dropdown panel opens from the top; its padding and dividers are
   symmetrical, but the caret on parents with children is not. */
html[dir="rtl"] .ast-mobile-header-content .sub-menu,
html[dir="rtl"] .ast-mobile-header-content .children {
	box-shadow: inset -3px 0 0 rgba(155, 124, 246, .45) !important;
}