/*!
Theme Name: Slap Happy News
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: slap-happy-news
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Slap Happy News is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*
 * This file intentionally carries almost none of the original Underscores
 * boilerplate CSS. The design is fully driven by vendor/tailwind/output.css
 * (enqueued in functions.php), and Tailwind v4's compiled output wraps every
 * utility class in `@layer theme, base, components, utilities;`. Per the CSS
 * spec, an UNLAYERED author rule always wins over a LAYERED one regardless of
 * selector specificity — so the old unlayered rules here (generic `a`,
 * `.main-navigation a`, `.comment-content a`, etc., e.g. the old
 * `a { color: #4169e1; }`) were silently overriding Tailwind's colors/type
 * site-wide wherever a selector overlapped, which is what made the nav menu
 * and footer render with the wrong (default WordPress link) colors instead
 * of the design's colors.
 *
 * Only the accessibility rules the theme actually depends on are kept below
 * (the skip-link in header.php uses .screen-reader-text), and they're placed
 * in their own low-priority @layer so they can never again shadow a Tailwind
 * utility class, no matter what gets added here later.
 */

@layer shn-base {
	/* Text meant only for screen readers. */
	.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 !important;
		width: 1px;
		word-wrap: normal !important;
	}

	.screen-reader-text:focus {
		background-color: #f1f1f1;
		border-radius: 3px;
		box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
		clip: auto !important;
		clip-path: none;
		color: #21759b;
		display: block;
		font-size: 0.875rem;
		font-weight: 700;
		height: auto;
		left: 5px;
		line-height: normal;
		padding: 15px 23px 14px;
		text-decoration: none;
		top: 5px;
		width: auto;
		z-index: 100000;
	}

	/* Do not show the outline on the skip link target. */
	#primary[tabindex="-1"]:focus {
		outline: 0;
	}

	/* Page-curl page transition (js/page-curl/). */
	html.shn-curl-busy,
	html.shn-curl-busy * {
		cursor: progress !important;
	}

	#shn-curl-canvas {
		position: fixed;
		inset: 0;
		width: 100%;
		height: 100%;
		z-index: 49; /* Below the fixed header (z-50), above the page content. */
		pointer-events: none;
	}

	#shn-curl-shadow {
		position: fixed;
		inset: 0;
		z-index: 48;
		pointer-events: none;
		opacity: 0;
	}

	/* Arriving via a page turn: the menu must stay put, not replay its AOS slide-down. */
	html.shn-curl-arriving #masthead[data-aos] {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}

	@media (prefers-reduced-motion: reduce) {
		#shn-curl-canvas,
		#shn-curl-shadow {
			display: none !important;
		}
	}

	/* Theme Options: header top-bar social icons are conditionally shown (see header.php),
	   so the separator is an adjacent-sibling border instead of a fixed border-l on every
	   icon but the first — whichever platforms are hidden, only visible icons after the
	   first one get a divider. */
	.shn-social-topbar > a + a {
		border-left: 1px solid rgb(255 255 255 / 0.1);
	}

	/* Login/register form (inc/login-register.php): keep autofilled fields white
	   instead of the browser's own highlight -- Chrome paints its blue with an
	   !important background (so it's covered with an inset shadow), Firefox tints
	   its yellow with a filter (so that's switched off). Separate rules: a browser
	   that doesn't know one of these selectors would drop a combined rule. */
	.shn-auth input:-webkit-autofill,
	.shn-auth input:-webkit-autofill:hover,
	.shn-auth input:-webkit-autofill:focus {
		-webkit-box-shadow: 0 0 0 1000px #fff inset;
		box-shadow: 0 0 0 1000px #fff inset;
		-webkit-text-fill-color: var(--color-text);
	}

	.shn-auth input:autofill {
		filter: none;
	}
}

article.group h3 {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	min-height: 2.5em; /* fallback for older browsers */
	min-height: 2lh;
}
.group.flex.items-center.gap-4 > p {
	max-width: 223px;
}

/* xl screens: narrow the title so it wraps like the design's <br> */
@media (min-width: 1280px) {
	/* Video cards (18px Inter) */
	article.group h3 {
		max-width: 12em;
	}

	/* Podcast episode cards (21px Fredoka) */
	article.group h3.font-fredoka {
		max-width: 11em;
	}
}


@media (max-width: 639.98px) {
	.flex.w-full.items-center.justify-between.gap-\[30px\] {
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
	}
 
	.flex.w-full.items-center.justify-between.gap-\[30px\] p br {
		display: none;
	}
}
@media (max-width: 1023.98px) {
	.grid-cols-\[0\.7fr_1\.8fr_0\.5fr\] {
		grid-template-columns: 1fr;
	}

	/* space between the button and the photo */
	.grid-cols-\[0\.7fr_1\.8fr_0\.5fr\] > :nth-child(2) {
		margin-top: 30px;
	}

	/* keep the button the same width as the paragraph above it */
	.grid-cols-\[0\.7fr_1\.8fr_0\.5fr\] > :first-child > a {
		max-width: 360px;
	}
}

