/* ===================================================================
   Responsive layout — frontend only.
   Deliberately NOT linked from the CP (cp/header/topcontent.blade.php):
   it used to live in styles.css, which both the frontend and the CP
   share, and its site-wide `img`/`table` overrides changed how the CP's
   own admin tables and inline images rendered even though the CP was
   never part of this responsive work. Moving it to its own stylesheet,
   loaded only by layouts/app.blade.php, fixes that without touching any
   of the actual rules below.

   The site's markup is built on fixed-width nested HTML tables (a
   pre-2010 convention), so instead of a fluid grid this adapts the
   existing structure at two breakpoints: tables that lay out multiple
   columns collapse to a single stacked column, images become fluid,
   and typography scales down. Decorative-only structure (star ratings,
   the "GET STARTED" button, nav-dot spacer gifs) is left as fixed
   pixels since it's already small enough not to overflow once its
   container stacks correctly.
   =================================================================== */

img {
  max-width: 100%;
  height: auto;
}

table {
  max-width: 100%;
}

/* The header/footer logo cells rely on an old HTML table-layout trick:
   <td width="1%"> next to a <td width="98%"> only works because the fixed
   width="298" attribute on the logo <img> used to force that "1%" column
   to actually render at 298px (table auto-layout treats an image's own
   size as a minimum). Making images fluid above breaks that: the column
   and the image now shrink together to a sliver. Pin the logo cell's
   width back so it can't collapse; the mobile media query below
   overrides this the same way it already overrides everything else. */
.site-header-logo {
  width: 300px !important;
}
.site-header-logo img {
  width: 298px;
  max-width: none;
}

.bgleftmiddle, .bgrightmiddle, .bgcenter, .bgcentermiddle, .bgleftnorepeat,
.bgcenterrepeat, .bgtopright, .bgbottom, .bgbottomno, .bgbottomnoleft,
.bgproperty, .bglefttop {
  background-size: cover;
}

/* Hamburger menu toggle button — hidden on desktop, where nav links show
   inline as they always have. Only appears once the mobile media query
   below switches it on. */
.site-header-toggle {
  display: none;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 6px 4px;
  margin-left: 14px;
  vertical-align: middle;
}
/* images/menu.png and images/call.png are solid-white icons meant to be
   recolored, not used as-is (dropped straight onto this white header
   they'd be invisible). Using them as a CSS mask — rather than editing
   the source PNGs — recolors them to the site's blue exactly, and still
   updates automatically if those files are ever replaced. */
