/* ===============================
   RESET & BASE STYLES
=================================*/

html {
  box-sizing: border-box;
  font-size: 16px;
}

*, *:before, *:after {
  box-sizing: inherit;
}

body, h1, h2, h3, h4, h5, h6, p, ol, ul {
  margin: 0;
  padding: 0;
  font-weight: normal;
}

ol, ul {
  list-style: none;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  text-decoration: none;
  color: inherit;
}


/* ===============================
   TOP BAR
=================================*/

#topBar {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  height: 2.5vw;
  background-color: #654E6F;
  gap: 1vw;
}

#topBarWrapper {
  display: flex;
  flex-direction: row;
  gap: 1.5vw;
  padding-right: 8vw;
}

.topBarSegment {
  display: flex;
  align-items: center;
  gap: 0.5vw;
}

.topbarText {
  font-family: "Inter Regular";
  color: white;
  font-size: 12px;
}

.topBarSegment:hover {
  text-decoration: underline;
  color: white;
}


/* ===============================
   NAVBAR
=================================*/

#navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1250px;
  margin: 0 auto;
  padding: 0.5vw 2vw;
}

#cardanLogo {
  margin-top: 1vw;
  margin-left: 1vw;
  width: 120px;
  height: auto;
}

#navbarList {
  font-family: "Montserrat Medium";
  display: flex;
  align-items: center;
  flex-direction: row;
  column-gap: 2rem;
  font-size: 14px;
  margin-top: 1vw;
  flex-grow: 1;
  justify-content: center;
}

.navbarListItem {
  display: flex;
  align-items: center;
  gap: 10px;
}

.navbarListItem a:hover {
  text-decoration: underline;
  color: #654E6F;
}

.arrowDown {
  width: 10px;
  height: 10px;
  margin-left: 5px;
  vertical-align: middle;
}

#themeWrapper {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1vw;
}

#languageChoice {
  font-family: "Montserrat Medium";
  font-size: 14px;
}

#sunIcon {
  width: 16px;
  height: 16px;
}


/* ===============================
   DIVIDERS
=================================*/

hr {
  border: none;
  height: 1px;
  background-color: lightgray;
  margin: 0.5vw 0;
}


/* ===============================
   ICONS
=================================*/

#linkArrowIcon,
#cookieIcon {
  width: 16px;
  height: 16px;
}


/* ===============================
   MAIN CONTENT
=================================*/

/* Main content layout */
.content-container {
  display: flex;
  max-width: 1250px;
  margin: 0 auto;
  padding: 2rem;
  gap: 2rem;
}

/* Left side content */
.hero-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 2rem 0;
}

.hero-content h1 {
  font-family: "Montserrat Bold";
  font-size: 2.5rem;
  color: #333;
  margin-bottom: 1.5rem;
  line-height: 1.2;
}

.hero-content p {
  font-family: "Montserrat Regular";
  font-size: 1rem;
  line-height: 1.5;
  color: #333;
  margin-bottom: 2rem;
  max-width: 90%;
}

/* Features list */
.features-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2rem;
}

.features-list li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.feature-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: scale(0.85);
}

.features-list span {
  font-family: "Montserrat Medium";
  font-size: 1rem;
  color: #333;
  text-decoration: underline;
}

/* CTA Button */
.cta-button {
  display: inline-block;
  background-color: #008743;
  color: white;
  font-family: "Montserrat Medium";
  font-size: 1rem;
  font-weight: 700;
  padding: 0.8rem 1.5rem;
  border-radius: 5px;
  transition: background-color 0.3s;
  align-self: flex-start;
  margin-top: 1rem;
}

.cta-button:hover {
  background-color: #006c36;
}

/* Right side image */
.hero-image {
  flex: 1;
  position: relative;
  margin-bottom: 20px;
  margin-right: 20px;
}

.hero-image img {
  width: 100%;
  border-radius: 5px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Circle button */
.circle-button {
  position: absolute;
  bottom: 0px;
  right: -50px;
  width: 160px;
  height: 160px;
  background-color: #654E6F;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: transform 0.3s;
  transform: rotate(20deg);
  border: 5px solid white;
  z-index: 10;
}

.circle-button:hover {
  transform: scale(1.05) rotate(10deg);
}

.circle-button-inner {
  color: white;
  padding: 0.5rem;
  max-width: 90%;
}

.circle-button-inner p {
  font-family: "Montserrat Bold";
  font-size: 1.5rem;
  margin-bottom: 0.3rem;
}

.circle-button-inner .small-text {
  font-family: "Montserrat Regular";
  font-size: 0.65em;
  line-height: 1.5;
  display: block;
  padding: 0 10px;
}

/* Bottom ribbon */
.bottom-ribbon {
  background-color: #e6f7ea;
  padding: 0.7rem 0;
  margin-top: 2rem;
  margin-bottom: 5rem;
}

.ribbon-container {
  max-width: 1250px;
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 1rem;
  padding: 0 5rem;
}

.ribbon-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.ribbon-icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ribbon-item span {
  font-family: "Montserrat Regular";
  font-size: 0.9rem;
  color: #333;
  font-weight: 400;
}

.ribbon-item span strong {
  font-weight: 900;
  color: #000;
}


/* ===============================
   FOOTER
=================================*/

#mainFooter {
  background-color: #654E6F;
  padding: 2vw 5vw;
  background-image: url('img/cardan-footer-bg.png');
  background-repeat: no-repeat;
  background-position: right center;
  background-size: auto 100%;
}

