/* localhost, admin always shows cookie bar so hiding on this page for testing */
/* [data-pagename="reflectance-calculator"] #onetrust-consent-sdk {
  display: none !important;
} */

/* Header Logo */
body header .logo-plus {
  fill: #aa1dd5;
}
body header .no-instruments { 
  display: none; 
}

/* KLA Instruments Nav */
@layer instruments-nav {
  .space-wrapper {
    margin-block-end: 1rem;
    min-height: 43px;
  }
  .identifier {
    font-size: 17px;
  }
  .separator {
    margin: 0 2rem;
  }
  .secondary-nav .active .separator {
    color: #fff;
  }
  .secondary-nav-wrapper {
    z-index: 2;
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
  }
  .secondary-nav-wrapper .inner {
    max-width: unset !important;
    padding: 0 !important;
  }
  .secondary-nav {
    background-color: #41007f;
    padding: 1.5rem 2rem;
    position: relative;
    z-index: 1;
  }
  .secondary-nav.active .nav-content {
    max-height: 100vh;
  }
  .secondary-nav.active .toggler {
    transform: rotate(180deg);
  }
  .secondary-nav .select {
    margin-top: 2rem;
  }
  .secondary-nav select {
    background-color: transparent;
    border: 1px solid #9166b4;
    color: white;
    font-family: "OpenSans-SemiBold", sans-serif;
    margin-bottom: 0;
    padding: 1rem;
  }
  [lang="ko"] .secondary-nav select {
    font-family: "NotoSans-Bold", sans-serif;
  }
  .secondary-nav select option {
    color: #0c0c12;
  }
  .secondary-nav .select:after {
    content: url("../../images/icons/arrow-down-violet.svg");
  }
  .btn--tertiary.external:after {
    content: url("../../images/icons/external-light.svg");
    opacity: 0.5;
    display: inline-block;
  }
  .secondary-nav nav a,
  .secondary-nav nav a:visited:not(.active) {
    color: white !important;
    font-family: "OpenSans-SemiBold", sans-serif;
  }
  [lang="ko"] .secondary-nav nav a:visited:not(.active) {
    font-family: "NotoSans-Bold", sans-serif;
  }
  .secondary-nav nav a:not(:last-of-type),
  .secondary-nav nav div:first-of-type {
    margin-bottom: 2rem;
  }
  .secondary-nav nav {
    margin: 4rem 0;
  }
  .secondary-nav nav a:hover {
    opacity: 0.5;
    color: white;
  }
  .secondary-nav .active,
  .secondary-nav a.active :visited {
    color: #aa1dd5;
  }
  .secondary-nav nav a:first-of-type:after {
    top: 0;
  }

  /* MIN */

  @media only screen and (min-width: 768px) {
    .space-wrapper {
      min-height: 52px;
    }
    .secondary-nav {
      padding: 1.5rem;
    }
    .secondary-nav .select {
      margin-top: 0;
      min-width: 18rem;
    }
    .secondary-nav nav a:not(:first-of-type) {
      margin-left: 2rem;
    }
    .secondary-nav nav a:not(:last-of-type),
    .secondary-nav nav div:first-of-type {
      margin-bottom: 0;
    }
    .secondary-nav nav {
      margin: 0;
      margin-right: auto;
      align-items: center;
    }
    .secondary-nav .btn {
      flex-basis: auto;
      margin: 0 0 0 2rem;
      white-space: nowrap;
    }
  }

  @media only screen and (min-width: 1024px) {
    .space-wrapper {
      margin-block-end: 0;
      min-height: 62px;
    }
    .secondary-nav {
      padding: 2rem;
    }
    .secondary-nav .select {
      min-width: 22rem;
    }
  }

  @media only screen and (min-width: 1480px) {
    .secondary-nav .select {
      min-width: 30rem;
    }
    .secondary-nav select {
      padding: 1.5rem 2rem;
    }
  }

  /* MAX */

  @media only screen and (max-width: 767px) {
    .separator {
      display: none;
    }
    .secondary-nav .btn {
      text-align: center;
    }
    #instruments-subnav-toggle + label + div {
      align-items: stretch;
    }
    #instruments-subnav-toggle:not(:checked) + label + div {
      max-height: 0;
      overflow: hidden;
      pointer-events: none;
    }
    #instruments-subnav-toggle:checked + label svg {
      transform: rotate(0.5turn);
      transform-origin: center;
    }
  }
}

