/* Crandall Dry Dock Engineers - Responsive Enhancements
   Desktop layout is preserved; mobile enhancements apply under 769px. */

/* Desktop default: mobile toggle button is hidden */
.cdd-nav-toggle {
  display: none !important;
}

@media screen and (max-width: 768px) {
  /* Box sizing reset for mobile */
  *, *:before, *:after {
    box-sizing: border-box;
  }

  /* Prevent horizontal scrollbars and fix body fit */
  html, body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    -webkit-text-size-adjust: 100%;
  }

  /* Outer main layout containers */
  table[width="980"],
  table[width="1080"],
  .cdd-container-table {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }

  /* Responsive images */
  img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Mobile Navigation Toggle Button */
  .cdd-nav-toggle {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    width: 100% !important;
    background-color: #000066;
    color: #ffffff;
    border: none;
    border-bottom: 2px solid #9999CC;
    padding: 13px 18px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    box-sizing: border-box;
    text-align: left;
    user-select: none;
  }

  .cdd-nav-toggle:focus {
    outline: 2px solid #ffffff;
    outline-offset: -2px;
  }

  .cdd-hamburger {
    display: inline-flex;
    flex-direction: column;
    justify-content: space-around;
    width: 22px;
    height: 16px;
  }

  .cdd-hamburger span {
    display: block;
    width: 100%;
    height: 2px;
    background-color: #ffffff;
    border-radius: 1px;
    transition: transform 0.2s ease, opacity 0.2s ease;
  }

  .cdd-nav-toggle.is-active .cdd-hamburger span:nth-child(1) {
    transform: translateY(5px) rotate(45deg);
  }

  .cdd-nav-toggle.is-active .cdd-hamburger span:nth-child(2) {
    opacity: 0;
  }

  .cdd-nav-toggle.is-active .cdd-hamburger span:nth-child(3) {
    transform: translateY(-5px) rotate(-45deg);
  }

  /* Mobile Navigation Menu - Hidden by default on mobile until toggled */
  table.cdd-nav-table:not(.is-open) {
    display: none !important;
  }

  table.cdd-nav-table.is-open {
    display: block !important;
    width: 100% !important;
    background-color: #9999CC !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  table.cdd-nav-table.is-open tbody,
  table.cdd-nav-table.is-open tr {
    display: block !important;
    width: 100% !important;
  }

  table.cdd-nav-table.is-open td {
    display: block !important;
    width: 100% !important;
    border: none !important;
    border-bottom: 1px solid #7e7eb5 !important;
    padding: 0 !important;
    background-color: #9999CC !important;
    text-align: center !important;
  }

  table.cdd-nav-table.is-open td:last-child {
    border-bottom: none !important;
  }

  table.cdd-nav-table.is-open td a {
    display: block !important;
    padding: 13px 16px !important;
    font-family: Verdana, Arial, Helvetica, sans-serif !important;
    font-size: 16px !important;
    font-weight: bold !important;
    color: #000066 !important;
    text-decoration: none !important;
    min-height: 44px !important;
    line-height: 1.3 !important;
  }

  table.cdd-nav-table.is-open td a:active,
  table.cdd-nav-table.is-open td a:hover {
    background-color: #8080b8 !important;
    color: #ffffff !important;
  }

  /* Header banner with logo in center: hide side decorative photos on phones */
  table.cdd-header-banner td:not(.cdd-header-brand) {
    display: none !important;
  }

  table.cdd-header-banner td.cdd-header-brand {
    display: block !important;
    width: 100% !important;
    padding: 12px 10px !important;
    text-align: center !important;
  }

  table.cdd-header-banner td.cdd-header-brand table {
    width: 100% !important;
  }

  table.cdd-header-banner td.cdd-header-brand table tr {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }

  table.cdd-header-banner td.cdd-header-brand table td {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
  }

  table.cdd-header-banner td.cdd-header-brand img {
    margin: 0 auto 8px auto !important;
    float: none !important;
    max-height: 110px !important;
  }

  /* Top thumbnail photo strip (index page) - scrollable container */
  .cdd-thumbs-scroll-wrapper {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
    display: block !important;
  }

  .cdd-thumbs-scroll-wrapper table {
    width: 580px !important;
    min-width: 580px !important;
  }

  .cdd-thumbs-scroll-wrapper td {
    height: 110px !important;
  }

  .cdd-thumbs-scroll-wrapper img {
    height: 110px !important;
    object-fit: cover !important;
  }

  /* Multi-column layout tables stacked on mobile */
  table.cdd-stack-on-mobile {
    width: 100% !important;
  }

  table.cdd-stack-on-mobile > tbody > tr {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
  }

  table.cdd-stack-on-mobile > tbody > tr > td {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 14px 12px !important;
  }

  /* Re-ordering for index page main columns */
  .cdd-index-brand-col {
    order: 1 !important;
  }

  .cdd-index-left-col {
    order: 2 !important;
  }

  .cdd-index-right-col {
    order: 3 !important;
  }

  .cdd-index-footer-row td:first-child,
  .cdd-index-footer-row td:last-child {
    display: none !important;
  }

  .cdd-index-footer-row td:nth-child(2) {
    display: block !important;
    width: 100% !important;
  }

  /* Typography scale adjustments for mobile screens */
  font[size="+5"] {
    font-size: 26px !important;
    line-height: 1.25 !important;
    display: inline-block;
  }

  font[size="+3"] {
    font-size: 20px !important;
    line-height: 1.3 !important;
  }

  font[size="+2"] {
    font-size: 18px !important;
    line-height: 1.3 !important;
  }

  /* Ensure horizontal rules and paragraphs fit */
  hr {
    max-width: 90% !important;
  }

  p {
    line-height: 1.4 !important;
  }
}