#cardanFooterLogo {
  width: 400px;
  height: auto;
  margin-bottom: 3vw;
  margin-top: 2vw;
}

#mainFooterLists {
  display: flex;
  flex-direction: row;
  gap: 10vw;
  margin-left: 4vw;
  margin-bottom: 2vw;
}

/* Footer text styles */
.footerListItem1 {
  font-family: "Montserrat Bold";
  color: white;
  font-size: 15px;
}

.footerListItem {
  font-family: "Montserrat Regular";
  color: white;
  font-size: 15px;
}

.boldText {
  font-family: "Montserrat Bold";
}

.boldText:hover {
  text-decoration: underline;
}

/* Footer list layout */
#toegankelijkheidList,
#cardanList,
#contactList {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

/* Social icons */
#footerIconList ul {
  display: flex;
  gap: 1rem;
  margin-top: 3vw;
}

#footerIconList img {
  width: 50px;
  height: auto;
}


/* ===============================
   SUBFOOTER
=================================*/

#subFooter {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #d9d3db;
  padding: 1vw 1vw;
}

#subFooterList {
  display: flex;
  flex-direction: row;
  gap: 1.5vw;
  padding: 1vw;
  margin-left: 2vw;
}

.subListItem,
#copyrightSub {
  font-family: "Montserrat Regular";
  font-size: 14px;
  color: #704c80;
}

#copyrightSub {
  padding: 1.5vw;
  margin-right: 2vw;
}


/* ===============================
   RESPONSIVE STYLES
=================================*/

@media (max-width: 900px) {
    /* Top bar aanpassingen */
    #topBar {
        height: auto;
        padding: 0.5rem;
    }

    #topBarWrapper {
        padding-right: 1rem;
        width: 100%;
        justify-content: flex-end;
    }

    /* Navigatie aanpassingen */
    #navbar {
        flex-direction: column;
        padding: 1rem;
        position: relative;
    }

    #cardanLogo {
        margin: 0;
        align-self: flex-start;
    }

    #navbarList {
        flex-direction: column;
        width: 100%;
        gap: 1rem;
        margin-top: 1rem;
        align-items: flex-start;
    }

    .navbarListItem {
        width: 100%;
        justify-content: space-between;
        padding: 0.5rem 0;
        border-bottom: 1px solid #eee;
    }

    #themeWrapper {
        position: absolute;
        top: 1rem;
        right: 1rem;
        margin: 0;
    }

    /* Main content aanpassingen */
    .content-container {
        flex-direction: column;
        padding: 1rem;
        gap: 2rem;
    }

    .hero-content {
        width: 100%;
        padding: 0;
    }

    .hero-content h1 {
        font-size: 2rem;
    }

    .hero-image {
        width: 100%;
        margin: 0;
        position: relative;
        display: flex;
        justify-content: center;
    }

    .hero-image img {
        width: 100%;
        max-width: 500px;
        height: auto;
        margin: 0 auto;
    }

    .circle-button {
        position: absolute;
        bottom: -30px;
        right: 50%;
        transform: translateX(50%) rotate(0deg);
        margin: 0;
    }

    .circle-button:hover {
        transform: translateX(50%) scale(1.05);
    }

    /* Bottom ribbon aanpassingen */
    .ribbon-container {
        flex-direction: column;
        padding: 1rem;
        gap: 1rem;
    }

    .ribbon-item {
        width: 100%;
        justify-content: flex-start;
    }

    /* Footer aanpassingen */
    #mainFooter {
        padding: 2rem 1rem;
        background-size: cover;
    }

    #cardanFooterLogo {
        width: 100%;
        max-width: 300px;
    }

    #mainFooterLists {
        flex-direction: column;
        gap: 2rem;
    }
}

@media (max-width: 600px) {
    .hero-content h1 {
        font-size: 1.8rem;
    }

    .features-list {
        gap: 0.8rem;
    }

    .features-list span {
        font-size: 0.9rem;
    }

    .hero-image img {
        max-width: 100%;
    }

    .circle-button {
        width: 120px;
        height: 120px;
        bottom: -20px;
    }

    .circle-button-inner {
        padding: 0.3rem;
    }

    .circle-button-inner p {
        font-size: 0.9rem;
        margin-bottom: 0.2rem;
    }

    .circle-button-inner .small-text {
        font-size: 0.55em;
        padding: 0 5px;
    }
}