/* 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 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;
  width: 88px;
  height: 88px;
  border: none;
  transition: all 0.3s ease 0s;
}

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

/* user dropdown */
.user {
  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 */
}

/* --- REPLACED: remove hover-triggered dropdown and use .open class instead --- */
/* (This replaces the previous ".user:hover #dropdown, .user:focus-within #dropdown" rule) */
.user #dropdown {
  position: absolute !important;
  top: calc(100% + 6px) !important;
  right: 12px !important;
  left: auto !important;
  margin-left: 0 !important;
  z-index: 1400 !important;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 160ms ease, transform 160ms ease, visibility 160ms;
  pointer-events: none;
  box-sizing: border-box;
  background: #ed8d1b !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 20px rgba(0,0,0,0.12) !important;
  padding: 8px 0 !important;
  width: 200px;
  border: 1px solid #000 !important; /* added black border */
}

/* Visible only when .open class is added by JS */
.user.open #dropdown {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
}

/* make dropdown items easier to hit on touch */
.user #dropdown li {
  padding: 10px 12px;
  white-space: nowrap;
  display:block;
  text-align:center;
}

/* --- 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; }

  /* when header has .nav-open, show a panel (JS sets exact top/left/width) */
  header.nav-open .navbar > ul {
    display: flex !important;
    position: absolute !important; /* JS will compute top/left */
    top: 0 !important;              /* reset until JS positions it */
    left: 0 !important;
    transform: none !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; /* same stacking as user dropdown */
    list-style: none;
    border: 1px solid #000 !important; /* match user dropdown border */
    text-align: center;
  }

  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 improvements */
.container{
  text-align: center;
  margin: 24px auto;
  max-width: 920px; /* slightly wider for desktop */
  width: 100%;
  padding: 0 16px;
}

/* main card */
.container1{
  border: 2px solid #000000;
  padding: 2rem;
  position: relative;
  margin: 0 auto;
  background-color:#e9e9e9;
  width: 100%;
  font-size: 20px;
  box-shadow: 0 1.5rem 3rem -0.75rem #ed8d1b;
  border-radius: 10px;
  box-sizing: border-box;
  max-width: 760px;
}

/* form elements */
.container form, p, #num1, #num2, #num3, #num4{
  background-color:#e9e9e9;
  position: relative;
}

/* focus and input styles */
.calc #num1, .calc #num2, .calc #num3, .calc #num4:focus{
  border: 1px solid #000000;
}

.calc #num1, .calc #num2, .calc #num3, .calc #num4{
  font-weight: 600;
}

/* labels */
.control-label{
  background-color: #e9e9e9;
  font-weight: 600;
  display: block;
  margin-bottom: 8px;
  text-align: left;
}

/* layout blocks */
.form{
  padding:10px 0;
}

.calc{
  margin-bottom: 12px;
  text-align: left;
}

/* inputs - responsive widths */
.calc input[type="number"], .calc select, .calc input[type="text"] {
  width: 100%;
  padding: 10px 12px;
  font-size: 16px;
  border: 1px solid #bdbdbd;
  border-radius: 6px;
  background: #fff;
  box-sizing: border-box;
}

/* focus */
.calc input:focus, .calc #num4:focus{
  background-color:#ffffff !important;
  border: 2px solid #000000;
  outline: none;
}

/* tile select width */
.calc #num4{
  width: 100%;
  text-align: center;
  font-weight: 600;
}

/* enlarge checkbox */
.calc #checkbox{
  transform:scale(1.1);
  margin: 5px;
}

/* responsive manual pricing grid (use auto-fit for small screens) */
#manualPricing {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
}

/* submit button - fluid */
.submit-button {
  display:flex;
  justify-content:center;
  margin-top: 12px;
}
.submit-button button{
  background-color: #ed8d1b;
  border: 2px solid #000;
  border-radius: 50px;
  font-size: 18px;
  font-weight: 600;
  width: 100%;
  max-width: 420px;
  height: 44px;
  cursor: pointer;
}

/* results */
.result {
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 5px;
  font-size: 14px;
  text-align: left;
  word-break: break-word;
}

.result.ok {
  background: #e9e9e9;
  border: 2px solid #ed8d1b;
}

.result.error {
  background: #ed8d1b;
  border: 1px solid #000;
  color: #000;
  font-size: 18px;
  font-weight: 600;
}

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

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

/* 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; }
}

/* Very small phones: tighten spacing */
@media (max-width: 480px) {
  .footer { padding: 20px 12px; }
  .footerArea { gap: 12px; }
  .footerLogo img { max-width: 100px; }
  .section2 a, .section3 a, .section4 a { display:block; margin: 6px 0; }
  .section1 p, .description p { font-size: 14px; line-height: 1.5; }
  .contactInfo p { font-size: 13px; }
  .social-media-icons img { height: 28px; width: 28px; }
}

