/* ==================================================
   LIFE ON LAND - COMPLETE CSS
================================================== */

:root {
  --forest: #315f3c;
  --forest-dark: #24482e;
  --leaf: #687c4f;
  --sage: #8fa57c;

  --cream: #eadbc0;
  --cream-light: #f4ead7;
  --paper: #f8f2e7;

  --brown: #7a5a3a;

  --orange: #c76d35;
  --orange-dark: #a95728;

  --text: #2e2a25;
  --muted: #6f665b;

  --white: #ffffff;
}


/* ==================================================
   GENERAL
================================================== */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;

  background: #ded0b5;

  color: var(--text);

  font-family:
    Arial,
    Helvetica,
    sans-serif;
}


/* ==================================================
   APP
================================================== */

.app-wrapper {
  min-height: 100vh;

  display: flex;
  justify-content: center;

  padding: 20px;
}

.app {
  width: 390px;

  max-width: 100%;

  min-height: 800px;

  background:
    var(--cream-light);

  border:
    9px solid #292722;

  border-radius: 38px;

  overflow: hidden;

  position: relative;

  box-shadow:
    0 18px 45px
    rgba(53, 44, 34, 0.20);
}


/* ==================================================
   STATUS BAR
================================================== */

.status-bar {
  height: 34px;

  display: flex;
  justify-content: space-between;
  align-items: center;

  padding:
    0 12px;

  font-size: 12px;

  font-weight: bold;

  background:
    var(--cream-light);
}

.status-left {
  display: flex;

  align-items: center;
}

.status-right {
  display: flex;

  align-items: center;

  gap: 7px;
}


/* ==================================================
   SIGNAL
================================================== */

.signal {
  display: flex;

  align-items: flex-end;

  gap: 2px;

  height: 12px;
}

.signal span {
  display: block;

  width: 3px;

  background:
    var(--text);

  border-radius: 1px;
}

.signal span:nth-child(1) {
  height: 4px;
}

.signal span:nth-child(2) {
  height: 7px;
}

.signal span:nth-child(3) {
  height: 10px;
}


/* ==================================================
   WIFI
================================================== */

.wifi {
  font-size: 14px;

  line-height: 1;
}


/* ==================================================
   BATTERY
================================================== */

.battery {
  width: 25px;

  height: 12px;

  border:
    1.5px solid var(--text);

  border-radius: 3px;

  position: relative;

  display: flex;

  align-items: center;

  padding: 1px;
}

.battery::after {
  content: "";

  position: absolute;

  right: -4px;
  top: 3px;

  width: 2px;
  height: 5px;

  background:
    var(--text);

  border-radius: 1px;
}

.battery-level {
  width: 78%;

  height: 100%;

  background:
    var(--forest);

  border-radius: 1px;
}


/* ==================================================
   HEADER
================================================== */

.top-header {
  background:
    var(--forest);

  padding:
    14px 18px 26px;

  text-align: center;

  position: relative;

  border-bottom:
    3px solid var(--sage);
}

.small-brand {
  color:
    var(--white);

  font-size: 17px;

  font-weight: 900;

  letter-spacing: 2px;

  margin-bottom: 7px;
}

.tagline {
  color:
    #f3e5cb;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: 14px;

  font-style: italic;

  margin: 0;

  line-height: 1.4;
}


/* ==================================================
   HEADER BUTTONS
================================================== */

.menu-button,
.back-button {
  position: absolute;

  border: none;

  background: transparent;

  cursor: pointer;

  color: var(--white);

  z-index: 10;
}

.menu-button {
  left: 15px;

  top: 20px;

  font-size: 27px;
}

.back-button {
  right: 15px;

  top: 17px;

  font-size: 23px;
}


/* ==================================================
   MENU
================================================== */

.menu-overlay {
  position: fixed;

  inset: 0;

  background:
    rgba(0, 0, 0, 0.45);

  opacity: 0;

  visibility: hidden;

  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;

  z-index: 1000;
}

.menu-overlay.open {
  opacity: 1;

  visibility: visible;
}

.side-menu {
  position: absolute;

  top: 0;
  left: 0;

  width: 285px;

  max-width: 82vw;

  height: 100%;

  background:
    var(--paper);

  padding:
    22px 14px;

  transform:
    translateX(-100%);

  transition:
    transform 0.3s ease;

  box-shadow:
    8px 0 20px
    rgba(0, 0, 0, 0.18);

  overflow-y: auto;
}

.menu-overlay.open .side-menu {
  transform:
    translateX(0);
}


/* ==================================================
   MENU HEADER
================================================== */

