/**
 * Miloca — everything theme.json cannot express.
 *
 * Written entirely with logical properties (inline-start / inline-end rather
 * than left / right) so the Arabic RTL and English LTR sides of the site share
 * one stylesheet with no mirrored copy to keep in sync.
 */

/* -------------------------------------------------------------------------
 * Base
 * ---------------------------------------------------------------------- */

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

body {
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

/* Tajawal sits lower on the line than Montserrat and Inter, so Arabic needs a
   little more leading than the Latin default to avoid looking cramped. */
:lang(ar) {
	line-height: var(--wp--custom--line-height--arabic);
}

:lang(ar) h1,
:lang(ar) h2,
:lang(ar) h3 {
	line-height: 1.32;
	letter-spacing: 0;
}

/* Arabic has no uppercase — the transform is a no-op that only breaks
   letter-spacing, so drop it wherever the Latin side uses it. */
:lang(ar) .is-style-tag,
:lang(ar) .is-style-kicker,
:lang(ar) h6,
:lang(ar) .wp-block-post-terms {
	text-transform: none;
	letter-spacing: 0;
}

:where(a):focus-visible,
:where(button):focus-visible,
:where(input):focus-visible,
:where(select):focus-visible,
:where(textarea):focus-visible {
	outline: 2px solid var(--wp--preset--color--brand);
	outline-offset: 2px;
	border-radius: 2px;
}

.skip-link {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	z-index: 100;
	padding: 0.75rem 1.25rem;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	transform: translateY(-150%);
}

.skip-link:focus {
	transform: translateY(0);
}

/* -------------------------------------------------------------------------
 * Header — the solid green bar
 * ---------------------------------------------------------------------- */

.miloca-header {
	position: sticky;
	inset-block-start: 0;
	z-index: 50;
}

.miloca-header.is-scrolled {
	box-shadow: 0 2px 10px rgba(22, 22, 22, 0.18);
}

.miloca-header__bar {
	min-height: var(--wp--custom--header-height);
}

.admin-bar .miloca-header {
	inset-block-start: 32px;
}

@media (max-width: 782px) {
	.admin-bar .miloca-header {
		inset-block-start: 46px;
	}
}

/* Nav sits on green, so every state is a shade of white rather than a colour. */
.miloca-nav a,
.miloca-nav .wp-block-navigation-item__content {
	color: var(--wp--preset--color--base);
	text-decoration: none;
	padding-block: 0.5rem;
	border-block-end: 2px solid transparent;
	transition: border-color var(--wp--custom--transition), opacity var(--wp--custom--transition);
}

.miloca-nav a:hover,
.miloca-nav .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--base);
	border-block-end-color: var(--wp--preset--color--brand-bright);
	text-decoration: none;
}

.miloca-nav .current-menu-item > .wp-block-navigation-item__content {
	border-block-end-color: var(--wp--preset--color--base);
}

/* The mobile overlay is dark, not green — green-on-green loses the panel edge. */
.miloca-nav .wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

.miloca-header__end {
	gap: var(--wp--preset--spacing--20);
	flex-shrink: 0;
}

/* -------------------------------------------------------------------------
 * Breaking-news ticker
 * ---------------------------------------------------------------------- */

.miloca-ticker {
	--miloca-ticker-gap: 2rem;

	min-height: var(--wp--custom--ticker-height);
	padding-inline: 0;
	overflow: hidden;
	border-radius: 3px;
	gap: 0;
}

.miloca-ticker__label {
	flex: 0 0 auto;
	margin: 0;
	align-self: stretch;
	display: flex;
	align-items: center;
	padding-inline: 0.875rem;
	background: var(--wp--preset--color--live);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	letter-spacing: var(--wp--custom--tracking--wide);
	text-transform: uppercase;
	white-space: nowrap;
}

/* The window the headlines scroll through. */
.miloca-ticker__viewport {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	padding-inline: var(--wp--preset--spacing--20);
	/* Matches the label height so the strip is exactly one line tall. */
	display: flex;
	align-items: center;
	align-self: stretch;
}

