.elementor .socal-header{/* =====================================================
 SOCAL SEISMIC — RESPONSIVE HEADER
 Applies ONLY at 1200px and below
 Screens above 1200px remain completely unchanged
 ===================================================== */

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

  /* =================================================
     BRAND COLORS
     ================================================= */

  .socal-header {
      --socal-blue: #336cff;
      --socal-dark-blue: #001e58;
      --socal-red: #cf1729;
      --socal-white: #ffffff;
      --socal-light-gray: #f4f5f7;

      position: relative !important;
      z-index: 9999 !important;
      width: 100% !important;
      overflow: visible !important;
      padding: 16px 24px !important;
  }


  /* =================================================
     MAIN HEADER LAYOUT
     ================================================= */

  .socal-header,
  .socal-header > .e-con-inner {
      display: flex !important;
      flex-direction: row !important;
      align-items: center !important;
      justify-content: space-between !important;
      flex-wrap: nowrap !important;
  }

  .socal-nav-left {
      flex: 0 1 auto !important;
      width: auto !important;
      min-width: 0 !important;
  }

  .socal-nav-right {
      display: flex !important;
      flex: 1 1 auto !important;
      width: auto !important;
      min-width: 0 !important;
      margin-left: auto !important;
      flex-direction: row !important;
      align-items: center !important;
      justify-content: flex-end !important;
      flex-wrap: nowrap !important;
      gap: clamp(12px, 1.5vw, 22px) !important;
  }

  .socal-nav-right > .elementor-element,
  .socal-phone,
  .socal-button,
  .socal-nav-right .elementor-widget-nav-menu {
      flex: 0 0 auto !important;
      width: auto !important;
      max-width: none !important;
  }


  /* =================================================
     LOGO
     ================================================= */

  .socal-logo {
      flex: 0 1 auto !important;
      width: auto !important;
      min-width: 0 !important;
  }

  .socal-logo img {
      display: block !important;
      width: clamp(190px, 22vw, 270px) !important;
      max-width: 100% !important;
      height: auto !important;
  }


  /* =================================================
     CALL NOW BOX
     ================================================= */

  .socal-phone {
      order: 1 !important;
  }

  .socal-phone .elementor-icon-box-wrapper {
      display: flex !important;
      align-items: center !important;
      flex-direction: row !important;
      flex-wrap: nowrap !important;
      gap: 10px !important;
  }

  .socal-phone .elementor-icon-box-icon {
      flex: 0 0 auto !important;
      margin: 0 !important;
  }

  .socal-phone .elementor-icon-box-content {
      flex: 0 0 auto !important;
  }

  .socal-phone .elementor-icon-box-title {
      color: var(--socal-dark-blue) !important;
      font-family: "Michroma", sans-serif !important;
  }

  .socal-phone .elementor-icon-box-description {
      color: var(--socal-blue) !important;
      font-family: "Roboto", sans-serif !important;
  }


  /* =================================================
     CONTACT BUTTON
     ================================================= */

  .socal-button {
      order: 2 !important;
  }

  .socal-button .elementor-button {
      font-family: "Roboto", sans-serif !important;
      font-weight: 700 !important;
      white-space: nowrap !important;
  }


  /* =================================================
     HAMBURGER — ALWAYS SHOW AT 1200PX AND BELOW
     ================================================= */

  .socal-nav-right .elementor-widget-nav-menu {
      order: 3 !important;
      position: relative !important;
      margin: 0 !important;
      overflow: visible !important;
  }

  .socal-nav-right .elementor-widget-nav-menu,
  .socal-nav-right .elementor-widget-nav-menu .elementor-widget-container {
      position: relative !important;
      overflow: visible !important;
  }

  /* Hide regular desktop links */

  .socal-nav-right .elementor-nav-menu--main {
      display: none !important;
  }

  /* Show hamburger */

  .socal-nav-right .elementor-menu-toggle {
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      flex: 0 0 auto !important;
      width: 56px !important;
      height: 56px !important;
      padding: 0 !important;
      margin: 0 0 0 auto !important;
      border: 0 !important;
      border-radius: 4px !important;
      background-color: var(--socal-blue) !important;
      color: var(--socal-white) !important;
      font-size: 28px !important;
      line-height: 1 !important;
      cursor: pointer !important;
  }

  .socal-nav-right .elementor-menu-toggle:hover,
  .socal-nav-right .elementor-menu-toggle:focus {
      background-color: var(--socal-dark-blue) !important;
      color: var(--socal-white) !important;
  }

  .socal-nav-right .elementor-menu-toggle.elementor-active {
      background-color: var(--socal-red) !important;
      color: var(--socal-white) !important;
  }

  .socal-nav-right .elementor-menu-toggle svg {
      width: 28px !important;
      height: 28px !important;
      fill: currentColor !important;
  }


  /* =================================================
     OVERLAY DROPDOWN MENU
     Prevents menu from expanding the header
     ================================================= */

  .socal-nav-right .elementor-nav-menu--dropdown {
      position: absolute !important;
      top: calc(100% + 10px) !important;
      right: 0 !important;
      left: auto !important;
      width: min(340px, calc(100vw - 30px)) !important;
      min-width: 280px !important;
      margin: 0 !important;
      padding: 10px !important;
      z-index: 99999 !important;
      overflow: hidden !important;
      background-color: var(--socal-dark-blue) !important;
      border-top: 4px solid var(--socal-red) !important;
      border-radius: 0 0 6px 6px !important;
      box-shadow: 0 14px 35px rgba(0, 30, 88, 0.25) !important;
  }

  .socal-nav-right .elementor-nav-menu--dropdown ul {
      background-color: transparent !important;
  }

  .socal-nav-right .elementor-nav-menu--dropdown .elementor-item {
      display: flex !important;
      align-items: center !important;
      min-height: 48px !important;
      padding: 12px 16px !important;
      border: 0 !important;
      border-bottom: 1px solid rgba(255, 255, 255, 0.14) !important;
      background-color: transparent !important;
      color: var(--socal-white) !important;
      font-family: "Michroma", sans-serif !important;
      font-size: clamp(12px, 1.2vw, 14px) !important;
      line-height: 1.45 !important;
      text-transform: none !important;
  }

  .socal-nav-right
  .elementor-nav-menu--dropdown
  li:last-child
  > .elementor-item {
      border-bottom: 0 !important;
  }

  .socal-nav-right .elementor-nav-menu--dropdown .elementor-item:hover,
  .socal-nav-right .elementor-nav-menu--dropdown .elementor-item:focus,
  .socal-nav-right .elementor-nav-menu--dropdown .elementor-item-active {
      background-color: var(--socal-blue) !important;
      color: var(--socal-white) !important;
  }
}


