/*
 * Kapital Horizont Brand Theme
 * Magazine-specific color overrides and styling
 */

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

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

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

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

:root {
  /* Brand Colors - Kapital Horizont */
  --color-primary: #c09615; /* Gold */
  --color-primary-dark: #6f570f; /* Dark brown/gold */
  --color-primary-dark-mid: rgba(111, 87, 15, 0.5);
  --color-primary-muted: #b08914; /* Muted gold for watermarks */
  --color-secondary: #0b1020; /* Dark blue/black */
  --color-border: rgba(111, 87, 15, 0.2);

  --color-button-primary-bg: var(--color-primary-dark);
  --color-button-primary-hover: var(--color-primary);

  /* Secondary Button Colors */
  --color-button-secondary: var(--color-primary-dark);
  --color-button-secondary-bg: transparent;
  --color-button-secondary-hover: var(--color-primary);
  --color-button-secondary-bg-hover: var(--color-primary-dark);

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

/*
 * Magazine-specific body styling
 * Using data attribute for scoped styling
 */
body[data-magazine="Kapital Horizont"] {
  /*
   * Magazine-specific component overrides
   */

  /* Navigation - Category Navigation */
  & .category-navigation {
    position: relative;
    border-top: none;
    border-bottom: 1px solid var(--color-border);
  }

  & .category-navigation-link {
    color: var(--color-primary-dark);
  }

  /* Primary Button */
  & .button[data-variant="primary"] {
    gap: var(--spacing-10);
    padding-inline: var(--spacing-15);
    padding-block: var(--spacing-10);
  }

  /* Secondary Button Hover */
  & .button[data-variant="secondary"]:hover {
    border-color: var(--color-button-secondary-bg-hover);
    background: var(--color-button-secondary-bg-hover);
    color: var(--color-text-inverse);
  }

  /* Header Menu Button - Override primary to look like secondary */
  & .header-menu-button {
    border: 1px solid var(--color-button-secondary);
    background: var(--color-button-secondary-bg);
    color: var(--color-button-secondary);

    &:hover {
      border-color: var(--color-button-secondary-bg-hover);
      background: var(--color-button-secondary-bg-hover);
      color: var(--color-text-inverse);
    }
  }

  /* Category Labels */
  & .article-teaser__category,
  & .article-stage__category,
  & .article-header__category,
  & .post-recommendation__heading {
    color: var(--color-primary);
    font-weight: 700;
    font-size: var(--font-size-sm);
    line-height: 1.5;
    font-family: var(--font-family-primary);
    text-transform: none;
  }

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

  & .category-navigation::after,
  & .article-section__header::after,
  & .tag-archive__header::after,
  & .menu__section-title::after {
    position: absolute;
    right: 0;
    bottom: -3px;
    left: 0;
    background: var(--color-border);
    height: 1px;
    content: "";
  }

  /* Article Section Title */
  & .article-section__title {
    color: var(--color-primary);
    font-weight: 400;
    font-size: var(--font-size-m-h3);
    line-height: var(--line-height-m-h3);
    font-family: var(--font-family-heading);
  }

  /* Article Images */
  & .article-stage__image,
  & .article-teaser__image {
    border: 1px solid var(--color-border);
    border-radius: var(--spacing-5);
  }

  /* Article Section Link */
  & .article-section__link {
    display: flex;
    align-items: center;
    gap: var(--spacing-10);
    border: none;
    padding-inline: var(--spacing-5);
    padding-block: var(--spacing-10);
    color: var(--color-primary);
    font-weight: 700;
    font-size: var(--font-size-sm);
    line-height: 1.5;
    font-family: var(--font-family-primary);
  }

  /* Footer */
  & .footer {
    gap: var(--spacing-20);
    background-color: var(--color-primary);
  }

  & .footer__logo {
    display: block;
    mask-image: url("../../images/kapital-horizont-watermark.svg");
    -webkit-mask-image: url("../../images/kapital-horizont-watermark.svg");
    mask-position: center;
    -webkit-mask-position: center;
    mask-size: 100% 100%;
    -webkit-mask-size: 100% 100%;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    margin-inline: auto;
    background-color: var(--color-primary-muted);
    aspect-ratio: 230 / 31;
    width: 100%;
    max-width: var(--max-width);
  }

  & .footer__column-title,
  & .footer__link,
  & .footer__copyright {
    font-size: var(--font-size-sm);
    line-height: 1.5;
  }

  /* Embeds Overrides for components/embeds/**.css */
  & {
    /* Divider */
    & hr {
      border-color: rgba(111, 87, 15, 0.2); /* Magic Value from Figma */
    }

    /* 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-5);
      background: var(--color-button-primary-bg) !important;
      padding: var(--spacing-10) var(--spacing-15);
      min-height: 40px;
      font-weight: 400;
      font-size: inherit;
      line-height: inherit;
      font-family: var(--font-family-primary);

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

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

    /* Bookmark */
    & .kg-card.kg-bookmark-card {
      & .kg-bookmark-container {
        border-color: rgba(111, 87, 15, 0.2); /* Magic Value from Figma */
        border-radius: var(--spacing-5);
      }
    }

    /* Gallery */
    & .kg-gallery-image {
      & img {
        border: 1px solid rgba(111, 87, 15, 0.2); /* Magic Value from Figma */
        border-radius: var(--spacing-5);
      }
    }

    /* Call to Action */
    .kg-cta-card {
      border-width: 1px;
      border-style: solid;
      /* Magic Value from Figma */
      border-color: rgba(111, 87, 15, 0.2);
      border-radius: var(--spacing-5);
      background: var(--color-background-light);

      & .kg-cta-sponsor-label-wrapper {
        /* Magic Value from Figma */
        border-bottom-color: rgba(111, 87, 15, 0.2);
      }

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

    /* Call Out */
    .kg-callout-card {
      border: 1px solid rgba(111, 87, 15, 0.2); /* Magic Value from Figma */
      border-radius: var(--spacing-5);
    }

    /* Signup */
    .kg-signup-card {
      border: 1px solid rgba(111, 87, 15, 0.2); /* Magic Value from Figma */
      border-radius: var(--spacing-5);

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

    /* Product */
    .kg-product-card {
      & .kg-product-card-container {
        border: 1px solid rgba(111, 87, 15, 0.2); /* Magic Value from Figma */
        border-radius: var(--spacing-5);
      }
    }

    /* File */
    & .kg-card.kg-file-card {
      & .kg-file-card-container {
        border: 1px solid rgba(111, 87, 15, 0.2); /* Magic Value from Figma */
        border-radius: var(--spacing-5);
      }
    }

    /* Toggle */
    & .kg-card.kg-toggle-card {
      border: 1px solid rgba(111, 87, 15, 0.2); /* Magic Value from Figma */
      border-radius: var(--spacing-5);
    }

    /* Audio */
    & .kg-card.kg-audio-card {
      border: 1px solid rgba(111, 87, 15, 0.2); /* Magic Value from Figma */
      border-radius: var(--spacing-5);
    }

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

    /* END Embeds Overrides */
  }
}