/* =========================================================
   Ricardo Reading — Custom CSS
   Menu order: home / book log / booklist / about / writing
   ========================================================= */

/* =========================================================
   0. Site variables
   ========================================================= */

:root {
	--rr-pink: #ea71a3;
	--rr-black: #222222;
	--rr-gray-hover: #777777;
	--rr-divider: #e5e5e5;
	--rr-content-width: 660px;
	--rr-menu-shadow: 0 4px 0 rgba(0, 0, 0, 0.14);
}

/* Smooth scrolling for page jumps and back-to-top links */
html {
	scroll-behavior: smooth;
}

/* =========================================================
   1. Masthead / logo
   ========================================================= */

/* Make the masthead/logo larger on desktop */
@media screen and (min-width: 900px) {
	.site-branding img,
	.custom-logo {
		max-width: 760px;
		width: 100%;
		height: auto;
	}
}

/* Line below masthead on non-home menu pages */
body:not(.home) .site-branding::after {
	content: "";
	display: block;
	max-width: var(--rr-content-width);
	margin: 2em auto !important;
	padding: 0;
	border-top: 1px solid var(--rr-divider);
}

/* =========================================================
   2. Intro text / masthead captions
   ========================================================= */

/* Homepage intro */
.home .site-branding::after {
	content: "A running record of reviews, ramblings, and other bookish reveries. My reading life, in other words. If this is your first visit, you might start by exploring the book log and wandering through the archives. You can read a story or two. Or you can simply settle in and scroll awhile. Welcome.";
	display: block;
	max-width: var(--rr-content-width);
	margin: 2em auto !important;
	padding: 1.25em 1.5em 0;
	border-top: 1px solid var(--rr-divider);
	font-size: 13.5px;
	line-height: 1.7;
	font-weight: normal;
	text-align: center;
	color: inherit;
	animation: rr-intro-fade 1.2s ease both;
}

/* Space between homepage intro and menu */
.home .site-branding {
	margin-bottom: 0 !important;
	padding-bottom: 0 !important;
}

.home .site-header nav,
.home .site-header .menu,
.home .site-header div[class*="menu"] {
	margin-top: 2em !important;
	padding-top: 0 !important;
	overflow: visible !important;
}

/* Shared section intro styling */
body:has(.main-navigation a[aria-current="page"][href*="/book-log/"]) .site-branding::after,
body:has(.main-navigation .current-menu-item a[href*="/book-log/"]) .site-branding::after,
body:has(.main-navigation a[aria-current="page"][href*="/booklist-reviews/"]) .site-branding::after,
body:has(.main-navigation .current-menu-item a[href*="/booklist-reviews/"]) .site-branding::after,
body:has(.main-navigation .current_page_item a[href*="/booklist-reviews/"]) .site-branding::after,
body:has(.main-navigation a[aria-current="page"][href*="/about/"]) .site-branding::after,
body:has(.main-navigation .current-menu-item a[href*="/about/"]) .site-branding::after,
body:has(.main-navigation a[aria-current="page"][href*="/ricardo-writing/"]) .site-branding::after,
body:has(.main-navigation .current-menu-item a[href*="/ricardo-writing/"]) .site-branding::after {
	display: block;
	max-width: var(--rr-content-width);
	margin: 2em auto 0;
	padding: 1.25em 1.5em 0;
	border-top: 1px solid var(--rr-divider);
	font-size: 14px;
	line-height: 1.7;
	font-weight: normal;
	text-align: center;
	color: inherit;
	opacity: 0;
	animation: rr-section-intro-fade 1.8s ease forwards;
}

/* Book Log intro */
body:has(.main-navigation a[aria-current="page"][href*="/book-log/"]) .site-branding::after,
body:has(.main-navigation .current-menu-item a[href*="/book-log/"]) .site-branding::after {
	content: "My reading life, year by year. Linked titles lead to the relevant post.";
}

/* Booklist intro */
body:has(.main-navigation a[aria-current="page"][href*="/booklist-reviews/"]) .site-branding::after,
body:has(.main-navigation .current-menu-item a[href*="/booklist-reviews/"]) .site-branding::after,
body:has(.main-navigation .current_page_item a[href*="/booklist-reviews/"]) .site-branding::after {
	content: "A record of my work for Booklist, organized by year.";
}

/* About intro */
body:has(.main-navigation a[aria-current="page"][href*="/about/"]) .site-branding::after,
body:has(.main-navigation .current-menu-item a[href*="/about/"]) .site-branding::after {
	content: "A few words about your humble reader.";
}

/* Writing intro */
body:has(.main-navigation a[aria-current="page"][href*="/ricardo-writing/"]) .site-branding::after,
body:has(.main-navigation .current-menu-item a[href*="/ricardo-writing/"]) .site-branding::after {
	content: "Submitted for your perusal: a small selection of stories, sketches, and other strangeness.";
}

