/* =========================================================
   OmaYhtio Property Selector – Astra friendly minimal (fixed)
   Korjattu topbar-valitsimen overlay mobiilissa.
   
   HUOM: TÄMÄ TIEDOSTO ON PLUGININ OMA CSS, EI TEEMAN CUSTOM-CSS!
   TÄMÄ ON NYT SUUNNITELTU NIIN, ETTÄ TOPBAR-VALITSIN ON OVERLAY,
   JOTEN SE EI OTA LAYOUTISTA TILAA. TEEMAN CUSTOM-CSS:N TULEE HOITAA
   OMAT GLOBALIT NOLLAUKSET JA LAYOUTIN HALLINTA.
========================================================= */

/* Back to Home Button */
.omayhtio-back-to-home{
  margin-bottom:20px;
  padding:10px 0;
  text-align:left;
}
.omayhtio-back-to-home a{
  text-decoration:none;
  color:#0073aa;
  font-weight:bold;
  padding:8px 15px;
  border:1px solid #0073aa;
  border-radius:3px;
  transition:background-color .2s, color .2s;
  display:inline-block;
}
.omayhtio-back-to-home a:hover{
  background-color:#0073aa;
  color:#fff;
  text-decoration:none;
}

/* ===== Perusvalitsin (shortcode + yleiskäyttö) ===== */
/* Tätä käyttää shortcode-valitsin ja menuvalitsin oletustyylinä. */
/* Topbar-valitsin ylikirjoittaa näitä, koska se on overlay. */
.omayhtio-property-selector-wrapper{
  background:transparent;
  border:none;
  margin:0;
  padding:.5rem 1rem;
  box-shadow:none;
  position:relative;
  z-index:5;
  box-sizing:border-box;
}
.omayhtio-property-selector{
  display:flex;
  align-items:center;
  gap:.5rem;
  flex-wrap:nowrap;
}
.omayhtio-property-selector label{
  margin:0;
  font-weight:500;
  color:inherit;
  white-space:nowrap;
}
.omayhtio-property-selector select{
  padding:.4rem 1.8rem .4rem .6rem;
  border-radius:4px;
  border:1px solid var(--ast-border-color, #ccc);
  background:#fff;
  font-size:.95rem;
  min-width:160px;
  line-height:1.4;
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='292.4' height='292.4'%3E%3Cpath fill='%23666' d='M287 197.4 146.2 56.6 5.4 197.4h281.6z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right .6em center;
  background-size:.7em auto;
  box-sizing:border-box;
}
.omayhtio-property-selector select:focus{
  outline:none;
  border-color:var(--ast-global-color-0, #0073aa);
  box-shadow:0 0 0 2px rgba(0,115,170,.15);
}

/* Spinner & status */
.omayhtio-selector-spinner.spinner{ display:none; margin-left:6px; }
.omayhtio-selector-spinner.spinner.is-active{ display:inline-block; }
.omayhtio-selector-status{ font-size:.85rem; font-style:italic; margin-left:.5rem; color:#666; }
.omayhtio-selector-status.error{ color:#dc3232; }
.omayhtio-selector-status.success{ color:#46b450; }

/* ===== Valitsin navigaation sivupalkissa / offcanvas-menussa ===== */
.omayhtio-property-selector-wrapper--menu{
  background:transparent !important;
  border:none !important;
  padding:0 !important;
  margin:0 !important;
  box-shadow:none !important;
  position:relative !important;
  top:auto !important;
  z-index:auto !important;
  width:100% !important;
  box-sizing:border-box !important;
}
li.omayhtio-property-selector-item{
  margin:0 !important;
  padding:0 !important;
  border:none !important;
  width:100% !important;
  box-sizing:border-box !important;
  flex-shrink:0 !important;
  flex-grow:0 !important;
}
.omayhtio-property-selector--menu{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  gap:.3rem !important;
  width:100% !important;
  box-sizing:border-box !important;
  padding:.5rem 1rem !important;
}
.omayhtio-property-selector--menu label{
  white-space:normal !important;
  width:100% !important;
  box-sizing:border-box !important;
  margin-bottom:0 !important;
  padding:0 !important;
}
.omayhtio-property-selector-select--menu{
  width:100% !important;
  padding:.4rem .6rem !important;
  padding-right:1.8rem !important;
  border-radius:4px !important;
  border:1px solid #ccc !important;
  font-size:.9rem !important;
  min-width:unset !important;
  background-size:.7em auto !important;
  background-position:right .6em center !important;
  box-sizing:border-box !important;
}

/* ===== Valitsin sivun sisällössä (shortcode) ===== */
.omayhtio-property-selector-wrapper--shortcode{
  margin:20px 0;
  padding:15px;
  background-color:#f0f0f0;
  border:1px solid #e0e0e0;
  border-radius:5px;
  display:flex;
  align-items:center;
  gap:15px;
  flex-wrap:wrap;
  box-sizing:border-box;
}
.omayhtio-property-selector--shortcode label{
  font-size:1.1em;
  margin-right:0;
  white-space:nowrap;
  box-sizing:border-box;
}
.omayhtio-property-selector--shortcode select{
  max-width:300px;
  width:auto;
  flex-grow:1;
  box-sizing:border-box;
}

/* =========================================================
   Mobiilin topbar-valitsin OVERLAYNÄ (ei layout-korkeutta)
   -> Estää valkoisen yläraidan muodostumisen pluginin puolelta.
   TÄMÄ ON KRITIIKKINEN OSA.
========================================================= */

/* Piilossa isommilla näytöillä, jotta ei ilmesty työpöydälle turhaan. */
#omayhtio-topbar-selector-wrapper{ display:none; }

/* Mobiili (max-width 768px): Topbar-valitsin aktivoituu overlayna */
@media (max-width:768px){
  /* 1) Wrapper: kiinteä overlay, nolla-korkeus layoutissa, EI vaikuta ympäröiviin elementteihin */
  #omayhtio-topbar-selector-wrapper{
    display:block !important; /* Näytä vain mobiilissa */
    position:fixed !important; /* Kiinnitä viewporttiin */
    /* top-arvo haetaan nyt TÄYSIN teeman custom-CSS:stä */
    top:calc(var(--adminbar-h, 0px) + var(--header-h, 0px)) !important; 
    left:0 !important; right:0 !important;
    height:auto !important; /* Salli overlayn sisällön korkeuden mukainen korkeus */
    min-height:0 !important;
    margin:0 !important; padding:0 !important; border:0 !important;
    background:transparent !important; /* Teeman kuva näkyy läpi */
    box-shadow:none !important;
    z-index:1000 !important; /* Aseta korkea z-indeksi, jotta näkyy muiden päällä */
    pointer-events:none !important;   /* Oletuksena älä blokkaa overlayn alla olevia klikkauksia */
    line-height:0 !important; /* Estä ylimääräiset rivivälit */
  }
  /* Poista mahdolliset clearfix/spacer-pseudot, jotka voivat luoda tilaa */
  #omayhtio-topbar-selector-wrapper::before,
  #omayhtio-topbar-selector-wrapper::after{
    content:none !important; display:none !important; height:0 !important; margin:0 !important; padding:0 !important; border:0 !important;
  }

  /* 2) Jos valitsin on menun listaelementtinä (ei pitäisi olla topbarissa, mutta varmuuden vuoksi) */
  li.omayhtio-property-selector-item{
    display:block !important;
    margin:0 !important; padding:0 !important; border:0 !important;
    height:auto !important; min-height:0 !important; line-height:normal !important;
  }

  /* 3) Varsinainen valitsin overlay-wrapperin sisällä (saa olla “tilava” ja klikattava) */
  #omayhtio-topbar-selector-wrapper .omayhtio-property-selector{
    position:absolute !important; /* Absoluuttinen sijoittelu overlay-wrapperin sisällä */
    top:8px !important; left:8px !important; right:8px !important; /* Sijoita ylhäältä, vasemmalta, oikealta */
    display:flex !important; flex-direction:column !important; align-items:stretch !important; gap:.3rem !important;
    width:auto !important;
    pointer-events:auto !important;   /* Salli klikkaukset valitsimessa */
    line-height:initial !important;
    background:#ffffff !important; /* Anna valitsimelle itselleen valkoinen tausta, jotta sisältö näkyy selkeästi */
    padding:10px !important; /* Padding valitsimen sisällä */
    border-radius:4px !important;
    box-shadow:0 2px 5px rgba(0,0,0,0.2) !important; /* Kevyt varjo */
  }

  #omayhtio-topbar-selector-wrapper .omayhtio-property-selector label{
    display:block !important; margin:0 0 5px 0 !important; padding:0 !important;
    color:#333 !important; /* Varmista, että teksti näkyy valkoisella taustalla */
  }
  #omayhtio-topbar-selector-wrapper .omayhtio-property-selector select{
    width:100% !important; min-width:auto !important;
  }

  /* 4) Kill switch mahdollisille spacer/placeholder-elementeille */
  /* Jos plugin luo HTML:ään näitä, tämä piilottaa ne. */
  .omayhtio-topbar-spacer,
  .omayhtio-topbar-placeholder{
    display:none !important; height:0 !important; min-height:0 !important; margin:0 !important; padding:0 !important; border:0 !important;
  }
}

