/* =========================================================
   responsive-fixes.css

   Link this LAST in <head>, after footer.css:
   <link rel="stylesheet" type="text/css" href="responsive-fixes.css">

   Additive only. It overrides nothing on desktop (1001px+),
   and deleting this file puts the site back exactly as it is now.
   Pages that share the same stylesheets can link it too.
   ========================================================= */


/* ---------------------------------------------------------
   1. REAL VIEWPORT HEIGHT ON PHONES / TABLETS
   100vh includes the area behind the browser's address bar,
   so the bottom of every 100vh scroller (feed, side navs) gets
   cut off. 100dvh is the visible height. Same as 100vh on desktop.
   --------------------------------------------------------- */
@supports (height: 100dvh) {
  main.nemx-main-section,
  main.main-content-feed,
  main.stories-section,
  aside.side-navigation,
  aside.side-content,
  aside.closed-sidenav,
  aside.asidenav-section,
  aside.mobile-asidenav-section {
    height: 100dvh;
  }
}


/* ---------------------------------------------------------
   2. TOP NAV LINKS OVERFLOW (769px - 1000px)
   5 links x (2rem padding + 5rem right margin) is wider than the
   screen below roughly 900px. The margin now shrinks smoothly and
   is exactly 5rem again from 1000px up, so desktop is unchanged.
   --------------------------------------------------------- */
@media (min-width: 769px) and (max-width: 1000px) {
  div#header-nagivation-link {
    margin-right: clamp(0.5rem, calc((100vw - 600px) / 5), 5rem);
  }
}


/* ---------------------------------------------------------
   3. TABLET / LARGE PHONE STRIP (481px - 768px)
   - 481-491px was a gap: no rule gave the icon bar its 6rem width.
   - flex:none stops the icon bar being squeezed by the 85% feed.
   - overflow-y:auto lets the icon bar scroll on short screens
     (landscape phones) instead of cutting off the profile icon.
   --------------------------------------------------------- */
@media (min-width: 481px) and (max-width: 768px) {
  aside.closed-sidenav {
    width: 6rem;
    flex: none;
    overflow-y: auto;
  }
}

/* Below 600px the 5rem side padding leaves only ~240px for posts.
   This is the one visible tweak in this file. */
@media (min-width: 481px) and (max-width: 600px) {
  main.main-content-feed {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}


/* ---------------------------------------------------------
   4. 975px - 1000px MISMATCH
   The side nav switches to its tablet layout up to 1000px
   (responsive-sider.css) but the right column and feed only
   switched at 974px, so 975-1000px tried to fit 3 columns.
   These are the exact same values the site already uses at 974px.
   --------------------------------------------------------- */
@media (min-width: 975px) and (max-width: 1000px) {
  aside.side-content {
    display: none;
  }

  main.main-content-feed {
    width: 85%;
    border-right: none;
    padding: 6rem 5rem 5rem 5rem;
    position: relative;
  }
}


/* ---------------------------------------------------------
   5. PAGINATION: RESPOND TO ITS OWN WIDTH, NOT THE SCREEN
   pagination.css compacts itself using screen width, but in the
   desktop layout the feed is only 40% of the screen, so on laptops
   and tablets the bar is far narrower than the screen suggests and
   "Previous" gets clipped. These rules compact it based on the
   space it actually has. On phones the result is the same as before.
   --------------------------------------------------------- */
.pagination-container {
  container-type: inline-size;
}

/* Less than 390px available:  Previous | 1 | 2 | 3 | ... | 5 | Next */
@container (max-width: 389px) {
  .pagination a.pagination-link,
  .pagination span.dots {
    height: 44px;
    padding: 0 5px;
    font-size: 14px;
  }

  .pagination .page-nav-btn {
    font-size: 0.72rem;
  }

  .pagination .page-4 {
    display: none;
  }

  .pagination .pagination-dots {
    display: list-item;
  }
}

/* Less than 330px available:  Prev | 1 | 3 | ... | 5 | Next */
@container (max-width: 329px) {
  .pagination a.pagination-link,
  .pagination span.dots {
    height: 42px;
    padding: 0 3px;
    font-size: 13px;
  }

  .pagination .page-nav-btn {
    font-size: 0.68rem;
  }

  .pagination .page-2 {
    display: none;
  }

  .pagination .nav-full {
    display: none;
  }

  .pagination .nav-short {
    display: inline;
  }
}


/* ---------------------------------------------------------
   6. LOGO SIZE JUMP AT 481px
   Phones use clamp(2.5em, 10.8vw, ...) but the tablet rule used a
   4em floor, so the logo jumped from ~52px to 64px at 481px and
   nearly touched both screen edges. Same formula as phones now.
   From ~593px up the result is identical to before.
   --------------------------------------------------------- */
@media (min-width: 481px) and (max-width: 768px) {
  p#nemx-logo {
    font-size: clamp(2.5em, 10.8vw, 10.8rem);
  }
}