.miloca-ticker__track {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: var(--miloca-ticker-gap, 2rem);
	/* max-content keeps every headline on the one line instead of letting the
	   flex container shrink them into a wrapped block. */
	width: max-content;
	will-change: transform;
}

.miloca-ticker__item {
	flex: 0 0 auto;
	white-space: nowrap;
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
}

.miloca-ticker__item:hover {
	color: var(--wp--preset--color--brand);
	text-decoration: none;
}

/* A dot between headlines. Drawn on the item itself rather than a separator
   element so the cloned marquee copy keeps the same rhythm across the seam. */
.miloca-ticker__item::after {
	content: "•";
	margin-inline-start: var(--miloca-ticker-gap, 2rem);
	color: var(--wp--preset--color--muted);
	pointer-events: none;
}

/* The scroll itself is driven from app.js with the Web Animations API rather
   than a CSS keyframe: the travel distance is measured at runtime, and a custom
   property standing in for it inside @keyframes is not reliably substituted
   across engines. If the script never runs, the row stays static and readable.
   Hover and focus pause it — see the pointer handlers in app.js. */

/* Without animation the row still has to be reachable, so it scrolls by hand. */
.miloca-ticker__viewport.is-scrollable {
	overflow-x: auto;
	scrollbar-width: none;
}

.miloca-ticker__viewport.is-scrollable::-webkit-scrollbar {
	display: none;
}

/* -------------------------------------------------------------------------
 * Section titles
 * ---------------------------------------------------------------------- */

.wp-block-heading.is-style-cat-bar {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	margin-block-end: 0;
	padding-inline-start: 0.75rem;
	border-inline-start: 4px solid var(--wp--preset--color--brand-bright);
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--tracking--wide);
}

.wp-block-heading.is-style-kicker {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--tag);
	font-weight: 700;
	letter-spacing: var(--wp--custom--tracking--wide);
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	margin-block-end: var(--wp--preset--spacing--10);
}

.miloca-section__more {
	margin: 0;
}

.miloca-section__more a {
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	text-decoration: none;
}

.miloca-section__more a:hover {
	color: var(--wp--preset--color--brand);
}

/* -------------------------------------------------------------------------
 * The green category tag
 * ---------------------------------------------------------------------- */

.wp-block-post-terms.is-style-tag {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

.wp-block-post-terms.is-style-tag a {
	display: inline-block;
	padding: 3px 8px;
	border-radius: 2px;
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--base);
	text-decoration: none;
	line-height: 1.4;
	transition: background-color var(--wp--custom--transition);
}

.wp-block-post-terms.is-style-tag a:hover {
	background: var(--wp--preset--color--brand-dark);
	color: var(--wp--preset--color--base);
}

.wp-block-post-terms.is-style-plain a {
	color: var(--wp--preset--color--brand);
	text-decoration: none;
}

/* -------------------------------------------------------------------------
 * Panels and cards
 * ---------------------------------------------------------------------- */

.wp-block-group.is-style-panel,
.miloca-panel {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 3px;
}

.wp-block-group.is-style-bordered {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 3px;
	padding: var(--wp--preset--spacing--30);
}

.miloca-card {
	height: 100%;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 3px;
	overflow: hidden;
	transition: box-shadow var(--wp--custom--transition), transform var(--wp--custom--transition);
}

.miloca-card:hover {
	box-shadow: var(--wp--preset--shadow--md);
	transform: translateY(-2px);
}

.miloca-card__media {
	position: relative;
	overflow: hidden;
}

.miloca-card__media img {
	display: block;
	transition: transform 400ms cubic-bezier(0.2, 0, 0.2, 1);
}

.miloca-card:hover .miloca-card__media img {
	transform: scale(1.04);
}

/* The tag overlaps the bottom corner of the image, dzfoot-style. */
.miloca-card__tag {
	position: absolute;
	inset-block-end: 8px;
	inset-inline-start: 8px;
	margin: 0;
	z-index: 2;
}

.miloca-card__body {
	flex: 1 1 auto;
}

