/* Fonts */
@font-face {
  font-family: 'Century Gothic';
  src: url(https://overstockla.com/assets/fonts/CenturyGothic-Regular.ttf);
}

/* Track home graphic progress */
@property --timer {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

@property --color-a {
  syntax: '<color>';
  inherits: false;
  initial-value: red;
}

@property --color-b {
  syntax: '<color>';
  inherits: false;
  initial-value: black;
}

:root {
  font-family: Arial, Helvetica, sans-serif;

  --gray-1: hsl(220, 10%, 96%);
  --gray-2: hsl(220, 10%, 92%);
  --gray-3: hsl(220, 10%, 85%);
  --gray-4: hsl(220, 10%, 70%);
  --gray-5: hsl(220, 10%, 50%);
  --gray-6: hsl(220, 10%, 30%);
  --gray-7: hsl(220, 10%, 20%);
  --gray-8: hsl(220, 10%, 10%);

  --c-green: rgba(170, 255, 204, var(--opacity, 1)); /* #aaffcc; */
  --c-yellow: rgba(255, 248, 208, var(--opacity, 1)); /* #fffd80; */
  --c-orange: rgba(255, 212, 0, var(--opacity, 1)); /* #ffd400; */
  --c-pink: rgba(255, 136, 170, var(--opacity, 1)); /* #ff88aa; */
  --c-red: hsl(0, 80%, 40%); /* #ff88aa; */
  --c-purple: rgba(153, 85, 153, var(--opacity, 1)); /* #99ff99; */
  --c-dark-purple: hsl(295, 100%, 10%);
  --c-blue: rgba(187, 204, 255, var(--opacity, 1)); /* #bbccff; */
  --c-navy: rgba(0, 102, 187, var(--opacity, 1)); /* #0066bb; */

  --white: rgba(255, 255, 255, var(--opacity, 1));
  --black: rgba(0, 0, 0, var(--opacity, 1));

  /* Absolute page width */
  --max-width: 100%;


  /* Outer margin & padding */
  --outer-padding: 1rem;
  --outer-margin: 1rem;
  

  /* Section row heights */
  --home-banner-height: 3rem;
  --home-graphic-height: clamp(400px, 84vh, 80vw);

  /* Header settings */
  --header-padding: 1rem; /* Padding for filter headers */
  --filter-main-header-height: calc(1.5rem + (2 * var(--header-padding)));
  --filter-input-margin: .6rem; /* Margin between filter inputs */
  --filter-toggle-padding: 1.5rem;
  
  --main-nav-outer-wrap-height: calc(2rem + (2 * var(--header-padding)));
  --main-nav-outer-wrap-top-offset: 0px; /* Will break sticky if unit is not included */

  --main-nav-inner-wrap-height: 2rem;


  --dialog-margin: 6rem;

  /* Grid set up */
  --side-padding: 1rem;
  --column-gap: 1.5rem;
  --row-gap: 3rem;
}

  
@media (orientation: landscape) {
  :root {
    --outer-padding: calc((100vw - min(160ch, 90vw)) / 2);
    --outer-margin: var(--column-gap);
  }
}


@media (hover: none) {
  :root {
    --filter-toggle-padding: 0;
  }
}

[hidden] {
  display: none !important;
}

/* Home graphic scroll animation */
@keyframes home-graphic-scroll {
  0% {  
    --timer: 0;  
    background-color: var(--c-blue);
  }
  100% {  
    --timer: 1;  
    background-color: var(--c-purple);
  }
}

/* Nav header scroll animation - white to black & that stupid line */
@keyframes main-nav-outer-wrap-scroll {
  0% {
    background-size: 100% 1px;
    background-repeat: no-repeat;
    background-position-y: bottom;
    background-image: linear-gradient(to right, transparent 0%, transparent var(--outer-margin), 
                                      var(--gray-8) var(--outer-margin), var(--gray-8) calc(100% - var(--outer-margin)), 
                                      transparent  calc(100% - var(--outer-margin)), transparent 100%);
  }

  99% {
    background: #fff;
    color: #000;
    background-size: 100% 1px;
    background-repeat: no-repeat;
    background-position-y: bottom;
    background-image: linear-gradient(to right, transparent 0%, transparent var(--outer-margin), 
                                      var(--gray-8) var(--outer-margin), var(--gray-8) calc(100% - var(--outer-margin)), 
                                      transparent  calc(100% - var(--outer-margin)), transparent 100%);
  }

  99.1% {
    background: #000;
    color: #fff;
    background-size: 100% 1px;
    background-repeat: no-repeat;
    background-position-y: bottom;
    background-image: none;
  }

  100% {
    background: #000;
    color: #fff;
    background-size: 100% 1px;
    background-repeat: no-repeat;
    background-position-y: bottom;
    background-image: none;
  }
}

@keyframes dialog-from-left {
  0% {
    left: -100dvw;
  }
  100% {
    left: 0dvw;
  }
}

@keyframes dialog-from-right {
  0% {
    left: 100dvw;
  }
  100% {
    left: var(--dialog-margin);
  }
}

@keyframes dialog-backdrop {
  0% {
    backdrop-filter: blur(0px);
  }
  100% {
    backdrop-filter: blur(4px);
  }
}

/* Disable scroll animations based on user preference */
@media (prefers-reduced-motion: no-preference) {
  #home-graphic[display] {  
    animation: home-graphic-scroll linear forwards;
    animation-timeline: view();
    animation-range-start: 100vh;
    animation-range-end: 200vh;
  }

  body[home] #main-nav-outer-wrap {
    animation: main-nav-outer-wrap-scroll linear forwards;
    animation-timeline: view();
    animation-range-start: calc(100vh - var(--home-graphic-height));
    animation-range-end: calc(100vh + (100vh - var(--home-banner-height) - var(--home-graphic-height)));
  }
}

