/* ============================================================
   BASE ELEMENT STYLES & HELPERS
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
/* overflow-x:hidden here was clipping content (including real photos, not
   just decorative bleed) invisible on some mobile browsers instead of just
   preventing a scrollbar — a page/post that genuinely doesn't fit the
   screen must be scrollable, not have parts of it silently disappear. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: auto; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-body-md);
  line-height: var(--lh-body);
  color: var(--text-body);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: auto;
  /* Long unbroken strings (URLs, file paths) in editor content default to
     forcing the page wider than the viewport; wrap them instead. */
  overflow-wrap: break-word;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--text-heading);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  margin: 0 0 0.5em;
}
h1 { font-size: var(--text-h1); letter-spacing: var(--ls-tight); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }
h4 { font-size: var(--text-h4); }

p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.3em; }

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; display: block; }
figure { margin: 0; }

strong, b { font-weight: var(--fw-bold); }

button, input, textarea, select { font-family: inherit; }
/* iOS Safari auto-zooms the whole page on focus of any text input under
   16px and does not zoom back out on its own — the page then appears
   "stuck" not filling the screen width until the visitor manually pinches
   back out. Floor every control at 16px on phones as a standing guard,
   regardless of what font-size an individual component sets. */
@media (max-width: 639px) {
  input, select, textarea { font-size: max(16px, 1em); }
}

:focus-visible { outline: none; box-shadow: var(--ring); }

::selection { background: var(--accent); color: #fff; }

.screen-reader-text {
  position: absolute !important;
  clip: rect(1px, 1px, 1px, 1px);
  width: 1px; height: 1px; overflow: hidden;
}

/* —— Layout helpers ———————————————————————————————————— */
.nwl-container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.nwl-container-narrow { max-width: var(--container-narrow); }

/* Vertical rhythm only (padding-block, not the padding shorthand): most
   sections carry BOTH .nwl-container and .nwl-section on one element, and
   the shorthand's horizontal "0" — declared after .nwl-container at equal
   specificity — used to wipe out the container's --gutter side padding.
   Desktop hid the bug (max-width centering still left outer margins) but
   on phones every section's text sat flush against the screen edge. */
.nwl-section { padding-block: var(--section-y); }
.nwl-section-tight { padding-block: clamp(1.75rem,3vw,2.75rem); }
/* Minimal breathing space — used around content that carries its own visual
   weight, e.g. pages whose body is one of the form shortcodes. */
.nwl-section-min { padding-block: 10px; }
/* A container nested inside another container (a form shortcode dropped into
   page/post content) must not re-apply the side gutter — the outer one
   already did, and doubling it visibly indented the form on wide screens. */
.nwl-container .nwl-container { padding-inline: 0; }
/* A section immediately follows another section that already contributed
   its own bottom padding (e.g. a form section stacked under another form,
   or optional page content appended after the templated sections) — without
   this, the two paddings simply add up into an oversized, often same-colour
   blank gap. Declared after .nwl-section/.nwl-section-tight so it wins the
   padding-top tie at equal specificity. */
.nwl-section--flush-top { padding-top: 0; }

.nwl-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: var(--text-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--accent);
}
.nwl-eyebrow::before { content:""; width: 34px; height: 2px; background: var(--accent); flex: none; }

.nwl-section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 28px;
}
.nwl-section-head--center { justify-content: center; text-align: center; flex-direction: column; align-items: center; }

.nwl-link-arrow {
  background: none; border: none; cursor: pointer; padding: 0;
  color: var(--link);
  font-family: var(--font-display); font-weight: 700; font-size: 15px;
  display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none;
}
.nwl-link-arrow svg { transition: transform var(--dur-fast) var(--ease-out); }
.nwl-link-arrow:hover svg { transform: translate(2px,-2px); }
.nwl-link-arrow:hover { text-decoration: none; color: var(--accent); }

.nwl-grid { display: grid; gap: var(--space-5); }
.nwl-grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); }
.nwl-grid-3 { grid-template-columns: repeat(auto-fit, minmax(230px,1fr)); }
.nwl-grid-4 { grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); }

.nwl-bg-warm  { background: var(--color-bg-warm); }
.nwl-bg-dark  { background: var(--surface-dark); color: #fff; }
.nwl-bg-accent{ background: var(--accent); }

.nwl-skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--surface-dark); color: #fff; padding: 12px 20px;
}
.nwl-skip-link:focus { left: 12px; top: 12px; }

/* —— Boxed page width (Theme Options → Layout & Behaviour) ————————
   Each direct child of <body> (utility bar, header, #content, footer,
   cookie banner) already paints its own full-width background, so simply
   capping and centering them here is enough to reveal the body's own
   background colour as a margin on wide screens — no per-template markup
   changes needed. Below --boxed-width it's a no-op, so mobile/tablet is
   untouched either way. */
body.tm-layout-boxed { background: var(--nwl-stone-200); }
body.tm-layout-boxed > *:not(#wpadminbar) { max-width: var(--boxed-width); margin-inline: auto; }

/* —— Overflow safety net for editor-entered content ————————————
   the_content() can contain elements the theme never sized: pasted HTML
   tables, <pre>/<code> blocks, raw iframes, and (the common real case)
   video-embed markup, whose wrapper <div>/<figure> often carries its own
   inline width — e.g. YouTube's classic embed code, or the block editor's
   .wp-block-embed__wrapper. Constraining just the img/video/iframe tag
   themselves isn't enough: the wrapper around them can still be wider than
   the viewport and drag the whole page sideways with it, even though it's
   never visibly clipped (see the overflow-x:auto note above) — every
   descendant gets capped so no nesting depth can smuggle an inline width
   past this. Scoped to .nwl-entry-content — the shared WYSIWYG wrapper used
   by every page, post and CPT template — so it never touches the theme's
   own UI markup. */
.nwl-entry-content, .nwl-entry-content * { max-width: 100%; }
.nwl-entry-content table { display: block; overflow-x: auto; }
.nwl-entry-content pre,
.nwl-entry-content code {
  overflow-x: auto;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}
.nwl-entry-content img,
.nwl-entry-content video,
.nwl-entry-content iframe,
.nwl-entry-content embed,
.nwl-entry-content object {
  height: auto;
}