/* https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
html {
    box-sizing: border-box;
}

/* Box Sizing fix */
*, *:before, *:after {
    box-sizing: inherit;
}

/* Whitespace reset */
* {
    padding: 0;
    margin: 0;
}

/* Image behaviour */
img {
    display: block;
    width: 100%;
    height: auto;
}

/*
Remove list styles (bullets/numbers)
in case you use it with normalize.css
*/
ol, ul {
    list-style: none;
}


/* Revert the 'white-space' property for textarea elements on Safari */
textarea {
    white-space: revert;
}

/* https://12daysofweb.dev/2024/calc-size-and-interpolate-size/#enabling-it-site-wide-with-a-single-declaration */
:root {
    interpolate-size: allow-keywords;
}

/*
Opt in for automatic view transitions
https://developer.mozilla.org/en-US/docs/Web/CSS/@view-transition 
*/
@view-transition {
    navigation: auto;
}

/*
Change default text wrapping behaviour where possible
https://developer.mozilla.org/en-US/docs/Web/CSS/text-wrap
*/
html {
    text-wrap: pretty;
}
:root {
    --gray-medium: #7C7C7C;
    --gray-dark: #343434;
    --gray-lighter: #F6F6F6;
    --gray-light: #E1E1E1;
    --primary-default-pink: #C6007E;
    --primary-dark: #8A0058;
    --primary-dimmed: #F9EFF6;
    --gray-semilight: #D6D6D6;
    --secondary-default-blue: #06038D;
    --secondary-lighter: #C3C2F0;
    --secondary-dimmed: #EFEFF9;
    --gray-white: #FFFFFF;
    --secondary-05-dimmed: #EFEFF9;

    --size-border-radius-sm: 8px;
    --size-border-radius-md: 16px;
    --size-border-radius-lg: 32px;
}
:root {
  --fs-body: clamp(0.75rem, 0.6667rem + 0.4167vw, 1rem);
  --fs-heading-6: clamp(0.8438rem, 0.725rem + 0.5938vw, 1.2rem);
  --fs-heading-5: clamp(0.9492rem, 0.7856rem + 0.818vw, 1.44rem);
  --fs-heading-4: clamp(1.0679rem, 0.8478rem + 1.1002vw, 1.728rem);
  --fs-heading-3: clamp(1.2014rem, 0.9106rem + 1.4537vw, 2.0736rem);
  --fs-heading-2: clamp(1.3515rem, 0.9726rem + 1.8947vw, 2.4883rem);
  --fs-heading-1: clamp(1.5205rem, 1.032rem + 2.4425vw, 2.986rem);
}

html {
	font-family: Gabriela, Helvetica, sans-serif;
	line-height: 1.5;
	font-size: var(--fs-body);
	font-weight: 400;

    font-variant: normal;
    font-kerning: normal;
    font-variant-ligatures: common-ligatures,contextual;
    font-feature-settings: "kern","liga","clig","calt";

    text-rendering: optimizeLegibility;
    text-wrap: pretty;
}

body, table, form, input, select, button, textarea {
	font: inherit;
}

h1, h2, h3, h4, h5, h6 {
	line-height: 1.1;
	font-weight: bold;
    margin-bottom: 0.4em;

    &:not(:first-child) {
        margin-top: 1em;
    }
}

h1 { font-size: var(--fs-heading-1); }
h2 { font-size: var(--fs-heading-2); }
h3 { font-size: var(--fs-heading-3); }
h4 { font-size: var(--fs-heading-4); }
h5 { font-size: var(--fs-heading-5); }
h6 { font-size: var(--fs-heading-6); }


p:not(:only-child, :last-child) {
	padding-bottom: 1.5em;
}

ul,
ol {
	padding-left: 1.5em;

	li {
		padding-bottom: 0.3em;
		list-style-position: outside;
	}
}

ul > li {
    list-style-type: disc;
}

ol > li {
	list-style-type: decimal;
}

figure {
	margin: 0;
}

