/* ===========================================================
   Northem Capital — supplemental block styling
   (theme.json handles color/type tokens; this file handles
   layout patterns theme.json can't express: grids, bordered
   dividers, the sticky header, hero gradients, cards, etc.)
   =========================================================== */

:root{
  --nc-maxw: 1240px;
  /* Fluid instead of a hard breakpoint jump, so side spacing shrinks
     smoothly as the window narrows instead of text sitting flush
     against the edge right before the 720px cutoff. */
  --nc-pad: clamp(20px, 4vw, 40px);
}

body{ background: var(--wp--preset--color--cream); }

/* Every content section is a constrained-width group that only ever
   had explicit top/bottom padding set (the left/right spacing was
   assumed to come from WordPress's layout system) — but a constrained
   group only ever gets a max-width + auto margins, never its own side
   padding. Above ~1280px that's invisible (the auto margins already
   exceed what padding would add), which is why it looked fine at full
   width, but the moment the window narrows past that the text runs
   straight to the edge. Give every such section the same fluid side
   padding the hero sections already use. */
.wp-block-group.is-layout-constrained{
  padding-left: var(--nc-pad);
  padding-right: var(--nc-pad);
  box-sizing: border-box;
}

/* WordPress inserts a default ~24px root block-gap between EVERY
   top-level flow block (between each section inside <main>, and
   between <main> and the footer). Every section already carries its
   own deliberate padding, so this extra margin only ever shows up as
   an unwanted sliver of cream wherever two sections should read as
   one continuous band (e.g. a dark panel running into the dark CTA
   band, or the CTA band into the footer). Zero it out everywhere and
   let each section's own padding be the only source of spacing. */
main + .wp-block-template-part{ margin-top: 0; }
main.wp-block-group{ margin-top: 0 !important; }
main.wp-block-group > *{ margin-top: 0 !important; }

.nc-eyebrow{
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0 0 8px;
}

.nc-rule{
  width: 42px;
  height: 1px;
  border: 0;
  background: var(--wp--preset--color--ink);
  opacity: 1;
  margin: 22px 0 0;
}

/* ---------- buttons ---------- */
.nc-btn .wp-block-button__link{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: 0;
}
/* The contact form's submit is a real <button>, which carries the
   browser's native appearance (grey fill, inset/outset border) behind
   our styled inner span — reset it so only the span's styling shows. */
.nc-contact-form button[type="submit"]{
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  cursor: pointer;
}
.nc-btn-solid .wp-block-button__link{
  background: var(--wp--preset--color--text);
  color: var(--wp--preset--color--text-on-ink);
  border-color: var(--wp--preset--color--text);
}
.nc-btn-solid .wp-block-button__link:hover{
  background: #3c3b34;
  border-color: #3c3b34;
}
.nc-btn-outline-ink .wp-block-button__link{
  border-color: rgba(243,241,234,0.4);
  color: var(--wp--preset--color--text-on-ink);
  background: rgba(243,241,234,0.10);
  transition: background-color .2s ease, border-color .2s ease;
}
.nc-btn-outline-ink .wp-block-button__link:hover{
  background: rgba(243,241,234,0.22);
  color: var(--wp--preset--color--text-on-ink);
  border-color: rgba(243,241,234,0.6);
}

/* =========================================================
   Header
   ========================================================= */
/* position:fixed instead of sticky — sticky silently stops working the
   moment ANY ancestor (added by another plugin, a page builder wrapper,
   etc.) sets overflow to anything but visible, which is common enough on
   real sites that fixed + a JS-measured body offset is the safer choice. */
