/*
Theme Name: Dial
Description: A GeneratePress child theme for general-interest article sites. Quiet and single-column on phones, layered and two-column on desktop, with a main feed and a sidebar feed that retune themselves by category, all categories, or at random.
Author: Emilio
Version: 1.1.0
Template: generatepress
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dial
*/

/* ---------------------------------------------------------------
   1. Tokens
   Colours and sizes here are also exposed in Appearance > Customize
   > Dial, which writes over them with inline CSS. Edit either place.
---------------------------------------------------------------- */

:root {
	--dial-ink: #131a22;
	--dial-muted: #59636e;
	--dial-rule: #dbe0e3;
	--dial-paper: #f4f6f5;
	--dial-accent: #1b5e5a;
	--dial-signal: #a9741b;

	--dial-display: "Helvetica Neue", "Segoe UI", Roboto, Inter, Arial, sans-serif;
	--dial-body: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
	--dial-utility: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

	--dial-aside-width: 300px;
	--dial-gap: 2.5rem;
}

/* ---------------------------------------------------------------
   2. Home layout
   Mobile is a single stack. The two-column grid only switches on
   at 1000px, so phones never render a sidebar rail at all.
---------------------------------------------------------------- */

.dial-home {
	padding-inline: clamp(16px, 4vw, 24px);
	padding-block: 1.75rem 3rem;
}

.dial-aside {
	margin-top: 3rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--dial-rule);
}

@media (min-width: 1000px) {
	.dial-home {
		display: grid;
		grid-template-columns: minmax(0, 1fr) var(--dial-aside-width);
		gap: var(--dial-gap);
		align-items: start;
		padding-block: 3rem 4.5rem;
	}

	.dial-aside {
		margin-top: 0;
		padding-top: 0;
		padding-left: var(--dial-gap);
		border-top: 0;
		border-left: 1px solid var(--dial-rule);
	}

	.dial-aside.is-sticky {
		position: sticky;
		top: 2rem;
	}
}

@media (min-width: 1280px) {
	:root {
		--dial-gap: 3.5rem;
	}
}

/* ---------------------------------------------------------------
   3. The tuner
   The strip that says which category the page is currently showing.
   It is the one piece of decoration that carries real information:
   it names the rotation. On phones it collapses to a single line.
---------------------------------------------------------------- */

.dial-tuner {
	margin: 0 0 1.75rem;
	font-family: var(--dial-utility);
	font-size: 0.6875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--dial-muted);
}

.dial-tuner__now {
	color: var(--dial-ink);
}

.dial-tuner__now b {
	color: var(--dial-signal);
	font-weight: 600;
}

.dial-tuner__rail {
	display: none;
}

@media (min-width: 1000px) {
	.dial-tuner__now {
		display: none;
	}

	.dial-tuner__rail {
		display: flex;
		flex-wrap: wrap;
		gap: 1.25rem;
		margin: 0;
		padding: 0 0 0.75rem;
		list-style: none;
		border-bottom: 1px solid var(--dial-rule);
		position: relative;
	}

	.dial-tuner__rail a {
		color: var(--dial-muted);
		text-decoration: none;
		padding-bottom: 0.75rem;
		border-bottom: 2px solid transparent;
		transition: color 0.15s ease, border-color 0.15s ease;
	}

	.dial-tuner__rail a:hover,
	.dial-tuner__rail a:focus-visible {
		color: var(--dial-ink);
	}

	.dial-tuner__rail .is-tuned a {
		color: var(--dial-signal);
		border-bottom-color: var(--dial-signal);
	}

	.dial-tuner__note {
		margin-left: auto;
		align-self: center;
		padding-bottom: 0.75rem;
		font-style: normal;
		opacity: 0.75;
	}
}

/* ---------------------------------------------------------------
   4. Story items
---------------------------------------------------------------- */

.dial-eyebrow {
	display: inline-block;
	margin-bottom: 0.4rem;
	font-family: var(--dial-utility);
	font-size: 0.625rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--dial-accent);
	text-decoration: none;
}

.dial-item {
	padding-block: 1.25rem;
	border-top: 1px solid var(--dial-rule);
}

.dial-item:first-child {
	border-top: 0;
	padding-top: 0;
}

.dial-item__title {
	margin: 0;
	font-family: var(--dial-display);
	font-weight: 700;
	font-size: 1.1875rem;
	line-height: 1.22;
	letter-spacing: -0.015em;
}

.dial-item__title a {
	color: var(--dial-ink);
	text-decoration: none;
	background-image: linear-gradient(var(--dial-signal), var(--dial-signal));
	background-size: 0 1px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	transition: background-size 0.25s ease;
}

.dial-item__title a:hover,
.dial-item__title a:focus-visible {
	background-size: 100% 1px;
}

