/*
 * Atlas Arcadia - article styles (handle aa-blog-article; plan U2).
 *
 * ONE rule set, two scopes:
 *   .aa-article              the Elementor Post Content widget (front end)
 *   .editor-styles-wrapper   the block-editor canvas iframe body (posts only)
 * Both are written as :is( .aa-article, .editor-styles-wrapper ).
 * Tokens (--aa-*) come from aa-design-tokens. Not owned here: .aa-callout,
 * .aa-fact-box, .aa-record-card, .aa-credit (blocks.css, U3).
 */

:is(.aa-article.aa-article, .editor-styles-wrapper) {
	--aa-measure: 864px;
	--aa-wide: 1100px;
	--aa-gutter: 20px;
	--aa-flow: var(--wp--preset--spacing--50, 24px);
	--aa-text-color: #2a1d12;
	--aa-faint: #f3e7cf;
	font-family: var(--aa-text);
	font-size: 1.0625rem;
	line-height: 1.75;
	color: var(--aa-text-color);
	-webkit-font-smoothing: antialiased;
	overflow-wrap: break-word;
}

/* ---- Front-end measure -------------------------------------------------------
   Post Content has no layout wrapper of its own, so the column is built here.
   The editor gets its width from the layout engine (contentSize 864px). */
.aa-article.elementor-element > .elementor-widget-container {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--aa-measure);
	margin-inline: auto;
}
/* Not inside an Elementor widget (plain container): the column carries its own gutter. */
.aa-article:not(.elementor-element) {
	box-sizing: border-box;
	max-width: calc(var(--aa-measure) + 2 * var(--aa-gutter));
	margin-inline: auto;
	padding-inline: var(--aa-gutter);
}
.aa-article { text-align: left; }

/* Wide and full-width blocks break out of the column. They are centred on the
   column, so they work inside The7's boxed wrapper and under Hello alike. */
.aa-article .alignwide {
	box-sizing: border-box;
	width: min(var(--aa-wide), 100vw - 2 * var(--aa-gutter));
	max-width: none;
	margin-left: calc(50% - min(var(--aa-wide), 100vw - 2 * var(--aa-gutter)) / 2);
	margin-right: 0;
}
.aa-article .alignfull,
.aa-article .is-style-aa-full-bleed {
	box-sizing: border-box;
	width: 100vw;
	max-width: none;
	margin-left: calc(50% - 50vw);
	margin-right: 0;
}
html:has(.aa-article), body:has(.aa-article) { overflow-x: clip; }

/* ---- Rhythm ---------------------------------------------------------------- */
:is(.aa-article, .editor-styles-wrapper) :is(p, ul, ol, blockquote, figure, table, pre, details, .wp-block-group, .wp-block-columns, .wp-block-buttons, .wp-block-gallery) {
	margin-top: 0;
	margin-bottom: 1.4em;
}
:is(.aa-article, .editor-styles-wrapper) :is(h2, h3, h4) {
	font-weight: 700;
	text-wrap: balance;
	color: var(--aa-brown);
	margin-bottom: .55em;
}
:is(.aa-article, .editor-styles-wrapper) h2 {
	font-family: var(--aa-display);
	font-size: 1.95rem;
	line-height: 1.2;
	letter-spacing: .01em;
	margin-top: 2.1em;
}
:is(.aa-article, .editor-styles-wrapper) h3 {
	font-family: var(--aa-display);
	font-size: 1.5rem;
	line-height: 1.25;
	letter-spacing: .01em;
	margin-top: 1.8em;
}
:is(.aa-article, .editor-styles-wrapper) h4 {
	font-family: var(--aa-text);
	font-size: 1.0625rem;
	line-height: 1.4;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--aa-orange);
	margin-top: 1.8em;
}
:is(.aa-article, .editor-styles-wrapper) :is(h2, h3, h4):first-child { margin-top: 0; }
:is(.aa-article, .editor-styles-wrapper) :is(h2, h3) + :is(h3, h4) { margin-top: 1em; }

