/* Imports */
@import '_fonts.css';
@import '_variables.css';
@import '_utility.css';

/**
 * Base / Reset
 ---------------------------- */

/* -- Base document ---------- */

html, body {
    hanging-punctuation: first last;
    scroll-padding-top: 7rem;
}

@media (prefers-reduced-motion: no-preference) {
    :has(:target) {
        scroll-behavior: smooth;
    }
}

/* -- Typography ---------- */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
    text-wrap: balance;
}

p, li {
    text-wrap: pretty;
}

/* -- States ---------- */
[disabled],
.disabled,
:disabled {
   pointer-events: none !important;
   cursor: not-allowed !important;
}


/* Normalize */
html, body {
    min-height: 100vh;
    scroll-behavior: smooth;
    overflow-x: hidden;
}

html {
    -webkit-text-size-adjust: 100%;
}

body * {
    box-sizing: border-box;
}

body {
    font-family: 'Gantari', sans-serif;
    font-weight: var(--font-weight-body);
    font-size: var(--font-size-body);
    line-height: 1.6;
    margin: 0;
    color: var(--font-body-color);
    background-color: var(--body-bg-color);
}

body::before,
body::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset-inline: 0;
    height: 100vh;
    background-repeat: no-repeat;
    background-size: cover;
}

body::before {
    top: 0;
    background-color: var(--body-bg-color);
    background-image: linear-gradient(180deg, var(--clr-gradient-hero-overlay-1-rgba), var(--clr-gradient-hero-overlay-2-rgba) 100%), radial-gradient(ellipse at bottom center, var(--clr-gradient-hero-1-rgba), transparent 50%), radial-gradient(ellipse at top left, var(--clr-gradient-hero-2-rgba), transparent 50%), radial-gradient(ellipse at top right, var(--clr-gradient-hero-3-rgba), transparent 50%);
}

body::after {
    top: 50vh;
    background-image: linear-gradient(180deg, var(--clr-hero-crossfade-1-rgba) 0%, var(--clr-hero-crossfade-2-rgba) 35%, var(--clr-hero-crossfade-3-rgba) 65%, var(--clr-hero-crossfade-4-rgba) 100%);
}

#wrapper {
    position: relative;
    z-index: 1;
}

pre {
    background: lightgray;
    border: 1px solid gray;
    padding: 1.5rem;
}

/* Typography */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
    color: var(--font-heading-color);
    line-height: 1;
    margin-top: 0;
}

h1 span, .h1 span, h2 span, .h2 span, h3 span, .h3 span, h4 span, .h4 span, h5 span, .h5 span, h6 span, .h6 span {
    color: var(--font-heading-accent-color);
}

.h1, h1, .h2, h2 {
    font-weight: var(--font-weight-headings);
}

.h3, h3, .h4, h4, .h5, h5, .h6, h6 {
    font-weight: var(--font-weight-subheadings);
}

.h1, h1 {
    font-size: var(--font-size-heading-h1);
}

.h2, h2 {
    font-size: var(--font-size-heading-h2);
}

.h3, h3 {
    font-size: var(--font-size-heading-h3);
}

.h4, h4 {
    font-size: var(--font-size-heading-h4);
}

.h5, h5 {
    font-size: var(--font-size-heading-h5);
}

.h6, h6 {
    font-size: var(--font-size-heading-h6);
}

a {
    text-decoration: none;
    position: relative;
    transition: var(--transition-general-fast);
}

a:not([class]) {
    color: var(--font-link-color);
}

a:not([class])::after {
    content: "";
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    border-radius: 5px;
    height: 0.05em;
    bottom: 0;
    left: 0;
    background: currentcolor;
    transform-origin: bottom right;
    transition: transform 0.25s ease-out;
}

a:not([class]):hover {
    color: var(--font-link-color-hover);
}

a:not([class]):hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

a:not([class]):active {
    color: var(--font-link-color-active);
}


/* Buttons */
.btn {
    font-family: 'Gantari', sans-serif;
    font-size: var(--font-size-button);
    font-weight: 600;
    border-width: 1px;
    border-style: solid;
    display: inline-flex;
    align-items: center;
    gap: var(--spacer-3);
    padding-block: var(--spacer-3);
    padding-inline: var(--spacer-3);
    line-height: 1;
    scale: 1;

    color: var(--btn-color);

    border-color: var(--box-border-color);
    background-color: var(--box-background-color);
    border-radius: var(--box-border-radius);
    -webkit-backdrop-filter: var(--box-backdrop-filter);
    backdrop-filter: var(--box-backdrop-filter);
}

