/* style-common.css */
@import url("color.css");
/*
 * Styles for the new wiggy-brand-page.ftl template.
 * Using a mobile-first approach.
 */

:root {
    --grid-gap: 0rem; /* Gap between grid items */
}

/* Basic resets from style-common.css */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Define body font from style-common.css */
body {
    font-family: Tenderness, sans-serif;
    /* The problematic flexbox layout is NOT copied over. */
    /* The page-wrapper will handle the min-height. */
}

.page-wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    max-width: 1600px; /* Asetetaan maksimileveys koko sivulle */
    margin: 0 auto; /* Keskitetään koko sivu */
    overflow-x: hidden; /* Estää sivuttaisen ylivuodon ja vierityspalkin */
}

.top-banner-area,
.page-header,
footer {
    width: 100%;
    flex-shrink: 0; /* Prevent header/footer from shrinking */
}


/* Main content grid layout */
.main-content {
    display: grid;
    grid-template-columns: 1fr; /* Default to a single column */
    gap: var(--grid-gap);
    padding: var(--grid-gap);
    width: 100%;
    flex-grow: 1; /* Allow main content to grow and fill space */
}

/* Lisätään tilaa eri sisältöalueiden väliin */
/*
.main-content > .cms-area:is(:last-child) {
    margin-bottom: 1rem;
    margin-top: 1rem;
}*/

/* On larger screens (e.g., tablets and desktops), use a 2-column layout */
@media (min-width: 801px) {
    /* Make fullWide span correctly */
    .main-content > .cms-area-fullWide { 
        grid-column: 1 / -1; 
    }
    
    /* Set cms-area-1 and 2 to be 80% wide and centered */
    .main-content > .cms-area-1,
    .main-content > .cms-area-2 {
        grid-column: 1 / -1; /* Varmistetaan, että vievät koko gridin leveyden */
        width: 90%;
        justify-self: center; /* Keskitetään alue grid-sarakkeessa */
    }

    /* Asetetaan korttimainen asettelu VAIN area-1 ja area-2 sisällä oleville komponenteille */
    .main-content > .cms-area-1 > *,
    .main-content > .cms-area-2 > * {
        min-width: 80%;
    }

    /* Varmistetaan, että promo-banner vie aina 100% leveyden */
    .main-content > .cms-area-1 > .promo-banner-link,
    .main-content > .cms-area-2 > .promo-banner-link {
        flex-basis: 100%;
        max-width: 100%;
    }

    /* Erityiskäsittely wiggy-product-list -komponentille, jotta se ei käyttäydy korttina */
    .main-content > .cms-area-1 > .wiggy-product-list,
    .main-content > .cms-area-2 > .wiggy-product-list {
        flex-basis: 100%;
        max-width: 100%;
        flex-grow: 0;
    }

    /* Kohdistetaan flexbox-säännöt tuotelistan sisällä oleviin tuotteisiin */
    .main-content .wiggy-product-list .clearfix {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start; /* Asettaa tuotteet rivin alkuun */
        gap: 1rem; /* Lisää välin tuotteiden väliin */
    }
}

/* On mobile screens, move the top banner below the header */
@media (max-width: 800px) {
    /* Vaihdetaan headerin ja bannerin järjestystä flexboxin order-ominaisuudella */
    .page-header { order: 1; }
    .top-banner-area { order: 2; }
    .navigation-area { order: 3; }
    .main-content { order: 4; }
    footer { order: 5; }

    .text-section {
       width:80%;
       margin-left: 10%;
    }
}

/* Popup styles (copied from old style-common.css) */
.popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; /* Cover the whole screen to center content vertically */
  background-color: var(--main-1-transparent);
  display: none; /* Initially hidden */
  z-index: 3000; /* Ensure it's on top of everything */
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 1rem;
}

.popup-content {
  font-size: 1.25em;
  font-weight: bold;
  margin-bottom: 1.5rem;
}

.popup-buttons {
  display: flex;
  flex-direction: column; /* Stack buttons on mobile */
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.popup-buttons button {
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  background-color: var(--highlight-1);
  color: white;
  font-weight: bold;
  width: 100%;
  max-width: 250px;
}

.text-section {
   margin-top: 3rem;
   margin-bottom: 3rem;
}

.text-section h4 {
  margin-bottom: 1em;
  font-size: 2em;
  color: var(--main-2);
}

.text-selection strong {
  font-weight: bold;
}

.text-section ul {
   margin-left: 2em;
}

.text-section p, .text-section li {
  margin-bottom: 0.5em;
  font-weight: normal;
}