/* Nexus Media Productions — theme styles
   Everything here is layered on top of theme.json. Tokens come from theme.json;
   this file only handles what block supports cannot express. */

:root{
  --nmp-ease: cubic-bezier(.2,.7,.3,1);
  --nmp-hair: rgba(190,134,43,.28);
  --nmp-hair-strong: rgba(190,134,43,.62);
  --nmp-header-bg: rgba(21,17,9,.90);
  --nmp-outline: rgba(244,234,218,.42);
}

body{ -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img{ max-width:100%; height:auto; }

/* ── focus ───────────────────────────────────────────── */
:where(a,button,input,textarea,select,summary,[tabindex]):focus-visible{
  outline: 2px solid var(--wp--preset--color--accent-2);
  outline-offset: 3px;
  border-radius: 1px;
}

/* ── eyebrow label ───────────────────────────────────── */
.is-style-nmp-eyebrow{
  font-family: var(--wp--preset--font-family--ui) !important;
  font-size: var(--wp--preset--font-size--tiny) !important;
  font-weight: 600 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase;
  line-height: 1.5 !important;
  color: var(--wp--preset--color--accent-2);
  display: flex; align-items: center; gap: .85em;
  margin-bottom: 1.15rem;
}
.is-style-nmp-eyebrow::after{
  content:""; flex:1 1 auto; height:1px; min-width:1.5rem;
  background: var(--nmp-hair);
}
.has-paper-background-color .is-style-nmp-eyebrow,
.has-paper-2-background-color .is-style-nmp-eyebrow{ color: #9A6C15; }

/* ── bordered card ───────────────────────────────────── */
.is-style-nmp-card{
  border: 1px solid var(--nmp-hair);
  border-radius: 2px;
  transition: border-color .45s var(--nmp-ease), transform .45s var(--nmp-ease);
}
.is-style-nmp-card:hover{
  border-color: var(--nmp-hair-strong);
}
.has-paper-background-color .is-style-nmp-card,
.has-paper-2-background-color .is-style-nmp-card{ border-color: rgba(25,28,32,.14); }
.has-paper-background-color .is-style-nmp-card:hover,
.has-paper-2-background-color .is-style-nmp-card:hover{ border-color: rgba(190,134,43,.62); }

/* ── hairline above ──────────────────────────────────── */
.is-style-nmp-rule-top{ border-top: 1px solid var(--nmp-hair); }

/* ── film frame around an image ──────────────────────── */
.is-style-nmp-frame{ position: relative; }
.is-style-nmp-frame img{ display:block; border-radius:1px; }
.is-style-nmp-frame::before,
.is-style-nmp-frame::after{
  content:""; position:absolute; width:22px; height:22px; pointer-events:none;
  border-color: var(--wp--preset--color--accent); border-style: solid; border-width:0;
}
.is-style-nmp-frame::before{ top:-7px; left:-7px;  border-top-width:2px; border-left-width:2px; }
.is-style-nmp-frame::after { bottom:-7px; right:-7px; border-bottom-width:2px; border-right-width:2px; }
.is-style-nmp-frame figcaption{ margin-top:.85rem; }

/* ── gold tick list ──────────────────────────────────── */
.is-style-nmp-ticks{ list-style:none; padding-left:0 !important; }
.is-style-nmp-ticks li{
  position: relative; padding-left: 1.65em; margin-bottom: .55em;
}
.is-style-nmp-ticks li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:.72em; height:.38em;
  border-left:2px solid var(--wp--preset--color--accent);
  border-bottom:2px solid var(--wp--preset--color--accent);
  transform: rotate(-45deg);
}

/* ── outline buttons ─────────────────────────────────── */
.is-style-nmp-outline .wp-block-button__link{
  background: transparent !important;
  color: var(--wp--preset--color--contrast) !important;
  box-shadow: inset 0 0 0 1px var(--nmp-outline);
  transition: box-shadow .35s var(--nmp-ease), color .35s var(--nmp-ease), background-color .35s var(--nmp-ease);
}
.is-style-nmp-outline .wp-block-button__link:hover,
.is-style-nmp-outline .wp-block-button__link:focus{
  background: var(--wp--preset--color--accent) !important;
  color: var(--wp--preset--color--base) !important;
  box-shadow: inset 0 0 0 1px var(--wp--preset--color--accent);
}
.has-paper-background-color .is-style-nmp-outline .wp-block-button__link,
.has-paper-2-background-color .is-style-nmp-outline .wp-block-button__link{
  color: var(--wp--preset--color--charcoal) !important;
  box-shadow: inset 0 0 0 1px rgba(25,28,32,.28);
}
.wp-block-button__link{ transition: background-color .35s var(--nmp-ease), color .35s var(--nmp-ease); }

/* ── header ──────────────────────────────────────────── */
.nmp-header{
  position: sticky; top: 0; z-index: 90;
  background: var(--nmp-header-bg);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid var(--nmp-hair);
}
.nmp-header .nmp-logo img{ display:block; width: 232px; max-width: 46vw; height:auto; }
.nmp-header .wp-block-navigation a{ position: relative; padding-block: .35rem; }
.nmp-header .wp-block-navigation .wp-block-navigation-item__content::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background: var(--wp--preset--color--accent);
  transform: scaleX(0); transform-origin: left; transition: transform .38s var(--nmp-ease);
}
.nmp-header .wp-block-navigation .wp-block-navigation-item:hover .wp-block-navigation-item__content::after,
.nmp-header .wp-block-navigation .current-menu-item .wp-block-navigation-item__content::after{ transform: scaleX(1); }
.nmp-callbtn a{ white-space: nowrap; }

