/* 

   Wolfram CAG stylesheet

   developer:   estevaot
   requires:    /common/framework/css/framework.css
                
   ========================================================================== */

/* ==========================================================================
   Global
   ========================================================================== */
main { 
   font-family:'Source Sans Pro', Arial, sans-serif; 
   font-size: 1rem;
   color: #3b3b3b;
}

#announce-stripe { display:none !important }

:root {
   --primary-color:#ebf2fb;
   --secondary-color:#1d4176;
   --tertiary-color:#f95e00;
}

:target {
   scroll-margin-top: 70px;
}

/* ==========================================================================
   Shared
   ========================================================================== */
main {
   & img { 
      width: 100%;
   }
   & .wrapper { 
      max-width:1050px; 
      margin: 0 auto;
      padding: 3.125rem 1rem;
   }
   & h2 {
     font-size: 2rem;
     font-weight: 600;
     line-height: 1.23;
     color: #355f9e;
     & b { color: #1d4176; }
   }
   & a {
      font-weight: 600;
      color: #2a7eb9;
      &:hover { color: var(--secondary-color); }
   }
   & li { 
      display:list-item; 
      list-style: disc;
      list-style-position: outside;
      list-style-position: inside;
   }
}

/* Sections
   ========================================================================== */

section:is(.bg-contrast-light, .faq) .wrapper > h2 { 
   margin-top: 1.375rem; 
   margin-bottom: 2rem; 
   text-align: center;
}

/* Buttons
   ========================================================================== */

.btn,
a.btn {
   display: inline-flex;
   padding: .325rem 2.1875rem .33rem 1.9375rem;
   border:1px solid #d10;
   border-radius: 6px;
   color: #fff;
   background: #d10;
   min-width: 160px;
   justify-content: center;
   align-self: center;
   text-align: center;
   padding-block: 5px;
   line-height: 1.61;
   font-size:1.125rem;
   &:hover {
      background: var(--secondary-color);
      border-color: var(--secondary-color);
      color: #fff;
   }
   @media (max-width: 600px) {
      font-size: 1.25rem;
   }
}


/* Backgrounds
   ========================================================================== */
.bg-contrast-light { background-color: #ebf2fb; }

/* Media list / Cards
   ========================================================================== */
.media {
   display: grid;
   grid-template-columns: 1fr .7fr;
   padding: 1.4rem 0 2.5rem;
   background: #fff;
   border-radius: 10px;
   text-align: left;
   & h2 {
      display: grid;
      align-items: center;
      gap: .5rem;
      grid-auto-flow: column;
      justify-content: flex-start;
      @media (max-width: 600px) { display:block; }
   }
   & img { max-width: 356px; }
   & .media__icon-text {
      display: grid;
      grid-template-columns: 1fr;
      grid-column-gap: 1.6875rem;
      & h3 {
         font-size: 1.3125rem;
         line-height: 1.62;
         letter-spacing: -.11px;
         color: #424242;
         margin-bottom: 1.1rem;
      }
      & p { margin-bottom: 1.4375rem;  }
      & p.works-with {
         margin-bottom:.5rem;
      }
      & li {
         list-style-type: disc;
         list-style-position: inside;
      }
   }
   & :is(p,li) {   
      font-size: 1.13rem;
      color: #535353;
      line-height: 1.4;
      & > i {
         color: #636363;
      }
   }
   & div:has(> img) {
      text-align: center;
      padding-top: 1rem;
      align-self: center;
   }
}


p.requires,p.works-with {
    font-style: italic;
    font-weight: 400;
}
p.requires a,p.works-with a {
    font-style: italic;
    font-weight: 400;
}

p.works-with a::after {
   color: #808080;
   content: '\25AA';
   padding-left: 0.375rem;
   padding-right: 0.125rem;
}


/* ==========================================================================
   Header
   ========================================================================== */

main header {
   padding: 0 4.25rem;
   background: #fff;
   text-align: center;
   & .wrapper { 
      padding-top: 3.84rem;
      padding-bottom: 1.8125rem; 
   }
   & h1 {
      font-size: 3.656rem;
      font-weight: 400;
      color: rgb(111, 111, 111);
      line-height: 1.05;
      text-align:center;
      & .wolfram-mcp { 
         color: #454545; 
         font-size: 3.5rem;
         font-weight: 600;
      }
      & .wolfram-engine {
         font-weight: 600;
         color: #d10;
      }
   }
   & h2 {
      font-size: 1.6875rem;
      line-height: 1.07;
      color: #7c7c7c;
      margin-top: 1.1875rem;
      margin-bottom: 2.13rem;
      text-align:center;
   }
}


/* ==========================================================================
   Products pod
   ========================================================================== */
#products {
   & .wrapper { 
      padding-top: 4.75rem;
      padding-bottom: 1.8125rem;
   }
   & p {
      font-size: 1.25rem;
      color: #424242;
      line-height: 1.45;
      font-weight: 400;
      & a {
         font-weight: 400;
         color: var(--secondary-color);
      }
   }
   & h2 {
      font-size: 2.125rem;
      margin-bottom: 1.3rem;
   }
   & h3 {
      font-size: 1.5rem;
      font-weight: 600;
      margin-bottom: 1rem;
      color: #3b5d8f;
      text-align: center;
   }
   & p.requires, & p.works-with {
      font-style: italic;
      font-weight: 400;
      & a {
         font-style: italic;
      }
   }
   & .hero-video { 
      margin-top:2.875rem; 
      margin-bottom: 3.05rem;
      max-width:972px;
      margin-inline: auto;
      display: block;
   }
   & .examples {
      margin-top: 2.625rem;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1.6875rem;
      & video {
         max-width: 460px;
      }
      & div {
        text-align:center;
      }
   }
   & video {
      width: 100%;
      box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
      border-radius: 16px;
   }
}


/* ==========================================================================
   FAQ
   ========================================================================== */
main section.faq {
   & .wrapper { 
      padding-bottom: 1.875rem; 
   }
   & h2 { 
      margin-bottom: 2.6225rem; 
   }
   & h3 { 
      font-size: 1.5rem;
      font-weight: 600;
      color: #0d65a3;
      margin-bottom: 1rem; 
   }
   & h4 {
      font-size: 1.25rem;
      font-weight: 600;
      line-height: 1.33;
      margin-bottom: .375rem;
      color: #222;
   }
   & p, & ul {
      margin-bottom: 1.7rem;
   }
   & div + h3 {
      padding-top: 1.2rem;
   }
}

/* ==========================================================================
   responsive breakpoint styles
   ========================================================================== */

/* styles for large screens (1200px)
   ========================================================================== */

@media all and (max-width: 1200px) {

   /* Header */
   main header {
      & .wrapper {
         padding-inline: 0;
         padding-bottom: 2.625rem;
      }
      & h1, & h1 :is(.wolfram-mcp, .wolfram-engine) { 
         font-size: 3.7rem;  
      }
      & h2 { font-size: 1.65rem;  }
   }
   
   /* Products */
   #products .wrapper {
      padding-top: 2.875rem;
      padding-inline: 2.8rem;
      & > h2 { 
         font-size: 1.78125rem; 
         margin-top: 0;
      }
      & video { width:100% }
   } 

   /* Media List */
   .media > div {
      padding-bottom: 2.8rem;
      grid-template-columns: 1fr min(80%,300px);
   }
   
}

