/* ---------------------------------------------
   Iredance – simple starting page
   Palette: deep teal -> warm gold, vertical gradient
--------------------------------------------- */

/* The Seasons - licensed font files, loaded locally from assets/fonts */
@font-face {
  font-family: 'The Seasons';
  src: url("../assets/fonts/TheSeasons-Light.ttf") format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'The Seasons';
  src: url("../assets/fonts/TheSeasons-LightItalic.ttf") format('truetype');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'The Seasons';
  src: url("../assets/fonts/TheSeasons-Regular.ttf") format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'The Seasons';
  src: url("../assets/fonts/TheSeasons-Italic.ttf") format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'The Seasons';
  src: url("../assets/fonts/TheSeasons-Bold.ttf") format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'The Seasons';
  src: url("../assets/fonts/TheSeasons-BoldItalic.ttf") format('truetype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

:root {
  --teal: #002d35;
  --gold: #be8c55;
  --drapp: #c38b53;
  --green-accent: #239470;

  --card-text: #f5ece0;      /* warm cream text on the dark card */
  --card-text-soft: rgba(245, 236, 224, 0.82);

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

  --shadow-card: 0 30px 70px -20px rgba(0, 15, 18, 0.6);
  --shadow-icon: 0 10px 20px -8px rgba(0, 15, 18, 0.45);
}

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: 'The Seasons', Georgia, 'Times New Roman', serif;
  color: var(--card-text);

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 5vw, 60px) 16px;

  /* vertical gradient: dark teal -> warm gold -> dark teal */
  background: linear-gradient(180deg, var(--teal) 0%, var(--gold) 50%, var(--teal) 100%);
  background-attachment: fixed;

  position: relative;
  overflow-x: hidden;
}

/* ---------------- Card ---------------- */

.card {
  position: relative;
  z-index: 1;

  width: 100%;
  max-width: 728px; /* 520px +40% */

  background-color: var(--teal);
  overflow: hidden; /* keeps the pattern below clipped to the rounded corners */

  border: 1px solid rgba(245, 236, 224, 0.14);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);

  /* top/bottom padding +15% (vertical size), left/right padding +40% (horizontal size);
     top trimmed down again afterwards to pull the logo up a bit */
  padding: clamp(38px, 7vw, 58px) clamp(39px, 9.8vw, 67px) clamp(51px, 8vw, 60px);

  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* the "underprint" pattern lives here, as its own layer, so its opacity
   can be changed without fading the logo/text/icons sitting on top of it */
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;

  background-image: url("../assets/tree-underprint.png");
  background-size: 120%;
  background-position: 5% 5%;
  background-repeat: no-repeat;

  opacity: 0.1;
}

.logo-wordmark {
  width: clamp(200px, 60vw, 440px); /* 440px is the desktop target, +25%; shrinks further on narrow phones so it never overflows the card */
  height: auto;
  margin-bottom: -3px; /* pulled closer to the tagline below */
}

.tagline {
  margin: 0 0 42px;
  white-space: nowrap; /* keep it on one line */
  font-family: 'The Seasons', Georgia, 'Times New Roman', serif;
  font-size: clamp(1.2rem, 2.5vw, 1.5rem); /* 1.69rem is the desktop target, +25%; shrinks on narrow phones so the sentence still fits on one line */
  font-weight: 700;
  line-height: 1.5;

  /* gradient text, same green -> gold used on the logo */
  color: var(--card-text-soft); /* fallback for browsers without background-clip: text */
  background: linear-gradient(90deg, var(--green-accent), var(--drapp));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.subtext {
  margin: 0 0 6px;
  color: #ffffff;
  font-family: 'The Seasons', Georgia, 'Times New Roman', serif;
  font-size: clamp(1.2rem, 2.5vw, 1.5rem); /* matches .tagline */
  font-weight: 400;
}

.subtext + .cta-text {
  margin-top: 30px;
}

.cta-text {
  margin: 0 0 28px;
  color: rgba(255, 255, 255, 0.6); /* subtle, greyish-white -- reads as a quiet system note */
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; /* generic, not the decorative brand font */
  font-size: clamp(0.5rem, 2.3vw, 0.95rem); /* stays smaller than .tagline and .subtext at every screen width */
  font-weight: 400;
}

/* ---------------- Social icons ---------------- */

.socials {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(14px, 4vw, 20px);
}

.social-link {
  --size: 56px;

  width: var(--size);
  height: var(--size);
  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: var(--radius-pill);
  background: #ffffff;
  box-shadow: var(--shadow-icon);

  transition: transform 0.2s ease, background 0.25s ease, box-shadow 0.25s ease;
}

.social-link svg {
  width: 23px;
  height: 23px;
  fill: var(--teal);
  transition: fill 0.25s ease;
}

.social-link:hover,
.social-link:focus-visible {
  transform: translateY(-4px);
  background: var(--gold);
  outline: none;
}

.social-link:hover svg,
.social-link:focus-visible svg {
  fill: #ffffff;
}

/* ---------------- Footer ---------------- */

.site-footer {
  position: relative;
  z-index: 1;
  margin-top: clamp(20px, 4vw, 32px);
}

.site-footer p {
  margin: 0;
  font-size: 0.78rem;
  color: rgba(245, 236, 224, 0.75);
  letter-spacing: 0.03em;
}

/* ---------------- Small screens ---------------- */
/* Phones only (max-width: 600px) -- everything above this reverts to the
   normal single-row desktop/tablet layout automatically, since these rules
   simply don't apply once the viewport is wider than 600px. */

@media (max-width: 600px) {
  .card {
    /* a bit taller on phones, to give the 2x2 icon grid below room to breathe */
    padding-top: clamp(48px, 10vw, 64px);
    padding-bottom: clamp(64px, 14vw, 88px);
  }

  .socials {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    justify-items: center;
    row-gap: 22px;
    column-gap: 28px;
    width: fit-content;
    margin: 0 auto;
  }

  .social-link {
    --size: 80px; /* comfortably bigger than the ~44px minimum touch-target guideline */
  }

  .social-link svg {
    width: 27px;
    height: 27px;
  }
}

/* Only the smallest phones (iPhone SE and similar, ~320-340px wide) can't fit
   the tagline's current font size on one line without clipping it. Rather than
   shrinking that size further (it'd get hard to read), it's allowed to wrap
   to two lines here -- everything from ~360px up stays on one line. */
@media (max-width: 340px) {
  .tagline {
    white-space: normal;
  }
}