/*
 * Contact page form (Contact Form 7, template-contact.php): the messages CF7's script adds
 * after a submit -- the "Please fill out this field." line under a field and the response
 * box under the button -- in the form's own type and red instead of CF7's defaults (16px
 * system font, 2px blue/yellow/green box with 2em margins). Unlayered and scoped to the
 * #contact-form card on purpose: CF7's stylesheet is unlayered too, so a rule in
 * @layer shn-base above would lose to it; none of these elements carry Tailwind classes.
 */
#contact-form .wpcf7-not-valid-tip {
	margin-top: 5px;
	font-family: var(--font-manrope);
	font-size: 12px;
	line-height: 1.4;
	color: var(--color-button-red);
}

#contact-form .wpcf7-form-control.wpcf7-not-valid {
	border-color: var(--color-button-red);
}

#contact-form .wpcf7 form .wpcf7-response-output {
	margin: 14px 0 0;
	padding: 11px 13px;
	border-width: 1px;
	font-family: var(--font-manrope);
	font-size: 13px;
	line-height: 1.5;
	color: var(--color-text);
}

/*
 * Single news post (single-news.php, Step 38): the_content()'s plain editor
 * markup -- paragraphs, headings, lists, links, images, blockquotes -- carries
 * no Tailwind classes of its own to hook into, same reasoning as the Contact
 * Form 7 block above. Unlayered on purpose (an unlayered rule always beats a
 * layered Tailwind utility, so this can't silently lose to @layer shn-base),
 * scoped to .shn-article-content so it only ever touches this one block.
 */
.shn-article-content {
	font-family: var(--font-manrope);
	font-size: 15px;
	line-height: 1.7;
	color: var(--color-text);
}

.shn-article-content > * + * {
	margin-top: 16px;
}

.shn-article-content h2,
.shn-article-content h3,
.shn-article-content h4,
.shn-article-content h5,
.shn-article-content h6 {
	font-family: var(--font-fredoka);
	font-weight: var(--font-weight-semibold);
	line-height: 1.3;
	color: var(--color-text);
}

.shn-article-content h2 {
	font-size: 24px;
}

.shn-article-content h3 {
	font-size: 20px;
}

.shn-article-content h4,
.shn-article-content h5,
.shn-article-content h6 {
	font-size: 17px;
}

.shn-article-content a {
	color: var(--color-button-red);
	text-decoration: underline;
}

.shn-article-content a:hover {
	color: var(--color-text);
}

.shn-article-content ul,
.shn-article-content ol {
	padding-left: 22px;
}

.shn-article-content ul {
	list-style: disc;
}

.shn-article-content ol {
	list-style: decimal;
}

.shn-article-content li + li {
	margin-top: 8px;
}

.shn-article-content img {
	max-width: 100%;
	height: auto;
	display: block;
}

.shn-article-content blockquote {
	margin: 0;
	padding-left: 18px;
	border-left: 3px solid var(--color-button-red);
	font-style: italic;
	color: var(--color-text-grey);
}

.shn-article-content strong,
.shn-article-content b {
	font-weight: var(--font-weight-semibold);
}

#videoSubmissionForm .shn-type-choice:has(input:checked) {
	border-color: var(--color-button-red);
	background-color: #fff9f9;
}

#video-modal-image {
	max-height: 70vh;
	max-width: 100%;
	object-fit: contain;
}

#video-modal-description {
	max-height: 20vh;
	overflow-y: auto;
	white-space: pre-line;
}

/* News and video/image detail pages. Kept in the theme stylesheet so newly
 * introduced classes do not depend on the precompiled Tailwind utility list. */
.shn-single-page {
	margin-top: 205px;
	padding: 48px 24px 72px;
	background: #f5f6f7;
}

.shn-single-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 32px;
	max-width: 1250px;
	margin: 0 auto;
	align-items: start;
}

.shn-single-article,
.shn-single-sidebar-card {
	min-width: 0;
	background: #fff;
	box-shadow: 0 8px 24px rgb(0 0 0 / 6%);
}

.shn-single-media {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 280px;
	background: #101827;
}

.shn-single-media img {
	display: block;
	width: 100%;
	max-height: 560px;
	object-fit: contain;
}

.shn-single-media video,
.shn-single-media iframe {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
}

.shn-single-media-image {
	background: #e5e6e8;
}

