/* ============================================================
   Rootling site — shared styles for every page on getrootling.com
   (colours, fonts, base elements, header, footer).
   Page-specific styles live in landing.css (home page) and
   page.css (privacy, support, about).

   Styles are written for tablet/desktop first; phone overrides sit
   right below each block, inside @media (max-width: 639px).
   The header nav links appear at 820px and up.
   ============================================================ */

/* ---------- Tokens (from the Tiny Tales design system) ---------- */
:root {
  --color-sky-50: #eff8fc;
  --color-sky-100: #d7eef6;
  --color-sky-500: #6fbedd;
  --color-sky-700: #4c9bc0;
  --color-sun-100: #fff0c7;
  --color-coral-100: #ffddc9;
  --color-mint-100: #d3f2e2;
  --color-mint-500: #6fcca0;

  --color-warmwhite: #fffdf9;
  --color-cream: #fff6e9;
  --color-sand-100: #f1e9dd;
  --color-sand-300: #e3d8c7;
  --color-ink-soft: #8a7c6d;
  --color-ink: #4a3f35;

  /* Darker text/icon shades used on the pastel tints above */
  --ink-mint: #2f7f5b;
  --ink-sky: #2e6f8c;
  --ink-sun: #8a5a00;
  --ink-sun-bright: #b07d00;
  --ink-coral: #b4502a;
  --ink-lav: #8c6bc8;

  --font-display: "Baloo 2", ui-rounded, sans-serif; /* headlines */
  --font-body: "Nunito", ui-rounded, sans-serif; /* body copy */
  --font-accent: "Fredoka", "Baloo 2", sans-serif; /* buttons, labels */

  --radius-lg: 32px;
  --radius-full: 999px;

  --shadow-sm: 0 2px 6px rgba(150, 110, 70, 0.1);
  --shadow-md: 0 8px 20px rgba(150, 110, 70, 0.14);
  --shadow-lg: 0 16px 40px rgba(150, 110, 70, 0.18);

  --page-max: 1200px;
  --gutter: clamp(20px, 4vw, 28px);
  --section-y: clamp(72px, 11vw, 120px);
}

/* ---------- Base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--color-cream);
  color: var(--color-ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

main {
  overflow-x: clip; /* the hero's sun circle bleeds past the edge on narrow screens */
}

h1,
h2,
h3,
p {
  margin: 0;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 700;
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

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

a {
  color: var(--color-ink);
  text-decoration-color: var(--color-mint-500);
  text-underline-offset: 4px;
}

a:hover {
  color: var(--ink-mint);
}

:focus-visible {
  outline: 3px solid var(--color-sky-700);
  outline-offset: 3px;
}

section[id] {
  scroll-margin-top: 16px;
}

.icon {
  width: 1em;
  height: 1em;
  flex: none;
  fill: currentColor;
}

.container {
  width: 100%;
  max-width: calc(var(--page-max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 20;
  padding: 10px 16px;
  border-radius: var(--radius-full);
  background: var(--color-ink);
  color: var(--color-warmwhite);
}

.skip-link:focus {
  top: 16px;
}

/* Section headings share one scale */
.section-title {
  font-size: clamp(36px, 4.4vw, 58px);
  line-height: 1.05;
}

@media (max-width: 639px) {
  .section-title {
    font-size: 34px;
  }
  section[id] {
    scroll-margin-top: 80px; /* clear the sticky header */
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* ---------- Chips and colour tints (shared) ---------- */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.chip {
  padding: 8px 16px;
  border-radius: var(--radius-full);
  font-family: var(--font-accent);
  font-weight: 500;
  font-size: 15px;
}

.chip--mint {
  background: var(--color-mint-100);
  color: var(--ink-mint);
}

.chip--sky {
  background: var(--color-sky-100);
  color: var(--ink-sky);
}

.chip--sun {
  background: var(--color-sun-100);
  color: var(--ink-sun);
}

/* Tint + icon colour pairs, for icon tiles and panels */
.tint-sky {
  background: var(--color-sky-100);
  color: var(--ink-sky);
}
.tint-coral {
  background: var(--color-coral-100);
  color: var(--ink-coral);
}
.tint-mint {
  background: var(--color-mint-100);
  color: var(--ink-mint);
}
.tint-sun {
  background: var(--color-sun-100);
  color: var(--ink-sun);
}

/* ---------- Header ---------- */
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 22px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.brand img {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
}

.brand span {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 30px;
  line-height: 1;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 28px;
  font-family: var(--font-accent);
  font-weight: 500;
  font-size: 17px;
}

.site-nav__link {
  text-decoration: none;
}

.get-app-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 18px;
  border-radius: var(--radius-full);
  background: var(--color-sky-500);
  color: var(--color-warmwhite);
  font-family: var(--font-accent);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
}

.get-app-btn:hover {
  background: var(--color-sky-700);
  color: var(--color-warmwhite);
}

.get-app-btn .icon {
  font-size: 18px;
}

@media (max-width: 819px) {
  .site-nav__link {
    display: none;
  }
}

@media (max-width: 639px) {
  .site-header {
    position: sticky;
    top: 0;
    z-index: 5;
    background: rgba(255, 246, 233, 0.96);
    border-bottom: 1px solid var(--color-sand-100);
  }
  .site-header__inner {
    padding: 14px 18px;
  }
  .brand {
    gap: 10px;
  }
  .brand img {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    box-shadow: none;
  }
  .brand span {
    font-size: 24px;
  }
  .get-app-btn {
    gap: 6px;
    padding: 10px 16px;
    box-shadow: none;
  }
}

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--color-sand-300);
}

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding-top: 36px;
  padding-bottom: 48px;
  font-size: 15px;
}

.site-footer__brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.site-footer__brand img {
  width: 36px;
  height: 36px;
  border-radius: 10px;
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.site-footer__links [aria-current="page"] {
  font-weight: 700;
}

@media (max-width: 639px) {
  .site-footer__inner {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 14px;
    padding: 24px 20px 40px;
    font-size: 14px;
  }
  .site-footer__links {
    gap: 14px 18px;
  }
  .site-footer__brand {
    color: var(--color-ink-soft);
  }
  .site-footer__brand img {
    display: none;
  }
}