blockquote {

	cite {
		display: block;
		padding-right: 1em;
		text-align: right;
	}
}

hgroup {
    margin-bottom: 2em;

    :is(h1, h2, h3, h4, h5, h6) {
        margin: 0 !important;
        padding: 0;
        line-height: 1.2;
    }
}

.page {

    :is(h2, h3, h4, h5) strong {
        color: #060;
    }

    ul li:last-child strong {
        color: #060;
        font-size: 1.2em;
    }
}

body {
    display: flex;
    min-height: 100vh;

    @media (width > 500px) {
        overflow: hidden;
    }
    
    @media (width < 500px) {
        flex-direction: column;
    }
}

.site-content {
    flex: 1 1 100%;
    padding: 4em 2em;
    
    @media (width < 750px) {
        padding: 2em;
    }

    @media (width > 500px) {
        overflow: auto;
        height: 100vh;
    }
}

.page {
    max-width: 80ch;
    margin: 0 auto;
    
    &.wide {
        max-width: 120ch;
    }
}

.page > header {
    margin-bottom: 2em;
}

a {
    color: #080;
}

.site-header {
    flex: 1 0 auto;
    padding: 2em;
    display: flex;
    flex-direction: column;
    align-items: end;
    position: relative;

    @media (width < 500px) {
        align-items: center;
    }

    .cta {
        display: flex;
        align-items: end;        
        flex-direction: column;
        
        @media (width < 500px) {
            align-items: center;
            flex-direction: row;
            gap: 1em;
            
            .nav-toggle {
                margin: 0;
            }
        }

    }

    p.site-title {
        font-weight: bold;
        font-size: 1.2em;
        padding: 0;
        margin: 0 -0.3em 1em 0;

        a {
            display: block;
            width: 200px;
            aspect-ratio: 16/13.1;
            background-image: url('/logo.png');
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
            text-indent: -200vw;
            overflow: hidden;
        }
    }

    a.cta {
        display: block;
        width: min-content;
        white-space: nowrap;
        text-align: right;
        font-size: 0.9em;
        padding: 0.5em 1em;
        border-radius: 0.3em;
        text-decoration: none;
        background: rgb(0, 130, 0, 0.7);
        color: rgb(255, 255, 255, 0.9);
        transition: all 0.3s ease-in;
        
        &:hover {
            background: rgb(0, 130, 0, 1);
            color: rgb(255, 255, 255, 1);
        }
    }
    
}
.site-footer {
    display: block;
}

.section {
    /* border: 1px solid #ddd; */
    /* border-radius: 0.4em; */
    padding: 1em;

    & + .section {
        margin-top: 2em;
    }

    & > .inner > header {
        padding-bottom: 2em;
    }
}
nav.main {
    text-align: right;
    
    h6 {
        margin-top: 2em;
        text-transform: uppercase;
        margin-bottom: 0;
    }

    ul {
        display: flex;
        flex-direction: column;
        
        padding-block: 0.5em;
    }
    
    li {
        display: block;
        list-style: none outside;
        padding: 0;
    }
    
    a {
        display: block;
        color: #666;
        padding: 0.1em 0;
        text-decoration: none;

        &:hover {
            text-decoration: underline;
            color: #060;
        }
    }
}

/* The nav sits open in the sidebar above 500px, so the toggle is only needed
   below that, where the header collapses to a single row. */
.nav-toggle {
    display: none;
}

