/* =========================================================
   Asher Thomas Tiling — consolidated stylesheet (styles.css)
   ========================================================= */

/* ========== RESET ========== */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; overflow-x: hidden; }

body {
  font-family: "Didact Gothic", sans-serif;
  color: #444;
  background: #fff;
  line-height: 1.6;
}

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

a { color: #1a1a1a; text-decoration: none; transition: color 0.25s; }
a:hover { color: #ffc001; }

h1, h2, h3 { font-weight: 300; letter-spacing: .05em; }
p { font-size: 14px; letter-spacing: .05em; }

/* ========== HEADER / NAV ========== */
.main-header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 36px;
  background: #fff;
  position: relative;
  z-index: 20;
}

.logo { max-height: 6em; height: auto; }

.nav {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.nav a {
  font-family: "Didact Gothic", sans-serif;
  font-size: 16px;
  padding: 0 14px;
  color: #444;
  font-weight: 300;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.nav a.active,
.nav a:hover { color: #ffc001; }

/* Prevent the “random box” around nav links */
.nav a:focus,
.nav a:focus-visible { outline: none; box-shadow: none; }

/* ========== ABOUT + CONTACT HERO ========== */
.about-hero,
.contact-hero {
  /* Header sits in normal flow above; the hero image below shows in
     full (uncropped). The section's height follows the image. */
  position: relative;
  overflow: hidden;
}

/* The full banner image — natural aspect ratio, never cropped. */
.about-hero > .hero-img,
.contact-hero > .hero-img {
  display: block;
  width: 100%;
  height: auto;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.6);
  z-index: 1;
}

.hero-heading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  font-size: 2rem;
  color: #333;
  text-align: center;
  letter-spacing: 0;
  font-weight: 100;
  padding: 0 1rem;
}

/* About/Contact now use the standard in-flow white header (same as
   Home/Gallery), with the hero banner sitting directly beneath it. */
.about-page .main-header,
.contact-page .main-header {
  background: #fff;
  position: relative;
}

/* ========== HOME HERO CAROUSEL (custom JS) ========== */
.carousel {
  position: relative;
  height: 90vh;
  overflow: hidden;
}

.carousel-item {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  z-index: 0;
}

.carousel-item.active { opacity: 1; z-index: 1; }

.carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* caption overlay */
.carousel-caption {
  position: absolute;
  left: 50%;
  bottom: 20%;
  transform: translateX(-50%);
  width: min(1000px, 90%);
  padding: 0 1rem;
  z-index: 2;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,.6);
  opacity: 0;
}

.carousel-item.active .carousel-caption {
  opacity: 1;
  animation: captionIn 1s ease forwards;
}

@keyframes captionIn {
  from { transform: translateX(-50%) translateY(18px); opacity: 0; }
  to   { transform: translateX(-50%) translateY(0);  opacity: 1; }
}

.carousel-caption h2 {
  font-family: "Didact Gothic", sans-serif;
  font-size: 90px;
  font-weight: 100;
  line-height: 1.05;
  text-align: left;
  white-space: nowrap; /* desktop: no wrap */
}

.carousel-caption p {
  font-family: "Didact Gothic", sans-serif;
  font-size: 40px;
  font-weight: 100;
  line-height: 1.2;
  text-align: left;
  margin-left: 5%;
  white-space: nowrap; /* desktop: no wrap */
}

/* dots */
.carousel-dots {
  position: absolute;
  left: 50%;
  bottom: 25px;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 10;
}

.carousel-dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,.55);
  cursor: pointer;
  transition: background-color .25s, transform .25s;
}

.carousel-dots span:hover { transform: scale(1.15); }

.carousel-dots span.active {
  background: #F4B400;
  box-shadow: 0 0 4px rgba(0,0,0,.5);
}

/* ========== FEATURED CAROUSEL (below hero) ========== */
.featured-carousel {
  position: relative;
  overflow: hidden;
  width: 100%;
  margin: 3rem 0;
  padding: 0 2rem;
  background: #fff;
}

.featured-carousel .carousel-track {
  display: flex;
  gap: 2rem;
  transition: transform .5s ease-in-out;
  will-change: transform;
}

.featured-carousel .carousel-track .slide {
  flex: 0 0 calc((100% - 2rem*2)/3);
}

.featured-carousel .carousel-track .slide img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 8px;
}

