/*
Theme Name: Pilates Arjan Blog
Theme URI: https://www.pilatesarjan.ae/blog
Author: Pilates Arjan Automation
Description: Journal theme for Pilates Academy Arjan. Inherits the live site's stylesheet and design tokens so the blog and the main site never drift apart.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: pilates-arjan-blog
*/

/* ---------------------------------------------------------------------
   The parent site's styles.css is enqueued first and supplies:
   --brand #009999, --brand-ink #006D6D, --gold #DDBF70, --ink #4D4D4D,
   --ink-strong #262626, --bg-soft #F7F5F1, --bg-teal #004f4f,
   --line #E7E3DC, the Urbanist face, --step-* type scale, --maxw,
   --gutter, --radius, --shadow.
   Everything below is blog-only and adds nothing that already exists.
   ------------------------------------------------------------------ */

.blog-hero {
	background: var(--bg-soft);
	border-bottom: 1px solid var(--line);
	padding: clamp(2.5rem, 6vw, 4.5rem) 0;
}
.blog-hero .eyebrow {
	color: var(--brand-ink);
	font-size: var(--step--1);
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	margin: 0 0 .5rem;
}
.blog-hero h1 {
	color: var(--ink-strong);
	font-size: var(--step-3);
	line-height: 1.12;
	margin: 0 0 .75rem;
	max-width: 22ch;
}
.blog-hero p {
	color: var(--ink);
	font-size: var(--step-0);
	margin: 0;
	max-width: 62ch;
}

.post-grid {
	display: grid;
	gap: clamp(1.25rem, 3vw, 2rem);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
	padding: clamp(2rem, 5vw, 3.5rem) 0;
}

.post-card {
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transition: box-shadow .2s ease, transform .2s ease;
}
.post-card:hover,
.post-card:focus-within {
	box-shadow: var(--shadow);
	transform: translateY(-2px);
}
.post-card__media {
	aspect-ratio: 8 / 5;
	background: var(--bg-soft);
	display: block;
	overflow: hidden;
}
.post-card__media img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}
.post-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: .5rem;
	padding: 1.25rem;
}
.post-card__cat {
	color: var(--brand-ink);
	font-size: var(--step--1);
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
}
.post-card__title {
	font-size: var(--step-1);
	line-height: 1.25;
	margin: 0;
}
.post-card__title a {
	color: var(--ink-strong);
	text-decoration: none;
}
.post-card__title a:hover,
.post-card__title a:focus {
	color: var(--brand-ink);
	text-decoration: underline;
}
.post-card__meta {
	color: var(--ink);
	font-size: var(--step--1);
	opacity: .8;
}
/* The abstract.
   Written to a 44 to 50 word band so it fills four lines, and clamped to
   exactly four so a one word overrun can never make one card taller than its
   neighbours. min-height reserves the same space even for a short abstract,
   so a row of cards stays level. */
.post-card__excerpt {
	color: var(--ink);
	font-size: var(--step-0);
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: calc(4 * 1.6em);
	line-height: 1.6;
}

/* Titles wrap to at most two lines so the abstract always starts at the
   same vertical position across a row. */
.post-card__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: calc(2 * 1.25em);
}

/* --- Single article --------------------------------------------------- */

/* --- Breadcrumb ------------------------------------------------------- */

.pa-crumbs {
	padding: clamp(1.25rem, 3vw, 2rem) 0 0;
}
.pa-crumbs ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .35rem .5rem;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: var(--step--1);
}
.pa-crumbs li {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin: 0;
}
/* Separator on the element, not typed into the markup, so it is never
   read aloud by a screen reader as content. */
.pa-crumbs li + li::before {
	content: "/";
	color: var(--line);
	font-weight: 700;
}
.pa-crumbs a {
	color: var(--brand-ink);
	font-weight: 600;
	text-decoration: none;
}
.pa-crumbs a:hover,
.pa-crumbs a:focus-visible {
	text-decoration: underline;
	text-underline-offset: .15em;
}
.pa-crumbs [aria-current="page"] {
	color: var(--ink);
	opacity: .75;
}

@media (max-width: 600px) {
	/* On a phone a long headline would otherwise wrap to three lines and
	   push the article title below the fold. Truncate the current page
	   crumb only; the ancestors stay fully readable and tappable. */
	.pa-crumbs [aria-current="page"] {
		display: inline-block;
		max-width: 15ch;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		vertical-align: bottom;
	}
}

