/*
 Theme Name:   Sharpdecade Theme
 Description:  Bricks theme extension by #decade.
 Author:       Athanasios Grivas
 Author URI:   https://sharpdeca.de/
 Template:     bricks
 Version:      1.0
 Text Domain:  bricks
*/

/*------------------------------------*
  #GENERIC
*------------------------------------*/

/* a. Intuitive box-sizing model */
:where(*, *::before, *::after) {
  box-sizing: border-box;
}

/* b. Remove default margin */
:where(body, h1, h2, h3, h4, p, figure, blockquote, dl, dd) {
  margin-block-end: 0;
}

/* c. Full-height layouts + better typography */
:where(html, body) {
  height: 100%;
}
:where(html) {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  hanging-punctuation: first last;
}
:where(body) {
  line-height: 1.5;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
@supports (min-height: 100svh) {
  :where(body) {
    min-height: 100svh;
  }
}

/* f. Media defaults */
:where(img, picture, video, canvas, svg) {
  display: block;
  /* max-width: 100%; */
}

/* g. Inherit form styles */
:where(input, button, textarea, select) {
  font: inherit;
}

/* h. Text overflow protection */
:where(p, h1, h2, h3, h4, h5, h6) {
  overflow-wrap: break-word;
}

/* i. Image styles (per Harry Roberts) */
:where(img) {
  /* height: auto; */
  shape-margin: 0.75rem;
  font-style: italic;
  font-size: var(--h2);
  line-height: 1.5;
  text-wrap: balance;
}

/* j & k. Headings and interactive elements */
:where(h1, h2, h3, h4, h5, h6, button, input, label) {
  line-height: 1.1;
  text-wrap: balance;
}

/* l. Textarea size */
:where(textarea:not([rows])) {
  min-height: 10em;
}

/* m. Anchor target spacing */
:where(:target) {
  scroll-margin-block: 5ex;
}

/* n. Default link styles */
:where(a:not([class])) {
  text-decoration-skip-ink: auto;
  color: currentColor;
}

/* q. Link icon styling */
a:has(> svg)::after {
  display: none;
}
a[target="_blank"]:where(:not(:has(>img, >figure, >picture, >svg)))::after {
  mask: linear-gradient(black 90%, transparent 90%);
  font-family: system-ui, sans-serif;
}

/*------------------------------------*
  #BASE
*------------------------------------*/

/* CTA margin */
:where(*:not([class*="btn--"]) + [class*="btn--"]) {
  margin-block-start: var(--space-s);
}

/* Figcaption */
:where(figcaption) {
  max-inline-size: max-content;
  margin-inline: auto;
}

/* Focus-visible outlines */
:where(a:focus-visible) {
  outline-offset: 0.25em;
  outline-width: 0.25em;
  outline-color: currentColor;
}

/* Typography layout */
:where(ul, ol, dl, dt, dd, p, figure, blockquote) {
  hanging-punctuation: first last;
  text-wrap: pretty;
}

/*------------------------------------*
  #CUSTOM
*------------------------------------*/

.home-nav li a, .home-nav .home-nav__dropdown .brx-submenu-toggle {
  position: relative;
}

.home-nav li a::before,
.home-nav li a::after, 
.home-nav .home-nav__dropdown .brx-submenu-toggle::before,
.home-nav .home-nav__dropdown .brx-submenu-toggle::after {
  content: "";
  position: absolute;
  display: block;
  border: 0px solid transparent;
  width: 0%;
  height: 0%;
  transition: all 0.3s ease-in-out;
}

.home-nav li a::after, 
.home-nav .home-nav__dropdown .brx-submenu-toggle::after {
  top: 0;
  left: -5px;
  border-top: 1px solid transparent;
  border-left: 1px solid transparent;
}

.home-nav li a::before,
.home-nav .home-nav__dropdown .brx-submenu-toggle::before {
  right: -5px;
  bottom: 0;
  border-bottom: 1px solid transparent;
  border-right: 1px solid transparent;
}

.home-nav li a:hover::before,
.home-nav li a:hover::after,
.home-nav .home-nav__dropdown .brx-submenu-toggle:hover::before, 
.home-nav .home-nav__dropdown .brx-submenu-toggle:hover::after {
  width: 10px;
  height: 10px;
  border-color: var(--primary-ultra-dark-trans-50);
}