/* Norse Paw (redesign demo): one stylesheet for the whole site.
   Colours, fonts and spacing are set once in :root and used everywhere else.
   Brand green #59a52c comes from the logo. It is only used for decoration,
   because white text on it is too faint; buttons and links use the darker green. */

/* ---------- Fonts (self-hosted, SIL Open Font License 1.1) ---------- */

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/poppins-400.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/poppins-600.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/roboto-variable.woff2") format("woff2");
}

:root {
  --brand: #59a52c;        /* logo green: borders, icons, decoration only */
  --green: #2f6b1a;        /* buttons, links, small headings (6.5:1 on white) */
  --green-deep: #22501a;   /* hover */
  --tint: #f2f7ee;         /* soft green bands */
  --tint-2: #e6f0df;
  --ink: #1d2420;          /* body text */
  --muted: #4d5650;        /* secondary text (7:1 on tint) */
  --line: #dbe4d5;
  --white: #ffffff;
  --tbc-bg: #fff4c2;       /* placeholders the owner must fill in */
  --tbc-ink: #5c4400;

  --font-head: "Poppins", "Segoe UI", Helvetica, Arial, sans-serif;
  --font-body: "Roboto", "Segoe UI", Helvetica, Arial, sans-serif;

  --wrap: 1120px;
  --gutter: 20px;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(29, 36, 32, 0.06), 0 6px 20px rgba(29, 36, 32, 0.06);
}

/* ---------- Base ---------- */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
}

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

a { color: var(--green); text-underline-offset: 0.18em; }
a:hover { color: var(--green-deep); }

:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 3px;
  border-radius: 4px;
}

h1, h2, h3 {
  font-family: var(--font-head);
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 0.5em;
  color: var(--ink);
}
h1 { font-size: clamp(2rem, 6vw, 3.1rem); letter-spacing: -0.01em; }
h2 { font-size: clamp(1.55rem, 4vw, 2.1rem); }
h3 { font-size: 1.2rem; }

p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.2em; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: 720px; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: 12px; top: -60px;
  background: var(--green); color: var(--white);
  padding: 10px 16px; border-radius: 8px;
  z-index: 100; text-decoration: none;
}
.skip-link:focus { top: 12px; color: var(--white); }

.eyebrow {
  font-family: var(--font-head);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 0.6em;
}

.lead { font-size: 1.2rem; color: var(--ink); }
.muted { color: var(--muted); }

/* Placeholders for facts the owner has not given yet. Search the source for "TBC".
   Quiet by default. Add ?tbc to the address (review mode) to highlight them all in yellow
   and to show the ones that are otherwise left out of the page. */
.tbc-only { display: none; }
.show-tbc .tbc-only { display: block; margin: 0 0 8px; }
.show-tbc .tbc {
  background: var(--tbc-bg);
  color: var(--tbc-ink);
  border: 1px dashed #c9a400;
  border-radius: 6px;
  padding: 0 0.35em;
  font-weight: 500;
}

/* ---------- Buttons ---------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 48px;
  padding: 0.7em 1.4em;
  border-radius: 999px;
  border: 2px solid var(--green);
  background: var(--green);
  color: var(--white);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color 0.15s, border-color 0.15s;
}
.button:hover { background: var(--green-deep); border-color: var(--green-deep); color: var(--white); }
.button--ghost { background: transparent; color: var(--green); }
.button--ghost:hover { background: var(--tint-2); color: var(--green-deep); }
.buttons { display: flex; flex-wrap: wrap; gap: 12px; margin: 1.5em 0 0; }

/* ---------- Header ---------- */

.site-header {
  background: var(--white);
  border-bottom: 1px solid var(--line);
  position: relative;
  z-index: 10;
}
.site-header .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
  min-height: 72px;
}
.logo { display: inline-block; padding: 10px 0; }
.logo img { width: 168px; height: auto; }

.menu-toggle {
  display: none;
  min-height: 44px;
  padding: 0 16px;
  border: 2px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  color: var(--ink);
  font: 600 0.95rem var(--font-head);
  cursor: pointer;
}
.js .menu-toggle { display: inline-flex; align-items: center; }

.site-nav { width: 100%; }
.js .site-nav { display: none; }
.js .site-nav.open { display: block; }

