/*
 * Astra compatibility layer.
 *
 * Astra ships its own typography and colour CSS, and a few of its rules beat the
 * design's. This file re-asserts the approved design, and nothing else.
 *
 * Each block below names the exact Astra selector it is countering, so the next
 * developer can tell what is here on purpose. Two principles:
 *
 *   1. Match Astra's specificity and win on source order (this file loads last)
 *      rather than escalating with !important. Only the body background needs a
 *      higher-specificity selector, because Astra targets it by class.
 *   2. Never out-specify the design's own utility classes. Everything here sits
 *      at element-level specificity, so .text-primary, .text-white, .text-3xl
 *      and friends still win, exactly as they do on the static site.
 *
 * Verified against https://bkstudio.co.za/nw/ with computed styles, not by eye.
 */

/* --------------------------------------------------------------------------
 * 1. Typeface
 *
 * Astra:  body, button, input, select, textarea, .ast-button, .ast-custom-button
 *         { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", ... }
 *
 * The design's font is set by Tailwind on `html`, which an explicit rule on
 * `body` overrides no matter what order the files load in - inheritance always
 * loses to a direct declaration. So it has to be re-stated here on `body`.
 * Form controls go back to inheriting, which is what the static site does.
 * -------------------------------------------------------------------------- */

body {
	font-family: Inter, system-ui, -apple-system, sans-serif;
}

button,
input,
select,
optgroup,
textarea,
.ast-button,
.ast-custom-button {
	font-family: inherit;
}

/* --------------------------------------------------------------------------
 * 2. Page background
 *
 * Astra:  .ast-plain-container, .ast-page-builder-template
 *         { background-color: var(--ast-global-color-4) }   /* #FFFFFF */
 *
 * That is a class selector, so it outranks the design's `body` rule. The theme
 * puts `sapa-nw` on <body>, which makes this one notch more specific again.
 * -------------------------------------------------------------------------- */

body.sapa-nw {
	background-color: #f7f9fc;
}

/* --------------------------------------------------------------------------
 * 3. Heading colour
 *
 * Astra:  h1, h2, h3, h4, h5, h6, .entry-content :where(h1, ... )
 *         { color: var(--ast-global-color-2) }
 *
 * In the design, headings have no colour of their own: they either carry a
 * utility (.text-primary, .text-white) or inherit from their section. Astra's
 * rule breaks that inheritance, which is why footer headings were rendering
 * slate instead of white.
 *
 * Element-level specificity, so every .text-* utility still wins.
 * -------------------------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {
	color: inherit;
}

/* --------------------------------------------------------------------------
 * 4. Links
 *
 * Astra:  a { color: var(--ast-global-color-0) }
 *
 * Tailwind's reset has links inherit their colour; the design then sets it with
 * utilities. Re-stated so Astra does not tint links the theme means to inherit.
 * -------------------------------------------------------------------------- */

a {
	color: inherit;
	text-decoration: inherit;
}

/* --------------------------------------------------------------------------
 * 5. Astra's form-control styling
 *
 * Astra:  input[type="text"], input[type="email"], ... , textarea
 *         { color: var(--ast-form-input-text); font-size: 16px;
 *           border-radius: 4px; padding: 12px 16px; ... }
 *
 * The design styles fields with its own .input class. These are the same
 * declarations, applied to the raw elements so a field without .input - a
 * Contact Form 7 field, a search box, a comment form - still looks right.
 * -------------------------------------------------------------------------- */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="search"],
