/* =========================================================
   mobile.css — phone & tablet layout for Cat in the Baggage
   Loaded last on every page so it overrides the fixed
   960px desktop template only on smaller screens.
   ========================================================= */

/* SEO: page headings are now <h1 class="page-title"> and the logo is a <div class="site-logo">.
   These rules keep them looking exactly like the old <h2> and <h1> logo. */
h1.page-title {
  font-family: 'PT Sans Narrow', sans-serif;
  font-size: 24px;
  line-height: 26px;
  font-weight: bold;
  text-transform: uppercase;
  color: whitesmoke;
  padding: 35px 0 20px;
  margin: 0;
}
header .site-logo {
  min-width: 200px;
  float: left;
  position: relative;
  bottom: -10px;
  margin-left: 30px;
}
header .site-logo a { display: block; }

/* Hamburger button is injected by js/mobile.js; hidden on desktop */
.m-nav-toggle { display: none; }

/* ---------- Tablets and phones (below the 1000px desktop layout) ---------- */
@media (max-width: 999px) {

  html { -webkit-text-size-adjust: 100%; }
  body {
    min-width: 0 !important;
    font-size: 15px;
    line-height: 22px;
    background-size: auto;
    overflow-x: hidden;
  }
  .main { width: 100% !important; }

  /* --- Fluid grid: every grid column becomes full width --- */
  .container_12 {
    width: auto !important;
    padding-left: 14px;
    padding-right: 14px;
  }
  .container_12 [class*="grid_"] {
    display: block;
    float: none !important;
    width: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    left: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .container_12 [class*="prefix_"],
  .container_12 [class*="suffix_"] { padding-left: 0 !important; padding-right: 0 !important; }
  .pad1 { padding-right: 0 !important; }
  .block2 { float: none; width: auto; }

  /* --- Media scales to the screen --- */
  img, video { max-width: 100%; height: auto; }
  iframe { max-width: 100%; }
  figure, figure iframe { width: 100% !important; height: auto; }
  figure iframe { height: 320px !important; }
  .container_12 [class*="grid_"] > iframe { width: 100% !important; height: 420px; }
  .img_inner1 {
    float: none !important;
    display: block;
    margin: 0 0 12px 0 !important;
  }
  /* small thumbnails in the "popular tours" blocks stay beside their text */
  .block1 .img_inner1,
  .block1 + .wrapper > .img_inner1 {
    float: left !important;
    width: 80px;
    margin: 4px 14px 8px 0 !important;
  }
  .container_12 [class*="grid_"] > div[style*="width:219px"] { width: auto !important; }
  [style*="width: 900px"] { width: auto !important; }

  /* --- Headings --- */
  h2, h1.page-title { font-size: 22px; line-height: 26px; padding: 24px 0 14px; }

  /* --- Header + collapsible menu --- */
  header {
    position: relative;
    margin-top: 0;
    margin-bottom: 18px;
    padding: 6px 0;
  }
  header h1, header .site-logo {
    float: left;
    bottom: 0;
    margin: 0 0 0 12px;
    min-width: 0;
  }
  header h1 img, header .site-logo img { width: 150px; height: auto; display: block; }

  .m-nav-toggle {
    display: block;
    position: absolute;
    top: 12px;
    right: 12px;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: #3c5890;
    cursor: pointer;
    z-index: 5;
  }
  .m-nav-toggle span,
  .m-nav-toggle span::before,
  .m-nav-toggle span::after {
    content: "";
    display: block;
    position: absolute;
    left: 12px;
    width: 22px;
    height: 2px;
    background: #fff;
    transition: transform .2s ease, opacity .2s ease;
  }
  .m-nav-toggle span { top: 22px; }
  .m-nav-toggle span::before { left: 0; top: -7px; }
  .m-nav-toggle span::after  { left: 0; top: 7px; }
  header.nav-open .m-nav-toggle span { background: transparent; }
  header.nav-open .m-nav-toggle span::before { transform: translateY(7px) rotate(45deg); }
  header.nav-open .m-nav-toggle span::after  { transform: translateY(-7px) rotate(-45deg); }

  header .menu {
    float: none;
    clear: both;
    display: none;
    width: 100%;
  }
  header.nav-open .menu { display: block; }

  ul.sf-menu > li {
    float: none;
    bottom: 0;
    background: none;
    border-top: 1px solid rgba(0,0,0,.08);
  }
  ul.sf-menu > li a {
    text-align: left;
    padding: 14px 20px;
    font-size: 17px;
  }
  /* language flags */
  ul.sf-menu > li > div[style] { margin: 10px 20px !important; }
  #lang_form fieldset { display: flex; gap: 14px; }
  #lang_form input[type="image"] { width: 40px !important; height: auto; }

  /* --- Horizontal photo carousels -> swipeable strip --- */
  #mycarousel-1.m-strip,
  .m-strip {
    display: flex !important;
    flex-wrap: nowrap;
    overflow-x: auto !important;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    gap: 12px;
    width: auto !important;
    left: 0 !important;
    padding-bottom: 18px;
  }
  .m-strip > li {
    flex: 0 0 78%;
    scroll-snap-align: start;
    float: none !important;
    width: auto !important;
  }
  .m-strip > li img { width: 100%; height: auto; }

  /* --- Vertical tour lists -> plain stacked list --- */
  #mycarousel-1.m-stack,
  .m-stack {
    display: block !important;
    height: auto !important;
    top: 0 !important;
    overflow: visible !important;
  }
  .m-stack > li {
    float: none !important;
    width: auto !important;
    height: auto !important;
    padding-bottom: 18px;
    margin-bottom: 18px;
    border-bottom: 1px solid #484e5e;
  }
  .m-stack > li:last-child { border-bottom: 0; }
  .m-stack > li img { width: 100%; height: auto; }

  /* --- Home page slider -> swipeable slides --- */
  .slider-relative { padding-top: 0; }
  .slider-block, .slider { height: auto !important; width: auto !important; padding-bottom: 0; }
  .m-slides .items {
    display: flex !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .m-slides .items::-webkit-scrollbar { display: none; }
  .m-slides .items > li {
    flex: 0 0 100%;
    scroll-snap-align: start;
    position: relative;
  }
  .m-slides .items > li > img { width: 100%; height: auto; display: block; }
  .m-slides .banner {
    position: static;
    width: auto;
    border: 0;
    border-top: 1px solid #fff;
  }
  .m-slides .banner .btn { float: right; }
  .m-dots { display: flex; justify-content: center; gap: 8px; padding: 10px 0 4px; }
  .m-dots button {
    width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%;
    background: #484e5e; cursor: pointer;
  }
  .m-dots button.on { background: #7290b6; }
  .pagination { display: none; }

  /* --- Buttons: comfortable touch targets --- */
  a.btn,
  .content_inner a.btn,
  .btns a.btn {
    padding: 12px 22px !important;
    font-size: 13px !important;
    line-height: 18px !important;
  }
  .btns { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
  .btns a { margin: 0 !important; }

  /* --- Forms --- */
  #form table, #form tbody, #form tr, #form td {
    display: block;
    width: 100% !important;
  }
  #form td:empty { display: none; }
  #form label {
    float: none;
    width: 100%;
    min-height: 0;
    margin-bottom: 12px;
  }
  #form input,
  #form select,
  #form textarea {
    float: none;
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box;
    font-size: 16px;            /* stops iOS zooming into fields */
  }
  #form input, #form select { height: 44px; }
  #form textarea { height: 160px !important; }
  #form .error, #form .empty { float: none; }
  #form .message { min-height: 0; }

  /* --- Price box / quote --- */
  blockquote { margin-bottom: 20px; }

  /* --- Footer --- */
  footer { padding: 18px 0; text-align: center; }
  footer .social { float: none; display: flex; justify-content: center; margin-bottom: 8px; }
  footer .social a { float: none; }
  footer .logo a { float: none; display: block; margin: 0 0 4px; }
}

/* ---------- Tablets: wider screens show more per row ---------- */
@media (min-width: 600px) and (max-width: 999px) {
  .m-strip > li { flex-basis: 45%; }
  #form tr { display: flex; gap: 14px; }
  #form td { flex: 1; }
}

/* ---------- Desktop: keep the (longer) menu on one row ---------- */
@media (min-width: 1000px) {
  /* the menu fills the space to the right of the logo and never wraps under it */
  header .menu { float: none; display: flow-root; }
  ul.sf-menu { display: flex; align-items: stretch; justify-content: flex-end; flex-wrap: nowrap; }
  ul.sf-menu > li { float: none; flex: 0 0 auto; }
  ul.sf-menu > li a { padding-left: 10px; padding-right: 10px; font-size: 15px; }
  /* language flags: first in the row, i.e. between the logo and the menu,
     stacked on top of each other so they take very little width */
  ul.sf-menu > li:last-child {
    order: -1;
    display: flex;
    align-items: center;
    background: none;
    padding: 0 14px 0 0;
  }
  ul.sf-menu > li:last-child > div[style] { margin: 0 !important; }
  #lang_form fieldset { display: flex; flex-direction: column; gap: 6px; }
  #lang_form input[type="image"] { width: 28px !important; height: auto; display: block; }
}