/*Nachteule Verlag layout
Author: Sergio Castiglioni
Course: Mediengestaltung
Year: 2026*/

@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond/CormorantGaramond-Light.woff2") format("woff2"),
       url("../fonts/cormorant-garamond/CormorantGaramond-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

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

@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond/CormorantGaramond-Medium.woff2") format("woff2"),
       url("../fonts/cormorant-garamond/CormorantGaramond-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

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

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

@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond/CormorantGaramond-Italic.woff2") format("woff2"),
       url("../fonts/cormorant-garamond/CormorantGaramond-Italic.woff") format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

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

/* RESET so the browsers don't change the look */
*, /*selects every element on the page*/ 
*::before, /*selects all pseudo-elemtents such as decorative lines, overlays, icons so they are reset too and don't break layout later*/
*::after { /*end of selection mentioned above*/
    box-sizing: border-box; /*overrides default browser behaviour so I control padding, size and so on, MANDATORY!*/
}

body {
    margin: 0; /* browsers automatically apply margins and in my case when I want edge to edge i have to override that and remove completely.*/
    font-family: "Cormorant garamond", serif;
    color: #111;
    background: #f5f5f3;
}

/*Since I have visually hidden content - ki generiert aber verstehe alles hier*/
.visually-hidden {
    position: absolute; /*removes elements from layout so it doesnt affect spacing of other content*/
    width: 1px; /*shrinks the objects to it's absolute minimum(practically nothing), but lets it still exist in the DOM*/
    height: 1px; /*--"--*/
    overflow: hidden; /*ensures no text spills visually*/
    clip: rect(0 0 0 0); /*crops the element so nothing is visible, apparently old school but widely supported so effective*/
}/*ende ki generiert*/

/* FULL WIDTH ELEMENTS OUTSIDE THE GRID*/

/* ROLLING BANNER */

.top-banner {
  width: 100%;
  background-color: #EDBBAA;
  color: #410304;
  font-size: 0.94rem;
  font-weight: bold;
  letter-spacing: 0.05em;
  overflow: hidden;
}

.top-banner a {
  color: inherit;
  text-decoration: none;
}

.banner-track {
  display: flex;
  width: max-content;
  animation: banner-scroll 65s linear infinite;
}

.banner-set {
  display: flex;
}

.banner-group {
  display: flex;
}

.banner-group a {
  display: block;
  margin: 0;
  padding-right: 4.75rem;
  white-space: nowrap;
}

@keyframes banner-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .banner-track {
    animation: none;
  }
}
/*ENDE KI GENERIERT*/

/*NAV BAR*/

/*typography*/
.nav-links a,
.nav-recht a { 
    font-size: 1rem;
    font-weight: bold;
    letter-spacing: 0.2em;
    text-decoration: none; /*removes default link styling, such as underline etc*/
    color: #111;
    white-space: nowrap; /*blocks linebreaks, cruical in nav, MUST make media query though otherwise it'll implode*/
}

.nav-links a,
.nav-recht a {
    transition: opacity 0.15s ease;
}

.nav-links a:hover,
.nav-recht a:hover {
    opacity: 0.8;
}

.main-nav {
    position: relative; /*anchor for absolute centering for children with position:relative*/
    height: 5rem;
    width: 100%;
    border-bottom: 0.5px solid #2d2d2d;
    display: flex; /*horisontal alignment on all items within NAV*/
    align-items: center; /*cross axis(flex); thus vertical alignment within 80px bar*/
    padding: 0 1.062rem 0 1.062rem;
    box-sizing: border-box; /*reset default box sizing(content-box) so my size takes form*/
}

.logomark {
    display: flex; /*Horisontal alignment center*/
    align-self: center; /*cross axis: vertical axis alignment center*/
}
.logomark img {
    height: 4rem;
    width: auto;
    display: block; /*removes inline or baseline issues on default img(display:inline which is in line with text)*/
}

.nav-links {
    display: flex; /*horisontal*/
    align-items: center; /*cross axis: vertical*/
    gap: 1.875rem;
    list-style: none; /*remove bullets from list*/
    margin: 0 0 0 1.875rem; /*30px from logo to first link*/
    padding: 0;
}

/*PLACING OF NAV MIDDLE IN GRID MIDDLE*/
.wordmark {
    position: absolute;
    left: 50%;
    transform: translateX(-50%); /*true viewport centering*/
}

.wordmark img {
    height: auto;
    width: 31.25rem;
    display: block;
}

/*PLACING OF NAV RIGHT IN GRID RIGHT*/
.nav-recht {
    margin-left: auto;
    margin-right: 3.5625rem; /*17px padding + 57px= 74px total for visual balance to left*/
    display: flex; /*row*/
    align-items: center; /*cross axis;vertcial*/
    gap: 1.875rem;
    list-style: none; /*remove bullet points*/
    padding: 0;
}

.nav-icon {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: inherit;
  text-decoration: none;
}

.nav-icon svg {
  width: 0.95em;
  height: 0.95em;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;

  /* cap-height optical correction */
  margin-top: 0.08em;
}

.icon-bag {
  transform: scale(1.08);
}

/* ========================== */
/* NAV – BASE (ALL SCREENS)   */
/* ========================== */

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: #111;
  margin: 4px 0;
}