.btn-gallery {
  display: block;
  margin: 2rem auto 2.5rem;
  padding: .75rem 1.5rem;
  border: 1px solid #ccc;
  color: #444;
  font-weight: 300;
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: .05em;
  text-align: center;
  max-width: 140px;
}
.btn-gallery:hover { background: #f7f7f7; }

/* ========== OVERLAY SCROLL SECTION (home) ========== */
.overlay-scroll { position: relative; height: 100vh; overflow: hidden; }

.overlay-scroll .overlay-image {
  position: absolute;
  inset: 0;
  background-image: url("images/overlay-scroll.jpg");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  z-index: 1;
}

.overlay-scroll .overlay-text {
  position: relative;
  z-index: 2;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  text-align: center;
}

.overlay-scroll .overlay-text img { max-width: 90%; height: auto; }

/* ========== LOCATION / MAP (home) ========== */
.location-section { background: #fff; padding: 2rem 0; }
.location-section img { height: 8rem; margin: 0 auto 1rem; }

.location-section h2 {
  font-size: 2rem;
  color: #1a1a1a;
  margin-bottom: 1rem;
  text-align: center;
}

.location-section p {
  color: #444;
  font-weight: 300;
  font-size: 14px;
  letter-spacing: .05em;
  text-align: left;
  padding: 0 5%;
}

/* IMPORTANT: keeps map full width above footer */
.location-map {
  width: 100%;
  height: 460px;
  margin: 0;
  padding: 0;
  display: block;
  clear: both;
}

.location-map iframe {
  width: 100%;
  height: 460px;
  border: 0;
  display: block;
}

/* ========== CONTACT PAGE LAYOUT ========== */
.contact-container {
  display: flex;
  gap: 2rem;
  justify-content: center;
  align-items: stretch;
  flex-wrap: nowrap;
  padding: 2rem;
  background: #f9f9f9;
}

.contact-form,
.contact-left {
  flex: 1 1 0;
  background: #fff;
  padding: 2rem;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0,0,0,.08);
}

.contact-left { display: flex; flex-direction: column; }
.contact-info { margin-bottom: 1rem; }
.contact-info a { text-decoration: underline; color: #000; }

.contact-map {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  border-radius: 10px;
}

.contact-map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.contact-form label { display: block; margin: 1rem 0 .25rem; font-weight: bold; }

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: .75rem;
  border-radius: 6px;
  border: 1px solid #ccc;
  font-size: 1rem;
}

.contact-form button {
  width: 100%;
  padding: 1rem;
  margin-top: 2rem;
  background: #999;
  color: #fff;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color .25s;
}

.contact-form button:hover { background: #777; }

/* ========== ABOUT PAGE ========== */
.about-section { background: #e6e6e6; padding: 2rem 0; color: #777; }

.about-section .intro,
.about-section .bio {
  padding-left: 30%;
  padding-right: 10%;
  font-size: 1.125rem;
  line-height: 1.8;
}

.about-section .quote { text-align: left; padding-left: 15%; }
.about-section .quote img { max-width: 35%; margin-top: 2em; }
.intro h2 { color: #fdc310; margin-top: 1.5em; }

/* ========== GALLERY (masonry like live site) ========== */
#gallery {
  column-count: 4;
  column-gap: 1rem;
  padding: 2rem;
  max-width: 1400px;
  margin: 0 auto;
}

.gallery-item {
  display: inline-block;
  width: 100%;
  margin: 0 0 1rem;
  break-inside: avoid;
}

.gallery-item img,
.gallery-item video {
  width: 100%;
  display: block;
  border-radius: 6px;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
}

/* Cap videos so they match image “feel” */
.gallery-item video {
  max-height: 520px;
  object-fit: cover;
}

/* Optional modal (if you use it) */
.img-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: rgba(255,255,255,.95);
  z-index: 100000;
}

.img-modal.open { display: flex; }

.img-modal img,
.img-modal video {
  width: min(95vw, 1600px);
  max-height: 90vh;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0,0,0,.2);
}

.img-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 32px;
  line-height: 1;
  background: rgba(0,0,0,.05);
  border: 0;
  padding: .25rem .6rem;
  border-radius: 8px;
  cursor: pointer;
}

body.modal-open { overflow: hidden; }

