/* filepath: c:\Capstone\Tile Website\TileCalculatorStyles.css */
/* ...existing code... */

/* Header / Nav */
header {
  font-size: 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 200;
  border-bottom: solid 2px #151616;
  background: #ed8d1b; /* ensure readability on small screens */
  gap: 12px;
  flex-wrap: wrap;
}

/* ========== Responsive improvements below ========== */

/* Reset / base (unchanged header above) */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

li, ul, a {
  position: relative;
  font-weight: 500;
  font-size: 20px;
  color: #151616;
  text-decoration: none;
  background: #ed8d1b;
}

/* Keep header block untouched (per request) */

/* Layout & page flow adjustments (make content scroll naturally under fixed header) */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #151616;
  background: #f6f6f6;
}

/* Reserve space for fixed header; use calc so small header height changes still work */
body {
  padding-top: 120px; /* keep same as before but ensures scrolling works */
  line-height: 1.4;
  -webkit-text-size-adjust: 100%;
}

/* Nav related styles (unchanged behavior but ensure wrapping on small screens) */
.navbar {
  position: relative;
  top: 0;
  list-style: none;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.navbar ul{
  margin-bottom: 0;
}

.navbar li {
  display: inline-block;
  padding: 0 12px;
}

.navbar li a {
  transition: all 0.3s ease 0s;
  padding: 8px 10px;
  border-radius: 20px;
}

.navbar li a:hover {
  background-color: #c27416;
  color: #151616;
}

.logo img{
  background-color: transparent;
  border: none;
  transition: all 0.3s ease 0s;
}

.logo img:hover{
  transform: scale(0.95);
  transition: all 0.3s ease 0s;
}

.search-bar {
  display: flex;
  margin-bottom: auto;
  margin-top: 3vh;
  margin-bottom: 2vh;
  justify-content: center;
}

.search-bar input {
  width: 350px;
  height: 50px;
  font-size: 16px;
  font-weight: 700;
  padding: 10px 20px;
  border-radius: 20px;
  border: none;
  box-shadow: 0px 2px 5px rgba(0,0,0,0.2);
  transition: all 0.2s ease-out 0s;
}

.search-bar input:focus{
  background-color:#ffffff !important;
  transition: all 0.2s ease 0s;
  width: 380px;
  outline: none;
  border: 2px solid #151616;
}

.search-icon {
  background-color: transparent;
}

.search-icon {
  display: inline-block;
  position: relative;
  right:60px;
  width: 50px;
  height: 50px;
  overflow: hidden;
  background-color: transparent;
}

.search-bar input:focus .search-icon{
  transform: translateX(-50%);
}

.search-icon img {
  background-color: transparent;
  display: block;
  margin: -25px 0 0 -25px;
}

/* user dropdown */
.user {
  position: relative; 
  background-color: #ed8d1b; 
  padding-bottom: 10px;
}

/* Fix: ensure user container is the positioning context and dropdown sits directly under the icon.
   Keeps the same visual style but removes the gap that caused the menu to hide while moving the cursor. */
.user {
  position: relative; /* create containing block for the dropdown */
}

/* make dropdown items easier to hit on touch */
.user #dropdown li {
  text-align:center;
}

@media (max-width: 420px){
  .user #dropdown{ right: 8px !important; max-width: calc(100vw - 16px) !important; }
}

/* --- Ensure mobile hamburger menu uses the same visual style and always shows when nav-open --- */
@media (max-width: 768px) {
  /* hide desktop nav list */
  .navbar > ul { display: none; }
  header.nav-open .navbar > ul li { padding: 10px 12px; border-radius: 6px; }
  header.nav-open .navbar > ul li a { display:block; padding:6px 8px; }
}

.container{
  padding: 2rem;
}

.slider-wrapper{
  position: relative;
  max-width: 48rem;
  margin: 0 auto;
}

.slider{
  display: flex;
  aspect-ratio: 16 / 9;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  box-shadow: 0 1.5rem 3rem -0.75rem #ed8d1b;
  border-radius: 0.5rem;
  border: 2px solid #151616;
  margin-bottom: 2%;
}

