@import url("/assets/fonts/Inter/Inter.css");
@import url("/assets/fonts/Bitter/Bitter.css");

:root {
  color-scheme: light dark;

  --body-font:  "Bitter", serif;
  --heading-font: "Bitter", serif;
  /* --base-font-size: 125%; /* 20px */
  --base-font-size: 112.5%; /* 18px */

  --text-color: light-dark(#333b3c, #DADCDE);
  --text-color-strong: light-dark(oklch(0 0 0 / 1), oklch(1 0 0 / 1));
  --text-color-highlight: light-dark(oklch(1 0 0 / 1), oklch(0 0 0 / 1));
  --text-color-heading: light-dark(#22b3c6, #91e5f0);
  --text-section-heading: light-dark(oklch(0 0 0 / 1), oklch(0.8 0 0 / 1));
  
  /* --border-color: light-dark(oklch(0 0 0 / 0.1), oklch(1 0 0 / 0.08)); */
  --border-color: light-dark(#d5e5e5, #2a3443);
  --border-radius: 0.8rem;
  
  --rad-center-dark: oklch(from #4A5769 calc(l / 1.6) c h);
  --rad-outer-dark: oklch(from #4A5769 calc(l / 1.9) c h);
  --rad-center-light: oklch(from #ffffff l c h);
  --rad-outer-light: oklch(from #22b3c6 calc(l*2) calc(c * 0.4) h);

  --page-background: linear-gradient(
        -45deg, 
        light-dark(
            var(--rad-center-light),
            var(--rad-center-dark)
        ) 50%,
        light-dark(
            var(--rad-outer-light),
            var(--rad-outer-dark)
        ) 100%
  );

  
  --highlight-background-color: light-dark(#22b3c6, #25a0b1);
  --highlight-background: light-dark(oklch(from var(--highlight-background-color) l c h / 0.1), #00000020);

  --highlight-background: light-dark(oklch(0.97 0.02 206.45), oklch(0.24 0.03 259.07));

  --content-padding: 25px;
  --content-gutter: 50px;

  /* --line-length: 55rem; */
  --line-length: 72ch;
  --main-grid-columns: [edge-start] var(--content-gutter) [gutter-start] 1fr [text-start] minmax(280px, var(--line-length))  [text-end] 1fr [gutter-end] var(--content-gutter) [edge-end];
}

html {
  font-family: var(--body-font);
  font-size: var(--base-font-size);
  color: var(--text-color);
}

body {
  min-height: 100vh;
  /* font-size: 1.0625rem; */
  background-color: var(--page-background-color);
  background: var(--page-background);
  background-attachment: fixed; /* This makes the background fixed */
  background-size: cover; /* Ensures the gradient covers the entire viewport */
  margin:0; padding:0;
}


@media (max-width: 1220px) { 
    :root {
        --content-gutter: 25px;
        --base-font-size: 112.5%; /* 18px */
    }
    main {
        padding-top: 70px;
    }
}


/****************************
 * Universal content styles *
 ***************************/

h1 { font-size: 2.986rem; margin-top: 50px; font-family: var(--heading-font); color: var(--text-color-heading); }
h2 { font-size: 2.488rem; margin-top: 50px; font-family: var(--heading-font); color: var(--text-color-heading); }
h3 { font-size: 2.074rem; font-family: var(--heading-font); color: var(--text-color-heading); }
h4 { font-size: 1.728rem; font-family: var(--heading-font); color: var(--text-color-heading); }
h5 { font-size: 1.44rem; font-family: var(--heading-font); }
h6 { font-size: 1.2rem; font-family: var(--heading-font); }
p { /*font-size: 1.11112rem;*/  line-height: 1.8; margin-block-start: 1.5rem; margin-block-end: 1.5rem; }
dt { line-height: 1.8; margin-block-start: 0.8rem; margin-block-end: 0.8rem; }
dd { line-height: 1.4; }
small { font-size: 0.833rem;  }
li { margin-bottom: 0.8rem; line-height: 1.8; }

strong { color: var(--text-color-strong) }
code { font-size: 14px; }
p code, figcaption code { background-color: light-dark(rgba(0, 0, 0, 0.063), rgba(255, 255, 255, 0.063)); padding: 0.2em; }

a.cta {
    color: var(--text-color-highlight);
    background-color: var(--highlight-background-color); 
    border: 0; 
    border-radius: 8px; 
    padding: 0.5rem 1.3rem 0.5rem 1.5rem;
    margin: 1rem 0;

    text-decoration: none;
    font-family: var(--body-font);
    font-size: 1rem; 
    font-weight: 600; 
    
    display: inline-grid;
    grid-template-columns: auto 20px;
    align-items: center;
    gap: 0.3rem;
    
}

a.cta::after {
  content: url("/assets/images/chevron-black.svg");
  /* You may need to add display: inline-block, width, and height */
  display: inline-block;
  width: 15px;
  height: 15px;
  position: relative;
  top: -2px;
}

ins { text-decoration: none; }

figure { align-items: center; }
figure img { max-width: 100%; display: block; margin-left: auto; margin-right: auto; }
figcaption { text-align: center; padding: 2rem; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-color-scheme: dark) {
  .dark-only { display: block; }
  .light-only { display: none; }
}
@media (prefers-color-scheme: light) {
  .dark-only { display: none; }
  .light-only { display: block; }
}



/*********************
 * SHOW / HIDE EDITS *
 ********************/


[data-diff=diff] {
    del { 
        color: oklch(from var(--text-color) l c h / 0.7); 
        text-decoration-color: #800000;
    }
    ins { 
        text-decoration: none; 
        background-color: oklch(77.636% 0.17048 110.928 / 0.1); 

        corner-shape: squircle;
        border-radius: 50% / 1.1rem 0.5rem 0.9rem 0.7rem;
        box-decoration-break: clone;
    }
    del, ins { padding: 0.2em 0.2em; }
}

[data-diff=wc] {
    del { display: none; }
}

[data-diff=react] {
    del { text-decoration: none; }
    ins { display: none; }
}



/**********
 * LAYOUT *
 **********/

main {
    display: grid;
    grid-template-columns: var(--main-grid-columns);
}

main > section {
    grid-column: edge-start / edge-end;
    display: grid;
    grid-template-columns: subgrid;
}

main > *, main > section > * { 
    grid-column: text-start / text-end; 
    /* margin-top: 0;
    margin-bottom: 2rem; */
}

.wider { 
    grid-column: gutter-start / gutter-end;
}

.full-width {
    grid-column: edge-start / edge-end;
    margin-bottom: 0;
}

main > *, main > section > p { margin-top: 0.75em; margin-bottom: 0.75em; }





section + section { 
    border-top: 1px solid var(--border-color); 
    margin-top: 3rem; 
}



/************************
 *   SWITCHER & INTRO   *
 ***********************/

diff-switcher {
    grid-column: edge-start / edge-end; 

    display: block;
    margin: 0;
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--highlight-background);
}

intro-block { 
    background-color: var(--highlight-background); 
    grid-column: edge-start / edge-end; 
    
    display: grid; 
    grid-template-columns: var(--main-grid-columns);
    margin: 0;
    
}
intro-block > p { 
    grid-column: text-start / text-end; 
}



/************
 *   CARD   *
 ***********/
.card {
    background: var(--highlight-background);
    border-radius: var(--border-radius);
    --card-padding: calc(var(--content-padding) * 1.8);
}

.card:first-child { margin-top: 0; }
.card:last-child { margin-bottom: 0; }

.card > *:first-child { margin-top: 0; margin-top: var(--card-padding); }
.card > *:last-child { margin-bottom: 0; margin-bottom: var(--card-padding); }


main > .card, section > .card {
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.card p, .card h2, .card h3, .card ul, .card button, .card a.cta, .card dl {
    margin-left: var(--card-padding); 
    margin-right: var(--card-padding); 
}

.card h2, .card h3 {
    margin-bottom: 1rem;
}
.card ul {
    margin-left: 1.2rem;
}
.card li {
    margin-bottom: 0.8rem;
}

.card code-mirror { 
    background-color: transparent;
    margin-left: calc(var(--card-padding) - 16px); 
    margin-right: calc(var(--card-padding) - 16px); 
}

.card-note h2, .card-note h3, .card-editor-note h2, .card-editor-note h3 {
    font-size: 130%;
    display: grid;
    grid-template-columns: 24px auto;
    gap: 10px;
    align-items: center;
}

.card-note h2 svg, .card-note h3 svg, .card-editor-note h2 svg, .card-editor-note h3 svg { 
    display: block; 
    width: 24px;
    height: 24px;
}

[data-diff=react] .card-editor-note { display: none;}
.card-editor-note {
    --offset: -110;
    background: oklch(from var(--highlight-background) l c calc(h + var(--offset)));
    h2, h3 {
        color: oklch(from var(--text-color-heading) l c calc(h + var(--offset)));
    }
}

.highlight-block {
    background: var(--highlight-background);
}



/*******************
 *   CODE BLOCKS   *
 ******************/

switcher-panel + switcher-panel {
    margin-top: 0;
}

code-mirror {
    background: var(--highlight-background);
    border-radius: var(--border-radius);
    margin: 1rem 0;
}

code-preview {
    background: var(--highlight-background);
    border-radius: var(--border-radius);
    margin: 1rem 0;
}

code-ide {
    display: block;
    margin: 1rem 0;
}

code-ide > code-mirror {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
}