/*
 * WordPress-specific styling: prose, cards, pagination, search form, and the
 * Elementor defaults that appear inside a Theme Builder header or footer.
 *
 * Everything in here is theme-only — the widgets plugin does NOT ship a fallback
 * copy, because none of it is needed to render a widget.
 *
 * Depends on tokens.css + core.css + chrome.css.
 */

/* =====================================================================
 * PROSE
 * ================================================================== */

/*
 * ── THE READING MEASURE GOES ON THE CONTAINER, NEVER ON ITS CHILDREN ──
 *
 * Helios declared it per child (`> p, > ul, > h3, > blockquote { max-width: 66ch }`)
 * with the container uncapped, so anything off that list escaped it — and `h2` was
 * off it. Measured in an 834px column: headings and figures ended 182px further
 * right than every paragraph, which reads as the paragraphs being sunken in.
 * `blockquote` was ON the list and still escaped, because `66ch` resolves against
 * its own larger font-size.
 *
 * One cap on the container fixes both and cannot be opted out of. `margin-inline: 0`
 * is required with it, or the prose column centres itself and stops lining up with
 * the title above.
 */
.ntw-prose { max-width: 68ch; margin-inline: 0; }
.ntw-prose > * + * { margin-top: 1.1em; }
.ntw-prose :is(h2, h3, h4) { margin-top: 2em; font-family: var(--f-display); font-weight: 500; letter-spacing: -.02em; }
.ntw-prose h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); }
.ntw-prose h3 { font-size: 1.28rem; }
.ntw-prose p, .ntw-prose li { color: var(--mist-dim); }
.ntw-prose a { color: var(--green); text-decoration: underline; text-underline-offset: 3px; }
.ntw-prose a:hover { color: var(--mist); }
.ntw-prose :is(ul, ol) { padding-left: 1.3em; }
.ntw-prose li + li { margin-top: .5em; }
.ntw-prose blockquote {
	margin: 2em 0; padding: 0 0 0 24px; border-left: 2px solid var(--green);
	font: 500 1.2rem/1.5 var(--f-display); color: var(--mist);
}
.ntw-prose :is(img, figure) { border-radius: var(--r); overflow: hidden; }
.ntw-prose figcaption { margin-top: 10px; font-size: 13px; color: var(--mist-faint); }
.ntw-prose code {
	padding: 2px 6px; border-radius: 5px; background: var(--ink-3);
	font-size: .92em; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.ntw-prose table { width: 100%; border-collapse: collapse; font-size: 15px; }
.ntw-prose :is(th, td) { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: left; }
.ntw-prose th { color: var(--mist); font-weight: 500; }

/* =====================================================================
 * CARDS
 * ================================================================== */

.ntw-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 28px; }

.ntw-pcard {
	border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
	background: var(--ink-2);
	transition: border-color .3s, transform .4s var(--ease);
}
.ntw-pcard:hover { border-color: var(--line-2); transform: translateY(-4px); }
.ntw-pcard__link { display: block; height: 100%; }
.ntw-pcard__thumb { aspect-ratio: 4 / 3; overflow: hidden; }
.ntw-pcard__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.ntw-pcard:hover .ntw-pcard__thumb img { transform: scale(1.04); }
.ntw-pcard__body { padding: 22px; }
.ntw-pcard__meta { margin: 0 0 8px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--mist-faint); }
.ntw-pcard__body p { margin: 0; font-size: 14.5px; color: var(--mist-dim); }

.ntw-article__cover { margin: 0; }
.ntw-article__cover img { width: 100%; max-height: 62vh; object-fit: cover; }

/* =====================================================================
 * PAGINATION & SEARCH
 * ================================================================== */

.ntw-sec .navigation.pagination { margin-top: 56px; }
.nav-links { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.page-numbers {
	display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 12px;
	border: 1px solid var(--line-2); border-radius: 999px;
	font-size: 14px; color: var(--mist-dim); transition: background .25s, color .25s, border-color .25s;
}
a.page-numbers:hover { border-color: var(--mist); color: var(--mist); }
.page-numbers.current { background: var(--green-btn); border-color: var(--green-btn); color: #fff; }
.screen-reader-text {
	position: absolute; width: 1px; height: 1px; overflow: hidden;
	clip: rect(0 0 0 0); white-space: nowrap;
}

.search-form { display: flex; gap: 8px; }
.search-form label { flex: 1; }
.search-form :is(input[type="search"], .search-field) {
	width: 100%; min-height: 48px; padding: 0 16px;
	/*
	 * 2px, not the design system's pill: a pill-shaped text field reads as a button
	 * and people do not type in it. Form fields are the one documented exception to
	 * the pill rule.
	 */
	border-radius: 2px; border: 1px solid var(--line-2);
	background: var(--ink-2); color: var(--mist); font: 400 15px/1.4 var(--f-body);
}
.search-form ::placeholder { color: var(--mist-faint); }
.search-form :is(input[type="submit"], .search-submit) {
	min-height: 48px; padding: 0 20px; border: 0; border-radius: 999px;
	background: var(--green-btn); color: #fff; font: 500 15px/1 var(--f-body); cursor: pointer;
}
.search-form :is(input[type="submit"], .search-submit):hover { background: var(--green-btn-hot); }

/* =====================================================================
 * ELEMENTOR DEFAULTS INSIDE A THEME BUILDER HEADER / FOOTER
 *
 * A client who adds a core Elementor nav-menu or button to the header template
 * gets Elementor's own accent colour, not NTWOOD's. Retinting it here is cheaper
 * than telling them not to.
 *
 * ── THE LITERALS ARE DELIBERATE ──
 *
 * `#E9EDE6` rather than `var(--mist)` inside the footer block below. There is only
 * one palette on this site today, so they are the same value — but a second palette
 * is exactly when a semantic token inverts and puts dark type on a dark band.
 * Helios hit that on its footer. A literal cannot invert.
 * ================================================================== */

:is(.elementor-location-header, .elementor-location-footer) .elementor-nav-menu a {
	color: var(--mist-dim); font-size: 14px; letter-spacing: .04em;
}
:is(.elementor-location-header, .elementor-location-footer) .elementor-nav-menu a:hover,
:is(.elementor-location-header, .elementor-location-footer) .elementor-nav-menu a.elementor-item-active {
	color: #E9EDE6;
}
:is(.elementor-location-header, .elementor-location-footer) .elementor-item-active::after,
:is(.elementor-location-header, .elementor-location-footer) .e--pointer-underline .elementor-item::after {
	background-color: var(--green) !important;
}
:is(.elementor-location-header, .elementor-location-footer) .elementor-button {
	background-color: var(--green-btn); color: #fff; border-radius: 999px;
}
:is(.elementor-location-header, .elementor-location-footer) .elementor-button:hover { background-color: var(--green-btn-hot); }

/*
 * Padding on an Elementor wrapper sits OUTSIDE the sticky bar and shows as a gap
 * once scrolled, and an ancestor with `overflow: hidden` cancels `position: sticky`
 * silently. Both are neutralised, header and footer only.
 */
:is(.elementor-location-header, .elementor-location-footer) :is(.elementor-section, .elementor-container, .elementor-column, .elementor-widget-wrap, .e-con, .e-con-inner) {
	padding: 0; overflow: visible;
}

/* =====================================================================
 * MISC
 * ================================================================== */

.ntw-page__built { /* an Elementor-built page supplies its own section padding */ }
.ntw-canvas { background: var(--ink); }