@layer reset, fonts, base, layout, components, decorative;

@import "/reset.css" layer(reset);
@import "/fonts.css" layer(fonts);

@layer base {
  :root {
    /* Color */
    --color-paper: #fdfaf5;
    --color-surface: #fffdf8;
    --color-ink: #1d1d1b;
    --color-green: #4b5912;
    --color-green-dark: #3f4a1f;
    --color-brown: #c78335;
    --color-coral: #ce6c6e;
    --color-rule: #b8c0a6;
    --color-rule-soft: #d8decb;
    --color-accent-soft: #f3ead8;
    --color-icon-soft: #eef0df;

    /* Page */
    --page-max: 64rem;
    --page-gutter: clamp(1rem, 4vw, 3rem);
    --hero-lockup-max: 32rem;
    --opening-badge-size: clamp(8.75rem, 18vw, 12.5rem);

    /* Fluid spacing */
    --space-fluid-2xs: clamp(0.625rem, 2vw, 1rem);
    --space-fluid-xs: clamp(0.5rem, 2vw, 1rem);
    --space-fluid-sm: clamp(0.75rem, 2vw, 1.5rem);
    --space-fluid-opening-offset: clamp(0.5rem, 2vw, 1.5rem);
    --space-fluid-md: clamp(1rem, 3vw, 1.5rem);
    --space-fluid-lg: clamp(1rem, 3vw, 2rem);
    --space-fluid-xl: clamp(1.5rem, 4vw, 3rem);
    --space-fluid-2xl: clamp(1.25rem, 4vw, 4rem);

    /* Fixed spacing */
    --space-3xs: 0.15rem;
    --space-2xs: 0.25rem;
    --space-xs: 0.5rem;
    --space-sm: 0.75rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;

    /* Structure */
    --icon-size: 3rem;
    --icon-size-sm: calc(var(--icon-size) - 0.5rem);
    --icon-gap: clamp(0.875rem, 2vw, 1.25rem);
    --notice-radius: 1.25rem;
    --rule: 1px;
    --rule-strong: calc(var(--rule) + 1px);
    --footer-separator-height: clamp(4rem, 7vw, 5rem);
    --corner-left-inline: clamp(10rem, 24vw, 16rem);
    --corner-right-inline: clamp(4.5rem, 8vw, 6rem);
    --corner-right-block: clamp(18rem, 36vw, 29rem);

    /* Logo */
    --logo-mark-inline: clamp(11rem, 32vw, 22rem);

    /* Typography */
    --font-body: "Nunito Sans", sans-serif;
    --font-size-opening: clamp(0.9rem, 1.6vw, 1.1rem);
    --font-size-opening-strong: 1.25em;
    --font-size-logo: clamp(3.5rem, 9vw, 5.5rem);
    --font-size-logo-sub: clamp(1.75rem, 4.5vw, 2.75rem);
    --font-size-tagline: clamp(1rem, 2.1vw, 1.45rem);
    --font-size-welcome: clamp(1.15rem, 2.6vw, 1.65rem);
    --font-size-notice-heading: clamp(1.15rem, 2.3vw, 1.5rem);
    --font-size-notice-body: clamp(1rem, 1.8vw, 1.2rem);
    --font-size-section-heading: clamp(1.1rem, 2vw, 1.35rem);
    --font-size-person: clamp(1rem, 1.8vw, 1.2rem);
    --font-size-value-heading: clamp(1rem, 1.75vw, 1.18rem);
    --font-size-cta-heading: clamp(1.15rem, 2.4vw, 1.55rem);
    --font-size-cta-body: clamp(1rem, 1.9vw, 1.25rem);
    --font-size-footer-heading: clamp(1rem, 1.8vw, 1.2rem);
    --font-size-small: 0.92rem;
    --font-size-heading-note: 0.72em;
    --font-size-detail: 0.85em;

    --font-weight-regular: 400;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --leading-compact: 1;
    --leading-heading: 1.1;
    --leading-tight: 1.2;
    --leading-snug: 1.25;
    --leading-copy-tight: 1.35;
    --leading-normal: 1.45;
    --leading-loose: 1.65;

    --tracking-logo: 0.16em;
    --tracking-tagline: 0.14em;
    --tracking-heading: 0.04em;
    --tracking-none: 0;
  }

  html {
    color-scheme: light;
  }

  body {
    position: relative;
    isolation: isolate;
    color: var(--color-ink);
    background: var(--color-paper);
    font-family: var(--font-body);
    line-height: var(--leading-normal);
  }

  address {
    font-style: normal;
  }

  a {
    color: var(--color-green-dark);
  }
}

