/*
 * Neighbour Dispute Lawyers — the Theme Builder blog templates.
 *
 * A FOURTH STYLESHEET, AND IT HAS TO BE ITS OWN.
 *
 * ndl-blog.css styles the PHP renderer's markup — article-prose,
 * blog-card, blog-feature — and shares not one class with the documents
 * Elementor Pro serves. On the live pilot that meant the article rendered with
 * none of its rules and nothing said so, because the stylesheet was enqueued
 * and simply had nothing to match.
 *
 * WHAT THIS DOES NOT DO
 *
 * It sets nothing a widget control sets. Every size, colour and weight the
 * editor can reach is left to the editor, because Elementor writes those as
 * per-element rules with four classes of specificity and a stylesheet that
 * fights them loses quietly. What is here is the geometry between widgets, and
 * the inside of the article body — headings, lists, quotes and links the
 * AUTHOR writes, which no control reaches because they are not widgets.
 */

/* ----------------------------------------------------------- the column */
/*
 * ONE MEASURE FOR THE WHOLE ARTICLE — AND IT IS THE WIDGETS THAT GET IT.
 *
 * The head band is boxed at 1160 and the body at 760, so the title and the
 * hero sat wider than the words under them and the eye had two left edges to
 * choose from. The containers are left alone: they are live, and a boxed_width
 * is a control somebody may have set deliberately.
 *
 * THE FIRST VERSION OF THIS RULE MADE IT WORSE, and measuring the real page is
 * what found it. The markup is
 *
 *   .ndl-blog-head > .e-con (padding 32px) > .e-con-inner > widgets
 *
 * so `> *` matched that padded container and clamped IT to 760. Its own
 * padding then came out of the 760, leaving the title and hero at 696 against
 * the prose's 760 — narrower than before, and shifted 32px to the right. A
 * container with padding is not interchangeable with the thing inside it.
 *
 * So the measure goes on the WIDGETS, at whichever depth this document puts
 * them. Their container keeps its padding and its width, and nothing about the
 * document changes.
 */
.ndl-blog-head > .e-con > .e-con-inner > .elementor-widget,
.ndl-blog-head > .e-con > .e-con-inner > .elementor-element,
.ndl-blog-head > .e-con-inner > .elementor-widget,
.ndl-blog-head > .e-con-inner > .elementor-element,
.ndl-blog-head > .elementor-widget {
	max-width: 760px;
	margin-inline: auto;
	width: 100%;
}

/* ------------------------------------------------------------- the hero */
/*
 * A DECIDED RATIO INSTEAD OF WHATEVER THE FILE IS.
 *
 * The ratio is per brand, because it is a design decision and this file is
 * shared by thirteen of them. 3:2 is the default -- wide enough to read as a
 * hero, short enough that the first paragraph is still above the fold on a
 * laptop. Lawyers of Sydney is reviewed and set to 16:9. A brand nobody has
 * looked at keeps the default rather than silently taking another brand's
 * review. The image keeps its own alt text and its own attachment; only the
 * box changes, and object-fit: cover is what stops it distorting to fill one.
 */
.ndl-blog-hero img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	object-position: 50% 50%;
}

@media (max-width: 767px) {
	/*
	 * A phone is the one width where a wide crop stops being a hero and starts
	 * being a letterbox: 16 / 9 at 360px is 202px tall. A brand whose mobile
	 * ratio equals its desktop one gets the same number twice here, which is
	 * exactly what it asked for and costs nothing.
	 */
	.ndl-blog-hero img { aspect-ratio: 4 / 3; }
}

/* ------------------------------------------------------- the article body */
/*
 * THE HEADINGS INSIDE THE BODY.
 *
 * These are written by whoever wrote the article. No widget control reaches
 * them, so if this file does not set them they inherit the theme's defaults
 * and an article ends up in a different voice from the page it sits on.
 */