.menu-top {
  display: flex;

  justify-content: space-between;

  align-items: flex-start;

  padding:
    2px 5px 18px;
}

.menu-brand {
  color:
    #a42d25;

  font-family:
    Georgia,
    serif;

  font-size: 20px;

  font-weight: bold;

  letter-spacing: 1px;
}

.menu-tagline {
  color:
    #3d392f;

  font-family:
    Georgia,
    serif;

  font-style: italic;

  font-size: 14px;

  margin-top: 8px;
}

.close-menu {
  border: none;

  background: transparent;

  font-size: 25px;

  cursor: pointer;
}


/* ==================================================
   MENU LINKS
================================================== */

.menu-link {
  width: 100%;

  display: flex;

  align-items: center;

  gap: 12px;

  border: none;

  background: transparent;

  padding:
    14px 10px;

  margin-bottom: 5px;

  border-bottom:
    1px solid #e5dccd;

  text-align: left;

  color:
    #403b34;

  font-size: 15px;

  cursor: pointer;

  border-radius: 8px;
}

.menu-link:hover {
  background:
    #eee5d6;
}


/* ==================================================
   MENU ICONS
================================================== */

.menu-icon {
  width: 13px;

  height: 13px;

  border-radius: 50%;

  display: inline-block;

  flex-shrink: 0;
}

.home-icon {
  background:
    #d99d45;
}

.forest-icon {
  background:
    #687c4f;
}

.wildlife-icon {
  background:
    #5d8492;
}

.habitat-icon {
  background:
    #9a5966;
}

.activity-icon {
  background:
    #bd6a39;
}


/* ==================================================
   PAGES
================================================== */

.page {
  display: none;

  padding:
    0 15px 92px;
}

.page.active {
  display: block;
}


/* ==================================================
   PAGE HEADINGS
================================================== */

.page-heading {
  text-align: center;

  margin:
    10px 0 18px;

  padding:
    0 10px;
}

.page-heading h1 {
  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: 31px;

  line-height: 1.2;

  margin:
    0 0 8px;

  color:
    var(--text);
}

.page-heading p {
  margin: 0;

  color:
    var(--orange);

  font-family:
    Georgia,
    serif;

  font-style: italic;

  font-size: 14px;

  line-height: 1.4;
}


/* ==================================================
   HERO
================================================== */

.hero-card {
  position: relative;

  margin:
    15px 8px;

  border:
    2px solid #24221d;

  border-radius: 17px;

  overflow: hidden;

  height: 190px;

  box-shadow:
    0 5px 10px
    rgba(0, 0, 0, 0.15);
}

.hero-card img {
  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;
}

.hero-overlay {
  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      to top,
      rgba(26, 38, 25, 0.78),
      rgba(26, 38, 25, 0.02)
    );

  display: flex;

  align-items: flex-end;

  padding: 18px;
}

.hero-overlay h2 {
  color:
    var(--white);

  margin: 0;

  font-size: 21px;
}


/* ==================================================
   BUTTONS
================================================== */

button {
  font-family: inherit;
}

.main-action {
  width:
    calc(100% - 16px);

  margin:
    18px 8px;

  padding:
    16px;

  background:
    var(--leaf);

  color:
    var(--white);

  border:
    2px solid #3e4e30;

  border-radius:
    13px;

  font-size:
    16px;

  font-weight:
    bold;

  cursor:
    pointer;

  box-shadow:
    0 5px 8px
    rgba(0, 0, 0, 0.12);
}

.main-action:hover {
  background:
    #576b40;
}

.join-button {
  width:
    calc(100% - 16px);

  margin:
    10px 8px;

  padding:
    15px;

  background:
    var(--orange);

  border:
    2px solid var(--orange-dark);

  color:
    var(--white);

  border-radius:
    12px;

  font-weight:
    bold;

  font-size:
    16px;

  cursor:
    pointer;
}

.join-button:hover {
  background:
    var(--orange-dark);
}


/* ==================================================
   INFO CARD
================================================== */

.info-card {
  background:
    var(--paper);

  border-radius:
    14px;

  margin:
    14px 8px;

  padding:
    16px;

  border:
    1px solid #d4c3a8;

  box-shadow:
    0 4px 9px
    rgba(0, 0, 0, 0.06);
}

.info-card h3 {
  margin:
    0 0 5px;

  color:
    var(--forest-dark);
}

.info-card p {
  margin:
    0;

  color:
    var(--muted);

  font-size:
    14px;

  line-height:
    1.5;
}


/* ==================================================
   QUICK TOPICS
================================================== */

.topics-title {
  text-align:
    center;

  margin:
    30px 0 18px;

  font-family:
    Georgia,
    serif;

  font-size:
    20px;
}

