/* ===================================================================
   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 attribute on the logo <img> used to force that "1%" column to
   actually render at the logo's width (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.
   Sized for anchorinsurance.png (356x124) — update both values together if
   the logo stored in headercontent is ever swapped. */
.site-header-logo {
  width: 358px !important;
}
.site-header-logo img {
  width: 356px;
  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;
}
/* Both icons are drawn from inline SVG rather than image files. They used
   to mask /images/menu.png and /images/call.png, neither of which exists in
   public/images — a mask with a missing source paints nothing, so on mobile
   the hamburger and the call button were both invisible: the nav and the
   phone number were unreachable, since .site-header-phone-text is hidden at
   this width too. A data: URI has no such failure mode, and masking (rather
   than a plain background) keeps the single-colour recolour below. */
.site-header-toggle-icon {
  display: block;
  width: 26px;
  height: 26px;
  background-color: #1A5FA8;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 5.4h18v2.6H3zM3 10.7h18v2.6H3zM3 16h18v2.6H3z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 5.4h18v2.6H3zM3 10.7h18v2.6H3zM3 16h18v2.6H3z'/%3E%3C/svg%3E");
  -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: #1A5FA8;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8c1.4 2.8 3.8 5.1 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.6 21 3 13.4 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.3 0 .7-.2 1L6.6 10.8z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8c1.4 2.8 3.8 5.1 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.6 21 3 13.4 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.3 0 .7-.2 1L6.6 10.8z'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* Desktop header type, toned down at the client's request. The stored
   header (CP > Site Template > Header) puts .size19 on the nav links and
   .size28 on the phone cell -- and styles.css redefines .size28 as 32px.
   Overridden here by id rather than by editing the stored HTML, so a CP
   re-save of the header can't undo it. Nav drops two steps (19 -> 17);
   the phone roughly halves (32 -> 20) but stays bold and above the nav. */
@media screen and (min-width: 1025px) {
  #siteheader .site-header-links { font-size: 17px !important; }
  #siteheader .header_td,
  #siteheader .site-header-phone-text { font-size: 20px !important; }
}

@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;
    gap:3rem;
  }
  .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;
  }
  /* The desktop right gutter in styles.css would stack on top of the 16px
     side padding .site-header-row already applies at this width. */
  .site-header-nav { padding-right: 0 !important; }
  .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.

     Both of these tables carry width="670" as an HTML attribute, which in
     table layout is a *preferred* width that propagates up as a minimum
     through every enclosing table — including the page's outermost one. One
     unconstrained 670 was enough to pin the whole document to 670px wide
     inside a 390px phone viewport, cropping the footer at the right edge and
     making its (already centered) content look left-aligned. Overriding
     width on BOTH is what actually releases it: with either one left at 670
     the override on the other resolves to 100% of a container that is still
     670px, and nothing shrinks. */
  .site-footer-logo,
  .site-footer-badge { 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;
  }
  /* font-size:inherit is what makes the 15px above actually stick: the
     phone and address links carry their own .size24/.size22 classes,
     which are declarations on the <a> itself and so beat anything
     inherited from the cell — they stayed at desktop size on mobile
     and pushed the row out of the viewport. */
  .site-footer-contact a { display: inline-block; margin: 0 6px; font-size: inherit; }
  .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: the hero photos come down from the reference's 575px. Scoped to
     .home-hero-slide img, NOT .home-hero img — the latter would also catch
     the call-to-action graphic inside .home-hero-panel and squash it to the
     slide height. The slider itself is left auto so the slides set it.
     (.home-hero-link was dropped: no such element exists in home.blade.php.) */
  .home-hero .home-hero-slide img { height: 460px !important; object-fit: cover; width: 100% !important; }
  .home-hero-slider { height: auto !important; }

  /* The reference insets its blue panel 50px and fixes it at 750px; at this
     width that overflows, so it spans the hero and the graphic scales. */
  .home-hero-panel {
    left: 0 !important;
    width: 100% !important;
    padding: 14px 16px !important;
    /* Full width at this size means a full-height panel would hide the slide
       photo completely. Release the top edge so it hugs its own content and
       sits as a band along the bottom, with the photo visible above it. */
    top: auto !important;
    height: auto !important;
  }
  /* Panel height follows the graphic, and the hero must stay taller than it
     or the photo is reduced to a sliver — keep these two sized together.
     Half the earlier 420px at the client's request, so the band covers less
     of the photo. */
  .home-hero-panel { padding: 10px 16px !important; }
  /* !important throughout: home.blade.php's inline <style> loads after this
     file and has equal-specificity rules (max-width:100%, bottom:24px) that
     would otherwise win. */
  .home-hero-panel img { width: 100% !important; max-width: 210px !important; }

  /* The dots sat at bottom:24px, i.e. inside the panel band, where they were
     lost behind the Request A Quote graphic. Move them to the top of the
     photo, which the band never covers. */
  .home-hero-dots {
    /* top: 16px !important; */
    bottom: 8.5rem !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;
  }

  /* Agents (/agents): the 350px photo column and the bio column stack. The
     <tr> has to drop out of table layout too, not just its cells, or Chromium
     keeps reserving each cell's original percentage width against the row. */
  .agent-row-tr,
  .agent-row-tr > td {
    display: block !important;
    width: 100% !important;
  }
  .agent-gap { display: none !important; }
  .agent-photo { width: auto !important; }
  .agent-photo img {
    width: 100% !important;
    max-width: 100% !important;
    height: 300px !important;
  }
  .agent-info { padding-top: 14px; }

  /* 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) {
  .home-hero .home-hero-slide img { height: 400px !important; }
  .home-hero-panel img { max-width: 160px !important; }

  .gallery-grid {
    grid-template-columns: 1fr;
  }
  .gallery-item img {
    height: 200px;
  }
  .lightbox-prev,
  .lightbox-next {
    font-size: 32px;
  }
}