/* 
 * Define custom properties
 */

:root {
    --gli-footer-font-size: 1.2rem;
    --gli-max-width: 100vw;
}


/* 
 * HEADER
 */

ul.wp-block-navigation__submenu-container {
    background: var(--wp--preset--color--gli-grey) !important;
}


/* 
 * CONTENT
 */

/* Full width single item */
.wp-block-group.full-width-group-item > * {
    max-width: 100vw;
    width: 100vw;
    margin-left: calc(((100vw - var(--wp--style--global--wide-size)) / 2) * -1);
}
/* Full width background colour */
/* NB: The Groups block's "Inner blocks use content width" should be OFF */
.wp-block-group.full-width-background-group {
    max-width: 100vw;
    width: 100vw;
    margin-left: calc(((100vw - var(--wp--style--global--wide-size)) / 2) * -1);
}
.wp-block-group.full-width-background-group > * {
    max-width: var(--wp--style--global--wide-size);
    margin-right: auto;
    margin-left: auto;
    /* margin-left: calc(((100vw - var(--wp--style--global--wide-size)) / 2)); */
}

.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6,
.entry-content cite,
.entry-content figcaption,
.entry-content table,
.entry-content address,
.entry-content .wp-caption-text,
.entry-content .wp-block-file,
.post-inner, .post-inner.thin {
    letter-spacing: 1px;
}
.wp-block-post-title,
h1.entry-title,
h1 {
    color: var(--wp--preset--color--gli-red);
    font-size: 3.5rem;
    letter-spacing: 0.1rem;
}
.entry-content h1 {
    font-size: 5.5rem;
    font-weight: 800;
}
.entry-content h2 {
    font-size: 3rem;
    font-weight: 700;
}
.entry-content h3 {
    font-size: 2.5rem;
    font-weight: 700;
}
.entry-content h4 {
    font-size: 2rem;
    font-weight: 700;
}
.entry-content h5 {
    font-size: 1.5rem;
    font-weight: 700;
}

.entry-content li,
.entry-content ol,
.entry-content ul,
.entry-content p,
.entry-content body {
    font-size: 1.2rem;
}

/* Make a containing block become an anchor for ?the first? hyperlink it contains */
/* - Container must be in the document flow! */
/* .extend-link-to-whole-group:where(:not(.block-editor-rich-text__editable)) { */
.extend-link-to-whole-group {
    position: relative;
}
/* - Extend the anchor to the whole of the containing block */
/* .extend-link-to-whole-group a::after:not(.block-editor-rich-text__editable) { */
.extend-link-to-whole-group a::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/* No hyperlink styling for links contained in the group */


/* 
 * STYLING FOR HYPERLINKS
 */

/* a:-webkit-any-link:not(.editor-list-view-sidebar__list-view-container a:-webkit-any-link), */
/* a:-webkit-any-link:not(.wp-editor a), */
/* a:-webkit-any-link:not(#wpwrap a), */
a:-webkit-any-link:not(.extend-link-to-whole-group a),
.entry-content a:not(.entry-content .extend-link-to-whole-group a),
.entry-summary a:not(.entry-summary .extend-link-to-whole-group a),
.page-content a:not(.page-content .extend-link-to-whole-group a),
.comment-content a:not(.comment-content .extend-link-to-whole-group a) {
    color: var(--wp--preset--color--gli-red);
}

a:-webkit-any-link,
.entry-content a,
.entry-summary a,
.page-content a,
.comment-content a {
    text-decoration: none;
}
/* a:-webkit-any-link:not(.extend-link-to-whole-group a), */
/* .entry-content a:not(.entry-content .extend-link-to-whole-group a), */
.entry-summary a:not(.entry-summary .extend-link-to-whole-group a),
.page-content a:not(.page-content .extend-link-to-whole-group a),
.comment-content a:not(.comment-content .extend-link-to-whole-group a),
a:-webkit-any-link:not(.extend-link-to-whole-group a):hover,
.entry-content a:not(.entry-content .extend-link-to-whole-group a):hover,
.entry-summary a:hover,
.page-content a:hover,
.comment-content a:hover,
a:not(.extend-link-to-whole-group a):hover {
    text-decoration: underline;
}
 
/* 
 * BACKGROUND COLOUR FOR SELECTED TEXT */
::-webkit-selection {
    background-color: var(--wp--preset--color--gli-red);
    color: var(--wp--preset--color--gli-grey);
}
::-moz-selection {
    background-color: var(--wp--preset--color--gli-red);
    color: var(--wp--preset--color--gli-grey);
}
::selection {
    background-color:var(--wp--preset--color--gli-red);
    color: var(--wp--preset--color--gli-grey);
}


/* 
 * FOOTER
 */

.gli-footer p {
    font-size: var(--gli-footer-font-size);
}

.gli-footer .wp-block-social-links .wp-block-social-link.wp-social-link .wp-block-social-link-anchor, 
.gli-footer .wp-block-social-links .wp-block-social-link.wp-social-link .wp-block-social-link-anchor svg, 
.gli-footer .wp-block-social-links .wp-block-social-link.wp-social-link .wp-block-social-link-anchor:active,
.gli-footer .wp-block-social-links .wp-block-social-link.wp-social-link .wp-block-social-link-anchor:hover,
.gli-footer .wp-block-social-links .wp-block-social-link.wp-social-link .wp-block-social-link-anchor:visited {
    color: var(--wp--preset--color--gli-red);
    fill: var(--wp--preset--color--gli-red);
}
/* 
 * Mailchimp sign-up form
 */

/* .gli-footer .mc4wp-form input[type="text"], */
.gli-footer .mc4wp-form input[type="email"] {
    max-width: calc(98% - 1rem);
    width: 100%;
    line-height: 3;
    border-radius: 25px;
    border-width: 1px;
    border-color: var(--wp--preset--color--gli-red);
    padding-left: 1rem;
}

.gli-footer .mc4wp-form input[type=email]::placeholder {
    color: var(--wp--preset--color--red);
    /* padding-left: 1rem; */
}

.gli-footer .mc4wp-form input[type="email"]:focus-visible {
    border-color: var(--wp--preset--color--gli-red);
    outline-color: var(--wp--preset--color--gli-red);
}
.gli-footer .mc4wp-form-fields p {
    margin-block-start: 0px;
}

.gli-footer .mc4wp-form input[type="submit"] {
    max-width: 100%;
    width: 100%;
    background: var(--wp--preset--color--gli-red);
    color: var(--wp--preset--color--white);
    text-transform: uppercase;
    font-size: 1rem;
    font-family: var(--wp--preset--font-family--lato);
    border: 1px solid var(--wp--preset--color--gli-red);
    font-weight: 600;
    letter-spacing: 0.0333em;
    line-height: 1;
    padding: 1em 1.25em;
    text-align: center;
    margin-right: auto;
    margin-left: auto;
    border-radius: 25px;
}
.gli-footer .mc4wp-form label {
    margin-bottom: 1vh;
}

.gli-footer .mc4wp-form input[type="submit"]:hover {
    color: var(--wp--preset--color--red);
    background: var(--wp--preset--color--gli-grey);
}