/* ==========================================================================
   Learn Folk Fiddle — shared stylesheet
   ==========================================================================
   Table of contents:
   1. Custom properties (design tokens)
   2. Reset & base
   3. Layout helpers
   4. Site header / nav
   5. Footer
   6. Hero (banner) sections
   7. Tab nav (Classes / One-off Events / 1:1 Lessons)
   8. Content panel
   9. Typography helpers (quotes, highlighted body text)
   10. Cards
   11. Feature list (home page bullets with read-more links)
   12. Pricing block
   13. Buttons
   14. Article pages (About Clare / About Old Time / Never Too Old)
   15. Responsive
   ========================================================================== */

/* 1. Custom properties -------------------------------------------------- */
:root {
  --color-bg: #03181A;
  --color-bg-shadow: #030E0F;
  --color-teal: #125359;
  --color-card-bg: #06272B;
  --color-lime: #94E733;
  --color-offwhite: #E0FBFB;
  --color-cyan: #7BE4E4;
  --color-white: #FFFFFF;

  --font-display: 'Instrument Serif', Georgia, serif;
  --font-body: 'Instrument Sans', 'Roboto', Arial, sans-serif;

  --max-width: 1400px;
  --content-width: 900px;
  --hero-height: 729px;
}

/* 2. Reset & base -------------------------------------------------------- */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-offwhite);
  font-family: var(--font-body);
  line-height: 1.5;
}

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

a { color: inherit; }

h1, h2, h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
}

p { margin: 0; }

ul, ol { margin: 0; padding: 0; list-style: none; }

/* 3. Layout helpers ------------------------------------------------------ */
.wrap {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
}

.stack {
  display: flex;
  flex-direction: column;
}

/* 4. Site header / nav ---------------------------------------------------- */
.site-header {
  background: var(--color-bg);
  box-shadow: 0 4px 0 var(--color-bg-shadow);
  padding: 10px 20px;
  display: flex;
  justify-content: center;
  position: sticky;
  top: 0;
  z-index: 10;
}

.site-header__inner {
  width: 100%;
  max-width: var(--max-width);
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}

.site-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.site-logo img {
  height: 32px;
  width: auto;
}

.site-title {
  color: var(--color-white);
  font-size: 24px;
  font-family: var(--font-display);
  white-space: nowrap;
}

.site-nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}

.site-nav a {
  color: var(--color-white);
  font-size: 18px;
  font-family: var(--font-body);
}

.site-nav a:hover { color: var(--color-lime); }
.site-nav a[aria-current="page"] { color: var(--color-lime); }

/* Hamburger button — hidden on desktop, shown only below the mobile breakpoint. */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  margin-left: auto;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--color-white);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* 5. Footer ---------------------------------------------------------------- */
.site-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  padding: 48px 20px;
  color: var(--color-offwhite);
}

.site-footer a {
  color: var(--color-lime);
  font-size: 18px;
}

.site-footer small {
  color: var(--color-cyan);
  font-size: 14px;
  opacity: 0.8;
}

/* 6. Hero (banner) sections ------------------------------------------------ */
/* Same padding + min-height on every page so the banner never changes size
   when navigating between pages. */
.hero {
  align-self: stretch;
  min-height: var(--hero-height);
  background: linear-gradient(rgba(18, 83, 89, 0.75), rgba(18, 83, 89, 0.75)), var(--color-teal) url('../assets/banner.png') center / cover no-repeat;
  padding: 94px 42px 146px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  text-align: center;
}

.hero__title {
  font-size: clamp(40px, 8vw, 100px);
  color: var(--color-white);
  line-height: 1.05;
}

.hero__title em {
  color: var(--color-lime);
  font-style: italic;
}

.hero__subtitle {
  font-family: var(--font-display);
  font-size: clamp(22px, 4vw, 40px);
  color: var(--color-white);
  max-width: 900px;
}

.hero__quote {
  font-family: var(--font-body);
  font-style: italic;
  font-size: clamp(18px, 2.5vw, 24px);
  color: var(--color-cyan);
  max-width: 700px;
  margin-top: 8px;
}

/* 7. Tab nav (Classes / One-off Events / 1:1 Lessons) ----------------------- */
/* Negative margin pulls the pill row up so it overlaps the bottom of the
   hero banner, like a folder tab sitting on top of the photo. */
.tab-nav {
  align-self: center;
  width: 100%;
  margin-top: -83px;
  max-width: 800px;
  padding: 0 21px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  position: relative;
  z-index: 2;
}

.tab-nav__item {
  flex: 1 1 0;
  padding: 25px 20px;
  border-radius: 5px;
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: 24px;
  font-weight: 500;
  text-decoration: none;
  text-align: center;
  text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  white-space: nowrap;
}

.tab-nav__item:hover {
  color: var(--color-lime);
}

.tab-nav__item.is-active {
  background: var(--color-bg);
  border-radius: 10px 10px 0 0;
  text-shadow: none;
}

/* 8. Content panel ---------------------------------------------------------- */
.panel {
  align-self: stretch;
  background: var(--color-bg);
  padding: 50px 41px;
  display: flex;
  justify-content: center;
}

