/* COLOURS */

:root {
    --body-copy: #262526;
    --pink-button: #726372;
    --bg-colour: rgba(209, 187, 192, 0.90);
    --bg-box-grey: #F5F5F5;
    --chart-scale-colour: #999;
    --chart-lines-colour: #DDD;

    --age-colour-1: 138, 150, 93;
    --age-colour-2: 101, 138, 144;
    --age-colour-3: 114, 99, 114;
    --age-colour-4: 205, 117, 104;
    --age-colour-5: 175, 109, 123;
}
body { color: var(--body-copy); }

body.landing,
#call-to-action .content { background-color: var(--bg-colour); }

#age-tabs .age-1,
#colour-scheme.age-1 em,
#colour-scheme.age-1 #status,
#colour-scheme.age-1 #explore,
#colour-scheme.age-1 .bar .inner, #colour-scheme.age-1 .bar .flag span,
#colour-scheme.age-1 .box .toggle { color: rgb(var(--age-colour-1)) !important; }
#age-tabs .age-2,
#colour-scheme.age-2 em,
#colour-scheme.age-2 #status,
#colour-scheme.age-2 #explore,
#colour-scheme.age-2 .bar .inner, #colour-scheme.age-2 .bar .flag span,
#colour-scheme.age-2 .box .toggle { color: rgb(var(--age-colour-2)) !important; }
#age-tabs .age-3,
#colour-scheme.age-3 em,
#colour-scheme.age-3 #status,
#colour-scheme.age-3 #explore,
#colour-scheme.age-3 .bar .inner, #colour-scheme.age-3 .bar .flag span,
#colour-scheme.age-3 .box .toggle { color: rgb(var(--age-colour-3)) !important; }
#age-tabs .age-4,
#colour-scheme.age-4 em,
#colour-scheme.age-4 #status,
#colour-scheme.age-4 #explore,
#colour-scheme.age-4 .bar .inner, #colour-scheme.age-4 .bar .flag span,
#colour-scheme.age-4 .box .toggle { color: rgb(var(--age-colour-4)) !important; }
#age-tabs .age-5,
#colour-scheme.age-5 em,
#colour-scheme.age-5 #status,
#colour-scheme.age-5 #explore,
#colour-scheme.age-5 .bar .inner, #colour-scheme.age-5 .bar .flag span,
#colour-scheme.age-5 .box .toggle { color: rgb(var(--age-colour-5)) !important; }

#colour-scheme.age-1 #status, #colour-scheme.age-1 blockquote { background-color: rgba(var(--age-colour-1), 0.17); }
#colour-scheme.age-2 #status, #colour-scheme.age-2 blockquote { background-color: rgba(var(--age-colour-2), 0.17); }
#colour-scheme.age-3 #status, #colour-scheme.age-3 blockquote { background-color: rgba(var(--age-colour-3), 0.17); }
#colour-scheme.age-4 #status, #colour-scheme.age-4 blockquote { background-color: rgba(var(--age-colour-4), 0.17); }
#colour-scheme.age-5 #status, #colour-scheme.age-5 blockquote { background-color: rgba(var(--age-colour-5), 0.17); }

#colour-scheme.age-1 .bar.range .inner { background-color: rgba(var(--age-colour-1), 0.3); }
#colour-scheme.age-2 .bar.range .inner { background-color: rgba(var(--age-colour-2), 0.3); }
#colour-scheme.age-3 .bar.range .inner { background-color: rgba(var(--age-colour-3), 0.3); }
#colour-scheme.age-4 .bar.range .inner { background-color: rgba(var(--age-colour-4), 0.3); }
#colour-scheme.age-5 .bar.range .inner { background-color: rgba(var(--age-colour-5), 0.3); }

