/*
 * DL Core — Responsive overrides
 *
 * Loaded last on every DL page. Houses site-wide header/nav fixes and
 * component tweaks for small screens that previously lived in Elementor
 * custom CSS. Keep this file organised by breakpoint.
 * ------------------------------------------------------------------ */


/* ==================================================================
   HEADER / MEGA MENU — tablet & mobile (≤ 1024 px)
   ================================================================== */

@media only screen and (max-width: 1024px) {

  /* Full-screen mobile menu panel */
  #mega-menu-menu-1 {
    height: 100vh !important;
    padding: 12px 10px !important;
    margin-top: 18px !important;
    position: fixed !important;
    left: 0 !important;
    overflow: auto !important;
  }

  /* Top-level links: bigger, bolder */
  #mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-item > a.mega-menu-link {
    display: inline-block;
    font-size: 1.4em;
    font-weight: 900;
  }

  /* Item spacing */
  .mega-menu-horizontal li {
    padding: 0 18px !important;
  }
  #mega-menu-menu-1 li {
    padding: 4px !important;
  }

  /* Focus / hover states */
  #mega-menu-menu-1 li a:focus,
  #mega-menu-menu-1 li a:hover {
    outline: 3px solid #282828 !important;
    text-decoration: underline;
  }

  /* Secondary nav items (items 7-9) */
  .mega-menu-horizontal li:nth-child(7) a,
  .mega-menu-horizontal li:nth-child(8) a,
  .mega-menu-horizontal li:nth-child(9) a {
    width: 100% !important;
    font-size: 1.3em !important;
    font-weight: 700 !important;
  }

  /* Items 7-10 shared */
  .mega-menu-horizontal li:nth-child(7) a,
  .mega-menu-horizontal li:nth-child(8) a,
  .mega-menu-horizontal li:nth-child(9) a,
  .mega-menu-horizontal li:nth-child(10) a {
    color: #282828;
    font-size: 1.7em;
    font-weight: 600;
    padding: 0;
    margin: 0 5px !important;
  }

  /* CTA / final nav item */
  .mega-menu-horizontal li:nth-child(10) {
    padding: 10px !important;
    margin: 40px 10px !important;
    font-size: 1.6em;
  }
  .mega-menu-horizontal li:nth-child(10) a {
    font-weight: 700;
  }

  /* Sub-menu widget alignment */
  .mega-menu-horizontal .elementor-widget-container {
    text-align: center;
  }
  .mega-menu-horizontal .elementor-widget-container .elementor-grid-item {
    padding: 10px;
  }

  /* Prevent body scroll when mobile menu is open */
  .mega-menu-menu-1-mobile-open {
    overflow: hidden;
  }

  /* Visual separator between primary & secondary items */
  #mega-menu-menu-1 li:nth-child(6) {
    padding-bottom: 30px !important;
    border-bottom: 3px solid #282828 !important;
  }
  #mega-menu-menu-1 li:nth-child(7) {
    padding-top: 30px !important;
  }
}


/* ==================================================================
   DL COMPONENTS — small phones (≤ 500 px)
   ================================================================== */

@media only screen and (max-width: 500px) {

  /* -- Vault cards ------------------------------------------------- */
  .dl-card {
    padding: 20px 5px !important;
  }
  .dl-table th,
  .dl-table td {
    padding: 8px 3px !important;
    font-size: 1.05em !important;
  }
  .dl-card-body .actions {
    gap: 3px !important;
  }
  .dl-card-body a.btn,
  .dl-card-body .btn {
    padding: 10px !important;
  }
  .dl-card .actions .btn + .btn {
    margin-left: 5px;
  }
  .dl-vault .dl-card.editing input.dl-input {
    padding: 6px 0 !important;
  }
  .dl-vault .dl-sort-wrap {
    min-width: 100px !important;
  }

  /* -- Gauge grids (Origin + Arc) ---------------------------------- */
  #dl-gauges {
    grid-template-columns: repeat(2, minmax(120px, 1fr)) !important;
  }
  #dl-arc-gauges {
    grid-template-columns: repeat(2, minmax(120px, 1fr)) !important;
  }

  /* -- Origin stepper pills ---------------------------------------- */
  .dl-step {
    padding: 11px 5px !important;
    color: #282828 !important;
    font-size: 0.9em !important;
    background: transparent !important;
    border-radius: 0 !important;
    border: 0 none !important;
  }
  .dl-step.is-active {
    border: 2px solid #282828 !important;
  }

  /* -- String gauge fields ----------------------------------------- */
  .str-gauge .dl-field {
    flex: 1 1 150px;
    min-width: 100px;
  }

  /* -- Toggle pills ------------------------------------------------ */
  .dl-toggles {
    gap: 3px !important;
    margin: 0 !important;
  }
  .dl-toggle {
    gap: 5px !important;
    padding: 6px 7px !important;
  }
}