/*
 Theme Name: O Popular Stories
 Text Domain: opopular-stories
 Version: 1.3.7
 Author: Luciana Silva Oliveira
 Author URI: https://elevdigital.com.br/
*/

:root { --op-blue: #194392; }

body { font-family: "Fira Sans Condensed", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; }

/* Container desktop 1200px */
@media (min-width: 1280px) { .container { max-width: 1280px; } }

.navbar-opopular { background-color: var(--op-blue); padding: 0; min-height: 32px; }
.navbar-opopular .nav-link, .navbar-opopular .navbar-brand { color: #fff; padding-top: 0; padding-bottom: 0; font-size: 14px;}
.navbar-opopular .nav-link:hover, .navbar-opopular .navbar-brand:hover { color: #f0f4ff; }

.site-banner { padding: 32px 0 12px; text-align: center; }
.site-banner h1 { font-weight: 800; letter-spacing: .5px; color: var(--op-blue); margin: 0; }
.site-banner .subtitle { letter-spacing: .005em; text-transform: uppercase; color: var(--op-blue); font-weight: 700 }

/* Cards verticais (9:16) e 4 colunas em lg */
#stories-grid .story-card {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 9 / 14;
  min-height: 420px;
  background-size: cover;
  background-position: center;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}
#stories-grid .story-card .overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.65) 100%); }
#stories-grid .story-card .title { position: absolute; bottom: 10px; left: 14px; right: 14px; color: #fff; font-weight: 700; text-shadow: 0 2px 6px rgba(0,0,0,.5); }

/* Barra de categorias centrada */
.op-cats-bar { background:#f7f7f8; border-top:1px solid #ececf1; border-bottom:1px solid #ececf1; }
.op-cats-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }
#storyCategories.nav { flex-wrap:wrap; justify-content:center; }
#storyCategories .nav-link {
  background:#fff; border:2px solid var(--op-blue); color:var(--op-blue);
  padding:.45rem .9rem; border-radius:5px; font-weight:700; letter-spacing:.4px;
}
#storyCategories .nav-link.active { background:var(--op-blue); border-color:var(--op-blue); color:#fff; }

/* Rodapé compacto em uma linha */
.footer-one-line { background:#262626; color:#ddd; padding:18px 0; font-size:.95rem; }
.footer-one-line a { color:#ddd; text-decoration:none; margin-right:.25rem; }
.footer-one-line a:hover { text-decoration:underline; }
.footer-one-line .container { gap:.75rem 1rem; }

/* Ícones sociais com fundo colorido */
.social-pill { width:34px; height:34px; border-radius:999px; display:inline-grid; place-items:center; color:#fff !important; text-decoration:none !important; }
.social-fb { background:#1877F2; } .social-x{background:#000;} .social-ig{background:#E4405F;} .social-wa{background:#25D366; }

/* Botão */
.btn-exibir-mais { padding:.8rem 1.6rem; border-radius:999px; }
#btnLoadMore { margin:0px auto 50px; display:none; }

/* Lightbox clássico */
.story-lightbox { position: fixed; inset: 0; z-index: 1055; background: rgba(0,0,0,.88); display: none; }
.story-lightbox.show { display: block; }
.story-lightbox iframe {
  position:absolute; top:50%; left:50%; transform: translate(-50%, -50%);
  width: min(92vw, 450px); height: min(92vh, 800px); border: 0; border-radius: 14px; background: #000;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.story-lightbox .btn-close { position: absolute; top: 16px; right: 22px; filter: invert(1); width: 40px; height: 40px; z-index:600; opacity: 1;}
.story-lightbox .nav-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18);
  width: 48px; height: 48px; color:#fff; border-radius: 999px; display: grid; place-items: center;
}
.story-lightbox .nav-arrow:hover { background: rgba(255,255,255,.15); }
.story-lightbox .nav-prev { left: 18px; }
.story-lightbox .nav-next { right: 18px; }

/* Mobile bottom controls (prev/next) */
.story-lightbox .story-bottom {
  position: absolute;
  left: 0; right: 0; bottom: 12px;
  display: none; /* only on mobile via media query */
  justify-content: center; gap: 16px;
}
.story-lightbox .story-bottom .btn {
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
}

/* On small screens: use bottom bar, hide mid-screen arrows */
@media (max-width: 575.98px) {
  .story-lightbox .nav-arrow { display: none; }
  .story-lightbox .story-bottom { display: flex; }
	.story-lightbox .btn-close {
		top: 0; right: 0;
	}
}

.navbar-toggler {
  border: none;
}
/* White hamburger on your blue navbar */
.navbar-opopular {
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23ffffff' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  --bs-navbar-toggler-border-color: rgba(255,255,255,.5);
}
.navbar-opopular .navbar-toggler:focus {
  box-shadow: 0 0 0 .15rem rgba(255,255,255,.35);
}