/*
Theme Name: DIHWYP Blog
Theme URI: https://doesithurtwhenyoupee.com/blogs/
Author: Does It Hurt When You Pee?!?
Description: Blog theme for Does It Hurt When You Pee?!? (DIHWYP) with the doesithurtwhenyoupee.com header and footer. One clean blog page (with category and search pages) and one clean post page. Brand colors and header style can be changed in Appearance > Customize > DIHWYP Brand.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dihwyp-blog
*/

/* Brand colors. Change the first three in Appearance > Customize > DIHWYP Brand (these are only fallbacks).
   The portal colors match the Heart, Brain and Lungs portals and are used for category tags. */
:root {
	--dh-navy: #0B032A;
	--dh-blue: #2F6BFF;
	--dh-pink: #FF4F7B;
	--dh-heart: #E8365D;
	--dh-brain: #7C5CFF;
	--dh-lungs: #14A374;
	--dh-gold: #FFC83D;
	--dh-ice: #F2F6FF;
	--dh-text: #18233D;
	--dh-muted: #5A6681;
	--dh-line: #DDE4F2;
	--dh-white: #FFFFFF;
	--dh-head: "Fredoka", "Trebuchet MS", Arial, sans-serif;
	--dh-body: "Nunito", "Segoe UI", Arial, sans-serif;
	--dh-radius: 22px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	background: var(--dh-white);
	color: var(--dh-text);
	font-family: var(--dh-body);
	font-size: 16px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
a { color: var(--dh-blue); }
:focus-visible { outline: 3px solid var(--dh-gold); outline-offset: 3px; }

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}
.screen-reader-text:focus,
.skip-link:focus {
	background: #fff;
	color: #000;
	clip: auto;
	clip-path: none;
	height: auto;
	width: auto;
	left: 8px;
	top: 8px;
	padding: 12px 18px;
	z-index: 100000;
}