.btn.btn-small {
    padding-block: var(--spacer-2);
}

a.btn,
button.btn {
    cursor: pointer;
}

a.btn:hover,
button.btn:hover {
    opacity: 1 !important;
}

a.btn:active,
button.btn:active {
    scale: .98;
}

.btn.btn-primary {
    color: var(--btn-color-primary);
    border-color: var(--btn-border-color-primary);
    background-color: var(--btn-bg-color-primary);
}

a.btn.btn-primary:hover,
button.btn.btn-primary:hover {
    color: var(--btn-color-primary-hover);
}

a.btn.btn-secondary,
button.btn.btn-secondary {
    color: var(--btn-color-secondary);
    border-color: var(--btn-border-color-secondary);
}

a.btn.btn-secondary:hover,
button.btn.btn-secondary:hover {
    color: var(--btn-color-secondary-hover);
    border-color: var(--btn-border-color-secondary-hover);
}

.btn svg path {
    fill: currentColor;
}

.btn:has(svg) {
    padding-inline-start: var(--spacer-3);
}

.btn-icon.nav-item {
    padding-inline-end: var(--spacer-3);
}

/* Form elements */
select {
    cursor: pointer;
}

/* ----- Elements ----- */
hr {
    margin-block: var(--spacer-5);
}

.logo-holder {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--spacer-1);
}

/* ----- Tables ----- */
.table-holder {
    position: relative;
}

.table-holder .table-slider {
    max-width: 100%;
    overflow-x: auto;
    scroll-behavior: smooth;
}

.table-holder::before,
.table-holder::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: var(--spacer-4);
    background: transparent;
}

.table-holder::before {
    left: 0;
    background: linear-gradient(90deg, var(--clr-table-fade-opaque) 0%, var(--clr-table-fade-transparent) 100%);
}

.table-holder::after {
    right: 0;
    background: linear-gradient(90deg, var(--clr-table-fade-transparent) 0%, var(--clr-table-fade-opaque) 100%);
}

.table-holder::after {
    right: 0;
}

table {
    text-align: left;
}

table tr:has(th) {
    background-color: var(--clr-support-100);
}

table td,
table th {
    vertical-align: top;
    padding-block: var(--spacer-3);
    padding-inline: var(--spacer-4);
}


/* ----- Navigation ----- */
nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacer-3);
}

nav ul a {
    font-size: var(--font-size-button);
}


/* ----- Branding ----- */
.branding {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacer-3);
}

.branding {
    padding-inline: var(--spacer-5);
}

.branding#branding {
    position: fixed;
    z-index: 999;
    top: 0;
    inset-inline: 0;
    padding-top: var(--spacer-5);
}

.branding .switcher-holder {
    height: var(--nav-item-height);
}

.branding#colophon {
    padding-bottom: var(--spacer-5);
}

.admin-bar .branding#branding {
    top: var(--wp-admin--admin-bar--height);
}

.nav-item {
    height: var(--nav-item-height);
    padding-inline-end: var(--spacer-4);
}

.nav-item--logo {
    padding-inline-start: var(--spacer-4);
    gap: var(--spacer-1);
}


/* ----- Sections ----- */
section {
    position: relative;
    z-index: 2;
}

section:not(.section--hero) + section {
    margin-top: var(--spacer-8);
}

section:last-of-type {
    margin-bottom: var(--spacer-8);
}

.section--buttons {
    display: flex;
    align-items: center;
    gap: var(--spacer-3);
    margin-top: var(--spacer-5);
}

section header h2[id] {
    max-width: 720px;
}

section header > span {
    margin-bottom: var(--spacer-3);
}

/* Section: Hero */
.section--hero {
    z-index: 3;
    min-height: 100vh;
}

.section--hero .container {
    height: 100vh;
    display: flex;
    align-items: center;
}

.section--hero .section--content {
    max-width: 690px;
    width: 100%;
}

.section--hero .section--hero--image img {
    margin-top: 5vh;
    max-height: 100vh;
    width: auto;
    display: block;
    position: relative;
    right: -5vw;
}

