/* ==========================================================
   GLIMMERING GROVE
   MASTER SITE STYLESHEET
   ========================================================== */


/* ==========================================================
   1. BASIC SITE PROTECTION
   ========================================================== */

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

* {
    box-sizing: border-box;
}

img,
svg {
    max-width: 100%;
    height: auto;
}

figure {
    max-width: 100%;
}

video,
iframe,
embed,
object {
    max-width: 100%;
}


/* ==========================================================
   2. MAIN PAGE LAYOUT
   ========================================================== */

/* Remove unwanted space at top of regular pages */
body.page .site-main,
body.page .content-area,
body.page .content-wrap,
body.page .entry-content {
    margin-top: 0 !important;
    padding-top: 0 !important;
}


/* Main content width on desktop */
body.page .entry-content {
    width: 90% !important;
    max-width: 1500px !important;

    margin-left: auto !important;
    margin-right: auto !important;

    padding-left: 0 !important;
    padding-right: 0 !important;
}


/* Prevent large blank space before first block */
body.page .entry-content > *:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

body.page .entry-content > .wp-block-group:first-child,
body.page .entry-content > .wp-block-cover:first-child,
body.page .entry-content > .wp-block-columns:first-child,
body.page .entry-content > .wp-block-image:first-child,
body.page .entry-content > .wp-block-html:first-child {
    margin-top: 0 !important;
}


/* Wide blocks */
body.page .alignwide {
    width: 95% !important;
    max-width: 1400px !important;

    margin-left: auto !important;
    margin-right: auto !important;
}


/* Full-width blocks */
body.page .alignfull {
    width: 95vw !important;
    max-width: 100vw !important;

    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
}


/* Prevent page media from overflowing */
body.page .entry-content img,
body.page .entry-content video {
    max-width: 100%;
}


/* Keep header independent from page content sizing */
body.page header,
body.page .site-header {
    width: auto;
}


/* ==========================================================
   3. GLOBAL TYPOGRAPHY
   ========================================================== */

h1,
.wp-block-post-title {
    font-size: clamp(2.2rem, 5vw, 4.8rem);
    line-height: 1.08;
    overflow-wrap: break-word;
}

h2 {
    font-size: clamp(1.8rem, 4vw, 3.5rem);
    line-height: 1.15;
    overflow-wrap: break-word;
}

h3 {
    font-size: clamp(1.4rem, 3vw, 2.4rem);
    line-height: 1.2;
    overflow-wrap: break-word;
}

h4,
h5,
h6 {
    overflow-wrap: break-word;
}

p {
    font-size: clamp(1rem, 1.45vw, 1.3rem);
    line-height: 1.65;
    overflow-wrap: break-word;
}

li {
    font-size: clamp(1rem, 1.4vw, 1.25rem);
    line-height: 1.6;
}


/* ==========================================================
   4. WORDPRESS BLOCK SAFETY
   ========================================================== */

.wp-site-blocks {
    width: 100%;
    max-width: 100%;
}

.wp-block-group,
.wp-block-cover,
.wp-block-columns,
.wp-block-column,
.wp-block-image,
.wp-block-media-text {
    max-width: 100%;
}


/* ==========================================================
   5. GLOBAL BUTTONS
   ========================================================== */

.wp-block-button__link {
    font-size: clamp(.95rem, 1.3vw, 1.15rem);
    line-height: 1.2;

    padding: .75em 1.4em;

    white-space: normal;
    text-align: center;
}


/* ==========================================================
   6. SITE-WIDE TABLET
   ========================================================== */

@media screen and (max-width: 1024px) {

    body.page .entry-content {
        width: 100% !important;
        max-width: 100% !important;

        padding-left: 30px !important;
        padding-right: 30px !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }

    body.page .alignwide {
        width: 100% !important;
        max-width: 100% !important;
    }

    h1,
    .wp-block-post-title {
        font-size: clamp(2.2rem, 7vw, 3.8rem);
    }

    .wp-block-columns {
        gap: 30px;
    }

    .wp-block-media-text {
        gap: 30px;
    }
}


/* ==========================================================
   7. SITE-WIDE MOBILE
   ========================================================== */