.slider::-webkit-scrollbar {
  display: none;
}

.slider img {
  flex: 0 0 auto;
  width: 100%;
  height: auto;
  scroll-snap-align: start;
  transition: all 0.3s ease 0s;
  background-color: #ffffff;
  object-fit:scale-down;
}

.slider-nav{
  display: flex;
  column-gap: 1rem;
  position: absolute;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  background-color: transparent;
}

.slider-nav a{
  width: 5rem;
  height: 0.2rem;
  background-color:  #ed8d1b;
  opacity: 0.50;
  transition: all 0.3s ease 0s;
  
}

.slider-nav a:hover{
  opacity: 1;
  transition: all 0.3s ease 0s;
  transform: scale(0.95);
}

.header-border {
  display: flex;
  width: 100%;
  background-color: transparent;
  border-bottom: 3px solid #151616;
  padding-bottom: 2px;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
  justify-content: space-between;
  align-items: center;
}

.header-border a {
  display: inline;
  background-color: transparent;
  text-decoration: none;
  font-weight: bold;
  color: #c27416;
  font-size: 24px;
}

.header-border a:hover {
  color: #ed8d1b;
  transition: all 0.3s ease 0s;
}

.header-border #see-more {
  font-size: 16px;
}

.items ul, li, a, p, h2{
  background-color: transparent;
  list-style: none;
}

.card-list .card-item .card-link{
  width: 255px;
  display: block;
  background-color: #ed8d1b;
  padding: 18px;
  border-radius: 12px;
  text-decoration: none;
  border: 2px solid transparent;
  box-shadow: 0 10px 10px rgba(0,0,0,0.2);
  transition: 0.2s ease;
}

.card-list .card-item .card-link:hover{
  border-color:#151616;
  transform: scale(103%);
  box-shadow: 0 1.5rem 3rem -0.75rem #ed8d1b;
}

.card-list .card-item .card-image{
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit:scale-down;
  border-radius: 10px;
  background-color: #ffffff;
}

.card-list .card-item .badge{
  color: #ffffff;
  padding: 8px 16px;
  font-size: 0.95rem;
  font-weight: 500;
  margin: 16px 0 18px;
  background-color:#151616;
  width: fit-content;
  border-radius: 50px;
}

.card-list .card-item .card-title{
  font-size: 1.19rem;
  color:#000;
  font-weight: 600;
}

.items{
    display: flex;
    flex-direction: row;
    gap: 0px;
    overflow-x: none;
    padding: 20px;
    justify-content: center;
    align-items: flex-start;
}
.card-wrapper {
    display: flex;
    justify-content: center;
}

.card-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px; /* spacing between cards */
    padding: 0;
    margin: 0 50px;
    list-style: none;
    max-width: 1300px; /* prevents cards from going too wide */
}

.card-item {
    width: 260px; /* adjust based on your design */
}

.items2{
    display: flex;
    flex-direction: row;
    gap: 0px;
    overflow-x: none;
    padding: 20px;
    justify-content: center;
    align-items: flex-start;
}

.items2 .card-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px; /* spacing between cards */
    padding: 0;
    margin: 0 10vh;
    list-style: none;
    max-width: 1300px; /* prevents cards from going too wide */
}

.items2 .card-item{
  width: auto;
}

.container1{
  display: flex;
  justify-content: space-between; /* space between text & image */
  align-items: center;
  background-color: #dddddd;
  border-top: 3px solid;
  border-color: #151616;
  width: 99.2vw;
  padding: 20px;
}

.wrapper{
  width: 50%;/* adjust size of text column */
  text-align: center; 
  background-color: #dddddd;
}

.wrapper h3, p{
  background-color: #dddddd;
  text-align: left;
  margin-left: 20vw;
}

.wrapper h3{
  font-size: 54px;
}

.wrapper p{
  font-size: 20px;
}

.wrapper2 {
  width: 40%;   /* image section */
  background-color: #dddddd;
}

