/* ========= AmandaTroop.com — overrides_optionC.css =========
   Load this AFTER all other CSS. It safely corrects tablet behaviors
   and forces navbar collapse earlier (Option C).
===================================================== */

/* --- 1) Navbar visibility & behavior --- */
/* At >= 992px (Bootstrap lg): show expanded nav */
@media (min-width: 992px) {
  .navbar .navbar-collapse {
    display: flex !important;
  }
}

/* Between 768px and 1405px, ensure the collapse isn't force-hidden */
@media (min-width: 768px) and (max-width: 1405px) {
  .navbar-collapse.collapse {
    display: flex !important;
    visibility: visible !important;
  }
}

/* At < 992px: ensure hamburger shows, collapsed menu toggles correctly */
@media (max-width: 991.98px) {
  .navbar-toggler {
    display: block !important;
    visibility: visible !important;
  }
  .navbar-collapse.collapse {
    display: none !important;
  }
  .navbar-collapse.collapse.show {
    display: block !important;
  }
}

/* --- Force navbar to collapse earlier (Option C) --- */
@media (max-width: 1200px) {
  .navbar .navbar-collapse {
    display: none !important;   /* hide expanded nav */
  }
  .navbar-toggler {
    display: block !important;  /* show hamburger */
    visibility: visible !important;
  }
}

/* --- 2) Home page: Voiceover section two-column fix --- */
@media (min-width: 992px) {
  #voiceover .row > [class*="col-12"] {
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }
}

/* Voiceover photo credit positioning */
#voiceover .image-wrapper { position: relative; }
#voiceover .image-wrapper .photo-credit {
  position: absolute;
  left: 12px;
  bottom: 12px;
  background: rgba(255,255,255,.7);
  padding: 2px 6px;
  font-size: 12px;
  z-index: 2;
}

/* --- 3) Audiobooks hero: stack in iPad portrait (834px) --- */
@media (max-width: 834px) {
  .hero-inner {
    display: grid;
    grid-template-columns: 1fr !important;
    align-items: start;
    gap: 24px;
  }
  .portrait {
    justify-self: center;
    width: 100%;
    max-width: 600px;
    height: auto;
  }
  .quotes-wrap { order: 2; }
}
@media (max-width: 768px) {
  .hero-inner { grid-template-columns: 1fr !important; }
}


/* --- 4) Vertical nav items when hamburger is open --- */
@media (max-width: 1200px) {
  .navbar-collapse.collapse.show {
    display: block !important;
    width: 100%;
  }
  .navbar-nav {
    display: flex !important;
    flex-direction: column !important; /* stack vertically */
    align-items: flex-start;
  }
  .navbar-nav .nav-item {
    width: 100%;
  }
  .navbar-nav .nav-link {
    display: block;
    padding: 0.75rem 1rem;
  }
}