/* assets/css/responsive.css
    all media queries consolidated */

/* Responsive adjustments */
@media (max-width: 1024px) {
  .slideshow-container {
    max-width: 95%; /* shrink slightly on tablets */
  }
  .caption {
    font-size: 15px;
  }
}

@media (max-width: 480px) {
  .prev, .next {
    font-size: 14px;
    padding: 10px;
  }
  .caption {
    font-size: 13px;
  }
  .nav-btn {
    display: block;       /* stack buttons vertically */
    margin: 6px auto;
    width: 80%;
    font-size: 13px;
  }
  .gallery {
    flex-direction: column;
    align-items: center;
  }
  .thumbnail {
    width: 90%;
    height: auto;         /* keep aspect ratio */
  }
}
@media (max-width: 600px) {
  .nav-btn {
    padding: 8px 14px;   /* smaller buttons */
    font-size: 14px;     /* reduce text size */
    margin: 0 5px;
  }
  .caption {
    font-size: 14px;     /* captions easier to read */
  }
  .thumbnail {
    width: 100px;        /* gallery thumbs smaller */
    height: 80px;
  }
  .breadcrumb {
    font-size: 12px;       /* smaller text on phones */
    justify-content: center;
    text-align: center;
  }
}


/* --- Mobile (<=768px) consolidated --- */
@media (max-width: 768px) {
  /* Safe area + header sizing */
  :root {
    --header1-height: 56px;
  }

  /* Header 1 */
  #header1 {
    padding-top: var(--safe-top);
    padding: 0 0.5rem;
    height: 56px;
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  #header1 .branding img {
    max-height: 40px; /* tighter branding scale */
    width: auto;
    height: auto;
  }

  #header1 .menu-toggle {
    width: 44px; height: 44px;
    font-size: 2.4rem; /* tap comfort */
  }

  #header1 .menu-links {
    top: var(--header1-height);
    width: 240px;
  }

  #header1 .menu-links a {
    color: black;
    padding: 0.5rem 1rem;
    display: block;
  }

  #header1 .menu-links a:hover {
    background: #f1f1f1;
    color: var(--graphite);
  }

  /* Header 2 */
  #header2 {
    top: var(--header1-height); /* sits below header1 */
    height: auto;               /* allow content-driven height */
    padding: 0.5rem;
    flex-direction: row;
    justify-content: space-between;
  }

  #header2 .branding img {
    max-height: 50px;
  }

  #header2 nav ul {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.5rem;
  }

  /* Hero section */
  #hero {
    position: relative;
    height: 80vh;            /* slightly shorter on mobile for usability */
  }

  .bg-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .overlay-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: white;
    background: transparent; /* fully transparent over image */
    z-index: 100;            /* above image, below headers */
    padding: 0;
    max-width: 90vw;         /* keep text from edge-to-edge */
  }

  .overlay-text h1 {
    font-size: 1.5rem;
    line-height: 1.2;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.6);
    margin: 0 0 0.5rem 0;
  }

  .overlay-text p {
    font-size: 1rem;
    line-height: 1.4;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.6);
    margin: 0.25rem 0;
  }

  /* Content section below fixed headers */
  #content {
    background-color: var(--sapphire-sky) !important;
    min-height: 100vh;
    box-sizing: border-box;
    padding-top: calc(var(--safe-top) + var(--header1-height) + 80px); /* header1 + header2 */
    padding-left: 1rem;
    padding-right: 1rem;
  }
    .featured-projects {
    max-width: 95vw;   /* allow a bit more width on small screens */
    gap: 0.75rem;
  }

  .featured-projects .project {
    flex: 1 1 100%;    /* stack thumbnails vertically */
  }

  .featured-projects img {
    border-radius: 4px;
  }

  .featured-projects figcaption {
    font-size: 0.85rem;
  }
  .slideshow-container {
    max-width: 100%;
  }
  .prev, .next {
    font-size: 16px;
    padding: 12px;
  }
  .caption {
    font-size: 14px;
    padding: 6px;
  }
  .nav-btn {
    padding: 8px 14px;
    font-size: 14px;
  }
  .gallery {
    gap: 8px;
  }
  .thumbnail {
    width: 140px;
    height: 100px;
  }

  .testimonial {
    padding: 0.75rem;
    font-size: 0.95rem;
  }
  #faq summary {
    font-size: 1rem;
  }
}