/* Skunk Rock: additions on top of theme.css (the Neve snapshot CSS).
   Covers what the WordPress plugins and Neve's script used to provide. */

/* Keyboard users can reach the desktop dropdown without JS. */
.nav-ul li:focus-within > .sub-menu { opacity: 1; visibility: visible; }
.nav-ul .caret-wrap { margin-left: 5px; }

/* Sidebar menu: no scrolling the page behind it. */
body.is-menu-sidebar { overflow: hidden; }

/* Footer: the old site's widget text sat dark on red; the contact line takes the
   place of the old bottom-row copyright, in the same white. */
.footer-bottom .component-wrap p { margin: 0; }
.footer-bottom a { color: var(--nv-text-dark-bg); text-decoration: underline; }
.footer-top .widget p { margin: 0; }
/* Copyright and trademark each on their own line; on screens wide enough to fit it,
   the trademark line never wraps (the slot grows to fit it). */
.sr-legal__line { display: block; }
@media (min-width: 768px) {
  .sr-legal__tm { white-space: nowrap; }
  .footer-top .hfg-slot.center { min-width: max-content; }
}

/* Breadcrumb above page titles (Yoast's markup on the old site). */
.neve-breadcrumbs-wrapper { display: block; margin-bottom: 10px; font-size: 0.85em; }
.neve-breadcrumbs-wrapper a { color: var(--nv-text-color); text-decoration: none; }

/* ---------- YouTube click-to-play ---------- */
.nv-iframe-embed > .video {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: var(--nv-dark-bg); text-align: center;
}
.nv-iframe-embed > .video > a { color: var(--nv-text-dark-bg); padding: 1em; }
.video__play {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  padding: 0; border: 0; border-radius: 0; background: #000; cursor: pointer; overflow: hidden;
}
.video__thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.video__icon {
  position: absolute; top: 50%; left: 50%; width: 68px; height: 48px;
  margin: -24px 0 0 -34px; border-radius: 12px; background: rgba(33, 33, 33, 0.85);
  transition: background 0.2s;
}
.video__icon::after {
  content: ""; position: absolute; top: 50%; left: 50%; margin: -9px 0 0 -6px;
  border-style: solid; border-width: 9px 0 9px 16px;
  border-color: transparent transparent transparent #fff;
}
.video__play:hover .video__icon, .video__play:focus-visible .video__icon { background: #f00; }
.video__play:focus-visible { outline: 3px solid var(--nv-secondary-accent); outline-offset: 2px; }
.nv-iframe-embed > .video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }

/* ---------- consent banner ---------- */
.sr-consent {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 99999; /* below the open menu (999900) */
  max-width: 560px; margin: 0 auto; padding: 16px 20px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px;
  background: var(--nv-site-bg); color: var(--nv-text-color);
  border-top: 4px solid var(--nv-primary-accent);
  box-shadow: 0 8px 24px rgba(20, 23, 28, 0.25);
}
.sr-consent__text { margin: 0; flex: 1 1 220px; }
.sr-consent__actions { display: flex; gap: 10px; }
.sr-consent button { padding: 8px 16px; font-size: 15px; line-height: 1.6; }
.sr-consent .sr-consent__decline {
  background: transparent; color: var(--nv-text-color);
  border: 2px solid currentColor;
}
.sr-consent .sr-consent__decline:hover { color: var(--nv-primary-accent); }

/* Desktop caret sits close to its label, as Neve's div caret did. */
.menu-desktop button.caret-wrap { min-width: 0; }

/* Sidebar caret: match Neve's mobile caret box (flex, static), or the link covers it. */
.header-menu-sidebar .nav-ul button.caret-wrap { display: flex; position: static; }
/* Neve's catch-all ".caret{transition:.3s}" also animates the inherited visibility,
   which can leave the sidebar caret hidden after the panel opens. */
.header-menu-sidebar .caret { transition: transform .3s, color .3s; }

/* ---------- spacing the old pages got from empty paragraphs ----------
   The WordPress pages used empty <p></p> and <p>&nbsp;</p> as spacers; the
   import dropped them. An empty <p> is a 30px gap (Neve's p margin-bottom);
   a <p>&nbsp;</p> is one body line plus that 30px. */

/* Media-text blocks: every text column that opens with a heading or paragraph
   (h1/h4/p) began with an empty <p>. The two that did not open that way (home
   page welcome heading, about-me spacer div) are left alone by the selector.
   Headings retagged for valid HTML keep their original-level class (.looks-h*),
   so the selector follows those classes rather than the new tag. */
.wp-block-media-text__content > :is(h1:not(.looks-h2), h4, .looks-h4, p):first-child { margin-top: 30px; }

/* About page: a <p>&nbsp;</p> sat between each gallery and the next heading. */
.page-photos .entry-content > .wp-block-gallery + .wp-block-heading {
  padding-top: calc(var(--bodyfontsize) * var(--bodylineheight) + 30px);
}

/* Testimonials: one empty <p> sat between the "Miguel" block and the next. */
.page-testimonials .wp-block-media-text[style*="auto 42%"] { margin-top: 30px; }

/* Valid heading order: headings that skipped a level (h2 then h5, h1 then h4)
   now use the next level down and keep the size Neve gave their old level. */
.looks-h2 { font-size: var(--h2fontsize); font-weight: var(--h2fontweight); line-height: var(--h2lineheight); letter-spacing: var(--h2letterspacing); text-transform: var(--h2texttransform); }
.looks-h4 { font-size: var(--h4fontsize); font-weight: var(--h4fontweight); line-height: var(--h4lineheight); letter-spacing: var(--h4letterspacing); text-transform: var(--h4texttransform); }
.looks-h5 { font-size: var(--h5fontsize); font-weight: var(--h5fontweight); line-height: var(--h5lineheight); letter-spacing: var(--h5letterspacing); text-transform: var(--h5texttransform); }

/* Empty WordPress headings used as spacers became .sr-gap; same 30px as a heading's margin-bottom. */
.sr-gap { margin-bottom: 30px; }