/* ---------- Buttons ---------- */
.db-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 28px;
	border: 0;
	border-radius: 999px;
	background: var(--dh-blue);
	box-shadow: 0 4px 0 color-mix(in srgb, var(--dh-blue) 60%, #000);
	color: #fff;
	font-family: var(--dh-head);
	font-weight: 600;
	font-size: 1rem;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.db-btn:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 5px 0 color-mix(in srgb, var(--dh-blue) 60%, #000); }
.db-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 color-mix(in srgb, var(--dh-blue) 60%, #000); }

/* ---------- Header ---------- */
.db-header {
	position: relative;
	z-index: 50;
	background: var(--dh-white);
	border-bottom: 1px solid var(--dh-line);
}
.db-header__inner {
	display: flex;
	align-items: center;
	gap: 24px;
	max-width: 1240px;
	min-height: 86px;
	margin: 0 auto;
	padding: 12px 24px;
}
.db-logo { display: inline-flex; flex-shrink: 0; }
/* The DIHWYP logo is a tall, stacked mark, so it is shown large, as on the main site. */
.db-logo__img { display: block; width: auto; height: auto; max-height: 150px; max-width: 190px; }
.db-nav { flex: 1; }
.db-nav__list {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 6px 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.db-nav__list a {
	display: inline-block;
	padding: 6px 12px;
	border: 1.5px solid transparent;
	white-space: nowrap;
	border-radius: 999px;
	color: var(--dh-navy);
	font-family: var(--dh-head);
	font-weight: 500;
	font-size: 1.02rem;
	text-decoration: none;
	transition: border-color 0.2s ease;
}
.db-nav__list a:hover,
.db-nav__list a.is-current { border-color: color-mix(in srgb, var(--dh-navy) 45%, transparent); }
.db-btn--nav-mobile { display: none; }
.db-burger { display: none; }

/* Dark header (default; Customize > DIHWYP Brand > Header style). */
.dh-bar-dark .db-header { background: var(--dh-navy); border-bottom-color: transparent; }
.dh-bar-dark .db-nav__list a { color: #fff; }
.dh-bar-dark .db-nav__list a:hover,
.dh-bar-dark .db-nav__list a.is-current { border-color: rgba(255, 255, 255, 0.55); }
/* Outlined gold button with a soft glow, as on the main-site header. */
.dh-bar-dark .db-header__cta,
.dh-bar-dark .db-btn--nav-mobile {
	padding: 11px 24px;
	border: 1.5px solid var(--dh-gold);
	background: transparent;
	box-shadow: 0 0 14px color-mix(in srgb, var(--dh-gold) 30%, transparent);
	font-weight: 500;
}
.dh-bar-dark .db-header__cta:hover,
.dh-bar-dark .db-btn--nav-mobile:hover {
	background: color-mix(in srgb, var(--dh-gold) 14%, transparent);
	box-shadow: 0 0 20px color-mix(in srgb, var(--dh-gold) 45%, transparent);
	transform: none;
}
.dh-bar-dark .db-burger__bar { background: #fff; }

/* ---------- Blog area ---------- */
.db-main { min-height: 60vh; padding: 0 0 96px; overflow-x: clip; }
.db-main a { text-decoration: none; }
.db-wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.db-wrap--narrow { max-width: 780px; }
.single .db-main,
.page .db-main,
.error404 .db-main { padding-top: 64px; }

/* The intro band echoes the blue, pink and green "smoke" of the main-site hero. */
.db-intro {
	position: relative;
	margin: 0 calc(50% - 50vw) 56px;
	padding: 72px calc(50vw - 50% + 24px) 80px;
	overflow: hidden;
	background:
		radial-gradient(42% 70% at 8% 20%, color-mix(in srgb, var(--dh-blue) 55%, transparent), transparent 70%),
		radial-gradient(36% 60% at 92% 10%, color-mix(in srgb, var(--dh-pink) 45%, transparent), transparent 70%),
		radial-gradient(40% 60% at 75% 110%, color-mix(in srgb, var(--dh-lungs) 40%, transparent), transparent 70%),
		var(--dh-navy);
	color: #fff;
}
.db-intro > * { position: relative; max-width: 720px; }
.db-intro__kicker {
	display: inline-block;
	margin: 0 0 16px;
	padding: 6px 16px;
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 999px;
	font-family: var(--dh-head);
	font-weight: 500;
	font-size: 0.95rem;
}
.db-intro__title {
	margin: 0 0 14px;
	color: #fff;
	font-family: var(--dh-head);
	font-weight: 700;
	font-size: clamp(2.2rem, 5vw, 3.5rem);
	line-height: 1.08;
}
.db-intro__lead { margin: 0; color: rgba(255, 255, 255, 0.82); font-size: 1.15rem; }

.db-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px; }

.db-card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	overflow: hidden;
	background: var(--dh-white);
	border: 2px solid var(--dh-line);
	border-radius: var(--dh-radius);
	transition: border-color 0.2s ease;
}
.db-card:hover { border-color: color-mix(in srgb, var(--dh-blue) 45%, var(--dh-line)); }
.db-card__img { display: block; overflow: hidden; background: var(--dh-ice); }
.db-card__img img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	transition: transform 0.5s ease;
}
.db-card:hover .db-card__img img { transform: scale(1.04); }
.db-card__img--contain { background: #fff; }
.db-card__img--contain img { object-fit: contain; padding: 18px; }
.db-card__body { display: flex; flex: 1; flex-direction: column; padding: 26px 28px 30px; }
.db-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 14px;
	margin: 0 0 12px;
	color: var(--dh-muted);
	font-size: 0.9rem;
}
.db-tag {
	display: inline-block;
	padding: 4px 13px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--dh-blue) 12%, #fff);
	color: color-mix(in srgb, var(--dh-blue) 85%, #000);
	font-family: var(--dh-head);
	font-weight: 600;
	font-size: 0.85rem;
}
.db-tag--heart { background: color-mix(in srgb, var(--dh-heart) 12%, #fff); color: color-mix(in srgb, var(--dh-heart) 85%, #000); }
.db-tag--brain { background: color-mix(in srgb, var(--dh-brain) 12%, #fff); color: color-mix(in srgb, var(--dh-brain) 85%, #000); }
.db-tag--lungs { background: color-mix(in srgb, var(--dh-lungs) 12%, #fff); color: color-mix(in srgb, var(--dh-lungs) 80%, #000); }
.db-main a.db-tag:hover { filter: brightness(0.95); }
.db-card__body h2 {
	margin: 0 0 10px;
	font-family: var(--dh-head);
	font-weight: 600;
	font-size: 1.45rem;
	line-height: 1.28;
}
.db-card__body h2 a { color: var(--dh-navy); }
.db-card__body h2 a:hover { color: var(--dh-blue); }
.db-excerpt { flex: 1; margin: 0 0 24px; color: var(--dh-muted); line-height: 1.7; }
.db-excerpt p { margin: 0; }
.db-readmore { align-self: flex-start; padding: 10px 24px; }
.db-empty { padding: 60px 0; text-align: center; color: var(--dh-muted); }

.db-pagination { margin-top: 56px; }
.db-pagination .nav-links,
.db-pagination { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }
.db-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 12px;
	border: 2px solid var(--dh-line);
	border-radius: 999px;
	color: var(--dh-navy);
	font-family: var(--dh-head);
	font-weight: 600;
}
.db-pagination .page-numbers.current { background: var(--dh-navy); border-color: var(--dh-navy); color: #fff; }
.db-pagination a.page-numbers:hover { border-color: var(--dh-blue); color: var(--dh-blue); }

/* ---------- Post page ---------- */
.db-back { display: inline-block; margin-bottom: 26px; color: var(--dh-muted); font-size: 0.95rem; font-weight: 700; }
.db-main .db-back:hover { color: var(--dh-blue); }
.db-wrap--narrow > .db-tag { margin-bottom: 14px; }
.db-title {
	margin: 0 0 14px;
	color: var(--dh-navy);
	font-family: var(--dh-head);
	font-weight: 700;
	font-size: clamp(2rem, 4.2vw, 2.9rem);
	line-height: 1.15;
}
.db-meta { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0 0 32px; color: var(--dh-muted); font-size: 0.95rem; }
.db-cover { display: block; width: 100%; height: auto; margin-bottom: 42px; border-radius: var(--dh-radius); }
.db-content { font-size: 1.08rem; line-height: 1.85; }
.db-content > *:first-child { margin-top: 0; }
.db-content p, .db-content ul, .db-content ol { margin: 0 0 1.4em; }
.db-content ul, .db-content ol { padding-left: 1.4em; }
.db-content li { margin-bottom: 0.5em; }
.db-content li::marker { color: var(--dh-pink); font-weight: 700; }
.db-content h2, .db-content h3, .db-content h4 {
	margin: 1.8em 0 0.6em;
	color: var(--dh-navy);
	font-family: var(--dh-head);
	font-weight: 600;
	line-height: 1.3;
}
.db-content h2 { font-size: 1.6rem; }
.db-content h3 { font-size: 1.3rem; }
.db-content strong { color: var(--dh-navy); }
.db-main .db-content a { color: var(--dh-blue); text-decoration: underline; text-underline-offset: 3px; }
.db-content img, .db-content video, .db-content iframe { max-width: 100%; height: auto; border-radius: 14px; }
/* Quotes look like a case card from the app. */
.db-content blockquote {
	margin: 1.6em 0;
	padding: 22px 26px;
	border: 2px solid var(--dh-line);
	border-left: 6px solid var(--dh-blue);
	border-radius: 16px;
	background: var(--dh-ice);
	color: var(--dh-navy);
	font-family: var(--dh-head);
	font-size: 1.15rem;
	line-height: 1.55;
}
.db-content blockquote p:last-child { margin-bottom: 0; }
.db-content .db-note { padding-top: 18px; border-top: 1px solid var(--dh-line); color: var(--dh-muted); font-size: 0.92rem; }
.alignleft { float: left; margin: 0 1.5em 1em 0; }
.alignright { float: right; margin: 0 0 1em 1.5em; }
.aligncenter { display: block; margin: 0 auto 1.4em; }
.wp-caption { max-width: 100%; }
.wp-caption-text, .db-content figcaption { margin-top: 8px; color: var(--dh-muted); font-size: 0.85rem; text-align: center; }

.db-cta {
	margin: 56px 0 0;
	padding: 38px 36px 42px;
	border-radius: var(--dh-radius);
	background:
		radial-gradient(60% 90% at 100% 0%, color-mix(in srgb, var(--dh-pink) 40%, transparent), transparent 70%),
		radial-gradient(50% 80% at 0% 100%, color-mix(in srgb, var(--dh-blue) 50%, transparent), transparent 70%),
		var(--dh-navy);
	color: #fff;
}
.db-cta__kicker { margin: 0 0 6px !important; color: var(--dh-gold) !important; font-family: var(--dh-head); font-weight: 600; }
.db-cta h2 { margin: 0 0 8px; color: #fff; font-family: var(--dh-head); font-weight: 700; font-size: 1.75rem; line-height: 1.2; }
.db-cta p { margin: 0 0 24px; color: rgba(255, 255, 255, 0.85); }

.db-postnav { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 40px; }
.db-postnav a {
	display: block;
	padding: 20px 22px;
	border: 2px solid var(--dh-line);
	border-radius: 16px;
	color: var(--dh-navy);
	font-family: var(--dh-head);
	font-weight: 600;
	line-height: 1.4;
}
.db-postnav a:hover { border-color: var(--dh-blue); }
.db-postnav span { display: block; margin-bottom: 4px; color: var(--dh-muted); font-family: var(--dh-body); font-weight: 600; font-size: 0.85rem; }
.db-postnav__next { grid-column: 2; text-align: right; }

.db-404 { text-align: center; padding: 40px 24px; }

/* ---------- Scrolling name strip (as on the main site) ---------- */
.db-marquee { overflow: hidden; background: var(--dh-blue); color: #fff; }
.db-marquee__track { display: flex; width: max-content; animation: db-marquee 40s linear infinite; }
.db-marquee span { padding: 14px 0; font-family: var(--dh-head); font-weight: 600; font-size: 1.25rem; white-space: pre; }
@keyframes db-marquee { to { transform: translateX(-50%); } }

/* ---------- Footer ---------- */
.db-footer { background: var(--dh-navy); color: rgba(255, 255, 255, 0.8); }
.db-footer__inner {
	display: grid;
	grid-template-columns: 1fr 1.4fr;
	gap: 56px;
	max-width: 1240px;
	margin: 0 auto;
	padding: 72px 24px 40px;
}
.db-footer .db-logo__img { max-height: 170px; max-width: 220px; }
.db-footer p { margin: 0; line-height: 1.7; }
.db-footer__ready { margin-top: 20px !important; color: #fff; font-family: var(--dh-head); font-weight: 600; font-size: 1.2rem; }
.db-footer h2 { margin: 0 0 12px; color: #fff; font-family: var(--dh-head); font-weight: 600; font-size: 1.45rem; }
.db-social { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 0; padding: 0; list-style: none; }
.db-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
}
.db-social a:hover { background: var(--dh-blue); }
.db-contact { margin: 20px 0 0; padding: 0; list-style: none; }
.db-contact li { margin-bottom: 12px; }
.db-contact i { width: 22px; color: var(--dh-pink); }
.db-footer a { color: rgba(255, 255, 255, 0.88); text-decoration: none; }
.db-footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.db-footer__menu {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 28px;
	max-width: 1240px;
	margin: 0 auto;
	padding: 24px;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	font-family: var(--dh-head);
	font-weight: 500;
}
.db-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 10px 24px;
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 24px 24px;
	font-size: 0.9rem;
}
.db-footer__legal { display: flex; gap: 22px; }
.db-footer__word { max-width: 1240px; margin: 0 auto; padding: 0 24px; line-height: 0; }
.db-footer__word img { display: block; width: 100%; height: auto; }

/* Light header: the footer turns light too, so a dark logo stays visible. */
.dh-bar-light .db-footer { background: var(--dh-ice); color: var(--dh-muted); }
.dh-bar-light .db-footer h2,
.dh-bar-light .db-footer__ready { color: var(--dh-navy); }
.dh-bar-light .db-footer a { color: var(--dh-navy); }
.dh-bar-light .db-footer a:hover { color: var(--dh-blue); }
.dh-bar-light .db-social a { background: var(--dh-white); }
.dh-bar-light .db-footer__menu { border-top-color: var(--dh-line); }

.db-top {
	position: fixed;
	right: 22px;
	bottom: 22px;
	z-index: 40;
	width: 46px;
	height: 46px;
	border: 0;
	border-radius: 50%;
	background: var(--dh-pink);
	color: #fff;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease, visibility 0.2s ease;
}
.db-top.is-visible { opacity: 1; visibility: visible; }

/* ---------- Tablet & mobile ---------- */
@media (max-width: 1180px) {
	.db-header__cta { display: none; }
	.db-burger {
		display: inline-flex;
		flex-direction: column;
		justify-content: center;
		gap: 5px;
		width: 46px;
		height: 46px;
		margin-left: auto;
		padding: 0 11px;
		border: 0;
		background: transparent;
		cursor: pointer;
	}
	.db-burger__bar { display: block; height: 2px; border-radius: 2px; background: var(--dh-navy); transition: transform 0.2s ease, opacity 0.2s ease; }
	.db-menu-open .db-burger__bar:nth-child(2) { transform: translateY(7px) rotate(45deg); }
	.db-menu-open .db-burger__bar:nth-child(3) { opacity: 0; }
	.db-menu-open .db-burger__bar:nth-child(4) { transform: translateY(-7px) rotate(-45deg); }
	.db-nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		display: none;
		padding: 12px 24px 28px;
		border-bottom: 1px solid var(--dh-line);
		background: var(--dh-white);
	}
	.dh-bar-dark .db-nav { background: var(--dh-navy); border-bottom-color: rgba(255, 255, 255, 0.08); }
	.db-menu-open .db-nav { display: block; }
	.db-nav__list { flex-direction: column; gap: 0; }
	.db-nav__list a { display: block; padding: 11px 16px; font-size: 1.1rem; }
	.db-nav__list a.is-current { color: var(--dh-pink); }
	.db-btn--nav-mobile { display: inline-flex; margin-top: 14px; }
}
@media (max-width: 767px) {
	.db-header__inner { min-height: 72px; padding-top: 10px; padding-bottom: 10px; }
	.db-logo__img { max-height: 96px; max-width: 130px; }
	.db-footer .db-logo__img { max-height: 140px; }
	.db-main { padding-bottom: 72px; }
	.single .db-main, .page .db-main, .error404 .db-main { padding-top: 44px; }
	.db-wrap { padding: 0 18px; }
	.db-intro { margin-bottom: 36px; padding: 52px calc(50vw - 50% + 18px) 56px; }
	.db-grid { grid-template-columns: 1fr; gap: 26px; }
	.db-card__body { padding: 22px; }
	.db-cta { padding: 30px 24px; }
	.db-postnav { grid-template-columns: 1fr; }
	.db-postnav__next { grid-column: auto; text-align: left; }
	.db-footer__inner { grid-template-columns: 1fr; gap: 36px; padding-top: 56px; }
	.db-footer__bottom { flex-direction: column; text-align: center; align-items: center; }
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.db-marquee__track { animation: none; }
	.db-card, .db-card__img img, .db-btn, .db-burger__bar { transition: none; }
	.db-card:hover .db-card__img img { transform: none; }
}