/* ---- Block flow ------------------------------------------------------------
   One rule so no two consecutive top-level blocks ever touch, whatever their own
   margins are (the Callout, Buttons, Record card and Fact box each used to carry a
   different one, and in the editor canvas the bottom margin is stripped, so a
   Callout followed by Buttons sat flush). --aa-flow is design-system step XL (24px).
   Specificity is deliberately higher than the per-block margins above and below,
   but it uses plain margins, never !important: a margin or padding a writer sets
   in the editor (Styles > Dimensions) is an inline style and always wins. */
:is(.aa-article.elementor-element > .elementor-widget-container, .aa-article:not(.elementor-element), .editor-styles-wrapper .is-root-container) > * + * {
	margin-top: var(--aa-flow);
}
/* Text under a heading stays close to it (the heading's own bottom margin sets the gap). */
:is(.aa-article.elementor-element > .elementor-widget-container, .aa-article:not(.elementor-element), .editor-styles-wrapper .is-root-container) > :is(h2, h3, h4) + :where(*:not(h2, h3, h4, .wp-block-separator, .is-style-aa-pull, .is-style-aa-full-bleed, .wp-block-footnotes, .wp-block-spacer)) {
	margin-top: 0;
}
/* More room before a new section. */
:is(.aa-article.elementor-element > .elementor-widget-container, .aa-article:not(.elementor-element), .editor-styles-wrapper .is-root-container) > * + h2 { margin-top: 2.1em; }
:is(.aa-article.elementor-element > .elementor-widget-container, .aa-article:not(.elementor-element), .editor-styles-wrapper .is-root-container) > * + :is(h3, h4) { margin-top: 1.8em; }
:is(.aa-article.elementor-element > .elementor-widget-container, .aa-article:not(.elementor-element), .editor-styles-wrapper .is-root-container) > :is(h2, h3) + :is(h3, h4) { margin-top: 1em; }
:is(.aa-article.elementor-element > .elementor-widget-container, .aa-article:not(.elementor-element), .editor-styles-wrapper .is-root-container) > * + .wp-block-footnotes { margin-top: 2.4em; }
/* The Spacer block is the whole gap: it replaces the default one on both sides. */
:is(.aa-article.elementor-element > .elementor-widget-container, .aa-article:not(.elementor-element), .editor-styles-wrapper .is-root-container) > .wp-block-spacer,
:is(.aa-article.elementor-element > .elementor-widget-container, .aa-article:not(.elementor-element), .editor-styles-wrapper .is-root-container) > .wp-block-spacer + * { margin-top: 0; }
:is(.aa-article.elementor-element > .elementor-widget-container, .aa-article:not(.elementor-element), .editor-styles-wrapper .is-root-container) > :has(+ .wp-block-spacer) { margin-bottom: 0; }

:is(.aa-article, .editor-styles-wrapper) strong { font-weight: 600; }

/* ---- Links ----------------------------------------------------------------- */
:is(.aa-article, .editor-styles-wrapper) :is(p, li, figcaption, td, th, h2, h3, h4, summary, cite, dd) a:where(:not(.wp-block-button__link)) {
	color: var(--aa-ink);
	text-decoration-line: underline;
	text-decoration-color: var(--aa-orange);
	text-decoration-thickness: 2px;
	text-underline-offset: .22em;
	transition: color .15s, text-decoration-color .15s;
}
:is(.aa-article, .editor-styles-wrapper) :is(p, li, figcaption, td, th, h2, h3, h4, summary, cite, dd) a:where(:not(.wp-block-button__link)):is(:hover, :focus-visible) {
	color: var(--aa-brown);
	text-decoration-color: var(--aa-brown);
}
:is(.aa-article, .editor-styles-wrapper) a:focus-visible {
	outline: 3px solid var(--aa-orange);
	outline-offset: 3px;
	border-radius: 2px;
}

