/* ==========================================================================
   DONGTEN REPLICA THEME CUSTOM STYLES
   ========================================================================== */

/* 1. Global typography & utilities */
body {
  font-family: 'Poppins', 'Inter', sans-serif !important;
  color: var(--text-color);
  background-color: var(--body-bg) !important;
}

.hover-gold:hover {
  color: #ffc107 !important; /* Gold hover for links in dark components */
}

.transition-all {
  transition: all var(--transition-speed) ease-in-out;
}

.hover-shadow:hover {
  box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.08) !important;
}

.hover-translateY {
  transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
}
.hover-translateY:hover {
  transform: translateY(-4px);
  box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,0.1) !important;
}

.min-h-400 {
  min-height: 400px;
}
.text-truncate-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.border-bottom-dashed {
  border-bottom: 1px dashed var(--border-color);
}
.mb-minus-2 {
  margin-bottom: -2px;
}

/* Fallback Logo seal design */
.logo-fallback-seal {
  background: var(--main-color);
  width: 40px;
  height: 40px;
  border-radius: 8px;
}

/* 2. Header & Sticky Header */
.main-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1000;
  background: var(--white);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Push header down when WP Admin Bar is showing */
.admin-bar .main-header {
  top: 32px !important;
}
@media (max-width: 782px) {
  .admin-bar .main-header {
    top: 46px !important;
  }
}


/* When header becomes sticky on scroll */
.main-header.main-header--sticky {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  animation: slideDown 0.4s ease-in-out;
}

.site-content {
  margin-top: 95px; /* Offset for sticky header */
}

@keyframes slideDown {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0);
  }
}

/* Navigation items styling */
.navbar .navbar-nav .nav-link {
  font-size: 13.5px;
  font-weight: 600;
  padding: 8px 12px;
  color: var(--text-color);
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-item.active .nav-link {
  color: var(--main-color) !important;
}

.navbar-nav .nav-item {
  position: relative;
}

/* 3. Mega-Menus (Desktop layout) */
@media (min-width: 992px) {
  /* Stretches megamenus to full viewport/container width */
  .navbar-nav .nav-item.has-megamenu {
    position: static !important;
  }
  
  /* Upward-pointing triangle pointer indicator on hover */
  .navbar-nav .nav-item.dropdown > .nav-link {
    position: relative;
  }
  .navbar-nav .nav-item.dropdown:hover > .nav-link {
    z-index: 1060 !important;
  }

  .navbar-nav .nav-item.dropdown:hover > .nav-link::before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #ffffff;
    position: absolute;
    bottom: -23px; /* Sits precisely touching the top of the shifted dropdown menu */
    left: 50%;
    transform: translateX(-50%);
    z-index: 1050;
    pointer-events: none;
  }

  .navbar-nav .dropdown-menu {
    margin-top: 12px !important;
  }

  /* Invisible hover bridge to prevent dropdown from closing when cursor crosses the gap */
  .navbar-nav .dropdown-menu::after {
    content: "";
    position: absolute;
    top: -15px;
    left: 0;
    right: 0;
    height: 15px;
    background: transparent;
    display: block;
    z-index: 999;
  }

  .navbar-nav .nav-item.dropdown:hover > .dropdown-menu {
    display: block;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .dropdown-menu.megamenu {
    width: 100%;
    left: 0;
    right: 0;
    margin-top: 0;
    border: none;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    background-color: var(--white);
    display: block;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
    padding: 25px 0;
    border-top: 1px solid var(--light-gray);
    z-index: 999;
  }
}

/* Mega-Menu 1: Dòng Scalabrini style (3 columns grid) */
.scalabrini-dropdown__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px 24px;
}

.scalabrini-dropdown__item {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  padding: 12px 15px;
  border-radius: 12px;
  transition: all var(--transition-speed) ease;
  background-color: transparent;
  cursor: pointer;
}

.scalabrini-dropdown__item:hover {
  transform: translateY(-2px);
  background-color: var(--white);
  box-shadow: 0 4px 15px rgba(0,0,0,0.06);
}

.scalabrini-dropdown__icon .ratio-1x1 {
  width: 50px;
  height: 50px;
  border-radius: 10px;
  border: 1px solid var(--light-gray);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--white);
  color: var(--main-color);
  font-size: 22px;
}

.scalabrini-dropdown__info {
  flex: 1;
  text-align: left;
}

.scalabrini-dropdown__title {
  display: block;
  font-weight: 700;
  font-size: 14.5px;
  color: var(--text-color);
  margin-bottom: 4px;
}

.scalabrini-dropdown__item:hover .scalabrini-dropdown__title {
  color: var(--main-color);
}

