/* Visit Cocos Island layout and components. Every colour, font and size comes from theme.css. */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.ab { margin: 0; background: linear-gradient(180deg, var(--ab-sea-1), var(--ab-sea-0) 40%, var(--ab-trench)); color: var(--ab-ink);
  font: var(--ab-base)/1.65 var(--ab-body); }
.ab img { display: block; max-width: 100%; height: auto; }
.ab a { color: inherit; text-decoration: none; }
.ab-kick { font-size: var(--ab-small); letter-spacing: .22em; text-transform: uppercase; color: var(--ab-glow); margin: 0 0 14px; }
.ab-kick a:hover { text-decoration: underline; }
.ab-lede { max-width: 640px; font-size: var(--ab-lede-size); color: var(--ab-dim); }
.ab-lede a { color: var(--ab-glow); }

/* depth gauge: fills 0 to 40 m as you scroll (site.js) */
.ab-gauge { position: fixed; left: 14px; top: 20vh; bottom: 20vh; width: 2px; background: var(--ab-line); z-index: 5; }
.ab-gauge-fill { position: absolute; inset: 0 0 auto 0; height: 0; background: var(--ab-glow); box-shadow: 0 0 12px var(--ab-glow); }
.ab-gauge-num { position: absolute; left: 8px; top: 0; font: 600 var(--ab-tiny) var(--ab-body); color: var(--ab-glow); white-space: nowrap; letter-spacing: .08em; }

/* header */
.ab-top { position: absolute; inset: 0 0 auto 0; z-index: 6; display: flex; align-items: center; justify-content: space-between;
  gap: var(--ab-gap); padding: 18px var(--ab-gut); flex-wrap: wrap; }
.ab-badge img { height: var(--ab-logo-h); width: auto; filter: drop-shadow(var(--ab-shadow)); }
.ab-nav { display: flex; gap: 22px; flex-wrap: wrap; align-items: center; font-weight: 600; font-size: var(--ab-small); letter-spacing: .04em; }
.ab-nav a { opacity: .85; text-shadow: var(--ab-shadow); } .ab-nav a:hover { opacity: 1; color: var(--ab-glow); }
.ab-find { border: 1px solid var(--ab-line); border-radius: var(--ab-pill); padding: 6px 14px; background: var(--ab-veil); }
.ab-menu { display: none; font: 800 var(--ab-small) var(--ab-body); letter-spacing: .08em; text-transform: uppercase; color: var(--ab-ink);
  background: var(--ab-veil); border: 1px solid var(--ab-line); border-radius: var(--ab-pill); padding: 9px 18px; cursor: pointer; }

/* buttons */
.ab-cta, .ab-btn { display: inline-block; border: 1px solid var(--ab-glow); color: var(--ab-glow); border-radius: var(--ab-pill); padding: 11px 26px;
  font-weight: 800; font-size: var(--ab-small); letter-spacing: .06em; text-transform: uppercase; transition: background .2s, color .2s; }
.ab-cta:hover, .ab-btn:hover { background: var(--ab-glow); color: var(--ab-sea-0); }

/* home hero */
.ab-hero { min-height: var(--ab-hero-h); background: var(--ab-shade), var(--ab-hero) center/cover; display: flex; align-items: flex-end; }
.ab-hero-in { max-width: var(--ab-max); margin: 0 auto; width: 100%; padding: 0 var(--ab-gut) 10vh; }
.ab h1 { font: 300 var(--ab-h1)/.92 var(--ab-display); margin: 0; letter-spacing: -.02em; }
.ab h1 em { font-weight: 600; font-style: italic; }

/* sections */
.ab-sec { max-width: var(--ab-max); margin: 0 auto; padding: var(--ab-sec-pad) var(--ab-gut) 0; }
.ab-h { display: grid; grid-template-columns: auto 1fr; column-gap: 20px; align-items: baseline; margin-bottom: 36px; border-top: 1px solid var(--ab-line); padding-top: 22px; }
.ab-h span { font: 600 var(--ab-small) var(--ab-body); color: var(--ab-glow); }
.ab-h h2 { font: 300 var(--ab-h2)/1.05 var(--ab-display); margin: 0; }
.ab-h h2 a:hover { color: var(--ab-glow); }
.ab-h p { grid-column: 2; color: var(--ab-dim); margin: 10px 0 0; max-width: 620px; }

