/*
Theme Name: codeclubtwentyfive
Theme URI: 
Author: Anthony Nolan
Author URI: 
Description: The Code Club theme for 2025
Requires at least: 6.8
Tested up to: 6.8
Requires PHP: 5.7
Version: 
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: codeclubtwentyfive
Tags: 
*/

.wp-block-media-text {
    padding: 24px;
    border-radius: 24px;
}

.wp-block-column > .wp-block-media-text {
    padding: 0;
    border-radius: 24px;
}

.wp-block-column > .wp-block-media-text > .wp-block-media-text__media > img {
    object-fit: contain;
    object-position: 100% 15%;
}

.wp-block-media-text > .wp-block-media-text__media {
    align-self: stretch;
}

.wp-block-media-text > .wp-block-media-text__media > img {
    border-radius: 24px;
    aspect-ratio: 3/2;
    height: 100%;
    max-height: 27.4rem;
    object-fit: cover;
}

.wp-block-media-text.is-brackets > .wp-block-media-text__media > img {
    aspect-ratio: auto;
    height: 100%;
    max-height: none;
}

.wp-block-media-text.is-hero,
.wp-block-media-text.is-brackets  {
    grid-template-columns: 1fr 1fr;
    grid-gap: 24px;
    padding: 0;
}

.wp-block-media-text.is-hero,
.wp-block-media-text.is-brackets.has-cc-cyan-background-color,
.wp-block-media-text.is-brackets.has-cc-green-background-color,
.wp-block-media-text.is-brackets.has-cc-light-yellow-background-color{
    background-color: white !important;
}

.wp-block-media-text.is-hero > .wp-block-media-text__content,
.wp-block-media-text.is-brackets > .wp-block-media-text__content {
    display: flex;
    align-self: stretch;
    padding: 0;
}

@media (width > 42rem) {

    .wp-block-media-text.is-brackets > .wp-block-media-text__media > img {
        min-height: 31.5rem;
    }

    .wp-block-media-text {
        padding: 64px;
    }

    .wp-block-media-text.is-hero > .wp-block-media-text__content > .wp-block-group,
    .wp-block-media-text.is-brackets > .wp-block-media-text__content > .wp-block-group {
        padding: 80px 64px;
    }

    .wp-block-media-text.is-hero > .wp-block-media-text__media > img {
        aspect-ratio: 3/2;
        max-height: none;
        object-fit: cover;
    }

    .wp-block-media-text.is-brackets.has-cc-cyan-background-color > .wp-block-media-text__content::after,
    .wp-block-media-text.is-brackets.has-cc-cyan-background-color > .wp-block-media-text__content::before {
        content: url(assets/svg/bracket-cyan.svg);
    }

    .wp-block-media-text.is-brackets.has-cc-green-background-color > .wp-block-media-text__content::after,
    .wp-block-media-text.is-brackets.has-cc-green-background-color > .wp-block-media-text__content::before {
        content: url(assets/svg/bracket-green.svg);
    }

    .wp-block-media-text.is-brackets.has-cc-light-yellow-background-color > .wp-block-media-text__content::after,
    .wp-block-media-text.is-brackets.has-cc-light-yellow-background-color > .wp-block-media-text__content::before {
        content: url(assets/svg/bracket-yellow.svg);
    }

}


.wp-block-media-text.is-brackets > .wp-block-media-text__content::before {
    align-self: center;
    transform: rotate(180deg);
}

.wp-block-media-text.is-hero > .wp-block-media-text__content > .wp-block-group,
.wp-block-media-text.is-brackets > .wp-block-media-text__content > .wp-block-group {
    border-radius: 24px;
    align-content: center;
    width: 100%;
    padding: 40px 24px;
}

.wp-block-media-text.is-brackets.has-cc-cyan-background-color > .wp-block-media-text__content > .wp-block-group {
    background-color: var(--wp--preset--color--cc-cyan);
}

.wp-block-media-text.is-brackets.has-cc-green-background-color > .wp-block-media-text__content > .wp-block-group {
    background-color: var(--wp--preset--color--cc-green);
}

.wp-block-media-text.is-brackets.has-cc-light-yellow-background-color > .wp-block-media-text__content > .wp-block-group {
    background-color: var(--wp--preset--color--cc-light-yellow);
}

.wp-block-media-text.is-brackets > .wp-block-media-text__content::after {
    align-self: center;
}

.wp-block-group.is-group-hero,
.wp-block-group.is-group-text {
    border-radius: 24px;
    padding: 0;
}

.wp-block-group.is-group-hero::before,
.wp-block-group.is-group-text::before {
    content: '';
    background-image: url(assets/svg/background.svg);
    position: absolute;
    opacity: 0.5;
    z-index: 1;
}

.wp-block-group.is-group-hero > .wp-block-group,
.wp-block-group.is-group-text > .wp-block-group {
    padding: 80px 64px 80px 64px;
    z-index: 2;
}

.wp-block-group.is-group-hero.has-cc-green-background-color > .wp-block-group {
    border-radius: 24px;
    background: linear-gradient(90deg, transparent 0%, var(--wp--preset--color--cc-green) 0%, var(--wp--preset--color--cc-green) 90%, transparent 100%) !important;
}

.wp-block-group.is-group-text.has-cc-green-background-color > .wp-block-group {
    background: linear-gradient(90deg, transparent 0%, var(--wp--preset--color--cc-green) 10%, var(--wp--preset--color--cc-green) 90%, transparent 100%) !important;
}

.wp-block-group.is-group-text.has-cc-yellow-background-color > .wp-block-group {
    background: linear-gradient(90deg, transparent 0%, var(--wp--preset--color--cc-yellow) 10%, var(--wp--preset--color--cc-yellow) 90%, transparent 100%) !important;
}

.wp-block-group.is-group-text.has-cc-light-yellow-background-color > .wp-block-group {
    background: linear-gradient(90deg, transparent 0%, var(--wp--preset--color--cc-light-yellow) 10%, var(--wp--preset--color--cc-light-yellow) 90%, transparent 100%) !important;
}

.wp-block-post-template > .wp-block-post {
    border-radius: 24px;
    padding: 16px;
    background-color: var(--wp--preset--color--cc-light-yellow);
}

.wp-block-post-template > .wp-block-post:first-child {
    background-color: var(--wp--preset--color--cc-light-pink);
}

.wp-block-post-template > .wp-block-post:last-child {
    background-color: var(--wp--preset--color--cc-light-green);
}


@media (width > 42rem) {
    h1.wp-block-heading {
        font-size: var(--wp--preset--font-size--font-size-5);
        line-height: var(--line-height-4);
    }
    h4.wp-block-heading {
        font-size: var(--wp--preset--font-size--font-size-1-5);
        line-height: var(--line-height-1-5);
    }
}
@media (width > 54rem) {
    h1.wp-block-heading {
        font-size: var(--wp--preset--font-size--font-size-6);
        line-height: var(--line-height-4-5);
    }

    h2.wp-block-heading {
        font-size: var(--wp--preset--font-size--font-size-4);
        line-height: var(--line-height-3-5);
    }

    h3.wp-block-heading {
        font-size: var(--wp--preset--font-size--font-size-3);
        line-height: var(--line-height-2-5);
    }
    h4.wp-block-heading {
        font-size: var(--wp--preset--font-size--font-size-2);
        line-height: var(--line-height-2);
    }
}