.topic-grid {
  display:
    grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap:
    12px;

  padding:
    0 8px;
}

.topic-card {
  border:
    none;

  background:
    transparent;

  cursor:
    pointer;

  text-align:
    center;

  color:
    var(--text);
}

.topic-card:hover {
  transform:
    translateY(-2px);
}

.topic-circle {
  width:
    74px;

  height:
    74px;

  margin:
    auto;

  border-radius:
    50%;

  overflow:
    hidden;

  border:
    2px solid #292722;

  box-shadow:
    0 4px 8px
    rgba(0, 0, 0, 0.15);
}

.topic-circle img {
  width:
    100%;

  height:
    100%;

  object-fit:
    cover;
}

.topic-card span {
  display:
    block;

  margin-top:
    7px;

  font-size:
    12px;

  font-weight:
    bold;
}


/* ==================================================
   LARGE TOPIC CARDS
================================================== */

.large-topic-grid {
  display:
    grid;

  gap:
    16px;

  padding:
    0 8px;
}

.large-topic-card {
  position:
    relative;

  width:
    100%;

  height:
    155px;

  padding:
    0;

  border:
    2px solid #292722;

  border-radius:
    16px;

  overflow:
    hidden;

  cursor:
    pointer;

  background:
    #222;
}

.large-topic-card img {
  width:
    100%;

  height:
    100%;

  object-fit:
    cover;

  display:
    block;
}

.large-topic-overlay {
  position:
    absolute;

  inset:
    0;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    flex-end;

  padding:
    16px;

  color:
    white;

  text-align:
    left;

  background:
    linear-gradient(
      to top,
      rgba(0,0,0,0.75),
      rgba(0,0,0,0.05)
    );
}

.large-topic-overlay h2 {
  margin:
    0 0 5px;

  font-size:
    23px;
}

.large-topic-overlay p {
  margin:
    0;

  font-size:
    13px;
}


/* ==================================================
   LOCAL NATURE CARD
================================================== */

.local-nature-card {
  display:
    flex;

  align-items:
    center;

  gap:
    12px;

  margin:
    18px 8px;

  padding:
    15px;

  background:
    var(--paper);

  border:
    1px solid #d4c3a8;

  border-radius:
    14px;
}

.local-nature-icon {
  width:
    45px;

  height:
    45px;

  border-radius:
    50%;

  background:
    var(--forest);

  color:
    white;

  display:
    flex;

  justify-content:
    center;

  align-items:
    center;

  font-size:
    21px;

  flex-shrink:
    0;
}

.local-nature-card h3 {
  margin:
    0 0 5px;

  color:
    var(--forest-dark);
}

.local-nature-card p {
  margin:
    0;

  color:
    var(--muted);

  font-size:
    13px;

  line-height:
    1.4;
}


/* ==================================================
   TOPIC DETAIL
================================================== */

.topic-hero {
  height:
    175px;

  margin:
    10px 8px 16px;

  border-radius:
    16px;

  overflow:
    hidden;

  border:
    2px solid #292722;
}

.topic-hero img {
  width:
    100%;

  height:
    100%;

  object-fit:
    cover;
}

.topic-description {
  background:
    var(--paper);

  border-radius:
    14px;

  padding:
    18px;

  margin:
    0 8px 15px;

  border:
    1px solid #d3c0a2;

  box-shadow:
    0 4px 9px
    rgba(0, 0, 0, 0.06);
}

.topic-description h2 {
  color:
    var(--forest-dark);

  margin-top:
    0;
}

.topic-description p {
  color:
    var(--muted);

  line-height:
    1.6;
}


/* ==================================================
   ACTIVITY FILTERS
================================================== */

.activity-filters {
  display:
    grid;

  grid-template-columns:
    repeat(4, 1fr);

  gap:
    6px;

  margin:
    15px 8px;
}

.filter-button {
  border:
    1px solid #bdaa8d;

  background:
    var(--paper);

  color:
    var(--text);

  padding:
    9px 4px;

  border-radius:
    9px;

  font-size:
    11px;

  cursor:
    pointer;
}

.filter-button:hover {
  background:
    #ece2d1;
}

.filter-button.active {
  background:
    var(--forest);

  color:
    white;

  border-color:
    var(--forest);
}


/* ==================================================
   LOCAL ACTIVITY LIST
================================================== */

.local-activity-list {
  display:
    grid;

  gap:
    14px;

  margin:
    15px 8px;
}


/* ==================================================
   LOCAL ACTIVITY CARD
================================================== */