@media screen and (max-width: 767px) {

    /*
       IMPORTANT:
       Only the outer page content gets padding.
       Nested Group blocks do NOT get additional padding.
    */

    body.page .entry-content {
        width: 100% !important;
        max-width: 100% !important;

        padding-left: 18px !important;
        padding-right: 18px !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }

    body.page .alignwide {
        width: 100% !important;
        max-width: 100% !important;
    }

    h1,
    .wp-block-post-title {
        font-size: clamp(2rem, 9vw, 2.8rem);
        line-height: 1.1;
    }

    h2 {
        font-size: clamp(1.65rem, 7vw, 2.2rem);
        line-height: 1.15;
    }

    h3 {
        font-size: clamp(1.35rem, 6vw, 1.8rem);
    }

    p,
    li {
        font-size: 1.05rem;
        line-height: 1.6;
    }

    .wp-block-columns {
        flex-direction: column;
        gap: 24px;
    }

    .wp-block-column {
        flex-basis: 100% !important;
        width: 100% !important;
    }

    .wp-block-media-text {
        grid-template-columns: 100% !important;
    }

    .wp-block-media-text__media,
    .wp-block-media-text__content {
        grid-column: 1 !important;
    }

    .wp-block-button,
    .wp-block-button__link {
        max-width: 100%;
    }

    .wp-block-image img {
        max-width: 100%;
        height: auto;
    }
}


/* Small phones */
@media screen and (max-width: 480px) {

    body.page .entry-content {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    h1,
    .wp-block-post-title {
        font-size: 2.1rem;
    }

    h2 {
        font-size: 1.7rem;
    }

    h3 {
        font-size: 1.4rem;
    }

    p,
    li {
        font-size: 1rem;
        line-height: 1.6;
    }
}


/* ==========================================================
   8. ROCKY'S ACTIVITIES PAGE
   ========================================================== */

.rocky-activities-page {
    width: 100%;
    max-width: 1280px;

    margin: 0 auto;

    padding: 30px 45px;

    box-sizing: border-box;
}

.rocky-activities-page * {
    box-sizing: border-box;
}


/* Activities images */
.rocky-activities-page img {
    display: block;

    width: 100%;
    max-width: 100%;
    height: auto;
}


/* Activities headings */
.rocky-activities-page h1 {
    font-size: clamp(32px, 5vw, 64px);
    line-height: 1.1;
}

.rocky-activities-page h2 {
    font-size: clamp(25px, 3.5vw, 42px);
    line-height: 1.15;
}

.rocky-activities-page h3 {
    font-size: clamp(21px, 2.5vw, 30px);
}


/* Activity text */
.rocky-activities-page p {
    font-size: clamp(16px, 1.7vw, 20px);
    line-height: 1.55;
}


/* ==========================================================
   9. ACTIVITY GRID
   ========================================================== */

.rocky-activity-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    gap: 28px;

    width: 100%;

    margin: 30px auto;
}


