/*
 * Custom responsive overrides for the Ghost theme
 *
 * These rules address banner overflow, navigation wrapping and menu behaviour on
 * small screens.  Place this file after your main `app.css` in your Ghost
 * theme, or append its contents to the end of `app.css`.  You can also use
 * Ghost’s Code Injection settings to include these styles.
 */

/* Prevent horizontal scrollbars on small devices */
html,
body {
  overflow-x: hidden;
}

/* Ensure header and hero images scale with the viewport */
.m-header img,
.m-hero__picture img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* When a header has a background picture, contain it nicely */
.m-header.with-picture {
  overflow: hidden;
  background-size: cover;
  background-position: center;
}

/* Wrap navigation items on narrow screens */
@media (max-width: 768px) {
  .m-nav__left ul {
    display: flex;
    flex-wrap: wrap;
  }
  .m-nav__left li {
    flex: 1 0 50%; /* two items per row; adjust if desired */
    text-align: center;
    margin-bottom: 0.5rem;
  }
}

/* Base positioning for social icon overlays */
#socials,
#bandcampspotify {
  position: absolute;
  display: flex;
  column-gap: 15px;
}

/* Centre social icons and resize them on medium screens */
@media (max-width: 900px) {
  #socials,
  #bandcampspotify {
    top: auto;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    flex-wrap: wrap;
    justify-content: center;
    font-size: 1.5rem; /* reduce icon size on narrow screens */
  }
}

/* Responsive adjustments on small screens (≤768px) */
@media (max-width: 768px) {
  /* Position the dark‑mode toggle inline with other icons */
  .m-toggle-darkmode {
    position: relative;
    right: auto;
    bottom: auto;
    margin-left: 20px;
    margin-top: 0;
  }

  /* Move the dark‑mode toggle to the top of the dropdown menu when it’s open */
  .m-header.mobile-menu-opened .m-toggle-darkmode {
    position: absolute;
    top: 20px;
    right: 20px;
    bottom: auto;
    margin: 0;
  }

  /* Constrain images inside the header, menu and hero on small screens. */
  /* Header and menu logos should fill their container height without being
     clipped.  Use object-fit: contain so the entire graphic is visible. */
  .m-header img,
  .m-menu img {
    width: auto;
    height: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
  }

  /* Hero images can still use a larger max-height to maintain aspect ratio
     without overflowing the header */
  .m-hero__picture img {
    max-width: 100%;
    height: auto;
    max-height: 120px;
    object-fit: cover;
    display: block;
  }

  /* Prevent the menu overlay from exceeding the viewport width */
  .m-menu {
    width: 100vw;
    overflow-x: hidden;
  }

  /* Ensure the inner wrapper doesn’t expand past the viewport */
  .m-menu__main .l-wrapper {
    max-width: 100%;
    padding-left: 15px;
    padding-right: 15px;
  }

  /* Allow the “recent articles” carousel to scroll horizontally and stay within
     the viewport */
  .m-recent-articles {
    margin-left: 0;
    margin-right: 0;
    overflow-x: auto;
  }
  .m-recent-article {
    width: 80vw;
  }

  /* Prevent the header and menu containers from overflowing horizontally */
  .m-header,
  .m-menu__main {
    overflow: hidden;
  }
}

/* Enhancements for larger screens (≥769px) */
@media (min-width: 769px) {
  /* Allow images in the header and menu to be taller so they don’t look too
     small on desktop */
  .m-header img,
  .m-menu img {
    max-height: 150px;
  }

  /* Offset the hero by the height of the fixed header on wider screens */
  .m-header + .m-hero {
    margin-top: 80px; /* match this to your header’s height */
  }

  /* Center the logo vertically with the navigation text */
  .m-nav__left li {
    display: flex;
    align-items: center;
  }
  .m-nav__left .m-logo {
    display: flex;
    align-items: center;
  }
}

/* Reset width and padding for all elements to prevent unintended global values */
* {
  width: auto;
  padding: 0;
}
/* --------------------------------------------------------------------------
 * Responsive video embeds
 *
 * The default Ghost theme sizes embedded iframes very small on large screens,
 * which can leave a lot of unused space.  The rules below force any
 * embedded iframe (such as YouTube or Vimeo videos) to expand to the width
 * of its container and maintain a 16:9 aspect ratio.  The `aspect-ratio`
 * property is supported in all modern browsers; if it isn’t available the
 * fallback uses `position: absolute` within a padded container.  These
 * styles apply to Ghost’s built‑in embed card (`.kg-embed-card`) as well as
 * standalone iframes inside your post content.
 */

/* Let Ghost embed cards adopt a 16:9 ratio and fill their container */
.kg-embed-card {
  position: relative;
  overflow: hidden;
  /* Preserve a 16:9 ratio; if your videos use a different ratio you can
     override this by setting a custom CSS variable `--aspect-ratio` on the
     element (e.g. style="--aspect-ratio:0.75" for 4:3). */
  aspect-ratio: 16 / 9;
  /* Fallback for older browsers: leave height at 0 and use padding-bottom */
  height: auto;
}

.kg-embed-card iframe,
.kg-embed-card object,
.kg-embed-card embed {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

/* Generic fallback for browsers without aspect-ratio support */
@supports not (aspect-ratio: 16 / 9) {
  .kg-embed-card {
    height: 0;
    padding-bottom: 56.25%; /* 16:9 ratio */
  }
}


/* Ensure standalone iframes in the post content scale up and keep a
   reasonable aspect ratio.  This catches embeds that are not inside a
   Ghost embed card. */
.js-post-content iframe[src*="youtube"],
.js-post-content iframe[src*="vimeo"],
.js-post-content iframe[src*="dailymotion"],
.js-post-content iframe[src*="soundcloud"],
.js-post-content iframe[src*="spotify"] {
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  /* On very wide screens, cap the height so the video doesn’t become too
     tall; adjust this value if you want taller videos on desktop. */
  max-height: 480px;
}