/* Reflectance Calculator */
@layer reflectance-calculator {

  :root {
    --refcalc-padding: clamp(20px, calc( 1.25rem + ((1vw - 3px) * 6.4103)), 50px);
  }
  
  /* Parent styles */
  @layer base {
    reflectance-calculator {
      background: white;
      box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15);
      container: refcalc / inline-size;
      display: grid;
      grid-template-areas: "controls" "content";
      grid-template-columns: 1fr;
    }
    reflectance-calculator input[type="number"] {
      background-color: #fff;
      border: 1px solid #b6b6b7;
      box-sizing: border-box;
      font-size: 1.6rem;
      padding-inline: 5px;
      text-align: center;
    }
    @media (min-width: 1480px) {
      reflectance-calculator {
        grid-template-areas: "content controls";
        grid-template-columns: 2fr 1fr;
      }
    }
  }

  /* Leadin Section */
  @layer leadin {
    refcalc-leadin {
      background: rgba(219, 219, 220, 0.5);
      box-sizing: border-box;
      grid-area: controls;
      padding: var(--refcalc-padding);
    }
    refcalc-leadin h1 {
      font-family: 'OpenSans-SemiBold', sans-serif;
      font-size: 3.0rem !important;
      font-style: normal;
      font-weight: 700 !important;
      line-height: 1.4 !important;
      margin-block-end: 2.0rem !important;
    }
    refcalc-leadin h1 sup {
      display: inline-block;
      font-size: 55%;
      line-height: 1;
    }
    refcalc-leadin form {
      display: grid;
      gap: 20px;
      grid-template-columns: 1fr;
      opacity: 0;
      transition: opacity .3s;
    }
    reflectance-calculator[init] refcalc-leadin form {
      opacity: 1;
    }
    refcalc-leadin fieldset {
      border: 0;
      padding: 0;
    }
    refcalc-leadin fieldset + fieldset {
      margin-block-start: 1rem;
    }
    refcalc-leadin field-group {
      display: block;
    }
    refcalc-leadin legend,
    refcalc-leadin field-group label {
      color: black;
      font-family: 'OpenSans-Bold', sans-serif;
      font-weight: 500;
      margin-block-end: 7px;
    }
    refcalc-leadin ul {
      display: flex;
      column-gap: 1.8rem;
      list-style: none;
      margin: 4px 0 0 !important;
      padding: 0;
      row-gap: 1.0rem;
    }
    refcalc-leadin label {
      position: relative;
    }
    refcalc-leadin field-group label {
      display: block;
    }
    refcalc-leadin label:has(input) {
      cursor: pointer;
      display: flex;
    }
    refcalc-leadin label:has(input[type="radio"]):before,
    refcalc-leadin label:has(input[type="radio"]):after {
      border-radius: 50%;
      content: '';
      display: block;
      pointer-events: none;
      position: absolute;
    }
    refcalc-leadin label:has(input[type="radio"]:checked):before {
      background-color: #41007f;
      height: 1.0rem;
      inset: 5px auto auto 5px;
      width: 1.0rem;
      z-index: 1;
    }
    refcalc-leadin label:has(input[type="radio"]):after {
      background-color: #fff;
      border: 1px solid #b6b6b7;
      height: 2.0rem;
      inset: 0 auto auto 0;
      width: 2.0rem;
    }
    refcalc-leadin label:has(input[type="radio"]:focus-visible):after {
      box-shadow: 0 0 0 1.5px blue;
    }
    refcalc-leadin input[type="radio"] {
      cursor: pointer;
      margin-inline-end: 5px;
      opacity: 0;
      width: 2.0rem;
    }
    refcalc-leadin input[type="number"] {
      height: 4.0rem;
      width: 7.0rem;
    }
    refcalc-leadin input[type="number"]::-webkit-inner-spin-button, 
    refcalc-leadin input[type="number"]::-webkit-outer-spin-button {  
      opacity: 1;
    }
    refcalc-leadin field-group span {
      column-gap: 1rem;
      display: flex;
      place-items: center;
    }

    /* Plot Options */
    [data-type="plot-options"] {
      display: grid;
      gap: 20px;
      max-width: 700px;
    }

    /* Buttons */
    field-buttons {
      display: flex;
      gap: 20px;
    }
    field-buttons button {
      background: #aa1dd5 !important;
      cursor: pointer;
      margin: 3rem 0 0 !important;
    }
    field-buttons button:hover {
      background: color-mix(in srgb, #aa1dd5 88%, black) !important;
    }

    /* No Js */
    refcalc-layer-error,
    refcalc-layer-plotting,
    reflectance-calculator-nojs {
      background: color-mix(in srgb, crimson 5%, white);
      border: 1px solid crimson;
      border-radius: 8px;
      box-sizing: border-box;
      color: crimson;
      display: flex;
      height: 50px;
      inset: 206px auto auto 50%;
      padding-inline: 10px;
      place-content: center;
      place-items: center;
      position: absolute;
      transform: translate(-50%, -50%);
      width: 70%;
    }

    @container refcalc (min-width: 30rem) {
      [data-type="plot-options"] {
        display: grid;
        column-gap: 20px;
        row-gap: 25px;
        grid-template-columns: repeat(2, 1fr);
        max-width: 400px;
      }
    }

    @media (min-width: 1390px) {
      field-buttons {
        display: flex;
      }
      refcalc-layer + field-buttons {
        display: none;
      }
    }

    @container refcalc (max-width: 1389.95px) {
      field-buttons {
        display: none;
      }
      refcalc-layer + field-buttons {
        display: flex;
      }
    }

    @container refcalc (max-width: 45rem) {
      refcalc-leadin ul {
        flex-direction: column;
      }
    }
    @container refcalc (max-width: 29.9rem) {
      refcalc-leadin input[type="number"] {
        width: 100%;
      }
      [data-type="plot-options"] {
        grid-template-columns: 1fr;
      }
    }
  }

  /* Content Section */
  @layer content {
    refcalc-content {
      background: #fff;
      box-sizing: border-box;
      display: grid;
      grid-area: content;
      grid-template-rows: 1fr auto;
      padding: var(--refcalc-padding);
      position: relative;
    }
  }

  /* Chart Section */
  @layer content.chart {
    refcalc-chart {
      display: block;
      opacity: 0;
      position: relative;
      transition: opacity .3s;
    }
    reflectance-calculator[init] refcalc-chart {
      opacity: 1;
    }
    /* Chart Render */
    refcalc-chart-render {
      display: block;
      height: 475px;
      width: 100%;
    }

    /* Plotting points / loading */
    refcalc-layer-plotting {
      background: color-mix(in srgb, green 5%, white);
      border: 1px solid green;
      color: green;
      opacity: 1;
      transition: opacity .3s;
    }
    refcalc-layer-plotting[hidden] {
      opacity: 0;
      pointer-events: none;
    }

    /* Error */
    refcalc-layer-error,
    refcalc-layer-plotting[hidden] + refcalc-layer-error {
      opacity: 1;
      transition: opacity .3s;
    }
    refcalc-layer-plotting + refcalc-layer-error,
    refcalc-layer-error[hidden] {
      opacity: 0;
      pointer-events: none;
    }
  }

  /* Layers Section */
  @layer content.layer {
    :root {
      --refcalc-layer-td-padding: 10px 20px;
    }
    refcalc-layer {
      opacity: 0;
      transition: opacity .3s;
    }
    reflectance-calculator[init] refcalc-layer {
      opacity: 1;
    }
    refcalc-layer table {
      min-width: 605px;
    }
    refcalc-layer field-select {
      position: relative;
    }
    refcalc-layer td field-select {
      display: block;
    }
    refcalc-layer select {
      appearance: none;
      background-color: #fff;
      border: 1px solid #b6b6b7;
      font-size: 1.6rem;
      height: 30px;
      padding-inline: 10px 23px;
    }
    refcalc-layer td field-select select {
      width: 100%;
    }
    refcalc-layer field-select::before {
      background: url('/wp-content/themes/kla-wp/assets/images/arrow-down-grey.svg') no-repeat center;
      content: '';
      display: block;
      height: 8px;
      inset: 50% 5px auto auto;
      pointer-events: none;
      position: absolute;
      transform: translateY(calc( -50% + 1px ));
      width: 13px;
    }
    refcalc-layer table {
      border: 0;
      border-spacing: 0;
      width: 100%;
    }
    refcalc-layer th,
    refcalc-layer td {
      box-sizing: border-box;
      height: 50px;
      padding: var(--refcalc-layer-td-padding);
      text-align: left;
    }
    refcalc-layer th {
      background-color: #41007f;
      color: white;
    }
    refcalc-layer th select {
      background-color: #aa1dd5;
      border: 0;
      color: white;
      margin-inline-start: 4px;
    }
    refcalc-layer th field-select::before {
      background-image: url('../../images/icons/arrow-down-white.svg');
    }
    refcalc-layer td {
      font-family: 'OpenSans-SemiBold', sans-serif;
      font-weight: 500;
    }
    refcalc-layer tr:nth-of-type(2n) td {
      background-color: #ededed;
    }
    refcalc-layer td:has(table) {
      padding: 0;
    }
    refcalc-layer td:has(field-group) {
      padding: 0 !important;
    }
    refcalc-layer field-group {
      display: block;
      padding: var(--refcalc-layer-td-padding);
      position: relative;
    }
    refcalc-layer [data-calc="new-layers"] field-group[type="space-between"] {
      display: flex;
      place-content: space-between;
      place-items: center;
    }
    refcalc-layer [data-calc="new-layers"] field-group[type="space-between"] span {
      padding-inline: 6px;
    }
    refcalc-layer button * {
      pointer-events: none;
    }
    refcalc-layer [data-calc="add"] {
      background-color: #aa1dd5 !important;
      box-sizing: border-box;
      cursor: pointer;
      display: flex !important;
      font-family: 'OpenSans-SemiBold', sans-serif;
      font-size: 1.4rem !important;
      font-weight: 200 !important;
      height: 2.0rem;
      inset: 100% auto auto 0;
      line-height: 1 !important;
      margin: 0 !important;
      padding: 0 !important;
      place-content: center;
      place-items: center;
      position: absolute;
      text-transform: uppercase;
      transform: translate(-26px, -4px);
      width: 3.8rem;
    }
    refcalc-layer [data-calc="close"] {
      background-color: transparent !important;
      box-sizing: border-box;
      cursor: pointer;
      display: inline-flex !important;
      height: 2.4rem;
      margin: 0 !important;
      padding: 0 !important;
      place-content: center;
      place-items: center;
      width: 2.4rem;
    }
    refcalc-layer input[type="number"] {
      height: 3.0rem;
      text-align: right;
      width: 7.0rem;
    }
    
    @container refcalc (max-width: 47.996875rem) {
      refcalc-layer [data-calc="add"] {
        transform: translate(calc( -1 * clamp(10px, calc( 0.625rem + ((1vw - 3px) * 2.9979)), 24px) ), -4px);
      }
    }
    @container refcalc (max-width: 659.95px) {
      refcalc-layer {  
        overflow-x: auto;
        overflow-y: visible;
        max-width: 100%;
        padding-block-end: 20px;
        padding-inline-start: var(--refcalc-padding);
        transform: translateX( calc( -1 * var(--refcalc-padding) ) );
      }
      refcalc-layer [data-calc="add"] {
        transform: translate(-10px, -4px);
      }
    }

  }










  section.calculator {
    background: white;
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-wrap: wrap;
  }
  section.calculator > div {
    padding: 50px;
  }
  section.calculator div.graph-and-table {
    flex-basis: 66%;
    flex-grow: 1;
    flex-shrink: 0;
  }
  section.calculator div.graph img {
    width: 100%;
  }
  section.calculator table.layer-table {
    border-collapse: collapse;
    border-spacing: 0;
    table-layout: auto;
    width: 100%;
  }
  section.calculator table.layer-table td {
    padding-block: 10px;
  }
  section.calculator table.layer-table td:first-of-type {
    padding-inline-start: 20px;
  }
  section.calculator table.layer-table thead tr {
    background: #41007F;
    color: white;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 1.87;
  }
  section.calculator table.layer-table tbody tr:nth-of-type(2n) {
    background: rgba(219, 219, 220, 0.5);
  }


  section.calculator div.settings {
    background: rgba(219, 219, 220, 0.5);
    flex-basis: 34%;
    flex-grow: 1;
    flex-shrink: 0;
  }
  section.calculator div.settings h1{
    font-size: 30px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.16;
    margin-block-end: 20px;
  }

}

