/* =====================================================
   BanknoteClub.com — Responsive Stylesheet
   Applied on top of default.css. No desktop styles
   are overridden except inside media queries.
   ===================================================== */

/* ── Equal-height gallery rows ─────────────────────
   CSS Grid replaces the old float/table-cell layout.
   Grid rows are inherently equal height — every item
   in a row grows to match the tallest one without any
   align-items tricks. auto-fill + minmax makes it
   naturally responsive without JS.
   ─────────────────────────────────────────────────── */
.notes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 10px;
  clear: both; /* drop below any floated breadcrumb/orderby elements above */
}

/* Pagination lives inside the grid markup — force it to span all columns
   so it always appears as a full-width row below the last item */
.notes-grid > div.pagination {
  grid-column: 1 / -1;
}

.notes-grid .item {
  width: auto;          /* grid controls width, not the item */
  height: auto;         /* override the fixed 140px from default.css */
  float: none;          /* ignored by grid anyway, but be explicit */
  display: block;       /* override display:table-cell from default.css */
  margin: 0;            /* gap handles spacing */
  box-sizing: border-box;
}

/* Login toggle hidden on desktop — only shown on mobile */
.login-toggle-btn {
  display: none;
}

/* Intro text: preserve desktop width set by the old inline style */
.intro-text {
  width: 75%;
  margin-right: 5px;
}

/* Hamburger button hidden on desktop */
.menu-toggle {
  display: none;
}

/* Mobile More submenu hidden on desktop */
#menu #mobile-more-submenu {
  display: none;
}

/* Active state for the More trigger link — desktop and mobile */
#menu a.menuanchor.active {
  background: #000;
}

/* ── Tablet (≤ 900px) ─────────────────────────────── */
@media screen and (max-width: 900px) {

  #outer {
    width: 96%;
  }

  /* Slightly tighten the two-column layout */
  #primarycontent {
    width: 68%;
  }

  #secondarycontent {
    width: 28%;
  }

  /* Note gallery: force 2 columns on tablet */
  .notes-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Story cards: 2 columns */
  .storyitem {
    width: 46%;
    height: auto;
    min-height: 200px;
  }

  /* Dealer / collector cards: 2 columns */
  .dealeritem,
  .collectoritem {
    width: calc(50% - 22px);
    height: auto;
    min-height: 0;
  }
}