/* Mobile slide menu (hidden by default) */
.mobile-menu {
  display: none;
}

.mobile-menu {
  position: fixed;
  top: calc(16px + 45px); /* banner + nav on mobile */
  left: 0;
  width: 100%;
  background: #f5f5f3;
  border-top: 0.5px solid #2d2d2d;

  transform: translateY(-100%);
  transition: transform 0.35s ease;
  z-index: 9000;
}

.mobile-menu.is-open {
  transform: translateY(0);
}

.mobile-nav-links {
  list-style: none;
  margin: 0;
  padding: 2rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.mobile-nav-links a {
  font-size: 1.25rem;
  font-weight: bold;
  letter-spacing: 0.15em;
  text-decoration: none;
  color: #111;
}

body.menu-open {
  overflow: hidden;
}
/* ========================== */
/* HAMBURGER ANIMATION        */
/* ========================== */

.nav-toggle {
  width: 24px;
  height: 18px;
  position: relative;
}

.nav-toggle span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: #111;
  transition: transform 0.3s ease, opacity 0.2s ease;
}

/* Top line */
.nav-toggle span:nth-child(1) {
  top: 0;
}

/* Middle line */
.nav-toggle span:nth-child(2) {
  top: 8px;
}

/* Bottom line */
.nav-toggle span:nth-child(3) {
  top: 16px;
}

/* ACTIVE STATE → X */
.mobile-menu.is-open ~ .main-nav .nav-toggle span:nth-child(1),
.nav-toggle.active span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.mobile-menu.is-open ~ .main-nav .nav-toggle span:nth-child(2),
.nav-toggle.active span:nth-child(2) {
  opacity: 0;
}

.mobile-menu.is-open ~ .main-nav .nav-toggle span:nth-child(3),
.nav-toggle.active span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/*MAIN BODY*/

/* 10 columns in Figma for 1440 px screen equals in code(not fixed pixels, fluid columns)
Figma               Width       Ratio for code of 1728px
Highlights          519px       0.3
Newsletter          469px       0.27
Essay background    740px       0.43

/*GRID SYSTEM - KEY *hilfe mit KI*/
.main-grid {
    width: 100%; /*due to custom editorial grid, media query takes over afte*/
    margin: 0 auto; /*edge to edge*/
    display: grid;
    grid-template-columns: 30fr 27fr 43fr;
    grid-template-rows: 644px 256px; /*don't want relative so it doesn't implode*/
    gap: 0;
    padding: 0;
}

.featured-release,
.magazines-link {
    position: relative; /*centering*/
}

.featured-release img,
.magazines-link img {
    position: absolute; /*to nearest parent*/
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /*scales, preserves, crops insteal of stretch*/
    display: block; /*removes base settings, inline with spacing and so on*/
    z-index: 0; /*behind link text*/
}

.featured-release > *, /* (>direct child *any element) sits above the image, safety net if hierarchal order in html is changed*/
.magazines-link > * {
    position: relative;
    z-index: 1;
}

.highlights {
    grid-column: 1;
    grid-row: 1;
    position: relative;
    background: #D9D9D9;
}

.featured-release {
    grid-column: 2 / 4;
    grid-row: 1;
    position: relative;
}

.email-signup {
    grid-column: 1;
    grid-row: 2;
    background: #080E17;
}

.magazines-link {
    grid-column: 2;
    grid-row: 2;
    position: relative;
}

