/*
Theme Name: Tailnews
Theme URI: https://themewagon.com/themes/tailnews/
Author: Ari Budin (HTML), converted to WP by wp_me_site
Author URI: https://aribudin.gumroad.com/
Description: Tailwind-based news / magazine WordPress theme, converted from the Tailnews HTML template by ThemeWagon.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: MIT
License URI: https://opensource.org/licenses/MIT
Text Domain: tailnews
Tags: news, magazine, blog, tailwind, two-columns, right-sidebar, custom-menu, featured-images, threaded-comments
*/

/* Most visual styles ship in assets/css/style.css (compiled Tailwind).
   The rules below override that pipeline for two consistency problems that
   can't be expressed with the prebuilt utility set:
     1. Featured-image cards have inconsistent heights because source images
        have different aspect ratios. We pin them all to 3:2 with object-cover.
     2. Footer widget typography/spacing was visually noisy. We tighten it. */

/* --- 1. Image cards: uniform 3:2 frame --------------------------------
   The two card templates wrap the <img> differently:
     • content-cover.php — .hover-img has ONLY <a><img></a> + an absolute
       overlay div. Safe to size .hover-img itself.
     • content-card.php  — .hover-img wraps <a><img></a> AND a sibling
       text <div>. Sizing .hover-img would squash the text.
   So we put the aspect frame on the <a> (image link) and let object-fit
   normalize whatever ratio the source image has. */

/* 3:2 ratio frame via padding-bottom trick — works without depending on
   `aspect-ratio` resolving correctly inside chained-percentage flex contexts,
   and forces the img to fill regardless of its natural dimensions
   (avatar.jpg is 506×506 square; without this it would render as a square
   and break the row alignment on the home page hero grid). */
article .hover-img > a {
	display: block;
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 66.6667%;
	overflow: hidden;
}

article .hover-img > a > img,
article .hover-img > a > img.wp-post-image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* For the cover variant the wrapper used to cap height via max-h-*.
   Now the <a> dictates the height, so the cap is unnecessary and
   would clip the bottom of the image. */
.hover-img[class*="max-h-"] {
	max-height: none !important;
}

/* On phones the card switches to a horizontal "thumb + text" layout
   (.hover-img.flex.flex-row). Pin the thumb to ~35% width so the
   text column always has room. */
@media (max-width: 639.98px) {
	article .hover-img.flex > a {
		flex: 0 0 38%;
		width: 38%;
		aspect-ratio: 3 / 2;
	}
}

/* Featured image on the single post template — cap so a square 506×506
   image doesn't tower over the column. */
.single .wp-post-image,
.page .wp-post-image {
	max-height: 520px;
	width: 100%;
	object-fit: cover;
}

/* Hero grid on phones (< sm, 640px): the .box-one cards stack into a single
   column. The dist Tailwind ships nth-child rules that put asymmetric
   left/right padding on each card to form the 4px gutter of the 2×2 grid:
       card 1,3 → padding-right .125rem
       card 2,4 → padding-left  .125rem
   That gutter only makes sense when the cards sit side-by-side. On a
   stacked single column it produces a zigzag where every other card looks
   shifted 2px to the right. Force symmetric vertical-only spacing here. */
@media (max-width: 639.98px) {
	.box-one > article {
		padding: 0 0 0.25rem 0 !important;
	}
	.box-one > article:last-child {
		padding-bottom: 0 !important;
	}
}

/* Hero grid alignment on desktop (lg+).
   With the padding-bottom 3:2 trick driving all <a> heights:
     LEFT  big hero height = (col_width − 4px pr-1) × 2/3
     RIGHT 2×2 grid height = (col_width/2 − 2px gutter) × 2/3 × 2 + 4px row gap
   These are within ~3px of each other but the LEFT comes out shorter.
   To force the LEFT to match the RIGHT exactly, cancel its 4px right
   padding (lg:pr-1) and reproduce the gutter via the RIGHT side instead. */
@media (min-width: 1024px) {
	article.lg\:w-1\/2.lg\:pr-1 {
		padding-right: 0;
	}
	/* Push the small-card grid 4px to the right so the visual gap between
	   LEFT and RIGHT columns is preserved. */
	article.lg\:w-1\/2.lg\:pr-1 + .lg\:w-1\/2 > .box-one {
		padding-left: 0.25rem;
	}
}

