/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme
 Author:       Tom Usborne
 Author URI:   https://tomusborne.com
 Template:     generatepress
 Version:      0.1
*/

/* =========================================================
   GLOBAL RESET
   ========================================================= */

html, body {
  margin: 0;
  padding: 0;
}

/* Prevent layout shift when modal opens (scrollbar disappears) */
html {
  scrollbar-gutter: auto;
}

/* Fallback for browsers that don't support scrollbar-gutter */
body.nv-modal-open {
  overflow: hidden;
  padding-right: var(--nv-scrollbar-w, 0px);
}

body,
.site-content,
.content-area,
.site-main {
  margin: 0;
  padding: 0;
}

/* =========================================================
   FEED LAYOUT
   ========================================================= */

.nv-feed {
  max-width: 520px;
  width: 100%;
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
}

.nv-post {
  margin: 0 0 18px 0;
}

.nv-card {
  position: relative;
}

/* =========================================================
   VIDEO AREA (shell + injected video + poster)
   ========================================================= */

.nv-video {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  border-radius: 12px;
  overflow: hidden;
  background: #111;

  font-size: 16px;
  line-height: 1.2;

  transform: none;
  isolation: auto;
}

/* Only promote to its own layer when actually playing */
.nv-card.is-playing .nv-video {
  transform: translateZ(0);
  isolation: isolate;
}

/* Shell fills the video area */
.nv-videoShell {
  position: absolute;
  inset: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  background: #111;
}

/* Poster image fills the shell */
.nv-videoShell .nv-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Injected video fills the shell */
.nv-videoShell video.nv-player {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;

  border-radius: 12px;
  line-height: 0;
  font-size: 0;

  transform: none;
}

.nv-card.is-playing .nv-videoShell video.nv-player {
  transform: translateZ(0);
}

/* =========================================================
   EMPTY / ADS
   ========================================================= */

.nv-empty {
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 10px;
}

.nv-ad {
  margin: 10px 0 30px 0;
}

/* =========================================================
   TOP LOGO BAR
   ========================================================= */

.nv-topbar {
  position: relative;
  background: #fff;
  margin-bottom: 30px;
  padding: 16px 12px 12px;
}

.nv-logo-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
}

.nv-logo-wrap .custom-logo-link {
  display: inline-block;
  line-height: 0;
}

.nv-logo-wrap .custom-logo {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  object-fit: contain;
  max-height: 90px;
}

.nv-logo-text {
  font-weight: 700;
  font-size: 18px;
  color: #111;
  text-decoration: none;
}

/* =========================================================
   OVERLAY VARS
   ========================================================= */

:root {
  --nv-bottom-safe: 56px;
  --nv-heart-space: 78px;
}

/* =========================================================
   RIGHT-SIDE ICONS
   ========================================================= */

.nv-side {
  position: absolute;
  right: 12px;
  bottom: 110px;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: auto;
}

.nv-like {
  width: 54px;
  height: 54px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;

  background: rgba(255,255,255,0.92);
  box-shadow: 0 8px 22px rgba(0,0,0,0.18);

  color: #e4002b;
  font-size: 30px;
  font-weight: 700;
  line-height: 1;

  display: flex;
  align-items: center;
  justify-content: center;

  padding-top: 10px;

  -webkit-tap-highlight-color: transparent;
}

.nv-like:active {
  transform: scale(0.96);
}

/* =========================================================
   CAPTION
   ========================================================= */

.nv-caption {
  position: absolute;
  inset: 0;
  z-index: 20;
  margin: 0;

  display: flex;
  flex-direction: column;
  justify-content: flex-end;

  pointer-events: none;
  font-size: 15px;
  line-height: 1.25;
}

.nv-caption-summary,
.nv-caption-body {
  pointer-events: auto;
}

.nv-caption-summary::-webkit-details-marker {
  display: none;
}

.nv-caption-summary {
  list-style: none;
  cursor: pointer;

  margin: 0;
  margin-left: 12px;
  margin-right: calc(12px + var(--nv-heart-space));
  margin-bottom: calc(var(--nv-bottom-safe) + 6px);

  padding: 8px 10px;
  border-radius: 6px;

  color: rgba(255,255,255,0.92);
  font-weight: 600;
  text-shadow: 0 2px 10px rgba(0,0,0,0.55);

  background: rgba(0,0,0,0.28);

  display: flex;
  align-items: center;
  gap: 8px;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  -webkit-tap-highlight-color: transparent;
}