.dial-item__standfirst {
	display: none;
	margin: 0.6rem 0 0;
	font-family: var(--dial-body);
	font-size: 1rem;
	line-height: 1.55;
	color: var(--dial-muted);
}

.dial-item__meta {
	margin: 0.5rem 0 0;
	font-family: var(--dial-utility);
	font-size: 0.6875rem;
	letter-spacing: 0.04em;
	color: var(--dial-muted);
}

.dial-item__media {
	display: block;
	margin-bottom: 0.85rem;
	overflow: hidden;
	border-radius: 3px;
	background: var(--dial-paper);
}

.dial-item__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.dial-item__media:hover img {
	transform: scale(1.03);
}

/* Phones: only the lead story keeps its picture and summary. The rest
   of the feed is title and date, which is all that fits comfortably. */
.dial-item:not(.dial-item--lead) .dial-item__media {
	display: none;
}

.dial-item--lead .dial-item__title {
	font-size: 1.5rem;
}

.dial-item--lead .dial-item__standfirst {
	display: block;
}

@media (min-width: 1000px) {
	.dial-item:not(.dial-item--lead) .dial-item__media {
		display: block;
	}

	.dial-item__standfirst {
		display: block;
	}

	.dial-item--lead {
		padding-bottom: 2.25rem;
	}

	.dial-item--lead .dial-item__media img {
		aspect-ratio: 16 / 9;
	}

	.dial-item--lead .dial-item__title {
		font-size: clamp(2rem, 3.2vw, 2.75rem);
		line-height: 1.06;
		letter-spacing: -0.025em;
	}

	.dial-item--lead .dial-item__standfirst {
		max-width: 46ch;
		font-size: 1.125rem;
	}

	/* Everything after the lead becomes a two-up grid. */
	.dial-grid {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--dial-gap);
	}

	.dial-grid .dial-item {
		border-top: 1px solid var(--dial-rule);
		padding-top: 1.5rem;
	}

	.dial-grid .dial-item:first-child {
		border-top: 1px solid var(--dial-rule);
		padding-top: 1.5rem;
	}

	.dial-item__title {
		font-size: 1.3125rem;
	}
}

@media (min-width: 1280px) {
	.dial-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.dial-grid .dial-item__title {
		font-size: 1.1875rem;
	}
}

/* ---------------------------------------------------------------
   5. Sidebar feed
---------------------------------------------------------------- */

.dial-panel__title {
	margin: 0 0 1rem;
	font-family: var(--dial-utility);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--dial-muted);
}

.dial-panel__title span {
	color: var(--dial-signal);
}

.dial-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.dial-list__item {
	padding-block: 0.85rem;
	border-top: 1px solid var(--dial-rule);
}

.dial-list__item:first-child {
	border-top: 0;
	padding-top: 0;
}

.dial-list__item a {
	color: var(--dial-ink);
	text-decoration: none;
	font-family: var(--dial-display);
	font-weight: 600;
	font-size: 0.9375rem;
	line-height: 1.3;
	letter-spacing: -0.01em;
}

.dial-list__item a:hover,
.dial-list__item a:focus-visible {
	color: var(--dial-accent);
}

.dial-list__item .dial-eyebrow {
	display: block;
	margin: 0 0 0.25rem;
}

.dial-panel__note {
	margin: 1.25rem 0 0;
	font-family: var(--dial-utility);
	font-size: 0.625rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--dial-muted);
	opacity: 0.8;
}

/* ---------------------------------------------------------------
   6. Single article reading column
---------------------------------------------------------------- */

.single .entry-content,
.page .entry-content {
	font-family: var(--dial-body);
	font-size: 1.0625rem;
	line-height: 1.65;
}

.single .entry-title,
.page .entry-title {
	font-family: var(--dial-display);
	font-weight: 700;
	letter-spacing: -0.025em;
	line-height: 1.08;
}

@media (min-width: 1000px) {
	.single .entry-content,
	.page .entry-content {
		font-size: 1.1875rem;
		line-height: 1.7;
	}

	.single .entry-content > p,
	.single .entry-content > h2,
	.single .entry-content > h3,
	.single .entry-content > ul,
	.single .entry-content > ol,
	.single .entry-content > blockquote {
		max-width: 68ch;
	}
}

.entry-content blockquote {
	border-left: 2px solid var(--dial-signal);
	padding-left: 1.25rem;
	font-style: normal;
	color: var(--dial-muted);
}

/* ---------------------------------------------------------------
   7. Quality floor
---------------------------------------------------------------- */