input[type="date"],
input[type="password"],
select,
textarea {
	/*
	 * Deliberately no width here. The design sets width with its own .input
	 * class or a utility; forcing 100% would stretch the inline selects on the
	 * Events filter bar.
	 */
	padding: 0.75rem 1rem;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	color: #1c1c1c;
	background-color: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 0.5rem;
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/*
 * The approved design shows no focus ring at all on its fields, which leaves
 * keyboard users with nothing to follow. :focus-visible splits the difference:
 * pointer and touch users see exactly what the static site shows, keyboard
 * users get a ring in the design's own accent colour.
 */
input[type="text"]:focus-visible,
input[type="email"]:focus-visible,
input[type="tel"]:focus-visible,
input[type="url"]:focus-visible,
input[type="number"]:focus-visible,
input[type="search"]:focus-visible,
input[type="date"]:focus-visible,
input[type="password"]:focus-visible,
select:focus-visible,
textarea:focus-visible {
	border-color: #f17e21;
	outline: 2px solid transparent;
	outline-offset: 2px;
	box-shadow: 0 0 0 2px rgba(241, 126, 33, 0.35);
}

/* --------------------------------------------------------------------------
 * 6. Astra's button styling
 *
 * Astra:  .ast-button, .button, button, input[type="submit"] ...
 *         { background-color: var(--ast-global-color-0); border-radius: 2px;
 *           padding: 18px 30px; line-height: 1.85714 }
 *
 * Only true submit controls are restyled. Deliberately NOT every <button>: the
 * design uses bare buttons for the event filters, the FAQ accordion, the mobile
 * menu toggle and the membership wizard's own navigation, and those must keep
 * their utility classes rather than turn into navy pills.
 * -------------------------------------------------------------------------- */

input[type="submit"],
input[type="button"],
input[type="reset"],
button[type="submit"]:not(.btn) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.75rem 1.5rem;
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.5;
	color: #fff;
	background-color: #0b1f3b;
	border: 1px solid #0b1f3b;
	border-radius: 0.5rem;
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

input[type="submit"]:hover,
input[type="button"]:hover,
button[type="submit"]:not(.btn):hover {
	color: #fff;
	background-color: #162d4d;
	border-color: #162d4d;
}

/* The design's own buttons keep their own look. */
.btn,
.btn:hover,
.btn:focus {
	border-width: 0;
}

.btn-outline {
	border-width: 2px;
}

/* --------------------------------------------------------------------------
 * 7. Astra layout wrappers
 *
 * The design's sections are full-bleed and set their own max width, so Astra's
 * container padding would double up.
 * -------------------------------------------------------------------------- */

.sapa-nw-design .site-content,
.sapa-nw-design #content,
.sapa-nw-design .ast-container {
	max-width: none;
	padding: 0;
	margin: 0;
}

.sapa-nw-design .entry-content > :first-child {
	margin-top: 0;
}

/* Astra's "page title" block has no place in these templates. */
.sapa-nw-design .ast-archive-description,
.sapa-nw-design .entry-header.ast-no-title {
	display: none;
}

/* --------------------------------------------------------------------------
 * 8. Editor content inside a news article
 *
 * The design's article body is a plain `.space-y-5` stack of paragraphs, so it
 * carries no heading or list styling of its own. These rules cover the case
 * where an editor adds a subheading or a list to a post, without changing how
 * the paragraphs themselves render.
 * -------------------------------------------------------------------------- */

.sapa-nw article .space-y-5 h2,
.sapa-nw article .space-y-5 h3,
.sapa-nw article .space-y-5 h4 {
	color: var(--color-primary);
	font-weight: 600;
}

.sapa-nw article .space-y-5 h2 {
	font-size: 1.5rem;
	line-height: 1.875rem;
}

.sapa-nw article .space-y-5 h3 {
	font-size: 1.25rem;
	line-height: 1.75rem;
}

.sapa-nw article .space-y-5 ul,
.sapa-nw article .space-y-5 ol {
	padding-left: 1.5rem;
}

.sapa-nw article .space-y-5 ul {
	list-style: disc;
}

.sapa-nw article .space-y-5 ol {
	list-style: decimal;
}

.sapa-nw article .space-y-5 li + li {
	margin-top: 0.5rem;
}

.sapa-nw article .space-y-5 a {
	color: var(--color-secondary);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.sapa-nw article .space-y-5 strong {
	color: var(--color-text);
	font-weight: 600;
}

/* --------------------------------------------------------------------------
 * 9. Mobile
 *
 * The approved design is already responsive, and nothing here changes how it
 * looks at any width. These are the three places where a WordPress site can
 * behave worse than the static original.
 * -------------------------------------------------------------------------- */

/*
 * The static design caps the mobile menu panel at 500px, which fits the six
 * items it shipped with. A WordPress menu is editable, so a seventh or eighth
 * item would be silently clipped. Let the panel grow to the screen and scroll
 * if it ever needs to.
 */
.mobile-menu.open {
	max-height: min(80vh, 1200px);
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
}

/* Editor-authored tables scroll rather than forcing the page sideways. */
.prose-sapa table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
}

@media (max-width: 767px) {
	/* A long unbroken string - a URL in a post - must not widen the page. */
	.prose-sapa,
	.space-y-5 {
		overflow-wrap: break-word;
		word-wrap: break-word;
	}

	/*
	 * Astra's sticky-header padding is meant for its own header, which this
	 * theme replaces, so it would add a gap above the hero.
	 */
	.sapa-nw-design .ast-sticky-shrunk,
	.sapa-nw-design #ast-fixed-header {
		display: none;
	}
}

/*
 * Give every interactive control a comfortable touch target. The design's own
 * buttons already clear this; these are the smaller ones WordPress adds.
 */
@media (pointer: coarse) {
	.page-numbers a,
	.page-numbers span.current,
	.sapa-nw .search-form .search-submit {
		min-height: 44px;
		min-width: 44px;
	}
}