/* kofidako.com — hover feedback. One convention, site-wide (revised 2026-10-09).
     clickable TEXT          → turns accent blue #7AA7DB
     text that is ALREADY blue (Contact, email, active nav) → turns ink #16181c
     outlined BUTTONS        → fill ink, white text (set inline per button)
     clickable IMAGE         → fades to .88
   Exception, by design: rail thumbnails carry a selected state
   (inactive .65 → hover 1), so they are deliberately not in here. */

/* ── clickable text ───────────────────────────────────────── */
a{ transition:color .2s ease; }
a:not(.card):hover{ color:#7AA7DB !important; }
a:not(.card)[style*="7AA7DB"]:hover{ color:#16181c !important; }
[data-r=row] [data-r=row-label]{ transition:color .2s ease; }
[data-r=row]:hover [data-r=row-label]{ color:#7AA7DB !important; }

/* ── 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=foot2] > 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=foot2] > 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; }
}

/* ── masthead, mid widths (~820–1180px) ─────────────────────
   The six-item nav otherwise squeezes KOFI DAKO onto two lines. */
[data-r=masthead] > a{ white-space:nowrap; }
@media (min-width:641px) and (max-width:1180px){
  [data-r=masthead]{ gap:28px; }
  [data-r=nav][data-r=nav]{ gap:20px !important; font-size:12px !important; letter-spacing:0.08em !important; }
  [data-r=nav][data-r=nav] a[style*="margin-left"]{ margin-left:6px !important; }
}

/* ── photo-page top bar + subpage footer, mid widths ─────────── */
[data-r=foot]{ gap:14px 36px; flex-wrap:wrap; }
@media (min-width:821px){ [data-r=bar] h1{ white-space:nowrap; } }
@media (min-width:1101px){ [data-r=foot] > span{ white-space:nowrap; } }
@media (max-width:820px){ [data-r=bar] h1{ white-space:normal !important; font-size:22px !important; line-height:1.15 !important; } }
@media (max-width:1100px){
  [data-r=bar]{ flex-wrap:wrap !important; row-gap:12px !important; }
}

/* photo-page plate index / storyboard strip: one line → centred; wraps → block spans full width, lines flush left */
[data-r=rail]{ justify-content:flex-start !important; width:fit-content; max-width:100%; margin-left:auto; margin-right:auto; }

/* ── "All photos" sheet on tablet / phone ───────────────────── */
@media (max-width:1024px){
  [style*="z-index: 70"] [style*="repeat(4"]{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
}
@media (max-width:640px){
  [style*="z-index: 70"]{ padding:22px 22px 36px !important; }
  [style*="z-index: 70"] [style*="repeat(4"]{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:22px 14px !important; }
  [style*="z-index: 70"] [style*="height: 200px"], [style*="z-index: 70"] [style*="height:200px"]{ height:150px !important; }
}

/* ── photo-page top bar on phones: counter lives in the caption, buttons wrap ── */
@media (max-width:640px){
  [data-r=bar] > div:last-child{ flex:1 1 100% !important; min-width:0 !important; flex-wrap:wrap !important; white-space:normal !important; gap:8px !important; }
  [data-r=bar] > div:last-child > span{ display:none !important; }
  [data-r=bar] > div:last-child > div{ padding:10px 14px !important; min-height:44px; display:inline-flex; align-items:center; }
}


/* ── phone menu (2026-10-12, option 1d): KOFI DAKO + Contact on one line,
   five sections on one swipeable 12px line below; site-nav.js scrolls the
   current section into view. Contact always blue. ── */
@media (max-width:640px){
  [data-r=masthead][data-r=masthead]{ flex-direction:column !important; align-items:stretch !important; gap:18px !important; padding:26px 0 0 !important; }
  [data-r=masthead]:not([style*="sticky"]){ position:relative; }
  [data-r=masthead]::after{ content:""; position:absolute; right:0; bottom:1px; width:44px; height:46px; background:linear-gradient(90deg,rgba(255,255,255,0),#fff 80%); pointer-events:none; }
  [data-r=masthead] > a:first-child{ display:block; line-height:24px; padding-right:96px; font-size:18px !important; letter-spacing:0.3em !important; }
  [data-r=nav][data-r=nav]{ display:flex !important; flex-wrap:nowrap !important; justify-content:flex-start !important; width:100% !important; gap:26px !important; font-size:12px !important; letter-spacing:0.1em !important; color:#6b7078 !important; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; padding:0 44px 16px 0; white-space:nowrap; }
  [data-r=nav][data-r=nav]::-webkit-scrollbar{ display:none; }
  [data-r=nav][data-r=nav] > a{ flex:none; margin-left:0 !important; }
  [data-r=nav][data-r=nav] > a:last-child{ position:absolute !important; right:0; top:26px; line-height:25px; font-size:11px !important; letter-spacing:0.14em !important; color:#7AA7DB !important; }
  [data-r=nav][data-r=nav] > a::after{ height:40px; }
}

/* phone: header locked on every page (fixed-viewport pages become scrolling pages ≤640px) */
@media (max-width:640px){
  [data-r=masthead][data-r=masthead]{ position:sticky !important; top:0; z-index:60; background:#ffffff; box-shadow:-40px 0 0 #ffffff, 40px 0 0 #ffffff; }
  [data-r=wrap]:has(> [data-r=masthead]:only-child){ position:sticky; top:0; z-index:60; background:#ffffff; }
}