.panel__inner {
  width: 100%;
  max-width: var(--content-width);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 33px;
}

/* 9. Typography helpers ------------------------------------------------------ */
/* One class for every quote on the site, so they all look the same wherever
   they appear. */
.quote {
  align-self: center;
  max-width: 640px;
  text-align: center;
  color: var(--color-cyan);
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 200;
  font-size: 24px;
}

/* .hl and .white are used to highlight a word or phrase inline, in any
   block of text on the site (body copy, cards, feature list, articles). */
.hl { color: var(--color-lime); }
.white { color: var(--color-white); }

/* A highlighted phrase that is also a link — the feature list on the home
   page uses this so the green text itself is the clickable target, with a
   small "open out" arrow right after it to signal that clearly. */
.hl-link {
  color: var(--color-lime);
  text-decoration: none;
}

.hl-link:hover { text-decoration: underline; }

.hl-link span {
  display: inline-block;
  font-size: 0.85em;
  vertical-align: middle;
}

.body-text {
  align-self: stretch;
  color: var(--color-offwhite);
  font-size: 24px;
}

.body-text.body-text--sm { font-size: 20px; }

/* Underlined text links: nav, footer, and inline "read more" links share the
   same underline treatment and differ only in color/size. */
.site-nav a,
.site-footer a,
.body-text-link {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.body-text-link {
  color: var(--color-cyan);
  font-size: 0.8em;
}

.body-text-link:hover { color: var(--color-lime); }

.lead {
  align-self: stretch;
  color: var(--color-offwhite);
  font-size: 24px;
  text-align: center;
}

/* 10. Cards ------------------------------------------------------------------ */
.card-grid {
  align-self: stretch;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.card {
  flex: 1 1 280px;
  background: var(--color-card-bg);
  border-radius: 20px;
  padding: 26px 31px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.card__title {
  color: var(--color-lime);
  font-size: 31px;
  text-transform: uppercase;
}

.card__text {
  color: var(--color-offwhite);
  font-size: 22px;
}

.card-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.card-list li {
  padding-left: 26px;
  position: relative;
  font-size: 19px;
  color: var(--color-offwhite);
}

.card-list li::before {
  content: '\2022';
  position: absolute;
  left: 6px;
  color: var(--color-lime);
}

.card-list li em {
  color: var(--color-cyan);
}

/* 11. Feature list (home page bullets with read-more links) ------------------ */
.feature-list {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.feature-list li {
  color: var(--color-offwhite);
  font-size: 22px;
  line-height: 1.5;
}

/* 12. Pricing block ------------------------------------------------------------ */
.pricing {
  align-self: stretch;
  color: var(--color-offwhite);
  font-size: 23px;
  line-height: 1.6;
  text-align: center;
}

.pricing .note {
  display: block;
  color: var(--color-offwhite);
  font-size: 18px;
  opacity: 0.9;
}

/* 13. Buttons -------------------------------------------------------------- */
.btn {
  align-self: stretch;
  padding: 25px 20px;
  border-radius: 30px;
  outline: 2px solid var(--color-teal);
  outline-offset: -2px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: 24px;
  font-weight: 500;
  text-decoration: none;
  background: transparent;
  transition: background-color 0.2s ease;
}

.btn:hover { background: var(--color-teal); }

/* 14. Article pages ---------------------------------------------------------- */
.article-body {
  width: 100%;
  max-width: var(--content-width);
  margin-inline: auto;
  padding: 60px 21px 100px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.article-section {
  display: flex;
  flex-direction: column;
  gap: 18px;
  scroll-margin-top: 35vh;
}

.article-section__title {
  color: var(--color-lime);
  font-size: clamp(26px, 4vw, 32px);
  text-transform: uppercase;
}

.article-section p {
  color: var(--color-offwhite);
  font-size: 19px;
  line-height: 1.7;
}

.numbered-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  counter-reset: item;
}

.numbered-list li {
  padding-left: 40px;
  position: relative;
  color: var(--color-offwhite);
  font-size: 19px;
  line-height: 1.6;
}

.numbered-list li::before {
  counter-increment: item;
  content: counter(item);
  position: absolute;
  left: 0;
  top: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--color-teal);
  color: var(--color-white);
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 15. Responsive ---------------------------------------------------------------- */
@media (max-width: 720px) {
  :root { --hero-height: 500px; }

  .site-header__inner { gap: 16px; }

  .nav-toggle { display: flex; }

  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    background: var(--color-bg);
    box-shadow: 0 4px 0 var(--color-bg-shadow);
    padding: 8px 20px 20px;
  }

  .site-nav.is-open { display: flex; }

  .site-nav a { width: 100%; padding: 10px 0; font-size: 17px; }

  .hero { padding: 60px 20px 90px; }

  .tab-nav { margin-top: -60px; gap: 6px; }

  .panel { padding: 40px 20px; }

  .tab-nav__item { padding: 14px 16px; font-size: 15px; }

  .card__text, .body-text, .lead, .quote, .feature-list li, .pricing, .btn { font-size: 18px; }

  .card__title { font-size: 24px; }
}