/* kofidako.com — hover feedback. One convention, site-wide.
   Two tokens only:
     clickable TEXT   → fades to .62
     clickable IMAGE  → fades to .88
   Exception, by design: rail thumbnails carry a selected state
   (inactive .5 → hover 1), so they are deliberately not in here. */

/* ── clickable text ───────────────────────────────────────── */
a{ transition:opacity .2s ease, color .2s ease; }
a:not(.card):hover{ opacity:.62; }
[data-r=row]{ transition:opacity .2s ease; }
[data-r=row]:hover{ opacity:.62; }
/* masthead, breadcrumb and footer links shift to accent blue instead —
   fading them too would double up the feedback. */
[data-r=nav] a:hover,
[data-r=crumb] a:hover,
[data-r=foot] a:hover,
[data-r=footnav] a:hover{ opacity:1; }

/* ── clickable images ─────────────────────────────────────── */
.card .cardimg,
.cell,
.sheettile,
.tourtile,
[data-r=stagewrap] image-slot,
[data-r=slide-link] image-slot{ transition:opacity .25s ease; }
.card:hover .cardimg,
.cell:hover,
.sheettile:hover,
.tourtile:hover,
[data-r=stagewrap]:hover image-slot,
[data-r=slide-link]:hover image-slot{ opacity:.88 !important; }

/* ── touch targets (phones) ───────────────────────────────────
   Nav, breadcrumb, footer and label links are 10–11px type. They get a
   real 44px hit area from an invisible ::after box, NOT from min-height —
   growing the boxes themselves pushed the sticky masthead to 209px on a
   390px screen. The visible type and every layout box stay exactly as
   designed; only the tappable area grows. */
@media (max-width:640px){
  [data-r=nav] a,
  [data-r=crumb] a,
  [data-r=foot] a,
  [data-r=footnav] a,
  [data-r=nav] span,
  [data-r=footnav] span,
  [data-r=masthead] > a,
  [data-r=roomhead] a,
  [data-r=roomtitle] a,
  a[style*="text-transform: uppercase"],
  a[style*="text-transform:uppercase"],
  a[style*="font-size: 21px"],
  a[style*="font-size:21px"],
  span[style*="cursor: pointer"],
  span[style*="cursor:pointer"]{
    position:relative;
  }
  [data-r=nav] a::after,
  [data-r=crumb] a::after,
  [data-r=foot] a::after,
  [data-r=footnav] a::after,
  [data-r=nav] span::after,
  [data-r=footnav] span::after,
  [data-r=masthead] > a::after,
  [data-r=roomhead] a::after,
  [data-r=roomtitle] a::after,
  a[style*="text-transform: uppercase"]::after,
  a[style*="text-transform:uppercase"]::after,
  a[style*="font-size: 21px"]::after,
  a[style*="font-size:21px"]::after,
  span[style*="cursor: pointer"]::after,
  span[style*="cursor:pointer"]::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:50%;
    height:44px;
    transform:translateY(-50%);
  }
  /* Stacked nav rows sit 12px apart by default, which would let two 44px
     hit boxes overlap. The doubled attribute selector outranks each page's
     own inline media block, which loads after this file. */
  [data-r=nav][data-r=nav]{ row-gap:26px !important; }
  /* The stage button is a real box already — 44px costs no layout there. */
  .stagebtn{ display:inline-flex; align-items:center; min-height:44px; }
  [data-r=row]{ min-height:52px; align-items:center; }
}