.ndl-blog-prose h2,
.ndl-blog-prose h3,
.ndl-blog-prose h4 {
	font-family: "Lora", Georgia, "Times New Roman", serif;
	font-weight: 600;
	line-height: 1.2;
	color: var(--ndl-base, rgba(33, 76, 61, 1));
}

.ndl-blog-prose h2 { font-size: 1.6rem; margin: 2.2em 0 0.6em; }
.ndl-blog-prose h3 { font-size: 1.25rem; margin: 1.9em 0 0.5em; }
.ndl-blog-prose h4 { font-size: 1.1rem; margin: 1.6em 0 0.4em; }
.ndl-blog-prose > *:first-child { margin-top: 0; }

.ndl-blog-prose p { margin: 0 0 1.15em; }
.ndl-blog-prose ul,
.ndl-blog-prose ol { margin: 0 0 1.3em; padding-left: 1.35em; }
.ndl-blog-prose li { margin: 0 0 0.45em; }
.ndl-blog-prose li::marker { color: #6A7A66; }

.ndl-blog-prose blockquote {
	margin: 1.8em 0;
	padding: 0 0 0 1.1em;
	border-left: 3px solid #6A7A66;
	font-style: normal;
}

/*
 * Links in the body are underlined. A colour difference alone is not a link
 * for a reader who cannot see the difference, and inside a paragraph there is
 * no other cue that something is clickable.
 */
.ndl-blog-prose a {
	color: var(--ndl-sage-fill, #6A7A66);
	text-decoration: underline;
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1px;
}
.ndl-blog-prose a:hover,
.ndl-blog-prose a:focus-visible { text-decoration-thickness: 2px; }

.ndl-blog-prose img {
	max-width: 100%;
	height: auto;
	display: block;
	margin: 1.6em auto;
}

/* ------------------------------------------------- the archive loop */
/*
 * The loop widget draws its own cards and its own controls own their type.
 * What it does not own is the gap between the cards and the page around them,
 * which is what this sets.
 */
.ndl-blog-loop .elementor-posts-container,
.ndl-blog-archive-loop .elementor-posts-container {
	gap: 28px;
}

.ndl-blog-loop article,
.ndl-blog-archive-loop article {
	background: #FFFFFF;
	border: 1px solid rgba(33, 76, 61, 0.12);
}

.ndl-blog-loop article:focus-within,
.ndl-blog-archive-loop article:focus-within {
	outline: 2px solid #6A7A66;
	outline-offset: 2px;
}

/* ----------------------------------------- the inside of an archive card ----
 *
 * THE BOX IS DRAWN HERE, SO THE INSET BELONGS HERE.
 *
 * The two rules above give every card a white ground and a 1px border -- so the
 * card is a CSS object, not an Elementor one -- and left its contents flush
 * against that border. Elementor's Classic skin does not pad
 * .elementor-post__text, because in the skin's own design there is no box to
 * pad away from. Measured on Civil's archive: no inset at all, and a computed
 * title line-height of 23.1px on a 22px font, which touches the date below it.
 *
 * What is NATIVE stays native. The image ratio and the title and date
 * line-heights are controls on the archive-posts widget, and each brand's own
 * guarded plan sets them; nothing here touches type size, colour or ratio.
 *
 * SELECTORS, FROM AN OBSERVED DOM RATHER THAN FROM THE SKIN'S REPUTATION:
 *   .elementor-widget-archive-posts.elementor-grid-3 (tablet-2, mobile-1)
 *     article.elementor-post
 *       a.elementor-post__thumbnail__link > .elementor-post__thumbnail.elementor-fit-height > img
 *       .elementor-post__text
 *         h3.elementor-post__title / div.elementor-post__meta-data
 *         div.elementor-post__excerpt / a.elementor-post__read-more
 *
 * WHY SOME SELECTORS ARE DOUBLED AND OTHERS ARE NOT, measured rather than
 * decided: with a single class the padding on __text applied (20/22/22 on the
 * live archive) and four margins did NOT -- the thumbnail link computed
 * Elementor's 20px, the title 0, the meta 13px and the excerpt 10px. Elementor
 * Pro loads its posts widget CSS when the widget renders, which is after this
 * sheet, so a one-class-to-one-class tie is decided by document order and this
 * sheet loses it. The class is repeated on the rules that lost, which makes
 * them 0,3,0 and settles the cascade on specificity instead. No !important:
 * this has to stay overridable by a brand's own later sheet, and the doubled
 * selector is the same device the v3 reduced-motion block uses.
 */

.ndl-blog-loop article.elementor-post,
.ndl-blog-archive-loop article.elementor-post {
	/* The image is flush to the border, so its corners have to be clipped by
	   the same box that draws the border. */
	overflow: hidden;
}

.ndl-blog-loop .elementor-post__text,
.ndl-blog-archive-loop .elementor-post__text {
	padding: 20px 22px 22px;
}

/* The four that lost the tie. */
.ndl-blog-loop.ndl-blog-loop .elementor-post__thumbnail__link,
.ndl-blog-archive-loop.ndl-blog-archive-loop .elementor-post__thumbnail__link {
	/* Elementor spaces the thumbnail from the text with 20px. The text now
	   carries its own top padding, and two gaps read as a mistake. */
	margin-bottom: 0;
}

.ndl-blog-loop.ndl-blog-loop .elementor-post__title,
.ndl-blog-archive-loop.ndl-blog-archive-loop .elementor-post__title {
	margin: 0 0 8px;
	/* A long unbroken word in a title is rare, and it is not worth a horizontal
	   scrollbar on a 320px card. */
	overflow-wrap: break-word;
}

.ndl-blog-loop.ndl-blog-loop .elementor-post__meta-data,
.ndl-blog-archive-loop.ndl-blog-archive-loop .elementor-post__meta-data {
	margin: 0 0 12px;
}

.ndl-blog-loop.ndl-blog-loop .elementor-post__excerpt,
.ndl-blog-archive-loop.ndl-blog-archive-loop .elementor-post__excerpt {
	margin: 0 0 14px;
}

/* Not measured, and doubled for the same reason: the read-more sits in the same
   stack as the four above, so if Elementor sets a margin on it this sheet would
   lose that tie too, silently, and the card would be the one thing still out. */
.ndl-blog-loop.ndl-blog-loop .elementor-post__excerpt p,
.ndl-blog-archive-loop.ndl-blog-archive-loop .elementor-post__excerpt p {
	margin: 0;
}

.ndl-blog-loop.ndl-blog-loop .elementor-post__read-more,
.ndl-blog-archive-loop.ndl-blog-archive-loop .elementor-post__read-more {
	display: inline-block;
	margin: 0;
}

/*
 * A 320px card. The grid is already one column at mobile from the widget's own
 * setting -- elementor-grid-mobile-1 is in the DOM -- so this is only the
 * inset: 20px each side of 320 leaves 280 for the words, and the bottom loses
 * 2px so the card does not read as bottom-heavy once the read-more takes its
 * own line.
 */
@media (max-width: 480px) {
	.ndl-blog-loop .elementor-post__text,
	.ndl-blog-archive-loop .elementor-post__text {
		padding: 18px 20px 20px;
	}
}

/* ------------------------------------------------- contextual navigation */
/*
 * The way on from an article. It is the enquiry band's own button, which is a
 * real widget with real controls -- this only makes sure it reads as the next
 * step rather than as decoration, and that a keyboard lands on it visibly.
 */
.ndl-blog-body + .ndl-v3-enquiry { margin-top: 0; }

.ndl-v3-btn a:focus-visible,
.ndl-blog-prose a:focus-visible {
	outline: 2px solid #6A7A66;
	outline-offset: 3px;
}

/*
 * Printing an article: the enquiry band is a call to action on paper nobody
 * can act on, and the hero costs a page of ink.
 */
@media print {
	.ndl-v3-enquiry, .ndl-blog-hero { display: none; }
	.ndl-blog-prose a { text-decoration: underline; }
	.ndl-blog-prose a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; }
}