.shn-single-media > a {
	display: block;
	width: 100%;
	text-align: center;
}

.shn-single-external,
.shn-single-empty {
	padding: 90px 20px;
	color: #fff;
}

.shn-single-share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 9px;
	padding: 16px 28px;
	border-bottom: 1px solid #e6e7e8;
	font-family: var(--font-manrope);
	font-size: 13px;
}

.shn-single-share-label {
	margin-right: 5px;
	font-weight: 700;
	color: var(--color-secondary);
}

.shn-single-share a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 10px;
	border: 1px solid #dce0e5;
	color: var(--color-secondary);
	text-decoration: none;
}

.shn-single-share a:hover,
.shn-single-share a:focus-visible {
	border-color: var(--color-button-red);
	background: var(--color-button-red);
	color: #fff;
}

.shn-single-share .addtoany_list {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 9px;
}

.shn-single-share .addtoany_list a {
	padding: 7px;
	line-height: 0;
}

.shn-single-share .addtoany_list .a2a_dd {
	display: none;
}

.shn-single-heading,
.shn-single-description {
	padding-right: 28px;
	padding-left: 28px;
}

.shn-single-heading {
	padding-top: 26px;
}

.shn-single-heading h1 {
	margin: 12px 0 0;
	font-family: var(--font-fredoka);
	font-size: clamp(28px, 3vw, 38px);
	font-weight: 600;
	line-height: 1.2;
	color: var(--color-secondary);
}

.shn-single-badge {
	display: inline-block;
	padding: 5px 9px;
	background: var(--color-button-red);
	font-family: var(--font-manrope);
	font-size: 12px;
	color: #fff;
}

.shn-single-meta {
	margin-top: 10px;
	font-family: var(--font-manrope);
	font-size: 12px;
	color: var(--color-text-grey);
}

.shn-single-description {
	padding-top: 24px;
	padding-bottom: 32px;
}

.shn-single-sidebar-card {
	padding: 22px;
}

.shn-single-sidebar h2 {
	margin: 0 0 14px;
	padding-bottom: 12px;
	border-bottom: 2px solid var(--color-button-red);
	font-family: var(--font-fredoka);
	font-size: 22px;
	color: var(--color-secondary);
}

.shn-single-sidebar ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.shn-single-sidebar li + li {
	border-top: 1px solid #e6e7e8;
}

.shn-single-sidebar li a {
	display: block;
	padding: 12px 0;
	font-family: var(--font-fredoka);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.35;
	color: var(--color-text);
	text-decoration: none;
}

.shn-single-sidebar li a:hover {
	color: var(--color-button-red);
}

.shn-single-view-all {
	display: inline-block;
	margin-top: 18px;
	padding: 10px 15px;
	background: var(--color-button-red);
	font-family: var(--font-manrope);
	font-size: 13px;
	font-weight: 600;
	color: #fff;
	text-decoration: none;
}

.shn-single-view-all:hover {
	background: var(--color-button-red-hover);
	color: #fff;
}

.shn-card-detail-link {
	color: inherit;
	text-decoration: none;
}

.shn-card-detail-link:hover,
.shn-card-detail-link:focus-visible {
	color: var(--color-button-red);
}

.shn-card-read-more {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 16px;
	padding: 9px 14px;
	background: var(--color-button-red);
	font-family: var(--font-manrope);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.2;
	color: #fff;
	text-decoration: none;
}

.shn-card-read-more:hover,
.shn-card-read-more:focus-visible {
	background: var(--color-button-red-hover);
	color: #fff;
}

.shn-card-meta-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.shn-card-meta-row .shn-card-read-more {
	flex-shrink: 0;
	margin-top: 0;
	margin-left: auto;
}

.shn-video-filter-stripe {
	display: flex;
	align-items: center;
	min-width: 0;
}

.shn-video-type-filter {
	width: 178px;
	margin-left: 50px;
	flex-shrink: 0;
}

@media (max-width: 900px) {
	.shn-video-type-filter { margin-left: 0; }
}

.shn-single-related {
	max-width: 1250px;
	margin: 48px auto 0;
}

.shn-single-related h2 {
	margin-bottom: 18px;
	font-family: var(--font-fredoka);
	font-size: 26px;
	font-weight: 600;
	color: var(--color-secondary);
}

.shn-single-related-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}

@media (max-width: 900px) {
	.shn-single-layout { grid-template-columns: 1fr; }
	.shn-single-sidebar { max-width: none; }
	.shn-single-related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
	.shn-single-page { padding: 28px 16px 50px; }
	.shn-single-share { padding: 14px 18px; }
	.shn-single-heading,
	.shn-single-description { padding-right: 18px; padding-left: 18px; }
	.shn-single-media { min-height: 200px; }
	.shn-single-related-grid { grid-template-columns: 1fr; }
}