/* mobile nav overlay */
.wp-block-navigation__responsive-container.is-menu-open{
  background: var(--wp--preset--color--base) !important;
  padding-top: 5rem;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content{
  font-size: 1.35rem; letter-spacing: .1em;
}

/* ── hero ────────────────────────────────────────────── */
.nmp-hero{ position: relative; }
.nmp-hero .wp-block-cover__image-background{ object-position: 58% 42%; }
.nmp-hero h1{ text-wrap: balance; }
.nmp-scrollcue{
  font-family: var(--wp--preset--font-family--ui);
  font-size: .6875rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--wp--preset--color--grey);
}

/* ── service tile ────────────────────────────────────── */
.nmp-service{ height: 100%; }
.nmp-service .nmp-num{
  font-family: var(--wp--preset--font-family--ui);
  font-size: .6875rem; letter-spacing: .2em; color: var(--wp--preset--color--accent);
  display:block; margin-bottom: 1.1rem;
}
.nmp-service h3{ margin: 0 0 .55rem; }
.nmp-service p{ color: var(--wp--preset--color--contrast-2); margin: 0; }
.has-paper-background-color .nmp-service p,
.has-paper-2-background-color .nmp-service p{ color: #4E463A; }

/* ── work grid ───────────────────────────────────────── */
.nmp-work figure{ margin:0; overflow: hidden; }
.nmp-work img{
  width:100%; display:block; transition: transform 1.1s var(--nmp-ease), filter .6s var(--nmp-ease);
}
.nmp-work a:hover img, .nmp-work figure:hover img{ transform: scale(1.035); }

/* ── contact / details ───────────────────────────────── */
.nmp-detail{ display:grid; gap:.3rem; }
.nmp-detail dt{
  font-family: var(--wp--preset--font-family--ui);
  font-size: var(--wp--preset--font-size--tiny);
  letter-spacing: .17em; text-transform: uppercase;
  color: var(--wp--preset--color--grey); font-weight:600;
}
.nmp-bigphone a{
  font-family: var(--wp--preset--font-family--display);
  font-weight:700; letter-spacing:.01em;
  color: var(--wp--preset--color--contrast) !important;
}
.nmp-bigphone a:hover{ color: var(--wp--preset--color--accent-2) !important; }

/* ── footer ──────────────────────────────────────────── */
.nmp-footer{ border-top: 1px solid var(--nmp-hair); }
.nmp-footer .nmp-logo img{ width: 210px; height:auto; display:block; }
.nmp-footer a{ color: var(--wp--preset--color--contrast-2) !important; }
.nmp-footer a:hover{ color: var(--wp--preset--color--accent-2) !important; }

/* ── contact form plugins (CF7 / WPForms / Gravity / Fluent) ── */
.wpcf7 input[type=text], .wpcf7 input[type=email], .wpcf7 input[type=tel], .wpcf7 textarea,
.wpforms-field input, .wpforms-field textarea, .wpforms-field select,
.gform_wrapper input[type=text], .gform_wrapper input[type=email], .gform_wrapper textarea,
.fluentform input[type=text], .fluentform input[type=email], .fluentform textarea{
  width:100%; background: rgba(255,255,255,.035);
  border: 1px solid var(--nmp-hair); border-radius: 2px;
  color: var(--wp--preset--color--contrast);
  font-family: var(--wp--preset--font-family--ui); font-size: .95rem;
  padding: .85rem 1rem;
}
.wpcf7 input::placeholder, .wpforms-field input::placeholder, .fluentform input::placeholder,
.wpcf7 textarea::placeholder, .wpforms-field textarea::placeholder{ color: var(--wp--preset--color--grey); }
.wpcf7 label, .wpforms-field-label, .gfield_label{
  font-family: var(--wp--preset--font-family--ui);
  font-size: var(--wp--preset--font-size--tiny);
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--wp--preset--color--grey); font-weight:600;
}
.wpcf7 input[type=submit], .wpforms-submit, .gform_button, .ff-btn-submit{
  background: var(--wp--preset--color--accent); color: var(--wp--preset--color--base);
  border:0; border-radius:2px; cursor:pointer;
  font-family: var(--wp--preset--font-family--ui); font-size: var(--wp--preset--font-size--tiny);
  font-weight:600; letter-spacing:.14em; text-transform: uppercase;
  padding: 1.05em 2em;
}
.wpcf7 input[type=submit]:hover, .wpforms-submit:hover, .gform_button:hover, .ff-btn-submit:hover{
  background: var(--wp--preset--color--accent-2);
}