@media (orientation: landscape) {
  .portrait-only {
    display: none !important;
  }
}

@media (orientation: portrait) {
  .landscape-only {
    display: none;
  }
}

@media (hover: hover) {
  .no-hover-only {
    display: none;
  }
}

@media (hover: none) {
  .hover-only {
    display: none;
  }
}

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

body {
  margin: 0;
  padding: 0;
  background-color: var(--gray-1);
  overflow-x: clip;
  overflow-y: scroll;

  scrollbar-color: auto;

  &::selection {
    background-color: var(--c-yellow);
    color: #000;
  }

  &:not([home]) {
    #home-banner, #home-graphic {
      height: 0;
      display: none;
    }

    #main-nav-outer-wrap {
      background: #000;
      color: #fff;
      background-size: 100% 1px;
      background-repeat: no-repeat;
      background-position-y: bottom;
      background-image: none;
    }

    #spacer {
      height: 0;
    }
  }
}

#skip-content {
  display: block;
  position: fixed;
  z-index: 9999;
  top: -100%;
  padding: 1em; 
  background-color: #000;
  color: #fff;
  text-decoration: underline;

  &:focus {
    top: 0;
  }
}

#home-banner {  
  height: var(--home-banner-height);
  padding-block: .8rem 1rem;
  padding-inline: var(--outer-padding);
  margin-inline: auto;
  max-width: var(--max-width);
  background-color: #fff;

  & #discount-code {
    position: relative;

    font-family: 'Century Gothic';
    text-decoration: none;
    border: 2px dashed black;
    padding: .2em;
    margin-block-start: -1rem;
  }
}

/* Display content on top of home graphic */
#home-graphic-overlay {
  display: grid;
  position: absolute;
  z-index: 10;

  position-anchor: --home-graphic;
  top: anchor(top);
  right: anchor(right);
  bottom: calc(anchor(bottom) + 15cqh);
  left: anchor(left);

  font-family: 'Century Gothic';
  font-size: 4rem;  

  &:empty {
    display: none;
  }
}