/* ---------------------------------------------------------
   7. FOOTER TEXT
   The footer is centred as a block but its wrapped lines were
   left-aligned. Centres the text and keeps it off the screen edge.
   --------------------------------------------------------- */
div#footer {
  text-align: center;
  padding: 0 1rem;
}


/* ---------------------------------------------------------
   8. POST CARDS: CAPTION PUSHES THE IMAGE INSTEAD OF OVERLAPPING IT

   Cards are a fixed height with caption and image absolutely
   positioned (caption 20%, image from 32%), so a caption longer
   than its 20% slot runs over the image whenever the feed is narrow.
   Here the header, caption and image become rows of a grid:
     - caption row is at least 20% (exactly the old size) and only
       grows if the text needs more room
     - the image takes whatever is left (68%, or 53% on article posts)
   Short captions: pixel-for-pixel the same as before.
   Long captions: image gets a bit shorter instead of being covered.
   Quote posts (no caption) are not touched.

   To undo just this section, delete everything from here down.
   --------------------------------------------------------- */

/* Desktop + tablet cards */
section.feed-post {
  display: grid;
  grid-template-rows: 12% minmax(20%, auto) minmax(0, 1fr);
}

section.feed-post > section.post-header {
  position: relative;
  height: 100%;
}

section.feed-post > section.caption-section {
  position: relative;
  top: auto;
  height: auto;
}

section.feed-post > section.post-image-section {
  position: relative;
  top: auto;
  height: auto;
  min-height: 0;
  overflow: hidden;
}

/* Article / archive cards: image is 53% and the bottom 15% holds the View button */
@supports selector(:has(a)) {
  section.feed-post:has(> section.post-image-section-article) {
    grid-template-rows: 12% minmax(20%, auto) minmax(0, 1fr) 15%;
  }

  section.feed-post:has(> section.post-image-section-article) > section.post-image-section-article {
    position: relative;
    top: auto;
    height: auto;
    min-height: 0;
    overflow: hidden;
  }

  /* Phone cards: blog posts already use this grid; only article/archive cards need it */
  section.mobile-feed-post:has(> section.mobile-post-image-section-article) {
    grid-template-rows: 12% minmax(20%, auto) minmax(0, 1fr) 15%;
  }

  section.mobile-feed-post:has(> section.mobile-post-image-section-article) > section.mobile-post-image-section-article {
    position: relative;
    top: auto;
    height: auto;
    min-height: 0;
    overflow: hidden;
  }
}


/* =========================================================
   9. SIDE NAV: LOGO AND ICONS STRETCHED ON SMALLER SCREENS

   Every image on the site is width:100%; height:100%, with no
   object-fit. The nav logo's box is (nav width - 11rem of padding)
   wide but only 10% of the screen HEIGHT tall, so its proportions
   change with the screen and the logo gets squashed. Same for the
   icon boxes (13% of width x % of height).
   object-fit:contain keeps each image's own proportions inside the
   same box. If the box already matched, nothing changes.
   ========================================================= */
div.sidenav-header img {
  object-fit: contain;
  object-position: left center;
}

div#sidenav-link-icon img,
div#sidenav-link-iconno-options img,
div#aside-profile-icon img,
header.closed-sidenav-header img,
section.closed-sidenav-link img {
  object-fit: contain;
}

/* The fixed 11rem of right padding leaves the logo almost no room
   on narrow screens. It now scales down below the reference width. */
@media (min-width: 769px) {
  div.sidenav-header {
    padding-right: min(11rem, calc(17600vw / var(--ref-w)));
  }
}


