/**
 * Farajatna — layout: containers, header, navigation, content grid, footer.
 *
 * Mobile-first. Wider breakpoints live in responsive.css.
 */

/* --------------------------------------------------------------------------
 * Containers
 * ----------------------------------------------------------------------- */

.container {
	inline-size: min(100% - 2 * var(--fj-gutter), var(--fj-container));
	margin-inline: auto;
}

.site {
	display: flex;
	flex-direction: column;
	min-block-size: 100vh;
	min-block-size: 100dvh;
}

.site-content {
	flex: 1 0 auto;
}

body.layout-boxed {
	background-color: color-mix(in srgb, var(--fj-bg) 88%, var(--fj-text));
}

.layout-boxed .site {
	background: var(--fj-bg);
	box-shadow: var(--fj-shadow);
	margin-inline: auto;
	max-inline-size: calc(var(--fj-container) + 2 * var(--fj-gutter));
}

/* Sticky offset below the WordPress admin bar. */
.admin-bar {
	--fj-sticky-top: 0px;
}

@media (min-width: 601px) {
	.admin-bar {
		--fj-sticky-top: 46px;
	}
}

@media (min-width: 783px) {
	.admin-bar {
		--fj-sticky-top: 32px;
	}
}

/* --------------------------------------------------------------------------
 * Top bar
 * ----------------------------------------------------------------------- */

.top-bar {
	background: var(--news-mag-slate);
	color: #ffffff;
	font-size: var(--fj-tiny);
}

.top-bar a {
	color: inherit;
	text-decoration: none;
}

.top-bar a:hover {
	text-decoration: underline;
}

.top-bar__inner {
	align-items: center;
	display: flex;
	gap: 0.5rem 1.25rem;
	min-block-size: 2.5rem;
}

.top-bar__date {
	margin: 0;
	white-space: nowrap;
}

.secondary-navigation {
	display: none;
}

.secondary-navigation {
	flex: 1 1 auto;
	min-inline-size: 0;
	overflow-x: auto;
	scrollbar-width: none;
}

/* The top bar stays one line; long menus scroll sideways instead of wrapping. */
.secondary-navigation .menu {
	display: flex;
	flex-wrap: nowrap;
	gap: 0.25rem 1rem;
	list-style: none;
	margin: 0;
	padding: 0;
	white-space: nowrap;
}

.top-bar .social-links {
	margin-inline-start: auto;
}

/* --------------------------------------------------------------------------
 * Masthead
 * ----------------------------------------------------------------------- */

.site-header {
	background: var(--fj-header-bg);
	color: var(--fj-header-text);
}

.has-sticky-header .site-header {
	inset-block-start: var(--fj-sticky-top);
	position: sticky;
	z-index: 60;
}

.site-header.is-stuck,
.nav-bar.is-stuck {
	box-shadow: 0 2px 12px rgb(0 0 0 / 0.12);
}

.site-header__inner {
	align-items: center;
	display: flex;
	gap: 0.75rem;
	min-block-size: 4rem;
	padding-block: 0.5rem;
}

.site-branding {
	flex: 1 1 auto;
	min-inline-size: 0;
}

.site-title,
.site-logo {
	font-family: var(--fj-font-heading);
	font-size: clamp(1.4rem, 1rem + 2.4vw, 2.75rem);
	font-weight: 700;
	line-height: 1.15;
	margin: 0;
}

.site-title a {
	color: inherit;
	text-decoration: none;
}

.site-description {
	color: color-mix(in srgb, var(--fj-header-text) 72%, var(--fj-header-bg));
	display: none;
	font-size: var(--fj-tiny);
	margin: 0.15rem 0 0;
}

.custom-logo-link {
	display: inline-block;
}

.custom-logo {
	block-size: auto;
	inline-size: auto;
	max-block-size: 2.75rem;
}

.site-header__ad {
	display: none;
}

.site-header__actions,
.nav-bar__actions {
	align-items: center;
	display: flex;
	gap: 0.125rem;
	margin-inline-start: auto;
}

.icon-button {
	align-items: center;
	background: transparent;
	border: 0;
	border-radius: 50%;
	color: inherit;
	display: inline-flex;
	justify-content: center;
	min-block-size: 2.75rem;
	min-inline-size: 2.75rem;
	padding: 0.5rem;
	text-decoration: none;
}

.icon-button:hover {
	background: color-mix(in srgb, currentColor 12%, transparent);
	color: inherit;
}

/*
 * Logo position (Customizer → News Mag → Header → Logo position).
 * "Right" on a left-to-right site, or "Left" on a right-to-left site, puts
 * the site identity on the opposite side of the language's reading start:
 * the masthead row is reversed and the navigation bar is aligned with it.
 * Menu item order and text direction are left untouched.
 */
