/* Sydänmänty® – Bricks baseline
   sydanmanty.css is the static layout's stylesheet, unchanged. It was written against
   plain browser defaults (16px root, user-agent heading sizes). Bricks ships its own
   reset inside @layer bricks, so these unlayered rules win and put the browser
   defaults back where the layout relies on them. It also adapts the few Bricks
   elements whose markup differs from the layout (the Image Gallery reel).
   Keep this file small. */

/* Bricks sets 62.5 % (10px rem); the layout's rem values assume 16px */
html { font-size: 100%; }

/* Bricks resizes headings and fixes their line-height at 1.4; the layout inherits */
h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.17em; }
h4 { font-size: 1em; }
h5 { font-size: 0.83em; }
h6 { font-size: 0.67em; }
h1, h2, h3, h4, h5, h6 { line-height: inherit; }

/* Bricks gives SVGs without width/height attributes a 1em minimum size;
   the layout sizes its inline icons in CSS (some at 0.9em) */
svg:not([width]),
svg:not([height]) { min-width: auto; min-height: auto; }

/* Browser defaults for form controls (Bricks resets font, padding and alignment) */
button,
input {
  font: revert;
  line-height: revert;
  padding: revert;
}
button { text-align: center; }
input { color: revert; }

/* Bricks caps every element at max-width: 100%; the layout lets some overflow
   on purpose (the compare knob over its 2px line, reel slides in the track) */
:where([class*="brxe-"]) { max-width: none; }

/* Browser default border colour (Bricks sets a grey on every element) */
* { border-color: currentColor; }

/* Plain block flow, as in the static page (Bricks makes body a flex column
   and positions <main>) */
.brx-body { display: block; }
#brx-content,
#brx-footer { position: static; }

/* Reference reel = Bricks Image Gallery (functions.php adds .reel__slide to its items).
   Switch off the gallery's own grid styles so the layout's .reel__* rules apply as written. */
.reel__track.brxe-image-gallery {
  flex-wrap: nowrap;
  grid-template-columns: none;
}
.reel__track > .reel__slide {
  display: list-item;
  position: static;
  line-height: inherit;
}
.reel__slide > figure { height: 100%; }
.reel__slide img {
  position: static;
  overflow: revert;
  aspect-ratio: auto;
}

/* Text Link elements are plain inline links (Bricks makes them, and every
   span inside them, inline-flex with a 5px gap) */
:where(.brxe-text-link),
:where(.brxe-text-link span) {
  display: inline;
  gap: normal;
  align-items: normal;
  justify-content: normal;
}