/* Small tweak: ensure footer links wrap without overflow */
.footerArea a { word-break: break-word; }

/* ========== Responsive breakpoints (preserve original header & dropdown) ========== */

/* Large tablets and small desktops */
@media (max-width: 992px) {
  /* Do NOT modify header here to preserve original navbar design */
  .logo img { width: 76px; height: 76px; }
  .container1 { padding: 1.6rem; max-width: 720px; }
  #manualPricing { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  .section2 a, .section3 a, .section4 a { margin-right: 24px; }
}

/* Tablets / landscape phones */
@media (max-width: 768px) {
  body { padding-top: 110px; }
  /* HEADER STYLES INTENTIONALLY LEFT UNCHANGED */
  .logo img { width: 64px; height: 64px; }
  .navbar li { padding: 0 8px; }
  .navbar li a { font-size: 16px; padding: 6px 8px; }
  .container { max-width: 720px; padding: 0 14px; }
  .container1 { max-width: 680px; padding: 1.2rem; font-size: 18px; }
  .submit-button button { font-size: 18px; height: 44px; }
  #manualPricing { grid-template-columns: repeat(auto-fit, minmax(140px,1fr)); gap: 6px; }
  .footer { padding: 30px 28px 20px 28px; }
  .footerLogo img { width: 120px; height: 120px; }
  .section2 a, .section3 a, .section4 a { margin-right: 18px; font-size: 13px; }
}

/* Phones */
@media (max-width: 480px) {
  body { padding-top: 100px; }
  /* PRESERVE NAVBAR & DROPDOWN ICON — no header rules here */
  .logo img { width: 56px; height: 56px; }
  .navbar { gap: 4px; }
  .navbar li { padding: 0 6px; }
  .navbar li a { font-size: 14px; padding: 6px 6px; }
  .container { max-width: 420px; padding: 0 12px; }
  .container1 { padding: 1rem; font-size: 16px; border-radius: 8px; }
  .control-label { font-size: 15px; }
  .calc { text-align: left; }
  #manualPricing { grid-template-columns: 1fr; }
  .submit-button { padding: 0 8px; }
  .submit-button button { width: 100%; max-width: none; font-size: 18px; height: 44px; border-radius: 32px; }
  .result { font-size: 14px; padding: 10px; }
  .footer { padding: 24px 16px; }
  .footerArea { gap: 4%; }
  .section2 a, .section3 a, .section4 a { display: block; margin: 6px 0; }
  .footerLogo img { width: 100px; height: 100px; }
}

/* Very small screens */
@media (max-width: 360px) {
  .logo img { width: 48px; height: 48px; }
  .container { padding: 0 10px; }
  .submit-button button { height: 40px; font-size: 16px; }
}

/* Accessibility: ensure focus outlines visible */
button:focus, input:focus, select:focus, a:focus {
  outline: 3px solid rgba(21,22,22,0.12);
  outline-offset: 2px;
}

/* ===== Overrides to preserve original header look but fix dropdown + mobile overflow ===== */

/* Prevent page horizontal scroll that appears when dropdown uses inline margin-left */
html, body {
  overflow-x: hidden;
}

/* 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; }
}

/* Small improvement: ensure the form card doesn't push off-screen on narrow viewports */
.container {
  padding-left: 12px;
  padding-right: 12px;
}

/* Ensure any large fixed header spacing does not hide the top of the card on small screens */
@media (max-width: 480px) {
  .container1 {
    padding: 1rem;
  }
  .or-label h2 {
    font-size: 1rem;
    margin: 8px 0;
  }
}

/* ----- Ensure mobile nav-open state does NOT break desktop layout ----- */
@media (min-width: 769px) {
  /* Always show the desktop horizontal list and reset any mobile positioning */
  .navbar > ul {
    display: flex !important;
    flex-direction: row !important;
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: auto !important;
    margin: 0 !important;
    padding-right: 30px !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    z-index: auto !important;
    text-align: inherit !important;
  }

  /* If header still has .nav-open (leftover), neutralize the mobile panel styles */
  header.nav-open .navbar > ul {
    position: static !important;
  }

  /* ensure list items keep inline desktop spacing */
  .navbar > ul > li {
    display: inline-block !important;
    margin-right: 0 !important;
    text-align: left !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;
  }
}

/* Fix: stop styling every <p> (caused footer & other areas to get wrong backgrounds),
   and restore targeted form/background styles + constrain social icons size. */

/* Scoped form paragraph / label background only (remove bare "p" from selector) */
.container form p,
.container1 p,
.container form .control-label,
.container1 .control-label,
#num1, #num2, #num3, #num4 {
  background-color: #e9e9e9;
  position: relative;
}

/* 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; }
}