#age-tabs a.age-1.active, #age-tabs a.age-1:hover,
#colour-scheme.age-1 .bar .inner, #colour-scheme.age-1 .bar .flag:before,
#colour-scheme.age-1 a.button, #colour-scheme.age-1 a.button:hover { background-color: rgb(var(--age-colour-1)); }
#age-tabs a.age-2.active, #age-tabs a.age-2:hover,
#colour-scheme.age-2 .bar .inner, #colour-scheme.age-2 .bar .flag:before,
#colour-scheme.age-2 a.button, #colour-scheme.age-2 a.button:hover,
#colour-scheme.age-2 .chart.vertical .bar:first-child,
#colour-scheme.age-2 .chart ul.legend li:first-child::before { background-color: rgb(var(--age-colour-2)); }
#age-tabs a.age-3.active, #age-tabs a.age-3:hover,
#colour-scheme.age-3 .bar .inner, #colour-scheme.age-3 .bar .flag:before,
#colour-scheme.age-3 a.button, #colour-scheme.age-3 a.button:hover,
#colour-scheme.age-3 .chart.vertical .bar:first-child,
#colour-scheme.age-3 .chart ul.legend li:first-child::before { background-color: rgb(var(--age-colour-3)); }
#age-tabs a.age-4.active, #age-tabs a.age-4:hover,
#colour-scheme.age-4 .bar .inner, #colour-scheme.age-4 .bar .flag:before,
#colour-scheme.age-4 a.button, #colour-scheme.age-4 a.button:hover,
#colour-scheme.age-4 .chart.vertical .bar:first-child,
#colour-scheme.age-4 .chart ul.legend li:first-child::before { background-color: rgb(var(--age-colour-4)); }
#age-tabs a.age-5.active, #age-tabs a.age-5:hover,
#colour-scheme.age-5 .bar .inner, #colour-scheme.age-5 .bar .flag:before,
#colour-scheme.age-5 a.button, #colour-scheme.age-5 a.button:hover,
#colour-scheme.age-5 .chart.vertical .bar:first-child,
#colour-scheme.age-5 .chart ul.legend li:first-child::before { background-color: rgb(var(--age-colour-5)); }

#colour-scheme.age-1 .icon circle:first-child { fill: rgb(var(--age-colour-1)); }
#colour-scheme.age-2 .icon circle:first-child { fill: rgb(var(--age-colour-2)); }
#colour-scheme.age-3 .icon circle:first-child { fill: rgb(var(--age-colour-3)); }
#colour-scheme.age-4 .icon circle:first-child { fill: rgb(var(--age-colour-4)); }
#colour-scheme.age-5 .icon circle:first-child { fill: rgb(var(--age-colour-5)); }

#age-tabs a.age-1,
#colour-scheme.age-1 .box,
#colour-scheme.age-1 .bar .flag { border-color: rgb(var(--age-colour-1)); }
#age-tabs a.age-2,
#colour-scheme.age-2 .box,
#colour-scheme.age-2 .bar .flag { border-color: rgb(var(--age-colour-2)); }
#age-tabs a.age-3,
#colour-scheme.age-3 .box,
#colour-scheme.age-3 .bar .flag { border-color: rgb(var(--age-colour-3)); }
#age-tabs a.age-4,
#colour-scheme.age-4 .box,
#colour-scheme.age-4 .bar .flag { border-color: rgb(var(--age-colour-4)); }
#age-tabs a.age-5,
#colour-scheme.age-5 .box,
#colour-scheme.age-5 .bar .flag { border-color: rgb(var(--age-colour-5)); }

/* BODY */

* { box-sizing: border-box; }

body {
    margin: 0 0 150px 0;
    padding: 0;
    text-align: center;
    font-size: 18px;
    line-height: normal;
}

/* FONTS */

h1 > span,
section#result h2,
#call-to-action h2 {
    font-weight: normal;
    font-family: Authenia-Textured;
}
h1, h2, body.landing h3,
#status, #explore {
    font-family: 'butlerbold';
    font-weight: bold;
    font-style: normal;
}

/* HEADINGS */

h1 {
    margin: 0;
    font-size: 3em; /* 54px */
    line-height: 1.15em; /* 61px */
    letter-spacing: -1.62px;
}
h1 > span {
    position: relative;
    left: -0.1em; /* -8px */
    display: inline-block;
    font-size: 1.5em; /* 80px */
    color: white;
    transform: rotate(-6deg) !important;
}
h2 { font-size: 35px; margin-bottom: 0.5em; line-height: 1.1em; }
section#result h2 { font-size: 44px; margin-bottom: 5px; }
h3 { font-size: 16px; font-weight: bold; margin-top: 1em; }
body.landing h3 { font-size: 22px; }

