/*
 Theme Name:   Aesthetics of Essex
 Theme URI:    https://paramountdigital.co.uk/
 Description:  Aesthetics of Essex Theme - Aesthetics of Essex WordPress Theme built upon GeneratePress.
 Author:       Paramount Digital
 Author URI:   http://paramountdigital.co.uk
 Template:     generatepress
 Version:      0.0.1
*/

:root {
    --white: #ffffff;
    --black: #000000;
    --green: #6c9256;
    --dark-green: #39625D;
    --light-grey: #f1f1f1;
    --grey: #242424;
    --brown: #C29579;
    --container-max: 1520px;
    --container-narrow-max: 1260px;
    /* Stuck nav is ~80px (60px logo slot + 10px padding). Extra gap keeps anchors readable. */
    --aoe-sticky-nav-offset: 100px;
}

html {
    box-sizing: border-box;
}

*,
*:before,
*:after {
    box-sizing: inherit;
    box-sizing: border-box;
    min-height: 0;
    min-width: 0;
}

/* default section styles */
section {
    padding: 50px 0;
}

@media (max-width: 575px) {
    section {
        padding: 40px 0;
    }
}

#page,
#page .site-content {
    width: 100%;
    max-width: 100%;
    padding: 0;
    flex-direction: column;
}

.container,
.grid-container {
    --bs-gutter-x: 16px;

    width: 100%;
    max-width: var(--container-max);
    padding-right: var(--bs-gutter-x, 16px);
    padding-left: var(--bs-gutter-x, 16px);
    margin-right: auto;
    margin-left: auto;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
}

/*
 * Below the 1520 container max, auto side margins disappear and content
 * sits flush. Match the page-banner medium inset until the viewport is
 * wide enough for natural breathing room outside the max-width.
 */
@media (min-width: 993px) and (max-width: 1599px) {
    .container,
    .grid-container {
        --bs-gutter-x: 40px;
    }
}

/* Beat Bootstrap’s stepped .container max-widths. */
body .container,
body .container-sm,
body .container-md,
body .container-lg,
body .container-xl,
body .container-xxl,
body .grid-container {
    max-width: var(--container-max);
}

/* Optional narrower content width for sections that shouldn’t span the full grid. */
.container--narrow,
body .has-narrow-container > .container,
body .container.container--narrow {
    max-width: var(--container-narrow-max);
}

.site-content .content-area {
    width: 100%;
}

/*
 * Templates that render their page sections after the header leave an empty
 * <main>. Drop its margin so it doesn't sit as blank space above the footer.
 */
.sections-after-header .site-main {
    margin-top: 0;
    margin-bottom: 0;
}

/* Pages that render post_content (e.g. Privacy / Complaints) */
.page-entry.container {
    display: block;
    width: 100%;
    max-width: var(--container-narrow-max);
    margin-left: auto;
    margin-right: auto;
    padding: 56px clamp(20px, 4vw, 40px) 72px;
    box-sizing: border-box;
}

.page-entry > article,
.page-entry .inside-article {
    width: 100%;
    max-width: 100%;
    background: transparent;
    padding: 0;
    margin: 0;
}

.page-entry .entry-content {
    max-width: 820px;
    margin: 0 auto;
    font-size: 15px;
    line-height: 1.7;
    color: #242424;
}

.page-entry .entry-content > *:first-child {
    margin-top: 0;
}

.page-entry .entry-content > *:last-child {
    margin-bottom: 0;
}

.page-entry .entry-content h2 {
    font-size: 32px;
    line-height: 1.2;
    margin: 0 0 24px;
}

.page-entry .entry-content h3 {
    font-size: 22px;
    line-height: 1.3;
    margin: 36px 0 12px;
}

.page-entry .entry-content p,
.page-entry .entry-content ul {
    margin: 0 0 16px;
}

.page-entry .entry-content ul {
    padding-left: 1.25em;
}

.page-entry .entry-content a {
    color: var(--dark-green, #39625d);
}

@media (max-width: 575px) {
    .page-entry.container {
        padding-top: 40px;
        padding-bottom: 48px;
        padding-left: 20px;
        padding-right: 20px;
    }

    .page-entry .entry-content h2 {
        font-size: 26px;
    }

    .page-entry .entry-content h3 {
        font-size: 18px;
    }
}

.site-main > * {
    margin-bottom: 0;
}

.separate-containers .site-main {
    margin-bottom: 0;
}

/* Keep Swiper dots compact, with a slightly larger hit area. */
.swiper-pagination-bullet {
    position: relative;
    width: 10px;
    height: 10px;
    margin: 0 8px;
}

.swiper-pagination-bullet-active {
    width: 26px;
    height: 10px;
    border-radius: 999px;
}

.swiper-pagination-bullet::before {
    content: "";
    position: absolute;
    inset: -6px;
}