/* -------------------------------------------------------------------------
 * Lead story
 * ---------------------------------------------------------------------- */

.miloca-lead__cover {
	border-radius: 3px;
	overflow: hidden;
}

.miloca-lead__cover .wp-block-cover__inner-container {
	align-self: flex-end;
	width: 100%;
}

.miloca-lead__title a {
	color: var(--wp--preset--color--base);
	text-decoration: none;
}

.miloca-lead__title a:hover {
	color: var(--wp--preset--color--brand-bright);
	text-decoration: none;
}

/* Meta sitting on the image scrim needs light text, not the muted grey. */
.miloca-post-meta.is-on-image,
.miloca-post-meta.is-on-image a,
.miloca-post-meta.is-on-image .miloca-reading-time {
	color: rgba(255, 255, 255, 0.82);
}

.miloca-post-meta.is-on-image > * + *::before,
.miloca-post-meta.is-on-image .miloca-reading-time::before {
	color: rgba(255, 255, 255, 0.45);
}

@media (max-width: 860px) {
	.miloca-lead {
		flex-wrap: wrap;
	}

	.miloca-lead .wp-block-column {
		flex-basis: 100% !important;
	}

	.miloca-lead__cover {
		min-height: 320px !important;
	}
}

/* -------------------------------------------------------------------------
 * Rows and mini list items
 * ---------------------------------------------------------------------- */

.miloca-row {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 3px;
	transition: box-shadow var(--wp--custom--transition);
}

.miloca-row:hover {
	box-shadow: var(--wp--preset--shadow--sm);
}

.miloca-row__media {
	flex: 0 0 200px;
	max-width: 200px;
}

.miloca-row__media img {
	border-radius: 3px;
}

.miloca-row__body {
	flex: 1 1 auto;
	min-width: 0;
}

@media (max-width: 600px) {
	.miloca-row {
		flex-wrap: wrap;
	}

	.miloca-row__media {
		flex-basis: 100%;
		max-width: 100%;
	}
}

.miloca-mini {
	align-items: flex-start;
}

.miloca-mini__media {
	flex: 0 0 auto;
}

.miloca-mini__media img {
	border-radius: 2px;
}

.miloca-mini__body {
	flex: 1 1 auto;
	min-width: 0;
}

.miloca-mini__body a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.miloca-mini__body a:hover {
	color: var(--wp--preset--color--brand);
}

.miloca-minilist > * + *,
.miloca-ranked > * + * {
	padding-block-start: var(--wp--preset--spacing--20);
	border-block-start: 1px solid var(--wp--preset--color--border);
}

/* -------------------------------------------------------------------------
 * Video grid
 * ---------------------------------------------------------------------- */

.miloca-videos .wp-block-heading.is-style-cat-bar {
	border-inline-start-color: var(--wp--preset--color--brand-bright);
}

.miloca-video__media {
	position: relative;
	overflow: hidden;
	border-radius: 3px;
}

.miloca-video__media img {
	display: block;
	transition: transform 400ms cubic-bezier(0.2, 0, 0.2, 1);
}

.miloca-video:hover .miloca-video__media img {
	transform: scale(1.05);
}

/* Play badge — a CSS triangle in a disc, so no icon font or SVG is needed. */
.miloca-video__media::after {
	content: "";
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	translate: -50% -50%;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(22, 22, 22, 0.7);
	box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.9);
	pointer-events: none;
}

.miloca-video__media::before {
	content: "";
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	translate: -40% -50%;
	z-index: 2;
	border-block: 8px solid transparent;
	border-inline-start: 13px solid #ffffff;
	border-inline-end: 0;
	pointer-events: none;
}

/* The triangle is drawn pointing to the inline-end, which flips with the
   document — but a play button always points the reading direction, so this
   is the one place the mirroring is correct rather than a bug. */

.miloca-video a {
	text-decoration: none;
}

/* -------------------------------------------------------------------------
 * Post meta
 * ---------------------------------------------------------------------- */

.miloca-post-meta,
.miloca-reading-time {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--x-small);
}

