/*
 * AGCore Blog — the article page, the archive and the card grid.
 *
 * Mobile first: every rule here is the phone layout, and the media queries add
 * columns rather than take them away. 85–90% of the traffic these sites get is
 * a phone, so the phone is what the plain rules describe.
 *
 * Colours and type are inherited from the theme on purpose. A plugin that
 * paints its own palette looks like a plugin on every site it ships to; the
 * only colour named below is a line tint derived from the current text colour,
 * which works on a light theme and a dark one without knowing which it is on.
 */

.agcore-blog {
	/*
	 * The container the blog lives in.
	 *
	 * Defaults to the width the theme has decided for the rest of the site —
	 * WP-Core publishes --agcore-content-width in the head — so the blog lines
	 * up with every other page instead of running edge to edge. On a theme that
	 * publishes nothing, a sane figure rather than the whole window.
	 *
	 * A site that wants something else sets --agcore-blog-container and touches
	 * neither the theme nor this file.
	 */
	--agcore-blog-container: var(--agcore-content-width, 1200px);
	--agcore-blog-gap: 1.5rem;
	--agcore-blog-line: color-mix(in srgb, currentColor 15%, transparent);
	--agcore-blog-tint: color-mix(in srgb, currentColor 5%, transparent);
	--agcore-blog-radius: 6px;
	--agcore-blog-measure: 68ch;

	/* Text is never faded with opacity: it multiplies into the theme's colours
	   and broke WCAG AA (0.34.13, see CHANGELOG). */

	max-width: var(--agcore-blog-container);
	margin-inline: auto;
	padding-inline: 1rem;
}

/* Breadcrumbs */

.agcore-blog__breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 0.5rem;
	margin: 0 0 1rem;
	padding: 0;
	list-style: none;
	font-size: 0.875em;
}

.agcore-blog__breadcrumbs li + li::before {
	content: "/";
	margin-right: 0.5rem;
	opacity: 0.5;
}

/* Article header */

/*
 * By default the article is a reading column: on a wide theme a line of 150
 * characters and more is a line nobody finishes. "As wide as the site" is the
 * setting's other value.
 */
.agcore-blog--measure .agcore-blog__article {
	max-width: var(--agcore-blog-measure);
	margin-inline: auto;
}

.agcore-blog__title {
	margin: 0 0 0.5rem;
}

.agcore-blog__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1rem;
	margin: 0 0 1.5rem;
	font-size: 0.875em;
}

.agcore-blog__hero {
	margin: 0 0 var(--agcore-blog-gap);
}

.agcore-blog__hero img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--agcore-blog-radius);
}

/* The short answer */

.agcore-blog__answer {
	margin: 0 0 var(--agcore-blog-gap);
	padding: 1rem 1.25rem;
	border-inline-start: 3px solid currentColor;
	background: var(--agcore-blog-tint);
	border-radius: var(--agcore-blog-radius);
	font-size: 1.0625em;
}

.agcore-blog__answer > :first-child {
	margin-top: 0;
}

.agcore-blog__answer > :last-child {
	margin-bottom: 0;
}

/* Table of contents */

.agcore-blog__toc {
	margin: 0 0 var(--agcore-blog-gap);
	padding: 1rem 1.25rem;
	border: 1px solid var(--agcore-blog-line);
	border-radius: var(--agcore-blog-radius);
}

.agcore-blog__toc-title {
	margin: 0 0 0.5rem;
	font-size: 1em;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.agcore-blog__toc ol {
	margin: 0;
	padding-inline-start: 1.25rem;
}

.agcore-blog__toc-item.is-level-3 {
	margin-inline-start: 1rem;
}

/* Article body */

.agcore-blog__content > :first-child {
	margin-top: 0;
}

.agcore-blog__content img {
	max-width: 100%;
	height: auto;
}

/*
 * Anchored headings clear whatever the theme has stuck to the top of the
 * viewport. Without this a link from the table of contents lands with its
 * heading hidden under a sticky header, which reads as a broken link.
 */
.agcore-blog__content :is(h2, h3)[id] {
	scroll-margin-top: 5rem;
}

/* The card grid */

.agcore-blog__grid {
	display: grid;
	grid-template-columns: repeat(var(--agcore-blog-cols-mobile, 1), minmax(0, 1fr));
	gap: var(--agcore-blog-gap);
	margin: 0 0 var(--agcore-blog-gap);
}

@media (min-width: 768px) {
	.agcore-blog__grid {
		grid-template-columns: repeat(var(--agcore-blog-cols-tablet, 2), minmax(0, 1fr));
	}
}

@media (min-width: 992px) {
	.agcore-blog__grid {
		grid-template-columns: repeat(var(--agcore-blog-cols-desktop, 3), minmax(0, 1fr));
	}
}

.agcore-blog__card {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	min-width: 0;
}

.agcore-blog__card-media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: var(--agcore-blog-radius);
}

