/* =========================================================
   v6.53 — reading progress + context-aware navigation
   Responsive across desktop, iPad and iPhone.
   ========================================================= */

/* A very thin reading indicator: deliberately quieter than a widget. */
.reading-progress{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:3px;
  z-index:1000;
  pointer-events:none;
  background:transparent;
}
.reading-progress-bar{
  display:block;
  width:0;
  height:100%;
  background:var(--red);
  transform-origin:left center;
  transition:width .08s linear;
}
html[data-theme="dark"] .reading-progress-bar{
  background:#b85b65;
}

/* Current page / current homepage section. */
header .links > a.is-context-active,
header .nav-dropdown > .nav-dropdown-trigger.is-context-active{
  color:var(--red)!important;
}

@media (min-width:1401px){
  header .links > a.is-context-active,
  header .nav-dropdown > .nav-dropdown-trigger.is-context-active{
    position:relative;
  }
  header .links > a.is-context-active:before,
  header .nav-dropdown > .nav-dropdown-trigger.is-context-active:after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:-8px;
    height:1px;
    background:var(--red);
    transform:none!important;
  }
}

/* In the compact navigation, use colour + a small marker rather than a
   desktop underline, so nothing collides with submenu descriptions. */
@media (max-width:1400px){
  header .links > a.is-context-active,
  header .nav-dropdown > .nav-dropdown-trigger.is-context-active{
    padding-left:14px!important;
  }
  header .links > a.is-context-active:before,
  header .nav-dropdown > .nav-dropdown-trigger.is-context-active:before{
    content:"";
    position:absolute;
    left:0;
    top:50%;
    width:5px;
    height:5px;
    border-radius:50%;
    background:var(--red);
    transform:translateY(-50%);
  }
  header .links > a,
  header .nav-dropdown > .nav-dropdown-trigger{
    position:relative!important;
  }
}

/* Keep the progress indicator unobtrusive on smaller screens. */
@media (max-width:700px){
  .reading-progress{height:2px}
}

@media (prefers-reduced-motion:reduce){
  .reading-progress-bar{transition:none}
}


/* v6.54 — homepage smart-header correction
   home.css still contained an older `position:relative` header rule.
   The inner pages did not load that rule, which is why the smart header
   worked there but not on the homepage. Keep the header sticky everywhere. */
header{
  position:sticky!important;
  top:0!important;
}


/* v6.55 — studio photography: consistent mobile focal centring */
@media (max-width:700px){
  .studio-images{
    width:100%!important;
    max-width:100%!important;
    margin-left:auto!important;
    margin-right:auto!important;
    overflow:hidden!important;
  }
  .studio-images .studio-main,
  .studio-images .studio-detail,
  .studio-images .studio-exterior{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0!important;
    object-fit:cover!important;
    object-position:50% 50%!important;
    transform:none!important;
    box-sizing:border-box!important;
  }

  /* Main room: keep the centre of the piano/room composition in frame. */
  .studio-images .studio-main{
    object-position:center center!important;
  }

  /* Detail and exterior shots: centre horizontally while retaining
     a little more of the useful upper-middle photographic area. */
  .studio-images .studio-detail{
    object-position:center 46%!important;
  }
  .studio-images .studio-exterior{
    object-position:center 48%!important;
  }
}


/* v6.56 — definitive iPhone smart-header behaviour
   Use a fixed header on phones: this avoids iOS Safari's sticky-position
   failures when the page also contains overflow-constrained galleries. */
@media (max-width:700px){
  html{
    overflow-x:clip!important;
  }
  body{
    overflow-x:clip!important;
  }

  header{
    position:fixed!important;
    top:0!important;
    left:0!important;
    right:0!important;
    width:100%!important;
    z-index:1200!important;
  }

  /* A fixed header is removed from document flow, so preserve the same
     vertical space the old sticky header occupied. */
  main{
    padding-top:70px!important;
  }

  header.smart-hidden{
    transform:translate3d(0,-78px,0)!important;
  }
  header:not(.smart-hidden){
    transform:translate3d(0,0,0)!important;
  }
}


/* v6.57 — iPhone Day/Night control + single-logo correction */
@media (max-width:700px){

  /* v6.51's generic `header .brand-logo img {display:block!important}`
     was stronger than the theme logo rules and therefore exposed BOTH
     logo files on iPhone. Explicitly restore mutually-exclusive logos. */
  header .brand-logo .logo-day{
    display:block!important;
  }
  header .brand-logo .logo-night{
    display:none!important;
  }
  html[data-theme="dark"] header .brand-logo .logo-day{
    display:none!important;
  }
  html[data-theme="dark"] header .brand-logo .logo-night{
    display:block!important;
  }

  /* Bring the theme control back on phones. It occupies the left 44px
     column, mirroring the hamburger on the right, so the logo remains
     mathematically centred. */
  header .header-actions{
    display:flex!important;
    position:static!important;
    grid-column:1!important;
    grid-row:1!important;
    justify-self:start!important;
    align-self:center!important;
    width:44px!important;
    min-width:44px!important;
    height:44px!important;
    margin:0!important;
    padding:0!important;
    z-index:3!important;
  }

  header .header-actions .book{
    display:none!important;
  }

  header .header-actions .theme-toggle{
    display:inline-flex!important;
    width:44px!important;
    min-width:44px!important;
    height:44px!important;
    padding:0!important;
    margin:0!important;
    justify-content:center!important;
    align-items:center!important;
    border:0!important;
    background:transparent!important;
  }

  header .header-actions .theme-label{
    display:none!important;
  }

  header .header-actions .theme-icon{
    display:block!important;
    font-size:1.05rem!important;
    line-height:1!important;
  }
}


/* v6.58 — Performance pupil profiles: restore readable Day-mode hierarchy.
   Night mode remains unchanged. */
html[data-theme="light"] .performance-stories .performance-copy{
  color:var(--ink)!important;
}

html[data-theme="light"] .performance-stories .performance-copy h3{
  color:var(--ink)!important;
  opacity:1!important;
}

html[data-theme="light"] .performance-stories .performance-copy .repertoire span{
  color:#5f5a53!important;
  opacity:1!important;
}

html[data-theme="light"] .performance-stories .performance-copy .repertoire em{
  color:#716b63!important;
  opacity:1!important;
}

html[data-theme="light"] .performance-stories .performance-copy .story-meta{
  color:#777168!important;
  opacity:1!important;
}

html[data-theme="light"] .performance-stories .performance-copy > p:last-of-type{
  color:#5f5a53!important;
  opacity:1!important;
}

html[data-theme="light"] .performance-stories .story-index{
  color:var(--red)!important;
  opacity:1!important;
}