.nv-caption-summary::before {
  content: "▶";
  flex: 0 0 auto;
  opacity: 0.95;
  transform: translateY(-1px);
}

.nv-caption-preview {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nv-more-open,
.nv-less-open {
  font-weight: 700;
  opacity: 0.95;
}

.nv-less-open { display: none; }

.nv-caption-body {
  display: none;
  width: 100%;
  box-sizing: border-box;

  background: rgb(14, 93, 48);
  color: #fff !important;

  padding: 14px 14px;
  padding-right: calc(14px + var(--nv-heart-space));

  border-radius: 0;

  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}

.nv-caption[open] .nv-caption-body {
  display: block;
}

.nv-caption[open] .nv-caption-summary {
  background: rgb(14, 93, 48);
  text-shadow: none;
  border-radius: 0;

  margin-left: 0;
  margin-right: 0;
  margin-bottom: 0;

  padding: 14px 14px;
  padding-right: calc(14px + var(--nv-heart-space));
}

.nv-caption[open] .nv-caption-summary::before {
  content: "▼";
}

.nv-caption[open] .nv-caption-preview {
  display: none !important;
}

.nv-caption[open] .nv-more-open { display: none !important; }
.nv-caption[open] .nv-less-open { display: inline !important; }

.nv-caption-body p { margin: 0 0 8px 0; }
.nv-caption-body p:last-child { margin: 0; }

/* =========================================================
   HEADER TITLE
   ========================================================= */

.nv-header-title {
  width: 100%;
  margin: 20px 0;
  padding: 24px 16px;

  text-align: center;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;

  box-sizing: border-box;
}

body.nv-body .nv-header-title {
  padding-left: 15px;
  padding-right: 15px;
}

/* =========================================================
   PAGINATION
   ========================================================= */

.nv-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  padding: 22px 12px 34px;
  flex-wrap: wrap;
}

.nv-pagination a,
.nv-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 46px;
  height: 46px;
  padding: 0 16px;

  border-radius: 8px;
  text-decoration: none;

  font-weight: 700;
  font-size: 18px;
  line-height: 1;

  background: #e6e6e6;
  color: #333;
}

.nv-pagination .current {
  background: #0aa7c7;
  color: #fff;
}

.nv-pagination .prev,
.nv-pagination .next {
  min-width: 110px;
}

.nv-pagination a:hover {
  filter: brightness(0.95);
}

/* =========================================================
   HIDE NATIVE VIDEO UI
   ========================================================= */

video.nv-player {
  -webkit-appearance: none;
  appearance: none;
}

video.nv-player::-webkit-media-controls,
video.nv-player::-webkit-media-controls-enclosure,
video.nv-player::-webkit-media-controls-panel,
video.nv-player::-webkit-media-controls-play-button,
video.nv-player::-webkit-media-controls-start-playback-button {
  display: none !important;
  -webkit-appearance: none !important;
}

/* =========================================================
   OVERLAY BUTTONS
   ========================================================= */

.nv-audio,
.nv-play {
  position: absolute;
  z-index: 25;
  border: 0;
  border-radius: 999px;
  padding: 10px 12px;
  cursor: pointer;
  background: rgba(0,0,0,0.45);
  color: #fff;
  line-height: 1;
  font-size: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}

.nv-audio {
  width: 44px;
  height: 44px;
  padding: 0;
  top: 10px;
  left: 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);

  background: rgba(20,20,20,0.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  box-shadow:
    0 10px 28px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.10);

  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.nv-audio:hover {
  background: rgba(20,20,20,0.55);
  border-color: rgba(255,255,255,0.22);
}

.nv-audio:active {
  transform: scale(0.96);
}

.nv-ico-audio-svg {
  width: 22px;
  height: 22px;
  display: block;
  color: rgba(255,255,255,0.92);
}

.nv-card.is-muted .nv-ico-audio-svg {
  color: rgba(255,255,255,0.72);
}

.nv-play {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 14px 16px;
  font-size: 22px;
  opacity: 0;
  pointer-events: none;
}

.nv-card.is-paused .nv-play {
  opacity: 1;
  pointer-events: auto;
}

/* Single audio icon span (JS swaps 🔇/🔊) */
.nv-audio .nv-ico-audio { display: inline; }