.wrapper button{
  width: 20%;
  height: 20%;
  margin-left: 25px;
  font-size: 30px;
  background-color: #ed8d1b;
  color:#151616;
  border-radius: 25px;
  border: 2px solid #c27416;
  transition: all 0.2s ease-in-out 0s;
  box-shadow: 0 10px 10px rgba(0,0,0,0.2);
}

.wrapper button:hover{
transform: scale(0.95);
transition: all 0.2s ease-in-out 0s;
border: 2px solid #151616;
}

.wrapper button a{
font-size: 30px;
}

.wrapper2 img{
  border: 5px solid #151616;
  box-shadow: 0 10px 10px #ed8d1b;
}

.container2{
  text-align: center;
  background-color: #dddddd;
  border-top: 3px solid;
  border-color: #151616;
  width: 99.2vw;
  padding: 20px;
  font-size: 52px;
}

.container2 span{
  background-color: #dddddd;
}

.review{
  background-color: #dddddd;
}

.review p{
  margin-left: 300px;
  margin-right: 300px;
  text-align: center;
  font-size: 40px;

}

.review h4, .review strong{
  font-size: 35px;
  background-color: #dddddd;
  margin-top: 50px;
  margin-bottom: 60px;
}

.services{
  text-align: center;
  border-top: 3px solid;
  border-color: #151616;
  width: 99.2vw;
  padding: 20px;
  margin-bottom: 2%;
  font-size: 52px;
}

.services .card-wrapper .card-link{
  width: 500px;
  border: 3px solid #151616;
  pointer-events: none;
  cursor: none;
  box-shadow: 0 1.5rem 3rem -0.75rem #ed8d1b;
}

.services .card-list .card-item .card-link{
  display: block;
  background-color: #ed8d1b;
  padding: 18px;
  border-radius: 0px;
  text-decoration: none;
}

.services .card-list .card-item .card-image{
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit:unset;
  border-radius: 0px;
}

.services .card-list .card-item .badge{
  color: #ffffff;
  padding: 8px 16px;
  font-size: 30px;
  font-weight: 500;
  margin: 16px 0 18px;
  background-color:#151616;
  width: 100%;
  border-radius: 50px;
}

/* Footer */
.footer {
  background-color: #ed8d1b;
  width: 100%;
  border-top: 2px solid #000;
  padding: 40px 60px 20px 60px;
  box-sizing: border-box;
}

.footerArea {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 3rem;
  flex-wrap: wrap;
}

.description p, .contactInfo p{
  margin-left: 0;
}