/* ---- Lists ----------------------------------------------------------------- */
:is(.aa-article, .editor-styles-wrapper) :is(ul, ol) { padding-left: 1.5em; }
:is(.aa-article, .editor-styles-wrapper) li { margin-bottom: .45em; padding-left: .2em; }
:is(.aa-article, .editor-styles-wrapper) li::marker { color: var(--aa-orange); font-weight: 700; }
:is(.aa-article, .editor-styles-wrapper) li > :is(ul, ol) { margin-top: .45em; margin-bottom: 0; }

/* ---- Quote (default) ------------------------------------------------------- */
:is(.aa-article, .editor-styles-wrapper) blockquote.wp-block-quote:not(.is-style-large) {
	margin-left: 0;
	margin-right: 0;
	padding: .2em 0 .2em 1.3em;
	border: 0;
	border-left: 3px solid var(--aa-rule);
	border-radius: 0;
	background: none;
	box-shadow: none;
	font-size: 1.125rem;
	font-style: italic;
	color: var(--aa-brown);
}
:is(.aa-article, .editor-styles-wrapper) .wp-block-quote p:last-of-type { margin-bottom: 0; }
:is(.aa-article, .editor-styles-wrapper) blockquote.wp-block-quote :is(p, p *) { color: inherit; }
:is(.aa-article, .editor-styles-wrapper) .wp-block-quote :is(cite, .wp-block-quote__citation) {
	display: block;
	margin-top: .8em;
	font-size: .85rem;
	font-style: normal;
	letter-spacing: .02em;
	color: var(--aa-muted);
}

/* ---- Figures, captions ------------------------------------------------------- */
:is(.aa-article, .editor-styles-wrapper) figure { margin-left: 0; margin-right: 0; }
:is(.aa-article, .editor-styles-wrapper) .wp-block-image img { display: block; max-width: 100%; height: auto; border-radius: 4px; }
:is(.aa-article, .editor-styles-wrapper) :is(figcaption, .wp-element-caption) {
	margin-top: .65em;
	margin-bottom: 0; /* core's .wp-block-image figcaption adds 1em, which pushed the credit line away from its caption */
	font-size: .85rem;
	line-height: 1.5;
	color: var(--aa-muted);
	text-align: left;
}

/* ---- Table (default) ------------------------------------------------------- */
:is(.aa-article, .editor-styles-wrapper) .wp-block-table {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	max-width: 100%;
}
:is(.aa-article, .editor-styles-wrapper) .wp-block-table table {
	border-collapse: collapse;
	width: 100%;
	min-width: 30em;
	font-size: .95rem;
	line-height: 1.5;
}
:is(.aa-article, .editor-styles-wrapper) .wp-block-table :is(th, td) {
	padding: .65em .9em;
	border: 0;
	border-bottom: 1px solid var(--aa-rule);
	text-align: left;
	vertical-align: top;
}
:is(.aa-article, .editor-styles-wrapper) .wp-block-table thead { border-bottom: 0; }
:is(.aa-article, .editor-styles-wrapper) .wp-block-table th {
	font-weight: 600;
	color: var(--aa-brown);
	border-bottom: 2px solid var(--aa-brown);
}

/* ---- Code ---------------------------------------------------------------- */
:is(.aa-article, .editor-styles-wrapper) code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: .88em;
	padding: .12em .4em;
	background: var(--aa-faint);
	border-radius: 4px;
	color: var(--aa-brown);
}
:is(.aa-article, .editor-styles-wrapper) pre {
	padding: 1.1em 1.3em;
	overflow-x: auto;
	background: var(--aa-brown);
	color: var(--aa-cream);
	border-radius: 6px;
	font-size: .9rem;
	line-height: 1.6;
}
:is(.aa-article, .editor-styles-wrapper) pre code { padding: 0; background: none; color: inherit; font-size: inherit; }