.local-activity-card {
  background:
    var(--paper);

  border:
    1px solid #d0bea0;

  border-radius:
    15px;

  overflow:
    hidden;

  box-shadow:
    0 4px 9px
    rgba(0,0,0,0.08);
}

.local-activity-image {
  width:
    100%;

  height:
    125px;

  object-fit:
    cover;

  display:
    block;
}

.local-activity-content {
  padding:
    14px;
}

.local-activity-content h3 {
  margin:
    0 0 5px;

  color:
    var(--forest-dark);

  font-size:
    18px;
}

.local-activity-content p {
  margin:
    4px 0;

  color:
    var(--muted);

  font-size:
    13px;

  line-height:
    1.4;
}

.activity-meta {
  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    6px;

  margin:
    10px 0;
}

.activity-tag {
  display:
    inline-block;

  padding:
    5px 8px;

  border-radius:
    8px;

  background:
    #e8decc;

  color:
    #514a40;

  font-size:
    11px;
}

.activity-view-button {
  width:
    100%;

  margin-top:
    8px;

  padding:
    11px;

  background:
    var(--leaf);

  color:
    white;

  border:
    2px solid #465636;

  border-radius:
    10px;

  font-weight:
    bold;

  cursor:
    pointer;
}

.activity-view-button:hover {
  background:
    #576b40;
}


/* ==================================================
   DETAILS
================================================== */

.detail-card {
  margin:
    15px 8px;

  padding:
    19px;

  background:
    var(--paper);

  border:
    1px solid #cdbb9c;

  border-radius:
    14px;

  box-shadow:
    0 4px 9px
    rgba(0,0,0,0.06);
}

.detail-row {
  padding:
    11px 0;

  border-bottom:
    1px solid #ddd1be;

  font-size:
    14px;

  line-height:
    1.5;
}

.detail-row:last-child {
  border-bottom:
    none;
}

.detail-row strong {
  color:
    var(--forest-dark);
}


/* ==================================================
   CONFIRMATION
================================================== */

.confirmation {
  text-align:
    center;

  padding:
    35px 12px;
}

.confirmation h1 {
  color:
    var(--forest-dark);
}

.confirmation p {
  color:
    var(--muted);

  line-height:
    1.6;
}

.check-circle {
  width:
    84px;

  height:
    84px;

  border-radius:
    50%;

  background:
    var(--forest);

  color:
    var(--white);

  display:
    flex;

  justify-content:
    center;

  align-items:
    center;

  margin:
    10px auto 20px;

  font-size:
    40px;

  font-weight:
    bold;

  border:
    3px solid var(--leaf);
}


/* ==================================================
   BOTTOM NAVIGATION
================================================== */

.bottom-nav {
  position:
    absolute;

  left:
    12px;

  right:
    12px;

  bottom:
    12px;

  background:
    rgba(49, 95, 60, 0.97);

  border-radius:
    18px;

  padding:
    8px;

  display:
    grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap:
    5px;

  box-shadow:
    0 5px 14px
    rgba(0, 0, 0, 0.18);

  z-index:
    20;
}

.bottom-nav button {
  border:
    none;

  background:
    transparent;

  color:
    var(--white);

  padding:
    8px 3px;

  font-size:
    11px;

  cursor:
    pointer;

  border-radius:
    11px;
}

.bottom-nav button:hover {
  background:
    rgba(255,255,255,0.10);
}

.bottom-nav button.active {
  background:
    rgba(255,255,255,0.18);
}


/* ==================================================
   ACCESSIBILITY
================================================== */

button:focus-visible {
  outline:
    3px solid #d9a441;

  outline-offset:
    2px;
}


/* ==================================================
   MOBILE
================================================== */

@media (max-width: 700px) {

  .app-wrapper {
    padding:
      0;
  }

  .app {
    width:
      100%;

    max-width:
      440px;

    min-height:
      100vh;

    border-width:
      8px;

    border-radius:
      32px;
  }

  .page {
    padding-left:
      12px;

    padding-right:
      12px;
  }

  .page-heading h1 {
    font-size:
      30px;
  }

  .topic-circle {
    width:
      68px;

    height:
      68px;
  }

}


/* ==================================================
   SMALL PHONES
================================================== */

@media (max-width: 360px) {

  .small-brand {
    font-size:
      15px;
  }

  .tagline {
    font-size:
      13px;
  }

  .page-heading h1 {
    font-size:
      27px;
  }

  .hero-card {
    height:
      170px;
  }

  .topic-circle {
    width:
      62px;

    height:
      62px;
  }

  .bottom-nav button {
    font-size:
      10px;
  }

  .activity-filters {
    gap:
      4px;
  }

  .filter-button {
    font-size:
      10px;
  }

}