/* =========================================================
   10. DESKTOP HEADER + FEED SCALE DOWN TOGETHER (1001px+)

   The hero image gets shorter as the screen narrows, and the
   things placed on it are sized as a % of that height, but their
   text, line-height and padding are fixed px/rem. So below the
   screen size you built it for, text no longer fits. Here those
   sizes shrink in step with the screen.

   --ref-w is the screen width the header looks right at. At that
   width and wider, NOTHING changes. Below it, everything shrinks
   proportionally. If your own screen is narrower than 1440 and the
   header looks right on it, set --ref-w to that number
   (1366, 1280, ...) so it stays exactly as you designed it.
   ========================================================= */
:root {
  --ref-w: 1440;
}

@media (min-width: 1001px) {

  /* top nav */
  div#header-nagivation-link {
    padding: min(1rem, calc(1600vw / var(--ref-w)));
    margin-right: min(5rem, calc(8000vw / var(--ref-w)));
  }

  p#header-nagivation-link-name {
    font-size: min(1rem, calc(1600vw / var(--ref-w)));
  }

  /* hero: left column */
  section.header-content-section {
    padding-left: min(4rem, calc(6400vw / var(--ref-w)));
    padding-right: min(4rem, calc(6400vw / var(--ref-w)));
  }

  p#header-left-content-title {
    font-size: min(1.5rem, calc(2400vw / var(--ref-w)));
    margin-bottom: min(1rem, calc(1600vw / var(--ref-w)));
  }

  p#header-left-content-paragraph {
    font-size: min(1rem, calc(1600vw / var(--ref-w)));
    line-height: min(20px, calc(2000vw / var(--ref-w)));
    word-spacing: min(5px, calc(500vw / var(--ref-w)));
    margin-bottom: min(1rem, calc(1600vw / var(--ref-w)));
  }

  p#header-left-content-learn-more-button-title {
    font-size: min(1rem, calc(1600vw / var(--ref-w)));
  }

  /* hero: right column (profile card) */
  div#profile-username {
    font-size: min(1rem, calc(1600vw / var(--ref-w)));
    padding-right: min(2rem, calc(3200vw / var(--ref-w)));
  }

  p#authorization-section {
    margin-top: min(1rem, calc(1600vw / var(--ref-w)));
  }

  p#authorization-section,
  p#issueer-title {
    font-size: min(1rem, calc(1600vw / var(--ref-w)));
    margin-bottom: min(1rem, calc(1600vw / var(--ref-w)));
  }

  p#view-profile {
    font-size: min(1rem, calc(1600vw / var(--ref-w)));
  }

  div#view-button {
    padding-left: min(1rem, calc(1600vw / var(--ref-w)));
  }

  /* feed: a little more room for posts on narrower desktops */
  main.main-content-feed {
    padding-left: min(4rem, calc(6400vw / var(--ref-w)));
    padding-right: min(4rem, calc(6400vw / var(--ref-w)));
  }
}


/* =========================================================
   11. OPTIONAL: USE THE TABLET HEADER UP TO 1000px

   Your tablet layout (<=768px) swaps the header's text and profile
   card for the two book covers. But a tablet like the iPad Air (820px)
   or Pro 11" (834px) is wider than 768px, so it gets the full desktop
   header squeezed into ~800px, where the text cannot fit. Meanwhile
   the side nav on 769-1000px already shows all the links, so the top
   nav row is redundant there too.

   This extends the exact same tablet header rules (copied from
   nemx-responsive.css) to 1000px.

   Delete this whole section if you would rather keep the desktop
   header on those widths (it will be cramped).
   ========================================================= */
@media (min-width: 769px) and (max-width: 1000px) {

  section.header-nagivation-mother {
    display: none;
  }

  section.header-content-section {
    display: none;
  }

  section.header-books-container {
    width: 100%;
    height: 50%;
    background: none;
    position: absolute;
    bottom: 0%;
    padding: 0rem 0 1rem 2.2rem;
    display: flex;
    justify-content: space-between;
  }

  div.header-cover {
    width: 22%;
    height: 100%;
    border-radius: 1rem;
    background: none;
    margin-right: 2rem;
  }

  img.header-covers {
    border-radius: 1rem;
    object-fit: cover;
  }

  section.tablet-profile-container {
    display: flex;
    width: 100%;
    position: absolute;
    top: 0%;
    background: none;
    padding: 0.4rem 1.7rem 0.4rem 0.4rem;
    justify-content: flex-end;
  }

  div#tablet-profile-box {
    width: 3rem;
    height: 3rem;
  }

  img.tablet-profile {
    border-radius: 50%;
  }
}