/* Force each footer column to be a top-aligned flex column and remove stray top spacing */
.footerArea {
  align-items: flex-start !important;
  gap: 2.5rem;
}
.footerArea > * {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Ensure headings/lists/paragraphs inside sections don't add top space */
.footerArea h4, .footerArea p, .footerArea ul, .footerArea .contactInfo {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Keep contact column anchored at same baseline */
.footerArea .section4 {
  align-self: flex-start !important;
}

/* Footer columns: prefer desktop proportions but allow shrink */
.section1 { flex: 0 1 28%; min-width: 180px; max-width: 200px; }
.section2 { flex: 0 1 18%; min-width: 140px; max-width: 260px; }
.section3 { flex: 0 1 14%; min-width: 120px; max-width: 220px; }
.section4 { flex: 0 1 22%; min-width: 160px; max-width: 300px; }

/* Footer logo responsive */
.footerLogo img {
  width: 100%;
  max-width: 150px;
  height: auto;
  display: block;
  margin: 0 auto 12px auto;
}

/* Link groups layout */
.sec2-links, .categoryLinks {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Contact info & social icons */
.contactInfo { display:flex; flex-direction:column; gap:8px; align-items:flex-start; }
.social-media-icons { display:flex; gap:10px; align-items:center; }

/* Smaller desktop / tablet adjustments */
@media (max-width: 992px) {
  .footer { padding: 36px 40px; }
  .footerArea { gap: 2rem; }
  .section1 { flex: 0 1 40%; }
  .section2, .section3, .section4 { flex: 0 1 18%; min-width: 140px; }
  .sec2-links, .categoryLinks { gap:6px; }
}

/* Mobile: stack vertically and center content */
@media (max-width: 768px) {
  .footer {
    padding: 28px 22px;
  }
  .footerArea {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 18px;
  }

  .section1, .section2, .section3, .section4, .description {
    width: 100%;
    max-width: 720px;
    text-align: center;
    padding: 0 6px;
  }

  .sec2-links, .categoryLinks {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 14px;
  }

  .section2 a, .section3 a, .section4 a {
    display: inline-block;
    margin: 6px 8px;
  }

  .footerLogo img { max-width: 120px; }

  .contactInfo { align-items:center; text-align:center; }
  .social-media-icons { justify-content:center; }
}

/* Ensure the user dropdown ignores the inline margin-left and stays inside viewport.
   Uses !important only to override the inline styles present in the HTML. */
.user #dropdown {
  left: auto !important;
  right: 16px !important;
  margin-left: 0 !important;
  max-width: calc(100vw - 32px) !important;
  box-sizing: border-box;
  padding: 6px 8px !important;
  background: rgb(237, 142, 27) !important; /* matches header color */
  border-radius: 6px !important;
  box-shadow: 0 8px 20px rgba(0,0,0,0.12) !important;
  position: absolute !important;
  top: 100% !important;
  z-index: 1100 !important;
}

/* Make dropdown list items comfortably tappable on mobile */
.user #dropdown li {
  padding: 8px 10px;
  white-space: nowrap;
}

/* If the dropdown content is wider than available space, wrap text instead of overflowing */
.user #dropdown, .user #dropdown li, .user #dropdown a {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Tighter right positioning on very small screens */
@media (max-width: 420px) {
  .user #dropdown { right: 8px !important; max-width: calc(100vw - 16px) !important; }
}

/* Fix footer layout: ensure aboutSection participates in the flex layout
   and doesn't stretch full width, keep columns aligned on desktop. */
.aboutSection {
  flex: 0 1 36%;
  min-width: 220px;
  max-width: 520px;
  box-sizing: border-box;
  padding-right: 8px;
}

.description {
  margin: 0;
}

.description p {
  margin-top: 8px;
  line-height: 1.6;
  max-width: 520px;
  color: #151616;
}

/* Footer: left on desktop, centered on smaller windows; slightly smaller desktop type */
@media (min-width: 993px) {
  .footerArea .section1,
  .footerArea .aboutSection,
  .footerArea .section2,
  .footerArea .section3,
  .footerArea .section4 {
    text-align: left !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
  }

  .footerArea h4 {
    font-size: 16px !important;   /* a bit smaller on desktop */
    margin-bottom: 10px;
  }

  .footerArea a {
    font-size: 14px !important;   /* slightly smaller link text on desktop */
    line-height: 1.4;
  }

  .footerArea p {
    font-size: 13.5px !important;
    line-height: 1.6;
  }

  .footerLogo img {
    max-width: 120px !important; /* slightly reduce logo on desktop */
  }
}

/* Keep footer centered on narrower windows */
@media (max-width: 992px) {
  .footerArea .section1,
  .footerArea .aboutSection,
  .footerArea .section2,
  .footerArea .section3,
  .footerArea .section4 {
    text-align: center !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .footerArea h4 {
    font-size: 18px !important;
  }

  .footerArea a {
    font-size: 15px !important;
  }

  .footerArea p {
    font-size: 14px !important;
  }

  .footerLogo img {
    max-width: 110px !important;
  }
}

/* Ensure footer text/links keep the footer background (no white boxes) */
.footerArea p,
.footerArea a,
.footerArea h4 {
  background: transparent !important;
  color: inherit !important;
}

/* Constrain social icons to a sensible size (desktop + mobile breakpoint) */
.social-media-icons img,
.social-media-icons a img,
#fblogo, #iglogo, #tiktoklogo {
  width: 36px !important;
  height: 36px !important;
  object-fit: contain;
  display: inline-block;
}

/* Slightly smaller icons on very small screens */
@media (max-width: 480px) {
  .social-media-icons img,
  .social-media-icons a img,
  #fblogo, #iglogo, #tiktoklogo {
    width: 28px !important;
    height: 28px !important;
  }
}