/* Desktop - 3 across */
.rocky-activity-card {
    width: calc(33.333% - 20px);
    max-width: 380px;
    min-width: 0;

    background: #fffaf0;

    border: 2px solid #dfc99f;
    border-radius: 20px;

    padding: 16px;

    text-align: center;

    box-shadow:
        0 7px 18px rgba(61, 48, 28, 0.12);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.rocky-activity-card:hover {
    transform: translateY(-6px);

    box-shadow:
        0 12px 25px rgba(61, 48, 28, 0.18);
}


/* Card images */
.rocky-activity-card img {
    display: block;

    width: 100%;
    height: auto;

    border-radius: 13px;

    margin: 0 auto 14px;
}


/* Card titles */
.rocky-activity-card h2,
.rocky-activity-card h3 {
    color: #214f35;

    margin-top: 10px;
    margin-bottom: 8px;
}


/* Card text */
.rocky-activity-card p {
    margin-left: 8px;
    margin-right: 8px;

    line-height: 1.5;
}


/* Print button */
.rocky-print-button,
.rocky-print-button .wp-block-button__link {
    max-width: 100%;
}

.rocky-print-button .wp-block-button__link {
    background: #9b612f;
    color: #ffffff;

    border: 3px solid #71421e;
    border-radius: 10px;

    padding: 12px 22px;

    font-weight: 700;

    white-space: normal;

    box-shadow:
        0 4px 0 #633717;

    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease;
}

.rocky-print-button .wp-block-button__link:hover {
    transform: translateY(-2px);

    box-shadow:
        0 6px 0 #633717;
}


/* Activities - Tablet */
@media screen and (max-width: 900px) {

    .rocky-activities-page {
        max-width: 100%;

        padding: 25px 28px;
    }

    .rocky-activity-grid {
        gap: 22px;
    }

    .rocky-activity-card {
        width: calc(50% - 12px);
        max-width: none;
    }

    .rocky-activities-page .alignwide,
    .rocky-activities-page .alignfull {
        width: 100% !important;
        max-width: 100% !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }
}


/* Activities - Mobile - ONE ACTIVITY PER ROW */
@media screen and (max-width: 600px) {

    .rocky-activities-page {
        width: 100%;

        padding: 18px 16px;

        overflow-x: hidden;
    }

    .rocky-activity-grid {
        display: block;

        width: 100%;

        margin: 20px auto;
    }

    .rocky-activity-card {
        display: block;

        width: 100%;
        max-width: 430px;

        margin: 0 auto 28px;

        padding: 10px;
    }

    .rocky-activity-card img {
        width: 100%;
        height: auto;
    }

    .rocky-activities-page h2,
    .rocky-activities-page h3,
    .rocky-activities-page p {
        overflow-wrap: break-word;
        word-wrap: break-word;
    }

    .rocky-print-button {
        width: 100%;
    }

    .rocky-print-button .wp-block-button__link {
        display: block;

        width: 100%;

        text-align: center;
    }

    .rocky-activities-page .alignwide,
    .rocky-activities-page .alignfull {
        width: 100% !important;
        max-width: 100% !important;

        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}


/* ==========================================================
   10. OPTIONAL WORDPRESS GRID CLASS
   Activities grid that uses "activities-grid"
   ========================================================== */

@media screen and (max-width: 600px) {

    .activities-grid {
        display: grid !important;
        grid-template-columns: 100% !important;
        width: 100% !important;
    }

    .activities-grid > * {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
}


/* ==========================================================
   11. ROCKY'S ACTIVITY LIBRARY PASSWORD GATE
   ========================================================== */

.gg-explorer-gate {
    position: relative;

    width: 100%;
    max-width: 1100px;

    margin: 40px auto;

    padding: 55px 50px 45px;

    text-align: center;

    background: #fffaf0;

    overflow: hidden;
}


/* Welcome text */
.gg-welcome-small {
    font-size: 2rem;
    font-weight: 700;

    color: #6b4226;

    margin-bottom: 0;
}

.gg-paw-inline {
    font-size: 1.15em;
}


/* Activity Library title */
.gg-explorer-gate h2 {
    color: #174b36;

    font-size: clamp(2.8rem, 6vw, 5rem);
    line-height: 1.05;

    margin: 5px 0 28px;
}


/* Intro */
.gg-gate-intro {
    width: 100%;
    max-width: 700px;

    margin: 0 auto 40px;

    font-size: 1.25rem;
    line-height: 1.6;

    color: #604733;
}


/* Explorer Code area */
.gg-code-area {
    width: 100%;
    max-width: 600px;

    margin: 0 auto;
}

.gg-code-area label {
    display: block;

    width: 100%;

    margin-bottom: 10px;

    text-align: left;

    font-size: 1.4rem;
    font-weight: 600;

    color: #604733;
}


/* Password form */
.gg-explorer-gate .post-password-form {
    display: block;

    width: 100%;
    max-width: 100%;

    margin: 0;
    padding: 0;
}


/* Password field */
.gg-explorer-gate input[type="password"] {
    display: block;

    width: 100%;
    max-width: 100%;

    height: 62px;

    padding: 10px 16px;

    margin: 0 0 35px;

    font-size: 1.3rem;

    border: 2px solid #7c5a3b;
    border-radius: 8px;

    background: #fffdf7;

    box-sizing: border-box;
}


/* ==========================================================
   12. ROCKY + WOOD SIGN BUTTON
   ========================================================== */

.gg-rocky-sign-wrap {
    position: relative;

    width: 100%;

    margin-top: 15px;

    padding-top: 55px;
}


/* Temporary paw / Rocky placeholder */
.gg-rocky-placeholder {
    position: absolute;

    top: 0;
    left: 50%;

    transform: translateX(-50%);

    font-size: 58px;

    z-index: 2;
}


/* Wooden sign */
.gg-wood-sign-button {
    display: block;

    width: 100%;
    max-width: 560px;

    margin: 0 auto;

    padding: 22px 30px 25px;

    background:
        linear-gradient(
            90deg,
            rgba(70,35,10,.16),
            transparent 20%,
            rgba(255,240,190,.12) 45%,
            transparent 65%,
            rgba(60,30,10,.14)
        ),
        #a66d3f;

    color: #fff7df;

    border: 4px solid #633d22;
    border-radius: 10px;

    box-shadow:
        inset 0 3px 3px rgba(255,255,255,.2),
        inset 0 -4px 4px rgba(65,35,15,.25),
        0 7px 0 #55331d,
        0 10px 18px rgba(0,0,0,.18);

    text-shadow:
        0 2px 2px rgba(60,30,15,.55);

    cursor: pointer;

    box-sizing: border-box;

    transition: transform .18s ease;
}

.gg-wood-sign-button:hover {
    transform: translateY(-2px);
}

.gg-wood-sign-button span,
.gg-wood-sign-button strong {
    display: block;
}

.gg-wood-sign-button span {
    font-size: 1.6rem;
    line-height: 1.1;
}

.gg-wood-sign-button strong {
    font-size: 2rem;
    line-height: 1.15;
}


/* Book-owner message */
.gg-no-code {
    width: 100%;

    margin: 42px auto 0;

    font-size: 1.1rem;
    line-height: 1.6;

    color: #604733;
}


/* Paw trail */
.gg-paw-trail {
    margin-top: 25px;

    font-size: 1.8rem;

    opacity: .8;
}


/* ==========================================================
   13. ACTIVITY LIBRARY - TABLET
   ========================================================== */

@media screen and (max-width: 1024px) {

    .gg-explorer-gate {
        width: 100%;
        max-width: 900px;

        margin: 30px auto;

        padding: 45px 35px 40px;
    }

    .gg-gate-intro {
        width: 100%;
        max-width: 700px;
    }

    .gg-code-area {
        width: 100%;
        max-width: 600px;
    }
}


/* ==========================================================
   14. ACTIVITY LIBRARY - MOBILE
   ========================================================== */

@media screen and (max-width: 767px) {

    .gg-explorer-gate {
        display: block;

        width: 100% !important;
        max-width: 100% !important;

        margin: 15px auto 25px !important;

        padding: 25px 16px 30px !important;

        box-sizing: border-box !important;
    }


    /* Keep all gate elements full width */

    .gg-welcome-small,
    .gg-explorer-gate h2,
    .gg-gate-intro,
    .gg-code-area,
    .gg-explorer-gate .post-password-form,
    .gg-rocky-sign-wrap,
    .gg-no-code {
        width: 100% !important;
        max-width: 100% !important;

        box-sizing: border-box !important;
    }


    /* Welcome */

    .gg-welcome-small {
        font-size: 1.2rem !important;
        line-height: 1.3 !important;

        text-align: center !important;
    }


    /* Main title */

    .gg-explorer-gate h2 {
        font-size: 2.2rem !important;
        line-height: 1.08 !important;

        margin: 5px auto 20px !important;

        text-align: center !important;
    }


    /* Description */

    .gg-gate-intro {
        margin: 0 auto 28px !important;

        padding: 0 !important;

        font-size: 1rem !important;
        line-height: 1.55 !important;

        text-align: center !important;

        white-space: normal !important;
    }


    /* Code area */

    .gg-code-area {
        margin: 0 auto !important;

        padding: 0 !important;
    }


    /* Explorer Code label */

    .gg-code-area label {
        display: block !important;

        width: 100% !important;

        margin: 0 0 10px !important;

        font-size: 1.15rem !important;
        line-height: 1.3 !important;

        text-align: left !important;

        white-space: normal !important;
    }


    /* Form */

    .gg-explorer-gate .post-password-form {
        display: block !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    /* Password input */

    .gg-explorer-gate input[type="password"] {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;

        height: 52px !important;

        margin: 0 0 28px !important;

        font-size: 1.1rem !important;

        box-sizing: border-box !important;
    }


    /* Rocky / sign */

    .gg-rocky-sign-wrap {
        width: 100% !important;

        margin: 15px auto 0 !important;
    }


    /* Wooden button */

    .gg-wood-sign-button {
        display: block !important;

        width: 100% !important;
        max-width: 500px !important;

        margin-left: auto !important;
        margin-right: auto !important;

        padding: 18px 15px 20px !important;

        box-sizing: border-box !important;
    }

    .gg-wood-sign-button span {
        font-size: 1.25rem !important;
    }

    .gg-wood-sign-button strong {
        font-size: 1.55rem !important;
    }


    /* Bottom message */

    .gg-no-code {
        margin: 35px auto 0 !important;

        font-size: .95rem !important;
        line-height: 1.5 !important;

        text-align: center !important;
    }
}


/* ==========================================================
   15. ACTIVITY LIBRARY - SMALL PHONES
   ========================================================== */

@media screen and (max-width: 480px) {

    .gg-explorer-gate {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .gg-explorer-gate h2 {
        font-size: 1.9rem !important;
    }

    .gg-gate-intro {
        font-size: .95rem !important;
    }

    .gg-wood-sign-button span {
        font-size: 1.1rem !important;
    }

    .gg-wood-sign-button strong {
        font-size: 1.4rem !important;
    }
}

/* ==========================================================
   GLIMMERING GROVE
   NON-HOME PAGE MOBILE + TABLET MARGINS
   Home page is intentionally excluded
   ========================================================== */


/* TABLET */
@media screen and (min-width: 768px) and (max-width: 1024px) {

    body.page:not(.home) .entry-content {
        width: 100% !important;
        max-width: 100% !important;

        padding-left: 38px !important;
        padding-right: 38px !important;

        margin-left: auto !important;
        margin-right: auto !important;

        box-sizing: border-box !important;
    }
}


/* MOBILE */
@media screen and (max-width: 767px) {

    body.page:not(.home) .entry-content {
        width: 100% !important;
        max-width: 100% !important;

        padding-left: 24px !important;
        padding-right: 24px !important;

        margin-left: auto !important;
        margin-right: auto !important;

        box-sizing: border-box !important;
    }
}


/* SMALL PHONES */
@media screen and (max-width: 480px) {

    body.page:not(.home) .entry-content {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}


/* ==========================================================
   ROCKY'S ACTIVITIES PAGE
   LEFT-ALIGN WORDING
   ========================================================== */

.rocky-activities-page {
    text-align: left;
}


/* Page headings and regular wording */
.rocky-activities-page h1,
.rocky-activities-page h2,
.rocky-activities-page h3,
.rocky-activities-page p,
.rocky-activities-page li {
    text-align: left !important;
}


/* Activity card wording */
.rocky-activity-card {
    text-align: left !important;
}


/* Keep activity buttons centered */
.rocky-print-button,
.rocky-print-button .wp-block-button__link {
    text-align: center !important;
}

/* ==========================================================
   MOBILE MARGINS - ALL PAGES EXCEPT HOME
   ========================================================== */

@media screen and (max-width: 767px) {

    body.page:not(.home) .entry-content {
        width: auto !important;
        max-width: none !important;

        margin-left: 8px !important;
        margin-right: 8px !important;

        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    body.page:not(.home) .entry-content > * {
        max-width: 100% !important;
    }

    body.page:not(.home) .alignwide,
    body.page:not(.home) .alignfull {
        width: 100% !important;
        max-width: 100% !important;

        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}