/* =========================================================
   Yleiset pikakorjaukset mobiilille (jos tarvitaan)
========================================================= */
@media (max-width:768px){
  /* Mobiilikorjaukset, jotka kohdistuvat muihin valitsimiin (ei topbar-overlayyn) */
  .omayhtio-property-selector-wrapper:not(#omayhtio-topbar-selector-wrapper):not(.omayhtio-property-selector-wrapper--menu) .omayhtio-property-selector,
  .omayhtio-property-selector-wrapper--shortcode .omayhtio-property-selector {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
    width: 100% !important;
  }
  .omayhtio-property-selector-wrapper:not(#omayhtio-topbar-selector-wrapper):not(.omayhtio-property-selector-wrapper--menu) .omayhtio-property-selector label,
  .omayhtio-property-selector-wrapper--shortcode .omayhtio-property-selector label {
    margin-bottom: 5px !important;
    width: 100% !important;
  }
  .omayhtio-property-selector-wrapper:not(#omayhtio-topbar-selector-wrapper):not(.omayhtio-property-selector-wrapper--menu) .omayhtio-property-selector select,
  .omayhtio-property-selector-wrapper--shortcode .omayhtio-property-selector select {
    width: 100% !important;
    min-width: auto !important;
    max-width: none !important;
  }

  .omayhtio-property-selector-wrapper{ padding:0 10px !important; }
  .omayhtio-back-to-home{ text-align:center !important; }
}