/* ── Mobile (≤ 640px) ─────────────────────────────── */
@media screen and (max-width: 640px) {

  html,
  body {
    padding: 0;
    overflow-x: hidden; /* prevent horizontal scroll revealing the blue body background */
  }

  #outer {
    width: 100%;
    border: none;
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
  }

  /* ── Header ── */
  #header {
    height: auto;
    min-height: 3.5em;
    padding-bottom: 0;
    position: relative; /* already set on desktop — restated so the button anchors to it */
  }

  #headercontent {
    position: relative;
    top: auto;
    width: auto;
    height: 52px;
    padding: 0.4em 0 0 1em;
    background-size: 220px auto;
    background-position: 10px center;
  }

  /* Login toggle: anchored to the top-right of #header, same technique
     as #headerlogin on desktop. Doesn't participate in document flow
     so it can't push the logo or cause horizontal overflow. */
  .login-toggle-btn {
    display: block;
    position: absolute;
    right: 0.8em;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: 1px solid #bbb;
    border-radius: 4px;
    color: #555;
    font-size: 0.8em;
    font-family: "georgia", "times new roman", serif;
    cursor: pointer;
    padding: 0.4em 0.65em;
    white-space: nowrap;
    line-height: 1.2;
  }

  /* Header login panel: hidden until toggled open */
  #headerlogin {
    display: none;
    position: relative;
    top: auto;
    right: auto;
    font-size: 0.85em;
  }

  #headerlogin.login-open {
    display: block;
  }

  #headerpic {
    height: 55px;
    background-size: cover;
    background-position: center center;
  }

  /* ── Navigation ── */
  #menu {
    height: auto;
    min-height: 1.6em;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }

  .menu-toggle {
    display: block;
    background: none;
    border: none;
    color: #fff;
    font-size: 1em;
    line-height: 1;
    cursor: pointer;
    padding: 0.15em 0.6em;
    margin-left: auto;
    float: none;
  }

  #menu ul {
    display: none;
    position: static;
    width: 100%;
    order: 2;
  }

  #menu.menu-open ul {
    display: block;
  }

  #menu ul li {
    display: block;
    border-top: 1px solid #333;
  }

  #menu ul li a {
    display: block;
    padding: 0.22em 1em;
    font-size: 0.95em;
  }

  /* "More" dropdown anchor — treat like other nav items on mobile */
  #menu a.menuanchor {
    display: block !important;
    padding: 0.22em 1em !important;
    font-size: 0.95em;
    border-top: 1px solid #333;
  }

  /* Suppress the AnyLink floating dropdown on mobile — inline submenu replaces it */
  .anylinkmenu,
  .anylinkshadow {
    display: none !important;
  }

  /* Inline More submenu — accordion within the nav.
     Uses #menu prefix (specificity 2,0,0) to beat
     #menu.menu-open ul (1,1,1) which would otherwise
     force all child uls visible when the nav opens. */
  #menu #mobile-more-submenu {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    display: none;
  }

  #menu #mobile-more-submenu.more-open {
    display: block;
  }

  #menu #mobile-more-submenu li {
    border-top: 1px solid #444;
  }

  #menu #mobile-more-submenu li a {
    display: block;
    padding: 0.22em 1em 0.22em 2.5em;
    color: #fff;
    text-decoration: none;
    font-size: 0.9em;
  }

  #menu #mobile-more-submenu li a:hover {
    color: #fff;
  }

  #menu #mobile-more-submenu li a.active-sub {
    background: #000;
    color: #fff;
  }

  /* Member menu: let items wrap naturally */
  #member_menu {
    height: auto;
  }

  #member_menu ul {
    position: static;
    display: flex;
    flex-wrap: wrap;
  }

  #member_menu ul li {
    display: block;
  }

  #member_menu ul li a {
    display: block;
    padding: 0.3em 0.7em;
    font-size: 0.9em;
    white-space: nowrap;
  }

  /* ── Two-column layout → single column ── */
  #primarycontainer {
    float: none;
    margin-right: 0;
    width: 100%;
  }

  #primarycontent {
    float: none;
    width: 100%;
    margin: 0.5em 0 0 0;
    overflow: visible;
  }

  #secondarycontent {
    float: none;
    width: 100%;
    margin-top: 1.5em;
  }

  /* Ad towers are too wide for mobile — hide them */
  #bannertower,
  #minibannertower {
    display: none;
  }

  /* ── Content area ── */
  #content {
    padding: 0 0.6em;
  }

  /* ── Note gallery cards: 2 per row ── */
  .notes-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }

  .notes-grid .item {
    font-size: 12px;
  }

  /* ── Dealer, collector, story cards: full width ── */
  .dealeritem,
  .collectoritem {
    width: 100%;
    height: auto;
    min-height: 0;
    box-sizing: border-box;
    display: block;
    float: none;
    margin: 6px 0;
  }

  .storyitem {
    width: 100%;
    height: auto;
    min-height: 0;
    float: none;
    display: block;
    margin: 6px 0;
  }

  .blacklistitem {
    width: 100%;
    box-sizing: border-box;
  }

  .collectorcontact {
    width: 100%;
    box-sizing: border-box;
  }

  /* ── Forms ── */
  .formlabel {
    width: auto;
    float: none;
    display: block;
    clear: none;
    margin-bottom: 2px;
  }

  .formfield {
    float: none;
    width: 100%;
    max-width: 320px;
    display: block;
    clear: none;
    margin-bottom: 8px;
    box-sizing: border-box;
  }

  .formsubmit {
    margin: 10px 0;
  }

  #signupbox {
    width: 100%;
    box-sizing: border-box;
    padding: 8px;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
  }

  #formcontent {
    margin: 1em 0 0 0;
  }

  #errorbox {
    width: 100%;
    box-sizing: border-box;
  }

  /* ── Header login form ── */
  #headerlogin {
    background: #f5f5f5;
    border-top: 1px solid #ddd;
    padding: 0.6em 1em 0.7em;
  }

  /* Stack the table rows/cells into a single column */
  #header_login table,
  #header_login tbody,
  #header_login tr,
  #header_login td {
    display: block;
    width: 100%;
  }

  #header_login td {
    padding: 3px 0;
    line-height: 1.6;
  }

  #header_login input.text {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    font-size: 1em;
    padding: 0.3em;
  }

  /* Put the two buttons side by side */
  #header_login td:last-child {
    display: flex;
    gap: 0.5em;
    padding-top: 0.4em;
  }

  #header_login .submit {
    flex: 1;
    padding: 0.4em;
    font-size: 0.9em;
  }

  /* Logged-in message: wrap links onto new lines if needed */
  #headerlogin a {
    display: inline-block;
    margin: 2px 4px 2px 0;
  }

  /* ── DB-driven content tables (e.g. packaging steps) ──
     The table has fixed pixel widths on td elements set via
     HTML attributes that push it to ~720px. Stack cells
     vertically and let images scale to fit. */
  #normalcontent table {
    width: 100% !important;
    border-collapse: collapse;
  }

  #normalcontent table td {
    display: block;
    width: 100% !important;
    box-sizing: border-box;
  }

  #normalcontent table td img {
    max-width: 100%;
    height: auto !important;
    width: auto !important;
    display: block;
    margin: 0.5em auto;
  }

  /* ── Intro text: use full available width on mobile ── */
  .intro-text {
    width: 100%;
    margin-right: 0;
  }

  /* ── Search bar ── */
  #simplesearch {
    float: none;
    display: block;
    margin-bottom: 0.5em;
  }

  #simplesearch input.text {
    width: 55%;
    margin-bottom: 4px;
  }

  #rowsperpage {
    float: none;
    margin: 0.5em 0;
  }

  /* ── Footer ── */
  #footer {
    height: auto;
    padding: 1.2em 1em;
    text-align: center;
    background-position: 0 0;
    box-sizing: border-box;
    width: 100%;
    overflow: hidden;
  }

  #footer .left,
  #footer .right {
    position: static;
    display: block;
    margin: 0.3em 0;
    overflow-wrap: break-word;
    word-break: break-word;
  }

  /* ── Breadcrumb ── */
  #breadcrumb {
    margin: 0 0 10px 0;
  }

  /* ── Calendar date list ── */
  .datelist li {
    width: 45%;
  }

  /* ── Pagination ── */
  div.pagination {
    padding: 8px 2px;
    font-size: 9pt;
  }
}

/* ── Very small screens (≤ 380px) ─────────────────── */
@media screen and (max-width: 380px) {

  /* Note gallery: single column on very small screens */
  .notes-grid {
    grid-template-columns: 1fr;
  }

  #simplesearch input.text {
    width: 48%;
  }
}