/* Generic WordPress templates do not have a hero spacer like the custom pages. */
.shn-generic-page {
	margin-top: 205px;
	padding: 28px 20px 48px;
}

/* Let the header scroll away on phones and tablets. These pages previously
   reserved 205px for its fixed position; the header now supplies that space. */
@media (max-width: 1023px) {
	#masthead {
		position: relative;
		left: auto;
		top: auto;
	}

	#primary,
	#primary > :first-child,
	#primary > main > :first-child {
		margin-top: 0 !important;
	}

	.shn-header-logo {
		min-width: 0;
		max-width: 100%;
	}

	.shn-header-logo img {
		display: block;
		max-width: 100%;
		max-height: 82px;
		height: auto;
	}
}

@media (max-width: 767px) {
	/* The utility links and four social icons cannot share a 320px top bar. */
	.shn-social-topbar {
		display: none;
	}

	.shn-utility-links {
		overflow: visible;
	}

	.shn-header-logo img {
		width: min(365px, calc(100vw - 40px));
	}
}

/* Google's checkbox iframe is 304px wide. Scale it inside the narrow auth
   cards so the badge and checkbox remain visible without horizontal clipping. */
@media (min-width: 360px) and (max-width: 389px) {
	.shn-auth .g-recaptcha {
		transform: scale(.9);
		transform-origin: left top;
		margin-bottom: -8px;
	}
}

@media (max-width: 359px) {
	.shn-auth .g-recaptcha {
		transform: scale(.75);
		transform-origin: left top;
		margin-bottom: -19px;
	}
}

/* Enlarge each element from its original size, rather than from an enlarged parent. */
html.fs1 { --shn-ada-scale: 1.25; }
html.fs2 { --shn-ada-scale: 1.5; }
html.fs3 { --shn-ada-scale: 1.75; }
html.fs4 { --shn-ada-scale: 2; }
html:is(.fs1, .fs2, .fs3, .fs4) #page,
html:is(.fs1, .fs2, .fs3, .fs4) #page :is(p, label, a, font, em, div, h1, h2, h3, h4, h5, h6, span, li, button, input, select, textarea) {
    font-size: calc(var(--shn-ada-base-size, 16px) * var(--shn-ada-scale)) !important;
    line-height: 1.5 !important;
}

/* Enlarged header content needs natural height and room for wrapped navigation. */
html:is(.fs1, .fs2, .fs3, .fs4) #masthead {
    position: relative;
    top: auto;
    left: auto;
}
html:is(.fs1, .fs2, .fs3, .fs4) #primary,
html:is(.fs1, .fs2, .fs3, .fs4) #primary > :first-child,
html:is(.fs1, .fs2, .fs3, .fs4) #primary > main > :first-child {
    margin-top: 0 !important;
}
html:is(.fs1, .fs2, .fs3, .fs4) .shn-header-brand-row > :first-child {
    height: auto;
    min-height: 82px;
    flex-wrap: wrap;
    gap: 24px;
}
html:is(.fs1, .fs2, .fs3, .fs4) .shn-header-brand-row section {
    flex: 0 1 760px;
    max-width: 100%;
}
html:is(.fs1, .fs2, .fs3, .fs4) .shn-header-brand-row section > div {
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
}
html:is(.fs1, .fs2, .fs3, .fs4) .shn-header-brand-row section > div > div {
    flex: 1 1 250px;
}
html:is(.fs1, .fs2, .fs3, .fs4) .shn-header-brand-row section a {
    height: auto;
    min-height: 50px;
    padding-top: 12px;
    padding-bottom: 12px;
    white-space: normal;
    text-align: center;
}
html:is(.fs1, .fs2, .fs3, .fs4) #masthead nav[aria-label="Primary navigation"] ul {
    flex-wrap: wrap;
    gap: 12px 28px;
}
html:is(.fs1, .fs2, .fs3, .fs4) #masthead nav[aria-label="Primary navigation"] a {
    display: block;
}
html:is(.fs1, .fs2, .fs3, .fs4) #masthead > :last-child > div > div {
    height: auto;
    min-height: 50px;
    padding-top: 12px;
    padding-bottom: 12px;
}
html:is(.fs1, .fs2, .fs3, .fs4) .shn-utility-links {
    flex-wrap: wrap;
    white-space: normal;
}

/* Keep the selected header menu visible on desktop and mobile. */
#masthead .nav-link.is-active,
#masthead .mobile-nav-link.is-active {
    color: var(--color-button-red);
    background-color: transparent;
    text-decoration: none;
}