@media (max-width: 1200px) { #gallery { column-count: 3; } }
@media (max-width: 768px)  { #gallery { column-count: 2; } }
@media (max-width: 480px)  { #gallery { column-count: 1; } }

/* ========== FOOTER (matches screenshot) ========== */
footer {
  background: #F4B400;
  color: #1a1a1a;
  width: 100%;
  padding: 22px 0;
}

.footer-content {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 28px;
  text-align: center;
}

.footer-section { display: flex; align-items: center; gap: 10px; }

.social-icons {
  display: flex;
  gap: 14px;
  align-items: center;
}

.social-icons a {
  color: #1a1a1a;
  font-size: 1.3rem;
  text-decoration: none;
  transition: color .25s;
}

.social-icons a:hover { color: #fff; }

.footer-bottom {
  max-width: 1100px;
  margin: 12px auto 0;
  padding: 0 20px;
  font-size: .8rem;
  text-align: center;
}

/* Scroll-to-top button (bottom right) */
.footer-scroll-top {
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #2b2b2b;
  color: #fff;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  cursor: pointer;
  transition: opacity .3s, transform .3s, background-color .25s;
}

.footer-scroll-top.visible { display: flex; opacity: 1; }
.footer-scroll-top:hover { background: #555; transform: translateY(-2px); }

/* ========== RESPONSIVE ========== */
@media (max-width: 1024px) {
  .about-section .intro,
  .about-section .bio { padding-left: 15%; padding-right: 15%; }
  .about-section .quote img { max-width: 100%; }

  .featured-carousel .carousel-track .slide {
    flex: 0 0 calc((100% - 2rem)/2);
  }
}

@media (max-width: 768px) {

  .carousel { height: 30vh; max-height: 250px; }
  .carousel-item { height: 30vh; max-height: 250px; }

  .carousel-caption { bottom: 20%; }
  .carousel-caption h2 { font-size: 1.4rem; white-space: normal; text-align: center; }
  .carousel-caption p  { font-size: 1rem; margin-left: 0; white-space: normal; text-align: center; }

  .contact-container { flex-wrap: wrap; padding: 1rem; }
  .contact-map { height: 420px; }
  .contact-map iframe { height: 100%; }
}

@media (max-width: 640px) {
  .featured-carousel { display: none; }
}

/* small landscape */
@media (orientation: landscape) and (max-height: 460px) {
  .carousel { height: 60vh; }
  .carousel-item { height: 60vh; }
  .carousel-caption { bottom: 30%; }
}
/* CONTACT: force stack on mobile */
@media (max-width: 768px) {
  .contact-container{
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
  }

  .contact-container > .contact-form,
  .contact-container > .contact-left{
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
  }

  .contact-map{
    height: 320px !important;
  }
  .contact-map iframe{
    width: 100% !important;
    height: 100% !important;
    display: block;
  }
}

/* Make the map responsive everywhere (prevents the iframe from forcing weird widths) */
.contact-map iframe{
  width: 100%;
  max-width: 100%;
  border: 0;
}

/* Force contact cards to stack on mobile */
@media (max-width: 768px) {
  .contact-container{
    flex-direction: column;   /* forces one under the other */
    flex-wrap: nowrap;
  }

  .contact-form,
  .contact-left{
    width: 100%;
    flex: 0 0 100%;
  }

  /* Give the map a sensible mobile height */
  .contact-map{ height: 320px; }
  .contact-map iframe{ height: 100%; }
}


/* ================================
   Mobile “biscuit” (hamburger) nav
   ================================ */

/* Hidden on desktop */
.nav-toggle{
  display: none;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-direction: column;
  padding: 0;
  position: relative;
  z-index: 1001;
}

.nav-toggle span{
  width: 22px;
  height: 2px;
  background: #444;
  border-radius: 2px;
  display: block;
  transition: transform .2s ease, opacity .2s ease;
}

@media (max-width: 920px){
  /* Header stays in a row so the biscuit sits on the right */
  .main-header{
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 0 !important;
    padding: .75rem 1rem !important;
    background: rgba(255,255,255,.97) !important;
  }

  .logo{
    max-height: 64px !important;
    width: auto;
    max-width: calc(100% - 56px);
  }

  .nav-toggle{ display: inline-flex !important; }

  /* Collapse nav by default */
  .nav{
    display: none !important;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: center;
    background: rgba(255,255,255,.98) !important;
    padding: .5rem 0;
    border-top: 1px solid rgba(0,0,0,.08);
    box-shadow: 0 10px 24px rgba(0,0,0,.10);
    z-index: 1000;
  }

  /* Open state */
  .main-header.nav-open .nav{ display: flex !important; }

  .nav a{
    width: 100%;
    text-align: center;
    padding: 12px 16px;
  }

  /* Animate biscuit into an “X” */
  .main-header.nav-open .nav-toggle span:nth-child(1){
    transform: translateY(8px) rotate(45deg);
  }
  .main-header.nav-open .nav-toggle span:nth-child(2){
    opacity: 0;
  }
  .main-header.nav-open .nav-toggle span:nth-child(3){
    transform: translateY(-8px) rotate(-45deg);
  }
}