/*
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 {
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
	border-radius: 2px;
	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,
body > 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. */

: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.875rem;
	line-height: 1.25rem;
	color: #1f2937;
	background: #ffffff;
	border: 1px solid #d1d5db;
	border-radius: 2px;
	padding: 0.5rem 1rem;
	transition: border-color 0.15s ease, box-shadow 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
):focus {
	outline: none;
	border-color: #9ca3af;
	box-shadow: 0 0 0 3px rgba(156, 163, 175, 0.18);
}

: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: 7rem;
	line-height: 1.55;
}

/* Native submit buttons — mirror the inline `bg-black hover:bg-gray-900
   text-gray-100 hover:text-white` pattern used by comment_form's
   class_submit so a stray bare submit doesn't render as a UA button. */
:where(input[type="submit"], button[type="submit"]) {
	-webkit-appearance: none;
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: inherit;
	font-size: 0.875rem;
	line-height: 1.25rem;
	padding: 0.5rem 1.25rem;
	border-radius: 2px;
	background: #000000;
	color: #f3f4f6;
	border: 1px solid #000000;
	cursor: pointer;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

:where(input[type="submit"], button[type="submit"]):hover {
	background: #111827;
	border-color: #111827;
	color: #ffffff;
}

:where(input[type="submit"], button[type="submit"]):focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.25);
}

:where(input[type="submit"], button[type="submit"]):disabled {
	opacity: 0.6;
	cursor: not-allowed;
}