.menu { list-style: none; margin: 0; padding: 0 0 12px; }
.menu a {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0 4px;
  color: var(--ink);
  font-family: var(--font-head);
  font-weight: 500;
  text-decoration: none;
  border-top: 1px solid var(--line);
}
.menu a:hover { color: var(--green); }
.menu a[aria-current="page"] { color: var(--green); }
.menu .login a { color: var(--muted); }

@media (min-width: 1040px) {
  .js .menu-toggle { display: none; }
  .site-nav, .js .site-nav { display: block; width: auto; }
  .menu { display: flex; align-items: center; gap: 4px; padding: 0; }
  .menu a { border-top: 0; padding: 0 12px; border-radius: 8px; font-size: 0.98rem; }
  .menu a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--brand); border-radius: 0; }
  .menu .login a {
    margin-left: 8px;
    min-height: 44px;
    border: 2px solid var(--line);
    border-radius: 999px;
    padding: 0 16px;
  }
  .menu .login a:hover { border-color: var(--green); }
}

/* ---------- Sections ---------- */

.section { padding: 56px 0; }
.section--tint { background: var(--tint); }
.section-head { max-width: 680px; margin-bottom: 28px; }
.section-head p { color: var(--muted); }

@media (min-width: 880px) {
  .section { padding: 88px 0; }
}

/* ---------- Hero ---------- */

.hero { background: var(--tint); padding: 36px 0 48px; overflow: hidden; }
.hero .wrap { display: grid; gap: 32px; align-items: center; }
.hero-photo { position: relative; max-width: 460px; }
.hero-photo img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 30%;
  border-radius: 24px;
  box-shadow: var(--shadow);
}
.hero-photo figcaption {
  position: absolute;
  left: 14px; bottom: 14px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--ink);
  font-size: 0.9rem;
  padding: 4px 12px;
  border-radius: 999px;
}
.hero-text p { max-width: 36em; }
.hero-text .lead { font-size: 1.25rem; }

@media (min-width: 880px) {
  .hero { padding: 72px 0; }
  .hero .wrap { grid-template-columns: 1.15fr 0.85fr; gap: 64px; }
  .hero-photo { order: 2; justify-self: end; }
}

/* ---------- Cards (offers) ---------- */

.cards { display: grid; gap: 16px; }
@media (min-width: 640px) { .cards { grid-template-columns: repeat(2, 1fr); gap: 20px; } }
@media (min-width: 960px) { .cards--3 { grid-template-columns: repeat(3, 1fr); } }

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 4px solid var(--brand);
  border-radius: var(--radius);
  padding: 22px 22px 20px;
  box-shadow: var(--shadow);
  transition: transform 0.15s, box-shadow 0.15s;
}
.card--quiet { border-top-color: var(--line); }
.card:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(29,36,32,.08), 0 12px 28px rgba(29,36,32,.10); }
@media (prefers-reduced-motion: reduce) { .card, .card:hover { transition: none; transform: none; } }
.card h3 { margin-bottom: 0.35em; }
.card h3 a { color: var(--ink); text-decoration: none; }
/* The whole card is clickable through the heading link. */
.card h3 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.card h3 a:focus-visible { outline: none; }
.card:focus-within { outline: 3px solid var(--green); outline-offset: 3px; }
.card p { color: var(--muted); margin-bottom: 0.9em; }
.card .more { margin-top: auto; font-family: var(--font-head); font-weight: 600; color: var(--green); }

.tags { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0 0 1em; }
.tags li {
  font-size: 0.86rem;
  background: var(--tint);
  color: var(--ink);
  border-radius: 999px;
  padding: 2px 10px;
}

.group-label {
  font-family: var(--font-head);
  font-size: 1.05rem;
  font-weight: 600;
  margin: 32px 0 12px;
  color: var(--muted);
}
.group-label:first-of-type { margin-top: 0; }

.help-note {
  margin-top: 28px;
  padding: 18px 20px;
  border-radius: var(--radius);
  background: var(--white);
  border: 1px solid var(--line);
}
.help-note p { margin: 0; }

/* ---------- How I work ---------- */

