/*
 * Ravendusk Homepage
 */

@import url('https://fonts.googleapis.com/css2?family=Jost:wght@400;500;600;700&display=swap');

:root {
    /* Layout */
    --button-width: 425px;
    --button-gap: 12px;
    --button-radius: 5px;

    /* Colors */
    /* --page-background: rgb(11 16 33); */
    --button-background: rgb(30 38 63);

    --text-color: rgb(255 255 255);
    --description-color: rgb(0 255 128);
    --accent-color: rgb(255 255 255);

    /* Card shadow */
    --card-shadow: 0 4px 18px rgb(0 0 0 / 22%);

    /* Typography */
    --page-font: "Jost", sans-serif;
}


/* --------------------------------------------------
   PAGE
-------------------------------------------------- */

html,
body,
#page_wrapper,
#inner_wrapper {
    min-height: 100vh;

    background: var(--page-background) !important;
    color: var(--text-color) !important;

    font-family: var(--page-font) !important;
}

button,
input,
textarea,
select {
    font-family: var(--page-font) !important;
}


/* --------------------------------------------------
   LAYOUT
-------------------------------------------------- */

#layout-groups {
    display: flex !important;
    justify-content: center !important;
}

.services-group {
    flex: 0 0 auto !important;

    width: var(--button-width) !important;
    max-width: var(--button-width) !important;

    margin-left: auto !important;
    margin-right: auto !important;
}

.services-list {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;

    width: 100% !important;
    gap: var(--button-gap) !important;
}

.services-list > .service {
    flex: 0 0 auto !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* --------------------------------------------------
   SERVICE CARDS
-------------------------------------------------- */

.service-card {
    box-sizing: border-box !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;

    background: var(--button-background) !important;
    color: var(--text-color) !important;

    border-radius: var(--button-radius) !important;

    overflow: hidden !important;

    box-shadow:
        inset 0 0 0 1px rgb(160 160 160 / 25%),
        var(--card-shadow) !important;

    opacity: 0.85 !important;
}


/* --------------------------------------------------
   SERVICE TEXT
-------------------------------------------------- */

.service-card a,
.service-card span,
.service-card p,
.service-card div {
    color: inherit;
}

.service-card h1,
.service-card h2,
.service-card h3,
.service-card h4,
.service-card [class*="font-medium"],
.service-card [class*="font-semibold"],
.service-card [class*="font-bold"] {
    color: var(--text-color) !important;
}

.service-card .service-description,
.service-card .service-description * {
    color: var(--description-color) !important;
}


/* --------------------------------------------------
   PAGE / GROUP TITLES
-------------------------------------------------- */

h1,
h2,
h3,
.services-group > h1,
.services-group > h2,
.services-group > h3 {
    color: var(--text-color) !important;
}

h1[class*="text-"],
h2[class*="text-"],
h3[class*="text-"],
.services-group [class*="text-"] {
    color: var(--text-color) !important;
}


/* --------------------------------------------------
   WIDGET TEXT
-------------------------------------------------- */

.service-card [class*="text-"] {
    color: var(--text-color) !important;
}

/* Re-apply description color after widget text rule */

.service-card .service-description,
.service-card .service-description * {
    color: var(--description-color) !important;
}


/* --------------------------------------------------
   ICONS
-------------------------------------------------- */

.service-card svg {
    color: var(--accent-color) !important;
}


/* --------------------------------------------------
   LINKS
-------------------------------------------------- */

a {
    color: var(--accent-color) !important;
}


/* --------------------------------------------------
   OPTIONAL HOVER
-------------------------------------------------- */

/*
.service-card:hover {
    background: rgb(35 44 72) !important;
}
*/