/*! Notes...

    Author: Jay George
    Author URI: https://jaygeorge.co.uk

    ABOUT THIS CSS
    ===================================================
    - Only edit filename.css, then process with Codekit to output into prod/

*/




/* GROUP ELEMENTS / FRAMEWORK / (NON CORE) / FORMS / (CROSS POLLINATED)
=================================================== */
/* Notes...

    - You should consider increasing specificity depending on the environment e.g. add .site-container to
    the selector for WordPress so rules do not affect wp-admin bar

*/
/* purgecss start ignore */
[type="text"],
[type="email"],
[type="tel"],
[type="password"],
[type="url"],
[type="tel"],
[type="search"],
[type="file"],
textarea {
    vertical-align: top;
    /* =JFG. e.g. search box >> blog or newsletter signup email address */
    padding: 15px;
    margin-block-end: var(--spacing-m);
    /* e.g. fields next to each other */
    margin-right: 0.5rem;
    /* =JFG. Need line height; IE9 bug. Source http://stackoverflow.com/questions/7797103/text-indent-for-a-text-box-in-ie */
    line-height: 1.45;
    border-radius: 2px;
}

[type="file"] {
    padding-inline-start: 0;
    border: 0!important;
    /* e.g. >> /careers/apply */
}
/* purgecss end ignore */


[placeholder],
::-webkit-input-placeholder {
    /* =JFG. "search this website". This needs to be rem
    because sometimes the search form gets embedded in .s-entry-content which could be 1.1em.
    We don't want the placeholder font size getting too big. */
    font-size: 0.95rem;
}

label {
    /* Fixed */
    font-size: 18px;
    line-height: 1.4;
}

/* purgecss start ignore */
textarea {
    width: 100%;
    /* e.g. something like Hubspot might be a bit short */
    min-height: 200px;
}
/* purgecss end ignore */

body [type="checkbox"] {
    /* Override any input styles */
    box-shadow: none;
}

/* Don't carpet bomb since we don't want a checkbox 100% width */
[type="email"],
[type="text"],
[type="url"],
[type="password"],
/* e.g. >> /careers/apply */
[type="tel"] {
    width: 100%;
    /* max-width: 275px; */
}

/* Exceptions */
/* =JFG. Need high specificity e.g. "Preferred Appointment Time" xx HH, xx MM */
[type="text"] + label {
    position: relative;
    /* =JFG. Counter margin-bottom */
    top: -0.25rem;
}
/* GROUP ELEMENTS / FRAMEWORK / (NON CORE) / FORMS / SPACING
=================================================== */
/* fieldset*/
.c-form__fieldset {
    /* Override default */
    margin: 0;
}

/* form */
.c-form label {
    /* Make padding effective */
    display: block;
}

.c-form label:not(:last-child) {
    padding-block-end: var(--spacing-s-x);
}
/* GROUP ELEMENTS / FRAMEWORK / (NON CORE) / FORMS / BUTTONS
=================================================== */
/* Notes...

    - You should consider increasing specificity depending on the environment e.g. add .site-container to
    the selector for WordPress so rules do not affect wp-admin bar

*/
[type="submit"] {
    /* Always on a separate line */
    display: block;
    font-size: 0.85rem;
    /* Same as HTML, overriding the default of 1 in the reset */
    line-height: 1.5;
    /* Remove user agent style */
    background: transparent;
}

/* GROUP ELEMENTS / FRAMEWORK / (NON CORE) / FORMS / DECORATION
=================================================== */
/* Override normalize */
::-webkit-input-placeholder,
::placeholder {
    color: inherit;
    opacity: 0.54;
}

/* GROUP ELEMENTS / FRAMEWORK / (NON CORE) / FORMS / DECORATION / BORDERS
=================================================== */
input:not([type="submit"]) {
    border: 1px solid hsl(0deg 0% 70%);
    border-radius: 4px;
}

/* GROUP ELEMENTS / FRAMEWORK / (NON CORE) / FORMS / TEXT FIELDS / DECORATION
=================================================== */
textarea {
    border: 1px solid hsl(0deg 0% 70%);
}




/* GROUP FORMS
=================================================== */
/* Notes...

	- 

*/
/* HTML Example...

    <form method="POST" action="https://paradise.wip/!/forms/contact" class="c-form">
        <input type="hidden" name="_token" value="08dv52uFjXl3JPShnriTrNGc3QUEMRrVWIYRH7Wb">
        <div class="c-form__notes">
            <h2>Contact us</h2>
            <p>Some text here</p>
        </div>
        <input type="text" name="maple" class="maple">
        <fieldset class="c-form__fieldset">
            <div class="c-form-cols form-cols--2">
                <div class="c-form-cols__col">
                    <label>Name</label>
                    <div><input type="text" name="name"></div>
                </div>
                <div class="c-form-cols__col">
                    <label>Email Address</label>
                    <div><input type="email" name="email_address"></div>
                </div>
                <div class="c-form-cols__col c-form-cols__col--full-width">
                    <label>Message</label>
                    <div><textarea name="form_message" rows="5"></textarea></div>
                </div>
            </div>

            <button type="submit">Submit</button>
        </fieldset>
    </form>

*/
/* GROUP FORMS / LAYOUT
=================================================== */
.c-form__notes {
    max-width: var(--max-width-1);
    margin-inline: auto;
}

