/*
 * Vermögen Heute Brand Theme
 * Magazine-specific color overrides and styling
 */

@font-face {
  font-style: normal;
  font-weight: 400;
  src:
    url("../../fonts/Booton/Booton-Regular.woff2") format("woff2"),
    url("../../fonts/Booton/Booton-Regular.woff") format("woff");
  font-family: "Booton";
  font-display: swap;
}

@font-face {
  font-style: normal;
  font-weight: 600;
  src:
    url("../../fonts/Booton/Booton-SemiBold.woff2") format("woff2"),
    url("../../fonts/Booton/Booton-SemiBold.woff") format("woff");
  font-family: "Booton";
  font-display: swap;
}

@font-face {
  font-style: normal;
  font-weight: 800;
  src:
    url("../../fonts/Booton/Booton-Heavy.woff2") format("woff2"),
    url("../../fonts/Booton/Booton-Heavy.woff") format("woff");
  font-family: "Booton";
  font-display: swap;
}

:root {
  /* Brand Colors - Vermögen Heute */
  --color-primary: #eafeab;
  --color-secondary: #060c1b;
  --color-body-copy: #1c1c1c;
  --color-white: #fff;
  --color-primary-light: rgba(234, 254, 171, 0.3);

  /* Button Colors */
  --color-button-primary-bg: var(--color-primary);
  --color-button-primary-hover: var(--color-primary);

  /* Typography - can be customized per magazine */
  --font-family-primary: "Booton", sans-serif;
  --font-family-heading: "Booton", sans-serif;
  --font-family-paragraph: "Booton", sans-serif;
}

/*
 * Magazine-specific component overrides
 */
