/* Mobile web version of the Dhivehi eye-health leaflets (RTL, phone widths). */

:root {
  --theme-dark: #00493e;
  --theme: #007e6c;
  --theme-light: #72e06c;
  --ink: #222222;
  --muted: #3d4a47;
  --warn: #b4441c;
  --warn-tint: #fbe6da;
  --warn-ink: #6a2a12;

  --gap: 20px;
  --radius: 16px;
  --side: 18px;
}

/* Tints derive from the theme, so recompute them wherever a theme class sets new colours */
:root, [class*="theme-"] {
  --tint: color-mix(in srgb, var(--theme) 10%, white);
  --tint-theme: color-mix(in srgb, var(--theme) 12%, white);
  --tint-light: color-mix(in srgb, var(--theme-light) 22%, white);
  --cover-band: color-mix(in srgb, var(--theme-dark) 82%, white);
  --page-bg: color-mix(in srgb, var(--theme) 6%, #f3f4f4);
}

@font-face {
  font-family: "Faruma";
  src: url("fonts/Faruma.ttf") format("truetype");
  font-display: swap;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  min-height: 100dvh;
  background: var(--page-bg);
  font-family: "Faruma", sans-serif;
  font-synthesis: none;
  font-size: 17px;
  line-height: 1.95;
  color: var(--ink);
}

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

.app {
  max-width: 480px;
  min-height: 100dvh;
  margin: 0 auto;
  background: #fff;
  padding-bottom: 32px;
  box-shadow: 0 0 40px rgb(0 0 0 / 0.08);
}

/* Swipe deck: one full-screen page per topic, swiped sideways */
body.deck-page { overflow: hidden; height: 100dvh; }
.deck-page .app { height: 100dvh; padding-bottom: 0; position: relative; }
.deck {
  display: flex;
  height: 100dvh;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.deck::-webkit-scrollbar { display: none; }
.slide {
  flex: 0 0 100%;
  height: 100dvh;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  padding-bottom: 72px;
}
.slide--center { display: flex; flex-direction: column; justify-content: center; }
.slide > .section:first-child { padding-top: 76px; }

.dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 14px 0 calc(14px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, #fff 55%, rgb(255 255 255 / 0));
  pointer-events: none;
}
.dots button {
  pointer-events: auto;
  width: 8px;
  height: 8px;
  border: 0;
  border-radius: 4px;
  background: var(--tint-theme);
  transition: width 0.2s ease, background 0.2s ease;
}
.dots button[aria-current="true"] { width: 24px; background: var(--theme); }

.swipe-hint {
  display: flex;
  justify-content: center;
  color: var(--theme);
  padding: 8px 0 0;
  animation: nudge 1.6s ease-in-out 3;
}
.swipe-hint svg { width: 28px; height: 28px; }
@keyframes nudge { 50% { transform: translateX(-10px); } }

/* Floating back button (RTL: back points right) */
.back-btn {
  position: absolute;
  top: calc(12px + env(safe-area-inset-top));
  right: 12px;
  z-index: 10;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.92);
  box-shadow: 0 2px 10px rgb(0 0 0 / 0.18);
  color: var(--theme-dark);
}
.back-btn svg { width: 22px; height: 22px; }

/* Photo banner at the top of a topic page */
.banner { height: 190px; overflow: hidden; border-radius: 0 0 24px 24px; background: var(--tint); }
.banner img { width: 100%; height: 100%; object-fit: cover; }
.credit { font-size: 11px; line-height: 1.4; color: #8a8f8e; direction: ltr; text-align: center; font-family: system-ui, sans-serif; }

/* Cover hero */
.hero { padding: 0 0 var(--gap); }
.cover-title {
  position: relative;
  overflow: hidden;
  min-height: 300px;
  background: var(--theme-dark);
  color: #fff;
  padding: 72px 24px 120px;
  border-radius: 0 0 28px 28px;
}
.cover-title .waves {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 55%;
}
.cover-title h1 {
  position: relative;
  font-size: 44px;
  line-height: 1.45;
  font-weight: 400;
  -webkit-text-stroke: 0.02em #fff;
}
.cover-title h1 .sub {
  display: block;
  font-size: 24px;
  line-height: 1.6;
  -webkit-text-stroke: 0.015em #fff;
}
.hero-figure {
  position: relative;
  z-index: 1;
  width: calc(100% - 2 * 32px);
  margin: -96px auto 0;
  border-radius: var(--radius);
  overflow: hidden;
  outline: 5px solid #fff;
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.15);
}
.hero-figure img { width: 100%; height: auto; }

/* Content sections */
.section {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: var(--gap) var(--side);
}

h2 {
  font-size: 22px;
  line-height: 1.7;
  font-weight: 400;
  color: var(--theme-dark);
  -webkit-text-stroke: 0.03em var(--theme-dark);
  text-wrap: balance;
}
h2::after {
  content: "";
  display: block;
  width: 48px;
  height: 4px;
  margin-top: 6px;
  border-radius: 2px;
  background: var(--theme-light);
}

p { text-align: right; text-wrap: pretty; }

.term {
  color: var(--theme-dark);
  -webkit-text-stroke: 0.025em var(--theme-dark);
}

.figure { border-radius: var(--radius); overflow: hidden; background: var(--tint); }
.figure img { width: 100%; height: auto; }
.figure--white { background: #fff; }
.figure-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.figure-row .figure { display: grid; place-items: center; }

/* Step list: a rail with diamond nodes */
.steps {
  list-style: none;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-right: 26px;
}
.steps::before {
  content: "";
  position: absolute;
  right: 8px;
  top: 18px;
  bottom: 18px;
  width: 2px;
  background: var(--theme);
}
.steps li {
  position: relative;
  background: var(--tint);
  border-radius: 12px;
  padding: 10px 14px;
  text-align: right;
}
.steps li::before {
  content: "";
  position: absolute;
  right: -23px;
  top: 16px;
  width: 10px;
  height: 10px;
  background: var(--theme);
  outline: 3px solid #fff;
  transform: rotate(45deg);
}
.steps li:last-child::before { background: var(--theme-dark); }
.steps .figure { margin-top: 10px; background: #fff; }

/* Cards and bullet lists */
.card {
  background: var(--tint);
  border-radius: var(--radius);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.bullets {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 17px;
  line-height: 1.8;
}
.bullets li { position: relative; padding-right: 22px; text-align: right; }
.bullets li::before {
  content: "";
  position: absolute;
  right: 3px;
  top: 0.75em;
  width: 8px;
  height: 8px;
  background: var(--theme);
  transform: rotate(45deg);
}

/* Small clipart tiles in a row */
.icon-strip { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.icon-strip img {
  height: 88px;
  width: auto;
  padding: 6px;
  border-radius: 12px;
  background: #fff;
}

/* Warning callout */
.callout {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--radius);
  border-right: 6px solid var(--warn);
  background: var(--warn-tint);
  color: var(--warn-ink);
}
.callout svg { flex: none; width: 26px; height: 26px; }

/* Feature note with a wavy top edge */
.note {
  position: relative;
  overflow: hidden;
  background: var(--tint);
  border-radius: var(--radius);
  padding: 36px 20px 24px;
  color: var(--theme-dark);
  font-size: 19px;
  line-height: 1.95;
}
.note .wave { position: absolute; top: 0; left: 0; width: 100%; height: 22px; }

/* Circular photo framed by pale rings */
.eye {
  position: relative;
  display: grid;
  place-items: center;
  height: 290px;
}
.eye .rings { position: absolute; width: 290px; height: 290px; }
.eye img {
  position: relative;
  width: 210px;
  height: 210px;
  border-radius: 50%;
  object-fit: cover;
  outline: 6px solid var(--theme-light);
}

/* Closing block: contact, then logo */
.end {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  margin: 12px var(--side) 0;
  padding-top: 28px;
  border-top: 1px solid var(--tint-theme);
}
.end .org { font-size: 13px; line-height: 1.8; color: var(--muted); text-align: center; }
.contact {
  direction: ltr;
  font-family: "Avenir Next", "Helvetica Neue", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}
.contact-row { display: flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; }
.contact-row svg { flex: none; width: 18px; height: 18px; }
.contact a.contact-row { color: var(--theme); font-weight: 600; }

/* Landing page */
.home-head {
  display: flex;
  justify-content: center;
  padding: 36px var(--side) 12px;
}
.cards {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 18px var(--side) 8px;
}
.leaflet-card {
  position: relative;
  display: block;
  overflow: hidden;
  min-height: 176px;
  border-radius: 22px;
  background: var(--theme-dark);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--theme-dark) 30%, transparent);
  transition: transform 0.15s ease;
}
.leaflet-card:active { transform: scale(0.98); }
.leaflet-card .waves { position: absolute; left: 0; bottom: 0; width: 100%; height: 50%; }
.leaflet-card .thumb {
  position: absolute;
  left: 18px;
  top: 50%;
  margin-top: -52px;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  object-fit: cover;
  outline: 4px solid var(--theme-light);
}
.leaflet-card h2 {
  position: relative;
  max-width: calc(100% - 130px);
  padding: 22px 22px 70px;
  font-size: 28px;
  line-height: 1.45;
  color: #fff;
  -webkit-text-stroke: 0.02em #fff;
}
.leaflet-card h2::after { display: none; }
.leaflet-card h2 .sub { display: block; font-size: 17px; line-height: 1.6; -webkit-text-stroke: 0.01em #fff; }
.leaflet-card .go {
  position: absolute;
  left: 18px;
  bottom: 16px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  color: var(--theme-dark);
}
.leaflet-card .go svg { width: 20px; height: 20px; }

.theme-glaucoma { --theme-dark: #00493e; --theme: #007e6c; --theme-light: #72e06c; }
.theme-dr { --theme-dark: #0d3b66; --theme: #1f6fb2; --theme-light: #7cc4f2; --muted: #3c4856; }
.theme-cataract { --theme-dark: #3d1f5c; --theme: #7046a8; --theme-light: #c3a3f0; --muted: #463c52; }
.theme-refractive { --theme-dark: #7a3410; --theme: #d2691e; --theme-light: #f6b65a; --muted: #4f3f35;
  --warn: #b3261e; --warn-tint: #fbe3e1; --warn-ink: #5c1410; }

/* Landing hero: photo with the logo on a frosted plate */
.home-hero { position: relative; height: 300px; overflow: hidden; border-radius: 0 0 32px 32px; background: #0f2a2a; }
.home-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.9; }
.home-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(10 30 30 / 0.55), rgb(10 30 30 / 0) 60%); }
.home-hero-inner {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: max-content;
  padding: 16px 22px 12px;
  border-radius: 20px;
  background: rgb(255 255 255 / 0.9);
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.2);
}
.eyebrow {
  direction: ltr;
  font-family: "Avenir Next", "Helvetica Neue", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #2f4f4b;
  text-align: center;
}
.home-credit { padding: 18px 0 8px; }
.credit a { color: inherit; }

/* Photo credits page (English, LTR) */
.credits-page { font-family: "Avenir Next", "Helvetica Neue", system-ui, sans-serif; font-size: 15px; line-height: 1.5; }
.credits-page .app { position: relative; }
.back-btn--ltr { left: 12px; right: auto; }
.credits { padding-top: 76px; }
.credits h2 { -webkit-text-stroke: 0; font-weight: 600; }
.credits ul { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.credits li { display: flex; align-items: center; gap: 12px; }
.credits li img { width: 72px; height: 48px; object-fit: cover; border-radius: 8px; flex: none; }
.credits a { color: var(--theme); }

/* Closing slide: where the content comes from */
.source {
  direction: ltr;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-family: "Avenir Next", "Helvetica Neue", system-ui, sans-serif;
  color: var(--muted);
  text-align: center;
}
.source p { text-align: center; }
.source-label { font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--theme); }
.source-name { font-size: 18px; font-weight: 600; line-height: 1.4; color: var(--theme-dark); margin-bottom: 10px; }
.source .contact-row { font-size: 15px; line-height: 1.5; }