#wrap {
  display: grid;
  min-height: 100svh;
  
  align-content: start;
  align-items: start;

  position: sticky;
  top: 0;

  grid-template-columns: 1fr;
  margin-inline: auto;

  background-color: #fff;
}

#main-nav-outer-wrap {
  position: sticky;
  top: 0;
  z-index: 2;

  height: var(--main-nav-outer-wrap-height);

  padding-block: var(--header-padding);
  padding-inline: var(--outer-padding);

  background-color: #fff;
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position-y: bottom;
  background-image: linear-gradient(to right, transparent 0%, transparent var(--outer-margin), 
                                      var(--gray-8) var(--outer-margin), var(--gray-8) calc(100% - var(--outer-margin)), 
                                      transparent  calc(100% - var(--outer-margin)), transparent 100%);

  svg {
    fill: currentColor;
  }

  menu, ul {
    list-style: none;
  }
}
  
#main-nav-inner-wrap {
  display: flex;
  flex-flow: row nowrap;
  height: 2rem;

  container-name: main-nav-inner-wrap;
  container-type: size;

  user-select: none;
}

#logo > svg {
  min-width: 238px;
  max-width: 20vw;
  height: 2rem;
}

#main-nav-dialog {
  display: flex;
  flex-grow: 2;
  justify-content: center;
  
  position: relative;

  height: 2rem;

  background-color: transparent;
  color: inherit;
  border: none;
}

#main-nav {
  display: flex;
  flex-flow: row nowrap;
  gap: clamp(.2rem, 2cqw, 1rem);

  & li {    
    font-family: 'Century Gothic';
    font-size: 1.4rem;
    height: 2rem;
    align-items: center;
    line-height: 2rem;
  }

  & a {
    text-decoration: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: 1px;

    transition: text-decoration-color 150ms linear;

    transform: scaleY(140%);

    &:hover {
      text-decoration-color: currentColor;
    }
  }
}

#utility-menu {
  display: flex;
  flex-flow: row nowrap;
  width: max-content;  
  gap: clamp(.2rem, 2cqw, 1rem);

  & li, button, svg {
    height: 2rem;
  }

  & li {    
    display: grid;
    place-items: center;
    height: 2rem;
  }

  & button {
    display: grid;
    place-items: center;
    cursor: pointer;
  }
}

li:has(#menu-button) {
  display: none;
}

#search-button > svg {
  fill: transparent;
  stroke: currentColor;
}

#checkout-button {
  &[count] {
    justify-content: center;
    align-items: center;

    /* Counter for checkout items */
    &::after {
      content: attr(count);

      display: grid;
      place-items: center;
      text-align: center;

      position: absolute;   
      z-index: 1;

      height: 1rem;
      width: 1rem;

      margin-block-start: .6rem;
      border-radius: 100%;

      mix-blend-mode: difference;

      font-family: 'Century Gothic';
      font-size: .6rem;
      font-weight: 600;

      color: #000;
      background-color: #fff;
    }
  }

  & > svg {
    path {
      fill: currentColor;
    }
    
    circle {
      fill: transparent;
      stroke: currentColor;
    }
  }
}

/* Portrait orientation */
@media (orientation: portrait) {
  :root {
    --column-gap: 1rem;
  }

  li:has(#menu-button) {
    display: flex;
  }

  #main-nav-inner-wrap {
    justify-content: space-between;
  }

  /* Primary nav */
  body:has(#main-nav-dialog[open]) {
    overflow: clip; 
  }

  #main-nav-dialog:not([open]) {
    display: none;
  }
  
  #main-nav-dialog {
    position: fixed;
    top: 0;
    left: var(--dialog-margin);

    width: calc(100dvw - var(--dialog-margin));
    height: calc(100dvh);

    background: #000;
    box-shadow: 0 4rem 0 #000; /* REFACTOR Hacky because 100dvh isn't working? */

    direction: ltr;
    animation: dialog-from-right 300ms ease-out;

    &::backdrop {
      background-color: rgba(0, 0, 0, .4);
      backdrop-filter: blur(4px);
      animation: dialog-backdrop 300ms ease-in;
    }
  }

  #main-nav {
    color: #fff;

    width: 100%;

    padding-block: var(--header-padding);
    padding-inline: var(--column-gap);

    flex-flow: column nowrap;

    & > li, & > li * {
      height: min-content;
      font-size: 2rem;
    }

    #main-nav-mobile-close {
      text-align: right;
    }
  }
}


  /****************/
 /* MAIN CONTENT */