a:focus-visible,
button:focus-visible {
	outline: 2px solid var(--dial-signal);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	* {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

/* ---------------------------------------------------------------
   8. Header and footer
   Only used when "Use Dial's own header and footer" is ticked in
   Appearance > Customize > Dial: header & footer. Each slot can hold
   a synced pattern you build in the block editor; if none is set, the
   built-in bar below is used instead.
---------------------------------------------------------------- */

.dial-header {
	border-bottom: 1px solid var(--dial-rule);
	background: var(--dial-paper);
}

.dial-header.is-sticky {
	position: sticky;
	top: 0;
	z-index: 100;
}

.admin-bar .dial-header.is-sticky {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .dial-header.is-sticky {
		top: 46px;
	}
}

.dial-header__inner,
.dial-footer__inner {
	padding-inline: clamp(16px, 4vw, 24px);
}

.dial-header__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding-block: 0.85rem;
}

.dial-brand__title {
	font-family: var(--dial-display);
	font-weight: 700;
	font-size: 1.125rem;
	letter-spacing: -0.02em;
	color: var(--dial-ink);
	text-decoration: none;
}

.dial-brand img {
	display: block;
	height: auto;
}

.dial-menu {
	display: flex;
	gap: 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--dial-display);
	font-size: 0.9375rem;
	font-weight: 500;
}

.dial-menu li {
	position: relative;
}

.dial-menu a {
	display: inline-block;
	padding-block: 0.25rem;
	color: var(--dial-ink);
	text-decoration: none;
	border-bottom: 2px solid transparent;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.dial-menu a:hover,
.dial-menu a:focus-visible {
	border-bottom-color: var(--dial-signal);
}

.dial-menu .current-menu-item > a {
	color: var(--dial-signal);
	border-bottom-color: var(--dial-signal);
}

/* One level of drop-down, keyboard reachable. */
.dial-menu .sub-menu {
	position: absolute;
	left: 0;
	top: 100%;
	min-width: 200px;
	margin: 0;
	padding: 0.5rem 0;
	list-style: none;
	background: var(--dial-paper);
	border: 1px solid var(--dial-rule);
	border-radius: 3px;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.15s ease;
	z-index: 20;
}

.dial-menu li:hover > .sub-menu,
.dial-menu li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
}

.dial-menu .sub-menu a {
	display: block;
	padding: 0.4rem 1rem;
	border-bottom: 0;
}

/* Phone menu button */
.dial-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
	color: var(--dial-ink);
}

.dial-toggle__bars {
	position: relative;
}

.dial-toggle__bars,
.dial-toggle__bars::before,
.dial-toggle__bars::after {
	display: block;
	width: 22px;
	height: 2px;
	background: currentColor;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.dial-toggle__bars::before,
.dial-toggle__bars::after {
	content: "";
	position: absolute;
}

.dial-toggle__bars::before {
	transform: translateY(-7px);
}

.dial-toggle__bars::after {
	transform: translateY(7px);
}

.dial-toggle[aria-expanded="true"] .dial-toggle__bars {
	background: transparent;
}

.dial-toggle[aria-expanded="true"] .dial-toggle__bars::before {
	transform: rotate(45deg);
}

.dial-toggle[aria-expanded="true"] .dial-toggle__bars::after {
	transform: rotate(-45deg);
}

/* Slide-out panel */
.dial-mobile-panel {
	padding: 0.5rem clamp(16px, 4vw, 24px) 1.25rem;
	background: var(--dial-paper);
	border-bottom: 1px solid var(--dial-rule);
}

.dial-mobile-panel[hidden] {
	display: none;
}

.dial-menu--stacked {
	flex-direction: column;
	align-items: stretch;
	gap: 0;
}

.dial-menu--stacked li {
	border-top: 1px solid var(--dial-rule);
}

.dial-menu--stacked li:first-child {
	border-top: 0;
}

.dial-menu--stacked a {
	display: block;
	padding: 0.85rem 0;
	font-size: 1.0625rem;
	border-bottom: 0;
}

.dial-menu--stacked .sub-menu {
	position: static;
	opacity: 1;
	visibility: visible;
	border: 0;
	padding: 0 0 0.5rem 1rem;
	background: none;
}

/* Footer */
.dial-footer {
	margin-top: 4rem;
	border-top: 1px solid var(--dial-rule);
}

.dial-footer__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-block: 2rem 2.5rem;
}

.dial-footer--mobile .dial-footer__bar {
	flex-direction: column;
	align-items: flex-start;
	gap: 1.25rem;
}

.dial-footer__meta {
	margin: 0;
	font-family: var(--dial-utility);
	font-size: 0.6875rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--dial-muted);
}

/* ---------------------------------------------------------------
   9. Per-block visibility
   The actual media queries are generated in PHP from the breakpoint
   set in the Customizer. These classes are also typeable by hand in
   any block's Advanced > Additional CSS class(es) field.
---------------------------------------------------------------- */

.dial-hide-mobile,
.dial-hide-tablet,
.dial-hide-desktop {
	/* Visible by default; the generated media queries hide them. */
}