.miloca-post-meta > * + *::before,
.miloca-reading-time::before {
	content: "·";
	margin-inline-end: 0.5em;
	color: var(--wp--preset--color--border);
}

.miloca-post-meta a {
	color: inherit;
	text-decoration: none;
}

.miloca-post-meta a:hover {
	color: var(--wp--preset--color--brand);
	text-decoration: underline;
}

/* -------------------------------------------------------------------------
 * Language switcher
 * ---------------------------------------------------------------------- */

.miloca-lang {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	padding: 2px;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 999px;
}

.miloca-lang__item {
	padding: 0.25rem 0.625rem;
	border-radius: 999px;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--tag);
	font-weight: 700;
	line-height: 1;
	color: rgba(255, 255, 255, 0.8);
	text-decoration: none;
	transition: background-color var(--wp--custom--transition), color var(--wp--custom--transition);
}

.miloca-lang__item:hover {
	color: #ffffff;
}

.miloca-lang__item.is-current {
	background: #ffffff;
	color: var(--wp--preset--color--brand);
}

/* -------------------------------------------------------------------------
 * Search
 * ---------------------------------------------------------------------- */

.miloca-search .wp-block-search__input {
	border: 0;
	border-radius: 999px;
	padding: 0.45rem 0.9rem;
	background: rgba(255, 255, 255, 0.16);
	color: #ffffff;
	font-size: var(--wp--preset--font-size--x-small);
	min-width: 150px;
}

.miloca-search .wp-block-search__input::placeholder {
	color: rgba(255, 255, 255, 0.7);
}

.miloca-search .wp-block-search__button {
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.16);
	color: #ffffff;
	cursor: pointer;
}

.miloca-search .wp-block-search__button:hover {
	background: rgba(255, 255, 255, 0.28);
}

/* Off the green header the search reverts to the light treatment. */
.miloca-search--wide {
	max-width: 520px;
	margin-inline: auto;
}

