/*
 * FinanzZeit Brand Theme
 * Magazine-specific color overrides and styling
 */

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

@font-face {
  font-style: normal;
  font-weight: 700;
  src:
    url("../../fonts/Greed/GreedStandard-Bold.woff2") format("woff2"),
    url("../../fonts/Greed/GreedStandard-Bold.woff") format("woff");
  font-family: "Greed Standard";
  font-display: swap;
}

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

@font-face {
  font-style: normal;
  font-weight: 700;
  src:
    url("../../fonts/Greed/GreedNarrow-Bold.woff2") format("woff2"),
    url("../../fonts/Greed/GreedNarrow-Bold.woff") format("woff");
  font-family: "Greed Narrow";
  font-display: swap;
}

:root {
  /* Brand Colors - FinanzZeit */
  --color-primary: #5d3c0b;
  --color-secondary: #f2e9e2;
  --color-body-copy: #1c1c1c;
  --color-white: #fff;

  /* Additional Colors */
  --color-primary-hover: #d08413;
  --color-text-muted: #51371e;
  --color-background-light: #f9f4f1;

  /* 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: "Greed Standard", sans-serif;
  --font-family-heading: "Greed Narrow", sans-serif;
  --font-family-paragraph: "Greed Standard", sans-serif;
}

/*
 * Magazine-specific body styling
 * Using data attribute for scoped styling
 */
body[data-magazine="FinanzZeit"] {
  /* Magazine-specific overrides can go here */
  background-color: var(--color-secondary);

  /*
   * Magazine-specific component overrides
   */

  /* Header */
  & .header-container {
    margin-bottom: var(--section-padding);
  }

  & .header-container__inner {
    flex-direction: row;
    align-items: center;
    gap: var(--spacing-medium);
    padding: 0 var(--body-padding-inline) 0 0;
  }

  & .header__logo {
    display: block;
    flex-shrink: 0;
    background-image: url("../../images/finanzzeit-header-icon.svg");
    background-position: center;
    background-size: 34px 62px;
    background-repeat: no-repeat;
    background-color: var(--color-primary);
    width: 100px;
    height: 100px;
  }

  /* Navigation - Category Navigation */
  & .category-navigation {
    border-bottom: 1px solid var(--color-primary);
    background: var(--color-background-light);
  }

  & .category-navigation-link {
    display: flex;
    align-items: center;
    color: var(--color-primary);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    font-family: var(--font-family-heading);
    letter-spacing: 0.8px;
    text-transform: uppercase;
  }

  /* Category Color Indicators */
  & .category-navigation-link::before,
  & .article-teaser__category::before,
  & .article-stage__category::before,
  & .article-header__category::before {
    display: inline-block;
    flex-shrink: 0;
    margin-right: 8px;
    border-radius: 4px;
    background-color: var(--category-color, var(--color-primary));
    width: 12px;
    height: 12px;
    content: "";
  }

  /* Primary Button */
  & .button[data-variant="primary"] {
    border-radius: 10px;

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

  /* Secondary Button */
  & .button[data-variant="secondary"] {
    border-radius: 10px;
    background: none;

    &:hover {
      border-color: var(--color-primary-hover);
      color: var(--color-primary-hover);
    }
  }

  /* Header Buttons */
  & .header-menu-button,
  & .header-subscribe-button {
    font-weight: 700;
    text-transform: uppercase;
  }

  & .header-menu-button {
    border: 1px solid var(--color-primary);
    border-radius: 10px;
    background: var(--color-white);
    color: var(--color-primary);
  }

  & .button.header-menu-button:hover {
    border-color: var(--color-primary-hover);
    background-color: transparent;
    color: var(--color-primary-hover);
  }

  /* Article Header */
  & .article-header__text {
    background: none;
  }

  & .article-header--two-column .article-header__text {
    background: var(--color-primary);
  }

  & .article-header--two-column .article-header__category {
    color: var(--color-secondary);
  }

  & .article-header--two-column .article-header__category::before {
    display: none;
  }

  /* Post Recommendation */
  & .post-recommendation {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-15);
    border-radius: var(--border-radius-medium);
    background: rgba(255, 255, 255, 0.5);
    padding: var(--spacing-15);
    width: 230px;
  }

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

  /* Category Labels */
  & .article-teaser__category,
  & .article-stage__category,
  & .article-header__category,
  & .post-recommendation__heading {
    margin-bottom: 0;
    width: 100%;
    color: var(--color-text-muted);
    font-weight: 500;
    font-size: var(--font-size-sm);
    line-height: var(--line-height-m-body-small);
    text-transform: uppercase;
  }

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

  /* Article Section Title */
  & .tag-archive__title,
  & .article-section__title {
    font-weight: 400;
    font-size: var(--font-size-m-h3);
    line-height: var(--line-height-m-h3);
  }

  /* Article Teaser */
  & .article-teaser {
    background: none;
  }

  & .article-section__grid--4col .article-teaser__category::before {
    display: none;
  }

  /* Article Images */
  & .article-stage__image,
  & .article-teaser__image {
    border-radius: 10px;
  }

  /* Footer */
  & .footer {
    background-color: var(--color-primary);
    padding: 0;
  }

  & .footer__inner {
    display: grid;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 0.5fr 0.5fr;
    gap: var(--spacing-20);
    padding: var(--body-padding-inline);

    @media (width <= 768px) {
      grid-template-columns: 1fr;
    }
  }

  & .footer__logo {
    display: block;
    mask-image: url("../../images/finanzzeit-logo.svg");
    -webkit-mask-image: url("../../images/finanzzeit-logo.svg");
    mask-position: left center;
    -webkit-mask-position: left center;
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    background-color: var(--color-secondary);
    aspect-ratio: 440 / 129;
    max-width: 440px;
  }

  & .footer__columns {
    display: contents;
  }

  & .footer__copyright {
    grid-column: 1 / -1;
  }

  & .footer__column-title,
  & .footer__link,
  & .footer__copyright {
    color: var(--color-secondary);
  }

  /* Embeds Overrides for components/embeds/**.css */
  & {
    /* Divider */
    & hr {
      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: var(--spacing-10);
      background: var(--color-primary) !important;
      padding: var(--spacing-10) var(--spacing-15);
      min-height: 40px;
      font-weight: 700;
      font-size: inherit;
      line-height: inherit;
      font-family: var(--font-family-primary);
      text-transform: uppercase;

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

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

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

      & .kg-bookmark-container {
        border-color: var(--color-body-copy);
        border-radius: var(--spacing-10);
      }
    }

    /* Gallery */
    & .kg-gallery-image {
      & img {
        border-radius: var(--spacing-10);
      }
    }

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

      & .kg-cta-sponsor-label-wrapper {
        border-bottom-color: var(--color-secondary);
      }

      & .kg-cta-image-container img {
        border-radius: var(--spacing-10);
      }
    }

    /* Call Out */
    .kg-callout-card {
      border: 1px solid var(--color-body-copy);
      border-radius: var(--spacing-10);
    }

    /* Signup */
    .kg-signup-card {
      border: 1px solid var(--color-body-copy);
      border-radius: var(--spacing-10);

      & .kg-signup-card-fields {
        border-radius: 13px; /* Magic number to adjust visual alignment */
      }
    }

    /* Product */
    .kg-product-card {
      & .kg-product-card-container {
        border: 1px solid var(--color-body-copy);
        border-radius: var(--spacing-10);
        background: var(--color-background-light);
      }
    }

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

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

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

    /* Image */
    & .kg-image-card img {
      border-radius: var(--spacing-10);
    }

    /* END Embeds Overrides */
  }
}