/* ──────────────────────────────────────────────────────────────
   Snorkelling detail page — /snorkelling/<slug>/

   Lifted out of a <style> block in the head of snorkel-detail.php so the
   page carries no CSS of its own. The <link> for this file is deliberately
   the LAST of the page's stylesheets: the block it replaces sat below them
   all, so loading it anywhere earlier would hand ties to the weather and
   Leaflet sheets that used to lose them.
   ────────────────────────────────────────────────────────────── */

/* ── SNORKELLING DETAIL EXTRAS ──────────────────────────── */
.snk-meta-pill {
    display: inline-flex; align-items: center; gap: .4rem;
    font-family: var(--font-mono); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase;
    padding: .25rem .7rem; border-radius: 100px; color: var(--ink-3);
}
.snk-meta-pill--beginner     { color: #5ac85a; background: rgba(90,200,90,.08); }
.snk-meta-pill--intermediate { color: #c8a032; background: rgba(200,160,50,.08); }
.snk-meta-pill--advanced     { color: #c85050; background: rgba(200,80,80,.08); }

/* ── BODY LAYOUT ── */
.snkd-body { padding: 3rem 0 5rem; }
.snkd-sidebar { padding-left: 2rem; position: sticky; top: 84px; align-self: start; }
@media (max-width: 991px) { .snkd-sidebar { padding-left: 0; position: static; margin-top: 3rem; } }

/* ── QUICK FACTS WIDGET ── */
.snkd-facts {
    background: var(--bg-card);
    border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 1.25rem;
}
.snkd-facts__header {
    padding: .85rem 1.25rem; background: var(--bg-3); /*border-bottom: 1px solid var(--rule);*/
    font-family: var(--font-mono); font-size: .6rem; letter-spacing: .18em; text-transform: uppercase;
    color: var(--teal, #3eb8c8); display: flex; align-items: center; gap: .5rem;
}
.snkd-facts__list { list-style: none; margin: 0; padding: 0; }
.snkd-facts__item {
    display: flex; justify-content: space-between; align-items: center;
    padding: .75rem 1.25rem; border-bottom: 1px solid var(--rule); gap: 1rem;
}
.snkd-facts__item:last-child { border-bottom: none; }
.snkd-facts__key { font-family: var(--font-mono); font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4); flex-shrink: 0; }
.snkd-facts__val { font-size: .82rem; color: var(--ink-2); text-align: right; }

/* ── MAP WIDGET ── */
.snkd-map-widget {
    background: var(--bg-card);
    border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 1.25rem;
}
.snkd-map-widget__header {
    padding: .85rem 1.25rem; background: var(--bg-3);
    font-family: var(--font-mono); font-size: .6rem; letter-spacing: .18em; text-transform: uppercase;
    color: var(--teal, #3eb8c8); display: flex; align-items: center; justify-content: space-between;
}
#detail-map { height: 260px; width: 100%; }

/* Fullscreen. The native API sizes the element itself, but the fixed height
   above would still win, so it is overridden for both the real thing and the
   CSS fallback used where the browser refuses (iOS Safari). */
#detail-map:fullscreen,
#detail-map:-webkit-full-screen { height: 100% !important; width: 100% !important; }
#detail-map.ot-fs-active {
    /* !important throughout: Leaflet's own .leaflet-container sets position and
       the #detail-map rule above sets a fixed height, and both would otherwise
       win over these. */
    position: fixed !important; inset: 0 !important; z-index: 4000;
    height: 100% !important; width: 100% !important;
    border-radius: 0;
}
/* The control is a Leaflet bar; match the site rather than Leaflet's default. */
.ot-fs__btn {
    display: flex !important; align-items: center; justify-content: center;
    width: 30px; height: 30px; color: var(--ink-2);
    background: var(--bg-card); font-size: .7rem;
}
.ot-fs__btn:hover { color: #3eb8c8; background: var(--bg-3); }
.snkd-map-widget__footer { padding: .85rem 1.25rem; border-top: 1px solid var(--rule); }
.snkd-directions-btn {
    display: flex; align-items: center; justify-content: center; gap: .5rem; width: 100%;
    font-family: var(--font-mono); font-size: .65rem; letter-spacing: .12em; text-transform: uppercase;
    padding: .6rem 1rem; border-radius: var(--radius);
    background: var(--teal, #3eb8c8); color: #0a1012; font-weight: 700;
    text-decoration: none; transition: opacity .2s, transform .15s;
}
.snkd-directions-btn:hover { opacity: .85; transform: translateY(-1px); color: #0a1012; }

/* ── SIDEBAR WIDGET ── */
.sidebar-widget {
    background: var(--bg-card);
    border-radius: var(--radius-lg); padding: 1.25rem; margin-bottom: 1.25rem;
}
.sidebar-widget__title {
    font-family: var(--font-mono); font-size: .62rem; letter-spacing: .18em; text-transform: uppercase;
    color: var(--teal, #3eb8c8); margin-bottom: 1rem; display: flex; align-items: center; gap: .5rem;
}
.sidebar-widget__title::after { content: ''; flex: 1; height: 1px; background: var(--rule); }

/* ── ARTICLE CONTENT ── */
.snkd-content h2 {
    font-size: 1.4rem; font-weight: 700; color: var(--ink); margin: 2.5rem 0 1rem;
    display: flex; align-items: center; gap: .75rem;
}
.snkd-content h2::after { content: ''; flex: 1; height: 1px; background: var(--rule); opacity: .6; }
.snkd-content h3 { font-size: 1.05rem; font-weight: 600; color: var(--ink-2); margin: 1.75rem 0 .75rem; }
.snkd-content p  { font-size: .92rem; color: var(--ink-2); line-height: 1.9; }
.snkd-content strong { color: var(--ink); }
.snkd-content a { color: var(--teal, #3eb8c8); text-decoration: underline; text-underline-offset: .18em; }
.snkd-content blockquote {
    border-left: 3px solid var(--teal, #3eb8c8);
    color: var(--ink-3);
    margin: 1.5rem 0;
    padding: .25rem 0 .25rem 1rem;
}
.snkd-content ul { padding-left: 1.5rem; margin-bottom: 1.25rem; }
.snkd-content ol { padding-left: 1.5rem; margin-bottom: 1.25rem; }
.snkd-content li { font-size: .92rem; color: var(--ink-2); line-height: 1.8; margin-bottom: .35rem; }

/* Callout tip */
.snkd-tip {
    display: flex; gap: .85rem; align-items: flex-start;
    background: var(--teal-dim);
    border-radius: var(--radius-lg); padding: 1rem 1.25rem; margin: 1.5rem 0;
}
.snkd-tip__icon { color: var(--teal, #3eb8c8); font-size: 1.8rem; flex-shrink: 0; margin-top: auto; margin-bottom: auto; }
.snkd-tip__text { font-size: .85rem; color: var(--ink-2); /*line-height: 1.75;*/ margin: 0; }

/* ── GALLERY ── */
.snkd-gallery { margin: 2.5rem 0; }
.snkd-gallery__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; }
@media (max-width: 767px) { .snkd-gallery__grid { grid-template-columns: repeat(2, 1fr); } }
.snkd-gallery__item {
    position: relative; aspect-ratio: 4/3; overflow: hidden;
    border-radius: var(--radius); border: 1px solid var(--rule); cursor: pointer;
}
.snkd-gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.snkd-gallery__item:hover img { transform: scale(1.08); }
.snkd-gallery__item:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }

/* ── VIDEO ── */
.snkd-video-wrap {
    position: relative; aspect-ratio: 16/9; border-radius: var(--radius-lg);
    overflow: hidden; border: 1px solid var(--rule); margin: 1.5rem 0; background: var(--bg-3);
}
.snkd-video-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; }

/* ── SPECIES SIGHTINGS ── */
.snkd-species-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; }
@media (max-width: 575px) { .snkd-species-grid { grid-template-columns: 1fr; } }
.snkd-species-chip {
    display: flex; align-items: center; gap: .75rem;
    padding: .65rem .85rem; background: var(--bg-3);
    border-radius: var(--radius);
    text-decoration: none; transition: all ease .2s;
}
.snkd-species-chip:hover { background-color: rgb(62 184 200 / 20%); transition: all ease .2s; }
.snkd-species-chip__thumb { width: 38px; height: 38px; border-radius: var(--radius); object-fit: cover; flex-shrink: 0; background: var(--bg-card); }
.snkd-species-chip__name { font-size: .82rem; font-weight: 600; color: var(--ink); line-height: 1.2; }
.snkd-species-chip__latin { font-family: var(--font-mono); font-style: italic; font-size: .6rem; color: var(--teal, #3eb8c8); }

/* ── RELATED CARDS ── */
.snk-card {
    display: block; text-decoration: none; background: var(--bg-card);
    border: 1px solid var(--rule); border-radius: var(--radius-lg); overflow: hidden;
    transition: border-color .25s, transform .25s, box-shadow .25s;
}
.snk-card:hover { border-color: rgba(62,184,200,.4); transform: translateY(-4px); box-shadow: 0 20px 48px rgba(0,0,0,.45); }
.snk-card__img { position: relative; aspect-ratio: 16/10; overflow: hidden; }
.snk-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .55s ease; }
.snk-card:hover .snk-card__img img { transform: scale(1.07); }
.snk-card__body { padding: 1.1rem 1.2rem 1.3rem; }
.snk-card__title { font-family: var(--font-display); font-size: 1rem; font-weight: 700; color: var(--ink); line-height: 1.25; margin-bottom: .4rem; transition: color .2s; }
.snk-card:hover .snk-card__title { color: var(--teal, #3eb8c8); }
.snk-card__summary { font-size: .78rem; color: var(--ink-3); line-height: 1.65; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* ── RELATED CARDS ── */
.snk-share-btn{
    background-color: var(--parchment-dim);
    color: var(--ink-2);
    display:flex;
    align-items:center;
    gap:.75rem;
    font-family:var(--font-mono);
    font-size:.65rem;
    letter-spacing:.1em;
    text-transform:uppercase;
    text-decoration:none;
    padding:.55rem .85rem;
    border-radius:var(--radius);
    border:none;
    transition:all ease .2s;
}
.snk-share-btn:hover{
    background-color: var(--teal-dim);
    color: var(--ink-2);
    transition:all ease .2s;
}

/* ── LEAFLET DARK OVERRIDES ── */
.leaflet-popup-content-wrapper {
    background: var(--bg-card) !important; border: 1px solid var(--rule) !important;
    border-radius: var(--radius-lg) !important; box-shadow: 0 8px 32px rgba(0,0,0,.6) !important; color: var(--ink) !important;
}
.leaflet-popup-tip { background: var(--bg-card) !important; box-shadow: none !important; }
.leaflet-popup-content { margin: .85rem 1rem; line-height: 1.5; }
.leaflet-popup-close-button { color: var(--ink-4) !important; top: .5rem !important; right: .5rem !important; }
.leaflet-popup-close-button:hover { color: var(--teal, #3eb8c8) !important; background: transparent !important; }
#detail-map .leaflet-popup-close-button {
    top: .4rem !important;
    right: .4rem !important;
    width: 20px;
    height: 20px;
    line-height: 20px;
    font-size: 16px;
    background: var(--bg-3) !important;
    border-radius: 50%;
}
/* ── LIGHTBOX ── */
.snk-lightbox {
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(8,12,14,.95);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none; transition: opacity .3s;
}
.snk-lightbox.open { opacity: 1; pointer-events: all; }
.snk-lightbox img { max-width: 90vw; max-height: 90vh; object-fit: contain; border-radius: var(--radius); }
.snk-lightbox__close {
    position: absolute; top: 1.5rem; right: 1.5rem;
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--bg-card); border: 1px solid var(--rule);
    display: flex; align-items: center; justify-content: center;
    color: var(--ink-2); cursor: pointer; font-size: 1rem;
    transition: border-color .2s, color .2s;
}
.snk-lightbox__close:hover { border-color: rgba(62,184,200,.4); color: var(--teal, #3eb8c8); }

/* ── LIGHT THEME ─────────────────────────────────────────
   This block had no light-theme rules at all, so anything here driven by a
   token that flips (--ink-3, --teal) broke when the surface behind it did not
   flip with it. */

/* The "Get Directions" button fills itself with --teal and writes on it in a
   near-black. In light theme --teal is a dark teal chosen to read ON parchment,
   so dark-on-dark measured 1.14:1. White on that same fill is 7.2:1. */
html[data-theme="light"] .snkd-directions-btn,
html[data-theme="light"] .snkd-directions-btn:hover {
    color: #ffffff;
}

/* The meta pills sit ~85% down the hero, which in light theme is inside the
   parchment ::after feather — a LIGHT backdrop, not a dark one. Their dark
   theme colours are a bright green/amber/red tuned for near-black, so on
   parchment they wash out. These are the light palette's own status inks
   (--status-done-fg, --status-suspend-fg, --status-urgent-fg) over the
   matching pale tints, which is what those tokens exist for. */
html[data-theme="light"] .snk-meta-pill {
    color: var(--ink-2);
    background: rgba(255,255,255,.55);
    border-color: rgba(55,62,43,.28);
}
html[data-theme="light"] .snk-meta-pill--beginner {
    color: #285f1a; background: rgba(225,237,217,.88); border-color: #71925e;
}
html[data-theme="light"] .snk-meta-pill--intermediate {
    color: #6b3f0b; background: rgba(246,228,205,.88); border-color: #aa7b45;
}
html[data-theme="light"] .snk-meta-pill--advanced {
    color: #8d3834; background: rgba(248,227,224,.88); border-color: #b66c66;
}

/* Quick-facts keys use --ink-4, the palette's faintest ink, which lands at
   3.1:1 on the ivory card — and --ink-3 only reaches 4.2:1, still short of AA
   for 9px text. --ink-2 clears it comfortably. It matches the values these
   label, but the keys stay distinct by type: mono, smaller, uppercase and
   letter-spaced against the values' plain body face. */
html[data-theme="light"] .snkd-facts__key {
    color: var(--ink-2);
}

/* ── Gallery lightbox credit ───────────────────────────────────
   The caption panel under the enlarged photograph, carrying the title,
   caption and credits that snorkel-detail.php renders into each gallery
   item for the lightbox to copy across.

   The image rule keeps an extra class so it outranks the .snk-lightbox img
   further up this file rather than depending on source order. Its height
   comes down from 90vh to leave the credit room on a laptop. */
.snk-lightbox .snk-lightbox__figure {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .9rem;
    max-width: 90vw;
}
.snk-lightbox .snk-lightbox__figure img { max-height: 74vh; }

.snk-lightbox__caption {
    max-width: min(90vw, 760px);
    background: var(--bg-card);
    border: 1px solid var(--rule);
    border-radius: var(--radius, 10px);
    padding: .85rem 1.1rem;
    text-align: left;
}
.snk-lightbox__caption[hidden] { display: none; }

.snkd-shot__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: .95rem;
    font-weight: 700;
    color: var(--ink);
}
.snkd-shot__caption {
    margin: .3rem 0 0;
    font-size: .85rem;
    line-height: 1.5;
    color: var(--ink-2);
}
.snkd-shot__credits {
    margin: .55rem 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 1.1rem;
    font-family: var(--font-mono);
    font-size: .6rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-4);
}
/* Empty when an image has no credit at all — the panel would otherwise
   keep its padding and sit there as a blank bar under the photo. */
.snkd-shot__credits:empty { display: none; }
.snkd-shot__credit { display: inline-flex; align-items: center; gap: .4rem; }
.snkd-shot__credit a { color: var(--ink-2); text-decoration: none; border-bottom: 1px solid transparent; }
.snkd-shot__credit a:hover,
.snkd-shot__credit a:focus-visible { color: var(--teal, #3eb8c8); border-bottom-color: currentColor; }
.snkd-shot__credit i { color: var(--teal, #3eb8c8); }

/* Hidden in the grid; the lightbox copies it out when the shot is opened. */
.snkd-gallery__meta[hidden] { display: none; }

@media (max-width: 767px) {
    .snk-lightbox .snk-lightbox__figure img { max-height: 60vh; }
    .snk-lightbox__caption { padding: .7rem .85rem; }
}