body{ padding-top: var(--nc-header-h, 85px); }
.site-header{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 100;
  background: rgba(240,238,228,0.92);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--wp--preset--color--border);
  padding-left: var(--nc-pad);
  padding-right: var(--nc-pad);
}
.admin-bar .site-header{ top: 32px; }
@media screen and (max-width: 782px){
  .admin-bar .site-header{ top: 46px; }
}
.nc-nav-row{
  padding-top: 20px;
  padding-bottom: 20px;
  gap: 24px;
  align-items: center;
}
.nc-nav-left{
  gap: 24px;
  align-items: center;
  flex: 1;
  min-width: 0;
}
.nc-logo.wp-block-site-title a,
.nc-logo.wp-block-site-title{
  color: var(--wp--preset--color--ink) !important;
  text-decoration: none;
  font-weight: 600;
}
/* Logo image replaces the text; the text stays in the DOM for screen readers. */
.nc-logo.wp-block-site-title{ margin: 0; line-height: 0; flex: none; }
.nc-logo.wp-block-site-title a{
  display: block;
  width: 34px;
  height: 43px;
  background: url("../img/logo-mark.png") no-repeat left center / contain;
  font-size: 0 !important;
  color: transparent !important;
}
@media (max-width: 720px){
  .nc-logo.wp-block-site-title a{ width: 28px; height: 35px; }
  .nc-nav-row, .nc-nav-left{ gap: 16px; }
  .nc-nav-cta .wp-block-button__link{ padding: 10px 14px; font-size: 11px; }
}
.nc-nav-divider{
  display: inline-block;
  width: 1px;
  height: 22px;
  background: #26251f;
  flex: none;
}
.nc-primary-nav{
  justify-content: flex-start;
  align-items: center;
}
.nc-primary-nav .wp-block-navigation-item a{
  color: var(--wp--preset--color--text);
  font-size: 13.5px;
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 1px solid transparent;
  line-height: 1;
}
.nc-primary-nav .wp-block-navigation-item a:hover{
  border-color: var(--wp--preset--color--border);
}
.nc-primary-nav .wp-block-navigation__responsive-container.is-menu-open{
  background: var(--wp--preset--color--cream);
}
.nc-nav-cta .wp-block-button__link{ padding: 12px 20px; }

/* =========================================================
   Landing hero (cover block)
   ========================================================= */
.nc-hero-landing.wp-block-cover{
  border-radius: 0;
}
.nc-hero-landing.wp-block-cover{
  align-items: center !important;
  justify-content: flex-start !important;
}
.nc-hero-landing .wp-block-cover__inner-container{
  max-width: var(--nc-maxw);
  width: 100%;
  margin: 0 auto;
  padding: 140px var(--nc-pad) 90px;
  text-align: left !important;
  align-items: flex-start !important;
}
/* Only the homepage hero (nc-hero-landing alone) gets the tight 11ch
   heading wrap — interior-page heroes (which also carry nc-hero-split)
   were unintentionally inheriting this too, wrapping their headings
   far more than intended and making each page's hero a different,
   inconsistent height. */
