/* ONOKO music – fixes for the Wix export (plain CSS, replaces the old RTF file) */

/* ---------- Global ---------- */
html, body { background: #000 !important; overscroll-behavior: none; }
#SITE_CONTAINER, #site-root, #masterPage { background: #000; }
/* Wix "Skip to Main Content" button = the stray white rectangle */
#SKIP_TO_CONTENT_BTN, .skip-to-content, #SKIP_TO_CONTENT { display: none !important; }
/* fixed page-background layer was the source of the white overscroll patches */
#BACKGROUND_GROUP { display: none !important; }

/* ---------- Header: always transparent, hides on scroll down, returns on scroll up ---------- */
#SITE_HEADER {
  background: transparent !important; box-shadow: none !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  transition: opacity .45s ease, transform .45s ease, visibility 0s linear 0s;
  will-change: opacity, transform;
}
#SITE_HEADER .CNHfeA, #SITE_HEADER .CNHfeA *, #SITE_HEADER ._c_gnD, #SITE_HEADER .ZgDNL8 {
  background: transparent !important; background-image: none !important;
  box-shadow: none !important; border: 0 !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
/* soft dark fade behind the menu once you've scrolled, so text stays readable over any image */
#SITE_HEADER .CNHfeA::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.65), rgba(0,0,0,0));
  transition: opacity .3s ease;
}
#SITE_HEADER.nav-scrolled .CNHfeA::after { opacity: 1; }
#SITE_HEADER.nav-hidden {
  opacity: 0; transform: translateY(-14px); visibility: hidden; pointer-events: none;
  transition: opacity .45s ease, transform .45s ease, visibility 0s linear .45s;
}

/* burger button (only shown on phones) */
#nav-toggle { display: none; }

