/* PUBLICATIONS (LIST)
--------------------------- */
@media screen {
  @layer base, proactive-tips;
  @layer proactive-tips {

    :root {
      --proactive-tip-list-padding-block: 32px;
      --proactive-tip-margin-top: clamp(20px, calc( 1.125rem + ((1vw - 3px) * 9.6154)), 63px) !important;
      --proactive-tip-page-intro-height: 428px;
      --proactive-tip-scroll-offset: 20px;
    }
    
    @keyframes TIPS-ARROW-MOVE {
      0%, 100% { transform: translate(var(--read-more-arrow-x), var(--read-more-arrow-y)); }
      50% { transform: translate( calc( var(--read-more-arrow-x) + var(--read-more-arrow-offset) ), var(--read-more-arrow-y)); }
    }


    /* Tip List */

    proactive-tips-list {
      display: block;
      margin-inline: auto;
      max-width: var(--theme-max-1460);
      padding-block: var(--proactive-tip-list-padding-block);
    }

    .proactive-tip {
      border: 3px solid var(--theme-mint);
      border-radius: 35px;
      box-sizing: border-box;
      color: var(--theme-black) !important;
      display: block;
      margin-block-start: var(--proactive-tip-margin-top) !important;
      margin-inline: auto;
      padding: 24px;
      text-decoration: none !important;
    }
    .proactive-tip:hover {
      color: var(--theme-black);
    }
    .proactive-tip summary {
      cursor: pointer;
      list-style: none !important;
      padding: 24px;
      position: relative;
    }
    .proactive-tip summary::-webkit-details-marker {
      display: none !important;
    }
    .proactive-tip[open] summary {
      display: none;
    }
    @container main (min-width: 900px) {
      .proactive-tip, .proactive-tip summary {
        align-items: end;
        display: grid;
        column-gap: 60px;
        grid-template-columns: 205px 1fr;
        min-height: 150px;
        padding: 24px 10px 24px 24px;
      }
      .proactive-tip[open] {
        grid-template-columns: 1fr;
      }
      .proactive-tip summary {
        align-items: center;
        column-gap: 62px;
        grid-column: 1 / -1;
        padding-block: 50px;
      }
    }
    @container main (max-width: 899.95px) {
      .proactive-tip, .proactive-tip summary {
        display: flex;
        flex-direction: column;
        min-height: 190px;
      }
      .proactive-tip, .proactive-tip summary, .proactive-tip proactive-tips-details-content {
        padding: 40px 24px calc( 40px + var(--theme-font-size-md) );
      }
    }
    
    /* Proactive Tips Logo */
    @container main (max-width: 899.95px) {
      .proactive-tip summary picture,
      .proactive-tip > svg {
        align-self: center;
        margin-block-end: var(--theme-font-size-xlg);
      }
    }
    .proactive-tip summary proactive-tip-placeholder,
    .proactive-tip summary picture {
      border-radius: 50%;
      display: flex;
      height: 172px;
      margin-inline-start: auto;
      overflow: hidden;
      width: 172px;
    }
    @container main (max-width: 899.95px) {
      .proactive-tip summary proactive-tip-placeholder,
      .proactive-tip summary picture {
        margin-inline: auto;
      }
    }
    .proactive-tip summary proactive-tip-placeholder img,
    .proactive-tip summary picture img {
      max-width: unset;
      object-fit: cover;
    }
    .proactive-tip proactive-tip-placeholder {
      background-color: var(--theme-powder);
      border: 1px solid color-mix(in srgb, var(--theme-powder) 95%, black);
      border-radius: 50%;
    }
    
    /* Tip Content */
    .proactive-tip proactive-tips-content {
      display: block;
    }
    .proactive-tip proactive-tips-content h2, 
    .proactive-tip proactive-tips-content .h2 {
      font-size: var(--theme-font-size-lg);
    }
    .proactive-tip proactive-tips-content .list {
      display: none;
    }
    
    .proactive-tip proactive-tips-content p,
    .proactive-tip proactive-tips-summary-content p {
      margin: 0;
      max-width: 1010px;
    }
    @container main (min-width: 900px) {
      .proactive-tip proactive-tips-content p,
      .proactive-tip proactive-tips-summary-content p {
        grid-column: 2;
        grid-row: 2;
      }
    }
    .proactive-tip proactive-tips-content p .read-more,
    .proactive-tip proactive-tips-summary-content p .read-more {
      display: inline-block;
      transform: translate(2px, 0);
    }
    @container main (max-width: 899.95px) {
      .proactive-tip proactive-tips-content p .read-more,
      .proactive-tip proactive-tips-summary-content p .read-more {
        display: block;
        transform: translate(2px, var(--theme-font-size-md));
      }
    }
    .proactive-tip proactive-tips-content p .read-more svg,
    .proactive-tip proactive-tips-summary-content p .read-more svg {
      height: clamp(16px, calc( 1rem + ((1vw - 3px) * 1.7094)), 22px);
      width: clamp(15px, calc( 0.9375rem + ((1vw - 3px) * 1.7094)), 21px);
      transform: translate(var(--read-more-arrow-x), var(--read-more-arrow-y));
    }
    
    /* Summary Content */
    .proactive-tip proactive-tips-summary-content {
      display: block;
    }
    
    /* Details Content */
    .proactive-tip proactive-tips-details-content {
      display: block;
      padding: clamp(60px, calc( 3.75rem + ((1vw - 3px) * 2.7624)), 80px) clamp(24px, calc( 1.5rem + ((1vw - 7.68px) * 12.9630)), 80px) 50px;
      
      & > picture {
        @container main (min-width: 900px) {
          float: left;
          margin: 0 58px 38px 0;
          max-width: clamp(400px, calc(25rem + ((1vw - 9px) * 48.3333)), 545px);
        }
        @container main (max-width: 899.95px) {
          margin: 0 0 var(--theme-margin-md);
        }
      }
    
      p + h3,
      ul + h3 {
        margin-block-start: var(--theme-margin-sm);
      }
      h3 + p {
        margin-block-start: 0;
      }
    
      table {
        margin-block-start: var(--theme-margin-lg);
      }
    
      table {
        @container main (max-width: 899.95px) {
          &, thead, tbody, tfoot, tr, th, td {
            display: block;
          }
        }
    
        &.img {
          @container main (min-width: 900px) {
            tr > td:first-child {
              padding-inline-end: clamp(60px, calc( 3.75rem + ((1vw - 9px) * 20.0000)), 120px);
              width: clamp(400px, calc( 25rem + ((1vw - 9px) * 29.3333)), 488px);
    
              img {
                height: auto;
                width: 100%;
              }
            }
          }
        }
        @container main (max-width: 899.95px) {
          img {
            margin-block-end: var(--theme-margin-md);
          }
        }
      }
    
      p + .btn {
        margin-block-start: var(--theme-margin-md);
      }
    
      ul {
        margin-block-end: 24px !important;
        padding-inline-start: 24px;
    
        ul {
          padding-block-start: 24px;
    
          li:before {
            background-color: transparent;
            border: 1px solid;
          }
        }
      }
    
    }
    
    .proactive-tip summary .read-more {
      text-decoration: none !important;
      text-underline-offset: 2px;
    }
    .proactive-tip:hover .read-more {
      text-decoration: underline !important;
      text-underline-offset: 2px;
      
      svg {
        animation: TIPS-ARROW-MOVE .75s forwards;
      }
    }
    .proactive-tip:hover summary .read-more {
      text-decoration: underline !important;
    }


    a.proactive-tip {
      max-width: 1274px;
    }
    
    
    details.proactive-tip {
      padding: 0;
      position: relative;
      /* All tips but the first. See that code below */
      scroll-margin: calc( var(--theme-header-height) + var(--proactive-tip-list-padding-block) - var(--proactive-tip-scroll-offset) ) !important;
    }
    @container main (max-width: 899.95px) {
      details.proactive-tip {
        margin-inline: auto;
        max-width: 500px;
      }
    }
    details.proactive-tip h2, 
    details.proactive-tip .h2 {
      font-size: var(--theme-font-size-xlg);
    }
    details.proactive-tip :is(summary .toggle, & > .toggle) {
      background: transparent;
      border: 0;
      cursor: pointer;
      height: 48px;
      position: absolute;
      top: 0;
      right: 0;
      width: 48px;
    }
    details.proactive-tip :is(summary .toggle, & > .toggle):before,
    details.proactive-tip :is(summary .toggle, & > .toggle):after {
      background-color: var(--theme-green);
      content: '';
      display: block;
      position: absolute;
    }
    details.proactive-tip :is(summary .toggle, & > .toggle):before {
      height: 8px;
      left: 0;
      top: 20px;
      width: 22px;
    }
    details.proactive-tip :is(summary .toggle, & > .toggle):after {
      height: 22px;
      left: 7px;
      top: 13px;
      width: 8px;
    }

    details.proactive-tip [open] > .toggle:after {
      display: none;
    }

    proactive-tips-list details.proactive-tip:first-of-type {
      scroll-margin: calc( var(--theme-header-height) + var(--proactive-tip-list-padding-block) ) !important;
    }
    .editor-styles-wrapper .proactive-tip {
      pointer-events: none;
    }
    .editor-styles-wrapper .proactive-tip summary picture {
      margin: 0 0 20px !important;
    }
 
  }
}

@media print {

  /* List Page */
  proactive-tips-list {
    display: block;

    details {
      page-break-after: always;
    } 
    details:last-of-type {
      page-break-after: unset;
    }

    summary {
      display: none;
    } 

    proactive-tips-details-content {
      img {
        max-width: 250px;
      }
    }

    button {
      display: none;
    }
  }

  /* Individual Page Tip (trigger) */
  .proactive-tip {
    color: var(--theme-black);
    margin-block: 20px;
    text-decoration: none;

    .read-more {
      display: none;
    }

    svg {
      height: auto;
      width: 100px;
    }
  }

}