/* styles for medium screens (900px)
   ========================================================================== */

@media all and (max-width: 900px) {

   /* Header 900px */
   main header {
      padding-inline: 2.8rem;
      & .wrapper {
         padding-bottom: 2.625rem;
         padding-inline: 0;
      }
      & h1 {
         /*font-size: 2.34375rem;*/
      }
      & h2 {
         max-width: 640px;
         font-size:1.5rem;
         margin-bottom:1rem;
         margin-inline: auto;
         line-height: 1.2;
      }
      & a { font-size:1.14rem }
   }
   
   /* Products 900px */
   #products .wrapper {
      padding-top: 2.375rem;
      /*padding-inline: 2.8rem;*/
      & > h2 { 
         max-width: 450px;
         margin-inline: auto;
         font-size: 1.5625rem; 
      }
      & p { padding-inline:0; }
   } 
   
   /* media list */
   .media {
      padding-bottom: .75rem;
      & div { padding-bottom: 0; }
      & div:nth-of-type(2) { display:none; }
      & h2 {
         font-size: 2.6rem;
      }
      & :is(h2,h3) { 
         text-align:center; 
      }
      & img { 
         margin-inline: auto;
         max-width: 400px;
      }
   }
   .media { 
      grid-template-columns: 1fr; 
      max-width: 650px;
      margin-inline: auto;
   }

   .media__icon-text h3 { text-align:left; }
   .media__icon-text img { 
      width: 40px; 
      margin-bottom: 1rem;
   }
   
}

/* styles for small screens (700px)
   ========================================================================== */

@media all and (max-width: 700px) {
   main header {
      & h1, & h1 :is(.wolfram-mcp, .wolfram-engine) {
         font-size: 3.1rem;
      }
      & h2 {
         max-width: 640px;
         font-size:1.35rem;
      }
   }
}

/* styles for small screens (600px)
   ========================================================================== */

@media all and (max-width: 600px) {

   /* general 600px */
   main .wrapper { 
      padding-top: 2.1rem; 
      padding-inline: 1rem;
   }
   main section .wrapper h2 { font-size: 1.88rem; }

   /* Header 600px */
   main header {
      padding-inline:2.5rem;
      & h1 {
         font-size: 7vw;
         & :is(.wolfram-mcp, .wolfram-engine) {
            font-size: 7.75vw;
         }
      }
      & h2 { 
         line-height: 1.4;
      }
   }
   
   /* Products 600px */
   #products .wrapper {
      & > h2 {  font-size: 1.6rem;  }
      & p { 
         font-size: 1.2rem;
         line-height: 1.4;
      }
      & .examples { grid-template-columns:1fr }
   } 
      
   /* media list 600px */
   .media {
      grid-template-columns:1fr;
      & h2 { text-align:center; }
      & h3 { text-align: left; }
   }

   main section.faq {
      & h3 {
         font-size: 1.5rem;
      }
      & h4 {
         font-size: 1.3rem;
         line-height: 1.3;
         font-weight: 400;
      }
      & .faq__content { cursor:pointer; }
      & .faq__content > div:not(.open) {
         position: relative;
         &::after {
            content: "";
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 34px;
            background: linear-gradient(to top,#fbfbfb 0%,#ffffffe3 15%,#ffffff52 90%);
            pointer-events: all;
         }
         & p {
            max-height: 60px;
            overflow: hidden;  
         }
      }
      & p {
         color: #636363;
         line-height: 1.25;
         margin-bottom: 1.9rem;     
      }
   }
   
}

/* styles for minimum supported screen width (320px)
   ========================================================================== */

@media all and (max-width: 320px) {}

/* printer styles
   ========================================================================== */

@media print {}