/****************/ 

#main-content {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(32ch, 100%), 1fr));
  row-gap: var(--row-gap);
  column-gap: var(--column-gap);
  margin-inline: var(--outer-padding);

  container-name: main-content;
  container-type: inline-size;

  /* Pages, listings */
  & > section[page] {
    display: none;
  }

  & > section {
    grid-template-columns: inherit;
    row-gap: var(--row-gap);
    column-gap: var(--column-gap);
    align-items: start;

    & > h2 {
      display: none;
    }

    &[page] {
      margin-block-start: calc(var(--main-nav-outer-wrap-height) - 1rem);
    }

    &[active] {
      display: grid;
      height: max-content;
      min-height: 50vh;
    }
  }

  /* Hide filters if page open */
  &:has([page][active]) {
    & #filter-main-header {
      display: none;
    }

    & #listings {
      display: none;
    }
  }

  /* Hide filters if listing open */
  &:has(store-listing-card:state(open)) {
    store-listing-card:not(:state(open)) {
      display: none;
    }

    store-listing-card:state(open) {
      grid-column: 1 / -1;
    }

    & #filter-main-header {
      display: none;
    }
  }

  & .full-width {
    grid-column: 1 / -1;
  }

  & #filter-main-header {
    position: sticky;
    z-index: 40;
    top: var(--main-nav-outer-wrap-height);

    & h2 {
      display: none;
    }
  }
}

/* No results for filter/search */
#no-results {
  grid-column: 1 / -1;
  display: grid;
  place-items: center;
  min-height: 50vh;

  & [oh-no] {
    font-size: 4rem;
    font-family: 'Century Gothic';
    margin-block-end: 3rem;
    margin-inline: auto;
  }

  & button {
    display: block;
    font-family: 'Century Gothic';
    margin-block-start: 3rem;
    margin-inline: auto;
  }
}

#listings:has(store-listing-card:not([hidden])) #no-results{
  display: none;
}

/* Recommended listings */
#recs {
  /* display: grid; */

  display: none !important;

  grid-template-columns: 1fr;
  grid-template-rows: 1.8rem max-content;
  gap: 0;

  & span {
    color: #fff;
    background-color: #000;
    padding-block-start: .2rem;
    padding-inline: .2rem;
    width: max-content;

    position: relative;
    z-index: 1;
    top: 1px;
  }

  & div {  
    display: flex;
    overflow-x: auto;

    gap: var(--column-gap);
    padding: var(--column-gap);
    border: 1px solid var(--gray-4);

    & a {
      height: 6rem;
      aspect-ratio: 1;
      background-color: var(--gray-2);
    }
  }
}

[filter-page] {
  padding: var(--column-gap);
  background-color: lime;

  &:not([active]) {
    display: none;
  }
}


  /**********/
 /* FOOTER */
/**********/

#footer {
  margin-inline: var(--outer-margin);
  margin-block-start: var(--row-gap);
  padding-block: var(--row-gap);
  border-top: 1px solid var(--gray-4);

  text-align: center;

  nav {
    margin-bottom: var(--row-gap);
  }

  a:not(:last-child) {
    margin-inline-end: var(--row-gap);
  }

  a:hover {
    text-decoration: underline;
  }

  #copyright {
    font-size: .6rem;
  }
}

#sale-tags:not([active]) {
  display: none;
}

h1 {  display: none;  }
#spacer {  height: 100vh;  }
#template-store {  display: none;  }