.nc-hero-landing:not(.nc-hero-split) h1{ max-width: 11ch; }
@media (max-width: 720px){
  .nc-hero-landing .wp-block-cover__inner-container{ padding: 110px var(--nc-pad) 60px; }
  .nc-hero-landing .wp-block-cover__background{
    background-image: linear-gradient(0deg, #2a453d 0%, #2a453d 42%, rgba(42,69,61,0.85) 62%, rgba(42,69,61,0.45) 80%, rgba(42,69,61,0.2) 100%) !important;
    opacity: 1 !important;
  }
}
@media (max-width: 480px){
  .nc-hero-landing h1{ max-width: none; }
}

/* =========================================================
   Feature grid (3up, bordered)
   ========================================================= */
.nc-feature-grid{
  display: flex !important;
  margin-top: 40px !important;
  border-top: 1px solid var(--wp--preset--color--border);
  padding-top: 32px;
}
.nc-feature-grid > .wp-block-column{
  border-left: 1px solid var(--wp--preset--color--border);
  padding-left: 28px !important;
}
.nc-feature-grid > .wp-block-column:first-child{
  border-left: 0;
  padding-left: 0 !important;
}
@media (max-width: 720px){
  .nc-feature-grid{ flex-direction: column; }
  .nc-feature-grid > .wp-block-column{ border-left: 0; border-top: 1px solid var(--wp--preset--color--border); padding: 24px 0 0 !important; }
  .nc-feature-grid > .wp-block-column:first-child{ border-top: 0; }
}

/* =========================================================
   Media-text photo panels (dark, full-bleed)
   ========================================================= */
.nc-panel-photo.wp-block-media-text{
  padding: 0;
  min-height: 440px;
  align-items: stretch;
}
.nc-panel-photo .wp-block-media-text__content{
  padding: 60px var(--nc-pad);
  align-self: center;
}
.nc-panel-photo .wp-block-media-text__media{
  height: 100%;
}
.nc-panel-photo .wp-block-media-text__media img{
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
}
@media (max-width: 780px){
  .nc-panel-photo.wp-block-media-text{ grid-template-columns: 1fr !important; }
  .nc-panel-photo .wp-block-media-text__media{ grid-row: 1; }
  .nc-panel-photo .wp-block-media-text__content{ grid-row: 2; padding: 48px var(--nc-pad); }
}

/* =========================================================
   Stats row
   ========================================================= */
.nc-stats-band .wp-block-cover__inner-container{
  max-width: var(--nc-maxw);
  width: 100%;
  margin: 0 auto;
  padding-left: var(--nc-pad);
  padding-right: var(--nc-pad);
  box-sizing: border-box;
}
.nc-stats{
  display: flex !important;
  margin-top: 40px !important;
  border-top: 1px solid var(--wp--preset--color--border);
}
.nc-stats > .wp-block-column{
  text-align: center;
  padding: 30px 16px !important;
  border-left: 1px solid var(--wp--preset--color--border);
}
.nc-stats > .wp-block-column:first-child{ border-left: 0; }
@media (max-width: 720px){
  .nc-stats{ flex-wrap: wrap; }
  .nc-stats > .wp-block-column{ flex-basis: 50% !important; }
}

/* =========================================================
   CTA band — now a split hero-style cover (see .nc-hero-split
   rules above, which .nc-cta-band shares via the nc-hero-landing
   class); nothing section-specific needed beyond that.
   ========================================================= */

/* =========================================================
   Split hero (interior pages) — Cover block, image right
   ========================================================= */
.nc-hero-split.wp-block-cover .wp-block-cover__inner-container{
  max-width: var(--nc-maxw);
  margin: 0 auto;
  width: 100%;
  padding: 90px var(--nc-pad);
  text-align: left;
}
/* A consistent text-column width (instead of each element wrapping
   against the full inner-container width) so headings/paragraphs of
   different lengths still wrap to a similar number of lines, keeping
   every interior-page hero close to the same natural height. */
.nc-hero-split .wp-block-cover__inner-container > *{ max-width: 540px; }
.nc-hero-split .wp-block-cover__inner-container > h1,
.nc-hero-split .wp-block-cover__inner-container > h2{ max-width: 640px; }
.nc-hero-split .nc-hero-split-text{ max-width: 46%; }
@media (max-width: 780px){
  .nc-hero-split .nc-hero-split-text{ max-width: 100%; }
}

/* =========================================================
   Steps (numbered process, 4up)
   ========================================================= */
.nc-steps{
  display: flex !important;
  margin-top: 40px !important;
  border-top: 1px solid var(--wp--preset--color--border);
}
.nc-steps > .wp-block-column{
  border-left: 1px solid var(--wp--preset--color--border);
  padding: 28px 24px 0 24px !important;
}
.nc-steps > .wp-block-column:first-child{ border-left: 0; padding-left: 0 !important; }
.nc-steps .nc-step-num{
  font-family: var(--wp--preset--font-family--serif);
  font-size: 22px;
  color: var(--wp--preset--color--text-muted);
  display: block;
  margin-bottom: 10px;
}
@media (max-width: 880px){
  .nc-steps{ flex-wrap: wrap; }
  .nc-steps > .wp-block-column{ flex-basis: 50% !important; }
}
@media (max-width: 560px){
  .nc-steps > .wp-block-column{ flex-basis: 100% !important; border-left: 0 !important; border-top: 1px solid var(--wp--preset--color--border); padding-left: 0 !important; }
  .nc-steps > .wp-block-column:first-child{ border-top: 0; }
}

/* =========================================================
   Card grid (capabilities)
   ========================================================= */
.nc-card-grid{
  display: flex !important;
  flex-wrap: wrap !important;
  margin-top: 40px !important;
  gap: 1px !important;
  background: var(--wp--preset--color--border);
  border: 1px solid var(--wp--preset--color--border);
}
.nc-card-grid > .wp-block-column{
  flex: 1 1 0 !important;
  background: var(--wp--preset--color--cream);
  margin: 0 !important;
  padding: 0 !important;
}
.nc-card-grid .nc-card-media{ aspect-ratio: 4/3; overflow: hidden; }
.nc-card-grid .nc-card-media img{ width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.nc-card-grid .wp-block-column:hover .nc-card-media img{ transform: scale(1.06); }
.nc-card-grid .nc-card-body{ padding: 22px 22px 28px; }
.nc-card-grid .nc-card-title{
  font-family: var(--wp--preset--font-family--sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 10px;
}
@media (max-width: 960px){ .nc-card-grid{ flex-wrap: wrap; } .nc-card-grid > .wp-block-column{ flex-basis: 50% !important; } }
@media (max-width: 560px){ .nc-card-grid > .wp-block-column{ flex-basis: 100% !important; } }

/* =========================================================
   Perspectives: filter tabs + query loop grid
   ========================================================= */
.filters{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--wp--preset--color--border);
  padding-bottom: 18px;
  margin-top: 48px;
}
.filter-tabs{ display: flex; gap: 24px; flex-wrap: wrap; }
.filter-tabs a{
  font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--wp--preset--color--text-muted);
  text-decoration: none;
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
}
.filter-tabs a.active, .filter-tabs a:hover{
  color: var(--wp--preset--color--text);
  border-color: var(--wp--preset--color--text);
}

/* Same bordered-card treatment as .nc-card-grid (Capabilities' "Core
   Capabilities" / "Strategies Across the Capital Structure" grid), so
   Perspectives listings read as one consistent design language. */
.wp-block-query .nc-article-grid,
.wp-block-post-template.nc-article-grid{
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px !important;
  background: var(--wp--preset--color--border);
  border: 1px solid var(--wp--preset--color--border);
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
}
.nc-article-grid li{
  list-style: none;
  background: var(--wp--preset--color--cream);
  margin: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  flex: none !important;
  box-sizing: border-box;
}
.nc-article-media{ aspect-ratio: 4/3; overflow: hidden; margin-bottom: 0; }
.nc-article-media img{ width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.nc-article-grid li:hover .nc-article-media img{ transform: scale(1.06); }
.nc-article-meta{ margin: 22px 22px 10px; font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--text-muted); }
.nc-article-grid h3{ margin: 0 22px 8px; font-size: 17px; }
.nc-article-grid h3 a{ text-decoration: none; color: var(--wp--preset--color--text); }
.nc-article-grid p{ margin: 0 22px 28px; color: var(--wp--preset--color--text-muted); font-size: 14px; }
@media (max-width: 960px){ .wp-block-query .nc-article-grid, .wp-block-post-template.nc-article-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .wp-block-query .nc-article-grid, .wp-block-post-template.nc-article-grid{ grid-template-columns: 1fr; } }

.nc-no-results{ display: none; padding: 60px 0; text-align: center; font-family: var(--wp--preset--font-family--serif); font-size: 18px; }

/* =========================================================
   About — tab list
   ========================================================= */
.nc-about-tabs{ display: grid; grid-template-columns: 90px 1fr; row-gap: 26px; }
.nc-about-tabs .nc-t-num{ font-family: var(--wp--preset--font-family--serif); color: var(--wp--preset--color--text-muted); font-size: 15px; }
.nc-about-tabs .nc-t-label{ font-family: var(--wp--preset--font-family--serif); font-size: 19px; padding-bottom: 20px; border-bottom: 1px solid var(--wp--preset--color--border); margin: 0; }
.nc-about-tabs > div:nth-last-child(-n+2) .nc-t-label{ border-bottom: 0; }

/* =========================================================
   Contact form
   ========================================================= */
.nc-form-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.nc-field{ display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.nc-field.full{ grid-column: 1 / -1; }
.nc-field label{ font-size: 11.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wp--preset--color--text-muted); }
.nc-field input, .nc-field textarea{
  border: 0; border-bottom: 1px solid var(--wp--preset--color--border);
  background: transparent;
  font-family: var(--wp--preset--font-family--sans); font-size: 15px; color: var(--wp--preset--color--text);
  padding: 10px 2px;
  outline: none;
  resize: vertical;
}
.nc-field input:focus, .nc-field textarea:focus{ border-color: var(--wp--preset--color--ink); }
.nc-field textarea{ min-height: 110px; }
@media (max-width: 640px){ .nc-form-grid{ grid-template-columns: 1fr; } }

.nc-contact-info .nc-item{ margin-bottom: 28px; }
.nc-contact-info .nc-item h4{ font-family: var(--wp--preset--font-family--sans); font-size: 11.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wp--preset--color--text-muted); margin-bottom: 8px; }
.nc-contact-info .nc-item p, .nc-contact-info .nc-item a{ font-family: var(--wp--preset--font-family--serif); font-size: 18px; }