/* ---------- Phones & small tablets ---------- */
@media (max-width: 800px) {
  html, body { overflow-x: hidden !important; width: 100%; }
  body.nav-open { overflow: hidden !important; }
  #SITE_CONTAINER, #site-root, #masterPage, #PAGES_CONTAINER, #SITE_PAGES, #SITE_HEADER, #SITE_FOOTER {
    min-width: 0 !important; width: 100% !important; max-width: 100% !important;
  }
  body:not(.responsive) #site-root { min-width: 0 !important; }

  /* --- header row: logo | instagram | burger --- */
  #SITE_HEADER [data-mesh-id="SITE_HEADERinlineContent-gridContainer"] {
    display: flex !important; flex-wrap: nowrap; align-items: center; gap: 14px;
    padding: calc(env(safe-area-inset-top, 0px) + 10px) 18px 10px;
    height: auto !important; min-height: 0 !important;
  }
  #SITE_HEADER [data-mesh-id="SITE_HEADERinlineContent-gridContainer"] > *,
  #SITE_HEADER [data-mesh-id="SITE_HEADERinlineContent-gridContainer"] > interact-element > * {
    position: relative !important; left: 0 !important; margin: 0 !important;
    grid-area: auto !important; height: auto !important; width: auto !important;
  }
  #comp-l4pqfe9u { order: 1; flex: 0 0 auto; width: 128px !important; }
  #comp-l4pqfe9u img { width: 100% !important; height: auto !important; }
  #comp-l5i1i0mm { order: 2; margin-left: auto !important; }
  #nav-toggle {
    order: 3; display: block; position: relative; width: 44px; height: 44px; flex: 0 0 44px;
    background: none; border: 0; padding: 0; cursor: pointer; z-index: 20; -webkit-tap-highlight-color: transparent;
  }
  #nav-toggle span {
    position: absolute; left: 10px; right: 10px; height: 2px; background: #fff; border-radius: 2px;
    transition: transform .3s ease, opacity .2s ease, top .3s ease;
  }
  #nav-toggle span:nth-child(1) { top: 15px; }
  #nav-toggle span:nth-child(2) { top: 21px; }
  #nav-toggle span:nth-child(3) { top: 27px; }
  body.nav-open #nav-toggle span:nth-child(1) { top: 21px; transform: rotate(45deg); }
  body.nav-open #nav-toggle span:nth-child(2) { opacity: 0; }
  body.nav-open #nav-toggle span:nth-child(3) { top: 21px; transform: rotate(-45deg); }
  body.nav-open #SITE_HEADER { transform: none !important; pointer-events: auto; }
  body.nav-open #SITE_HEADER .CNHfeA::after { opacity: 0; }

  /* --- full-screen menu --- */
  #comp-j792vhm4 {
    display: none !important; position: fixed !important; inset: 0; z-index: 10;
    width: 100% !important; height: auto !important; margin: 0 !important; left: 0 !important;
    background: rgba(0,0,0,.94) !important;
    padding: 90px 24px 40px; box-sizing: border-box; overflow-y: auto;
  }
  body.nav-open #comp-j792vhm4 { display: flex !important; align-items: center; justify-content: center; }
  #comp-j792vhm4 nav, #comp-j792vhm4 ul {
    display: flex !important; flex-direction: column !important; align-items: center; gap: 4px;
    position: static !important; width: auto !important; height: auto !important; overflow: visible !important;
  }
  #comp-j792vhm4 li {
    position: static !important; display: block !important; float: none !important; left: auto !important;
    width: auto !important; height: auto !important; transform: none !important;
    visibility: visible !important; opacity: 1 !important; overflow: visible !important;
  }
  #comp-j792vhm4 li[id$="__more__"] { display: none !important; }
  #comp-j792vhm4 li a, #comp-j792vhm4 li a > div { display: block !important; width: auto !important; height: auto !important; }
  #comp-j792vhm4 p { font-size: 28px !important; line-height: 1.5 !important; margin: 0 !important; padding: 8px 12px; text-align: center; }

  /* --- page content: stack everything in one column --- */
  #SITE_PAGES section, #SITE_PAGES [data-mesh-id$="inlineContent"], #SITE_FOOTER, #SITE_FOOTER > div {
    height: auto !important; min-height: 0 !important;
  }
  #SITE_PAGES [data-mesh-id$="inlineContent-gridContainer"], #SITE_FOOTER [data-mesh-id$="inlineContent-gridContainer"] {
    display: flex !important; flex-direction: column; align-items: stretch; gap: 22px;
    height: auto !important; min-height: 0 !important; width: 100% !important;
    padding: 28px 20px; box-sizing: border-box; margin: 0 !important;
  }
  #SITE_PAGES [data-mesh-id$="gridContainer"] > *, #SITE_FOOTER [data-mesh-id$="gridContainer"] > *,
  #SITE_PAGES [data-mesh-id$="gridContainer"] > interact-element > * {
    position: relative !important; left: 0 !important; top: 0 !important; margin: 0 !important;
    width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 0 !important;
    grid-area: auto !important; justify-self: auto !important; align-self: auto !important;
  }
  #SITE_PAGES img, #SITE_PAGES wow-image { max-width: 100% !important; height: auto !important; }
  #SITE_PAGES [data-mesh-id$="gridContainer"] > * img { width: 100% !important; object-fit: contain; }
  #SITE_PAGES .gRkIq0 { min-height: 0 !important; min-width: 0 !important; }
  #SITE_PAGES iframe { width: 100% !important; height: auto !important; aspect-ratio: 16 / 9; border: 0; }

  /* hero on the home page: tall, face centred, sits under the header */
  #comp-lg20418t [data-mesh-id$="gridContainer"] { padding: 0; }
  #comp-l8tc33un img { width: 100% !important; height: 82svh !important; object-fit: cover !important; object-position: 50% 40%; }

  /* text */
  #SITE_PAGES p, #SITE_PAGES h1, #SITE_PAGES h2, #SITE_PAGES h3, #SITE_PAGES h4, #SITE_PAGES h5, #SITE_PAGES h6 {
    text-align: left !important; overflow-wrap: anywhere; line-height: 1.4;
  }
  #SITE_PAGES h1, #SITE_PAGES h2, #SITE_PAGES h3, #SITE_PAGES h4, #SITE_PAGES h5, #SITE_PAGES h6,
  #SITE_FOOTER h4 { font-size: clamp(28px, 9vw, 44px) !important; }
  #SITE_FOOTER, #SITE_FOOTER p, #SITE_FOOTER h4 { text-align: center !important; }
  #SITE_FOOTER [data-mesh-id$="gridContainer"] { align-items: center; }

  /* email form */
  #SITE_PAGES input[type="email"], #SITE_PAGES input[type="text"] {
    width: 100% !important; min-height: 50px; font-size: 16px !important; box-sizing: border-box;
  }
  #SITE_PAGES form button { width: 100% !important; min-height: 50px; }
}

/* ---------- Phone width fix: Wix locks content to a 980px container ---------- */
@media (max-width: 800px) {
  #SITE_CONTAINER, #SITE_CONTAINER * { --site-width: 100%; min-width: 0 !important; }
  #SITE_PAGES section > div, #SITE_PAGES section > div > div,
  #SITE_FOOTER > div, #SITE_FOOTER > div > div {
    width: 100% !important; max-width: 100% !important; left: 0 !important; right: auto !important;
    margin-left: 0 !important; margin-right: 0 !important;
  }
  #comp-l4pqfe9u { width: 128px !important; max-width: 128px !important; }
  #SITE_HEADER [data-mesh-id="SITE_HEADERinlineContent-gridContainer"] { justify-content: flex-start; }
  #SITE_PAGES [data-mesh-id$="gridContainer"] > * { margin-left: auto !important; margin-right: auto !important; }
  #SITE_PAGES [data-mesh-id$="gridContainer"] > * img { display: block; margin: 0 auto; }
}