.points { display: grid; gap: 20px; list-style: none; padding: 0; margin: 28px 0 0; }
@media (min-width: 640px) { .points { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .points { grid-template-columns: repeat(4, 1fr); } }
.points li { padding-left: 18px; border-left: 3px solid var(--brand); }
.points h3 { font-size: 1.08rem; margin-bottom: 0.3em; }
.points p { color: var(--muted); margin: 0; font-size: 0.98rem; }

.two-col { display: grid; gap: 8px 48px; }
@media (min-width: 880px) { .two-col { grid-template-columns: 1fr 1fr; } }

/* ---------- About ---------- */

.about { display: grid; gap: 32px; align-items: start; }
.about-photo img { border-radius: 24px; width: 100%; max-width: 420px; aspect-ratio: 1; object-fit: cover; box-shadow: var(--shadow); }
@media (min-width: 880px) { .about { grid-template-columns: 0.8fr 1.2fr; gap: 64px; } }
.creds { list-style: none; padding: 0; margin: 0; }
.creds li { padding: 10px 0 10px 28px; border-bottom: 1px solid var(--line); position: relative; }
.creds li::before {
  content: ""; position: absolute; left: 4px; top: 1.05em;
  width: 10px; height: 10px; border-radius: 50%; background: var(--brand);
}

/* ---------- Testimonials ---------- */

.quotes { display: grid; gap: 20px; }
@media (min-width: 880px) { .quotes { grid-template-columns: 1fr 1fr; } }
.quote {
  margin: 0;
  background: var(--white);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
}
.quote blockquote { margin: 0 0 16px; font-size: 1rem; }
.quote blockquote p:last-child { margin: 0; }
.quote figcaption { display: flex; align-items: center; gap: 12px; margin-top: auto; font-weight: 600; }
.quote figcaption img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }

/* ---------- Course pages ---------- */

.crumbs { font-size: 0.92rem; margin: 0 0 12px; color: var(--muted); }
.crumbs a { color: var(--muted); }

.course-hero { background: var(--tint); padding: 32px 0 40px; }
.course-hero .wrap { display: grid; gap: 28px; align-items: center; }
.course-hero img { border-radius: 20px; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; box-shadow: var(--shadow); }
@media (min-width: 880px) {
  .course-hero { padding: 56px 0; }
  .course-hero .wrap { grid-template-columns: 1.1fr 0.9fr; gap: 56px; }
}

.course-layout { display: grid; gap: 40px; }
@media (min-width: 960px) {
  .course-layout { grid-template-columns: minmax(0, 1fr) 360px; gap: 56px; align-items: start; }
  .course-layout aside { position: sticky; top: 24px; }
}

.facts {
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 4px solid var(--brand);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow);
}
.facts h2 { font-size: 1.25rem; }
.facts dl { margin: 0 0 18px; display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; font-weight: 600; }
.facts .button { width: 100%; }
.facts .phone-line { margin: 12px 0 0; font-size: 0.98rem; text-align: center; }
.facts .small { font-size: 0.92rem; color: var(--muted); margin: 14px 0 0; }

.pay {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-top: 16px;
  padding: 16px;
  border-radius: 12px;
  background: var(--tint);
  font-size: 0.97rem;
}
.pay h3 { font-size: 1rem; margin: 0 0 0.25em; }
.pay p { margin: 0 0 0.3em; }
.pay p:last-child { margin: 0; }
.pay-badge {
  flex: none;
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: 10px;
  background: var(--green);
}
.pay-badge svg { width: 24px; height: 24px; fill: #fff; }

.weeks { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; counter-reset: week; }
@media (min-width: 640px) { .weeks { grid-template-columns: 1fr 1fr; } }
.week {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
  background: var(--white);
}
.week h3 { display: flex; align-items: baseline; gap: 10px; font-size: 1.08rem; }
.week h3 .num {
  flex: none;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--white);
  background: var(--green);
  border-radius: 999px;
  padding: 2px 10px;
}
.week ul { margin: 0; padding-left: 1.1em; color: var(--muted); font-size: 0.98rem; }
.week li { margin: 2px 0; }
.week li::marker { color: var(--brand); }

.lang-switch { font-size: 0.95rem; margin-top: 8px; }

/* ---------- Course chooser ---------- */