.site-header-toggle-icon {
  display: block;
  width: 26px;
  height: 26px;
  background-color: #1A8CCB;
  -webkit-mask-image: url('/images/menu.png');
  mask-image: url('/images/menu.png');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
/* Phone number: full "609-685-7825" text on desktop; the mobile media
   query below swaps this for an icon-only tap-to-call button instead
   (the anchor and its tel: href stay the same either way). */
.site-header-phone {
  display: inline-flex;
  align-items: center;
}
.site-header-phone-icon {
  display: none;
  width: 26px;
  height: 26px;
  background-color: #1A8CCB;
  -webkit-mask-image: url('/images/call.png');
  mask-image: url('/images/call.png');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

@media screen and (max-width: 1024px) {
  body, td, th { font-size: 16px; }
  h1 { font-size: 30px; }
  h2 { font-size: 26px; }
  h3 { font-size: 22px; }
  h4 { font-size: 19px; }

  /* Without this, any element below that gets both width:100% and its own
     padding (.home-feature-text, .contact-form-row td, etc.) renders wider
     than its container — content-box adds padding on top of the 100%
     instead of inside it — which is exactly what caused the mobile/tablet
     horizontal-overflow bug this rule fixes. */
  * { box-sizing: border-box; }

  /* Header: logo and the phone/menu icons share a single compact row —
     the reference design puts all three on one line, not logo-above-icons
     the way the desktop table naturally stacks at this width. .site-header-row
     is the <tr> itself; making it a flex container overrides table-row
     layout so its two cells sit side by side instead of one per line.
     position:relative here (not on .site-header-nav, which stays a small
     icon-sized box) is what lets the dropdown panel below become
     genuinely full-width regardless of how deep it's nested. */
  .site-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    padding: 10px 16px;
  }
  .site-header-logo {
    width: auto !important;
    text-align: left !important;
  }
  .site-header-logo img {
    max-width: 170px;
    margin: 0;
  }
  .site-header-nav {
    width: auto !important;
    text-align: right !important;
  }
  .site-header-nav table {
    width: auto;
    margin-left: auto;
  }
  .site-header-nav-spacer-row {
    display: none;
  }

  /* Hamburger toggle: shown only at this breakpoint, sits next to the
     phone button in the same compact row as the logo. */
  .site-header-toggle {
    display: inline-block;
  }

  /* Phone number: icon-only tap-to-call button instead of the spelled-out
     number — same tel: link and accessible name (aria-label), just a
     different visual on the cramped mobile header row. */
  .site-header-phone-text {
    display: none;
  }
  .site-header-phone-icon {
    display: inline-block;
    margin-right: 14px;
  }

  /* Nav links: collapsed by default, revealed by JS toggling .is-open on
     the same element the toggle button's aria-controls points at
     (site-header-links doubles as both the nav container and the
     collapsible panel). Positioned absolutely against .site-header-row
     above (its nearest positioned ancestor) so the open panel spans the
     full header width and overlays the page below, instead of being
     squeezed into the same narrow icon-sized cell the toggle button
     lives in. */
  .site-header-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.12);
    white-space: normal !important;
    line-height: 1;
    padding: 8px 16px 16px;
    text-align: center;
    z-index: 100;
  }
  .site-header-links.is-open {
    display: block;
  }
  .site-header-links a {
    display: block;
    margin: 0;
    padding: 12px 0;
    border-top: 1px solid #eee;
  }
  .site-header-links a:first-child { border-top: 0; }
  .site-header-spacer { display: none; }

  /* Footer: stack the logo / contact row / nav links, wrap nav text */
  .site-footer-logo { width: 100% !important; }
  .site-footer-logo img { max-width: 320px; }
  .site-footer-contact {
    font-size: 15px !important;
    line-height: 2.4;
    white-space: normal !important;
  }
  .site-footer-contact a { display: inline-block; margin: 0 6px; }
  .site-footer-dot { display: none; }
  .site-footer-nav {
    font-size: 15px !important;
    white-space: normal !important;
    line-height: 2.2;
  }
  .site-footer-nav a { display: inline-block; margin: 0 4px; }

  /* Home: hero keeps a sane height instead of the fixed 689px tall spacer —
     covers both the static fallback (an <img>) and the slider (a
     position:relative container with no intrinsic height of its own). */
  .home-hero img { height: 260px !important; object-fit: cover; width: 100% !important; }
  .home-hero-slider { height: 260px !important; }
  .home-hero-link img { height: 260px !important; }

  /* Home: photo + text + CTA row stacks into one column. The row's own
     <tr> (and this cell's ancestor <table>/<tbody>) must drop out of table
     layout too, not just the cells — otherwise Chromium still reserves each
     cell's original percentage width against the row's table-layout box
     and the row renders wider than the viewport even though every cell
     inside it is individually set to 100%. */
  .home-feature-tr,
  .home-feature-tr > td {
    display: block !important;
    width: 100% !important;
  }
  .home-feature-spacer { display: none; }
  .home-feature-photo {
    height: 220px !important;
  }
  .home-feature-photo img { height: 220px !important; width: 100% !important; object-fit: cover; }
  .home-feature-text {
    padding: 20px 15px !important;
    text-align: center !important;
  }
  .home-feature-text table { margin: 0 auto; }

  /* Home: review cards stack, arrows and spacers hidden — same reasoning
     as .home-feature-tr above. */
  .home-review-tr,
  .home-review-tr > td {
    display: block !important;
    width: 100% !important;
  }
  .home-review-arrow,
  .home-review-spacer {
    display: none;
  }
  .home-review-card {
    margin-bottom: 16px;
  }

  /* Fleet: two boat columns stack */
  .fleet-columns tr,
  .fleet-columns tr > td {
    display: block !important;
    width: 100% !important;
  }
  .fleet-column-spacer { display: none; }
  .fleet-column {
    margin-bottom: 16px;
  }

  /* Contact form: first/last and email/phone pairs stack, inputs go full width */
  .contact-form-row,
  .contact-form-row > td {
    display: block !important;
    width: 100% !important;
  }
  .contact-form-row td {
    text-align: left !important;
    padding-bottom: 10px;
  }
  .contact-form-table input,
  .contact-form-table textarea {
    width: 100% !important;
    box-sizing: border-box;
  }

  /* Gallery: 5 columns on desktop (styles.css default) down to 2 on
     tablet, then 1 on phones (separate, narrower breakpoint below). */
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 600px) {
  .gallery-grid {
    grid-template-columns: 1fr;
  }
  .gallery-item img {
    height: 200px;
  }
  .lightbox-prev,
  .lightbox-next {
    font-size: 32px;
  }
}