/*
Theme Name: 832/OCEAN
Theme URI: https://832ocean.com/
Author: 832/OCEAN
Description: Custom campaign marketing studio theme for 832/OCEAN.
Version: 4.3.0
Text Domain: 832-ocean
*/




/* v3.1 FINAL nav + CTA consistency */

/* --- ACTIVE NAV: one lime underline only --- */
.center-nav a,
.links a,
.ocean-nav a,
nav a{
  box-shadow:none !important;
  outline:none !important;
  text-decoration:none !important;
}
.center-nav a::before,
.center-nav a::after,
.links a::before,
.links a::after,
.ocean-nav a::before,
.ocean-nav a::after,
nav a::before,
nav a::after{
  box-shadow:none !important;
}
.center-nav a.active,
.links a.active,
.ocean-nav a.active,
nav a.active{
  color:#090909 !important;
  border:0 !important;
  border-bottom:2px solid #d8ff3f !important;
  box-shadow:none !important;
  outline:none !important;
  text-decoration:none !important;
  padding-bottom:6px !important;
}
.center-nav a.active::after,
.links a.active::after,
.ocean-nav a.active::after,
nav a.active::after{
  content:none !important;
  display:none !important;
  background:transparent !important;
}

/* Remove focus boxes but keep accessible keyboard focus */
.center-nav a:focus,
.links a:focus,
.ocean-nav a:focus,
nav a:focus{
  outline:none !important;
  box-shadow:none !important;
}
.center-nav a:focus-visible,
.links a:focus-visible,
.ocean-nav a:focus-visible,
nav a:focus-visible{
  outline:2px solid #d8ff3f !important;
  outline-offset:4px !important;
}

/* --- START A PROJECT: identical everywhere --- */
a.start-project-global,
.start-project-global,
.cta-nav.start-project-global,
.start.start-project-global,
.button.start-project-global,
.outcome .start-project-global{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:12px !important;
  min-height:54px !important;
  padding:0 22px !important;
  margin:0 !important;
  background:#090909 !important;
  color:#ffffff !important;
  border:1px solid #090909 !important;
  border-radius:16px !important;
  box-shadow:none !important;
  text-decoration:none !important;
  text-transform:none !important;
  font-size:10px !important;
  font-weight:500 !important;
  line-height:1 !important;
  letter-spacing:.04em !important;
  white-space:nowrap !important;
}
a.start-project-global .cta-label,
.start-project-global .cta-label{
  color:#ffffff !important;
}
a.start-project-global .cta-arrow,
.start-project-global .cta-arrow{
  color:#d8ff3f !important;
  font-size:18px !important;
  line-height:1 !important;
  display:inline-block !important;
}
a.start-project-global:hover,
.start-project-global:hover,
.outcome .start-project-global:hover{
  background:#151515 !important;
  border-color:#151515 !important;
  color:#ffffff !important;
  transform:translateY(-1px);
}
a.start-project-global:hover .cta-label,
.start-project-global:hover .cta-label{
  color:#ffffff !important;
}
a.start-project-global:hover .cta-arrow,
.start-project-global:hover .cta-arrow{
  color:#d8ff3f !important;
}

/* Outcome bar CTA should still be clearly visible */
.outcome a.start-project-global,
.outcome .start-project-global{
  border:1px solid #d8ff3f !important;
}

/* Mobile */
@media(max-width:900px){
  a.start-project-global,
  .start-project-global{
    min-height:48px !important;
    padding:0 17px !important;
    border-radius:14px !important;
  }
}


/* v3.3 CTA-only fix — DO NOT alter nav structure */

/* Floating header CTA only */
.cta-nav,
.start,
nav.wrap > a.start,
.topbar > a.start,
.topbar .start,
header .start,
header .cta-nav{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:14px !important;
  min-width:190px !important;
  min-height:72px !important;
  padding:0 28px !important;
  background:#090909 !important;
  color:#ffffff !important;
  border:1px solid #090909 !important;
  border-radius:18px !important;
  box-shadow:none !important;
  text-decoration:none !important;
  text-transform:none !important;
  font-size:15px !important;
  font-weight:500 !important;
  line-height:1 !important;
  letter-spacing:0 !important;
  white-space:nowrap !important;
}

/* Lime arrow without rewriting anchor markup */
.cta-nav::before,
.start::before,
nav.wrap > a.start::before,
.topbar > a.start::before,
.topbar .start::before,
header .start::before,
header .cta-nav::before{
  content:"↗" !important;
  color:#d8ff3f !important;
  font-size:22px !important;
  line-height:1 !important;
  display:inline-block !important;
}

/* Hide duplicate trailing arrow character visually if the original text includes it */
.cta-nav,
.start{
  font-variant-ligatures:none;
}

.cta-nav:hover,
.start:hover,
nav.wrap > a.start:hover,
.topbar > a.start:hover,
.topbar .start:hover,
header .start:hover,
header .cta-nav:hover{
  background:#090909 !important;
  color:#ffffff !important;
  border-color:#090909 !important;
  transform:none !important;
}