/* ── misc ────────────────────────────────────────────── */
.wp-block-separator{ border:0; border-top:1px solid var(--nmp-hair); opacity:1; }
.nmp-lede{ font-size: var(--wp--preset--font-size--large); line-height:1.5; color: var(--wp--preset--color--contrast); }
.has-paper-background-color .nmp-lede, .has-paper-2-background-color .nmp-lede{ color: var(--wp--preset--color--charcoal); }
.nmp-muted{ color: var(--wp--preset--color--contrast-2); }
.has-paper-background-color .nmp-muted, .has-paper-2-background-color .nmp-muted{ color: #4E463A; }
.has-paper-background-color, .has-paper-2-background-color{ color: var(--wp--preset--color--charcoal); }
.has-paper-background-color h1,.has-paper-background-color h2,.has-paper-background-color h3,
.has-paper-2-background-color h1,.has-paper-2-background-color h2,.has-paper-2-background-color h3{
  color: var(--wp--preset--color--charcoal);
}
.has-paper-background-color a, .has-paper-2-background-color a{ color:#9A6C15; }

.wp-block-post-content > *:first-child{ margin-top:0; }
.screen-reader-text{
  border:0; clip:rect(1px,1px,1px,1px); clip-path:inset(50%); height:1px; margin:-1px;
  overflow:hidden; padding:0; position:absolute; width:1px; word-wrap:normal !important;
}
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background: var(--wp--preset--color--accent); color: var(--wp--preset--color--base);
  padding:.9rem 1.4rem; font-family: var(--wp--preset--font-family--ui);
  font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; font-weight:600;
}
.skip-link:focus{ left: 1rem; top: 1rem; }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .nmp-work a:hover img, .nmp-work figure:hover img{ transform:none; }
}

/* ── left-aligned measures inside constrained sections ─────────
   WordPress centres any child narrower than the content size. Everything in
   this theme is set left-ragged against a left edge, so opt those back out. */
/* Measures are set with column widths, not max-width overrides — WordPress
   marks its own layout margins !important, and fighting that throws content
   out of the content column on wide screens. */

/* ── hero gutters ────────────────────────────────────────────
   An alignfull cover sits outside the root padding, so its own content needs
   the gutter putting back. */