/* =====================================================
 TABLET — 1024PX AND BELOW
 ===================================================== */

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

  .socal-header {
      padding: 15px 20px !important;
  }

  .socal-nav-right {
      gap: 12px !important;
  }

  .socal-logo img {
      width: clamp(185px, 25vw, 240px) !important;
  }

  .socal-button .elementor-button {
      padding: 14px 18px !important;
      font-size: 14px !important;
  }
}


/* =====================================================
 MOBILE — 767PX AND BELOW
 Phone icon only; Contact button hidden
 ===================================================== */

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

  .socal-header {
      min-height: 82px !important;
      padding: 13px 15px !important;
  }

  .socal-nav-left {
      flex: 1 1 auto !important;
  }

  .socal-nav-right {
      flex: 0 0 auto !important;
      gap: 8px !important;
      margin-left: 10px !important;
  }

  .socal-logo img {
      width: clamp(150px, 42vw, 205px) !important;
  }

  /* Hide Contact Us button */

  .socal-button {
      display: none !important;
  }

  /* Hide Call Now text and phone number */

  .socal-phone .elementor-icon-box-content {
      display: none !important;
  }

  /* Phone icon button */

  .socal-phone .elementor-icon-box-wrapper {
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      width: 52px !important;
      height: 52px !important;
      padding: 0 !important;
      margin: 0 !important;
      gap: 0 !important;
      border-radius: 4px !important;
      background-color: var(--socal-light-gray) !important;
  }

  .socal-phone .elementor-icon-box-icon,
  .socal-phone .elementor-icon-box-icon a {
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      width: 100% !important;
      height: 100% !important;
      margin: 0 !important;
  }

  .socal-phone .elementor-icon {
      color: var(--socal-blue) !important;
      font-size: 26px !important;
  }

  .socal-phone svg {
      width: 26px !important;
      height: 26px !important;
      fill: currentColor !important;
  }

  /* Hamburger remains on far right */

  .socal-nav-right .elementor-widget-nav-menu {
      margin-left: auto !important;
  }

  .socal-nav-right .elementor-menu-toggle {
      width: 52px !important;
      height: 52px !important;
      font-size: 26px !important;
  }

  .socal-nav-right .elementor-nav-menu--dropdown {
      top: calc(100% + 9px) !important;
      right: 0 !important;
      width: min(320px, calc(100vw - 24px)) !important;
      min-width: 250px !important;
  }
}