/* ---- Details, columns, embeds -------------------------------------------- */
:is(.aa-article, .editor-styles-wrapper) .wp-block-details {
	padding: .9em 1.2em;
	border: 1px solid var(--aa-rule);
	border-left: 4px solid var(--aa-orange);
	border-radius: 4px;
	background: #fff;
}
:is(.aa-article, .editor-styles-wrapper) .wp-block-details summary {
	cursor: pointer;
	font-weight: 600;
	color: var(--aa-brown);
}
:is(.aa-article, .editor-styles-wrapper) .wp-block-details[open] summary { margin-bottom: .7em; }
:is(.aa-article, .editor-styles-wrapper) .wp-block-details > :last-child { margin-bottom: 0; }
:is(.aa-article, .editor-styles-wrapper) .wp-block-columns { gap: 1.6rem 2rem; }
:is(.aa-article, .editor-styles-wrapper) .wp-block-column > :last-child { margin-bottom: 0; }
:is(.aa-article, .editor-styles-wrapper) .wp-block-embed iframe { max-width: 100%; }

/* Footnotes */
:is(.aa-article, .editor-styles-wrapper) .wp-block-footnotes {
	font-size: .88rem;
	color: var(--aa-muted);
	border-top: 1px solid var(--aa-rule);
	padding-top: 1em;
	margin-top: 2.4em;
}

/* ======================= BLOCK STYLES ======================================= */

/* core/quote - Pull quote */
:is(.aa-article, .editor-styles-wrapper) blockquote.wp-block-quote.is-style-aa-pull:not(.is-style-large) {
	position: relative;
	padding: .15em 0 .15em 1.5rem;
	border: 0;
	border-left: 6px solid var(--aa-orange);
	border-radius: 0;
	background: none;
	box-shadow: none;
	font-family: var(--aa-display);
	font-style: normal;
	font-size: 1.65rem;
	line-height: 1.3;
	color: var(--aa-brown);
	text-wrap: balance;
	margin-top: 2em;
	margin-bottom: 2em;
}
:is(.aa-article, .editor-styles-wrapper) .wp-block-quote.is-style-aa-pull p { font-family: inherit; font-size: inherit; line-height: inherit; margin-bottom: .4em; }
:is(.aa-article, .editor-styles-wrapper) .wp-block-quote.is-style-aa-pull :is(cite, .wp-block-quote__citation) {
	font-family: var(--aa-text);
	font-size: .8rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--aa-orange);
}

/* core/image - Framed: a cabinet-card frame with a hard orange shadow */
:is(.aa-article, .editor-styles-wrapper) .wp-block-image.is-style-aa-framed {
	box-sizing: border-box;
	width: fit-content;
	max-width: 100%;
	padding: 10px 10px 0;
	background: #fff;
	border: 2px solid var(--aa-brown);
	border-radius: 2px;
	box-shadow: 7px 7px 0 var(--aa-orange);
	margin-bottom: 2.2em;
}
:is(.aa-article, .editor-styles-wrapper) .wp-block-image.is-style-aa-framed img { border-radius: 0; margin-inline: auto; }
:is(.aa-article, .editor-styles-wrapper) .wp-block-image.is-style-aa-framed figcaption { padding: 0 2px 10px; }

/* core/image - Full bleed: edge to edge. The width is set above for
   .aa-article. In the editor the canvas already is the viewport. */