/* Play/pause icons */
.nv-play .nv-ico { display: none; }
.nv-card.is-paused .nv-play .nv-ico-play { display: inline; }
.nv-card.is-playing .nv-play .nv-ico-pause { display: inline; }

/* Audio icon svg sizing */
.nv-ico-audio-svg{
  width: 18px;
  height: 18px;
  display: block;
}

/* Hide overlay controls until video has a real frame */
.nv-card:not(.nv-ready) .nv-audio,
.nv-card:not(.nv-ready) .nv-play {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* =========================================================
   INFO SECTION
   ========================================================= */

.nv-info-section {
  padding: 20px 0;
  background-color: #f1f1f1;
}

.nv-info-inner {
  max-width: 520px;
  margin: 0 auto;
  background: #252525;
  padding: 20px;
}

.nv-info-inner p {
  font-size: 18px;
}

.nv-info-article {
  color: #fff;
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 22px;
}

.nv-info-article p {
  margin: 0 0 12px;
}

/* =========================================================
   SUBSCRIBE POPUP
   ========================================================= */

.nv-subscribe {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
}

.nv-subscribe.is-open {
  display: flex;
}

.nv-subscribe__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
}

.nv-subscribe__modal {
  position: relative;
  z-index: 1;
  width: min(560px, 92vw);
  background: #f2f2f2;
  border-radius: 6px;
  box-shadow: 0 18px 55px rgba(0,0,0,0.35);

  padding: 44px 18px 18px;
  padding-left: 64px;
}

.nv-subscribe__close{
  position: absolute;
  right: 12px;
  top: 12px;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 0;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: rgba(255,255,255,0.9);
  box-shadow: 0 10px 24px rgba(0,0,0,0.18);

  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  color: #333;

  -webkit-tap-highlight-color: transparent;
}

.nv-subscribe__title {
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  color: #3a3a3a;
  margin: 6px 0 14px;
}

.nv-subscribe__form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}

.nv-subscribe__input {
  width: min(360px, 92%);
  height: 40px;
  border-radius: 12px;
  border: 1px solid #d6d6d6;
  padding: 0 12px;
  font-size: 14px;
  outline: none;
  background: #fff;
}

.nv-subscribe__input:focus {
  border-color: #bfbfbf;
}

.nv-subscribe__btn {
  width: min(360px, 92%);
  height: 40px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  font-weight: 700;
  font-size: 14px;
  color: #fff;
  background: #1a73e8;
}

.nv-subscribe__btn:active {
  transform: scale(0.99);
}

.nv-subscribe__hint {
  width: min(360px, 92%);
  font-size: 13px;
  color: #666;
  text-align: center;
  min-height: 18px;
}

.nv-subscribe__legal{
  width: min(360px, 92%);
  font-size: 12px;
  color: #666;
  text-align: center;
  margin-top: 8px;
}

.nv-subscribe__legal a{
  color: inherit;
  text-decoration: underline;
}

/* =========================================================
   SUBSCRIBE POPUP — LEFT SHARE RAIL
   ========================================================= */

.nv-subscribe__share {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 2;
}

.nv-subscribe__shareBtn {
  width: 42px;
  height: 42px;
  border-radius: 999px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  text-decoration: none;
  font-weight: 800;
  font-size: 18px;
  line-height: 1;

  background: rgba(255,255,255,0.92);
  box-shadow: 0 10px 24px rgba(0,0,0,0.22);

  color: #111;
  -webkit-tap-highlight-color: transparent;
}

.nv-subscribe__shareBtn--fb {
  background: #fff;
  color: #1877f2;
  font-family: Arial, sans-serif;
  font-weight: 900;
}

.nv-subscribe__shareBtn--mail {
  background: #fff;
  color: #444;
  font-size: 18px;
}

.nv-subscribe__shareBtn:active {
  transform: scale(0.96);
}

@media (max-width: 420px) {
  .nv-subscribe__modal {
    padding-left: 58px;
  }
  .nv-subscribe__share {
    left: 10px;
  }
  .nv-subscribe__shareBtn {
    width: 40px;
    height: 40px;
  }
}

/* Mobile-only darker background behind feed */
@media (max-width: 768px) {
  body {
     background-color: #202020;
  }
  body.nv-body .nv-header-title {
     color: #fff;
  }
}