@media (width < 500px) {
    .nav-toggle {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 5px;
        width: 2.75em;
        height: 2.75em;
        padding: 0;
        border: 0;
        background: none;
        cursor: pointer;
        margin-top: 1em;

        span {
            display: block;
            width: 1.5em;
            height: 2px;
            background: #444;
            transition: transform 0.2s ease, opacity 0.2s ease;
        }

        /* bars are 2px tall with a 5px gap, so 7px is centre-to-centre */
        &[aria-expanded='true'] span:nth-child(1) {
            transform: translateY(7px) rotate(45deg);
        }

        &[aria-expanded='true'] span:nth-child(2) {
            opacity: 0;
        }

        &[aria-expanded='true'] span:nth-child(3) {
            transform: translateY(-7px) rotate(-45deg);
        }
    }

    nav.main {
        display: none;
        position: absolute;
        top: 90%;
        left: 50%;
        translate: -50% 0;
        z-index: 10;
        font-size: 1.4em;
        padding: 0.5em 1em 1.5em;
        background: #fff;
        box-shadow: 0 0.5em 1em rgb(0 0 0 / 0.15);
        border-radius: 0.3em;

        h6:first-child {
            margin-top: 0.5em;
        }
    }

    .nav-toggle[aria-expanded='true'] + nav.main {
        display: block;
    }
}
form {
    border: 1px solid #DDD;
    padding: 2em;
    border-radius: 0.6em;
    margin-top: 2em;
    background: #F8F8F8;
    box-shadow: 0 0 1em 0 rgb(0, 0, 0, 0.1);

    button {
        display: block;
        border: none;
        border-radius: 0.3em;
        padding: 0.5em 1em;
        background: rgb(0, 150, 0);
        color: #EEE;
        margin-top: 1.5em;
        outline: none;
        cursor: pointer;

        &:hover {
            background: rgb(0, 170, 0);
            color: #FFF;

        }

        &:focus {
            outline: 3px solid orange;
            outline-offset: 4px;
        }
    }
}

.field {
    
    &:not(:last-child) {
        padding-bottom: 0.5em;
    }

    label {
        display: block;
        font-weight: bold;
    }

    &:has(:is(input, textarea)[placeholder]) label {
        display: none;
    }

    input[type="text"],
    input[type="email"],
    textarea {
        display: block;
        width: 100%;
        padding: 0.7em 1em;
        border: 1px solid #CCC;
        border-radius: 0.3em;
        outline: none;

        &:focus {
            border-color: #090;
        }
    }

    textarea {
        field-sizing: content;
        min-height: 6em;
    }
}
.grid {
    --grid-max-col-count: 3;
    --grid-min-col-size: 200px;
    --grid-gap: 1.5rem;

    /*
    * calculations, do not touch
    */

    --grid-col-size-calc: calc( (100% - var(--grid-gap) * var(--grid-max-col-count) ) / var(--grid-max-col-count) );
    --grid-col-min-size-calc: min(100%, max(var(--grid-min-col-size), var(--grid-col-size-calc)));
        
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    gap: var(--grid-gap);
    padding: 0;

    grid-template-columns: repeat(auto-fit, minmax(var(--grid-col-min-size-calc), 1fr));
    

    &.c3 {
        --grid-max-col-count: 3;
        --grid-min-col-size: 200px;
    }

    &.c2 {
        --grid-max-col-count: 2;
        --grid-min-col-size: 200px;
    }

    &.dense {
        grid-auto-flow: dense;
    }

}
/*
A carousel with no script behind it — https://drafts.csswg.org/css-overflow-5/

The strip is an ordinary scroll container with snap points, so swiping,
wheeling and keyboard scrolling work everywhere. Its chrome is generated by the
scroller itself: `::scroll-button()` gives real prev/next buttons, and every
slide contributes a `::scroll-marker` dot to the scroller's
`::scroll-marker-group`. The browser owns all of their behaviour — focus order,
arrow keys, the disabled state at either end, and which dot is current — so
there is nothing to hydrate.

Browsers without those pseudo-elements keep the snapping strip and its
scrollbar, which is this carousel minus its chrome.
*/
.carousel {
    /* the widest a slide may get; a narrower row hands it the whole width */
    --carousel-slide-size: 32rem;
    --carousel-gap: 1rem;
    --carousel-control-size: 2.5rem;
    /* how far the strip dissolves at either end */
    --carousel-fade: 8rem;

    /*
    * calculations, do not touch
    */

    /* the gutter that lets the first and last slide reach the middle */
    --carousel-edge-calc: calc((100% - min(100%, var(--carousel-slide-size))) / 2);
    /*
    The fade never reaches past the gutter, so a row too narrow to peek at its
    neighbours — where the slide has the width to itself — keeps every pixel.
    */
    --carousel-fade-calc: min(var(--carousel-fade), var(--carousel-edge-calc));

    display: flex;
    gap: var(--carousel-gap);
    margin-block: 1.5em;
    /* a scroller clips what leaves it, so the photos' shadows need the room */
    padding-block: 1rem 1.75rem;
    padding-inline: var(--carousel-edge-calc);
    list-style: none;

    /*
    The slides at either end run out rather than meeting a cut edge. The mask
    is painted over the scrollport, not the content, so it stays put while the
    strip moves under it — and the scroll buttons, being fixed, come through it
    untouched.
    */
    mask-image: linear-gradient(
        to right,
        transparent,
        black var(--carousel-fade-calc),
        black calc(100% - var(--carousel-fade-calc)),
        transparent
    );

    overflow-x: auto;
    /* a swipe past the last slide is the carousel's, not the page's */
    overscroll-behavior-inline: contain;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;

    > li {
        flex: 0 0 min(100%, var(--carousel-slide-size));
        padding: 0;
        list-style: none;
        scroll-snap-align: center;
    }

    /* the button the lightbox wraps each photo in */
    .photo {
        display: block;
        width: 100%;
        padding: 0;
        border: none;
        background: none;
        cursor: zoom-in;
        outline: none;

        &:focus-visible img {
            outline: 3px solid rgb(0, 170, 0);
            outline-offset: 3px;
        }
    }

    img {
        display: block;
        width: 100%;
        height: auto;
        /* every slide keeps the same frame, so the strip never jumps in height */
        aspect-ratio: 3 / 2;
        object-fit: cover;
        border-radius: var(--size-border-radius-md);
        box-shadow: 0 0.4rem 1.2rem rgb(0 0 0 / 0.16);
    }
}