/* boats */
.ab-boats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 560px), 1fr)); gap: var(--ab-gap); }
.ab-boat { display: grid; grid-template-columns: 42% 1fr; background: var(--ab-sea-2); border: 1px solid var(--ab-line); border-radius: var(--ab-r); overflow: hidden; }
.ab-boat img { width: 100%; height: 100%; object-fit: cover; min-height: 220px; }
.ab-boat > div { padding: 22px; }
.ab-boat h3 { font: 600 var(--ab-h3) var(--ab-display); margin: 2px 0 8px; } .ab-boat h3 a:hover { color: var(--ab-glow); }
.ab-boat p { margin: 0 0 10px; color: var(--ab-dim); font-size: var(--ab-base); }
.ab-by, .ab-trip { font-size: var(--ab-small) !important; letter-spacing: .1em; text-transform: uppercase; color: var(--ab-glow) !important; }

/* shark mosaic */
.ab-mosaic { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 210px; gap: 8px; }
.ab-tile { position: relative; border-radius: var(--ab-r); overflow: hidden; }
.ab-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.ab-tile:hover img { transform: scale(1.06); }
.ab-tile span { position: absolute; left: 14px; bottom: 12px; font: 600 var(--ab-h3-read) var(--ab-display); text-shadow: var(--ab-shadow); }
.ab-t0 { grid-column: span 2; grid-row: span 2; } .ab-t0 span { font-size: var(--ab-h2-read); }
.ab-t3 { grid-row: span 2; }

/* dive sites list */
.ab-sites { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 2px var(--ab-gap); counter-reset: s; }
.ab-sites li { counter-increment: s; border-bottom: 1px solid var(--ab-line); }
.ab-sites a { display: grid; grid-template-columns: 34px 72px 1fr; grid-template-rows: auto auto; column-gap: 14px; padding: 14px 0; align-items: center; }
.ab-sites a::before { content: counter(s, decimal-leading-zero); grid-row: span 2; color: var(--ab-glow); font-weight: 800; font-size: var(--ab-small); }
.ab-sites img { grid-row: span 2; width: 72px; height: 72px; object-fit: cover; border-radius: 50%; }
.ab-sites b { font: 600 var(--ab-read) var(--ab-display); } .ab-sites small { color: var(--ab-dim); font-size: var(--ab-small); line-height: 1.4; }
.ab-sites a:hover b { color: var(--ab-glow); }

/* species rail */
.ab-rail { display: flex; gap: var(--ab-gap); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; scrollbar-color: var(--ab-sea-3) transparent; }
.ab-sp { flex: 0 0 230px; scroll-snap-align: start; }
.ab-sp img { width: 230px; height: 300px; object-fit: cover; border-radius: 120px 120px var(--ab-r) var(--ab-r); }
.ab-sp span { display: block; margin-top: 10px; font: 600 var(--ab-read) var(--ab-display); }

/* treasure band */
.ab-story { margin-top: 110px; min-height: 80vh; background: linear-gradient(90deg, var(--ab-sea-0) 30%, var(--ab-veil)), var(--ab-story) center/cover;
  display: grid; grid-template-columns: minmax(0, 620px) 1fr; gap: var(--ab-gap); align-items: center; padding: 80px var(--ab-gut) 80px max(var(--ab-gut), 64px); }
.ab-story h2 { font: 300 var(--ab-h2)/1.08 var(--ab-display); margin: 0 0 16px; }
.ab-story p { color: var(--ab-dim); }
.ab-story ul { list-style: none; padding: 0; justify-self: end; }
.ab-story li a { display: block; padding: 10px 0; border-bottom: 1px solid var(--ab-line); font: 600 var(--ab-read) var(--ab-display); }
.ab-story li a:hover { color: var(--ab-glow); }

.ab-plan { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--ab-gap); }
.ab-plan img { aspect-ratio: 4/3; object-fit: cover; border-radius: var(--ab-r); width: 100%; }
.ab-plan b { display: block; margin-top: 8px; font: 600 var(--ab-read) var(--ab-display); }
.ab-faq details { border-bottom: 1px solid var(--ab-line); padding: 16px 0; }
.ab-faq summary { cursor: pointer; font: 600 var(--ab-h3-read) var(--ab-display); }
.ab-faq summary::marker { color: var(--ab-glow); }
.ab-faq p { color: var(--ab-dim); max-width: 760px; }

/* inner page hero */
.vc-hero { min-height: var(--ab-hero-small); background: var(--ab-plain); display: flex; align-items: flex-end; padding-top: 120px; }
.vc-hero--photo { min-height: var(--ab-hero-post); background: var(--ab-shade), var(--ab-hero) center 35%/cover; }
.vc-hero--photo.vc-hero--small { min-height: var(--ab-hero-small); }
.vc-hero-in { max-width: var(--ab-max); margin: 0 auto; width: 100%; padding: 0 var(--ab-gut) 7vh; }
.vc-hero h1 { font: 300 var(--ab-h1-page)/1 var(--ab-display); max-width: 1000px; text-shadow: var(--ab-shadow); }
.vc-by { display: flex; gap: 14px; align-items: center; margin: 22px 0 0; font-size: var(--ab-small); color: var(--ab-dim); }
.vc-by img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.vc-by a { color: var(--ab-ink); font-weight: 800; } .vc-by a:hover { color: var(--ab-glow); }