/* Section: Boxed */
.section--boxed header > span {
    margin-bottom: var(--spacer-3);
}

.section--boxed .section--content {
    padding-block: var(--section-boxed-padding-block);
    padding-inline: var(--section-boxed-padding-inline);
    background-color: var(--section-content-bg);
    border-radius: var(--section-border-radius);
}

.section--boxed .section--content .block {
    background-color: var(--section-content-block-bg);
}

/* Section text centered */
.section--text .section--content {
    width: 100%;
}

.section--text.text-center .section--content * {
    margin-inline: auto;
}

.section--text.text-center .section--content p {
    max-width: 480px;
}


/* Section blocks */
section .blocks {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacer-4);
    margin-top: var(--spacer-7);
}

section .block .block {
    min-height: 260px;
}

.block {
    display: flex;
    flex-flow: column;
    align-items: flex-start;
    justify-content: space-between;
    background-color: var(--section-content-block-bg);
    border-radius: var(--section-border-radius);
    padding: var(--spacer-4);
}

.block p {
    margin-bottom: 0;
}

.block img {
    border-radius: var(--section-border-radius);
    display: block;
    padding: var(--spacer-2);
    background-color: white;
    border: 1px solid var(--clr-support-200);
}

/* Section tab carousel layout */
section .carousel-wrapper {
    margin-top: var(--spacer-7);
}

.carousel--buttons {
    display: flex;
    align-items: center;
    gap: var(--spacer-3);
}

.carousel--buttons .btn {
    opacity: .48;
}

.slide .block h3 {
    margin-bottom: 0;
}

.slide .block header + p {
    margin-top: var(--spacer-3);
}

.slide .block img {
    margin-top: var(--spacer-3);
}

.slide .block + .block {
    margin-top: var(--spacer-3);
}

/* Section tab carousel functionality */
.carousel {
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

.carousel--track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    gap: 0;
    align-items: start;
}

.slide {
    scroll-snap-align: start;
    display: grid;
    padding-top: var(--spacer-4);
    transition: ease-out .5s;
    max-height: 9999px;
}

.hash-target {
    position: absolute;
    top: -35vh;
    width: 100%;
    height: 0px;
    pointer-events: none;
}

.hash-target#slide-1 {
    left: 0;
}

.hash-target#slide-2 {
    left: 100%;
}

.hash-target#slide-3 {
    left: 200%;
}

/*
 * Current slides
 *
 */