.article-head {
	padding: clamp(1rem, 2vw, 1.5rem) 0 1.5rem;
}
.article-head .post-card__cat {
	display: inline-block;
	margin-bottom: .75rem;
}
.article-head h1 {
	color: var(--ink-strong);
	font-size: var(--step-3);
	line-height: 1.12;
	margin: 0 0 .75rem;
	max-width: 24ch;
}
.article-meta {
	color: var(--ink);
	font-size: var(--step--1);
	opacity: .85;
}
.article-figure {
	border-radius: var(--radius);
	margin: 0 0 clamp(1.5rem, 4vw, 2.5rem);
	overflow: hidden;
}
.article-figure img {
	display: block;
	height: auto;
	width: 100%;
}

.article-body {
	color: var(--ink);
	font-size: var(--step-0);
	line-height: 1.75;
	margin: 0 auto;
	max-width: 68ch;
}
.article-body h2 {
	color: var(--ink-strong);
	font-size: var(--step-2);
	line-height: 1.25;
	margin: 2.25rem 0 .75rem;
}
.article-body h3 {
	color: var(--ink-strong);
	font-size: var(--step-1);
	line-height: 1.3;
	margin: 1.75rem 0 .5rem;
}
.article-body p { margin: 0 0 1.15rem; }
.article-body ul,
.article-body ol { margin: 0 0 1.15rem; padding-left: 1.35rem; }
.article-body li { margin-bottom: .5rem; }
.article-body a {
	color: var(--brand-ink);
	text-underline-offset: .15em;
}
.article-body a:hover,
.article-body a:focus { color: var(--ink-strong); }
.article-body strong { color: var(--ink-strong); }

.article-cta {
	background: var(--bg-teal);
	border-radius: var(--radius);
	color: var(--white);
	margin: clamp(2rem, 5vw, 3rem) auto;
	max-width: 68ch;
	padding: clamp(1.5rem, 4vw, 2.5rem);
}
.article-cta h2 {
	color: var(--white);
	font-size: var(--step-2);
	margin: 0 0 .5rem;
}
.article-cta p { margin: 0 0 1.25rem; opacity: .92; }
.article-cta .btn-row { display: flex; flex-wrap: wrap; gap: .75rem; }

/* The parent site's .btn-ghost is teal on white. On the deep teal panel
   that leaves teal on teal, which is effectively invisible and fails
   contrast. Invert it here rather than editing the shared stylesheet. */
.article-cta .btn-ghost {
	background: transparent;
	border: 1px solid rgba(255, 255, 255, .65);
	color: var(--white);
}
.article-cta .btn-ghost:hover,
.article-cta .btn-ghost:focus-visible {
	background: var(--white);
	border-color: var(--white);
	color: var(--bg-teal);
}
.article-cta .btn-primary {
	background: var(--white);
	border: 1px solid var(--white);
	color: var(--bg-teal);
}
.article-cta .btn-primary:hover,
.article-cta .btn-primary:focus-visible {
	background: var(--gold);
	border-color: var(--gold);
	color: var(--ink-strong);
}
.article-cta .btn-row a:focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 3px;
}

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

   WordPress wraps the page links in <div class="nav-links">, and the parent
   site uses that exact class for its desktop header menu, which it hides
   below 900px in favour of the burger:

       @media (max-width:900px){ .nav-links{display:none} }

   So on every phone the numbers vanished and the blog dead-ended at post
   ten, leaving a blank strip above the footer. Nothing was wrong with the
   markup; it was a class-name collision with the stylesheet we deliberately
   share with the main site.

   .pagination .nav-links outranks the bare .nav-links selector, so this one
   rule restores it at every width. Keep the descendant selector: a bare
   .nav-links override here would switch the site header's mobile menu back
   on as well.
   ------------------------------------------------------------------ */

.pagination {
	padding: 0 0 clamp(2rem, 5vw, 3.5rem);
}
.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	justify-content: center;
	align-items: center;
}

/* The nav carries an <h2>Posts pagination</h2> for screen readers. Neither
   stylesheet defined WordPress's class for it, so it rendered as a full
   size heading in the middle of the page. */
.pagination .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.pagination .page-numbers {
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	color: var(--ink-strong);
	padding: .5rem .9rem;
	text-decoration: none;
}
.pagination .page-numbers.current,
.pagination .page-numbers:hover {
	background: var(--brand-ink);
	border-color: var(--brand-ink);
	color: var(--white);
}

