/* ============================================================
   BARISTA JOBS — Global Custom CSS
   Theme: Bute v1.0.5
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Barlow+Condensed:wght@300;400;500;600;700&display=swap');

/* ============================================================
   GLOBAL HEADER / NAVIGATION — BARISTA JOBS BRANDED
   ============================================================ */

/* Base header */
.site-header,
header.site-header,
#masthead {
  background: rgba(10,10,10,0.97) !important;
  border-bottom: 1px solid rgba(200,146,42,0.15) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  padding: 0 !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 8000 !important;
  transition: background 0.4s ease, border-color 0.4s ease !important;
}

/* Scrolled state — more opaque */
.site-header.scrolled,
.scrolled .site-header {
  background: rgba(10,10,10,1) !important;
  border-bottom-color: rgba(200,146,42,0.25) !important;
}

/* Inner header container */
.site-header .site-branding,
.site-header .header-main,
.site-header > .wrap,
.site-header > div,
#masthead > .wrap,
#masthead > div {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 60px !important;
  height: 72px !important;
  max-width: 100% !important;
  width: 100% !important;
}

/* SITE TITLE / LOGO */
.site-title,
.site-title a,
.site-branding .site-title,
.site-branding .site-title a {
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: 26px !important;
  letter-spacing: 0.18em !important;
  color: #E8E0D0 !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
}
.site-title a:hover,
.site-branding .site-title a:hover {
  color: #C8922A !important;
}

/* Hide site description in header */
.site-description,
.site-branding .site-description {
  display: none !important;
}

/* NAVIGATION WRAPPER */
.main-navigation,
nav.main-navigation,
.site-navigation,
#site-navigation {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

/* NAV MENU ITEMS — horizontal */
.main-navigation ul,
.main-navigation ul.menu,
.main-navigation ul.primary-menu,
nav.main-navigation ul {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

.main-navigation ul li,
nav.main-navigation ul li {
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
}

/* NAV LINKS */
.main-navigation ul li a,
nav.main-navigation ul li a,
.main-navigation a {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.35em !important;
  text-transform: uppercase !important;
  color: rgba(232,224,208,0.55) !important;
  text-decoration: none !important;
  padding: 10px 18px !important;
  display: block !important;
  position: relative !important;
  transition: color 0.3s ease !important;
  background: transparent !important;
  border: none !important;
}

.main-navigation ul li a::after,
nav.main-navigation ul li a::after {
  content: '' !important;
  position: absolute !important;
  bottom: 6px !important;
  left: 18px !important;
  right: 18px !important;
  height: 1px !important;
  background: #C8922A !important;
  transform: scaleX(0) !important;
  transition: transform 0.3s cubic-bezier(0.77,0,0.18,1) !important;
  transform-origin: left !important;
}

.main-navigation ul li a:hover,
nav.main-navigation ul li a:hover {
  color: #E8E0D0 !important;
  background: transparent !important;
}

.main-navigation ul li a:hover::after,
nav.main-navigation ul li a:hover::after {
  transform: scaleX(1) !important;
}

/* CURRENT/ACTIVE PAGE */
.main-navigation ul li.current-menu-item > a,
.main-navigation ul li.current_page_item > a {
  color: #C8922A !important;
}
.main-navigation ul li.current-menu-item > a::after,
.main-navigation ul li.current_page_item > a::after {
  transform: scaleX(1) !important;
}

/* CTA BUTTON IN NAV — last item styled as button */
.main-navigation ul li:last-child a,
nav.main-navigation ul li:last-child a {
  color: #C8922A !important;
  border: 1px solid rgba(200,146,42,0.4) !important;
  padding: 9px 22px !important;
  transition: background 0.35s ease, color 0.35s ease !important;
}
.main-navigation ul li:last-child a:hover {
  background: #C8922A !important;
  color: #0A0A0A !important;
}
.main-navigation ul li:last-child a::after { display: none !important; }

/* DROPDOWN MENUS */
.main-navigation ul ul,
nav.main-navigation ul ul {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  background: rgba(10,10,10,0.98) !important;
  border: 1px solid rgba(200,146,42,0.15) !important;
  border-top: 2px solid #C8922A !important;
  min-width: 200px !important;
  flex-direction: column !important;
  gap: 0 !important;
  display: none !important;
  backdrop-filter: blur(12px) !important;
  z-index: 100 !important;
}
.main-navigation ul li:hover > ul { display: flex !important; }
.main-navigation ul ul li a {
  padding: 12px 20px !important;
  border-bottom: 1px solid rgba(200,146,42,0.06) !important;
  font-size: 10px !important;
}
.main-navigation ul ul li:last-child a { border-bottom: none !important; }

/* MOBILE MENU TOGGLE */
.menu-toggle,
button.menu-toggle {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.35em !important;
  text-transform: uppercase !important;
  color: rgba(232,224,208,0.6) !important;
  background: transparent !important;
  border: 1px solid rgba(200,146,42,0.25) !important;
  padding: 9px 18px !important;
  cursor: pointer !important;
  transition: color 0.3s, border-color 0.3s !important;
}
.menu-toggle:hover {
  color: #C8922A !important;
  border-color: #C8922A !important;
}

/* Push page content below fixed header */
.site-content,
#content,
#page {
  padding-top: 72px !important;
}