.branding-right:not(.rtl) .site-header:not(.site-header--centered) .site-header__inner,
.branding-left.rtl .site-header:not(.site-header--centered) .site-header__inner,
.branding-right:not(.rtl) .nav-bar__inner,
.branding-left.rtl .nav-bar__inner {
	flex-direction: row-reverse;
}

.branding-right:not(.rtl) .site-branding,
.branding-left.rtl .site-branding {
	align-items: flex-end;
	display: flex;
	flex-direction: column;
	text-align: end;
}

.branding-right:not(.rtl) .site-header__ad,
.branding-left.rtl .site-header__ad {
	margin-inline: 0;
}

/* In a reversed row the "auto" margins must push towards the other side. */
.branding-right:not(.rtl) .site-header__actions,
.branding-left.rtl .site-header__actions,
.branding-right:not(.rtl) .nav-bar__actions,
.branding-left.rtl .nav-bar__actions {
	margin-inline-end: auto;
	margin-inline-start: 0;
}

.branding-right:not(.rtl) .main-navigation .menu,
.branding-left.rtl .main-navigation .menu {
	justify-content: flex-end;
}

/* Centred masthead. */
.site-header--centered .site-header__inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
}

.site-header--centered .site-branding {
	grid-column: 2;
	text-align: center;
}

.site-header--centered .site-header__actions {
	grid-column: 3;
	justify-self: end;
}

/* --------------------------------------------------------------------------
 * Primary navigation
 * ----------------------------------------------------------------------- */

.nav-bar {
	background: var(--fj-header-bg);
	border-block: 1px solid var(--fj-border);
	border-block-start: 3px solid var(--fj-heading);
	color: var(--fj-header-text);
	z-index: 50;
}

.nav-bar__inner {
	align-items: center;
	display: flex;
	gap: 1rem;
}

/* With JavaScript, phones and tablets use the drawer; without it the
   navigation stays visible as a wrapped list. */
.js .nav-bar {
	display: none;
}

.js .site-header--compact .main-navigation {
	display: none;
}

/* Browsers without <dialog> support keep the inline navigation. */
.no-dialog .nav-bar,
.no-dialog .site-header--compact .main-navigation {
	display: block !important;
}

.main-navigation {
	flex: 1 1 auto;
	min-inline-size: 0;
}

.main-navigation .menu,
.main-navigation .sub-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.main-navigation .menu {
	display: flex;
	flex-wrap: wrap;
}

.main-navigation li {
	position: relative;
}

.main-navigation .menu > li {
	align-items: center;
	display: flex;
}

.main-navigation a {
	color: inherit;
	display: block;
	font-size: 0.95rem;
	font-weight: 600;
	padding: 0.75rem 0.8rem;
	text-decoration: none;
}

.main-navigation .menu > li > a {
	border-block-end: 3px solid transparent;
	margin-block-end: -1px;
}

.main-navigation .menu > li > a:hover,
.main-navigation .menu > .current-menu-item > a,
.main-navigation .menu > .current-menu-ancestor > a,
.main-navigation .menu > .current-menu-parent > a {
	border-block-end-color: var(--fj-primary);
}

.main-navigation .menu-item-has-children > a {
	padding-inline-end: 0.15rem;
}

.submenu-toggle {
	background: transparent;
	border: 0;
	border-radius: var(--fj-radius);
	color: inherit;
	min-block-size: 2.75rem;
	min-inline-size: 1.75rem;
	padding: 0;
}

.submenu-toggle:hover {
	background: color-mix(in srgb, currentColor 12%, transparent);
	color: inherit;
}

.submenu-toggle .icon {
	transition: transform 0.2s var(--fj-ease);
}

.submenu-toggle[aria-expanded="true"] .icon {
	transform: rotate(180deg);
}

.main-navigation .sub-menu {
	background: var(--fj-surface);
	border-block-start: 3px solid var(--fj-primary);
	box-shadow: var(--fj-shadow);
	color: var(--fj-text);
	inset-block-start: 100%;
	inset-inline-start: 0;
	min-inline-size: 15rem;
	opacity: 0;
	padding-block: 0.4rem;
	position: absolute;
	transform: translateY(0.4rem);
	transition: opacity 0.15s ease, transform 0.15s var(--fj-ease), visibility 0.15s;
	visibility: hidden;
	z-index: 100;
}

.main-navigation .sub-menu .sub-menu {
	inset-block-start: -0.4rem;
	inset-inline-start: 100%;
}

.main-navigation .sub-menu li {
	align-items: center;
	display: flex;
}

.main-navigation .sub-menu a {
	flex: 1 1 auto;
	font-weight: 500;
	padding: 0.5rem 1rem;
}

.main-navigation .sub-menu a:hover,
.main-navigation .sub-menu .current-menu-item > a {
	background: var(--fj-subtle);
}