/* article */
.vc-article { max-width: var(--ab-read-max); margin: 0 auto; padding: 56px var(--ab-gut) 0; box-sizing: content-box; }
.vc-body { font-size: var(--ab-read); line-height: 1.75; }
.vc-body::after { content: ""; display: block; clear: both; }
.vc-body p { margin: 0 0 1.15em; }
.vc-body a { color: var(--ab-glow); text-decoration: underline; text-decoration-color: var(--ab-glow-soft); text-underline-offset: 3px; }
.vc-body a:hover { text-decoration-color: var(--ab-glow); }
.vc-body h2 { font: 600 var(--ab-h2-read)/1.15 var(--ab-display); margin: 1.8em 0 .5em; clear: both; }
.vc-body h3, .vc-body h4 { font: 600 var(--ab-h3-read)/1.25 var(--ab-display); margin: 1.6em 0 .4em; }
.vc-body strong { color: var(--ab-ink); }
.vc-body em { color: var(--ab-ink); }
.vc-body ol, .vc-body ul { padding-left: 1.3em; }
.vc-fig { margin: 8px 0 26px; }
.vc-fig img { border-radius: var(--ab-r); cursor: zoom-in; margin: 0 auto; }
.vc-fig figcaption { font-size: var(--ab-small); color: var(--ab-dim); margin-top: 8px; text-align: center; }
.vc-fig figcaption a { color: var(--ab-dim); }
.vc-right { float: right; width: var(--ab-float); margin: 6px 0 18px 26px; }
.vc-left { float: left; width: var(--ab-float); margin: 6px 26px 18px 0; }
.vc-center, .vc-none { clear: both; }
.vc-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1px; background: var(--ab-line); border: 1px solid var(--ab-line);
  border-radius: var(--ab-r); overflow: hidden; margin: 0 0 1.4em; font-size: var(--ab-base); }
.vc-facts div { background: var(--ab-sea-2); padding: 12px 16px; }
.vc-facts dt { font-size: var(--ab-tiny); letter-spacing: .14em; text-transform: uppercase; color: var(--ab-glow); }
.vc-facts dd { margin: 2px 0 0; }
.vc-video, .vc-embed { position: relative; aspect-ratio: 16/9; margin: 0 0 1.6em; border-radius: var(--ab-r); overflow: hidden; background: var(--ab-sea-2); clear: both; }
.vc-embed.vc-form { aspect-ratio: auto; height: 900px; }
.vc-video iframe, .vc-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vc-table { overflow-x: auto; margin: 0 0 1.4em; }
.vc-table table { border-collapse: collapse; width: 100%; font-size: var(--ab-base); }
.vc-table td, .vc-table th { border-bottom: 1px solid var(--ab-line); padding: 8px 10px; text-align: left; vertical-align: top; }
.vc-note { background: var(--ab-glow-soft); border-left: 3px solid var(--ab-glow); border-radius: var(--ab-r); padding: 14px 18px; margin: 0 0 28px; }
.vc-note a { color: var(--ab-glow); }
.vc-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 30px 0 0; clear: both; }
.vc-tags a { font-size: var(--ab-small); border: 1px solid var(--ab-line); border-radius: var(--ab-pill); padding: 4px 12px; color: var(--ab-dim); }
.vc-author { display: flex; gap: 20px; align-items: flex-start; margin: 48px 0 0; padding: 24px; background: var(--ab-sea-2); border: 1px solid var(--ab-line);
  border-radius: var(--ab-r); clear: both; }
.vc-author img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; flex: none; }
.vc-author .ab-kick { margin: 0 0 4px; }
.vc-author h2 { font: 600 var(--ab-h3) var(--ab-display); margin: 0 0 6px; } .vc-author h2 a:hover { color: var(--ab-glow); }
.vc-author p { margin: 0; color: var(--ab-dim); font-size: var(--ab-base); }

