/*
Theme Name:   R-Mod by Gro Media
Theme URI:    https://gromedia.dk
Author:       Gro Media ApS
Author URI:   https://gromedia.dk
Template:     r-2024 - V1
Function:     All default values
Version:      1.0
*/

/* MISSING: Font kit from Adobe */



/*
*
*
--> GENERIC: Initial styling
*
*
*/

/* REM SCALE MOD */
:root {
--r-rem-scale: 62.5%;
}
/* HTML REM SETTING */
html {
font-size: calc(1 * var(--r-rem-scale));
}
/* CROSS-BROWSER TEXT FONT WEIGHT FIX */
* {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}



/* 
* * * CONTAINER: Max width  * * *
*/

:root {
--r-con-max-width-reg: 1280px;
--r-con-max-width-full: 100%;
--r-con-max-width-xxsm: 160px;
--r-con-max-width-xsm: 240px;
--r-con-max-width-sm: 440px;
--r-con-max-width-sm-med: 920px;
--r-con-max-width-med: 1080px;
}

/* 
* * * CONTAINER: Parent - Outer padding  * * *
*/

:root {
--r-con-parent-outer-horz-padding-reg: 80px;
--r-con-parent-outer-horz-padding-none: 0px;
--r-con-parent-outer-horz-padding-sm: 16px;
--r-con-parent-outer-horz-padding-box: 8px;
}

@media (max-width: 1300px) {
:root {
--r-con-parent-outer-horz-padding-reg: 32px;
}
}

@media (max-width: 767px) {
:root {
--r-con-parent-outer-horz-padding-reg: 16px;
--r-con-parent-outer-horz-padding-box: 0px;
}
}



/* 
* * * CONTAINER: Vertical padding  * * *
*/

:root {


--r-con-vert-padding-reg: 72px;
--r-con-vert-padding-none: 0px;
--r-con-vert-padding-xxxsm: 8px;
--r-con-vert-padding-xxsm: 16px;
--r-con-vert-padding-xsm: 24px;
--r-con-vert-padding-sm: 32px;
--r-con-vert-padding-med: 56px;
--r-con-vert-padding-lg: 108px;
}

@media (max-width: 767px) {
:root {
--r-con-vert-padding-reg: 56px;
--r-con-vert-padding-med: 40px;
--r-con-vert-padding-lg: 56px;
}
}



/* 
* * * CONTAINER: Gap  * * *
*/

:root {
--r-con-gap-reg: 24px;
--r-con-gap-none: 0px;
--r-con-gap-xxsm: 4px;
--r-con-gap-xsm: 8px;
--r-con-gap-sm: 16px;
--r-con-gap-med: 32px;
--r-con-gap-lg: 40px;
}



/*
*
*
--> FONT FAMILY: Text + Heading + Button
*
*
*/

/* MISSING: need font kit from Adobe */

:root {
--r-font-family-reg: "aktiv-grotesk", sans-serif;
--r-font-family-text-reg: var(--r-font-family-reg);
--r-font-family-heading-reg: var(--r-font-family-reg);
--r-font-family-button-reg: var(--r-font-family-reg);
}



/*
*
*
--> FONT WEIGHT: Text + Heading
*
*
*/

:root {

--r-font-weight-reg: 400;
--r-font-weight-thin: 200;
--r-font-weight-light: 300;
--r-font-weight-med: 500;
--r-font-weight-semibold: 600;
--r-font-weight-bold: 700;
--r-font-weight-xbold: 800;
}



/*
*
*
--> FONT SIZE: Text
*
*
*/

:root {
--r-font-size-text-reg: 1.6rem;
--r-font-size-text-xxsm: 1.1rem;
--r-font-size-text-xsm: 1.3rem;
--r-font-size-text-sm: 1.4rem;
--r-font-size-text-lg: 2rem;
}

@media (max-width: 767px) {
:root {
--r-font-size-text-reg: 1.6rem;
--r-font-size-text-xsm: 1.3rem;
--r-font-size-text-sm: 1.4rem;
--r-font-size-text-lg: 2rem;
}
}



/*
*
*
--> FONT LINE HEIGHT: Text
*
*
*/

:root {
--r-font-line-height-text-reg: 1.5em;
--r-font-line-height-text-none: 1em;
}



/*
*
*
--> FONT SIZE: Headings
*
*
*/

:root {
--r-font-size-heading-reg: 3.2rem;
--r-font-size-heading-xsm: 1.8rem;
--r-font-size-heading-sm: 2rem;
--r-font-size-heading-med: 2.4rem;
--r-font-size-heading-lg: 4rem;
}

@media (max-width: 767px) {
:root {
--r-font-size-heading-reg: 2.8rem;
--r-font-size-heading-lg: 3.2rem;
}
}




/*
*
*
--> FONT LINE HEIGHT: Headings
*
*
*/

:root {
--r-font-line-height-heading-reg: 1.2em;
--r-font-line-height-heading-none: 1em;
}



/*
*
*
--> COLORS
*
*
*/

:root {
--r-black: #000000;
--r-black-1: #2A2939;
--r-white: #ffffff;
--r-purple: #ABA4F9;
--r-purple-1: #5142FC;
--r-green: #21C063;
--r-grey-light: #F8F8F8;
--r-border: #E1E5F1;
--r-opacity-1: 0.65;
--r-opacity-2: 0.35;
}



/*
*
*
--> MISC. STYLING
*
*
*/

/* 
* * * BORDER RADIUS  * * *
*/

:root {
--r-border-radius-reg: 8px;
--r-border-radius-sm: 4px;
--r-border-radius-full: 180px;
}

/* 
* * * BOX SHADOW  * * *
*/

:root {
--r-box-shadow: 0 0 8px 0 rgba(0,0,0,.08),0 5px 15px 0 rgba(0,0,0,.08);
--r-box-shadow-1: 0px 4px 11px rgba(0, 0, 0, 0.08);
}



/* Drop filter */
:root {
--r-filter-drop-shadow: drop-shadow(0px 0px 21px rgba(0, 0, 0, 0.1));
}