/* --- 2. Sidebar widgets ----------------------------------------------
   The functions.php widget registration wraps each title in a grey bar
   (.p-4.bg-gray-100) but the BODY is appended as bare <ul>/<form> with
   zero padding, so the items hug the left edge of the white card. We
   add a body padding, clean dividers, and pull dates onto their own
   line in the Recent Posts widget. */

.widget.bg-white {
	border: 1px solid #e5e7eb;
	border-radius: 0;
	overflow: hidden;
}

.widget.bg-white >.p-4.bg-gray-100 {
	background: #fafafa;
	border-bottom: 1px solid #ececec;
	padding: 0.875rem 1.25rem;
}

.widget.bg-white >.p-4.bg-gray-100 .widget-title {
	font-size: 0.9375rem;
	letter-spacing: 0.01em;
	color: #1f2937;
}

/* Body of every sidebar widget — give it breathing room */
.widget.bg-white >ul,
.widget.bg-white >.textwidget,
.widget.bg-white >form,
.widget.bg-white >.menu-menu-footer-container {
	padding: 0.5rem 1.25rem 0.75rem;
	margin: 0;
}

/* Generic lists */
.widget.bg-white >ul {
	list-style: none;
}
.widget.bg-white >ul > li {
	padding: 0.625rem 0;
	border-bottom: 1px solid #f1f1f1;
	font-size: 0.875rem;
	line-height: 1.45;
}
.widget.bg-white >ul > li:last-child {
	border-bottom: 0;
}
.widget.bg-white >ul > li > a {
	color: #1f2937;
	transition: color 0.15s ease;
}
.widget.bg-white >ul > li > a:hover {
	color: #dc2626;
}

/* Recent Posts — date sits on its own line, lighter and smaller */
.widget.bg-white.widget_recent_entries > ul > li {
	display: flex;
	flex-direction: column;
}
.widget.bg-white.widget_recent_entries > ul > li > a {
	font-weight: 600;
	color: #111827;
	display: inline-block;
}
.widget.bg-white.widget_recent_entries > ul > li .post-date {
	margin-top: 0.25rem;
	font-size: 0.75rem;
	color: #9ca3af;
	letter-spacing: 0.02em;
}

/* Categories — count as a discreet right-aligned pill.
   functions.php wraps "(N)" in <span class="cat-count"> via filter so
   we can style it independently of the link text. */
.widget.bg-white.widget_categories > ul > li {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.widget.bg-white.widget_categories > ul > li > a {
	flex: 1;
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.widget.bg-white.widget_categories .cat-count {
	display: inline-block;
	min-width: 1.5rem;
	padding: 0.0625rem 0.5rem;
	margin-left: 0.5rem;
	font-size: 0.6875rem;
	font-weight: 600;
	color: #6b7280;
	background: #f3f4f6;
	border-radius: 999px;
	text-align: center;
	line-height: 1.5;
}

/* Search widget — tighten and align with header card */
.widget.bg-white.widget_search .tn-search-form {
	padding: 0.875rem 1.25rem 1rem;
}
.widget.bg-white.widget_search .tn-search-form input[type="search"] {
	border-color: #e5e7eb;
	border-radius: 2px 0 0 2px;
}
.widget.bg-white.widget_search .tn-search-form button {
	border-radius: 0 2px 2px 0;
}

/* --- 3. Footer typography & spacing ----------------------------------- */

footer#colophon,
.tn-site > footer {
	font-size: 0.875rem; /* 14px base */
	line-height: 1.55;
}

#footer-content .widget.bg-white {
	margin-bottom: 1.25rem;
}

#footer-content .widget-title,
#footer-content h4 {
	font-size: 0.8125rem; /* 13px */
	letter-spacing: 0.05em;
	margin-bottom: 0.75rem;
}

#footer-content ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#footer-content ul li,
#footer-content .menu li {
	padding: 0.25rem 0;
	border: 0;
	font-size: 0.8125rem;
}

#footer-content ul li a {
	color: #d1d5db;
	transition: color 0.15s ease;
}

#footer-content ul li a:hover {
	color: #ffffff;
}

#footer-content .widget_recent_entries li .post-date {
	display: block;
	color: #6b7280;
	font-size: 0.6875rem;
	margin-top: 0.125rem;
}

#footer-content .widget_text p {
	font-size: 0.8125rem;
	margin: 0 0 0.75rem;
	color: #9ca3af;
}

/* Footer first column — site name was text-3xl which felt oversized when
   placed beside the smaller widget columns */
#footer-content .widget_text + p,
footer .text-3xl {
	font-size: 1.5rem;
	line-height: 1.2;
}