.essay-im-fokus {
    grid-column: 3;
    grid-row: 2;
    background: #F5F5F3;
}
/*prevent overflow from other elements*/
html, body {
    overflow-x: hidden;
    max-width: 100vw;
}

/*END GRID SYSTEM LAYOUT*/

/*TEXT & OVERLAPPING BODY*/

.highlights::before { /*because my line is not in html*/
    content: ""; /*pseudo element doesn't exist until content is defined*/
    position: absolute;
    top: 12.375rem; /* 198px distance from top of highlights box */
    left: 6.5rem; /* 104pxdistance from left edge of highlights box */
    width: 2.5rem; /* 40pxFigma: W 40 */
    height: 6px; /* Figma: stroke weight 6 */
    background: #111;
    border-radius: 3px; /* round edges */
}

.highlights-title {
    position: absolute;
    left: 6.5rem;
    top: 14.187rem; /* calc(198px + 29px)line top + spacing from line */
    font-size: 1.5rem;
    font-weight: bold;
    color: #111;
    letter-spacing: 0.05em;
    margin: 0; /* removes default h3 margins since I define it above */
}

.aktuelle-highlights-list {
    position: absolute;
    left: 6.5rem;
    top: 17.5rem;
    font-size: 1.25rem;
    line-height: 1.625rem;
    letter-spacing: 0.05em;
    color: #111;
    margin: 0; /*because defined above*/
    padding: 0; /*because defined above*/
    list-style: none; /*removes bullets*/
    list-style-position: outside;
}

/*remove hyperlinks inherit styling*/
.aktuelle-highlights-list a {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.15s ease;
}

.aktuelle-highlights-list a:hover {
  opacity: 0.85;
}

/*override browsers adding spacing to list by default*/
.aktuelle-highlights-list li {
    margin: 0;
    padding: 0;
}

.featured-release-title {
    position: absolute;
    bottom: 17.5rem;
    right: 3.3125rem;
    font-size: 3.125rem;
    line-height: 3.75rem;
    letter-spacing: 0;
    font-weight: bold;
    text-align: right;
    color: #ffffff;
    margin: 0;
    z-index: 1; /*sits on top*/
}

.featured-release-text {
    position: absolute;
    bottom: 9.375rem;
    right: 3.3125rem;
    font-size: 1.5rem;
    line-height: 1.875rem;
    letter-spacing: 0;
    color: #ffffff;
    text-align: right;
    max-width: 32.5rem; /* To block in acc. Figma layout */
    margin: 0; /*positioning above*/
    z-index: 1;
}

.new-releases-button {
    position: absolute;
    bottom: 3.125rem;
    right: 3.3125rem;
    width: 15.1875rem;   /* 243px */
    height: 3.25rem;     /* 52px */
    background: #636363;
    border-radius: 0.9375rem; /* 15px */
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Spectral", serif;
    font-size: 1.25rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: #ffffff;
    text-decoration: none;
    z-index: 1;
}

.new-releases-button:hover {
    opacity: 0.85;
}

.magazines-link {
    font-size: 2.1875rem;
    font-weight: bold;
    color: #ffffff;
    position: relative;
}

.magazines-link h2 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    z-index: 1;
}

