/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme
 Author:       Esben Rahbek
 Author URI:   https://esbenrahbek.eu 
 Template:     generatepress
 Version:      0.1
*/


/* @link https://utopia.fyi/type/calculator?c=320,18,1.2,1240,20,1.25,10,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

:root {
  --step--2: clamp(0.78rem, calc(0.77rem + 0.03vw), 0.80rem);
  --step--1: clamp(0.94rem, calc(0.92rem + 0.11vw), 1.00rem);
  --step-0: clamp(1.13rem, calc(1.08rem + 0.22vw), 1.25rem);
  --step-1: clamp(1.35rem, calc(1.28rem + 0.37vw), 1.56rem);
  --step-2: clamp(1.62rem, calc(1.50rem + 0.58vw), 1.95rem);
  --step-3: clamp(1.94rem, calc(1.77rem + 0.87vw), 2.44rem);
  --step-4: clamp(2.33rem, calc(2.08rem + 1.25vw), 3.05rem);
  --step-5: clamp(2.80rem, calc(2.45rem + 1.77vw), 3.82rem);
  --step-6: clamp(3.36rem, calc(2.87rem + 2.45vw), 4.77rem);
  --step-7: clamp(4.03rem, calc(3.36rem + 3.36vw), 5.96rem);
  --step-8: clamp(4.84rem, calc(3.93rem + 4.54vw), 7.45rem);
  --step-9: clamp(5.81rem, calc(4.58rem + 6.10vw), 9.31rem);
  --step-10: clamp(6.97rem, calc(5.34rem + 8.13vw), 11.64rem);
}



/* 

TYPOGRAPHY

*/



@font-face {
    font-family: DTGetai;
    src: url('/fonts/DTGetaiGroteskDisplay-Black.otf');
}

.secondaryfont, p {
    font-family: system-ui, sans-serif;
}

h1, h2, h3, h4, .main-title, .main-navigation a {
    font-family: DTGetai, system-ui, sans-serif;
}

h2 {
    font-size: var(--step-3);

}

h3 {
    font-size: var(--step-3);
    margin-bottom: 0;
}

a {
    text-underline-offset: 0.12em;
}

.wp-block-file {
    font-family: system-ui, sans-serif;
    font-size: var(--step-0);
    text-align: center;
}

.statement-number {
    font-size: var(--step-10);
    color: rgba(255, 255, 255, 0.5);
}


div.statement {
    padding: var(--step-6) var(--step-4);
}


/* Statement effects */
.statement, #comments  {
    border-width: 0.2em;
    border-style: solid;
    border-radius: 4em;
}

div.statement h2 {
    margin-bottom: 0;
}


img {
    width: 100%;
    border-radius: 2em;
}

.downloadcontainer {
    background-color: oklch(27.6% 0 339.2);
    border-radius: 2em;
    padding-bottom: var(--step--2);
}

.downloadcontainertoc {
    background-color: oklch(12% 0 360);
    border-radius: 1em;
    padding-bottom: var(--step--2);
    font-family: system-ui, sans-serif;
}

.downloadcontainertoc {
    font-family: system-ui, sans-serif;
}


/* Statement JUST word styling – scribble underline 
.statement-just {
    position: relative;
    white-space: nowrap;
    &:after {
    --deco-height: 0.3125em;
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(var(--deco-height) * -0.625);
    height: var(--deco-height);
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='64' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(/wp-content/themes/generatepress_child/%23a)'%3E%3Cpath d='M-17 30.5C-1 22 72-4 54 13 37.9 28.2-2.5 57.5 16 55.5s72-29 104-40' stroke='%2300FDCF' stroke-width='10'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h100v64H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
    background-size: auto 100%;
    background-repeat: round;
    background-position: 0em;
    }
}
*/


/* Style author list on About*/
li.authors {
    list-style: none;
}

.ul-authors {
    margin: 0;
    font-family: system-ui, sans-serif;
}


/*Ornament styling*/
.ornamentseparator {
    color: #0D774A;
    font-weight: bold;
    font-size: var(--step-2);
    margin-top: var(--step-8);
    margin-bottom: var(--step-8);
}




/* Site Title styling */
.inside-header {
    padding: 6em 0em 8em 0em;
}

p.main-title {
    font-size: var(--step-6);
    padding-left: auto;
    padding-right: auto;
    line-height: 1.2em;
}



/* Change title size for mobile */
@media (max-width: 767px) {
    /* CSS in here for mobile only */

    div.radioyesnomaybe {
    flex-wrap: wrap;
    justify-content: start;
    }

    .form-control {
    padding: 0.2em 0em 0.2em 0em;
    }

/*    div.statement, .petition_form {
        padding: 1em;
    }*/

}