.c-form__notes :is(h2, h3) {
    /* e.g. >> /get-more-info */
    max-width: var(--max-width-reading-short);
}

.c-form__checkbox-group {
    display: flex;
    align-items: baseline;
}

/* purgecss start ignore */
.maple,
/* The <br/> is inserted by Statamic to break lines. We don't want this to take up extra space */
.c-form__checkbox-group br {
    display: none;
}
/* purgecss end ignore */

.c-alert {
    max-width: var(--max-width-2);
    margin-inline: auto;
}

.c-form {
    max-width: var(--max-width-1);
    margin: auto;
}

.c-form-cols--2 {
    max-width: var(--max-width-reading);
    display: grid;
    gap: var(--spacing-s-x) var(--spacing-m);
}

.c-form-cols__col--full-width {
    grid-column: 1 / -1;
}

/* Custom */
@media (min-width: 768px) {
    .c-form-cols--2 {
        grid-template-columns: 1fr 1fr;
    }
}
/* GROUP FORMS / SPACING
=================================================== */
.c-form {
    padding-inline: var(--spacing-l);
}

.c-form-block {
    /* e.g. >> /library */
    padding: var(--spacing-l);
}

.c-form [type="radio"] {
    margin-inline-end: var(--spacing-s);
    margin-block-end: var(--spacing-s);
}

.c-alert {
    padding-inline: var(--spacing-l);
}

.c-form__notes :is(h2, h3) {
    padding-block-end: var(--spacing-l);
}

/* Custom */
@media (min-width: 1200px) {
    .c-form-block--s {
        /* e.g. >> /get-more-info */
        padding: var(--spacing-m);
    }
}
/* GROUP FORMS / DECORATION
=================================================== */
/* e.g. a decorational block of radio buttons */
.c-form-block {
    background: white;
    box-shadow: var(--box-shadow-s-focus);
}

/* We use a class of fieldset since the `fieldset` element is not always present */
.c-form__fieldset {
    padding: 0;
    border: 0;
}

.c-form__notes :is(h2, h3) {
    /* e.g. >> /get-more-info */
    font-size: var(--font-size-s);
}




/* GROUP MODULAR FORM
=================================================== */
/* Notes...

	- e.g. /get-more-info

*/
/* HTML Example...

    <form class="c-form">
        <div class="c-form__notes">
            <h2>Which Products are you Interested in?</h2>
        </div>

        <div class="o-modular-form">
            <div class="o-modular-form__column o-modular-form__column--l">
                <div class="c-form-block">
                    <div class="c-form__checkbox-group">
                        <input type="radio" id="product_all" name="product" value="all" checked>
                        <label for="product_all">All</label>
                    </div>
                    <div class="c-form__checkbox-group">
                        <input type="radio" id="gCore" name="product" value="gCore">
                        <label for="gCore">gCore</label>
                    </div>
                </div>
            </div>
            <div class="o-modular-form__column">
                <label>Name</label>
                <div>
                    <input type="text" name="name">
                </div>
                <label>Name</label>
                <div>
                    <input type="text" name="name">
                </div>
            </div>
            <div class="o-modular-form__column">
                <label>Message</label>
                <div>
                    <textarea name="form_message" rows="5"></textarea>
                </div>
                <button type="submit">Submit</button>
            </div>
        </div>
    </form>

*/
/* GROUP MODULAR FORM / LAYOUT
=================================================== */
.o-modular-form {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    gap: var(--spacing-l-1);
    max-width: var(--max-width-panel);
}

.o-modular-form {
    flex-direction: column;
}

.o-modular-form [type="submit"] {
    /* e.g. >> /get-more-info */
    width: 100%;
}

/* Custom */
@media (min-width: 1200px) {
    .o-modular-form {
        max-width: var(--max-width-1);
        margin-inline: auto;
        flex-direction: row;
        gap: var(--spacing-m);
    }

    .o-modular-form > * {
        flex-basis: 31%;
        flex-direction: row;
    }
}
/* GROUP MODULAR FORM / SPACING
=================================================== */
.o-modular-form__column input {
    margin-inline-end: 0;
}

/* Custom */
@media (min-width: 1200px) {
    .o-modular-form__column--l {
        padding-inline-end: var(--spacing-s);
    }
}
/* GROUP MODULAR FORM / DECORATION
=================================================== */