@media (prefers-reduced-motion: reduce) {
    .carousel {
        scroll-behavior: auto;
    }
}

/*
The dots. `scroll-marker-group: after` lays the group out after the scrollport,
outside the scrolling area, and `:target-current` tracks whichever slide the
scroller last snapped to.
*/
@supports selector(::scroll-marker) {
    .carousel {
        scroll-marker-group: after;
        /* the dots and the buttons say everything the scrollbar was saying */
        scrollbar-width: none;
    }

    .carousel::scroll-marker-group {
        display: flex;
        justify-content: center;
        gap: 0.6rem;
        padding-block-start: 1rem;
    }

    .carousel > li::scroll-marker {
        content: "";
        /* a marker is inline by default, and an inline box cannot be sized */
        display: inline-block;
        width: 0.6rem;
        height: 0.6rem;
        border: 1px solid var(--gray-semilight);
        border-radius: 50%;
        cursor: pointer;
        transition: background-color 0.2s, border-color 0.2s;
    }

    .carousel > li::scroll-marker:target-current {
        background-color: rgb(0, 170, 0);
        border-color: rgb(0, 170, 0);
    }

    .carousel > li::scroll-marker:focus-visible {
        outline: 3px solid rgb(0, 170, 0);
        outline-offset: 3px;
    }
}

