/* ============================================================
   Lani's Resto & Room — hand-built for Tanjung Setia
   One stylesheet, no framework. Colors pulled from the place:
   sunset over the point, reef-water teal, warm wood, sand.
   ============================================================ */

@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-italic-400.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Karla";
  src: url("../fonts/karla-var.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Karla";
  src: url("../fonts/karla-italic-400.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ocean-first palette, matched to Lani's own blue-and-white look */
  --paper: #eef4f1;       /* sea foam */
  --paper-deep: #dfeae5;
  --ink: #10353f;         /* deep-water ink */
  --ink-soft: #3c5b63;
  --sea: #177387;         /* lagoon — the lead accent */
  --sea-deep: #0c4a56;
  --lagoon-ink: #0e6377;  /* text accent that passes AA on foam */
  --aqua-light: #8fd6c9;  /* links on dark ocean panels */
  --sunset: #d95b2f;      /* small warm accents only */
  --sunset-ink: #b3401e;
  --gold: #e8a13c;        /* tape, underline — the one warm note */
  --dusk: #123f52;        /* deep-blue slab behind photos */
  --wa-green: #128c4b;
  --radius-organic: 3px 26px 3px 26px;
  color-scheme: light;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: "Karla", "Gill Sans", "Trebuchet MS", sans-serif;
  font-size: 1.06rem;
  line-height: 1.65;
  color: var(--ink);
  background-color: var(--paper);
  /* faint cool wash so the page isn't one flat plane */
  background-image: linear-gradient(175deg, #f4f8f6 0%, var(--paper) 38%, #e2eee9 100%);
  -webkit-font-smoothing: antialiased;
}

/* paper grain over everything, very quiet */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

img { max-width: 100%; height: auto; display: block; }

::selection { background: var(--aqua-light); color: var(--ink); }

/* ---------- type ---------- */

h1, h2, h3 {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.4rem, 6.5vw, 4.2rem); }
h2 { font-size: clamp(1.7rem, 4vw, 2.6rem); }
h3 { font-size: 1.25rem; line-height: 1.3; }

h1 em, h2 em {
  font-style: italic;
  font-weight: 400;
  color: var(--lagoon-ink);
}

p { margin: 0 0 1.1em; max-width: 62ch; }

a { color: var(--lagoon-ink); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { color: var(--sunset-ink); }

.eyebrow {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sea);
  margin: 0 0 1rem;
}

.lede { font-size: 1.18rem; line-height: 1.6; color: var(--ink); }
.note { font-style: italic; color: var(--ink-soft); font-size: 0.95rem; }

/* ---------- shell & sections ---------- */

.shell { max-width: 1080px; margin-inline: auto; padding-inline: clamp(1.1rem, 4vw, 2.5rem); }

section { padding-block: clamp(3.2rem, 8vw, 5.5rem); }

.divider {
  display: block;
  width: min(220px, 40vw);
  margin: 0 auto;
  color: var(--sea);
  opacity: 0.7;
}

/* ---------- skip link ---------- */

.skip {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--ink); color: var(--paper); padding: 0.6rem 1rem;
}
.skip:focus { left: 0.5rem; top: 0.5rem; }

/* ---------- header ---------- */

.site-head {
  padding-block: 1.1rem 0.6rem;
  border-bottom: 1px solid rgba(30, 52, 54, 0.14);
}
.site-head .shell {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 1.6rem;
}
.wordmark {
  font-family: "Fraunces", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.7rem;
  color: var(--ink);
  text-decoration: none;
  margin-right: auto;
}
.wordmark b { font-style: normal; font-weight: 600; color: var(--lagoon-ink); }
.site-nav {
  display: flex; gap: 1.15rem; flex-wrap: wrap;
  font-size: 0.94rem; font-weight: 700;
}
.site-nav a { color: var(--ink); text-decoration: none; padding-block: 0.3rem; }
.site-nav a:hover { color: var(--lagoon-ink); }
.site-nav a[aria-current="page"] {
  color: var(--lagoon-ink);
  border-bottom: 2px solid var(--gold);
}

/* ---------- hero ---------- */

.hero { padding-block: clamp(2.6rem, 7vw, 5rem) clamp(3rem, 7vw, 5rem); overflow-x: clip; }
.hero-grid {
  display: grid; gap: clamp(1.6rem, 4vw, 3.5rem);
  align-items: center;
}
@media (min-width: 820px) {
  .hero-grid { grid-template-columns: 1.05fr 0.95fr; }
  .hero-copy { padding-bottom: 2.5rem; } /* asymmetry: copy rides higher than image */
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: center; margin-top: 1.6rem; }
.hero-fact {
  margin-top: 1.1rem; font-size: 0.95rem; color: var(--ink-soft); font-style: italic;
}