/* Footer search input inside widget area, if used */
#footer-content .search-form input[type="search"] {
	font-size: 0.8125rem;
}

/* Copyright bar — tighter padding, smaller text */
.footer-dark .py-4 {
	padding-top: 0.75rem;
	padding-bottom: 0.75rem;
}
.footer-dark p {
	font-size: 0.75rem;
	margin: 0;
}

/* --- 4. Native form fields & submit buttons --------------------------
   The header/footer search and comment_form submit already carry inline
   Tailwind classes (border-gray-300 py-2 px-4 …, bg-black hover:bg-gray-900 …)
   that style them. But bare native fields rendered by core have no class
   attribute at all — most visibly the comment form's author/email/url
   inputs and the comment textarea — so they fall back to UA defaults and
   look out of place next to the styled widgets.

   We use :where() to drop specificity to 0, so any utility class on a
   field still wins. The rules only fire on fields that have no class
   override, which is exactly what we want. Color values mirror the
   Tailwind tokens used elsewhere in the theme so bare and classed fields
   read as one design language. */

/* Flat design: solid borders, no shadows, no rounded corners, no
   inset effects. Focus state = border colour swap only. */
:where(
	input[type="text"], input[type="email"], input[type="url"],
	input[type="password"], input[type="search"], input[type="tel"],
	input[type="number"], input[type="date"], textarea, select
) {
	width: 100%;
	font-family: inherit;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: #111827;
	background: #ffffff;
	border: 1px solid #e5e7eb;
	border-radius: 0;
	padding: 0.75rem 1rem;
	transition: border-color 0.15s ease;
}

:where(
	input[type="text"], input[type="email"], input[type="url"],
	input[type="password"], input[type="search"], input[type="tel"],
	input[type="number"], input[type="date"], textarea, select
):hover {
	border-color: #9ca3af;
}

:where(
	input[type="text"], input[type="email"], input[type="url"],
	input[type="password"], input[type="search"], input[type="tel"],
	input[type="number"], input[type="date"], textarea, select
):focus {
	outline: none;
	border-color: #ce2626;
}

:where(
	input[type="text"], input[type="email"], input[type="url"],
	input[type="password"], input[type="search"], input[type="tel"],
	input[type="number"], textarea, select
):disabled {
	background: #f9fafb;
	color: #9ca3af;
	cursor: not-allowed;
}

:where(input, textarea)::placeholder {
	color: #9ca3af;
	opacity: 1;
}

:where(textarea) {
	min-height: 9rem;
	line-height: 1.55;
	resize: vertical;
}

/* Form field labels — give them visible hierarchy. WP's comment form
   labels render as plain text on top of the field, often blending in. */
.comment-form label,
.comment-form-comment label,
.comment-form-author label,
.comment-form-email label,
.comment-form-url label {
	display: inline-block;
	font-size: 0.8125rem;
	font-weight: 600;
	color: #374151;
	margin-bottom: 0.375rem;
	letter-spacing: 0.01em;
}

/* Comment form layout — give each field row breathing room and
   constrain to a readable width. The default WP markup ships each row
   tight against the next which makes the form feel cramped. */
.comment-form > p {
	margin-bottom: 1rem;
}
.comment-form-cookies-consent label {
	font-size: 0.8125rem;
	color: #6b7280;
	font-weight: 400;
	margin-left: 0.375rem;
}
.comment-form-cookies-consent input[type="checkbox"] {
	accent-color: #ce2626;
}

/* Force padding on ALL text-like inputs and textareas. Search inputs
   ship with explicit Tailwind utilities like `py-2 px-4 text-sm
   leading-5` that produce a cramped ~32px tall field where the
   placeholder text reads as flush against the border. Use !important
   so neither the inline utility classes nor the compiled Tailwind
   shorthand-vs-longhand specificity quirks can win.
   All form rules are namespaced under `.tn-site` (the theme's root wrapper in
   header.php/footer.php) so they only ever apply to the theme's own content,
   never to WordPress-injected UI outside the wrapper such as the admin bar. */
.tn-site input[type="text"],
.tn-site input[type="email"],
.tn-site input[type="url"],
.tn-site input[type="password"],
.tn-site input[type="search"],
.tn-site input[type="tel"],
.tn-site input[type="number"],
.tn-site input[type="date"],
.tn-site textarea,
.tn-site select {
	padding: 0.875rem 1.125rem !important;
	font-size: 0.9375rem !important;
	line-height: 1.5 !important;
	border: 1px solid #e5e7eb !important;
	border-radius: 0 !important;
}
/* Restore native checkbox/radio sizing — they shouldn't inherit the
   text-input padding above. */