/*
The arrows. In flow a scroll button lands under the strip, so each one is taken
out of flow and laid back over its own carousel: a button's implicit anchor is
the scroller that generated it, which `position-area: center` then covers with
the scroller's own box. No `anchor-name` is needed — and none would do, since
every carousel on the page would have to answer to the same one.
*/
@supports selector(::scroll-button(right)) {
    .carousel::scroll-button(*) {
        position: fixed;
        position-area: center;
        /*
        Scroll buttons ship with `position-visibility: anchors-visible`, and a
        scroller counts as hiding its own pseudo-elements: they never paint.
        */
        position-visibility: always;

        width: var(--carousel-control-size);
        aspect-ratio: 1;
        border: 0;
        border-radius: 50%;
        background-color: color-mix(in srgb, var(--gray-white) 85%, transparent);
        box-shadow: 0 1px 6px rgb(0 0 0 / 0.25);
        color: var(--gray-dark);
        font-size: 1.6rem;
        line-height: 1;
        cursor: pointer;
        transition: background-color 0.2s, opacity 0.2s;
    }

    .carousel::scroll-button(*):hover {
        background-color: var(--gray-white);
    }

    .carousel::scroll-button(*):focus-visible {
        outline: 3px solid rgb(0, 170, 0);
        outline-offset: 2px;
    }

    /* at either end of the strip the browser disables the button it exhausted */
    .carousel::scroll-button(*):disabled {
        opacity: 0;
        pointer-events: none;
    }

    /* the second half of `content` is the button's accessible name */
    .carousel::scroll-button(left) {
        content: "\2039" / "Предишна снимка";
        justify-self: start;
        margin-inline-start: 0.5rem;
    }

    .carousel::scroll-button(right) {
        content: "\203A" / "Следваща снимка";
        justify-self: end;
        margin-inline-end: 0.5rem;
    }
}
/*
Masonry through Grid Lanes — https://www.w3.org/TR/css-grid-3/

The lane count is never pinned to a breakpoint. The track floor is clamped
between an exact `--masonry-max-col-count`th and an exact `--masonry-min-col-count`th
of the row, so `auto-fill` can only ever settle on one of those two counts:
three lanes once the row has room for `--masonry-col-size`, two below it, with
the lanes themselves resizing fluidly the whole way between.

Browsers without `display: grid-lanes` keep the plain grid below, which
MasonryPolyfill.astro then packs into the very same lanes.
*/
.masonry {
    --masonry-max-col-count: 3;
    --masonry-min-col-count: 2;
    /* the lane width worth splitting the row for — where 2 lanes turn into 3 */
    --masonry-col-size: 13rem;
    --masonry-gap: 1em;

    /*
    * calculations, do not touch
    */

    /* what a track measures once the row is split into the most / fewest lanes */
    --masonry-col-size-at-max: calc( (100% - var(--masonry-gap) * (var(--masonry-max-col-count) - 1) ) / var(--masonry-max-col-count) );
    --masonry-col-size-at-min: calc( (100% - var(--masonry-gap) * (var(--masonry-min-col-count) - 1) ) / var(--masonry-min-col-count) );
    --masonry-col-size-calc: clamp(var(--masonry-col-size-at-max), var(--masonry-col-size), var(--masonry-col-size-at-min));

    display: grid;
    gap: var(--masonry-gap);
    align-items: start;

    /*
    `auto-fill` rather than `auto-fit`: the polyfill takes every item out of
    flow and still needs to read the lanes back off this track list.
    */
    grid-template-columns: repeat(auto-fill, minmax(var(--masonry-col-size-calc), 1fr));
}

@supports (display: grid-lanes) {
    .masonry {
        display: grid-lanes;
    }
}.socials[data-astro-cid-fchohaqw] {
  flex-direction: row;
  gap: 1em;
  justify-content: end;
  margin-top: .5em;

  & li {
    display: block;
    padding: 0;
    flex: none;

    & a {
      display: block;
      width: 2em;
      height: 2em;
      padding: 0;
      text-align: left;
      text-indent: -2000vw;
      text-overflow: hidden;
      overflow: hidden;
      background: #444;
      color: #fff;
      position: relative;

      &:hover {
        background: #080;
      }

      &:before {
        display: block;
        content: "";
        position: absolute;
        inset: .4em;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
      }
    }

    &.facebook a[data-astro-cid-fchohaqw]:before {
      background-image: url("/icons/facebook-f-brands.svg");
    }

    &.instagram a[data-astro-cid-fchohaqw]:before {
      background-image: url("/icons/instagram-brands.svg");
    }

    &.linkedin a[data-astro-cid-fchohaqw]:before {
      background-image: url("/icons/linkedin-in-brands.svg");
    }
  }
}