/* Exception — landing page gets NO padding (hero is fullscreen) */
.page-id-212 .site-content,
.page-id-212 #content {
  padding-top: 0 !important;
}

/* Make header transparent on landing page hero */
.page-id-212 .site-header,
.page-id-212 header.site-header,
.page-id-212 #masthead {
  background: transparent !important;
  border-bottom-color: transparent !important;
}
.page-id-212 .site-header.header-scrolled,
.page-id-212.scrolled .site-header {
  background: rgba(10,10,10,0.97) !important;
  border-bottom-color: rgba(200,146,42,0.15) !important;
}

/* ============================================================
   LANDING PAGE — Strip Theme Chrome (page ID 212)
   ============================================================ */
.page-id-212 footer.site-footer,
.page-id-212 #colophon,
.page-id-212 .site-footer,
.page-id-212 .footer-area,
.page-id-212 .entry-header,
.page-id-212 .page-header,
.page-id-212 .breadcrumb,
.page-id-212 h1.entry-title,
.page-id-212 .wp-block-post-title {
  display: none !important;
}

.page-id-212 .site-content,
.page-id-212 #content,
.page-id-212 #primary,
.page-id-212 .content-area,
.page-id-212 main.site-main,
.page-id-212 .entry-content,
.page-id-212 article.page,
.page-id-212 .wp-block-group,
.page-id-212 .is-layout-constrained,
.page-id-212 .has-global-padding {
  padding: 0 !important;
  margin: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
}

.page-id-212 .wp-block-html {
  padding: 0 !important;
  margin: 0 !important;
}

body.page-id-212 {
  background: #0A0A0A !important;
  overflow-x: hidden !important;
}

/* ============================================================
   SCROLL BEHAVIOUR — Header transparent-to-solid
   ============================================================ */

/* Responsive */
@media (max-width: 900px) {
  .site-header > div,
  #masthead > div,
  .site-header > .wrap,
  #masthead > .wrap {
    padding: 0 28px !important;
    height: 64px !important;
  }
  .page-id-212 .site-content,
  .page-id-212 #content {
    padding-top: 0 !important;
  }
}

@media (max-width: 600px) {
  .site-header > div,
  #masthead > div {
    padding: 0 20px !important;
    height: 58px !important;
  }
}

/* ============================================================
   SITE LOGO FIX — full-colour logo at proper size
   (removes duotone/monochrome filter + sizes it correctly)
   ============================================================ */
.site-header .custom-logo-link,
.site-branding .custom-logo-link,
.wp-block-site-logo a {
  display: inline-flex !important;
  align-items: center !important;
  line-height: 0 !important;
}

.site-header img.custom-logo,
img.custom-logo,
.wp-block-site-logo img {
  height: 46px !important;
  width: auto !important;
  max-width: none !important;
  object-fit: contain !important;
  filter: none !important;
  -webkit-filter: none !important;
}

@media (max-width: 600px) {
  .site-header img.custom-logo,
  img.custom-logo,
  .wp-block-site-logo img {
    height: 38px !important;
  }
}