/*
 Theme Name:   CBNOVA
 Theme URI:    https://chrisbryant.com/
 Description:  A lightweight Bricks child theme framework.
 Author:       Bricks
 Author URI:   https://chrisbryant.com/
 Template:     bricks
 Version:      0.1
 Text Domain:  bricks
*/

/* :root {
  --font-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
} */

:root {
  --transition-duration: 150ms;
  --transition-easing: ease-in-out;
}

/* --- Typography--- */

body {
  font-family: var(--font-system);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a,
button,
.bricks-button {
  transition-property: color, background-color, border-color, box-shadow;
  transition-duration: var(--transition-duration);
  transition-timing-function: var(--transition-easing);
}

.link {
  color: var(--brand);
  font-weight: 600;
  letter-spacing: 0.05rem;
  text-decoration: underline;
  text-decoration-color: var(--brand-l-4);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
  transition: text-decoration-color 0.15s ease-in-out,
    background-color 0.15s ease-in-out;

  &:hover {
    text-decoration-color: var(--brand-l-3);
    cursor: pointer;
  }

  &:focus-visible {
    background-color: var(--brand-l-3);
    outline: 2px solid var(--brand);
    outline-offset: 2px;
  }
}

mark {
  background-color: #ffffbd;
}

.cb-search-input,
select.cb-search-input {
  border: 1px solid var(--border-soft) !important;
  border-radius: var(--radius-l);
  outline: 0;
}

/* Search Input Focus */
.cb-search-input input[type="search"]:focus,
select.cb-search-input:focus {
  appearance: none;
  border-color: var(--action-accent);
  box-shadow: 0 0 0 3px rgba(253, 182, 131, 0.5);
}

/*--- BOILER PLATE ---*/
/* Accessible alternative to outline: none; */
button {
  outline-color: transparent;
}

/*--- RESET RULES ---*/
html {
  scrollbar-gutter: stable; /* KP: prevents shifting elements on some browsers*/
}

/*To create a full-height & Sticky Footer Content Area*/
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex-grow: 1;
}

/** WIDGETS **/
/* Base component — always applies */
.cb-sidebar-widget {
  padding: var(--space-m);
  border-radius: var(--radius-m);
  background: var(--widget-bg, var(--light));
  color: var(--widget-text, var(--base));
  width: 100%;
  @media screen and (max-width: 1023px) {
    &::after {
      /* hides triangle on tablets/mobile */
      display: none;
    }
  }
}

/* HAS TRIANGLE - GOES INTO /UTILITIES has-triangle.scss */
.cb-has-triangle {
  position: relative;
}

.cb-has-triangle::after {
  content: "";
  position: absolute;
  width: var(--triangle-size, 16px);
  height: var(--triangle-size, 16px);
  background: var(--triangle-bg, var(--light));
  transform: rotate(45deg);
  border-top: 1px solid var(--triangle-border, var(--border));
  border-right: 1px solid var(--triangle-border, var(--border));

  /* Default: right-pointing triangle, positioned at top-right */
  top: var(--triangle-top, 16px);
  right: calc(var(--triangle-size, 16px) / -2 - 1px);
}

/* --- Direction modifiers --- */
.cb-has-triangle[data-direction="left"]::after {
  right: auto;
  left: calc(var(--triangle-size, 16px) / -2 - 1px);
  transform: rotate(225deg);
}

.cb-has-triangle[data-direction="down"]::after {
  top: auto;
  bottom: calc(var(--triangle-size, 16px) / -2 - 1px);
  right: auto;
  left: var(--triangle-top, 16px);
  transform: rotate(135deg);
}

.cb-has-triangle[data-direction="up"]::after {
  top: calc(var(--triangle-size, 16px) / -2 - 1px);
  right: auto;
  left: var(--triangle-top, 16px);
  transform: rotate(-45deg);
}