em {
    font-weight: bold;
    font-style: normal;
}

#explore {
    margin: 1.5em 0 1em 0;
    text-align: left;
    font-size: 22px;
}

/* STRUCTURE */

p {
    margin-bottom: 25px;
}

.hidden { display: none !important; }

section {
    padding: 1em 0;
}

.container {
    max-width: 768px;
    margin: 0 auto;
    padding: 0 1em;
}
body.landing .container {
    max-width: 630px;
}

.box, blockquote {
    padding: 7px;
    border-style: solid;
    border-width: 1px;
}
.box .top {
    display: flex;
}
.box .top .icon {
    width: 35px;
    height: 35px;
    margin-right: 0.5em;
}
.box .top h3 {
    margin-top: 0.5em;
    text-align: left;
}
.box .toggle {
    width: 45px;
    margin-top: -10px;
    margin-left: auto;
    font-size: 35px;
    cursor: pointer;
}
.box .toggle:before { content: '\2013';/* dash */ }
.box .toggle.closed:before { content: '\002B';/* plus */ }

.cols {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.col {
    overflow: hidden;
    min-width: 260px;
    margin-top: 1.5em;
}
.col + .col {
    text-align: left;
    padding-left: 20px;
    padding-right: 20px;
}
.box, blockquote,
.col:first-child, a.button,
#call-to-action .content {
    border-radius: 10px;
}
.col:first-child {
    padding-bottom: 7px;
    font-size: 0.9em;
    background-color: var(--bg-box-grey);
}

blockquote {
    padding: 10px;
    border: none;
}

/* HEADER */

body#fertility-calculator header {
    position: relative;
    height: auto;
    border: none;
}
header #supported-by {
    padding: 0.8em;
    background: white;
    font-size: 16px;
}
header #supported-by #GR-logo {
    width: 200px;
    margin-left: 0.5em;
    vertical-align: middle;
}
header #title {
    padding: 2em 0;
    font-size: 0.5em;
    background: var(--bg-colour);
}
body.landing header #title {
    padding: 1em 0;
    font-size: 1em;
}

/* LANDING PAGE */

input {
    border: none;
    border-radius: 0.4em;
}
#age_input {
    width: 6em;
    margin: 0.7em 0 1em 0;
    padding: 0.6em;
    text-align: center;
    font-size: 22px;
}
#age_input.error {
    border: 1px solid red;
}
#age_submit {
    width: 320px;
    padding: 0.5em;
    background-color: var(--pink-button);
    color: white;
    font-size: 26px;
    font-family: 'Butler';
    font-weight: 500;
    font-style: normal;
}

/* RESULTS PAGE */

section#tabs {

}
section#tabs.sticky {
    position: fixed;
    top: 0;
    width: 100%;
    background: white;
    z-index: 100;
    box-shadow: 0 0 50px rgba(0,0,0,0.1);
}
#age-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 1em;
    font-size: 0.8em;
    user-select: none;
}
@media only screen and (max-width: 480px) {
    section#tabs { padding-top: 0.5em; }
    #age-tabs {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        margin-top: 0;
    }
}
#age-tabs a {
    /* display: inline-block; */
    flex: 0 0 auto;
    width: 9em;
    margin: 0.4em;
    padding: 0.2em;
    font-weight: bold;
    text-decoration: none;
    border: 1px solid #000;
    border-radius: 2em;
    opacity: 0.5;
    cursor: pointer;
}
#age-tabs a.active,
#age-tabs a:hover {
    color: white !important;
    opacity: 1;
}

#status {
    padding: 1em;
    font-size: 24px;
    border-radius: 14px;
}

a.button, a.button:hover {
    display: inline-block;
    width: 300px;
    max-width: 100%;
    margin-top: 10px;
    border: none;
    color: white;
}
#restart .button {
    margin-bottom: 2em;
}