/* quick fix: keep all footer columns aligned to the top and remove extra top spacing */
.footerArea > * {
  align-self: flex-start !important; /* ensure every column sits at the same top baseline */
}

/* remove any accidental top margin/padding that can push contact details down */
.section4, .contactInfo, .footerArea .section4 h4, .footerArea .section4 p, .footerArea .section4 ul {
  margin-top: 0 !important;
  padding-top: 0 !important;
  margin-bottom: 0 !important;
}

/* ensure footer logo doesn't introduce extra height on the left column */
.footerLogo,
.footerLogo img {
  margin: 0 !important;
  padding: 0 !important;
  display: block;
  max-width: 120px;
  height: auto;
}

/* keep headings compact so they don't offset column tops */
.footerArea h4 {
  margin-top: 0 !important;
  margin-bottom: 8px !important;
}

/* restore centered behavior on smaller screens */
@media (max-width: 992px) {
  .footerArea > * { align-self: center !important; text-align: center !important; }
  .footerLogo img { margin: 0 auto 12px !important; }
}



/* 1) Base hamburger (stacked bars) */
.nav-toggle{
  display: none;              /* Shown only under 992px */
  width: 42px;
  height: 42px;
  padding: 8px;
  border: none;
  border-radius: 8px;
  background: #ed8d1b;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex-direction: column;     /* stack bars */
}

.nav-toggle .bar{
  width: 24px; height: 3px;
  background: #151616;
  border-radius: 2px;
  transition: transform 180ms ease, opacity 180ms ease;
}

/* This animates the three bars into an X when header has .nav-open */
.nav-open .nav-toggle .bar:nth-child(1){ transform: translateY(8px) rotate(50deg); }
.nav-open .nav-toggle .bar:nth-child(2){ opacity: 0; }
.nav-open .nav-toggle .bar:nth-child(3){ transform: translateY(-8px) rotate(-50deg); }



.nav-open .nav-toggle .bar{
  background-color: #151616;
}


/* Mobile behaviour: hide list by default; show the orange panel when nav-open */
@media (max-width: 992px){
  .nav-toggle{ display: inline-flex; }
  .navbar > ul{ display: none; }
  header.nav-open .navbar > ul{
    display: flex !important;
    width: 220px !important;
    max-height: 70vh; overflow-y: auto;
    flex-direction: column; gap: 6px;
    margin: 0; padding: 8px 0;
    background: #ed8d1b !important;
    box-shadow: 0 8px 28px rgba(0,0,0,0.18) !important;
    border-radius: 10px !important;
    border: 1px solid #000 !important;
    text-align: center; z-index: 1400 !important;
  }
  header.nav-open .navbar > ul li{ padding: 10px 12px; border-radius: 6px; }
  header.nav-open .navbar > ul li a{ display:block; padding:6px 8px; }
}





@media (max-width: 992px){
  /* Show hamburger, hide horizontal nav list */
  .nav-toggle{ display: inline-flex; }
  .navbar > ul{ display: none; }

  /* Reveal the vertical panel when header has .nav-open */
  header.nav-open .navbar > ul{
    display: flex !important;
    width: 220px !important;
    max-height: 70vh;
    overflow-y: auto;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 8px 0;
    background: #ed8d1b !important;
    box-shadow: 0 8px 28px rgba(0,0,0,0.18) !important;
    border-radius: 10px !important;
    z-index: 1400 !important;
    list-style: none;
    border: 1px solid #000 !important;
    text-align: center;
  }

  /* Optional: tidy list items in the panel */
  header.nav-open .navbar > ul li{ padding: 10px 12px; border-radius: 6px; }
  header.nav-open .navbar > ul li a{ display: block; padding: 6px 8px; }
}


@media (min-width: 993px){
  .navbar > ul{
    display: flex !important; 
    flex-direction: row !important;
    position: static !important;
    background: transparent !important;
    box-shadow: none !important; 
    border: none !important;
  }
  .nav-toggle{ display: none; }
}