/* Global */

html {
  scroll-behavior: smooth;
}

body {
  background-color: #ffffff;
  color: #212529;
  font-size: 1.2rem; /* ~16.8px if browser default is 16px */
  line-height: 1.7;  /* a bit more breathing room */
}

h2 {
  font-size: 1.6rem;
}

p {
  margin-bottom: 1rem;
}

.audio-wrapper {
  text-align: center;
  margin: 0rem 0; /* optional spacing */
}

.audio-wrapper audio {
  display: inline-block;
}

/* Footer */
.bg-footer {
  background-color: #f5f5f5;
}

/* Make footer text smaller than body (1.2rem) */
.bg-footer,
.bg-footer p,
.bg-footer a {
  font-size: 0.9rem;
}

/* Distinctive heading */
.distinctive-heading {
  font-family: 'Alegreya Sans SC', Arial, Helvetica, sans-serif;
  font-size: 2.2rem;
  font-weight: 400; /* Use 400 for regular, 700 for bold */
  color: #111;
  text-align: left;
  letter-spacing: 0.07em;
  /* text-transform: uppercase; <- Not needed, since lowercase = small caps! */
  margin-bottom: 2rem;
}

/* Images that should fit within viewport height (used on many photos) */

.fit-viewport {
  max-width: 100vw;
  max-height: calc(100vh - 2rem); /* matches .my-4 (2 × 1rem) */
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

/* 
#memories-map {
  margin: 4rem 0;
}
*/

/* Base: constrain by height, let width be derived from aspect ratio */
#janine-map {
  max-height: calc(100vh - 2rem); /* keep top/bottom just inside viewport */
  aspect-ratio: 16 / 9;           /* default ratio for wide-ish screens */
  width: auto;
  height: 100%;                   /* use all available height */
  min-height: 300px;
  max-width: 100vw;               /* never exceed viewport width */
  display: block;
  margin-left: auto;
  margin-right: auto;             /* center when narrower than viewport */
}

/* Tall / portrait-ish viewports: 1:1 */
@media (max-aspect-ratio: 1 / 1) {
  #janine-map {
    aspect-ratio: 1 / 1;
  }
}

/* Custom navbar background and fixed positioning */

.navbar-custom {
  background: linear-gradient(
    to bottom,
    rgba(40, 40, 40, 0.7) 0%,
    rgba(40, 40, 40, 0) 100%
  );
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 2000;
  transition: transform 0.25s ease;
}

/* Navbar brand and links color and size */

.navbar-custom .navbar-brand,
.navbar-custom .nav-link {
  color: #ffffff;
  font-size: 1.2rem;
}

/* Remove default underline on navbar brand (Bootstrap sometimes adds) */

.navbar-brand::after {
  content: none !important;
}

/* Logo sizing */

.navbar-logo {
  height: 100px;
  width: auto;
  max-width: 500px;
  object-fit: contain;
  display: block;
}

/* Responsive logo height */

@media (max-width: 1000px) {
  .navbar-logo {
    height: 80px;
    max-width: 400px;
  }
}

@media (max-width: 700px) {
  .navbar-logo {
    height: 50px;
    max-width: 250px;
  }
}

/* Navbar toggler styling */

/* Positioning the toggler button with z-index for proper layering */
.navbar-toggler {
  border: none;
  position: relative;
  z-index: 11;
}

/* Remove focus outline and box-shadow */
.navbar-toggler:focus,
.navbar-toggler:active {
  color: #ffffff;
  box-shadow: none;
  outline: none;
}

/* White hamburger icon */
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba%28255,255,255,1%29' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/* Align navbar items to the right inside collapse */

.navbar-collapse {
  justify-content: flex-end;
}

.navbar-collapse .navbar-nav {
  text-align: right;
}


/* Content sections on light background for readability */
section {
  background-color: #ffffff;
}

/* Video section */
.video-wrapper {
  max-width: 720px;               /* similar to your large images */
  margin-left: auto;
  margin-right: auto;
}

.video-player {
  display: block;
  width: 100%;                    /* responsive width */
  height: auto;                   /* keep aspect ratio */
  aspect-ratio: 16 / 9;           /* landscape video */
  max-width: 100vw;               /* do not exceed viewport width */
  max-height: calc(100vh - 2rem); /* similar to .fit-viewport */
}

.video-player-basma {
  display: block;
  width: 100%;                    /* responsive width */
  height: auto;                   /* keep aspect ratio */
  aspect-ratio: 108 / 109;           /* landscape video */
  max-width: 100vw;               /* do not exceed viewport width */
  max-height: calc(100vh - 2rem); /* similar to .fit-viewport */
}

.video-player-janine {
  display: block;
  width: 100%;                    /* responsive width */
  height: auto;                   /* keep aspect ratio */
  aspect-ratio: 720 / 527;           /* landscape video */
  max-width: 100vw;               /* do not exceed viewport width */
  max-height: calc(100vh - 2rem); /* similar to .fit-viewport */
}

/* Optional small tweak for very narrow phones */
@media (max-width: 480px) {
  .video-wrapper {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}