/* =====================================================
 SMALL MOBILE — 400PX AND BELOW
 ===================================================== */

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

  .socal-header {
      padding: 11px !important;
  }

  .socal-nav-right {
      gap: 7px !important;
      margin-left: 7px !important;
  }

  .socal-logo img {
      width: clamp(140px, 41vw, 165px) !important;
  }

  .socal-phone .elementor-icon-box-wrapper,
  .socal-nav-right .elementor-menu-toggle {
      width: 48px !important;
      height: 48px !important;
  }

  .socal-phone .elementor-icon,
  .socal-nav-right .elementor-menu-toggle {
      font-size: 24px !important;
  }

  .socal-nav-right .elementor-nav-menu--dropdown {
      width: calc(100vw - 22px) !important;
      min-width: 0 !important;
  }
}
/* =====================================================
 SOCAL DROPDOWN — HOVER STATES
 Applies only at 1200px and below
 ===================================================== */

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

  .socal-nav-right .elementor-nav-menu--dropdown .elementor-item {
      position: relative !important;
      transition:
          background-color 0.2s ease,
          color 0.2s ease,
          padding-left 0.2s ease !important;
  }

  /* Hover and keyboard focus */

  .socal-nav-right .elementor-nav-menu--dropdown .elementor-item:hover,
  .socal-nav-right .elementor-nav-menu--dropdown .elementor-item:focus-visible {
      padding-left: 22px !important;
      background-color: #336cff !important;
      color: #ffffff !important;
      box-shadow: inset 5px 0 0 #cf1729 !important;
  }

  /* Current page */

  .socal-nav-right .elementor-nav-menu--dropdown .elementor-item-active,
  .socal-nav-right .elementor-nav-menu--dropdown .current-menu-item > .elementor-item {
      padding-left: 22px !important;
      background-color: #001e58 !important;
      color: #ffffff !important;
      box-shadow: inset 5px 0 0 #cf1729 !important;
  }
}


/* =====================================================
 MOBILE — CENTER DROPDOWN UNDER ENTIRE HEADER
 ===================================================== */

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

  /*
   * Makes the dropdown position itself from the full
   * header instead of only from the hamburger widget.
   */

  .socal-nav-right .elementor-widget-nav-menu,
  .socal-nav-right
  .elementor-widget-nav-menu
  > .elementor-widget-container {
      position: static !important;
  }

  .socal-nav-right .elementor-nav-menu--dropdown {
      position: absolute !important;
      top: calc(100% + 9px) !important;
      left: 50% !important;
      right: auto !important;

      width: calc(100vw - 30px) !important;
      max-width: 420px !important;
      min-width: 0 !important;

      margin: 0 !important;
      transform: translateX(-50%) !important;
      transform-origin: top center !important;

      z-index: 99999 !important;
  }
}


/* Slightly more breathing room on very small phones */

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

  .socal-nav-right .elementor-nav-menu--dropdown {
      width: calc(100vw - 22px) !important;
  }
}
/* =====================================================
 SOCAL HEADER — KEEP ABOVE ALL PAGE CONTENT
 ===================================================== */

/* Raise the complete Elementor header/template */
.elementor-location-header,
.elementor-location-header > .elementor-element,
.socal-header {
  position: relative !important;
  z-index: 999999 !important;
  overflow: visible !important;
  isolation: auto !important;
}

