/* Yim Mau Kun Studio — shared site chrome CSS.
   Loaded by every page via <link rel="stylesheet" href="/assets/css/site.css">.
   Currently holds the Taipei-Studio nav dropdown styles (previously
   duplicated inline as <style id="taipei-dropdown-styles"> on 54 pages).
   Page-specific CSS continues to live inline in each HTML file.
*/

/* Taipei Studio: Learn-dropdown for top nav */
.nav-dropdown{position:relative;display:inline-flex;align-items:center}
.nav-dropdown-toggle{
  display:inline-flex;align-items:center;gap:.35em;
  background:none;border:none;cursor:pointer;
  font-family:'EB Garamond',Georgia,serif;
  font-size:0.84em;
  font-weight:500;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#FFEDD4;
  padding:.5rem 1rem;
  transition:color .3s;
}
html[lang^="zh"] .nav-dropdown-toggle{
  font-family:'Noto Serif TC','EB Garamond',Georgia,serif;
  font-size:0.84em;
  letter-spacing:.05em;
  text-transform:none;
}
.nav-dropdown-toggle:hover,.nav-dropdown-toggle:focus-visible{color:#f0e8d4}
.nav-dropdown-toggle .caret{font-size:.7em;transition:transform .2s ease}
.nav-dropdown.is-open .nav-dropdown-toggle .caret,
.nav-dropdown:hover .nav-dropdown-toggle .caret,
.nav-dropdown:focus-within .nav-dropdown-toggle .caret{transform:rotate(180deg)}
.nav-dropdown-menu{
  position:absolute;top:100%;left:50%;transform:translate(-50%,-4px);
  min-width:240px;
  background:rgba(26,21,16,.97);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(160,132,96,.18);
  padding:.5rem 0;margin-top:.1rem;
  display:flex;flex-direction:column;
  opacity:0;pointer-events:none;transition:opacity .22s ease,transform .22s ease;
  z-index:1200;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu,
.nav-dropdown.is-open .nav-dropdown-menu{
  opacity:1;pointer-events:auto;transform:translate(-50%,0);
}
.nav-dropdown-menu a{
  display:block;padding:.65rem 1.4rem;
  text-decoration:none;white-space:nowrap;
  border-left:2px solid transparent;
  transition:border-color .2s,color .2s,background .2s;
}
.nav-dropdown-menu a:hover,.nav-dropdown-menu a:focus-visible{
  border-left-color:#d4a050;color:#f0e8d4;background:rgba(212,160,80,.06);
}
@media(max-width:768px){
  .nav-dropdown{
    display:flex;flex-direction:column;width:100%;align-items:stretch;
    border-top:1px solid rgba(160,132,96,.18);
    border-bottom:1px solid rgba(160,132,96,.18);
    margin:.4rem 0;padding:.3rem 0;
  }
  .nav-dropdown-toggle{
    width:100%;justify-content:center;text-align:center;padding:.7rem 0;
    color:rgba(160,132,96,.85);
    pointer-events:none;cursor:default;
    font-size:.85rem;
  }
  html[lang^="zh"] .nav-dropdown-toggle{font-size:.95rem}
  .nav-dropdown-toggle:hover,.nav-dropdown-toggle:focus-visible{color:rgba(160,132,96,.85)}
  .nav-dropdown-toggle .caret{display:none}
  .nav-dropdown-menu{
    position:static;transform:none!important;
    opacity:1!important;pointer-events:auto!important;
    background:transparent;border:none;backdrop-filter:none;-webkit-backdrop-filter:none;
    padding:0 0 .5rem 0;margin:0;min-width:0;
  }
  .nav-dropdown:hover .nav-dropdown-menu,
  .nav-dropdown:focus-within .nav-dropdown-menu,
  .nav-dropdown.is-open .nav-dropdown-menu{transform:none}
  .nav-dropdown-menu a{padding:.55rem 0;text-align:center;border-left:none}
  .nav-dropdown-menu a:hover,.nav-dropdown-menu a:focus-visible{border-left:none;background:transparent}
}