/* Nested fly-outs open towards the inline end: the chevron points there
   (right in LTR, left in RTL) whether open or closed. */
.main-navigation .sub-menu .submenu-toggle .icon,
.main-navigation .sub-menu .submenu-toggle[aria-expanded="true"] .icon {
	transform: rotate(calc(-90deg * var(--fj-dir)));
}

/* Mouse users open submenus on hover. Keyboard users get the disclosure
   buttons added by navigation.js; without JavaScript, focus-within opens
   them instead. */
.main-navigation li:hover > .sub-menu,
.no-js .main-navigation li:focus-within > .sub-menu,
.main-navigation li.is-open > .sub-menu {
	opacity: 1;
	transform: none;
	visibility: visible;
}

/* Escape dismisses hover/focus-triggered submenus (WCAG 1.4.13). */
.main-navigation li.is-dismissed > .sub-menu {
	opacity: 0;
	visibility: hidden;
}

/* --------------------------------------------------------------------------
 * Content grid with optional sidebar ("start"/"end" are logical sides)
 * ----------------------------------------------------------------------- */

.layout {
	display: grid;
	gap: var(--fj-section) var(--fj-gap);
	grid-template-columns: minmax(0, 1fr);
	padding-block: clamp(1.5rem, 4vw, 2.5rem) var(--fj-section);
}

.site-main {
	min-inline-size: 0;
}

.sidebar {
	min-inline-size: 0;
}

/* --------------------------------------------------------------------------
 * Archive headers
 * ----------------------------------------------------------------------- */

.archive-header {
	border-block-end: 1px solid var(--fj-heading);
	margin-block-end: var(--fj-gap);
	padding-block-end: 1rem;
}

.archive-header__kicker {
	color: var(--fj-primary);
	font-size: var(--fj-small);
	font-weight: 700;
	margin: 0 0 0.25rem;
}

.archive-header--category {
	border-block-start: 6px solid var(--cat-color, var(--fj-primary));
	padding-block-start: 1rem;
}

.archive-header--category .archive-header__kicker {
	color: var(--fj-text);
}

.archive-title {
	margin-block-end: 0.35rem;
}

.archive-title__prefix {
	color: var(--fj-muted);
	display: block;
	font-family: var(--fj-font-body);
	font-size: var(--fj-small);
	font-weight: 600;
}

.archive-description {
	color: var(--fj-muted);
	max-inline-size: 70ch;
}

.archive-description > :last-child {
	margin-block-end: 0;
}

.archive-count {
	color: var(--fj-muted);
	font-size: var(--fj-small);
	margin: 0.25rem 0 0;
}

.archive-header__search {
	margin-block-start: 1rem;
	max-inline-size: 36rem;
}

.archive-subnav ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	margin: 1rem 0 0;
	padding: 0;
}

.archive-subnav a {
	border: 1px solid var(--fj-border);
	border-radius: 999px;
	color: var(--fj-text);
	display: inline-block;
	font-size: var(--fj-small);
	padding: 0.3rem 0.85rem;
	text-decoration: none;
}

.archive-subnav a:hover {
	border-color: var(--cat-color, var(--fj-primary));
}

.author-profile {
	align-items: flex-start;
	display: flex;
	gap: 1.25rem;
}

.author-profile__avatar {
	border-radius: 50%;
	flex: none;
}

/* --------------------------------------------------------------------------
 * Footer
 * ----------------------------------------------------------------------- */

.site-footer {
	background: var(--fj-footer-bg);
	color: var(--fj-footer-text);
	margin-block-start: var(--fj-section);
}

.site-footer a {
	color: inherit;
}

.footer-widgets {
	border-block-end: 1px solid color-mix(in srgb, var(--fj-footer-text) 20%, transparent);
	padding-block: var(--fj-section);
}

.footer-widgets__grid {
	display: grid;
	gap: var(--fj-gap) var(--fj-gutter);
	grid-template-columns: minmax(0, 1fr);
}

.site-footer .widget-title {
	border-color: color-mix(in srgb, var(--fj-footer-text) 35%, transparent);
	color: inherit;
}

.site-footer__inner {
	display: grid;
	gap: 1.5rem;
	padding-block: 2rem;
}

.site-footer__name {
	font-family: var(--fj-font-heading);
	font-size: 1.75rem;
	font-weight: 700;
	line-height: 1.2;
	margin: 0 0 0.75rem;
}

.site-footer__name a {
	text-decoration: none;
}

.footer-navigation .menu {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-info {
	color: color-mix(in srgb, var(--fj-footer-text) 82%, var(--fj-footer-bg));
	font-size: var(--fj-small);
}

.site-info p {
	margin: 0 0 0.25rem;
}