/*
  This stylesheet defines a clean, modern design for the Juha’s Bad Day
  website. It aims to capture the playful spirit of Arabian folk tales
  with warm colours, generous spacing and soft shadows. Cards lift
  slightly on hover to suggest interactivity, buttons have subtle
  motion cues, and typography is scaled responsively for readability
  across devices.

  Colour variables at the top allow for easy experimentation with the
  palette while maintaining consistency throughout the site. The layout
  uses CSS grid and flexbox to adapt gracefully from large screens to
  small. This file replaces the earlier compact stylesheet and should
  be referenced by all pages via <link rel="stylesheet" href="styles.css">.
*/

:root {
  /*
    Adjusted palette for a warmer, storybook feel. The tones are
    slightly softer and more aged to evoke parchment and desert
    sunsets while retaining good contrast. Consider contrast ratios
    when altering these values further.
  */
  --sand: #e9d8b0;
  --cream: #fdf7e3;
  --turquoise: #127a7f;
  --indigo: #2b325c;
  --red: #c75441;
  --copper: #b07b45;
  --ink: #2c2a30;
  --muted: #6e6a75;
  --card: #fff8f0;
  --max: 1120px;
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: linear-gradient(180deg, var(--cream) 0%, var(--sand) 100%);
  color: var(--ink);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--indigo);
  text-underline-offset: 2px;
}

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px max(20px, calc((100vw - var(--max)) / 2));
  background: rgba(255, 247, 235, 0.96);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(45, 53, 103, 0.1);
  box-shadow: 0 2px 10px rgba(45, 53, 103, 0.06);
}

.brand {
  font-weight: 900;
  text-decoration: none;
  color: var(--indigo);
}

nav {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

nav a {
  text-decoration: none;
  font-weight: 700;
  transition: color 0.2s ease;
}

nav a:hover {
  color: var(--turquoise);
}

main section {
  max-width: var(--max);
  margin: auto;
  padding: 80px 20px;
}

.hero {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 60px;
  align-items: center;
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 800;
  color: var(--red);
  font-size: 0.8rem;
}

.hero h1 {
  font-size: clamp(2.5rem, 6vw, 5rem);
  line-height: 1.05;
  margin: 0.3em 0;
  color: var(--indigo);
  font-family: Georgia, "Times New Roman", serif;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.lead {
  font-size: 1.35rem;
  max-width: 52ch;
}

.button {
  display: inline-block;
  background: var(--indigo);
  color: white;
  padding: 14px 24px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 800;
  margin-right: 16px;
  transition: all 0.3s ease;
}

.button.alt {
  background: var(--turquoise);
}

.button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.12);
}

section h2 {
  font-size: clamp(1.8rem, 5vw, 3rem);
  margin-top: 0.2em;
  margin-bottom: 0.6em;
  color: var(--indigo);
  font-family: Georgia, "Times New Roman", serif;
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

/* Use a serif display font for h3 headings to reinforce the storybook aesthetic */
h3 {
  font-family: Georgia, "Times New Roman", serif;
  color: var(--indigo);
}

.card {
  background: var(--card);
  border-radius: 24px;
  border: 1px solid rgba(45, 53, 103, 0.1);
  padding: 32px;
  box-shadow: 0 14px 30px rgba(45, 53, 103, 0.06);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(45, 53, 103, 0.08);
}

.notice {
  border-left: 6px solid var(--red);
  background: #fff3dd;
  padding: 24px;
  border-radius: 12px;
  max-width: 820px;
}

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.gallery figcaption {
  font-size: 0.9rem;
  color: var(--muted);
  margin-top: 8px;
}

/* Basic typography container for prose pages such as About, Privacy and Support */
.prose {
  max-width: var(--max);
  margin: auto;
  padding: 80px 20px;
  line-height: 1.8;
  font-size: 1.125rem;
}

.prose h1,
.prose h2,
.prose h3 {
  font-family: Georgia, "Times New Roman", serif;
  color: var(--indigo);
  margin-top: 1.6em;
  margin-bottom: 0.4em;
}

.prose h1 {
  font-size: 2.5rem;
}

.prose h2 {
  font-size: 1.8rem;
}

.prose h3 {
  font-size: 1.4rem;
}

.prose p {
  margin-bottom: 1.2em;
}

footer {
  padding: 48px 20px;
  text-align: center;
  background: var(--indigo);
  color: white;
  margin-top: 80px;
}

footer a {
  color: white;
}

.small {
  font-size: 0.9rem;
  color: var(--muted);
}

.asset-badge {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: var(--red);
  color: white;
  padding: 3px 7px;
  border-radius: 999px;
}

@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr;
    gap: 40px;
    text-align: center;
  }
  nav {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .grid,
  .gallery {
    grid-template-columns: 1fr;
  }
}