/* one CSS-only page-load reveal, hero only */
@media (prefers-reduced-motion: no-preference) {
  .hero-copy > * { opacity: 0; transform: translateY(14px); animation: rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) forwards; }
  .hero-copy > *:nth-child(2) { animation-delay: 0.08s; }
  .hero-copy > *:nth-child(3) { animation-delay: 0.16s; }
  .hero-copy > *:nth-child(4) { animation-delay: 0.24s; }
  .hero-copy > *:nth-child(5) { animation-delay: 0.32s; }
  .hero-fig { opacity: 0; transform: translateY(20px) rotate(0.6deg); animation: rise 0.9s 0.15s cubic-bezier(0.2, 0.7, 0.2, 1) forwards; }
  @keyframes rise { to { opacity: 1; transform: none; } }
}

/* ---------- figures: photos do the talking ---------- */

.fig { position: relative; margin: 0; }
.fig img {
  border-radius: var(--radius-organic);
  width: 100%;
}
.fig picture { position: relative; display: block; }
.fig picture::before {
  /* offset color slab behind the photo only (never the caption) — handmade, not card-grid */
  content: "";
  position: absolute; inset: 0;
  transform: translate(12px, 14px) rotate(-1deg);
  background: var(--sea);
  border-radius: var(--radius-organic);
  z-index: -1;
  opacity: 0.85;
}
.fig.sea picture::before { background: var(--aqua-light); }
.fig.dusk picture::before { background: var(--dusk); }
.fig.sand picture::before { background: var(--gold); }
.fig.tilt-l { transform: rotate(-1deg); }
.fig.tilt-r { transform: rotate(0.8deg); }
.fig figcaption {
  font-size: 0.85rem; font-style: italic; color: var(--ink-soft);
  padding-top: 0.55rem;
}

/* ---------- split sections ---------- */

.split {
  display: grid; gap: clamp(1.8rem, 4.5vw, 4rem);
  align-items: center;
}
@media (min-width: 780px) {
  .split { grid-template-columns: 7fr 5fr; }
  .split.flip > .fig { order: -1; }
  .split > .fig { margin-block: 1rem; }
}

