@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&family=Space+Grotesk:wght@700&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
    --heading-font: 'Space Grotesk', sans-serif;
    --alternative-font: 'Manrope', serif;
    --primary-color: #df5b2e;
    --background: #fffaf5;
    --menu-background: #EEEEEE;
    --heading-color: #121A26;
    --text: #000;
    --muted: #929292;
}

html {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  background: var(--background);
  color: var(--text);
  width: 100%;
  overflow-x: clip;
}

.policy-page {
  width: min(100%, 1320px);
  margin-inline: auto;
  padding: clamp(1.25rem, 5vw, 4rem);
  font-family: var(--alternative-font);
  
  .policy-header {
    margin-bottom: clamp(2rem, 6vw, 4rem);
    display: flex;
    flex-direction: column;
    width:fit-content;

    h1 {
     color: var(--heading-color);
     font-size: clamp(2rem, 7vw, 3.5rem);;
     line-height: 1.1;
    }

    p {
     margin-top: 0.5rem;
     color: var(--heading-color);
     font-size: 1.2rem;
     text-align: center;
     width: 100%;
    }
  }

  .policy-layout {
    display: grid;
    gap: clamp(2rem, 6vw, 5rem);

    .contents {
      padding: clamp(1.5rem, 6vw, 2.25rem);
      background: var(--menu-background);
      border-radius: 1.5rem;
      font-family: var(--alternative-font);

      h2 {
        margin-bottom: 1.2rem;
        color: #515050;
        font-size: 1.1rem;
      }

      a {
       min-height: 3.6rem;
      
       display: flex;
       align-items: center;
       justify-content: space-between;
       gap: 1rem;
      
       color: var(--muted);
       text-decoration: none;
      
       font-size:  clamp(0.9rem, 4vw, 1.2rem);
       font-weight: 600;
       line-height: 1.3;
       font-family: var(--heading-font);
       

       &::after {
         content: "−";
       
         width: 1.4rem;
         height: 1.4rem;
         flex-shrink: 0;
       
         display: grid;
         place-items: center;
       
         border-radius: 50%;
        
         color: #888888;
       
         font-size: 0.85rem;
       }

       &:hover {
         color: black;
       } 
       
       &.active {
         color: black;
   
         &::after {
           content: "↗";
           color: white;
           background: var(--primary-color);
         }
       }
    }


    }

    /* Policy text */
    
    .policy-content {
      min-width: 0;

      section {
        margin-bottom: clamp(2.5rem, 7vw, 4.5rem);
        scroll-margin-top: 2rem;

        h2 {
         margin-bottom: 1rem;
        
         color: var(--heading-color);
         font-size: clamp(1.4rem, 5vw, 1.8rem);
         line-height: 1.25;
         font-family: var(--heading-font);
        }

        h3 {
          margin: 2rem 0 0.75rem;
        
          color: black;
          font-size: 1.1rem;
        }
        
        p, li {
          font-size: clamp(0.95rem, 2vw, 1rem);
          line-height: 1.75;
          color: black;
        }

        p + p {
         margin-top: 1rem;
        }
        
         ul {
          margin: 0.8rem 0 1rem 1.25rem;
        }
        
        li + li {
         margin-top: 0.4rem;
        }
      }
    }
  }

}


.text-link {
  color: var(--primary-color);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.2rem;
}


.blob-right {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px); 
    opacity: 0.15;        
    z-index: -5;          
    pointer-events: none;
    width: 500px;
    height: 500px;
    background-color: #E58B38; 
    right: -200px;             
    top: 1%;
}

 .blob-left {
        position: absolute;
        border-radius: 50%;
        filter: blur(100px); 
        opacity: 0.15;        
        z-index: -5;          
        pointer-events: none;
        width: 470px;
        height: 400px;
        background-color: #E58B38; 
        left: -150px;              
        top: 10%;              
    }

/* Large Screens */

@media (min-width: 900px) {
  .policy-layout {
    grid-template-columns: 22rem minmax(0, 1fr);
    align-items: start;
  }

  .contents {
    position: sticky;
    top: 2rem;
  }
}