/* Prevent header containers from clipping the dropdown */
.socal-header,
.socal-header > .e-con-inner,
.socal-nav-right,
.socal-nav-right > .elementor-element,
.socal-nav-right .elementor-widget-container {
  overflow: visible !important;
}

/* Keep normal page content beneath the header */
main,
.site-main,
.elementor-location-single,
.elementor-location-archive {
  position: relative;
  z-index: 1;
}


/* Dropdown layering — only where the hamburger is used */
@media only screen and (max-width: 1200px) {

  .socal-nav-right .elementor-widget-nav-menu {
      position: relative !important;
      z-index: 1000000 !important;
      overflow: visible !important;
  }

  .socal-nav-right .elementor-nav-menu--dropdown {
      position: absolute !important;
      z-index: 1000001 !important;
  }
}
/* =====================================================
 SOCAL DROPDOWN — CLOSED/OPEN STATE FIX
 ===================================================== */

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

  /* CLOSED MENU — completely hide the dropdown */
  .socal-nav-right .elementor-nav-menu--dropdown {
      height: 0 !important;
      max-height: 0 !important;
      padding: 0 !important;
      margin: 0 !important;

      overflow: hidden !important;
      visibility: hidden !important;
      opacity: 0 !important;
      pointer-events: none !important;

      background: #001e58 !important;
      border: 0 !important;
      box-shadow: none !important;
  }

  /* OPEN MENU */
  .socal-nav-right
  .elementor-nav-menu--dropdown[aria-hidden="false"],
  .socal-nav-right
  .elementor-menu-toggle.elementor-active
  ~ .elementor-nav-menu--dropdown {
      height: auto !important;
      max-height: calc(100vh - 120px) !important;
      padding: 10px !important;

      overflow-x: hidden !important;
      overflow-y: auto !important;
      visibility: visible !important;
      opacity: 1 !important;
      pointer-events: auto !important;

      background: #001e58 !important;
      border-top: 4px solid #cf1729 !important;
      box-shadow: 0 14px 35px rgba(0, 30, 88, 0.3) !important;
  }

  /* Keep the full menu background dark blue */
  .socal-nav-right .elementor-nav-menu--dropdown,
  .socal-nav-right .elementor-nav-menu--dropdown ul,
  .socal-nav-right .elementor-nav-menu--dropdown li {
      background-color: #001e58 !important;
  }

  /* Restore readable menu links */
  .socal-nav-right .elementor-nav-menu--dropdown .elementor-item {
      position: relative !important;
      display: flex !important;
      align-items: center !important;

      min-height: 50px !important;
      padding: 13px 17px !important;

      background-color: transparent !important;
      color: #ffffff !important;

      font-family: "Michroma", sans-serif !important;
      font-size: clamp(12px, 1.2vw, 14px) !important;
      line-height: 1.45 !important;

      border-bottom: 1px solid rgba(255, 255, 255, 0.16) !important;
  }

  /* Hover and active page */
  .socal-nav-right .elementor-nav-menu--dropdown .elementor-item:hover,
  .socal-nav-right .elementor-nav-menu--dropdown .elementor-item:focus-visible,
  .socal-nav-right .elementor-nav-menu--dropdown .elementor-item-active,
  .socal-nav-right .elementor-nav-menu--dropdown
  .current-menu-item > .elementor-item {
      padding-left: 23px !important;
      background-color: #336cff !important;
      color: #ffffff !important;
      box-shadow: inset 5px 0 0 #cf1729 !important;
  }
}


/* =====================================================
 MOBILE — KEEP DROPDOWN CENTERED
 ===================================================== */

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

  .socal-nav-right .elementor-widget-nav-menu,
  .socal-nav-right
  .elementor-widget-nav-menu
  > .elementor-widget-container {
      position: static !important;
  }

  .socal-nav-right .elementor-nav-menu--dropdown {
      position: absolute !important;
      top: 100% !important;
      right: auto !important;
      left: 50% !important;

      width: calc(100vw - 30px) !important;
      max-width: 420px !important;
      min-width: 0 !important;

      transform: translateX(-50%) !important;
      transform-origin: top center !important;
      z-index: 1000001 !important;
  }
}\n}