#call-to-action .content {
    padding: 20px 15px 25px 15px;
}
#call-to-action h2 {
    margin: 0 0 -0.5em 10px;
    font-size: 50px;
    color: white;
    text-align: left;
}
#call-to-action .cols { margin-top: 15px;}
#call-to-action .col:first-child {
    text-align: left;
    background: none;
}
#call-to-action .col + .col{
    position: relative;
}
#call-to-action .button{
    background-color: rgb(var(--age-colour-3)) !important;
}
@media only screen and (min-width: 641px) { 
    #call-to-action .button{
        position: absolute;
        right: 10px;
        bottom: 5px;
    }
}

/* CHARTS */

.chart, .chart .graph { position: relative; }

.chart.horizontal { margin-top: 55px; }
.chart.vertical { margin-bottom: 2em; }

.bar .inner { width: 100%; } /* Horizontal bars default to full width before animation */

.bar .inner,
.chart.vertical .bar,
.bar.range .flag { transition: all 0.7s ease-out; }

.bar, .bar .inner {
    position: relative;
}
.bar, .bar .inner,
.bar .flag:before {
    height: 36px;
    border-radius: 18px;
    background-color: #E9E9E9;
}
.bar.cut .inner {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.bar .inner,
.bar.range .flag:before {
    display: block;
    content: '.';
    height: 36px;
    color: transparent;
}
.bar .flag {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0;
    height: 65px;
    border-style: dashed;
    border-right-width: 1px;
    border-left: none;
    border-top: none;
    border-bottom: none;
}
.bar .flag.extra { height: 80px; }

.bar.range .flag {
    width: 0; /* Range width before animation */
    border-left-style: dashed;
    border-left-width: 1px;
}
.bar.range .flag:before {
    position: absolute;
    bottom: 0;
    width: 100%;
    border-radius: 12px;
}
.bar .flag span {
    position: absolute;
    top: 0;
    left: calc(100% + 0.2em);
    width: 4em;
    text-align: left;
    line-height: 0.6em;
    font-size: 28px;
    font-weight: bold;
}
.bar .flag span i {
    padding-left: 4px;
    font-size: 14px;
    font-style: normal;
}
.scale {
    display: flex;
    justify-content: space-between;
    margin: 5px 2px 35px 2px;
    font-size: 0.8em;
}
.chart.vertical .scale {
    flex-direction: column-reverse;
    margin-bottom: 0;
}
.scale span {
    position: relative;
    width: 1px;
    height: 6px;
    background-color: var(--chart-scale-colour);
}
.chart.vertical .scale span {
    width: 87%;
    height: 2.5em;
    margin-left: 13%;
    background: none;
    border-bottom: 1px solid var(--chart-lines-colour);
}
.scale span i {
    position: absolute;
    color: var(--chart-scale-colour);
}
.chart.horizontal .scale span i {
    top: 8px;
    left: -25px;
    width: 50px;
}
.chart.vertical .scale span i {
    left: -13%;
    width: 2em;
    bottom: -0.6em;
    text-align: right;
}
.chart.horizontal .scale span:first-child i {
    left: -4px;
    text-align: left;
}
.chart.horizontal .scale span:last-child i {
    left: initial;
    right: 0;
    text-align: right;
}
.chart.vertical .bars {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    column-gap: 10%;
    position: absolute;
    bottom: 0;
    left: 25%;
    width: 60%;
    height: 100%;
}
.chart.vertical .bar {
    width: 50%;
    height: 100%; /* Bars default to max height before animation */
    border-radius: 50% / 45px;
}
.chart ul.legend {
    margin: 1.5em 0 0 0;
    padding-left: 2.4em;
    list-style: none;
    text-align: left;
    font-size: 0.9em;
    font-weight: bold;
}
.chart ul.legend li::before {
    content: ".";
    display: inline-block;
    width: 1.1em;
    height: 1.1em;
    margin: 0.2em 0.5em 0 -2em;
    font-size: 0.9em;
    border-radius: 50%;
    color: transparent;
}
.chart.vertical .bar,
.chart ul.legend li::before { background-color: rgb(var(--age-colour-1)); }
.chart.vertical .bar:first-child,
.chart ul.legend li:first-child::before { background-color: #c0c5a9; /* rgba(var(--age-colour-1), 0.5); */ }