.nc-form-notice{ display: none; border: 1px solid var(--wp--preset--color--ink); padding: 22px 24px; font-family: var(--wp--preset--font-family--serif); font-size: 16px; margin-bottom: 24px; }
.nc-form-notice:empty{ display: none !important; }
.nc-form-notice.is-error{ border-color: #a33; }

/* =========================================================
   Footer
   ========================================================= */
.site-footer{ padding: 64px var(--nc-pad) 32px; font-size: 13.5px; }
.nc-footer-top{ padding-bottom: 44px; border-bottom: 1px solid rgba(243,241,234,0.14); }
.nc-footer-logo.wp-block-site-title{
  font-size: 22px !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 18px !important;
  display: block;
}
.nc-footer-logo.wp-block-site-title{ line-height: 0; }
.nc-footer-logo.wp-block-site-title a{
  display: block;
  width: 250px;
  max-width: 100%;
  height: 58px;
  background: url("../img/logo-light.png") no-repeat left center / contain;
  font-size: 0 !important;
  color: transparent !important;
  text-decoration: none;
}
.nc-footer-heading{ margin-bottom: 18px !important; letter-spacing: 0.1em; text-transform: uppercase; }
.nc-footer-list{ list-style: none; margin: 0; padding: 0; }
.nc-footer-list li{ list-style: none; margin: 0 0 12px; }
.nc-footer-list a{
  color: var(--wp--preset--color--text-on-ink-muted);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.nc-footer-list a:hover{
  color: var(--wp--preset--color--text-on-ink);
  border-bottom-color: rgba(243,241,234,0.45);
}
.nc-footer-cities{ line-height: 1.8; color: var(--wp--preset--color--text-on-ink-muted); }
.nc-footer-bottom{ padding-top: 26px; }
.nc-footer-bottom p{ letter-spacing: 0.04em; text-transform: uppercase; font-size: 11.5px; }
.nc-footer-legal{ color: var(--wp--preset--color--text-on-ink-muted); }