@media(max-width:900px){
  .cta-nav,
  .start,
  nav.wrap > a.start,
  .topbar > a.start,
  .topbar .start,
  header .start,
  header .cta-nav{
    min-width:160px !important;
    min-height:56px !important;
    padding:0 20px !important;
    border-radius:16px !important;
    font-size:13px !important;
  }
}


/* v3.4 match homepage nav CTA size */
.cta-nav,
.start,
nav.wrap > a.start,
.topbar > a.start,
.topbar .start,
header .start,
header .cta-nav{
  min-width:0 !important;
  min-height:54px !important;
  height:54px !important;
  padding:0 22px !important;
  border-radius:16px !important;
  font-size:10px !important;
  gap:12px !important;
}
.cta-nav::before,
.start::before,
nav.wrap > a.start::before,
.topbar > a.start::before,
.topbar .start::before,
header .start::before,
header .cta-nav::before{
  font-size:18px !important;
}
@media(max-width:900px){
  .cta-nav,
  .start,
  nav.wrap > a.start,
  .topbar > a.start,
  .topbar .start,
  header .start,
  header .cta-nav{
    min-height:48px !important;
    height:48px !important;
    padding:0 17px !important;
    border-radius:14px !important;
    font-size:9px !important;
  }
}


/* v3.5 mobile full-menu + non-emoji lime arrows */

/* Force diagonal arrows to render as text, not Apple emoji */
.cta-arrow,
.text-arrow,
a::before,
a::after{
  font-family:Arial,Helvetica,sans-serif !important;
  font-variant-emoji:text !important;
}

/* Any direct arrow character inside CTA/link inherits lime styling */
.cta-arrow{
  color:#d8ff3f !important;
  font-family:Arial,Helvetica,sans-serif !important;
  font-size:18px !important;
  line-height:1 !important;
}

/* Homepage/service link arrows and CTA arrows */
.hero-actions a,
.actions a,
.btn,
.textlink,
.service-row a,
.card a,
.button,
.start,
.cta-nav,
.start-project-global{
  font-family:Arial,Helvetica,sans-serif !important;
}

/* Mobile: show the full navigation as a second row in the floating bar */
@media(max-width:900px){

  /* Existing page-level floating header containers */
  .ocean-topbar,
  .topbar,
  nav.wrap,
  .shell.topbar,
  header.topbar{
    display:grid !important;
    grid-template-columns:1fr auto !important;
    grid-template-rows:auto auto !important;
    align-items:center !important;
    column-gap:14px !important;
    row-gap:14px !important;
    height:auto !important;
    min-height:0 !important;
    padding:14px 16px !important;
    overflow:visible !important;
  }

  /* Brand stays upper-left */
  .logo,
  .brand,
  .ocean-brand{
    grid-column:1 !important;
    grid-row:1 !important;
    justify-self:start !important;
    min-width:0 !important;
  }

  /* Start a Project stays upper-right */
  .cta-nav,
  .start,
  .start-project-global{
    grid-column:2 !important;
    grid-row:1 !important;
    justify-self:end !important;
    align-self:center !important;
  }

  /* FULL menu is visible below, across the entire bar */
  .center-nav,
  .links,
  .ocean-nav{
    grid-column:1 / -1 !important;
    grid-row:2 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:22px !important;
    width:100% !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    white-space:nowrap !important;
    scrollbar-width:none !important;
    -webkit-overflow-scrolling:touch;
    padding:2px 2px 4px !important;
    margin:0 !important;
  }
  .center-nav::-webkit-scrollbar,
  .links::-webkit-scrollbar,
  .ocean-nav::-webkit-scrollbar{
    display:none !important;
  }

  .center-nav a,
  .links a,
  .ocean-nav a{
    display:inline-block !important;
    flex:0 0 auto !important;
    font-size:10px !important;
    letter-spacing:.08em !important;
    line-height:1.2 !important;
    padding:5px 0 7px !important;
  }

  /* Keep a single lime underline on active link */
  .center-nav a.active,
  .links a.active,
  .ocean-nav a.active{
    border-bottom:2px solid #d8ff3f !important;
    box-shadow:none !important;
  }

  /* Mobile CTA compact enough to leave room for the logo */
  .cta-nav,
  .start,
  .start-project-global{
    min-width:0 !important;
    width:auto !important;
    height:48px !important;
    min-height:48px !important;
    padding:0 16px !important;
    border-radius:14px !important;
    font-size:10px !important;
    gap:9px !important;
  }
  .cta-nav::before,
  .start::before{
    content:"↗︎" !important;
    color:#d8ff3f !important;
    font-family:Arial,Helvetica,sans-serif !important;
    font-size:17px !important;
    line-height:1 !important;
  }

  /* Hide duplicate literal arrow if the anchor already had one appended */
  .cta-nav .cta-arrow,
  .start .cta-arrow,
  .start-project-global .cta-arrow{
    color:#d8ff3f !important;
    font-family:Arial,Helvetica,sans-serif !important;
  }
}