/*
Theme Name: Phoenix Magazine
Theme URI: https://phoenixmagazine.org
Author: Phoenix Editorial
Author URI: https://phoenixmagazine.org
Description: An independent music publication theme for artists finding a new voice and the listeners looking for them. Pixel-perfect implementation based on the Phoenix Magazine Design System.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: phoenix
Tags: dark-theme, grid-layout, accessibility-ready, custom-menu, featured-images, one-column
*/

@import url("assets/css/phoenix.css");

/* Phoenix WordPress Navigation Resets */
.phx-nav,
.phx-nav ul,
.phx-nav ol,
.phx-nav li,
.phx-navbar ul,
.phx-navbar li,
.phx-footer__links,
.phx-footer__links ul,
.phx-footer__links li,
.phx-menu__nav,
.phx-menu__nav ul,
.phx-menu__nav li,
.phx-menu__sub,
.phx-menu__sub ul,
.phx-menu__sub li,
.phx-menu__social,
.phx-menu__social ul,
.phx-menu__social li {
	list-style: none !important;
	list-style-type: none !important;
	margin: 0;
	padding: 0;
}
.phx-nav li {
	display: inline-flex;
	align-items: center;
}

/* Phoenix Typography & Link Color Overrides */
:where(.phx) :where(a) {
	color: inherit;
	text-decoration: none;
}
.phx-nav a {
	color: var(--text) !important;
	text-decoration: none;
}
.phx-nav a:hover,
.phx-nav a.is-hover,
.phx-nav a[aria-current="page"] {
	color: var(--accent) !important;
}

/* Action Links (.phx-link) — Must be Gold / Accent matching prototype */
.phx-link,
a.phx-link,
.phx a.phx-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	font: 600 13px/1 var(--font-sans);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--accent) !important;
	text-decoration: none !important;
	transition: color .16s ease;
}
.phx-link > span,
a.phx-link > span,
.phx a.phx-link > span {
	padding-bottom: 4px;
	border-bottom: 1px solid currentColor !important;
}
.phx-link .phx-icon,
a.phx-link .phx-icon,
.phx a.phx-link .phx-icon {
	color: currentColor;
	stroke: currentColor;
	transition: transform .16s ease;
}
.phx-link:hover,
.phx-link.is-hover,
a.phx-link:hover,
a.phx-link.is-hover,
.phx a.phx-link:hover {
	color: var(--accent-hover) !important;
}
.phx-link:hover .phx-icon,
.phx-link.is-hover .phx-icon,
a.phx-link:hover .phx-icon,
a.phx-link.is-hover .phx-icon {
	transform: translateX(3px);
}

/* Text Links */
.phx-textlink,
a.phx-textlink,
.phx a.phx-textlink {
	color: var(--accent) !important;
	text-decoration: underline !important;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
	transition: color .16s ease;
}
.phx-textlink:hover,
a.phx-textlink:hover,
.phx a.phx-textlink:hover {
	color: var(--accent-hover) !important;
}

/* Card Titles — Must be Ivory / Text color, not Gold */
.phx-card__title,
.phx-card__title a,
.phx-card--lead .phx-card__title,
.phx-card--lead .phx-card__title a,
.phx-card--quote .phx-card__title,
.phx-card--quote .phx-card__title a,
.phx-newscard__title,
.phx-newscard__title a,
.phx-newslead__title,
.phx-newslead__title a,
.phx-playlist__title,
.phx-playlist__title a,
.phx-row__title,
.phx-row__title a {
	color: var(--text) !important;
	text-decoration: underline;
	text-decoration-color: transparent;
	text-decoration-thickness: 1px;
	text-underline-offset: 5px;
	transition: text-decoration-color .16s ease;
}

.phx-card:hover .phx-card__title a,
.phx-card.is-hover .phx-card__title a,
.phx-newscard:hover .phx-newscard__title a,
.phx-newslead:hover .phx-newslead__title a,
.phx-playlist:hover .phx-playlist__title a,
.phx-row:hover .phx-row__title a {
	color: var(--text) !important;
	text-decoration-color: var(--accent);
}

/* Article Page Headline */
.phx-arthead__title {
	color: var(--text) !important;
}

/* Article Body Links are Gold */
.phx-prose a {
	color: var(--accent) !important;
	text-decoration: underline !important;
}

/* Tabs: Prevent unwanted vertical scrollbars in Windows browsers */
.phx-tabs {
	display: flex;
	gap: 28px;
	border-bottom: 1px solid var(--border);
	overflow-x: auto;
	overflow-y: hidden !important;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.phx-tabs::-webkit-scrollbar {
	display: none !important;
	width: 0 !important;
	height: 0 !important;
}
@media (min-width: 681px) {
	.phx-tabs {
		overflow: visible !important;
	}
}
.phx-tab {
	margin: 0 !important;
	padding: 0 !important;
	outline: none;
}