/* card lists */
.vc-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: var(--ab-gap); }
.vc-card a { display: block; height: 100%; background: var(--ab-sea-2); border: 1px solid var(--ab-line); border-radius: var(--ab-r); overflow: hidden; transition: border-color .2s; }
.vc-card a:hover { border-color: var(--ab-glow); }
.vc-card img, .vc-noimg { width: 100%; aspect-ratio: 3/2; object-fit: cover; display: block; background: var(--ab-plain); }
.vc-card div { padding: 16px 18px 20px; }
.vc-cat { font-size: var(--ab-tiny); letter-spacing: .16em; text-transform: uppercase; color: var(--ab-glow); margin: 0 0 6px; }
.vc-card h3 { font: 600 var(--ab-read)/1.25 var(--ab-display); margin: 0 0 8px; }
.vc-card p { margin: 0; color: var(--ab-dim); font-size: var(--ab-small); line-height: 1.5; }
.vc-list { padding-top: 56px; }
.vc-pager { display: flex; gap: 20px; justify-content: center; align-items: center; margin: 44px 0 0; font-size: var(--ab-small); color: var(--ab-dim); }
.vc-pager a { border: 1px solid var(--ab-glow); color: var(--ab-glow); border-radius: var(--ab-pill); padding: 9px 20px; font-weight: 800; }
.vc-pager a:hover { background: var(--ab-glow); color: var(--ab-sea-0); }
.vc-bio { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.vc-face { width: 160px; height: 160px; border-radius: 50%; object-fit: cover; }
.vc-role { color: var(--ab-glow); font-size: var(--ab-small); letter-spacing: .08em; text-transform: uppercase; }
.vc-role a { text-decoration: underline; }

/* search */
.vc-search { display: flex; gap: 10px; margin-bottom: 30px; }
.vc-search input { flex: 1; min-width: 0; font: var(--ab-read) var(--ab-body); color: var(--ab-ink); background: var(--ab-sea-2); border: 1px solid var(--ab-line);
  border-radius: var(--ab-pill); padding: 12px 20px; }
.vc-search input:focus { outline: none; border-color: var(--ab-glow); }
.vc-search button { font: 800 var(--ab-small) var(--ab-body); letter-spacing: .06em; text-transform: uppercase; color: var(--ab-sea-0); background: var(--ab-glow);
  border: 0; border-radius: var(--ab-pill); padding: 0 24px; cursor: pointer; }
.vc-results a { display: grid; grid-template-columns: 96px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--ab-line); text-decoration: none; }
.vc-results img { width: 96px; height: 72px; object-fit: cover; border-radius: 10px; }
.vc-results b { display: block; font: 600 var(--ab-read) var(--ab-display); color: var(--ab-ink); }
.vc-results small { color: var(--ab-dim); font-size: var(--ab-small); }

/* photo zoom */
.vc-zoom { position: fixed; inset: 0; z-index: 20; background: var(--ab-overlay); display: grid; place-items: center; padding: 24px; }
.vc-zoom[hidden] { display: none; }
.vc-zoom img { max-width: 100%; max-height: 90vh; border-radius: var(--ab-r); }
.vc-zoom button { position: absolute; top: 14px; right: 18px; font: 300 var(--ab-h2-read) var(--ab-body); color: var(--ab-ink); background: none; border: 0; cursor: pointer; }

/* footer */
.ab-foot { margin-top: 110px; border-top: 1px solid var(--ab-line); padding: 48px var(--ab-gut); display: grid; grid-template-columns: 3fr 4fr 3fr;
  gap: var(--ab-gap); max-width: 1480px; margin-inline: auto; align-items: start; color: var(--ab-dim); font-size: var(--ab-small); }
.ab-foot-logo { height: var(--ab-logo-foot); width: auto; }
.ab-foot nav { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.ab-foot nav a:hover { color: var(--ab-glow); }
.ab-press { justify-self: end; text-align: right; } .ab-press img { height: var(--ab-press-h); width: auto; margin-left: auto; }

@media (max-width: 860px) {
  .ab-gauge { display: none; }
  .ab-menu { display: block; } .ab-badge img { height: var(--ab-logo-h-phone); }
  .ab-nav { display: none; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 0; background: var(--ab-overlay); border: 1px solid var(--ab-line);
    border-radius: var(--ab-r); padding: 8px 0; font-size: var(--ab-base); }
  .ab-nav.is-open { display: flex; }
  .ab-nav a { padding: 12px 20px; text-shadow: none; } .ab-find { border: 0; background: none; border-radius: 0; }
  .ab-boat { grid-template-columns: 1fr; } .ab-mosaic { grid-template-columns: 1fr 1fr; grid-auto-rows: 160px; }
  .ab-story, .ab-foot { grid-template-columns: 1fr; } .ab-plan { grid-template-columns: 1fr 1fr; }
  .ab-story ul, .ab-press { justify-self: start; text-align: left; } .ab-press img { margin-left: 0; }
  .vc-right, .vc-left { float: none; width: auto; margin: 8px 0 24px; }
  .vc-author { flex-direction: column; }
}
.vc-body a:has(.vc-book) { text-decoration: none; }
.vc-book { display: inline-block; border: 1px solid var(--ab-glow); color: var(--ab-glow); border-radius: var(--ab-pill); padding: 11px 26px;
  font-weight: 800; font-size: var(--ab-small); letter-spacing: .06em; text-transform: uppercase; }
.vc-book:hover { background: var(--ab-glow); color: var(--ab-sea-0); }