/* Reflectance Index Dialog */
@layer reflectance-index-dialog {
  [data-calc="reflectance-index-dialog"] {
    border: 1px solid #b6b6b7;
    border-radius: 6px;
    box-sizing: border-box;
    margin-inline: 2rem;
    max-width: 800px;
    padding: 2rem;
  }
  [data-calc="reflectance-index-dialog"]::backdrop {
    background: rgba(0 0 0 / 40%);
  }
  [data-calc="reflectance-index-dialog"] p {
    font-size: 25px !important;
    font-weight: 600;
    line-height: 1.3 !important;
    text-align: center !important;
  }
  refractive-index-field {
    display: flex;
    flex-direction: column;
    place-items: center;
  }
  refractive-index-field input[type="number"] {
    font-size: 1.6rem;
    height: 3.0rem;
    margin-block-start: 6px;
    text-align: right;
    width: 7.0rem;
  }
  refractive-index-field input[type="number"]::-webkit-inner-spin-button, 
  refractive-index-field input[type="number"]::-webkit-outer-spin-button {  
    margin-inline-start: 10px;
    opacity: 1;
  }
  refractive-index-buttons {
    display: flex;
    gap: 1.0rem;
    margin-block-start: 3.0rem;
    place-content: center;
    place-items: center;
    
  }
  refractive-index-buttons button {
    background-color: #aa1dd5 !important;
    cursor: pointer;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 12px 15px !important;
  }
  refractive-index-buttons button:hover {
    background: color-mix(in srgb, #aa1dd5 88%, black) !important;
  }

  @media screen and (min-width: 864px) {
    [data-calc="reflectance-index-dialog"] {
      margin-inline: auto;
    }
  }
}

/* CTA */
@layer cta {
  kla-cta {
    background-color: #41007f;
    box-sizing: border-box;
    color: #fff !important;
    display: grid;
    margin-block-start: 50px;
    padding: clamp(24px, calc( 1.5rem + ((1vw - 3px) * 5.5556)), 50px);
    row-gap: 100px;
  }
  kla-cta h2 {
    color: #fff !important;
  }
  kla-cta div :last-child {
    margin-block-end: 0 !important;
  }
  kla-cta .btn {
    background: #aa1dd5 !important;
    cursor: pointer;
    margin: 0 !important;
  }
  kla-cta .btn:hover {
    background: color-mix(in srgb, #aa1dd5 88%, black) !important;
  }
  @media (min-width: 500px) {
    kla-cta {
      column-gap: 100px;
      grid-template-columns: 1fr 200px;
      place-items: center;
      row-gap: 0;
    }
  }
}

/* Footer */
@layer footer {
  @media only screen and (min-width: 768px) {
    .primary-footer {
      background: url('/wp-content/themes/kla-wp/assets/images/footer/footer-pattern.png'), linear-gradient(to right, #41007f, #aa1dd5) !important;
    }
    .primary-footer .logo g > rect {
      fill: #aa1dd5;
    }
  }
}