/*
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;
}
.post-card__excerpt {
	color: var(--ink);
	font-size: var(--step-0);
	margin: 0;
}

/* --- 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 {
	display: flex;
	gap: .5rem;
	justify-content: center;
	padding: 0 0 clamp(2rem, 5vw, 3.5rem);
}
.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; }

	.pagination { flex-wrap: wrap; }
}

@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; }
}