/* Slides not in frame should not affect dimensions of the currently visible slide */
.carousel-wrapper:not(:has(:target)) .carousel--track .slide:not(:first-of-type),
.carousel-wrapper:has(#slide-1:target) .carousel--track .slide:not(:nth-of-type(1)),
.carousel-wrapper:has(#slide-2:target) .carousel--track .slide:not(:nth-of-type(2)),
.carousel-wrapper:has(#slide-3:target) .carousel--track .slide:not(:nth-of-type(3)) {
    max-height: 0px;
}


/* Set correct button to a "current" style */
.carousel-wrapper:not(:has(:target)) .carousel--buttons [href="#slide-1"] {
    opacity: 1;
}

.carousel-wrapper:has(#slide-1:target) .carousel--buttons [href="#slide-1"] {
    opacity: 1;
}

.carousel-wrapper:has(#slide-2:target) .carousel--buttons [href="#slide-2"] {
    opacity: 1;
}

.carousel-wrapper:has(#slide-3:target) .carousel--buttons [href="#slide-3"] {
    opacity: 1;
}


/* ----- Switchers ----- */
.switcher-holder {
    display: flex;
    align-items: center;
    gap: var(--spacer-1);
    padding-inline: var(--spacer-2);
}

.switcher-holder form {
    position: relative;
    margin: 0;
}

.switcher-holder select {
    position: absolute;
    inset: 0;
    opacity: 0;
    z-index: 2;
}

.switcher-holder button {
    position: relative;
    z-index: 1;
}

.switcher-holder select:hover + button {
    color: var(--btn-color-secondary-hover);
    border-color: var(--btn-border-color-secondary-hover);
}

/* ----- Text ----- */
.text-content h2,
.text-content .h2 {
    margin-top: var(--spacer-5);
}

.text-content h2:first-of-type,
.text-content .h2:first-of-type {
    margin-top: 0;
}

.text-content p {
    margin-top: 0;
}


/* ----- Page templates ----- */
body.page-template-default main {
    padding-top: var(--spacer-9);
}



/* ----- Footer ----- */
.footer {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacer-3);
    z-index: 1;
    padding-inline: var(--spacer-5);
    padding-bottom: var(--spacer-5);
}

footer::after {
    content: "";
    z-index: 0;
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    min-height: 50vh;
    transform: translateY(-50%);
    background-image: radial-gradient(ellipse at bottom center, var(--clr-gradient-hero-1-rgba), transparent 50%), radial-gradient(ellipse at top left, var(--body-bg-color-rgb-0), transparent 50%), radial-gradient(ellipse at top right, var(--body-bg-color-rgb-0), transparent 50%);
    background-image: radial-gradient(ellipse at center, var(--clr-gradient-hero-1-rgba), transparent 50%), radial-gradient(ellipse at top left, var(--body-bg-color-rgb-0), transparent 50%), radial-gradient(ellipse at top right, var(--body-bg-color-rgb-0), transparent 50%);
}

.footer > * {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--nav-item-height);
    background-color: var(--btn-bg-color-secondary);
    border-radius: 100px;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.footer .footer--holder {
    display: flex;
    padding-inline-end: var(--spacer-4);
    align-items: center;
    justify-content: space-between;
    flex-grow: 1;
    height: var(--nav-item-height);
}

.footer--holder .logo-link {
    display: flex;
    align-items: center;
}

.footer--holder .logo-holder {
    border-color: transparent;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}


/* ----- Responsiveness ----- */
@media (max-width: 992px) {
    .branding#branding {
        top: auto !important;
        bottom: var(--spacer-3);
        padding-top: 0;
    }

    .branding .nav-right .menu-item--info {
        order: 1;
    }

    .branding .nav-right .menu-item--info a {
        border-color: transparent;
        background-color: transparent;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .branding .nav-right .switcher-holder {
        order: 2;
    }

    .branding .nav-right .menu-item--login {
        order: 3;
    }

    .branding .btn:has(.button-label) {
        padding-inline: var(--spacer-3);
    }

    .branding .btn:not(.btn-primary) .button-label {
        display: none;
    }

    .branding .nav-item--logo .ha-logo--text {
        display: none;
    }

    .branding .nav-right {
        padding-block: 0;
        padding-inline-start: var(--spacer-2);
        display: flex;
        align-items: center;
        height: var(--nav-item-height);
        border-width: 1px;
        border-style: solid;

        border-color: var(--box-border-color);
        background-color: var(--box-background-color);
        border-radius: var(--box-border-radius);
        -webkit-backdrop-filter: var(--box-backdrop-filter);
        backdrop-filter: var(--box-backdrop-filter);
    }

    .branding .nav-right ul {
        gap: var(--spacer-1);
    }

    .branding .nav-right .nav-item.btn-secondary {
        height: auto;
    }

    .branding .nav-right .switcher-holder {
        border-color: transparent;
        background: transparent;
        padding-inline: 0;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
}

.branding .nav-right .menu-item--login {
    margin-inline-start: var(--spacer-3);
}

.section--hero .container {
    flex-flow: column;
    padding-top: 25vh;
    height: auto;
}

.section--hero .section--hero--image {
    right: 0;
    max-width: 80%;
}

.section--hero .section--hero--image img {
    max-width: 100%;
}

.section--hero .section--buttons {
    flex-flow: column;
    align-items: flex-start;
    gap: var(--spacer-1);
}

.section--boxed .section--content {
    --section-boxed-padding-block: var(--spacer-5);
    --section-boxed-padding-inline: var(--spacer-5);

    padding-top: var(--spacer-7);
}

section .blocks {
    grid-template-columns: repeat(1, 1fr);
}

section .block img {
    max-width: 100%;
    height: auto;
}

section .carousel--buttons {
    flex-flow: column;
    align-items: flex-start;
    gap: var(--spacer-1);
}

.footer {
    margin-bottom: var(--spacer-6);
}
}

@media (max-width: 480px) {
.section--hero .section--buttons .btn {
    width: 100%;
}

.branding#branding {
    padding-inline: var(--spacer-2);
}

.branding#branding .nav-item--logo {
    padding-inline: var(--spacer-3);
}

.branding#branding .btn .button-label {
    display: none;
}
}