.blog-empty {
	color: var(--ink);
	padding: clamp(3rem, 8vw, 6rem) 0;
	text-align: center;
}

/* ---------------------------------------------------------------------
   Responsive
   Breakpoints deliberately match the parent stylesheet (900, 760, 600,
   560, 360) so the blog and the main site change shape at the same widths
   rather than a few pixels apart, which reads as a bug on a phone.
   ------------------------------------------------------------------ */

/* Nothing may exceed the viewport. Long slugs in links and unbroken words
   in generated copy are the usual culprits for horizontal scroll. */
.blog-hero,
.post-card,
.article-body,
.article-cta { min-width: 0; }

.article-body a,
.post-card__title a { overflow-wrap: anywhere; word-break: break-word; }

.article-body img,
.article-figure img,
.post-card__media img { max-width: 100%; height: auto; }

.article-body table { display: block; overflow-x: auto; max-width: 100%; }

@media (max-width: 900px) {
	.post-grid {
		grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
		gap: 1.25rem;
	}
	.article-body { max-width: none; }
	.article-cta { max-width: none; }
}

@media (max-width: 760px) {
	.blog-hero { padding: 2rem 0; }
	.blog-hero h1 { max-width: none; }
	.article-head { padding: 1.5rem 0 1rem; }
	.article-head h1 { max-width: none; }
	.article-figure { border-radius: var(--radius-sm); }
}

@media (max-width: 600px) {
	/* One column. Two 280px columns plus the gutter overflow below 600. */
	.post-grid { grid-template-columns: 1fr; }

	/* Buttons stack and go full width. Side by side pills wrap awkwardly
	   and leave a stranded half width button on the second line. */
	.article-cta .btn-row { flex-direction: column; align-items: stretch; }
	.article-cta .btn-row .btn { width: 100%; }

	.article-body { font-size: var(--step-0); line-height: 1.7; }
	.article-body h2 { margin-top: 1.75rem; }
	.article-body ul,
	.article-body ol { padding-left: 1.1rem; }

	/* Restated inside the breakpoint as well, so a future edit to the parent
	   stylesheet that raises its specificity still cannot hide these. */
	.pagination .nav-links {
		display: flex;
		flex-wrap: wrap;
		gap: .4rem;
	}
	.pagination .page-numbers { padding: .55rem .8rem; }
}

@media (max-width: 360px) {
	.blog-hero h1,
	.article-head h1 { hyphens: auto; }
	.post-card__body { padding: 1rem; }
}

/* Respect the parent site's reduced motion preference. */
@media (prefers-reduced-motion: reduce) {
	.post-card { transition: none; }
	.post-card:hover,
	.post-card:focus-within { transform: none; }
}

/* ---------------------------------------------------------------------
   Footer safety net.

   The footer column headings are white on a near-black panel, but that
   colour comes entirely from the parent stylesheet. If that file is ever
   stale, slow or replaced, the headings fall back to a browser default and
   render dark on dark, which is effectively invisible. Restating it here
   costs nothing and removes the dependency.
   ------------------------------------------------------------------ */

.site-footer .footer-grid h2 {
	color: #fff;
	font-size: 16px;
	font-weight: 900;
	margin: 0 0 .75rem;
}
.site-footer .footer-grid ul { list-style: none; margin: 0; padding: 0; }
.site-footer .footer-grid a { color: #e7e7e7; }

/* The sticky bar sits above everything; make sure the last thing on the
   page is never trapped underneath it on short viewports. */
@media (max-width: 900px) {
	.site-footer .disclaimer { padding-bottom: .5rem; }
}


/* ---------------------------------------------------------------------
   Visually hidden helper.

   Previously supplied by WordPress's block-library stylesheet, which is no
   longer loaded. The skip link and the pagination heading both depend on it,
   so it is restated here rather than lost with WordPress.
   ------------------------------------------------------------------ */

.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
	word-wrap: normal !important;
}

/* The skip link must become visible when it takes keyboard focus. */
.screen-reader-text:focus {
	background-color: #fff;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, .6);
	clip-path: none;
	color: #006D6D;
	display: block;
	font-size: 1rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* Content images: previously covered by WordPress's
   html :where(img[class*=wp-image-]) rule. */
.article-body img,
.post-card__media img {
	height: auto;
	max-width: 100%;
}