/*
    Theme Name:   APE infonano
    Description:  Very simple theme to handle infonano (certified ISO-1664)
    Author:       Benjamin Menant
    Author URI:   http://menant-benjamin.fr/
    Template:     ape-petition-theme
    Version:      3.0.4
    Text Domain:  infonano-theme
    License:      WTFPL
*/

@charset "UTF-8";
@import url("../ape-petition-theme/style-starter.css");
@font-face {
  font-family: 'Oswald';
  src: url("./fonts/Oswald-Regular.ttf") format("truetype");
}

:root {
    font-size: 3vw;
}

@media (min-width: 283px) and (max-width: 687px) {
    :root {
        font-size: 1.5vw;
    }
}

@media (min-width: 688px) and (max-width: 901px) {
    :root {
        font-size: 0.9vw;
    }
}

@media (min-width: 902px) {
    :root {
        font-size: 0.75vw;
    }
}

html {
    overflow-x: hidden;
}

body {
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif;
    font-size: 1.875rem;
    color: #262733;
    background: #fdfcfc;
}

#content {
    /*border-top: 1px solid #dad5cc;*/
    margin: 0 1em;
}

/*
 * Fix Safari iOS: force iframe responsive...
 * See https://stackoverflow.com/questions/23083462/how-to-get-an-iframe-to-be-responsive-in-ios-safari#23083463
 */
.hentry {
    width: 1px;
    min-width: 100%;
}

.step-sign,
h1 {
    display: block;
    font-family: Oswald, sans-serif;
    font-size: 1.875rem;
    font-weight: normal;
    letter-spacing: 0.030em;
    line-height: 1.2;
    margin: 1em 0;
    text-align: center;
    text-transform: uppercase;
}

@media (min-width: 688px) {
    .step-sign,
    h1 {
        text-align: initial;
    }
}

a:link,
a:visited {
    color: #EA001B;
    text-decoration: underline;
}

a:hover,
a:focus {
    text-decoration: none;
}

/*
 * FORM
 */

.ape-petition-form-field-email-message label {
    position: absolute;
    top: 0;
    transform: scale(0);
}

.separator {
    margin-top: 2.875rem;
    border-top: 1px solid #dad5cc;
}

.share-wrapper {
    border-bottom: 1px solid #dad5cc;
    border-top: 1px solid #dad5cc;
    margin: 1em 0;
}

select, button, input[type=submit] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 0 none;
    margin: 0;
    padding: 0;
}

.ape-petition-form-cgu {
    margin-bottom: 1.25rem;
}

input[type=checkbox] {
    vertical-align: middle;
    margin-right: 0.625rem;
}

input:not([type=checkbox]),
select {
    background: #f7f4ee;
    background: #f2efe988;
    border: 1px solid #dad5cc;
    border-radius: 0.875rem;
    box-sizing: border-box;
    color: #262733;
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif;
    font-size: 1.875rem;
    height: 5.635rem;
    letter-spacing: 0.03em;
    line-height: 5.635rem;
    margin-bottom: 1.25rem;
    padding-left: 1.875rem;
    padding-right: 1.875rem;
    width: 100%;
}

textarea {
    padding: 1.875rem;
    font-family: monospace;
    background: #f7f4ee;
    background: #f2efe988;
    border: 1px solid #dad5cc;
    border-radius: 0.875rem;
    box-sizing: border-box;
    color: #6d6d6d;
    max-width: 100%;
}

@media (min-width: 688px) {
    input:not([type=checkbox]),
    select {
        width: initial;
    }
}

input[type=text]:focus,
input[type=email]:focus,
select:focus,
textarea:focus {
    background: #fdfcfc;
}

.ape-petition-form-field-country {
    position: relative;
    color: #6d6d6d;
    font-size: 1rem;
}

@media (min-width: 688px) {
    .ape-petition-form-field-country {
        display: inline-block;
    }

    .ape-petition-form-field-email > input {
        width: 25em;
    }
    .ape-petition-form-field-firstname > input,
    .ape-petition-form-field-lastname > input {
        width: 15em;
    }
    .ape-petition-form-field-firstname,
    .ape-petition-form-field-postcode {
        /*float: left;*/
        /*margin-right: 1.875rem;*/
    }
    .ape-petition-form-field-city > input {
        width: 20em;
    }
    .ape-petition-form-field-postcode > input {
        width: 10em;
    }
}

.ape-petition-form-field-country::before,
.ape-petition-form-field-country::after {
    content: '';
    width: 0;
    height: 0;
    border-left: 5em solid transparent;
    border-right: 5em solid transparent;
    pointer-events: none;
    position: absolute;
    right: 0;
}

.ape-petition-form-field-country::before {
    border-bottom: 5em solid;
    -webkit-transform: scale(0.2) translate(10em, -2em);
    transform: scale(0.2) translate(10em, -2em);
}

.ape-petition-form-field-country::after {
    border-top: 5em solid;
    -webkit-transform: scale(0.2) translate(10em, -28em);
    transform: scale(0.2) translate(10em, -28em);
}

.disclaimer {
    font-size: 1.5625rem;
    color: #6d6d6d;
    margin-bottom: 3.75rem;
}

input[type=submit] {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    justify-content: center;

    text-transform: uppercase;
    letter-spacing: 0.02em;
    text-align: center;
    font-size: 1.875rem;
    font-weight: 700;
    color: #fdfcfc;
    border: 0 none;
}

.card-orange input[type=submit],
.card-suspected input[type=submit] {
    box-shadow: 0 0.3125rem 0 #ec7a00;
    background-color: #fb8800;
}

.card-orange input[type=submit]:hover,
.card-orange input[type=submit]:focus,
.card-suspected input[type=submit]:hover,
.card-suspected input[type=submit]:focus {
    background-color: #fa9900;
}

.card-green input[type=submit],
.card-reformed input[type=submit] {
    box-shadow: 0 0.3125rem 0 #4ca200;
    background-color: #6ac31c;
}

.card-green input[type=submit]:hover,
.card-green input[type=submit]:focus,
.card-reformed input[type=submit]:hover,
.card-reformed input[type=submit]:focus {
    background-color: #80d337;
}

.card-red input[type=submit],
.card-contains_nano input[type=submit] {
    box-shadow: 0 0.3125rem 0 #9d0012;
    background-color: #ea001b;
}

.card-red input[type=submit]:hover,
.card-red input[type=submit]:focus,
.card-contains_nano input[type=submit]:hover,
.card-contains_nano input[type=submit]:focus {
    background-color: #ff293d;
}