.nmp-hero > .wp-block-cover__inner-container{
  padding-left: var(--wp--preset--spacing--30);
  padding-right: var(--wp--preset--spacing--30);
}
.wp-block-cover:not(.nmp-hero) > .wp-block-cover__inner-container{
  padding-left: var(--wp--preset--spacing--30);
  padding-right: var(--wp--preset--spacing--30);
}

/* the eyebrow rule should not run the whole column on wide layouts */
.is-style-nmp-eyebrow::after{ max-width: 8rem; }

/* ── hero legibility ──────────────────────────────────────────
   Text sits on the left of the frame; the sky behind it is the brightest
   part of the photograph. A left-anchored scrim keeps the copy readable
   without flattening the image on the right. */
.nmp-hero{ isolation: isolate; }
.nmp-hero::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background: linear-gradient(100deg,
    rgba(21,17,9,.94) 0%,
    rgba(21,17,9,.80) 26%,
    rgba(21,17,9,.42) 52%,
    rgba(21,17,9,.06) 78%,
    rgba(21,17,9,0) 100%);
}
.nmp-hero > .wp-block-cover__inner-container{ position: relative; z-index: 2; }
@media (max-width: 781px){
  .nmp-hero::after{
    background: linear-gradient(0deg,
      rgba(21,17,9,.95) 0%, rgba(21,17,9,.86) 40%, rgba(21,17,9,.55) 78%, rgba(21,17,9,.35) 100%);
  }
}

/* ── section gutters ─────────────────────────────────────────
   Full-bleed sections get their gutter from the centred content column on
   desktop, which leaves nothing at all once the viewport is narrower than the
   content size. Put a real gutter on them so copy never touches the edge. */
.wp-site-blocks .alignfull.is-layout-constrained{
  padding-left: max(var(--wp--preset--spacing--30), env(safe-area-inset-left));
  padding-right: max(var(--wp--preset--spacing--30), env(safe-area-inset-right));
}
.wp-site-blocks .nmp-header.alignfull.is-layout-constrained{
  padding-left: max(var(--wp--preset--spacing--30), env(safe-area-inset-left));
  padding-right: max(var(--wp--preset--spacing--30), env(safe-area-inset-right));
}

/* ── mobile navigation overlay ───────────────────────────────
   The desktop nav is a right-aligned row; inside the overlay it has to become
   an opaque, left-aligned stack. */
.wp-block-navigation__responsive-container.is-menu-open{
  background-color: var(--wp--preset--color--base) !important;
  color: var(--wp--preset--color--contrast) !important;
  padding: 5.5rem var(--wp--preset--spacing--30) 3rem !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content{
  align-items: flex-start !important;
  justify-content: flex-start !important;
  padding-top: 1rem;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container{
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 1.5rem !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content{
  font-family: var(--wp--preset--font-family--display);
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--wp--preset--color--contrast);
}
.wp-block-navigation__responsive-container-close,
.wp-block-navigation__responsive-container-open{
  color: var(--wp--preset--color--contrast);
}
.wp-block-navigation__responsive-container-close svg,
.wp-block-navigation__responsive-container-open svg{ width: 26px; height: 26px; }

/* mobile header: keep the logo and controls on one line */
@media (max-width: 781px){
  .nmp-header .wp-block-group{ flex-wrap: nowrap !important; gap: 1rem !important; }
  .nmp-header .nmp-logo img{ width: 168px; }
  .nmp-header .nmp-callbtn .wp-block-button__link{ font-size: 0.6875rem; padding: 0.7em 1em; }
}
@media (max-width: 480px){
  .nmp-header .nmp-callbtn{ display: none; }
}

/* A backdrop-filter makes an element a containing block for fixed-position
   descendants, which traps the navigation overlay inside the header. Drop the
   blur while the overlay is open so the overlay resolves against the viewport. */
html.has-modal-open .nmp-header,
body.has-modal-open .nmp-header{
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: transparent !important;
  border-bottom-color: transparent !important;
}

/* footer service index */
.nmp-plainlist{ list-style: none; padding-left: 0 !important; }
.nmp-plainlist li{ margin: 0; }