/*
  Custom navigation bar styles for Sunset View Patios.
  This stylesheet defines a responsive, sticky quote bar with an integrated
  mini‑form, call‑to‑action button, and an accessible off‑canvas menu.
  Colors are drawn from the existing theme (see variables below) so
  updating the palette only requires changing the variables.
*/

:root {
  --nav-bg: #022f6b;      /* dark blue base to match existing palette */
  --nav-text: #ffffff;    /* white text for contrast */
  --nav-accent: #fe5d14;  /* primary accent (orange) from theme */
  --nav-cta-bg: #fe5d14;  /* CTA button background */
  --nav-cta-text: #ffffff;/* CTA button text */
}

.sv-nav {
  position: fixed; /* Changed from sticky to fixed for better cross-browser support */
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background-color: var(--nav-bg);
  padding: 0.5rem 1rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transform: translateY(-100%);
  transition: transform 0.4s ease-in-out;
  will-change: transform;
  /* Safari/iOS fixes */
  -webkit-transform: translateY(-100%);
  -webkit-transition: -webkit-transform 0.4s ease-in-out;
  /* Hardware acceleration for smooth animations */
  transform: translateY(-100%) translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.sv-nav--visible {
  transform: translateY(0) translateZ(0);
  -webkit-transform: translateY(0) translateZ(0);
}

.sv-nav-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  /* Cross-browser flexbox fixes */
  min-height: 0;
  min-width: 0;
}

.sv-nav-left {
  display: flex;
  flex-direction: column;
  margin-right: 1rem;
  color: var(--nav-text);
  flex-shrink: 0; /* Prevent shrinking */
  min-width: 0; /* Allow text truncation if needed */
}

.sv-nav-heading {
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--nav-text);
  white-space: nowrap; /* Prevent text wrapping */
}

.sv-nav-subheading {
  font-size: 0.75rem;
  color: var(--nav-text);
  opacity: 0.8;
  white-space: nowrap; /* Prevent text wrapping */
}

.sv-nav-form {
  display: flex;
  align-items: center;
  flex: 1 1 auto; /* Changed from flex-grow: 1 for better cross-browser support */
  gap: 0.5rem;
  flex-wrap: wrap;
  min-width: 0; /* Allow shrinking */
  /* Cross-browser flexbox fixes */
  flex-basis: auto;
}

.sv-nav-form input {
  flex: 1 1 120px; /* Changed from flex: 1 1 0 and min-width for better control */
  min-width: 120px; /* Reduced from 140px to prevent wrapping */
  max-width: 200px; /* Prevent inputs from getting too wide */
  padding: 0.4rem 0.75rem;
  border-radius: 20px;
  border: none;
  background-color: #ffffff;
  font-size: 0.85rem;
  color: #333333;
  /* Cross-browser input fixes */
  box-sizing: border-box;
  height: 36px; /* Fixed height for consistent alignment */
  line-height: 1.2;
  /* Safari input fixes */
  -webkit-appearance: none;
  -webkit-border-radius: 20px;
  /* Prevent zoom on iOS */
  font-size: 16px;
}

.sv-nav-form input:focus {
  outline: 2px solid var(--nav-accent);
  outline-offset: 2px;
}

.sv-nav-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0; /* Prevent shrinking */
  min-width: 0; /* Allow shrinking if absolutely necessary */
}

.sv-nav-cta {
  background-color: var(--nav-cta-bg);
  color: var(--nav-cta-text);
  border: none;
  border-radius: 20px;
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.2s ease;
  /* Cross-browser button fixes */
  height: 36px; /* Match input height */
  line-height: 1.2;
  white-space: nowrap; /* Prevent text wrapping */
  /* Safari button fixes */
  -webkit-appearance: none;
  -webkit-border-radius: 20px;
}

.sv-nav-cta:hover,
.sv-nav-cta:focus {
  background-color: #c74b10;
  outline: none;
}

.sv-nav-toggle {
  background: none;
  border: none;
  padding: 0;
  width: 28px;
  height: 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  flex-shrink: 0; /* Prevent shrinking */
}

.sv-nav-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  margin: 3px 0;
  background-color: var(--nav-text);
  border-radius: 1px;
  transition: all 0.3s ease;
}

.sv-nav-toggle:focus {
  outline: 2px solid var(--nav-accent);
  outline-offset: 2px;
}

/* Off‑canvas */
.sv-offcanvas {
  position: fixed;
  top: 0;
  right: -320px;
  width: 320px;
  height: 100vh;
  background-color: var(--nav-bg);
  color: var(--nav-text);
  z-index: 2000;
  transition: right 0.3s ease;
  display: flex;
  flex-direction: column;
  padding: 1rem;
  /* Safari/iOS fixes */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.sv-offcanvas.open {
  right: 0;
}

.sv-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
  z-index: 1500;
}

.sv-overlay.open {
  opacity: 1;
  visibility: visible;
}

.sv-offcanvas-header {
  display: flex;
  justify-content: flex-end;
}

.sv-offcanvas-close {
  background: none;
  border: none;
  color: var(--nav-text);
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
}

.sv-offcanvas-nav ul {
  list-style: none;
  padding: 0;
  margin: 1rem 0;
}

.sv-offcanvas-nav li {
  margin-bottom: 0.75rem;
}

.sv-offcanvas-nav a {
  color: var(--nav-text);
  text-decoration: none;
  font-size: 1rem;
  display: block;
}

.sv-offcanvas-nav a:hover,
.sv-offcanvas-nav a:focus {
  color: var(--nav-accent);
}

/* Responsive tweaks with improved cross-browser support */
@media (max-width: 992px) {
  .sv-nav-form {
    flex-basis: 100%;
    order: 3; /* Move form below other elements */
  }
  
  .sv-nav-left {
    order: 1;
  }
  
  .sv-nav-right {
    order: 2;
    margin-left: auto; /* Keep right-aligned */
  }
}

@media (max-width: 768px) {
  .sv-nav-form {
    display: none;
  }
  
  .sv-nav-left {
    margin-bottom: 0.5rem;
    flex: 1 1 auto; /* Allow growing to fill space */
  }
  
  .sv-nav-right {
    flex-shrink: 0; /* Keep button and menu from shrinking */
  }
}

/* iOS Safari specific fixes */
@supports (-webkit-touch-callout: none) {
  .sv-nav {
    /* Safe area insets for iOS */
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
  }
  
  .sv-nav-form input {
    /* Prevent zoom on iOS */
    font-size: 16px;
  }
}

/* Accessibility helpers */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.focusable:focus {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}