.miloca-search--wide .wp-block-search__input {
	border: 1px solid var(--wp--preset--color--border);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

.miloca-search--wide .wp-block-search__input::placeholder {
	color: var(--wp--preset--color--muted);
}

.miloca-search--wide .wp-block-search__button {
	background: var(--wp--preset--color--brand);
	color: #ffffff;
}

/* -------------------------------------------------------------------------
 * Article body
 * ---------------------------------------------------------------------- */

.miloca-article > .wp-block-group,
.miloca-article > .wp-block-post-content {
	background: var(--wp--preset--color--base);
}

.miloca-article .wp-block-post-content > * {
	margin-block: var(--wp--preset--spacing--30);
}

.miloca-article .wp-block-post-content > h2 {
	margin-block-start: var(--wp--preset--spacing--50);
}

.miloca-article .wp-block-post-content > h3 {
	margin-block-start: var(--wp--preset--spacing--40);
}

.miloca-article .wp-block-post-content figcaption {
	margin-block-start: 0.625rem;
	padding-inline-start: 0.75rem;
	border-inline-start: 2px solid var(--wp--preset--color--brand-bright);
}

/* -------------------------------------------------------------------------
 * Sidebar
 * ---------------------------------------------------------------------- */

.miloca-sidebar {
	position: sticky;
	inset-block-start: calc(var(--wp--custom--header-height) + 1.5rem);
}

.miloca-sidebar .wp-block-categories,
.miloca-sidebar .wp-block-page-list {
	margin: 0;
	padding-inline-start: 0;
	list-style: none;
}

.miloca-sidebar .wp-block-categories li {
	padding-block: 0.4rem;
}

.miloca-sidebar .wp-block-categories li + li {
	border-block-start: 1px solid var(--wp--preset--color--border);
}

.miloca-sidebar a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.miloca-sidebar a:hover {
	color: var(--wp--preset--color--brand);
}

@media (max-width: 860px) {
	.miloca-sidebar {
		position: static;
	}
}

/* -------------------------------------------------------------------------
 * Grids
 * ---------------------------------------------------------------------- */

@media (max-width: 1000px) {
	.wp-block-post-template.is-layout-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 620px) {
	.wp-block-post-template.is-layout-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Columns blocks collapse before their content gets too narrow to read. */
@media (max-width: 860px) {
	.wp-block-columns.alignwide {
		flex-wrap: wrap;
	}

	.wp-block-columns.alignwide > .wp-block-column {
		flex-basis: 100% !important;
	}
}

/* -------------------------------------------------------------------------
 * Other block styles
 * ---------------------------------------------------------------------- */

.wp-block-separator.is-style-thick {
	border: 0;
	height: 3px;
	background: var(--wp--preset--color--brand);
	opacity: 1;
}

.wp-block-list.is-style-checked {
	padding-inline-start: 0;
	list-style: none;
}

.wp-block-list.is-style-checked li {
	position: relative;
	padding-inline-start: 1.75rem;
	margin-block: 0.5rem;
}

.wp-block-list.is-style-checked li::before {
	content: "";
	position: absolute;
	inset-block-start: 0.45em;
	inset-inline-start: 0;
	width: 0.75rem;
	height: 0.4rem;
	border-inline-start: 2px solid var(--wp--preset--color--brand);
	border-block-end: 2px solid var(--wp--preset--color--brand);
	rotate: -45deg;
}

.wp-block-image.is-style-frame img {
	border: 1px solid var(--wp--preset--color--border);
	padding: 0.5rem;
	background: var(--wp--preset--color--base);
	border-radius: 2px;
}

.wp-block-quote.is-style-bordered {
	border-inline-start: 3px solid var(--wp--preset--color--brand);
	padding-inline-start: var(--wp--preset--spacing--30);
}

/* -------------------------------------------------------------------------
 * Call to action
 * ---------------------------------------------------------------------- */

.miloca-cta__lede {
	color: inherit;
	opacity: 0.85;
}

/* -------------------------------------------------------------------------
 * Pagination
 * ---------------------------------------------------------------------- */

.wp-block-query-pagination a,
.wp-block-query-pagination .page-numbers {
	padding: 0.4em 0.8em;
	border-radius: 2px;
	text-decoration: none;
	color: var(--wp--preset--color--muted);
}

.wp-block-query-pagination a:hover {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--brand);
}

.wp-block-query-pagination .page-numbers.current {
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--base);
}

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

.miloca-footer a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.miloca-footer a:hover {
	color: var(--wp--preset--color--brand);
}

.miloca-footer .wp-block-categories,
.miloca-footer .wp-block-latest-posts {
	margin: 0;
	padding-inline-start: 0;
	list-style: none;
}

.miloca-footer li {
	padding-block: 0.3rem;
}

/* -------------------------------------------------------------------------
 * Comments
 * ---------------------------------------------------------------------- */

.wp-block-comments {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 3px;
	padding: var(--wp--preset--spacing--30);
}

.wp-block-post-comments-form input[type="text"],
.wp-block-post-comments-form input[type="email"],
.wp-block-post-comments-form input[type="url"],
.wp-block-post-comments-form textarea {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 3px;
	padding: 0.625rem 0.875rem;
	background: var(--wp--preset--color--base);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	width: 100%;
}

/* -------------------------------------------------------------------------
 * Reading progress, injected by assets/js/app.js on article pages
 * ---------------------------------------------------------------------- */

.miloca-progress {
	position: fixed;
	inset-block-start: 0;
	inset-inline: 0;
	z-index: 60;
	height: 3px;
	background: var(--wp--preset--color--brand-bright);
	transform: scaleX(0);
	/* scaleX grows from the visual left, so RTL needs the opposite origin. */
	transform-origin: left center;
	will-change: transform;
}

.is-rtl .miloca-progress {
	transform-origin: right center;
}

.admin-bar .miloca-progress {
	inset-block-start: 32px;
}

/* -------------------------------------------------------------------------
 * Motion
 * ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}

	.miloca-card:hover,
	.miloca-card:hover .miloca-card__media img,
	.miloca-video:hover .miloca-video__media img {
		transform: none;
	}
}