.scalabrini-dropdown__desc {
  font-size: 11.5px;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.scalabrini-dropdown__desc__more {
  color: var(--text-muted);
  font-weight: 600;
}

/* Mega-Menu 2: Sứ Vụ style (4 columns cards) */
.suvu-dropdown__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.suvu-dropdown__group {
  display: flex;
  flex-direction: column;
}

.suvu-dropdown__banner {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 12px;
}

.suvu-dropdown__banner-img {
  width: 100%;
  height: 110px;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.suvu-dropdown__banner:hover .suvu-dropdown__banner-img {
  transform: scale(1.05);
}

.suvu-dropdown__banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.1) 70%);
  z-index: 1;
}

.suvu-dropdown__banner-overlay {
  position: absolute;
  bottom: 12px;
  left: 12px;
  right: 12px;
  z-index: 2;
  text-align: left;
}

.suvu-dropdown__banner-title {
  color: var(--white);
  font-weight: 700;
  font-size: 13.5px;
  margin: 0 0 2px;
  line-height: 1.2;
}

.suvu-dropdown__banner-desc {
  color: rgba(255,255,255,0.8);
  font-size: 10.5px;
  margin: 0;
}

.suvu-dropdown__links {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
}

.suvu-dropdown__link-item {
  color: var(--text-color);
  font-size: 12.5px;
  display: flex;
  align-items: center;
  transition: color var(--transition-speed) ease, transform var(--transition-speed) ease;
}

.suvu-dropdown__link-item:hover {
  color: var(--main-color);
  transform: translateX(3px);
}

.suvu-dropdown__link-item i {
  color: var(--main-color);
  font-size: 11px;
}

/* Mega-Menu 3: Suy Tư style (Sidebar + Grids) */
.suytu-dropdown {
  display: flex;
  background-color: var(--white);
}

.suytu-dropdown__sidebar {
  flex: 0 0 25%;
  background-color: #f7f7f7;
  padding: 15px;
  border-right: 1px solid #eeeeee;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.suytu-dropdown__menu-item {
  border-radius: 6px;
  transition: background-color var(--transition-speed) ease;
}

.suytu-dropdown__menu-item:hover {
  background-color: #ffe8e8;
}

.suytu-dropdown__menu-link {
  display: flex;
  align-items: center;
  padding: 10px 15px;
  color: var(--text-color);
  font-weight: 600;
  font-size: 13px;
}

.suytu-dropdown__menu-link i {
  color: var(--main-color);
  font-size: 14px;
}

.suytu-dropdown__content {
  flex: 0 0 75%;
  padding: 25px;
}

.suytu-dropdown__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
}