.tn-site input[type="checkbox"],
.tn-site input[type="radio"] {
	padding: 0 !important;
}

/* Native submit buttons — flat solid red, !important so utility
   classes (`bg-black hover:bg-gray-900 py-2 px-5 …`) attached by
   comment_form() / WP defaults / plugin forms can't win. Hover =
   darker red swap only, no transform, no shadow.
   Namespaced under `.tn-site` so the natively-hidden admin bar search button
   (.adminbar-button), which lives outside the wrapper, is never forced visible. */
.tn-site input[type="submit"],
.tn-site button[type="submit"],
.tn-site button.wp-block-search__button {
	-webkit-appearance: none !important;
	appearance: none !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	font-family: inherit !important;
	font-size: 0.9375rem !important;
	font-weight: 600 !important;
	line-height: 1.25rem !important;
	letter-spacing: 0.01em !important;
	padding: 0.875rem 1.75rem !important;
	border-radius: 0 !important;
	background: #ce2626 !important;
	background-color: #ce2626 !important;
	color: #ffffff !important;
	border: 1px solid #ce2626 !important;
	cursor: pointer !important;
	text-decoration: none !important;
	transition: background-color 0.15s ease, border-color 0.15s ease !important;
}

.tn-site input[type="submit"]:hover,
.tn-site button[type="submit"]:hover,
.tn-site button.wp-block-search__button:hover {
	background: #b91c1c !important;
	background-color: #b91c1c !important;
	border-color: #b91c1c !important;
	color: #ffffff !important;
}

.tn-site input[type="submit"]:focus-visible,
.tn-site button[type="submit"]:focus-visible,
.tn-site button.wp-block-search__button:focus-visible {
	outline: 2px solid #ce2626 !important;
	outline-offset: 2px !important;
}

.tn-site input[type="submit"]:disabled,
.tn-site button[type="submit"]:disabled {
	opacity: 0.6 !important;
	cursor: not-allowed !important;
}

/* Search-icon buttons (icon-only) — tighter horizontal padding so the
   icon centers in a smaller square button. Overrides the wide padding
   from the global submit rule above. */
.tn-site .search-dropdown button[type="submit"],
.tn-site .widget_search button[aria-label*="search" i],
.tn-site .widget_search .tn-search-form button {
	padding: 0.625rem 0.875rem !important;
}

/* --- 5. Sticky header (flat) -----------------------------------------
   Header is `fixed top-0` in header.php. When scrolled, just swap to
   a slightly more opaque black — no shadow, no blur, no transitions
   beyond the colour swap itself. Flat. */

header.fixed > nav.bg-black {
	transition: background-color 200ms ease;
}

header.fixed.is-stuck > nav.bg-black {
	background-color: #000000;
	border-bottom: 1px solid #2a2a2a;
}

/* --- 6. Primary nav: flat hover -------------------------------------
   No lift, no glow, no text-shadow. Hover = solid red background +
   white text + the existing red bottom border (from compiled CSS). */

@media (min-width: 1024px) {
	.navbar > li {
		transition: background-color 150ms ease;
	}
	.navbar > li > a {
		transition: color 150ms ease;
	}
	.navbar > li:hover,
	.navbar > li:focus-within,
	.navbar > li.active {
		background-color: #ce2626;
	}
	.navbar > li:hover > a,
	.navbar > li:focus-within > a,
	.navbar > li.active > a {
		color: #ffffff;
	}
	/* Keep the bottom-border accent thin (the inherited 2px is enough). */
}

/* --- 7. Content (flat) ----------------------------------------------
   Sharp corners, no shadows, no transforms, no image zoom. Definition
   comes from solid borders, solid fills, generous whitespace, and
   weight/colour hierarchy alone. */

/* 7a. Section padding — keep the alternating bands readable */
.bg-white.py-6,
.bg-gray-50 {
	padding-top: 2.5rem;
	padding-bottom: 2.5rem;
}

/* 7b. Section heading */
.bg-white .text-2xl.font-bold,
.bg-gray-50 .text-2xl.font-bold {
	font-size: 1.5rem;
	font-weight: 800;
	letter-spacing: -0.01em;
	padding-bottom: 0.75rem;
	margin-bottom: 0.5rem;
	border-bottom: 2px solid #111111;
	display: flex;
	align-items: center;
}
.bg-white .text-2xl.font-bold a,
.bg-gray-50 .text-2xl.font-bold a {
	transition: color 0.15s ease;
}
.bg-white .text-2xl.font-bold a:hover,
.bg-gray-50 .text-2xl.font-bold a:hover {
	color: #ce2626;
}
.bg-white .text-2xl.font-bold > span.border-l-3,
.bg-gray-50 .text-2xl.font-bold > span.border-l-3 {
	height: 1.5rem;
	border-left-width: 5px !important;
	margin-right: 0.625rem;
}