/* Intro animations */
@keyframes rr-intro-fade {
	from {
		opacity: 0;
		transform: translateY(4px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes rr-section-intro-fade {
	from {
		opacity: 0;
		transform: translateY(4px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* =========================================================
   3. Main menu tabs
   ========================================================= */

/* Header/menu spacing */
.site-header nav,
.site-header .menu,
.site-header .menu-primary,
.site-header .menu-main-container,
.site-header .menu-main-menu-container,
.site-header div[class*="menu"] {
	margin-top: 2em !important;
	margin-bottom: 1.25em !important;
	border-top: none !important;
	border-bottom: none !important;
	box-shadow: none !important;
	overflow: visible !important;
}

/* Remove list spacing */
.site-header nav ul,
.site-header .menu ul,
.site-header div[class*="menu"] ul {
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	box-shadow: none !important;
	overflow: visible !important;
}

/* Keep menu items inline */
.site-header nav li,
.site-header .menu li,
.site-header div[class*="menu"] li,
.site-header li.menu-item {
	display: inline-block !important;
	margin: 0 .35em !important;
	padding: 0 !important;
	list-style: none !important;
	border: none !important;
	overflow: visible !important;
}

/* File-tab menu links */
.site-header nav a,
.site-header nav a:link,
.site-header nav a:visited,
.site-header .menu a,
.site-header .menu a:link,
.site-header .menu a:visited,
.site-header div[class*="menu"] a,
.site-header div[class*="menu"] a:link,
.site-header div[class*="menu"] a:visited,
.site-header .menu-item a,
.site-header .menu-item a:link,
.site-header .menu-item a:visited {
	display: inline-block !important;
	position: relative !important;
	z-index: 1;
	margin: .25em .16em 0 !important;
	padding: .32em .95em .28em !important;
	font-size: 18px !important;
	font-weight: bold !important;
	font-variant: small-caps !important;
	text-transform: lowercase !important;
	text-decoration: none !important;
	color: var(--rr-black) !important;
	background: var(--rr-pink) !important;
	border: none !important;
	border-radius: 6px 6px 0 0 !important;
	box-shadow: none !important;
	opacity: 1 !important;
	transform: scale(1) translateY(0);
	transform-origin: bottom center;
	transition: transform .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease;
}

/* Current / selected tab: inverted, raised, and enlarged */
body:not(.home) .site-header .current-menu-item > a,
body:not(.home) .site-header .current_page_item > a,
body:not(.home) .site-header .current-menu-ancestor > a,
body:not(.home) .site-header .current_page_ancestor > a {
	z-index: 2 !important;
	color: var(--rr-pink) !important;
	background: var(--rr-black) !important;
	box-shadow: var(--rr-menu-shadow) !important;
	transform: scale(1.07) translateY(-2px) !important;
}

/* Homepage current tab stays normal */
.home .site-header .current-menu-item > a,
.home .site-header .current_page_item > a,
.home .site-header .current-menu-ancestor > a,
.home .site-header .current_page_ancestor > a {
	z-index: 1 !important;
	color: var(--rr-black) !important;
	background: var(--rr-pink) !important;
	box-shadow: none !important;
	transform: scale(1) translateY(0) !important;
}

/* Invert and grow on hover */
.site-header nav a:hover,
.site-header nav a:focus,
.site-header .menu a:hover,
.site-header .menu a:focus,
.site-header div[class*="menu"] a:hover,
.site-header div[class*="menu"] a:focus,
.site-header .menu-item a:hover,
.site-header .menu-item a:focus {
	z-index: 3 !important;
	color: var(--rr-pink) !important;
	background: var(--rr-black) !important;
	border: none !important;
	text-decoration: none !important;
	opacity: 1 !important;
	transform: scale(1.07) translateY(-2px) !important;
	box-shadow: var(--rr-menu-shadow) !important;
}

/* =========================================================
   4. Homepage post title refinement
   ========================================================= */

.home .entry-title {
	letter-spacing: .03em;
}

.home .entry-title a {
	text-decoration: none;
}

.home .entry-title a:hover,
.home .entry-title a:focus {
	color: var(--rr-pink);
	text-decoration: none;
}

/* =========================================================
   5. Page/post content links
   ========================================================= */

/* Keep page/post content links consistent on hover */
.entry-content a:hover,
.entry-content a:focus,
.page-content a:hover,
.page-content a:focus {
	color: var(--rr-gray-hover) !important;
	text-decoration: none;
}

/* =========================================================
   6. Floating back-to-top button
   ========================================================= */

/* The back-to-top item is pulled out of the menu and fixed on desktop */
.site-header nav li:has(> a[href="#page"]),
.site-header .menu li:has(> a[href="#page"]),
.site-header div[class*="menu"] li:has(> a[href="#page"]),
.site-header li.menu-item:has(> a[href="#page"]) {
	position: fixed !important;
	right: max(1rem, calc((100vw - var(--rr-content-width)) / 4 - 2rem)) !important;
	bottom: 1.35rem !important;
	z-index: 9999 !important;
	display: block !important;
	width: 2.75rem !important;
	height: 2.75rem !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

/* The actual floating button */
.site-header nav a[href="#page"],
.site-header nav a[href="#page"]:link,
.site-header nav a[href="#page"]:visited,
.site-header .menu a[href="#page"],
.site-header .menu a[href="#page"]:link,
.site-header .menu a[href="#page"]:visited,
.site-header div[class*="menu"] a[href="#page"],
.site-header div[class*="menu"] a[href="#page"]:link,
.site-header div[class*="menu"] a[href="#page"]:visited {
	position: static !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 2.75rem !important;
	height: 2.75rem !important;
	margin: 0 !important;
	padding: 0 !important;
	font-size: 1.85rem !important;
	line-height: 1 !important;
	font-weight: 900 !important;
	text-decoration: none !important;
	color: var(--rr-pink) !important;
	background: var(--rr-black) !important;
	border: none !important;
	border-radius: 58% 42% 48% 52% / 48% 54% 46% 52% !important;
	box-shadow: none !important;
	opacity: .9 !important;
	transform: scale(1) translateY(0) !important;
	transform-origin: center center !important;
	transition: opacity .18s ease, transform .18s ease, background .18s ease, color .18s ease, border-radius .18s ease !important;
}

/* Floating button hover state */
.site-header nav a[href="#page"]:hover,
.site-header nav a[href="#page"]:focus,
.site-header .menu a[href="#page"]:hover,
.site-header .menu a[href="#page"]:focus,
.site-header div[class*="menu"] a[href="#page"]:hover,
.site-header div[class*="menu"] a[href="#page"]:focus {
	color: var(--rr-black) !important;
	background: var(--rr-pink) !important;
	opacity: 1 !important;
	transform: scale(1.1) translateY(-3px) !important;
	border-radius: 46% 54% 56% 44% / 55% 45% 55% 45% !important;
	box-shadow: none !important;
	text-decoration: none !important;
}

/* =========================================================
   7. Mobile refinements
   ========================================================= */

@media screen and (max-width: 600px) {
	.home .site-branding::after {
		text-align: left;
	}

	body:has(.main-navigation a[aria-current="page"][href*="/book-log/"]) .site-branding::after,
	body:has(.main-navigation .current-menu-item a[href*="/book-log/"]) .site-branding::after,
	body:has(.main-navigation a[aria-current="page"][href*="/booklist-reviews/"]) .site-branding::after,
	body:has(.main-navigation .current-menu-item a[href*="/booklist-reviews/"]) .site-branding::after,
	body:has(.main-navigation .current_page_item a[href*="/booklist-reviews/"]) .site-branding::after,
	body:has(.main-navigation a[aria-current="page"][href*="/about/"]) .site-branding::after,
	body:has(.main-navigation .current-menu-item a[href*="/about/"]) .site-branding::after,
	body:has(.main-navigation a[aria-current="page"][href*="/ricardo-writing/"]) .site-branding::after,
	body:has(.main-navigation .current-menu-item a[href*="/ricardo-writing/"]) .site-branding::after {
		max-width: 90%;
		margin-top: 1.5em !important;
		padding: 1em 1em 0;
		font-size: 13px;
	}
}

/* Hide the floating blob button on mobile */
@media screen and (max-width: 800px) {
	.site-header nav li:has(> a[href="#page"]),
	.site-header .menu li:has(> a[href="#page"]),
	.site-header div[class*="menu"] li:has(> a[href="#page"]),
	.site-header li.menu-item:has(> a[href="#page"]) {
		display: none !important;
	}
}

/* =========================================================
   8. Reduced motion
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.home .site-branding::after,
	body:has(.main-navigation a[aria-current="page"][href*="/book-log/"]) .site-branding::after,
	body:has(.main-navigation .current-menu-item a[href*="/book-log/"]) .site-branding::after,
	body:has(.main-navigation a[aria-current="page"][href*="/booklist-reviews/"]) .site-branding::after,
	body:has(.main-navigation .current-menu-item a[href*="/booklist-reviews/"]) .site-branding::after,
	body:has(.main-navigation .current_page_item a[href*="/booklist-reviews/"]) .site-branding::after,
	body:has(.main-navigation a[aria-current="page"][href*="/about/"]) .site-branding::after,
	body:has(.main-navigation .current-menu-item a[href*="/about/"]) .site-branding::after,
	body:has(.main-navigation a[aria-current="page"][href*="/ricardo-writing/"]) .site-branding::after,
	body:has(.main-navigation .current-menu-item a[href*="/ricardo-writing/"]) .site-branding::after {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}

	.site-header nav a,
	.site-header .menu a,
	.site-header div[class*="menu"] a,
	.site-header .menu-item a,
	body:not(.home) .site-header .current-menu-item > a,
	body:not(.home) .site-header .current_page_item > a,
	body:not(.home) .site-header .current-menu-ancestor > a,
	body:not(.home) .site-header .current_page_ancestor > a {
		transition: none !important;
		transform: none !important;
	}

	.site-header nav a:hover,
	.site-header nav a:focus,
	.site-header .menu a:hover,
	.site-header .menu a:focus,
	.site-header div[class*="menu"] a:hover,
	.site-header div[class*="menu"] a:focus,
	.site-header .menu-item a:hover,
	.site-header .menu-item a:focus {
		transform: none !important;
	}
}