.suytu-dropdown__card {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.suytu-dropdown__image {
  width: 100%;
  height: 95px;
  object-fit: cover;
  border-radius: 6px;
  margin-bottom: 8px;
  border: 1px solid var(--light-gray);
  transition: opacity var(--transition-speed) ease;
}

.suytu-dropdown__card:hover .suytu-dropdown__image {
  opacity: 0.85;
}

.suytu-dropdown__title {
  color: var(--text-color);
  font-weight: 600;
  font-size: 11.5px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.suytu-dropdown__card:hover .suytu-dropdown__title {
  color: var(--main-color);
}

/* Tab visibility for Suy Tư dynamic categories */
.suytu-category-pane {
  display: none;
}
.suytu-category-pane.active {
  display: block;
  animation: fadeIn 0.2s ease-in-out;
}
.suytu-dropdown__menu-item.active {
  background-color: #ffe8e8;
}
.suytu-dropdown__menu-item.active .suytu-dropdown__menu-link {
  color: var(--main-color) !important;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Custom carets */
.navbar-nav .icon-dropdown {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  cursor: pointer;
}

/* Caret hides/shows */
@media (min-width: 992px) {
  .navbar-nav .icon-dropdown {
    display: none !important;
  }
}



/* 4. Homepage specific styles */

/* First news left featured card */
.first-news {
  transition: transform 0.4s ease;
}
.first-news:hover {
  transform: scale(1.008);
}
.first-news a {
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

/* Tông đồ cards */
.block-tongdo__logo {
  box-shadow: inset 0 0 0 1px rgba(144, 13, 20, 0.1);
  transition: transform 0.4s ease, background 0.4s ease, color 0.4s ease;
}
.block-tongdo__card:hover .block-tongdo_logo,
.block-tongdo__card:hover .block-tongdo__logo {
  transform: rotate(360deg);
  background-color: var(--main-color) !important;
  color: var(--white) !important;
}

/* Podcast play overlay triggers */
.podcast-thumb-wrapper .btn-play-podcast-trigger {
  opacity: 0;
  transition: opacity 0.3s ease;
}
.podcast-thumb-wrapper:hover .btn-play-podcast-trigger {
  opacity: 1;
}

.hover-scale {
  transition: transform 0.2s ease;
}
.hover-scale:hover {
  transform: scale(1.2);
}

/* 5. Floating Bottom Podcast Player */
.popup-podcast-wrapper {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1050;
  background-color: var(--white);
  border-top: 1px solid var(--border-color);
  box-shadow: 0 -5px 25px rgba(0,0,0,0.1);
  animation: slideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes slideUp {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0);
  }
}

.popup-podcast-wrapper.d-none {
  display: none !important;
}

/* Audio Player control progress bars styling */
.progress-container {
  overflow: hidden;
}

.progress-container:hover {
  height: 8px !important;
}

/* Responsive elements for floating player */
@media (max-width: 768px) {
  .popup-podcast-info {
    max-width: 150px !important;
  }
  .popup-podcast-info span {
    font-size: 11px !important;
  }
}

/* 6. Mobile responsive menu settings */
@media (max-width: 991.98px) {
  .site-content {
    margin-top: 75px;
  }

  .navbar-collapse {
    max-height: 70vh;
    overflow-y: auto;
    background-color: var(--white);
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    margin-top: 10px;
  }

  .navbar-nav {
    align-items: stretch !important;
  }

  /* Flatten megamenus on mobile */
  .dropdown-menu.megamenu {
    position: static !important;
    box-shadow: none !important;
    border-top: none !important;
    padding: 10px 0 !important;
    background: #fdfdfd !important;
    border-left: 2px solid var(--main-color) !important;
    padding-left: 15px !important;
    margin-bottom: 10px;
  }

  .scalabrini-dropdown__grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .scalabrini-dropdown__item {
    padding: 6px 0 !important;
  }

  .suvu-dropdown__grid {
    grid-template-columns: 1fr !important;
    gap: 15px !important;
  }

  .suytu-dropdown {
    flex-direction: column !important;
  }

  .suytu-dropdown__sidebar {
    flex: none !important;
    border-right: none !important;
    border-bottom: 1px solid var(--light-gray);
    margin-bottom: 10px;
  }

  .suytu-dropdown__content {
    display: none !important;
  }

  .navbar-nav .icon-dropdown {
    position: absolute;
    right: 0;
    top: 8px;
    z-index: 10;
  }
}

/* 7. Reading Progress Bar & Back to Top */
#reading-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 4px;
  background-color: var(--main-color, #900d14);
  width: 0%;
  z-index: 99999;
  transition: width 0.1s ease-out;
}

#back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 45px;
  height: 45px;
  z-index: 9999;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50% !important;
  opacity: 0.85;
  cursor: pointer;
}
#back-to-top:hover {
  opacity: 1;
  transform: translateY(-4px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.15) !important;
}

/* 8. Call-To-Action Banners Row */
.cta-banner-card {
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  cursor: pointer;
}
.cta-banner-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important;
}
.cta-banner-card .btn-warning {
  transition: all 0.2s ease;
}
.cta-banner-card .btn-warning:hover {
  transform: scale(1.05);
  background-color: #ffd60a !important;
  color: #000000 !important;
  box-shadow: 0 4px 12px rgba(255, 214, 10, 0.3) !important;
}
.cta-banner-card--vocation .cta-banner-card__graphic svg {
  animation: pulseCross 3s infinite ease-in-out;
}
.cta-banner-card--gospel .cta-banner-card__graphic svg {
  animation: pulseBible 3s infinite ease-in-out;
}

@keyframes pulseCross {
  0%, 100% { transform: scale(1); opacity: 0.9; }
  50% { transform: scale(1.05); opacity: 1; }
}
@keyframes pulseBible {
  0%, 100% { transform: scale(1); opacity: 0.9; }
  50% { transform: scale(1.05); opacity: 1; }
}

/* 9. Mobile App Promotion Widget Styling */
.cta-app-card {
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  cursor: pointer;
}
.cta-app-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(8, 48, 125, 0.35) !important;
}
.cta-app-card .app-icon-badge i {
  animation: pulseMobile 3s infinite ease-in-out;
}
.cta-app-card .btn-outline-light:hover {
  background-color: #ffffff !important;
  color: #08307d !important;
  border-color: #ffffff !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15) !important;
}

@keyframes pulseMobile {
  0%, 100% { transform: scale(1); opacity: 0.95; }
  50% { transform: scale(1.1); opacity: 1; color: #ffd60a !important; }
}