/* ==========================================================================
   LIQUOR COMPLIANCE - COMPREHENSIVE RESPONSIVE STYLESHEET
   Refined Mobile-First UI/UX System for NZ Compliance Platform
   ========================================================================== */

/* --- Global Resets & Viewport Safety --- */
*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  overflow-x: clip !important;
  width: 100% !important;
  max-width: 100vw !important;
  margin: 0;
  padding: 0;
  -webkit-text-size-adjust: 100%;
}

img, video, iframe, svg {
  max-width: 100%;
  height: auto;
}

/* Ensure absolute-positioned images in aspect-ratio containers stay 100% full height */
img[style*="position: absolute"] {
  height: 100% !important;
  width: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
}

div[style*="aspect-ratio"] {
  position: relative !important;
  overflow: hidden !important;
}

div[style*="aspect-ratio"] img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
}

/* Accessibility & Touch Target Minimums */
a, button, input, select, textarea, [role="button"] {
  touch-action: manipulation;
}

/* Desktop Defaults for Mobile Navigation Elements */
.lc-menu-toggle {
  display: none !important;
}

.lc-mobile-drawer {
  display: none;
}

/* ==========================================================================
   TABLET & MOBILE BREAKPOINT (<= 991px)
   ========================================================================== */
@media (max-width: 991px) {

  /* --- 1. Header & Mobile Navigation --- */
  header {
    height: 68px !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
  }

  header > div[style*="max-width: 1440px"],
  header > div {
    height: 68px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  header a[style*="display: flex; align-items: center"] {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex: 0 1 auto !important;
    margin-right: auto !important;
  }

  header img[src*="logo"] {
    width: 40px !important;
    height: 40px !important;
  }

  header a[style*="display: flex; align-items: center"] > div[style*="font-family: Jost"] {
    font-size: 14.5px !important;
    letter-spacing: 0.12em !important;
    white-space: nowrap !important;
  }

  /* HIDE ALL DESKTOP NAV AND DESKTOP BUTTONS IN HEADER */
  header nav,
  header div[style*="margin-left: auto"],
  header a[style*="margin-left: auto"],
  header a[data-hv="h2"],
  header a[data-hv="h3"],
  header a[href="#finder"],
  header a[href="#form"],
  header a[style-hover*="background: #D9B182"],
  header a[style-hover*="border-color: #B8875A"] {
    display: none !important;
  }

  /* SHOW HAMBURGER TOGGLE BUTTON */
  .lc-menu-toggle {
    display: flex !important;
    margin-left: auto !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    background: #131D26 !important;
    border: 1px solid #364452 !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 0 !important;
    z-index: 1002 !important;
    flex-shrink: 0 !important;
    transition: background 140ms, border-color 140ms !important;
  }

  .lc-menu-toggle:hover,
  .lc-menu-toggle:active {
    background: #1C2732 !important;
    border-color: #B8875A !important;
  }

  .lc-menu-toggle span {
    display: block !important;
    width: 22px !important;
    height: 2px !important;
    background: #F3EFE7 !important;
    border-radius: 1px !important;
    transition: transform 200ms ease, opacity 200ms ease !important;
  }

  .lc-menu-toggle.is-active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg) !important;
  }
  .lc-menu-toggle.is-active span:nth-child(2) {
    opacity: 0 !important;
  }
  .lc-menu-toggle.is-active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg) !important;
  }

  /* Mobile Navigation Drawer */
  .lc-mobile-drawer {
    position: fixed;
    top: 68px;
    left: 0;
    width: 100vw;
    height: calc(100vh - 68px);
    background: rgba(10, 14, 18, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid #22303C;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    padding: 24px 20px 36px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity 200ms ease, transform 200ms ease, visibility 200ms ease;
  }

  .lc-mobile-drawer.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }

  body.lc-menu-open {
    overflow: hidden !important;
  }

  .lc-drawer-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    border-bottom: 1px solid #22303C;
    padding-bottom: 20px;
    margin-bottom: 22px;
  }

  .lc-drawer-link {
    font-family: Jost, sans-serif;
    font-size: 22px;
    font-weight: 400;
    color: #B6C0C8;
    text-decoration: none;
    padding: 13px 12px;
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: color 140ms, background 140ms;
  }

  .lc-drawer-link:hover,
  .lc-drawer-link:active,
  .lc-drawer-link.is-active {
    color: #F3EFE7;
    background: #131D26;
  }

  .lc-drawer-link::after {
    content: '→';
    font-family: 'IBM Plex Mono', monospace;
    font-size: 16px;
    color: #8A6236;
    transition: transform 140ms;
  }

  .lc-drawer-link:hover::after {
    transform: translateX(4px);
    color: #B8875A;
  }

  .lc-drawer-actions {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .lc-drawer-quote-btn {
    background: #B8875A;
    color: #06090C !important;
    font-family: Manrope, sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 16px 20px;
    text-align: center;
    border: 0;
    display: block;
    width: 100%;
    text-decoration: none;
  }

  .lc-drawer-quick-contacts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .lc-drawer-quick-item {
    background: #131D26;
    border: 1px solid #22303C;
    padding: 14px 10px;
    text-align: center;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
  }

  .lc-drawer-quick-item span:first-child {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 9.5px;
    letter-spacing: 0.16em;
    color: #8A6236;
    text-transform: uppercase;
  }

  .lc-drawer-quick-item span:last-child {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12.5px;
    color: #EFEBE3;
    font-weight: 600;
  }

  /* --- 2. Container & Section Spacing --- */
  div[style*="max-width: 1440px"],
  div[style*="max-width: 1040px"] {
    padding-left: clamp(16px, 4.5vw, 24px) !important;
    padding-right: clamp(16px, 4.5vw, 24px) !important;
  }

  section > div[style*="padding: 76px"],
  section > div[style*="padding: 84px"],
  section > div[style*="padding: 96px"],
  section > div[style*="padding: 68px"],
  section > div[style*="padding: 66px"],
  section > div[style*="padding: 56px"] {
    padding-top: 36px !important;
    padding-bottom: 36px !important;
  }

  /* --- 3. Hero Section Gap Reduction (Home Page) --- */
  #top > div[style*="max-width: 1440px"],
  #top > div[style*="grid-template-columns"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }

  #top > div > div:first-child,
  div[style*="padding: 76px 0 68px"] {
    padding: 0 !important;
    gap: 16px !important;
  }

  /* Badges box: eliminate bottom margins */
  div[style*="border-top: 1px solid #22303C; padding-top: 22px; margin-top: 6px"] {
    margin-top: 0 !important;
    padding-top: 14px !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    border-top: 1px solid #22303C !important;
  }

  /* Restaurant photo container below badges - GAP REDUCED TO 1/3 (~18px) */
  #top > div > div:nth-child(2),
  div[style*="padding: 56px 0 56px"] {
    padding: 0 !important;
    margin-top: 18px !important;
    margin-bottom: 8px !important;
    display: block !important;
    width: 100% !important;
    min-height: 0 !important;
  }

  /* Restaurant photo aspect ratio & sizing */
  div[style*="aspect-ratio: 941 / 1672"] {
    aspect-ratio: 16 / 10 !important;
    width: 100% !important;
    max-height: 260px !important;
    margin: 0 !important;
  }

  /* --- 4. Training Page Hero Section Fix --- */
  /* Collapse 0.85fr 1.15fr grid to 1 column */
  [style*="grid-template-columns: 0.85fr 1.15fr"] {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }

  [style*="grid-template-columns: 0.85fr 1.15fr"] > div {
    width: 100% !important;
  }

  /* Training Hero Buttons */
  div[style*="display: flex; gap: 12px; flex-wrap: wrap"] {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  div[style*="display: flex; gap: 12px; flex-wrap: wrap"] > a {
    text-align: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 48px !important;
    display: flex !important;
    align-items: center !important;
  }

  /* Training hero image */
  div[style*="aspect-ratio: 1672 / 941"] {
    aspect-ratio: 16 / 10 !important;
    width: 100% !important;
    max-height: 260px !important;
    margin: 0 !important;
  }

  /* --- 5. Guides Page Featured Card Fix --- */
  /* Collapse 70% 30% grid to 1 column on <a> tag */
  a[href*="temporary-authority.html"][style*="grid-template-columns"],
  [style*="grid-template-columns: 70% 30%"] {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
  }

  [style*="grid-template-columns: 70% 30%"] > div:first-child,
  a[href*="temporary-authority.html"] div[style*="aspect-ratio: 1086 / 1448"] {
    width: 100% !important;
    aspect-ratio: 16 / 10 !important;
    max-height: 240px !important;
    position: relative !important;
  }

  [style*="grid-template-columns: 70% 30%"] > div:last-child {
    padding: 24px 20px !important;
    width: 100% !important;
  }

  /* --- 6. Contact Page Fixes --- */
  /* Contact page First conversation image container */
  div[style*="aspect-ratio: 1448 / 1086"] {
    aspect-ratio: 16 / 10 !important;
    width: 100% !important;
    min-height: 220px !important;
    display: block !important;
    position: relative !important;
    overflow: hidden !important;
  }

  div[style*="aspect-ratio: 1448 / 1086"] img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    display: block !important;
  }

  /* FAQ Section: stack title on top, full-width questions/answers below */
  [style*="grid-template-columns: 0.7fr 1.3fr"],
  [style*="grid-template-columns: 0.72fr 1.28fr"] {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    align-items: stretch !important;
    width: 100% !important;
  }

  [style*="grid-template-columns: 0.7fr 1.3fr"] > div,
  [style*="grid-template-columns: 0.72fr 1.28fr"] > div {
    width: 100% !important;
    max-width: 100% !important;
  }

  [style*="grid-template-columns: 0.7fr 1.3fr"] h2,
  [style*="grid-template-columns: 0.72fr 1.28fr"] h2 {
    margin-bottom: 4px !important;
  }

  /* FAQ answer text padding - make 100% full width on mobile */
  [style*="padding: 0 60px 24px 0"] {
    padding: 0 0 20px 0 !important;
    max-width: 100% !important;
  }

  /* --- 7. Full Grid System Collapsing (Comprehensive) --- */
  [style*="grid-template-columns: 1.08fr"],
  [style*="grid-template-columns: 1.15fr"],
  [style*="grid-template-columns: 1.2fr"],
  [style*="grid-template-columns: 1.35fr"],
  [style*="grid-template-columns: 1.4fr"],
  [style*="grid-template-columns: 1.1fr"],
  [style*="grid-template-columns: 1.6fr"],
  [style*="grid-template-columns: 0.8fr"],
  [style*="grid-template-columns: 1.05fr"],
  [style*="grid-template-columns: 1fr 1.25fr"],
  [style*="grid-template-columns: 1fr 280px"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* Fixed pixel grid on fee calculator */
  [style*="grid-template-columns: 1fr 440px"] {
    grid-template-columns: 1fr !important;
    border: none !important;
  }
  [style*="grid-template-columns: 1fr 440px"] > div {
    border: 1px solid #22303C !important;
    margin-bottom: 16px !important;
  }

  /* 3-Column Grids */
  [style*="grid-template-columns: repeat(3, 1fr)"],
  [style*="grid-template-columns: 1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* 4-Column Grids */
  [style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  /* 5-Column Grids (Trust strip & subnav) */
  [style*="grid-template-columns: repeat(5, 1fr)"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 0 !important;
  }

  [style*="grid-template-columns: repeat(5, 1fr)"] > div,
  [style*="grid-template-columns: repeat(5, 1fr)"] > a {
    padding: 14px 12px !important;
    border-right: 1px solid #E0D8C8 !important;
    border-bottom: 1px solid #E0D8C8 !important;
  }

  [style*="grid-template-columns: repeat(5, 1fr)"] > div:nth-child(2n),
  [style*="grid-template-columns: repeat(5, 1fr)"] > a:nth-child(2n) {
    border-right: none !important;
  }

  [style*="grid-template-columns: repeat(5, 1fr)"] > div:last-child,
  [style*="grid-template-columns: repeat(5, 1fr)"] > a:last-child {
    grid-column: 1 / -1;
    border-right: none !important;
    border-bottom: none !important;
  }

  /* 6-Column Grids */
  [style*="grid-template-columns: repeat(6, 1fr)"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 1px !important;
  }

  /* 2-Column Generic Grids */
  [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  /* Footers */
  footer > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    padding-top: 40px !important;
    padding-bottom: 28px !important;
  }

  /* --- 8. Fluid Typography --- */
  h1, div[style*="font-size: 76px"], div[style*="font-size: 64px"], div[style*="font-size: 62px"], h1[style*="font-size"] {
    font-size: clamp(28px, 7.5vw, 38px) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.015em !important;
  }

  h2, div[style*="font-size: 58px"], div[style*="font-size: 52px"], div[style*="font-size: 48px"], div[style*="font-size: 44px"], h2[style*="font-size"] {
    font-size: clamp(24px, 6.5vw, 32px) !important;
    line-height: 1.12 !important;
    letter-spacing: -0.01em !important;
  }

  h3, div[style*="font-size: 40px"], div[style*="font-size: 34px"], div[style*="font-size: 32px"] {
    font-size: clamp(20px, 5vw, 26px) !important;
    line-height: 1.18 !important;
  }

  p[style*="font-size: 20px"] {
    font-size: 16.5px !important;
    line-height: 1.6 !important;
  }

  p[style*="font-size: 19px"],
  p[style*="font-size: 18px"] {
    font-size: 15.5px !important;
    line-height: 1.65 !important;
  }

  p[style*="font-size: 17px"],
  p[style*="font-size: 16.5px"] {
    font-size: 15px !important;
    line-height: 1.7 !important;
  }

  /* Buttons & CTA Stacks */
  div[style*="display: flex; gap: 14px; align-items: center"] {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  div[style*="display: flex; gap: 14px; align-items: center"] > a,
  div[style*="display: flex; gap: 14px; align-items: center"] > button {
    text-align: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 48px !important;
    display: flex !important;
    align-items: center !important;
  }

  /* --- 9. Form & Touch Optimizations --- */
  #form div[style*="padding: 44px"],
  #form div[style*="padding: 48px"] {
    padding: 22px 16px !important;
  }

  div[style*="border: 1px solid #22303C; background: #0F1720; padding: 44px"],
  div[style*="border: 1px solid #22303C; background: #0F1720; padding: 48px"],
  div[style*="background: #FFFCF6; border: 1px solid #E0D8C8; padding: 44px"] {
    padding: 22px 16px !important;
  }

  input, select, textarea {
    width: 100% !important;
    min-height: 48px !important;
    font-size: 16px !important; /* Prevents auto-zoom on iOS Safari */
  }

  button[style*="display: flex; gap: 13px; align-items: center; padding: 13px 16px"] {
    padding: 14px 12px !important;
    min-height: 48px !important;
  }

  #monthly div[style*="grid-template-columns: 1.4fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  iframe[src*="nz-map.html"] {
    min-height: 380px !important;
  }
}

/* ==========================================================================
   EXTRA SMALL MOBILE SCREENS (<= 480px)
   ========================================================================== */
@media (max-width: 480px) {
  header > div[style*="max-width: 1440px"] {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  [style*="grid-template-columns: repeat(5, 1fr)"] {
    grid-template-columns: 1fr !important;
  }

  [style*="grid-template-columns: repeat(5, 1fr)"] > div,
  [style*="grid-template-columns: repeat(5, 1fr)"] > a {
    border-right: none !important;
  }

  [style*="grid-template-columns: repeat(6, 1fr)"] {
    grid-template-columns: 1fr !important;
  }

  h1, div[style*="font-size: 76px"], div[style*="font-size: 64px"], div[style*="font-size: 62px"], h1[style*="font-size"] {
    font-size: 28px !important;
  }

  h2, div[style*="font-size: 58px"], div[style*="font-size: 52px"], div[style*="font-size: 48px"], div[style*="font-size: 44px"], h2[style*="font-size"] {
    font-size: 22px !important;
  }

  .lc-drawer-quick-contacts {
    grid-template-columns: 1fr !important;
  }
}