.agcore-blog__card-body > * {
	margin: 0 0 0.5rem;
}

.agcore-blog__card-body > :last-child {
	margin-bottom: 0;
}

.agcore-blog__card-section,
.agcore-blog__card-date {
	font-size: 0.8125em;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

/* The reading time sits after the date, separated rather than wrapped: on a
   narrow card the two must be able to fall onto two lines by themselves. */
.agcore-blog__card-time::before {
	content: "·";
	margin: 0 0.4em;
}

.agcore-blog__card-date > :only-child.agcore-blog__card-time::before {
	content: none;
	margin: 0;
}

.agcore-blog__card-title {
	font-size: 1.125em;
	line-height: 1.3;
}

/* Related, the related page card, the call to action, sharing */

.agcore-blog__related,
.agcore-blog__service,
.agcore-blog__author {
	margin: var(--agcore-blog-gap) 0 0;
	padding-top: var(--agcore-blog-gap);
	border-top: 1px solid var(--agcore-blog-line);
}

.agcore-blog__service-title {
	margin: 0 0 0.5rem;
	font-size: 1.125em;
}

.agcore-blog__cta {
	margin: var(--agcore-blog-gap) 0 0;
}

.agcore-blog__cta-button {
	display: inline-block;
	padding: 0.75rem 1.5rem;
	border: 2px solid currentColor;
	border-radius: var(--agcore-blog-radius);
	font-weight: 600;
	text-decoration: none;
}

.agcore-blog__share {
	margin: var(--agcore-blog-gap) 0 0;
}

.agcore-blog__share-title {
	margin: 0 0 0.5rem;
	font-size: 0.875em;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

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

.agcore-blog__author {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
}

.agcore-blog__author img {
	border-radius: 50%;
}

.agcore-blog__author-text > * {
	margin: 0 0 0.25rem;
}

/* Archive header, empty state */

.agcore-blog__archive-header {
	margin: 0 0 var(--agcore-blog-gap);
}

.agcore-blog__archive-title {
	margin: 0 0 0.5rem;
}

.agcore-blog__empty {
	padding: 2rem 0;
}

/*
 * Everything above assumes the reader wants motion to be modest anyway, so
 * there is nothing to switch off — the only transition in the stylesheet is
 * the one the theme's links already have.
 */

/* Callouts */

.agcore-blog__callout {
	--agcore-blog-callout: currentColor;
	margin: 0 0 var(--agcore-blog-gap);
	padding: 1rem 1.25rem;
	border-inline-start: 4px solid var(--agcore-blog-callout);
	background: var(--agcore-blog-tint);
	border-radius: var(--agcore-blog-radius);
}

/*
 * The only three colours in the stylesheet, and they earn their place: the
 * difference between a tip and a warning is the meaning, and meaning carried
 * only by a heading is meaning most readers skim past. A theme overrides any
 * of the three in one line.
 */
.agcore-blog__callout.is-info {
	--agcore-blog-callout: #2f6fb0;
}

.agcore-blog__callout.is-tip {
	--agcore-blog-callout: #2e7d5b;
}

.agcore-blog__callout.is-warning {
	--agcore-blog-callout: #b26a00;
}

.agcore-blog__callout-title {
	margin: 0 0 0.25rem;
	/* Half the theme's text colour: the pure colours failed WCAG AA on the
	   tint on every theme measured (0.34.13, see CHANGELOG). */
	color: color-mix(in srgb, var(--agcore-blog-callout) 50%, currentColor);
	font-weight: 700;
	font-size: 0.9375em;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.agcore-blog__callout-body > :first-child {
	margin-top: 0;
}

.agcore-blog__callout-body > :last-child {
	margin-bottom: 0;
}

/* Checklist */

.agcore-blog__checklist {
	margin: 0 0 var(--agcore-blog-gap);
	padding: 1rem 1.25rem;
	border: 1px solid var(--agcore-blog-line);
	border-radius: var(--agcore-blog-radius);
}

.agcore-blog__checklist-title {
	margin: 0 0 0.5rem;
	font-weight: 700;
}

.agcore-blog__checklist ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.agcore-blog__checklist li {
	position: relative;
	padding-inline-start: 1.75rem;
	margin-bottom: 0.5rem;
}

.agcore-blog__checklist li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 0.35em;
	width: 0.7em;
	height: 0.7em;
	border: 2px solid currentColor;
	border-radius: 3px;
	opacity: 0.6;
}

/* Questions and answers */

.agcore-blog__faq {
	margin: 0 0 var(--agcore-blog-gap);
}

.agcore-blog__faq-item {
	border-bottom: 1px solid var(--agcore-blog-line);
}

.agcore-blog__faq-item summary {
	padding: 0.75rem 0;
	cursor: pointer;
	font-weight: 600;
}

.agcore-blog__faq-answer {
	padding: 0 0 0.75rem;
}

.agcore-blog__faq-answer > :first-child {
	margin-top: 0;
}

/* Prices */

.agcore-blog__prices {
	margin: 0 0 var(--agcore-blog-gap);
	overflow-x: auto;
}

.agcore-blog__prices table {
	width: 100%;
	border-collapse: collapse;
}

.agcore-blog__prices th,
.agcore-blog__prices td {
	padding: 0.6rem 0.75rem;
	border-bottom: 1px solid var(--agcore-blog-line);
	text-align: start;
}

.agcore-blog__prices thead th {
	font-size: 0.8125em;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.agcore-blog__prices-note {
	display: block;
	font-weight: 400;
	font-size: 0.875em;
}

/* Gallery fallback */

.agcore-blog__gallery {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem;
	margin: 0 0 var(--agcore-blog-gap);
}

@media (min-width: 768px) {
	.agcore-blog__gallery {
		grid-template-columns: repeat(var(--agcore-blog-gallery-cols, 3), minmax(0, 1fr));
	}
}

.agcore-blog__gallery-item {
	margin: 0;
}

/*
 * The link is what makes a gallery image openable at all — with no script on
 * the page it opens the file, and with the site's lightbox it opens there.
 * It has to look clickable and answer the keyboard.
 */
.agcore-blog__gallery-link {
	display: block;
	border-radius: var(--agcore-blog-radius);
}

.agcore-blog__gallery-link:hover img {
	opacity: 0.9;
}

.agcore-blog__gallery-link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.agcore-blog__gallery-item img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--agcore-blog-radius);
	transition: opacity 0.15s ease;
}

@media (prefers-reduced-motion: reduce) {
	.agcore-blog__gallery-item img { transition: none; }
}

.agcore-blog__gallery-item figcaption {
	margin-top: 0.35rem;
	font-size: 0.8125em;
}

/* Section list */

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

.agcore-blog__sections-count {
	font-size: 0.875em;
}

/* Quick view */

/*
 * Hidden until the script says the listing is enhanced. A button that opens a
 * dialog is a lie on a page where no script runs, and the card's title link is
 * what works there — and what a crawler follows.
 */
.agcore-blog__card-qv {
	display: none;
	padding: 0.4rem 0.9rem;
	border: 1px solid currentColor;
	border-radius: var(--agcore-blog-radius);
	background: none;
	color: inherit;
	font: inherit;
	font-size: 0.875em;
	cursor: pointer;
}

.is-qv-ready .agcore-blog__card-qv {
	display: inline-block;
}

.is-qv-ready .agcore-blog__card[data-agcore-blog-open] {
	cursor: pointer;
}

.agcore-blog__dialog {
	position: fixed; /* not relative: a scrolled page pushed the panel off-screen */
	width: min(40rem, calc(100vw - 2rem));
	max-height: min(42rem, calc(100vh - 2rem));
	padding: 1.75rem;
	border: 1px solid var(--agcore-blog-line, rgba(0, 0, 0, 0.15));
	border-radius: 8px;
	background: Canvas;
	color: CanvasText;
	overflow: auto;
}

.agcore-blog__dialog::backdrop {
	background: rgba(0, 0, 0, 0.5);
}

/* Sticky rather than absolute: the panel scrolls, and a reader three screens
   into an article should not have to scroll back up to close it.

   No circle, in any state. A cross is already a shape; drawing a ring around it
   makes two, and on a white panel the ring is the louder of them. What the
   button needs instead is room — around it, so it does not crowd the corner,
   and under it, so the picture below has somewhere to start. The square it
   occupies stays big enough for a finger even though nothing marks it. */
.agcore-blog__dialog-close {
	position: sticky;
	top: 0;
	float: inline-end;
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	margin: 0 -1.5rem 0.5rem 1rem;
	/* Nudged up rather than pulled up by a margin: the button is sticky, and a
	   negative top margin on a sticky element is swallowed by the sticking. A
	   translate moves what is drawn without moving what the text flows around,
	   so the picture below keeps the room the margin gave it. */
	translate: 0 -1.25rem;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
}

.agcore-blog__dialog-close:hover,
.agcore-blog__dialog-close:focus-visible {
	background: none;
}

/* The panel's content starts below the button, not beside it. A floated box
   moves inline text out of its way and a block box straight through it — and
   the picture at the top of a quick view is a block box, so without this the
   cross lands on the picture. */
.agcore-blog__dialog-body {
	clear: both;
}

.agcore-blog__dialog-close svg {
	width: 1rem;
	height: 1rem;
}

/* One focus ring for everything the blog draws.

   The browser's own is a thick blue box that belongs to no theme on earth, and
   on a rounded button it draws a rectangle around a circle. This one follows
   the text colour, so it is visible on a light page and on a dark one, and
   follows the shape it is on. :focus-visible rather than :focus — a ring after
   a mouse click is noise, a ring after Tab is the whole point. */
.agcore-blog :is(a, button, summary):focus-visible,
.agcore-blog__dialog :is(a, button, summary):focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
	border-radius: var(--agcore-blog-radius);
}