@layer decorative {
  body::before,
  body::after {
    content: "";
    position: absolute;
    z-index: -1;
    pointer-events: none;
    background-repeat: no-repeat;
  }

  body::before {
    inset-block-start: 0;
    inset-inline-start: 0;
    inline-size: var(--corner-left-inline);
    aspect-ratio: 247 / 499;
    background-image: url("/static/images/corner.png");
    background-image: image-set(
      url("/static/images/corner.avif") type("image/avif"),
      url("/static/images/corner.png") type("image/png")
    );
    background-size: contain;
    background-position: left top;
  }

  body::after {
    inset-block-end: 0;
    inset-inline-end: 0;
    inline-size: var(--corner-right-inline);
    block-size: var(--corner-right-block);
    background-image: url("/static/images/corner2.png");
    background-image: image-set(
      url("/static/images/corner2.avif") type("image/avif"),
      url("/static/images/corner2.png") type("image/png")
    );
    background-size: auto 100%;
    background-position: right bottom;
  }

  body > header > p:first-of-type {
    background-image: url("/static/images/border_bg.png");
    background-image: image-set(
      url("/static/images/border_bg.avif") type("image/avif"),
      url("/static/images/border_bg.png") type("image/png")
    );
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }

  #site-title::before,
  main > section:has(> :is(#status-heading, #contact-prompt-heading)),
  main > section:has(> :is(#status-heading, #contact-prompt-heading))::before,
  main > section:has(#team-heading) > section::before,
  #values-heading::before,
  main > section:has(> #values-heading) > article::before,
  footer > section::before {
    background-color: var(--color-surface);
  }

  main > section:has(#team-heading) > section::before,
  #values-heading::before,
  main > section:has(> #values-heading) > article::before,
  footer > section::before {
    background-color: var(--color-icon-soft);
  }

  main > section:has(> #contact-prompt-heading)::before {
    background-color: transparent;
    border-color: var(--color-coral);
  }

  main > section:has(> #contact-prompt-heading)::after {
    border-color: var(--color-brown);
  }

  #site-title::before {
    background-image: url("/static/images/logo.png");
    background-image: image-set(
      url("/static/images/logo.avif") type("image/avif"),
      url("/static/images/logo.png") type("image/png")
    );
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }

  main > section:has(> :is(#status-heading, #contact-prompt-heading))::before,
  main > section:has(> :is(#status-heading, #contact-prompt-heading))::after,
  main > section:has(#team-heading) > section::before,
  #values-heading::before,
  main > section:has(> #values-heading) > article::before,
  footer > section::before {
    background-repeat: no-repeat;
    background-position: center;
    background-size: 74%;
  }

  main > section:has(> #status-heading)::before,
  main > section:has(> #values-heading) > article:nth-of-type(1)::before {
    background-image: url("/static/images/icon_sprout.svg");
  }

  main > section:has(> #status-heading)::after,
  main > section:has(> #contact-prompt-heading)::before {
    background-color: transparent;
    background-image: url("/static/images/icon_heart_balloon.svg");
    background-size: 86%;
    border: 0;
  }

  main > section:has(#team-heading) > section:has(> #team-heading)::before,
  footer > section:has(> #association-heading)::before {
    background-image: url("/static/images/icon_people.svg");
    background-size: 78%;
  }

  main > section:has(#team-heading) > section:has(> #costs-heading)::before {
    background-image: url("/static/images/icon_money.svg");
  }

  main > section:has(#team-heading) > section:has(> #opening-hours-heading)::before {
    background-image: url("/static/images/icon_clock.svg");
  }

  main > section:has(#team-heading) > section:has(> #location-heading)::before {
    background-image: url("/static/images/icon_location.svg");
  }

  #values-heading::before,
  main > section:has(> #values-heading) > article:nth-of-type(3)::before {
    background-image: url("/static/images/icon_heart.svg");
  }

  main > section:has(> #values-heading) > article:nth-of-type(2)::before {
    background-image: url("/static/images/icon_group.svg");
  }

  main > section:has(> #values-heading) > article:nth-of-type(4)::before {
    background-image: url("/static/images/icon_speech.svg");
  }

  main > section:has(> #values-heading) > article:nth-of-type(5)::before {
    background-image: url("/static/images/icon_leaf.svg");
  }

  main > section:has(> #contact-prompt-heading)::after {
    background-color: transparent;
    background-image: url("/static/images/icon_rays.svg");
    background-size: 100%;
    border: 0;
  }

  footer > section:has(> #kindergroup-heading)::before {
    background-image: url("/static/images/icon_home.svg");
  }

  footer > section:has(> #email-heading)::before {
    background-image: url("/static/images/icon_email.svg");
  }
}

@layer components {
  body > header > p:first-of-type {
    color: var(--color-green-dark);
    font-size: var(--font-size-opening);
    line-height: var(--leading-loose);
  }

  body > header > p:first-of-type strong {
    font-size: var(--font-size-opening-strong);
    line-height: var(--leading-tight);
  }

  #site-title {
    line-height: var(--leading-compact);
  }

  #site-title > span:first-child {
    color: var(--color-green);
    font-size: var(--font-size-logo);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--tracking-logo);
    text-transform: uppercase;
  }

  #site-title > span:last-child {
    color: var(--color-brown);
    font-size: var(--font-size-logo-sub);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--tracking-logo);
  }

  #site-title + p {
    color: var(--color-green);
    font-size: var(--font-size-tagline);
    font-weight: var(--font-weight-semibold);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-tagline);
  }

  #site-title + p + p {
    font-size: var(--font-size-welcome);
    line-height: var(--leading-copy-tight);
  }

  #status-heading {
    color: var(--color-green-dark);
    font-size: var(--font-size-notice-heading);
    line-height: var(--leading-snug);
  }

  main > section:has(> #status-heading) p {
    font-size: var(--font-size-notice-body);
    line-height: var(--leading-normal);
  }

  :is(#team-heading, #values-heading, #costs-heading, #opening-hours-heading, #location-heading) {
    color: var(--color-green-dark);
    font-size: var(--font-size-section-heading);
    font-weight: var(--font-weight-bold);
    line-height: var(--leading-heading);
    letter-spacing: var(--tracking-heading);
    text-transform: uppercase;
  }

  #costs-heading small {
    font-size: var(--font-size-heading-note);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--tracking-none);
    text-transform: none;
  }

  #team-heading + ul h3 {
    font-size: var(--font-size-person);
    line-height: var(--leading-snug);
  }

  #team-heading + ul p {
    line-height: var(--leading-copy-tight);
    margin-block: var(--space-3xs);
  }

  #team-heading + ul li + li {
    margin-block-start: var(--space-md);
  }

  #costs-heading + dl {
    line-height: var(--leading-snug);
  }

  #costs-heading + dl dt {
    font-weight: var(--font-weight-semibold);
  }

  #costs-heading + dl small {
    font-size: var(--font-size-detail);
    font-weight: var(--font-weight-regular);
  }

  section:has(> #costs-heading) > p {
    font-size: var(--font-size-small);
    line-height: var(--leading-copy-tight);
  }

  #opening-hours-heading + dl {
    line-height: var(--leading-copy-tight);
  }

  main > section:has(> #values-heading) > article > h3 {
    color: var(--color-green-dark);
    font-size: var(--font-size-value-heading);
    font-weight: var(--font-weight-bold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-heading);
    text-transform: uppercase;
  }

  main > section:has(> #values-heading) > article > ul {
    line-height: var(--leading-normal);
  }

  #contact-prompt-heading {
    color: var(--color-green-dark);
    font-size: var(--font-size-cta-heading);
    line-height: var(--leading-tight);
  }

  main > section:has(> #contact-prompt-heading) p {
    font-size: var(--font-size-cta-body);
    line-height: var(--leading-copy-tight);
  }

  footer h2 {
    color: var(--color-green-dark);
    font-size: var(--font-size-footer-heading);
    line-height: var(--leading-tight);
  }

  footer :is(p, address) {
    font-size: var(--font-size-small);
    line-height: var(--leading-copy-tight);
  }
}