body[data-magazine="Vermögen Heute"] {
  /* Header */
  & .header-menu-bar {
    display: flex;
    justify-content: space-between;
  }

  & .header-actions {
    gap: var(--spacing-x-small);
  }

  /* Navigation - Category Navigation */
  & .category-navigation {
    gap: 0;
    margin: 0 auto;
    padding-inline: var(--body-padding-inline);
    max-width: var(--max-width);

    & .header-menu-button {
      display: flex;
      flex: 1 0 0;
      justify-content: center;
      align-items: center;
      align-self: stretch;
      border: 2px solid var(--color-secondary);
      border-radius: 0;
      background: var(--color-secondary);
      padding: var(--spacing-15) 0;
      min-height: auto;
      color: var(--color-white);
      font-size: var(--font-size-base);
      line-height: 1.5;
      font-family: var(--font-family-primary);

      &:hover {
        opacity: 0.7;
      }
    }
  }

  & .category-navigation-link {
    display: flex;
    flex: 1 0 0;
    justify-content: center;
    align-items: center;
    align-self: stretch;
    margin-left: -2px;
    border: 2px solid var(--color-secondary);
    padding: var(--spacing-15);
    color: var(--color-secondary);
    font-size: var(--font-size-base);
    line-height: 1.5;
    font-family: var(--font-family-primary);
  }

  /* Primary Button */
  & .button[data-variant="primary"] {
    gap: var(--spacing-10);
    border-radius: 0;
    background: var(--color-secondary);
    padding: var(--spacing-10) var(--spacing-15);

    &:hover {
      background: var(--color-body-copy);
    }
  }

  & .header-subscribe-button {
    &:hover {
      opacity: 0.7;
    }
  }

  /* Secondary Button */
  & .button[data-variant="secondary"] {
    border: 2px solid var(--color-secondary);
    border-radius: 0;
    color: var(--color-secondary);

    &:hover {
      opacity: 0.7;
    }
  }

  /* Category Labels */
  & .article-teaser__category,
  & .article-stage__category,
  & .article-header__category,
  & .post-recommendation__heading {
    color: var(--color-body-copy);
    font-weight: 900;
    font-size: var(--font-size-base);
    line-height: 1.5;
    font-family: var(--font-family-primary);
    letter-spacing: 0.8px;
    text-decoration-line: underline;
    text-decoration-color: rgba(0, 0, 0, 0.01);
    text-decoration-thickness: 120%;
    text-decoration-skip-ink: none;
    text-underline-position: from-font;
    text-underline-offset: -100%;
    text-shadow: 0 0 0 var(--color-primary);
  }

  & .post-recommendation {
    border: 2px solid var(--color-secondary);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.5);
    padding: var(--spacing-15);
  }

  & .post-recommendation__heading {
    border-bottom: 2px solid var(--color-secondary);
    text-decoration: none;
    text-shadow: none;
  }

  /* CTA Overlay */
  & .cta-overlay {
    --_link-color: var(--color-secondary);
  }

  & .article-teaser__link:hover .article-teaser__category {
    color: var(--color-body-copy);
  }

  /* Article Section Header */
  & .article-section__header,
  & .tag-archive__header,
  & .menu__section-title {
    border-bottom: 2px solid var(--color-secondary);
  }

  /* Article Teaser */
  & .article-teaser {
    border: 2px solid var(--color-secondary);
  }

  & .article-teaser__picture {
    border-bottom: 2px solid var(--color-secondary);
  }

  & .article-teaser__content {
    padding: 0 var(--spacing-20) var(--spacing-20);
  }

  /* Article Stage */
  & .article-stage__link {
    border: 2px solid var(--color-secondary);
  }

  & .article-stage__picture {
    margin: 0;
    width: auto;

    @media (width >= 768px) {
      border-right: 2px solid var(--color-secondary);
    }
  }

  & .article-stage__content {
    padding: var(--spacing-20);

    @media (width >= 768px) {
      padding: 0;
    }
  }

  /* Footer */
  & .footer {
    background-color: var(--color-primary);
    padding-block: var(--spacing-40);
    min-height: auto;

    @media (width >= 768px) {
      background-image:
        url("../../images/vermoegen-heute-footer-bg.png"),
        url("../../images/vermoegen-heute-arrow.svg");
      background-position:
        left,
        left top;
      background-size:
        auto,
        30px 30px;
      background-repeat: no-repeat, repeat;
      padding-block: 35px;
      min-height: 480px;
    }

    @media (width >= 1440px) {
      background-position:
        center,
        calc(50% - 15px) top;
    }
  }

  & .footer__inner {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-40);
    height: 100%;
    min-height: auto;

    @media (width >= 768px) {
      display: grid;
      grid-template-rows: 1fr auto;
      grid-template-columns: 500px 1fr;
      gap: 0;
      min-height: calc(480px - 70px);
    }
  }

  & .footer__logo {
    display: none;

    @media (width >= 768px) {
      display: block;
      grid-row: 1 / 3;
      grid-column: 1;
    }
  }

  & .footer__columns {
    display: grid;
    grid-template-columns: 1fr;
    align-content: start;
    gap: var(--spacing-20);

    @media (width >= 768px) {
      grid-template-columns: 1fr 1fr;
      grid-row: 1;
      grid-column: 2;
    }
  }

  & .footer__column {
    gap: var(--spacing-5);
  }

  & .footer__links {
    gap: var(--spacing-5);
  }

  & .footer__column-title {
    color: var(--color-secondary);
    font-weight: var(--font-weight-base);
    font-size: var(--font-size-base);
    line-height: 1.3;
    font-family: var(--font-family-primary);
  }

  & .footer__link {
    color: var(--color-secondary);
    font-size: var(--font-size-base);
    line-height: 1.3;
    font-family: var(--font-family-primary);

    &:hover {
      opacity: 0.7;
    }
  }

  & .footer__copyright {
    margin: 0;
    padding-top: 0;
    color: var(--color-secondary);
    font-size: var(--font-size-base);
    line-height: 1.3;

    @media (width >= 768px) {
      grid-row: 2;
      grid-column: 2;
      padding-top: 165px;
    }
  }

  /* Embeds Overrides for components/embeds/**.css */
  & {
    /* Divider */
    & hr {
      border-width: 2px;
      border-color: var(--color-body-copy);
    }

    /* Button */
    & .kg-button-card .kg-btn,
    & .kg-cta-card a.kg-cta-button /* Call to Action */,
    & button.kg-signup-card-button /* Signup */,
    & a.kg-product-card-button /* Product */ {
      border-radius: 0;
      background: var(--color-secondary) !important;
      padding: var(--spacing-10) var(--spacing-15);
      min-height: 40px;
      font-weight: normal;
      font-size: inherit;
      line-height: inherit;
      font-family: var(--font-family-primary);

      @media (width >= 768px) {
        min-height: 44px;
      }

      &:hover {
        background: var(--color-body-copy) !important;
      }
    }

    /* Bookmark */
    & .kg-card.kg-bookmark-card {
      & * {
        font-family: inherit;
      }

      & .kg-bookmark-container {
        border: 2px solid var(--color-body-copy);
        border-radius: 0;
      }
    }

    /* Call to Action */
    .kg-cta-card {
      border: 2px solid var(--color-body-copy);
      border-radius: 0;
      background: var(--color-background-light);

      & .kg-cta-sponsor-label-wrapper {
        border: none;
      }
    }

    /* Call Out */
    .kg-callout-card {
      border: 2px solid var(--color-body-copy);
      border-radius: 0;
      background: var(--color-background-light);
    }

    /* Signup */
    .kg-signup-card {
      border: 2px solid var(--color-body-copy);
    }

    /* Product */
    .kg-product-card {
      & .kg-product-card-container {
        border: 2px solid var(--color-body-copy);
      }
    }

    /* File */
    & .kg-card.kg-file-card {
      & .kg-file-card-container {
        border: 2px solid var(--color-body-copy);
      }
    }

    /* Toggle */
    & .kg-card.kg-toggle-card {
      border: 2px solid var(--color-body-copy);
    }

    /* Audio */
    & .kg-card.kg-audio-card {
      border: 2px solid var(--color-body-copy);
    }

    /* END Embed Overrides */
  }
}