.magazines-link a {
    color: inherit;
    text-decoration: none;
    padding: 0.1em 0.25em;
    border-radius: 0.25em;

    transition:
        color 0.45s cubic-bezier(0.4, 0, 0.2, 1),
        background-color 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.magazines-link a:hover,
.magazines-link a:focus-visible {
    color: #080E17;
    background-color: rgba(255, 255, 255, 0.08);
}

/* ============================= */
/* ESSAY IM FOKUS – FIXED SPACING */
/* ============================= */

.essay-im-fokus {
  display: flex;
  align-items: center;
  background: #F5F5F3;
  overflow: hidden;
}

.essay-im-fokus-inner {
  width: 41rem;
  margin: 0 auto;
}

.essay-im-fokus p {
  font-size: 1.25rem;
  line-height: 1.75rem;
  letter-spacing: 0.05em;
  color: #111;
  margin: 0;
  text-align: left;
}

.essay-im-fokus-line {
  width: 41rem;
  height: 1px;
  background: #111;
  margin: 0.8rem 0 0.65rem;
}

.essay-im-fokus-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.essay-im-fokus-titel {
  font-size: 20px;
  letter-spacing: 0.05em;
  color: #BF1F24;
  margin: 0;
}

.read-button {
  width: 7.125rem;
  height: 1.6875rem;
  background: #BF1F24;
  color: #ffffff;
  border-radius: 6px;
  font-family: "Spectral", serif;
  font-size: 1rem;
  letter-spacing: 0.05em;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.25s ease;
}

.read-button:hover {
  opacity: 0.85;
}

/* EMAIL SIGNUP MODULE, MIT KI GENERIERT, verstehe noch nicht jedes line */

.email-signup {
  position: relative;
  background: #080E17;
  color: #ffffff;
}

/* Center the whole cluster vertically */
.email-signup {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.email-signup-title {
  font-size: 1.5rem;
  letter-spacing: 0.05em;
  line-height: 1.2;
  text-align: center;
  margin: 0 0 1.5rem 0;
}

/* FORM */
.newsletter-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

/* INPUT */
.newsletter-form input {
  width: 15rem;
  height: 1.5rem;
  background: #6E6E6E;
  border: none;
  border-radius: 4px;
  padding-left: 0.75rem;
  padding-right: 0.5rem;
  font-family: "Spectral", serif;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.2;
  color: #ffffff;
}

/* Placeholder */
.newsletter-form input::placeholder {
  font-family: "Spectral", serif;
  color: #e0e0e0;
}

/* BUTTON */
.newsletter-form button {
  width: 7.125rem;
  height: 1.6875rem;
  background: #BF1F24;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  font-family: "Spectral", serif;
  font-size: 0.8125rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: opacity 0.25s ease;
}

.newsletter-form button:hover {
  opacity: 0.7;
}

/* Input button */
.newsletter-form input {
  font-family: inherit;
  font-size: 0.875rem;
}

/* FOOTER */

.site-footer {
  border-top: 0.5px solid #2d2d2d;
  padding: 4rem 6.5rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7.5rem;
  font-size: 1rem;
  letter-spacing: 0.10em;
  color: #000;
}

/* Footer column titles */
.site-footer h4 {
  margin: 0 0 1.5rem 0;
  font-weight: bold;
}

/* Lists */
.site-footer ul {
  list-style: none; /* removes dots */
  margin: 0;
  padding: 0;
}

/* List items */
.site-footer li {
  margin-bottom: 1rem; /* generous vertical spacing */
  font-weight: 400;
}

/* Just in case links exist later */
.site-footer a {
  color: inherit;
  text-decoration: none;
}

.site-footer .footer-folgen a,
.site-footer .footer-verlag a {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.25s ease;
}

.site-footer .footer-folgen a:hover,
.site-footer .footer-verlag a:hover {
  opacity: 0.85;
}

/* COOKIE SECTION, KI GENERIERT, verstehe noch nicht jedes line */

/* COOKIE SECTION */

.cookie-section {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #F3ECEC;
  border-top: 0.5px solid #2d2d2d;
  padding: 0.75rem 2.5rem;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 2rem;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0.05em;
  z-index: 9999;
}

/* COOKIE TEXT */

.cookie-text {
  max-width: 56.25rem;
}

.cookie-text a {
  color: inherit;
  text-decoration: underline;
}

/* BUTTON GROUP */

.alle-buttons {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* BASE BUTTONS (EXCEPT CLOSE ICON) */

.cookie-section button:not(.cookie-close) {
  height: 2.25rem;
  padding: 0 1.125rem;
  font-size: 0.875rem;
  letter-spacing: 0.05em;
  font-weight: 600;
  border-radius: 2px;
  cursor: pointer;
  background: transparent;
  border: 0.5px solid #656565;
  color: #000;
  font-family: inherit;
}

/* PRIMARY / DARK BUTTONS */

#alle-ablehnen-button,
#alle-akzeptieren-button {
  background: #6E6E6E;
  color: #fff;
  border: none;
}

/* CLOSE ICON BUTTON */

.cookie-close {
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;
}

/* CLOSE ICON (SVG X) */

.cookie-close svg {
  width: 1.4rem;
  height: 1.4rem;
  stroke: #000;
  fill: none;
  stroke-width: 2.25;
  stroke-linecap: round;
}
img {
  max-width: 100%;
  height: auto;
}