/* small overlapping photo pair (resto teaser) */
.collage { position: relative; margin: 0; }
.collage .fig.main { width: 86%; }
.collage .fig.over {
  position: absolute; right: 0; bottom: -12%; width: 44%;
  transform: rotate(2.2deg);
}
@media (max-width: 779px) {
  .collage { margin-bottom: 3rem; }
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex; align-items: center; gap: 0.55rem;
  background: var(--sea-deep); color: #eefaf7;
  font-weight: 700; font-size: 1rem; text-decoration: none;
  padding: 0.8rem 1.5rem; border-radius: 999px;
  box-shadow: 0 2px 0 rgba(16, 53, 63, 0.35);
  transition: transform 0.15s ease, background 0.15s ease;
}
.btn:hover { background: var(--lagoon-ink); color: #eefaf7; transform: translateY(-1px); }
.btn svg { flex: none; }
.btn.ghost {
  background: transparent; color: var(--ink);
  box-shadow: inset 0 0 0 2px var(--ink);
}
.btn.ghost:hover { background: var(--ink); color: var(--paper); transform: none; }

/* persistent WhatsApp button — thumb corner */
.wa-float {
  position: fixed; right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 100;
  display: flex; align-items: center; gap: 0.6rem;
  background: var(--wa-green); color: #fff;
  border-radius: 999px; padding: 0.85rem;
  text-decoration: none; font-weight: 700; font-size: 0.95rem;
  box-shadow: 0 6px 18px rgba(30, 52, 54, 0.35);
}
.wa-float:hover { background: #0c6b39; color: #fff; }
.wa-float .label { display: none; }
@media (min-width: 700px) {
  .wa-float { padding: 0.85rem 1.3rem 0.85rem 0.95rem; }
  .wa-float .label { display: inline; }
}

/* ---------- reviews ---------- */

.reviews-band { background: linear-gradient(180deg, rgba(23, 115, 135, 0.12), rgba(23, 115, 135, 0.02)); }
.postcards {
  display: flex; flex-wrap: wrap; gap: 1.4rem; margin-top: 2rem;
}
.postcard {
  flex: 1 1 260px; max-width: 400px;
  background: #f8fcfa;
  border-radius: 4px;
  padding: 1.4rem 1.4rem 1.1rem;
  box-shadow: 0 2px 10px rgba(30, 52, 54, 0.12);
  position: relative;
}
.postcard:nth-child(odd) { transform: rotate(-0.8deg); }
.postcard:nth-child(even) { transform: rotate(0.7deg); margin-top: 0.8rem; }
.postcard::before {
  /* strip of "tape" */
  content: "";
  position: absolute; top: -9px; left: 50%; transform: translateX(-50%) rotate(-2deg);
  width: 78px; height: 20px;
  background: rgba(232, 161, 60, 0.5);
}
.postcard blockquote { margin: 0 0 0.8rem; font-size: 1rem; }
.postcard blockquote p { font-style: italic; }
.postcard cite {
  font-style: normal; font-size: 0.85rem; font-weight: 700; color: var(--sea-deep);
}
.postcard cite a { font-weight: 400; }

/* ---------- surf guide ---------- */

.wave-list { list-style: none; margin: 2rem 0 0; padding: 0; max-width: 46rem; }
.wave-list li {
  padding: 1.1rem 0 1.2rem;
  border-top: 1px solid rgba(30, 52, 54, 0.18);
}
.wave-list li:last-child { border-bottom: 1px solid rgba(30, 52, 54, 0.18); }
.wave-list h3 { margin-bottom: 0.2rem; }
.wave-list .tag {
  display: inline-block; margin-left: 0.55rem; vertical-align: 0.14em;
  font-family: "Karla", sans-serif; font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--paper); background: var(--sea);
  padding: 0.18rem 0.55rem; border-radius: 999px;
}
.wave-list .tag.hard { background: var(--sunset-ink); }
.wave-list p { margin-bottom: 0; }

/* travel steps — numbered like a napkin note, not icon cards */
.route { counter-reset: leg; list-style: none; margin: 2rem 0 0; padding: 0; max-width: 46rem; }
.route li { counter-increment: leg; position: relative; padding: 0 0 1.4rem 3.2rem; }
.route li::before {
  content: counter(leg);
  position: absolute; left: 0; top: 0.05rem;
  font-family: "Fraunces", Georgia, serif; font-weight: 600; font-size: 1.5rem;
  color: var(--paper);
  background: var(--dusk);
  width: 2.2rem; height: 2.2rem; border-radius: 50% 50% 50% 6px;
  display: grid; place-items: center;
}
.route li:nth-child(2)::before { background: var(--sea); }
.route li:nth-child(3)::before { background: var(--sea-deep); }

/* ---------- contact ---------- */

.contact-band { background: linear-gradient(170deg, var(--ink), #0d2f3f 85%); color: var(--paper); }
.contact-band h2, .contact-band h3 { color: var(--paper); }
.contact-band h2 em { color: var(--aqua-light); }
.contact-band a { color: var(--aqua-light); }
.contact-band a:hover { color: #fff; }
.contact-band .eyebrow { color: var(--aqua-light); }
.contact-band p { color: rgba(238, 244, 241, 0.92); }
.contact-cols {
  display: grid; gap: 2.2rem; margin-top: 2.2rem;
}
@media (min-width: 760px) { .contact-cols { grid-template-columns: 1.2fr 1fr; } }
.contact-line { font-size: 1.12rem; margin-bottom: 0.4em; }

address { font-style: normal; line-height: 1.7; }

/* map facade: no external request until the guest asks for one */
.map-shell {
  position: relative; margin-top: 1rem;
  border-radius: var(--radius-organic);
  overflow: hidden;
  background: linear-gradient(160deg, var(--sea-deep), var(--ink) 80%);
  min-height: 320px;
  display: grid; place-items: center;
}
.map-shell iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map-load {
  display: inline-flex; flex-direction: column; align-items: center; gap: 0.7rem;
  background: none; border: 2px solid var(--aqua-light); color: var(--aqua-light);
  font: inherit; font-weight: 700;
  padding: 1rem 1.6rem; border-radius: 999px; cursor: pointer;
}
.map-load:hover { background: var(--aqua-light); color: var(--ink); }
.map-note { font-size: 0.82rem; color: rgba(238, 244, 241, 0.9); }

/* ---------- footer ---------- */

.site-foot {
  background: var(--sea-deep); color: var(--paper);
  padding-block: 2.8rem 5.5rem; /* extra bottom room so the WA float never covers text */
}
.site-foot a { color: var(--aqua-light); }
.site-foot a:hover { color: #fff; }
.foot-grid { display: grid; gap: 2rem; }
@media (min-width: 760px) { .foot-grid { grid-template-columns: 1.3fr 1fr; } }
.bahasa {
  /* default styling assumes the light foam background (e.g. contact page) */
  background: rgba(23, 115, 135, 0.12);
  border-left: 4px solid var(--gold);
  padding: 1rem 1.2rem;
  border-radius: 0 12px 12px 0;
  font-size: 0.95rem;
}
.bahasa strong { color: var(--sea-deep); }
/* on the dark footer, lift the overlay and use bright aqua to keep AA contrast */
.site-foot .bahasa { background: rgba(238, 244, 241, 0.07); }
.site-foot .bahasa strong,
.site-foot .bahasa a { color: var(--aqua-light); }
.site-foot .bahasa a:hover { color: #fff; }
.foot-meta { font-size: 0.85rem; color: rgba(245, 238, 225, 0.75); margin-top: 2rem; }
.foot-meta p { max-width: none; }

/* ---------- page intros (subpages) ---------- */

.page-intro { padding-block: clamp(2.6rem, 6vw, 4.2rem) 0; }
.page-intro .lede { max-width: 56ch; }

/* honesty box: things we want you to know before you book */
.straight-talk {
  max-width: 46rem;
  background: rgba(232, 161, 60, 0.16);
  border-radius: var(--radius-organic);
  padding: 1.5rem 1.7rem;
  margin-top: 2.5rem;
}
.straight-talk h3 { margin-top: 0; }
.straight-talk p:last-child { margin-bottom: 0; }

@media print {
  .wa-float, body::after { display: none; }
}