/*
 * SEO corrections for the Kin theme.
 *
 * Every hero in this theme rendered an <h2> kicker directly above the <h1>,
 * which split the real headline across two tags and left the H1 reading as a
 * bare fragment ("Event Management Agency" under "A Bespoke"). The kickers are
 * now non-heading elements carrying .hero-kicker.
 *
 * The rules below are copied verbatim from the compiled values of the original
 * h2 selectors in dist/all.css.min.css, including both responsive breakpoints,
 * so the rendering is unchanged.
 */

.hero-kicker { margin-top: 0; }

#home-hero .hero-kicker{font-size:72rem;line-height:1.19;font-weight:400;margin-bottom:20rem;color:#e1b6b7}
@media all and (max-width:1024px){#home-hero .hero-kicker{font-size:50rem}}
@media all and (max-width:575px){#home-hero .hero-kicker{font-size:40rem}}
#home-hero .hero-kicker{font-family:"Portrait Script";font-weight:400}

#about-hero #about-top .hero-kicker{font-size:72rem;line-height:1.19;font-family:"Portrait Script";font-weight:400;color:#e1b6b7;margin-bottom:50rem}
@media all and (max-width:1024px){#about-hero #about-top .hero-kicker{font-size:50rem}}
@media all and (max-width:575px){#about-hero #about-top .hero-kicker{font-size:40rem}}

#services-hero .hero-kicker{color:#fff}
#services-hero .hero-kicker{font-size:72rem;line-height:1.19;margin-bottom:55rem;font-family:"Portrait Script";font-weight:400}
@media all and (max-width:1024px){#services-hero .hero-kicker{font-size:50rem}}
@media all and (max-width:575px){#services-hero .hero-kicker{font-size:40rem}}

#our-clients-hero .hero-kicker{margin-bottom:54rem;font-size:72rem;line-height:1.19;font-family:"Portrait Script";font-weight:400;color:#e1b6b7}
@media all and (max-width:1024px){#our-clients-hero .hero-kicker{font-size:50rem}}
@media all and (max-width:575px){#our-clients-hero .hero-kicker{font-size:40rem}}
#our-clients-hero.venues-hero .hero-kicker{color:#fff}

/*
 * Skip link. Visually hidden until focused, so keyboard users can jump past
 * the header straight to the page content.
 */
.screen-reader-text {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link:focus {
    position: fixed !important;
    top: 8px; left: 8px;
    z-index: 100000;
    width: auto; height: auto;
    margin: 0; padding: 12px 20px;
    clip: auto;
    background: #fff;
    color: #2b3d38;
    font-size: 16px;
    text-decoration: underline;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .25);
}

/* The new <main> wrapper must not introduce any box of its own. */
main#main-content { display: block; margin: 0; padding: 0; }
/*
 * Venue rows: stop the overlaid text box colliding with the next block.
 *
 * .ov-content was absolutely positioned and translateY(-50%) centred, so the
 * row's height came only from the image. Whenever the copy ran longer than the
 * image was tall, the box overflowed equally above and below and pushed into
 * the neighbouring venue.
 *
 * Placing the picture and the content in the same CSS grid cell keeps the
 * overlaid look and the vertical centring, but lets the row take the height of
 * whichever of the two is taller, so it can no longer overflow.
 */
@media all and (min-width: 767px) {
    #home-venues .all-venues .one-venue {
        display: grid;
        grid-template-columns: 100%;
        align-items: center;
    }

    #home-venues .all-venues .one-venue > .ov-picture,
    #home-venues .all-venues .one-venue > .ov-content {
        grid-row: 1;
        grid-column: 1;
    }

    #home-venues .all-venues .one-venue > .ov-picture {
        position: relative;
        z-index: 1;
    }

    /* position:relative keeps the box in grid flow so the row still grows to
       fit it, while restoring the stacking context that position:absolute used
       to give it - without this the picture paints over the copy. */
    #home-venues .all-venues .one-venue > .ov-content {
        position: relative;
        z-index: 2;
        top: auto;
        left: auto;
        right: auto;
        -webkit-transform: none;
        transform: none;
        justify-self: start;
    }

    #home-venues .all-venues .one-venue:nth-child(even) > .ov-content {
        justify-self: end;
    }
}