/*
 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
*/

/**
 * CONTENTS
 *
 * SETTINGS
 * Global...............Globally-available variables and config.
 *
 * TOOLS
 * Mixins...............Useful mixins.
 *
 * GENERIC
 * Normalize.css........A level playing field.
 * Box-sizing...........Better default `box-sizing`.
 *
 * BASE
 * Headings.............H1–H6 styles.
 *
 * OBJECTS
 * Wrappers.............Wrapping and constraining elements.
 *
 * COMPONENTS
 * Page-head............The main page header.
 * Page-foot............The main page footer.
 * Buttons..............Button elements.
 *
 * TRUMPS
 * Text.................Text helpers.
 */





/*------------------------------------*
  #SETTINGS
*------------------------------------*/





/*------------------------------------*
  #TOOLS
*------------------------------------*/





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

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

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

/**
 * c.  Allow percentage-based heights in the application
 * c1. Prevent font size inflation
 */
:where(html, body) {
  height: 100%;
}
:where(html) {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/**
 * Typographic tweaks!
 * d.  Add accessible line-height
 * d1. Set body min-height default
 * e.  Improve text rendering
 */
:where(body) {
  line-height: 1.5;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

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

/**
 * g. Remove built-in form typography styles
 */
:where(input, button, textarea, select) {
  font: inherit;
}

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

/**
 * i.Image defaults, as shared by Harry Roberts
 *   Harry's Tweet: https://twitter.com/csswizardry/status/1717841334462005661
 */
 :where(img) {
	/* max-width: 100%; */
	/* height: auto; */
	vertical-align: middle;
	font-style: italic;
	/* background-repeat: no-repeat;
	background-size: cover; */
	shape-margin: 0.75rem;
}

/**
 * j. Set shorter line heights on headings and interactive elements
 */
:where(h1, h2, h3, h4,
button, input, label) {
  line-height: 1.1;
}

/**
 * k. Balance text wrapping on headings
 */
:where(h1, h2,
h3, h4) {
  text-wrap: balance;
}

/**
 * l. Make sure textareas without a rows attribute are not tiny
 */
:where(textarea:not([rows])) {
  min-height: 10em;
}

/**
 * m. Anything that has been anchored to should have extra scroll margin
 */
:where(:target) {
  scroll-margin-block: 5ex;
}

/**
 * n. A elements that don't have a class get default styles
 */
:where(a:not([class])) {
  text-decoration-skip-ink: auto;
  color: currentColor;
}





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

/**
 * a. Apply text general styles
 */
body {
  letter-spacing: 1px;
}

/**
 * b. lightroom styles
 */
.light-lightbox .pswp.brx {
	--pswp-bg: var(--white);
	--pswp-placeholder-bg: var(--neutral-dark);
/* 	--pswp-preloader-color: rgba(79,79,79,.4);
	--pswp-preloader-color-secondary: hsla(0,0%,100%,.9); */
	--pswp-icon-color: var(--black);
	--pswp-icon-color-secondary: var(--neutral-dark);
	--pswp-icon-stroke-color: var(--neutral-dark);
}

.light-lightbox .pswp.brx .pswp__button--close svg {
  fill: var(--pswp-icon-color);
}

.light-lightbox .pswp.brx .pswp__img {
  box-shadow: var(--box-shadow-2);
}


/* .light-lightbox .pswp.brx .pswp__zoom-wrap {
  height: 100%;
}

.light-lightbox .pswp.brx .pswp__img {
  max-height: 640px;
  object-fit: contain;
  top: 50%;
  transform: translateY(-50%);
} */

#brx-header.brx-sticky > .fr-header-delta {
	transition: background-color .3s, padding .3s;
}

#brx-header.brx-sticky > .fr-header-delta .menu-trigger {
  transition: color .3s;
}

#brx-header.brx-sticky > .fr-header-delta .fr-header-delta__logo-alt,
#brx-header.brx-sticky > .fr-header-delta .fr-header-delta__menu-img-alt {
  display: none;
}

header.scrolling .fr-header-delta {
  background-color: var(--black-trans-80);
  padding-block: var(--space-s);
}

header.scrolling .fr-header-delta .menu-trigger {
  transition: color .3s;
  color: var(--primary);
}

header.scrolling .fr-header-delta__logo-text {
  color: var(--primary);

}

header.scrolling .fr-header-delta .fr-header-delta__logo,
header.scrolling .fr-header-delta .fr-header-delta__menu-img {
  display: none;
}

#brx-header.brx-sticky.scrolling > .fr-header-delta .fr-header-delta__logo-alt {
  display: block;
}

@media (min-width: 481px) {
  #brx-header.brx-sticky.scrolling > .fr-header-delta .fr-header-delta__menu-img-alt {
    display: block;
  }
}

.page-id-53 header, .page-id-51 header {
  position: absolute;
}


/*------------------------------------*
  #OBJECTS
*------------------------------------*/





/*------------------------------------*
  #COMPONENTS
*------------------------------------*/




/*------------------------------------*
  #TRUMPS
*------------------------------------*/