:is(.aa-article, .editor-styles-wrapper) .wp-block-image.is-style-aa-full-bleed { margin-top: 2.2em; margin-bottom: 2.2em; }
:is(.aa-article, .editor-styles-wrapper) .wp-block-image.is-style-aa-full-bleed img { width: 100%; max-height: 80vh; object-fit: cover; border-radius: 0; }
:is(.aa-article, .editor-styles-wrapper) .wp-block-image.is-style-aa-full-bleed figcaption {
	box-sizing: border-box;
	max-width: calc(var(--aa-measure) + 2 * var(--aa-gutter));
	margin-inline: auto;
	padding-inline: var(--aa-gutter);
}
.editor-styles-wrapper .wp-block-image.is-style-aa-full-bleed { width: 100%; max-width: none; }
/* Everything under the picture (caption, credit line) stays in the text column. */
.aa-article .wp-block-image.is-style-aa-full-bleed > :not(img):not(a) {
	box-sizing: border-box;
	max-width: calc(var(--aa-measure) + 2 * var(--aa-gutter));
	margin-inline: auto;
	padding-inline: var(--aa-gutter);
}

/* core/separator - default is a short centred rule */
:is(.aa-article, .editor-styles-wrapper) .wp-block-separator:not(.is-style-aa-pixel) {
	margin: 2.4em auto;
	border: 0;
	border-top: 2px solid var(--aa-rule);
	width: 100px;
	background: none;
}
/* core/separator - Pixel rule: a row of square pixels */
:is(.aa-article, .editor-styles-wrapper) .wp-block-separator.is-style-aa-pixel {
	width: 100%;
	max-width: 100%;
	height: 8px;
	margin: 2.6em auto;
	border: 0;
	opacity: 1;
	background: repeating-linear-gradient(90deg, var(--aa-orange) 0 8px, transparent 8px 20px);
	color: var(--aa-orange);
}

/* Buttons - default (square, brown) and AA pill (the look of the home page CTA) */
:is(.aa-article, .editor-styles-wrapper) .wp-block-buttons { display: flex; flex-wrap: wrap; gap: .8rem; }
:is(.aa-article, .editor-styles-wrapper) .wp-block-button .wp-block-button__link {
	display: inline-block;
	box-sizing: border-box;
	padding: .6em 1.2em;
	border: 0;
	border-radius: 4px;
	background: var(--aa-brown);
	color: #fff;
	font-family: var(--aa-display);
	font-size: .9rem;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background .15s;
}
:is(.aa-article, .editor-styles-wrapper) .wp-block-button .wp-block-button__link:is(:hover, :focus-visible) { background: var(--aa-orange); color: #fff; }
:is(.aa-article, .editor-styles-wrapper) .wp-block-button.is-style-aa-pill .wp-block-button__link {
	border-radius: 999px;
	background: var(--aa-orange);
	letter-spacing: normal;
}
:is(.aa-article, .editor-styles-wrapper) .wp-block-button.is-style-aa-pill .wp-block-button__link:is(:hover, :focus-visible) { background: var(--aa-brown); }

/* core/table - Striped: brown header, cream zebra. The wrapper scrolls on phones. */
:is(.aa-article, .editor-styles-wrapper) .wp-block-table.is-style-aa-striped table {
	border: 2px solid var(--aa-brown);
}
:is(.aa-article, .editor-styles-wrapper) .wp-block-table.is-style-aa-striped thead th {
	background: var(--aa-brown);
	color: var(--aa-cream);
	border-bottom: 0;
	font-family: var(--aa-display);
	font-weight: 400;
	letter-spacing: .03em;
}
:is(.aa-article, .editor-styles-wrapper) .wp-block-table.is-style-aa-striped :is(td, th) { border-bottom: 0; }
:is(.aa-article, .editor-styles-wrapper) .wp-block-table.is-style-aa-striped tbody tr:nth-child(odd) { background: #fff; }
:is(.aa-article, .editor-styles-wrapper) .wp-block-table.is-style-aa-striped tbody tr:nth-child(even) { background: var(--aa-faint); }

/* core/gallery - Grid: uniform 4:3 tiles */
:is(.aa-article, .editor-styles-wrapper) .wp-block-gallery.is-style-aa-grid {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr));
	gap: 14px;
}
:is(.aa-article, .editor-styles-wrapper) .wp-block-gallery.is-style-aa-grid > .wp-block-image {
	width: auto !important;
	max-width: none;
	margin: 0;
	flex: none;
}
:is(.aa-article, .editor-styles-wrapper) .wp-block-gallery.is-style-aa-grid > .wp-block-image img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 4px;
}