.agcore-blog__dialog-close:focus-visible {
	border-radius: var(--agcore-blog-radius);
}

.agcore-blog__quickview-media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: var(--agcore-blog-radius, 6px);
}

.agcore-blog__quickview-title {
	margin: 1rem 0 0.5rem;
	font-size: 1.25em;
}

.agcore-blog__quickview-meta {
	margin: 0 0 0.75rem;
	font-size: 0.8125em;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.agcore-blog__quickview-answer {
	font-size: 1.0625em;
}

.agcore-blog__quickview-body {
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid var(--agcore-blog-line);
}

.agcore-blog__quickview-more {
	margin: 1rem 0 0;
	padding-top: 1rem;
	border-top: 1px solid var(--agcore-blog-line);
	font-weight: 600;
}

/* Topic cluster */

.agcore-blog__cluster {
	margin: var(--agcore-blog-gap) 0 0;
	padding-top: var(--agcore-blog-gap);
	border-top: 1px solid var(--agcore-blog-line);
}

.agcore-blog__cluster-title {
	margin: 0 0 0.5rem;
	font-size: 1.125em;
}

.agcore-blog__cluster-list {
	margin: 0;
	padding-inline-start: 1.25rem;
}

/* Video */

.agcore-blog__video {
	position: relative;
	margin: var(--agcore-blog-gap) 0;
	aspect-ratio: var(--agcore-blog-video-ratio, 16 / 9);
	border-radius: var(--agcore-blog-radius);
	overflow: hidden;
	background: var(--agcore-blog-tint);
}

.agcore-blog__video > :is(iframe, video, button) {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.agcore-blog__video-facade {
	padding: 0;
	background: none;
	cursor: pointer;
}

.agcore-blog__video-facade img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* The play mark is drawn rather than fetched: an icon file would be one more
   request on a plugin that promises none. */
.agcore-blog__video-play {
	position: absolute;
	inset: 50% auto auto 50%;
	translate: -50% -50%;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 50%;
	background: rgb(0 0 0 / 60%);
}

.agcore-blog__video-play::before {
	content: "";
	position: absolute;
	inset: 50% auto auto 54%;
	translate: -50% -50%;
	border-style: solid;
	border-width: 0.6rem 0 0.6rem 1rem;
	border-color: transparent transparent transparent #fff;
}

.agcore-blog__video-figure {
	margin: var(--agcore-blog-gap) 0;
}

.agcore-blog__video-figure .agcore-blog__video {
	margin: 0;
}

.agcore-blog__video-figure figcaption {
	margin-top: 0.5rem;
	font-size: 0.875em;
}

/* Icons in the share and follow rows */

.agcore-blog__icon {
	flex: none;
}

.agcore-blog__share ul,
.agcore-blog__social ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.agcore-blog__share-link,
.agcore-blog__social-link {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.4rem 0.7rem;
	border: 1px solid var(--agcore-blog-line);
	border-radius: var(--agcore-blog-radius);
	background: none;
	color: inherit;
	font: inherit;
	font-size: 0.875em;
	text-decoration: none;
	cursor: pointer;
}

.agcore-blog__share-link:hover,
.agcore-blog__social-link:hover {
	background: var(--agcore-blog-tint);
}

.agcore-blog__social {
	margin-top: var(--agcore-blog-gap);
}

.agcore-blog__social-title {
	margin: 0 0 0.5rem;
	font-size: 1rem;
}

/* Brand colours on the marks, not on the buttons.

   The colour is what makes a row of icons readable at a glance — a reader finds
   WhatsApp by its green long before reading the word. The button itself stays
   the page's own, because eight filled brand rectangles in a row stop being
   navigation and start being an advertisement.

   The values are each brand's flat colour, the one they publish for exactly
   this use. Instagram's is its single-colour fallback rather than the gradient:
   a gradient inside a 16px mark is mud. */

.agcore-blog__brand--facebook .agcore-blog__icon { color: #1877f2; }
.agcore-blog__brand--linkedin .agcore-blog__icon { color: #0a66c2; }
.agcore-blog__brand--whatsapp .agcore-blog__icon { color: #25d366; }
.agcore-blog__brand--telegram .agcore-blog__icon { color: #26a5e4; }
.agcore-blog__brand--viber .agcore-blog__icon { color: #7360f2; }
.agcore-blog__brand--youtube .agcore-blog__icon { color: #f00; }
.agcore-blog__brand--instagram .agcore-blog__icon { color: #e4405f; }

/* X and TikTok are black by brand, which disappears on a dark page. They follow
   the text colour instead: on a light page that is the black they are supposed
   to be, and on a dark one they stay visible, which the brand book cares about
   less than the reader does. */
.agcore-blog__brand--x .agcore-blog__icon,
.agcore-blog__brand--tiktok .agcore-blog__icon {
	color: inherit;
}

/* Gallery shapes, for the fallback grid only — where agcore-gallery is
   installed it draws galleries and this never runs. */

.agcore-blog__gallery--masonry {
	display: block;
	columns: var(--agcore-blog-gallery-cols, 3);
	column-gap: 0.75rem;
}

.agcore-blog__gallery--masonry > * {
	break-inside: avoid;
	margin-bottom: 0.75rem;
}

.agcore-blog__gallery img {
	aspect-ratio: var(--agcore-blog-gallery-ratio, auto);
	object-fit: cover;
}

/* Pagination

   WordPress prints a row of links and calls it navigation. It is navigation
   once it looks like something a finger can hit: even squares, the current page
   filled, and arrows that say which way they go. The markup is core's, so a
   theme that styles .page-numbers already keeps its own look. */

.agcore-blog__pagination {
	margin-top: var(--agcore-blog-gap);
	padding-top: var(--agcore-blog-gap);
	border-top: 1px solid var(--agcore-blog-line);
}

.agcore-blog__pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.375rem;
}

.agcore-blog__pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding: 0 0.75rem;
	border: 1px solid var(--agcore-blog-line);
	border-radius: var(--agcore-blog-radius);
	color: inherit;
	font-size: 0.9375em;
	font-variant-numeric: tabular-nums;
	line-height: 1;
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.agcore-blog__pagination a.page-numbers:hover {
	background: var(--agcore-blog-tint);
	border-color: currentColor;
}

/* The page you are on is not a link and should not look like one you can press.

   Inverted through the system colours rather than through currentColor: a
   background of currentColor with a colour set in the same rule paints the text
   the same shade as the box behind it, and the number disappears. */
.agcore-blog__pagination .page-numbers.current {
	background: CanvasText;
	border-color: CanvasText;
	color: Canvas;
	font-weight: 600;
}

.agcore-blog__pagination .page-numbers.dots {
	border-color: transparent;
	min-width: 1.5rem;
	padding: 0;
}

/* Words on a wide screen, arrows on a narrow one: "Προηγούμενα" and "Επόμενα"
   are long enough to wrap the row on a phone. */
.agcore-blog__pagination :is(.prev, .next) {
	gap: 0.4rem;
	font-weight: 600;
}

@media (max-width: 30rem) {
	.agcore-blog__pagination :is(.prev, .next) {
		font-size: 0;
		min-width: 2.5rem;
		padding: 0;
	}

	.agcore-blog__pagination :is(.prev, .next)::before {
		font-size: 1rem;
	}

	.agcore-blog__pagination .prev::before {
		content: "\2190";
	}

	.agcore-blog__pagination .next::before {
		content: "\2192";
	}
}