/* 7c. Standard card — flat surface with thin border, no shadow,
   no transform on hover. Hover affordance = title colour change. */
article .hover-img {
	position: relative;
	background: #ffffff;
	border-radius: 0;
}
article .hover-img > a {
	border-radius: 0;
}
@media (min-width: 640px) {
	article:not(.cover) .hover-img {
		border: 1px solid #e5e7eb;
	}
	article:not(.cover) .hover-img:hover {
		border-color: #111111;
	}
}

/* No image zoom or brightness on hover */
article .hover-img img {
	transition: none;
}

/* Card body padding */
article .hover-img > .py-0,
article .hover-img > div:not([class*="bottom-0"]):not([class*="absolute"]) {
	padding: 0.875rem 1rem 1rem;
}
@media (max-width: 639.98px) {
	article .hover-img.flex.flex-row > div {
		padding: 0 0 0 0.75rem;
	}
}

article .hover-img h3.text-lg {
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.35;
	color: #111827;
}
article .hover-img h3.text-lg a {
	transition: color 0.15s ease;
}
article .hover-img:hover h3.text-lg a {
	color: #ce2626;
}
article .hover-img p.text-gray-600 {
	font-size: 0.875rem;
	color: #6b7280;
	line-height: 1.55;
	margin-top: 0.25rem;
}

/* 7d. Category eyebrow — flat solid red rectangle (no rounded pill) */
article .hover-img > div a.text-gray-500 {
	display: inline-flex;
	align-items: center;
	padding: 0.1875rem 0.625rem;
	margin-top: 0.5rem;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #ffffff !important;
	background: #ce2626;
	border-radius: 0;
	transition: background 0.15s ease;
}
article .hover-img > div a.text-gray-500:hover {
	background: #b91c1c;
}
article .hover-img > div a.text-gray-500 > span.border-l-2 {
	display: none;
}

/* 7e. Cover/hero card — solid semi-transparent black overlay (no
   gradient, no text-shadow). Flat block of colour behind the caption. */
.bg-gradient-cover {
	background-image: none !important;
	background-color: rgba(0, 0, 0, 0.65) !important;
	padding-top: 1rem !important;
	padding-bottom: 1rem !important;
}

article .hover-img h2 {
	text-shadow: none;
	transition: color 0.15s ease;
}
article .hover-img:hover h2 a,
article .hover-img:hover h2 {
	color: #ffffff;
}

/* Cover eyebrow — flat solid red rectangle */
article .hover-img > .absolute .text-gray-100 {
	display: inline-flex;
	align-items: center;
	padding: 0.125rem 0.5rem;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #ffffff !important;
	background: #ce2626;
	border-radius: 0;
	transition: background 0.15s ease;
}
article .hover-img > .absolute .text-gray-100:hover {
	background: #b91c1c;
}
article .hover-img > .absolute .text-gray-100 > span.border-l-2 {
	display: none;
}

/* Card images stay sharp — no border-radius. Just clip overflow so
   the inner <img> doesn't poke past on edge cases. */
article .hover-img,
article .hover-img > a,
article .hover-img > .absolute {
	overflow: hidden;
}

/* --- Posts navigation links (prev / next) ----------------------------
   previous_posts_link()/next_posts_link() (search, archive, author, index)
   and previous_post_link()/next_post_link() (single) output bare <a> tags
   inside .prev/.next wrappers. Style them as flat bordered buttons that
   match the theme (gray border, red hover). Namespaced under .tn-site. */
.tn-site nav .prev a,
.tn-site nav .next a {
	display: inline-block;
	padding: 0.5rem 1.125rem;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.25rem;
	color: #374151;
	background-color: #ffffff;
	border: 1px solid #e5e7eb;
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease,
		color 0.15s ease;
}
.tn-site nav .prev a:hover,
.tn-site nav .next a:hover {
	color: #ffffff;
	background-color: #ce2626;
	border-color: #ce2626;
}
.tn-site nav .prev a:focus-visible,
.tn-site nav .next a:focus-visible {
	outline: 2px solid #ce2626;
	outline-offset: 2px;
}