@import url("header.css");
@import url("footer.css");

/* ===== FONT LOAD ===== */
@font-face {
    font-family: 'Tan Ashford';
    src: url('../fonts/ashford-bold.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* ===== BASE TEXT ===== */
body {
    margin: 0;
    padding: 60px 0 0 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 1em;
    line-height: 1.6;
}

/* ===== HEADINGS ===== */
h1, h2, h3 {
    font-family: 'Tan Ashford', serif;
    font-weight: normal;
    letter-spacing: 0.02em;
}

/* HERO / MAIN TITLE */
h1 {
    font-size: clamp(1.9em, 5vw, 2.7em); 
    line-height: 0.7;
    margin: 0;
}

/* SECTION TITLE */
h2 {
    font-size: clamp(1.4em, 3.5vw, 2.3em); 
    line-height: 0.7;
    margin: 0;
}

/* SMALL TITLE */
h3 {
    font-size: clamp(1.1em, 2.5vw, 1.7em); 
    line-height: 0.9;
    margin: 0;
}


/* ===== SUBHEADINGS / LABELS ===== */
.subheading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 1000;
    text-transform: uppercase;
    letter-spacing: 0.0em;
    font-size: 0.98em;
    margin: 0;
}

/* ===== PARAGRAPHS ===== */
p {
    font-size: 0.98em;
    line-height: 1.4;
    max-width: 65ch;
    margin: 0;
}

#header-container,
#footer-container {
    width: 100%;
}

/* ===== COOKIE BANNER (IMPROVED - EM VERSION) ===== */

#cookie-banner {
  position: fixed;
  bottom: 1.25em;
  left: 50%;
  transform: translateX(-50%);

  width: calc(100% - 2.5em);
  max-width: 47.5em;

  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(0.5em);
  -webkit-backdrop-filter: blur(0.5em);
  border: 0.0625em solid rgba(0,0,0,0.08);

  color: #12609d;

  padding: 0.6em 1.25em;
  border-radius: 0.75em;

  box-shadow: 0 0.9em 2.5em rgba(0,0,0,0.2);
  z-index: 999999;
}

/* layout */
.cookie-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.9em;
  padding: 0 1em;
}

/* text */
.cookie-content p {
  font-size: 0.9em;
  line-height: 1.4;
  margin: 0;
}

.cookie-content a {
  color: #12609d;
}

/* buttons */
.cookie-buttons {
  display: flex;
  gap: 0.6em;
}

/* base button */
.cookie-buttons button {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.85em;

  padding: 0.5em 1em;
  border-radius: 0.5em;
  border: none;

  cursor: pointer;
  transition: all 0.2s ease;
}

.cookie-buttons button:hover {
  transform: translateY(-0.06em);
}

/* ACCEPT */
.cookie-buttons button:first-child {
  background: #fad02c;
  color: #f0f4f8;
}

.cookie-buttons button:first-child:hover {
  background: #e8bb0a;
}

/* REJECT */
.cookie-buttons button:last-child {
  background: transparent;
  color: #12609d;
  border: 0.0625em solid #12609d;
}

.cookie-buttons button:last-child:hover {
  background: #f0f4f8;
}

/* MOBILE */
@media (max-width: 600px) {
  #cookie-banner {
    bottom: 0;
    width: calc(100% - 1.25em);
    padding: 0.9em;
      border-radius: 0em;
  }

  .cookie-content {
    flex-direction: column;
    align-items: center;
    gap: 0.6em;
  }

  .cookie-content p,
  .cookie-text {  
    text-align: center;
  }

  .cookie-buttons {
    width: 100%;
  }

  .cookie-buttons button {
    flex: 1;
    text-align: center;
  }
}


@media (min-width: 1920px) {

    /* Base font size */
    body {
        font-size: 1.3em;
    }

    /* Headings */
    h1 {
        font-size: clamp(2.2em, 5vw, 3em); 
    }

    h2 {
        font-size: clamp(1.7em, 3.5vw, 2.6em); 
    }

    h3 {
        font-size: clamp(1.4em, 2.5vw, 2em); 
    }

    /* Subheading */
    .subheading {
        font-size: 1.28em;
    }

    /* Paragraphs */
    p {
        font-size: 1.28em;
        max-width: 90ch;
    }

}

@media (max-width: 900px) {

    /* Base font size */
    body {
        text-wrap: pretty;
    }

    /* Headings */
    h1 {
        text-wrap: pretty;
    }

    h2 {
        text-wrap: pretty;
    }

    h3 {
        text-wrap: pretty;
    }

    /* Subheading */
    .subheading {
        text-wrap: pretty;
    }

    /* Paragraphs */
    p {
        text-wrap: pretty;
    }

}