.chooser { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.chooser li {
  display: grid;
  gap: 4px;
  padding: 14px 18px;
  border-radius: 12px;
  background: var(--white);
  border: 1px solid var(--line);
}
@media (min-width: 640px) { .chooser li { grid-template-columns: 1fr auto; align-items: center; gap: 16px; } }
.chooser a { font-family: var(--font-head); font-weight: 600; }

/* ---------- Consultations ---------- */

.offer { padding: 32px 0; border-top: 1px solid var(--line); display: grid; gap: 12px 48px; }
.offer:first-of-type { border-top: 0; padding-top: 0; }
@media (min-width: 880px) { .offer { grid-template-columns: 1.2fr 0.8fr; } }
.ticks { list-style: none; padding: 0; margin: 0 0 1em; }
.ticks li { position: relative; padding-left: 28px; margin: 6px 0; }
.ticks li::before {
  content: "";
  position: absolute; left: 2px; top: 0.45em;
  width: 14px; height: 8px;
  border-left: 3px solid var(--brand);
  border-bottom: 3px solid var(--brand);
  transform: rotate(-45deg);
}

/* ---------- Contact ---------- */

.contact-grid { display: grid; gap: 16px; margin: 24px 0; }
@media (min-width: 640px) { .contact-grid { grid-template-columns: 1fr 1fr; } }
.contact-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  background: var(--white);
  box-shadow: var(--shadow);
}
.contact-card h2 { font-size: 1.15rem; }
.contact-card p { margin-bottom: 0.8em; }

.cta-band { background: var(--green); color: var(--white); padding: 48px 0; }
.cta-band h2, .cta-band p { color: var(--white); }
.cta-band .button { background: var(--white); color: var(--green); border-color: var(--white); }
.cta-band .button:hover { background: var(--tint); color: var(--green-deep); }
.cta-band .button--ghost { background: transparent; color: var(--white); }
.cta-band .button--ghost:hover { background: var(--green-deep); color: var(--white); }
.cta-band .tbc { color: var(--tbc-ink); }
.cta-band a:not(.button) { color: var(--white); }
.cta-band :focus-visible { outline-color: var(--white); }

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

.site-footer { background: var(--tint); padding: 48px 0 32px; font-size: 0.98rem; }
.footer-grid { display: grid; gap: 28px; }
@media (min-width: 880px) { .footer-grid { grid-template-columns: 1.3fr 1fr 1fr; gap: 48px; } }
.site-footer h2 { font-size: 1rem; margin-bottom: 0.6em; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li a { display: inline-flex; align-items: center; min-height: 44px; }
.site-footer .tagline { color: var(--muted); font-style: italic; margin-top: 12px; }
.social { display: flex; gap: 8px; margin-top: 8px; }
.social a {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--white);
  color: var(--ink);
  border: 1px solid var(--line);
}
.social a:hover { color: var(--green); border-color: var(--green); }
.social svg { width: 22px; height: 22px; fill: currentColor; }
.footer-bottom { margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.9rem; }

/* Tags on a tinted background need a white fill to stand out. */
.course-hero .tags li, .hero .tags li { background: var(--white); border: 1px solid var(--line); }
.course-hero .buttons { margin-top: 0.5em; }
#pamelding { scroll-margin-top: 16px; }
.social { list-style: none; padding: 0; margin-left: 0; }
.site-footer .logo img { background: var(--white); border-radius: 10px; padding: 6px 10px; box-sizing: content-box; width: 150px; }
.pay-title { font-size: 1rem; margin: 0 0 0.25em; }
.facts-note { margin: 0 0 14px !important; }

/* Native language picker with a decorative current-language flag. */
.language-choice { flex-shrink: 0; padding: 12px 0; border-top: 1px solid var(--line); }
.language-control { position: relative; display: inline-block; }
.language-control[hidden] { display: none; }
.language-control img {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 16px;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(29, 36, 32, 0.12);
  pointer-events: none;
}
.language-control::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 18px;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid var(--green);
  border-bottom: 1.5px solid var(--green);
  transform: rotate(45deg);
  pointer-events: none;
}
.language-choice select {
  appearance: none;
  min-height: 44px;
  font: 600 0.875rem var(--font-head);
  color: var(--ink);
  background: var(--tint);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 10px 36px 10px 48px;
  cursor: pointer;
}
.language-choice select:hover { background: var(--tint-2); border-color: var(--green); }
.language-choice select:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
@media (min-width: 1040px) {
  .language-choice { padding: 0; border: 0; margin-left: 8px; }
}