@layer layout {
  body {
    padding-block: var(--page-gutter);
    padding-inline: var(--page-gutter);
  }

  body > :is(header, main, footer) {
    max-inline-size: var(--page-max);
    margin-inline: auto;
  }

  body > footer {
    margin-block-start: var(--space-fluid-xl);
  }

  body > header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, var(--hero-lockup-max)) minmax(0, 1fr);
    row-gap: var(--space-fluid-sm);
    align-items: start;
    margin-block-end: var(--space-fluid-xl);
    text-align: center;
  }

  body > header > p:first-of-type {
    grid-column: 3;
    grid-row: 1;
    display: grid;
    place-content: center;
    inline-size: var(--opening-badge-size);
    aspect-ratio: 1;
    justify-self: end;
    margin-block: 0;
    padding-inline: var(--space-md);
  }

  body > header > p:first-of-type strong {
    display: block;
    margin-block-start: var(--space-2xs);
  }

  #site-title {
    grid-column: 2;
    grid-row: 1;
    display: grid;
    justify-items: center;
    row-gap: var(--space-2xs);
    margin-block: 0;
  }

  #site-title::before {
    content: "";
    inline-size: var(--logo-mark-inline);
    aspect-ratio: 698 / 313;
    margin-block-end: calc(var(--space-xs) * -1);
  }

  #site-title > span {
    display: block;
  }

  body > header > p:not(:first-of-type) {
    grid-column: 1 / -1;
    justify-self: center;
    margin-block: 0;
  }

  #site-title + p {
    margin-block-start: var(--space-fluid-xs);
  }

  #site-title + p + p {
    margin-block-start: var(--space-fluid-lg);
  }

  main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: var(--space-fluid-xl);
  }

  main::before {
    content: "";
    grid-column: 2;
    grid-row: 2;
    border-inline-start: var(--rule) solid var(--color-rule);
  }

  main > section:has(> #status-heading) {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  main > section:has(#team-heading) {
    grid-column: 1;
    grid-row: 2;
  }

  main > section:has(> #values-heading) {
    grid-column: 3;
    grid-row: 2;
  }

  main > section:has(> #contact-prompt-heading) {
    grid-column: 1 / -1;
    grid-row: 3;
  }

  main > section:has(> :is(#status-heading, #contact-prompt-heading)) {
    display: grid;
    column-gap: var(--space-fluid-lg);
    row-gap: var(--space-2xs);
    align-items: center;
    padding: var(--space-fluid-md);
    border: var(--rule) solid var(--color-rule);
    border-radius: var(--notice-radius);
  }

  main > section:has(> :is(#status-heading, #contact-prompt-heading))::before,
  main > section:has(> :is(#status-heading, #contact-prompt-heading))::after {
    content: "";
    aspect-ratio: 1;
    border: var(--rule) solid var(--color-rule);
  }

  main > section:has(> :is(#status-heading, #contact-prompt-heading))::before {
    border-radius: 50%;
  }

  main > section:has(> #status-heading) {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  main > section:has(> #status-heading)::before {
    grid-column: 1;
    grid-row: 1 / span 2;
    inline-size: var(--icon-size);
  }

  main > section:has(> #status-heading) > * {
    grid-column: 2;
    margin-block: 0;
  }

  main > section:has(> #status-heading)::after {
    grid-column: 3;
    grid-row: 1 / span 2;
    inline-size: var(--icon-size);
  }

  main > section:has(> #contact-prompt-heading) {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, max-content) auto minmax(0, 1fr);
    column-gap: var(--space-fluid-2xl);
    padding-block: var(--space-fluid-2xs);
    row-gap: 0;
  }

  main > section:has(> #contact-prompt-heading)::before {
    grid-column: 2;
    grid-row: 1 / span 2;
    inline-size: var(--icon-size-sm);
  }

  main > section:has(> #contact-prompt-heading) > * {
    grid-column: 3;
    margin-block: 0;
  }

  main > section:has(> #contact-prompt-heading)::after {
    grid-column: 4;
    grid-row: 1 / span 2;
    inline-size: var(--icon-size-sm);
  }

  main > section:has(#team-heading),
  main > section:has(> #values-heading) {
    display: flex;
    flex-direction: column;
    gap: var(--space-fluid-lg);
    min-width: 0;
  }

  main > section:has(#team-heading) > section {
    display: grid;
    grid-template-columns: var(--icon-size) minmax(0, 1fr);
    column-gap: var(--icon-gap);
    align-items: start;
  }

  main > section:has(#team-heading) > section::before {
    content: "";
    grid-column: 1;
    grid-row: 1;
    inline-size: var(--icon-size);
    aspect-ratio: 1;
    border: var(--rule) solid var(--color-rule);
    border-radius: 50%;
  }

  main > section:has(#team-heading) > section > * {
    grid-column: 2;
  }

  main > section:has(#team-heading) > section:has(> :is(#costs-heading, #opening-hours-heading)) {
    border-block-start: var(--rule) solid var(--color-rule);
    padding-block-start: var(--space-fluid-md);
  }

  #team-heading,
  #values-heading {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-block-start: 0;
  }

  #team-heading::after,
  #values-heading::after {
    content: "";
    flex: 1;
    border-block-end: var(--rule-strong) dotted var(--color-rule);
  }

  #values-heading::before {
    content: "";
    flex: 0 0 auto;
    inline-size: var(--icon-size);
    aspect-ratio: 1;
    border: var(--rule) solid var(--color-rule);
    border-radius: 50%;
  }

  #team-heading + ul {
    list-style: none;
    padding-inline-start: 0;
  }

  main > section:has(> #values-heading) > article {
    display: grid;
    grid-template-columns: var(--icon-size) minmax(0, 1fr);
    column-gap: var(--icon-gap);
    row-gap: var(--space-2xs);
    align-items: start;
  }

  main > section:has(> #values-heading) > article::before {
    content: "";
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: center;
    inline-size: var(--icon-size);
    aspect-ratio: 1;
    border: var(--rule) solid var(--color-rule);
    border-radius: 50%;
  }

  main > section:has(> #values-heading) > article > * {
    grid-column: 2;
  }

  main > section:has(> #values-heading) > article > h3 {
    margin-block-start: 0;
  }

  main > section:has(> #values-heading) > article > ul {
    margin-block-start: 0;
  }

  #costs-heading + dl {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    column-gap: var(--space-lg);
    row-gap: var(--space-sm);
  }

  #costs-heading + dl::before {
    content: "";
    grid-column: 1 / -1;
    grid-row: 4;
    align-self: start;
    border-block-start: var(--rule) solid var(--color-rule);
  }

  #costs-heading + dl dt {
    grid-column: 1;
  }

  #costs-heading + dl dd {
    grid-column: 2;
    justify-self: end;
    margin: 0;
  }

  #costs-heading + dl :is(dt, dd):last-of-type {
    padding-block-start: var(--space-sm);
  }

  #opening-hours-heading + dl {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    column-gap: var(--space-lg);
    row-gap: var(--space-2xs);
  }

  #opening-hours-heading + dl dd {
    justify-self: end;
    margin: 0;
  }

  footer {
    --footer-gap: var(--space-fluid-xl);
    display: flex;
    align-items: flex-start;
    gap: var(--footer-gap);
  }

  footer > section {
    position: relative;
    flex: 1;
    min-width: 0;
    display: grid;
    grid-template-columns: var(--icon-size) minmax(0, 1fr);
    column-gap: var(--icon-gap);
    align-items: start;
  }

  footer > section::before {
    content: "";
    grid-column: 1;
    grid-row: 1 / -1;
    align-self: start;
    inline-size: var(--icon-size);
    aspect-ratio: 1;
    border: var(--rule) solid var(--color-rule);
    border-radius: 50%;
  }

  footer > section > * {
    grid-column: 2;
  }

  footer > section + section::after {
    content: "";
    position: absolute;
    inset-inline-start: calc(var(--footer-gap) * -0.5);
    block-size: var(--footer-separator-height);
    inset-block-start: var(--space-2xs);
    border-inline-start: var(--rule) solid var(--color-rule);
  }

  @media (max-width: 48rem) {
    body > header {
      grid-template-columns: 1fr;
    }

    body > header > p:first-of-type,
    #site-title,
    body > header > p:not(:first-of-type) {
      grid-column: 1;
      grid-row: auto;
      justify-self: center;
    }

    body > header > p:first-of-type {
      justify-self: end;
    }

    main {
      grid-template-columns: 1fr;
    }

    main::before {
      display: none;
    }

    main > :is(
      section:has(> #status-heading),
      section:has(#team-heading),
      section:has(> #values-heading),
      section:has(> #contact-prompt-heading)
    ) {
      grid-column: auto;
      grid-row: auto;
    }

    main > section:has(> :is(#status-heading, #contact-prompt-heading)) {
      grid-template-columns: 1fr;
      justify-items: center;
      text-align: center;
    }

    main > section:has(> :is(#status-heading, #contact-prompt-heading))::before {
      grid-column: 1;
      grid-row: auto;
    }

    main > section:has(> :is(#status-heading, #contact-prompt-heading))::after {
      display: block;
      grid-column: 1;
      grid-row: auto;
    }

    main > section:has(> :is(#status-heading, #contact-prompt-heading)) > * {
      grid-column: 1;
    }

    footer {
      flex-direction: column;
    }

    footer > section + section {
      border-block-start: var(--rule) solid var(--color-rule);
      padding-block-start: var(--space-fluid-lg);
    }

    footer > section + section::after {
      display: none;
    }
  }
}