/* =========================================================
   Prime Financial — Blue Tech Theme (theme-blue.css)
   Loaded AFTER prime.css. Pure CSS, no JS required.
   ========================================================= */

/* ---- 1. Palette: turn teal brand into blue / cyan ---- */
:root{
  --dark-teal:#061a3a;     /* deep navy (was dark teal) */
  --light-teal:#22d3ee;    /* cyan accent (was light teal) */
  --mid-teal:#1565ff;      /* vivid blue */
  --blue:#1e88ff;          /* brighter blue */
}

/* ---- 2. Global tech backdrop (subtle blue grid) ---- */
body{
  background-color:#eaf1fb;
  color:#0d2440;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(30,136,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30,136,255,.06) 1px, transparent 1px);
  background-size:42px 42px;
}

/* ---- 3. Navbar: dark navy glass with cyan glow ---- */
.navbar_component{
  position:relative !important;
  background:rgba(8,18,40,.85) !important;
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(34,211,238,.35) !important;
  box-shadow:0 6px 28px rgba(10,40,90,.35) !important;
  color:#e6f0ff !important;
}
/* hamburger lines visible on the dark navbar */
.menu-icon_line-top,
.menu-icon_line-middle,
.menu-icon_line-middle-inner,
.menu-icon_line-bottom{ background-color:#dbe7ff !important; }
.navbar_component .navbar_logo{ color:#ffffff; }
/* logo image: transparent background, sized to navbar (logo is now a square icon 180x184) */
.navbar_logo{
  display:flex !important;
  align-items:center;
  height:40px !important;
  padding:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
.navbar_logo-img{
  display:block;
  height:100%;
  width:auto;
  max-width:180px;
  max-height:40px;
  object-fit:contain;
  filter: drop-shadow(0 0 8px rgba(34,211,238,.35));
}
@media (max-width:991px){
  .navbar_logo{ height:48px !important; }
  .navbar_logo-img{ max-height:48px; max-width:200px; }
}
.navbar_link{
  color:#dbe7ff !important;
  transition:color .25s ease, text-shadow .25s ease;
}
.navbar_link:hover,
.navbar_link.w--current{
  color:#22d3ee !important;
  text-shadow:0 0 14px rgba(34,211,238,.55);
}

/* ---- 4. Buttons: blue gradient + glow (skip text-links) ---- */
.button:not(.is-link):not(.is-tertiary){
  background:linear-gradient(135deg,#1e88ff 0%,#22d3ee 100%) !important;
  border:1px solid transparent !important;
  color:#ffffff !important;
  font-weight:600 !important;
  border-radius:10px !important;
  box-shadow:0 8px 24px rgba(30,136,255,.35);
  transition:filter .25s ease, box-shadow .25s ease, transform .15s ease;
}
.button:not(.is-link):not(.is-tertiary):hover{
  filter:brightness(1.08);
  box-shadow:0 10px 32px rgba(34,211,238,.55);
  transform:translateY(-1px);
}
.button.is-secondary{
  color:#dbe7ff !important;
  background:transparent !important;
  border:1px solid rgba(34,211,238,.55) !important;
  box-shadow:none !important;
}
.button.is-secondary:hover{
  background:rgba(34,211,238,.12) !important;
  color:#ffffff !important;
}

/* ---- 5. Headings: blue→cyan gradient with glow ---- */
.heading-style-h2,
.heading-style-h3,
.heading-style-h4,
h2, h3, h4{
  background:linear-gradient(120deg,#7cc4ff 0%,#22d3ee 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  text-shadow:0 0 30px rgba(34,211,238,.22);
}

/* ---- 6. Hero: navy-blue tint over the existing image ---- */
/* IMPORTANT: only override background-color (the tint layer).
   Do NOT touch background-image — original photo lives on a separate wrapper. */
.hero-header_image-overlay-layer{
  background-color:rgba(6,16,42,.55) !important;
}

/* ---- 7. Service cards: glass + cyan glow border ---- */
.services-banner_card{
  border:1px solid rgba(34,211,238,.28) !important;
  border-radius:16px !important;
  overflow:hidden;
  box-shadow:0 12px 44px rgba(8,30,70,.45), inset 0 0 32px rgba(34,211,238,.07) !important;
  transition:transform .25s ease, box-shadow .25s ease;
}
.services-banner_card:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 54px rgba(8,30,70,.55), inset 0 0 40px rgba(34,211,238,.12) !important;
}
.services-banner_card_image-overlay-layer{
  background-color:rgba(6,16,42,.45) !important;
}
.services-banner_card-large-content .heading-style-h5{
  color:#ffffff !important;
  text-shadow:0 0 18px rgba(34,211,238,.45);
}

/* ---- 8. CTA / dark wrappers: blue-navy gradient overlay WITHOUT erasing the photo ---- */
.cta_background-image-wrapper,
.cta-careers_background-image-wrapper,
.our-firm_background-image-wrapper,
.header_background-image-wrapper{
  background-image:linear-gradient(180deg, rgba(6,16,42,.35), rgba(4,16,42,.55)) !important;
}

/* Ensure those <img class="*_background-image"> always get rendered with proper styles */
[class$="_background-image"]{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  position:absolute !important;
  inset:0 !important;
}

/* IMPORTANT: many *_background-image-wrapper classes use z-index:-1 to sit BEHIND content.
   Without a stacking context on the parent <section>, that -1 escapes to the html root
   and disappears. We create stacking contexts on all relevant sections so the photo is
   visible behind the text. */
.section_hero,
.section_hero-header,
.section_cta,
.section_cta-careers,
.section_our-firm,
.section_about,
.section_services-banner,
.section_header,
.section_hero-swiper,
.section_about,
.hero-header_wrapper,
.cta_wrapper,
.our-firm_wrapper,
.header_wrapper,
.services-banner_wrapper,
.home-header_wrapper{
  position:relative;
  z-index:0;
  isolation:isolate;
}

/* ---- 9. Footer: navy gradient + light text ---- */
.footer_component{
  background:linear-gradient(180deg,#061634 0%,#04102a 100%) !important;
  color:#cfe0ff !important;
  border-top:1px solid rgba(34,211,238,.3) !important;
}
.footer_component a{ color:#bcd2f5 !important; }
.footer_component a:hover{ color:#22d3ee !important; }
.footer_component .text-weight-semibold{ color:#9fd6ff !important; }

/* ---- 9b. Logo image (square transparent N icon) in footer + our-firm grid ---- */
.footer_logo-img,
.ourfirm_logo-img{
  display:block;
  height:auto;
  width:auto;
  max-height:52px;
  max-width:200px;
  object-fit:contain;
  filter:drop-shadow(0 0 8px rgba(34,211,238,.35));
}
.ourfirm_logo-img{
  width:3rem;
  height:3rem;
  max-width:none;
  max-height:none;
  margin-bottom:.4rem;
}

/* =========================================================
   10. MOBILE MENU (pure CSS toggle — no JS)
   Hamburger button is a <label for="nav-toggle">.
   The hidden checkbox sits before <nav> in .navbar_container.
   ========================================================= */
.nav-toggle-cb{ display:none; }      /* always hidden, toggled via label */
.nav-home-link{ display:none; }      /* Home only shows on mobile */

/* hamburger lines get a smooth transition */
.menu-icon_line-top,
.menu-icon_line-middle,
.menu-icon_line-bottom{ transition:transform .3s ease, opacity .3s ease; }

@media screen and (max-width:991px){
  /* hamburger visible on mobile */
  .navbar_menu-button{
    display:flex !important;
    align-items:center;
    cursor:pointer;
    padding:10px !important;
  }
  /* hide dropdown by default (override Webflow) */
  .navbar_menu{ display:none !important; }

  /* OPEN state — checkbox checked reveals the menu */
  .nav-toggle-cb:checked ~ .navbar_menu{
    display:flex !important;
    flex-direction:column;
    align-items:stretch;
    gap:.15rem;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    background:rgba(6,16,42,.97);
    -webkit-backdrop-filter:blur(16px);
    backdrop-filter:blur(16px);
    border-bottom:1px solid rgba(34,211,238,.4);
    box-shadow:0 24px 50px rgba(0,0,0,.5);
    padding:1.25rem 6% 1.75rem;
  }
  .navbar_menu.is-page-height-tablet{ height:auto !important; }

  /* Home link appears only inside the mobile dropdown */
  .nav-home-link{ display:block; }

  .navbar_menu .navbar_link{
    color:#dbe7ff !important;
    padding:.9rem .25rem;
    font-size:1.05rem;
    border-bottom:1px solid rgba(255,255,255,.07);
  }
  .navbar_menu .navbar_link:hover,
  .navbar_menu .navbar_link.w--current{
    color:#22d3ee !important;
    text-shadow:0 0 14px rgba(34,211,238,.5);
  }
  .navbar_menu .navbar_menu-buttons{
    margin:1rem 0 0;
    width:100%;
  }
  .navbar_menu .navbar_menu-buttons .button{
    width:100%;
    text-align:center;
  }

  /* hamburger -> X when open */
  .nav-toggle-cb:checked ~ .navbar_menu-button .menu-icon_line-top{
    transform:translateY(6px) rotate(45deg);
  }
  .nav-toggle-cb:checked ~ .navbar_menu-button .menu-icon_line-bottom{
    transform:translateY(-6px) rotate(-45deg);
  }
  .nav-toggle-cb:checked ~ .navbar_menu-button .menu-icon_line-middle{
    opacity:0;
  }
}