/* core/list - Checklist: orange square ticks, no icon-font dependency */
:is(.aa-article, .editor-styles-wrapper) :is(ul, ol).is-style-aa-checklist { list-style: none; padding-left: 0; }
:is(.aa-article, .editor-styles-wrapper) .is-style-aa-checklist > li {
	position: relative;
	padding-left: 2.1em;
}
:is(.aa-article, .editor-styles-wrapper) .is-style-aa-checklist > li::before {
	content: '';
	position: absolute;
	left: 0;
	top: .32em;
	width: 1.2em;
	height: 1.2em;
	box-sizing: border-box;
	border-radius: 3px;
	background: var(--aa-orange);
}
:is(.aa-article, .editor-styles-wrapper) .is-style-aa-checklist > li::after {
	content: '';
	position: absolute;
	left: .43em;
	top: .5em;
	width: .3em;
	height: .56em;
	border: solid #fff;
	border-width: 0 .14em .14em 0;
	transform: rotate(40deg);
}

/* core/paragraph - Drop cap */
:is(.aa-article, .editor-styles-wrapper) p.is-style-aa-dropcap::first-letter {
	float: left;
	margin: .06em .12em 0 0;
	font-family: var(--aa-display);
	font-size: 4.1em;
	line-height: .78;
	color: var(--aa-orange);
}

/* ---- Editor canvas ------------------------------------------------------- */
/* The classic theme gives the editor no layout, so build the column here. */
.editor-styles-wrapper .is-root-container > :not(.alignwide):not(.alignfull):not(.is-style-aa-full-bleed) {
	max-width: var(--aa-measure);
	margin-left: auto;
	margin-right: auto;
}
.editor-styles-wrapper .is-root-container > .alignwide { max-width: var(--aa-wide); margin-left: auto; margin-right: auto; }
.editor-styles-wrapper :is(p, li):not(#aa) { font-size: 1.0625rem; line-height: 1.75; }
.editor-styles-wrapper .edit-post-visual-editor__post-title-wrapper,
.editor-styles-wrapper .editor-visual-editor__post-title-wrapper { max-width: var(--aa-measure); margin-left: auto; margin-right: auto; }
.editor-styles-wrapper .editor-post-title { max-width: none; padding: 0; }
.editor-styles-wrapper :is(p, li, td, th, summary, figcaption, cite, .wp-block-paragraph) { font-family: var(--aa-text); }
.editor-styles-wrapper :is(.is-style-aa-pull, .is-style-aa-pull p) { font-family: var(--aa-display); }
.editor-styles-wrapper :is(h2, h3) { font-family: var(--aa-display); }
.editor-styles-wrapper { background: var(--aa-cream); }
.editor-styles-wrapper .editor-post-title__input,
.editor-styles-wrapper .wp-block-post-title {
	font-family: var(--aa-display);
	font-weight: 400;
	color: var(--aa-brown);
}

/* ---- Phone ------------------------------------------------------------- */
@media (max-width: 600px) {
	:is(.aa-article, .editor-styles-wrapper) h2 { font-size: 1.6rem; }
	:is(.aa-article, .editor-styles-wrapper) h3 { font-size: 1.32rem; }
	:is(.aa-article, .editor-styles-wrapper) .wp-block-quote.is-style-aa-pull { font-size: 1.35rem; padding-left: 1.1rem; }
	:is(.aa-article, .editor-styles-wrapper) .wp-block-image.is-style-aa-framed { box-shadow: 5px 5px 0 var(--aa-orange); }
}
@media (prefers-reduced-motion: reduce) {
	:is(.aa-article, .editor-styles-wrapper) * { transition: none !important; }
}