/* Radio button styling – https://moderncss.dev/pure-css-custom-styled-radio-buttons/ */

        :root {
          --form-control-color: #0D774A;
        }

        /*
        *,
        *:before,
        *:after {
          box-sizing: border-box;
        }
        */

        .form-control {
          font-family: DTGetai, system-ui, sans-serif;
          font-size: var(--step-3);
          font-weight: bold;
          line-height: 1.1;
          display: grid;
          grid-template-columns: 1em auto;
          gap: 0.5em;
        }

        input[type="radio"] {
          /* Add if not using autoprefixer */
          -webkit-appearance: none;
          appearance: none;
          /* For iOS < 15 to remove gradient background */
          background-color: #fff;
          /* Not removed via appearance */
          margin: 0;

          font: inherit;
          color: currentColor;
          width: 1.15em;
          height: 1.15em;
          border: 0.15em solid currentColor;
          border-radius: 50%;

          align-items: center;

          display: grid;
          place-content: center;
        }

        input[type="radio"]::before {
          content: "";
          width: 0.65em;
          height: 0.65em;
          border-radius: 50%;
          transform: scale(0);
          transition: 120ms transform ease-in-out;
          box-shadow: inset 1em 1em var(--form-control-color);

          /* Windows High Contrast Mode */
          background-color: CanvasText;
        }

        input[type="radio"]:checked::before {
          transform: scale(1);
        }

        input[type="radio"]:focus {
          outline: max(2px, 0.15em) solid currentColor;
          outline-offset: max(2px, 0.15em);
        }


/* Buttons */
/* Download buttons */
.button-download {
    padding: 0.2em 0.4em;
    background-color: transparent;
    border: 0.1em solid;
    border-radius: 2em;
    cursor: pointer;
    text-transform: uppercase;
    align-items: center;
    font-size: var(--step-7);
    transition: .18s ease-in-out;
}

.button-download:hover {
    background-color: #0D774A;
}

.button-downloadall {
    font-family: system-ui, sans-serif;
    border-width: 0.2em;
    border-style: solid;
    border-radius: 4em;
    border-color: white;
}

/*section#petition {
    padding: 4rem;
    margin: 2rem auto;
    background-color: #0D774A;
    border-width: 0.2em;
    border-style: solid;
    border-radius: 4em;
}*/

.petition_form, .petition_list {
    padding: var(--step-6) var(--step-4);
    margin: 2rem auto;
    background-color: #0D774A;
    border-width: 0.2em;
    border-style: solid;
    border-radius: 4em;
}

#petition_message {
    padding: var(--step-6) var(--step-4);
    margin: 2rem auto;
    background-color: #ffffff;
    border-width: 0.2em;
    border-style: solid;
    border-radius: 4em;
    border-color: #0D774A;
    color: #000000;
}

#petition_message p {
    margin-bottom: 0;
    text-align: center;
    font-size: var(--step-3);
}

.petition_form input, #submit_btn {
    border-radius: 4em;
    margin-bottom: 2rem;
    width: 100%;
    font-size: var(--step-2);
}

.petition_form input {
    font-family: system-ui, sans-serif;
}

#submit_btn {
    border: 0.1em solid #222222;
    font-family: DTGetai;
}


.petition_form label {
    font-size: var(--step-0);
}

.petition_list {
    font-family: system-ui, sans-serif;
}

/*.petition_list tr {
    padding-bottom: var(--step-2);
}
*/
.petition_list h3, .petition_form h3 {
    font-family: DTGetai;
    margin-bottom: var(--step--2);
}

th {
    text-align: left;
}

table, td, th {
    border: none;
    padding: 0.4rem 0rem 0.4rem 0rem;
}

img#captcha_image {
    border-radius: 2rem;
    width: auto;
}

#captcha_response {
    width: 100%;
    display: inline-block;
}

#captcha_image {
    display: inline-block;
}

.entry-content {
    padding-left: var(--step--1);
    padding-right: var(--step--1);
}



/* Navigation */
.main-navigation .main-nav,
.main-navigation .main-nav > ul > li {
    flex: 1;
    text-align: center;
}

.main-navigation .main-nav>ul {
    padding-left: var(--step-1);
    padding-right: var(--step-1);
    gap: var(--step-5);
}

.main-navigation .main-nav {
    max-width: 1400px;
}

.main-navigation .main-nav ul li[class*="current-menu-"] > a {
    border-radius: 8em;
}


.main-navigation .main-nav ul li a {
    border-width: 0.2em;
    border-style: solid;
    border-radius: 4em;
}

nav.main-navigation {
    margin-top: 2em;
}