:root {
    color-scheme: light dark;
    --animation-time: 0.25s;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    padding: 0;
}

html {
    font-family: sans-serif;
    font-optical-sizing: auto;
}

/* COLOR THEME START */
.theme-wrapper {
    /* Brand Colors */
    --color-brand-light: hsl(229deg, 30%, 44%);
    --color-brand-dark: hsl(229deg, 30%, 27%);

    /* Background Colors */
    --color-background-main-light: white;
    --color-background-main-dark: hsl(222, 95%, 3%);
    --color-background-header-light: hsl(229deg, 50%, 89%);
    --color-background-header-dark: hsl(229deg, 30%, 17%);
    --color-background-button-light: hsl(267, 30%, 47%);
    --color-background-button-dark: hsl(267, 30%, 33%);
    --color-background-attention-light: hsl(166, 36%, 37%);
    --color-background-attention-dark: hsl(166, 69%, 25%);
    --color-background-shadow-light: hsl(229, 23%, 91%);
    --color-background-shadow-dark: hsl(229deg, 10%, 17%);
    --color-background-faded-light: hsl(230, 10%, 82%);
    --color-background-faded-dark: hsl(229deg, 10%, 10%);
    --color-background-selected: hsl(229deg, 30%, 40%);

    /* Text Colors */
    --color-text-primary-light: hsl(229deg, 90%, 8.8%);
    --color-text-primary-dark: hsl(229deg, 100%, 95.2%);
    --color-text-attention-light: hsl(200, 4%, 99%);
    --color-text-attention-dark: hsl(220, 88%, 95%);
    --color-text-placeholder-light: hsl(229deg, 30%, 87%);
    --color-text-placeholder-dark: hsl(229deg, 30%, 70%);
    --color-text-shadow-light: hsl(224, 5%, 43%);
    --color-text-shadow-dark: hsl(233, 19%, 8%);
    --color-text-secondary: hsl(229deg, 20%, 92%);

    /* Link Colors */
    --color-link-light: hsl(221, 100%, 39%);
    --color-link-dark: hsl(229, 93%, 79%);
    --color-link-visited: hsl(269, 66%, 68%); /* Same for light and dark */

    /* Code Syntax Colors */
    --color-code-keyword-light: hsl(232, 98%, 42%);
    --color-code-keyword-dark: hsl(230, 79%, 74%);
    --color-code-string-light: hsl(25, 86%, 37%);
    --color-code-string-dark: hsl(25, 90%, 63%);
    --color-code-comment-light: hsl(229, 7%, 48%);
    --color-code-comment-dark: hsl(231, 10%, 62%);

    /* Border Colors */
    --color-border-code-light: hsl(229deg, 30%, 80%);
    --color-border-code-dark: hsl(229deg, 30%, 20%);

    /* Logos */
    --php8-logo-light: url("/images/php8/logo_php8_5.svg");
    --php8-logo-dark: url("/images/php8/logo_php8_5_dark.svg");

    /* Active Theme Variables (default to light) */
    --color-brand: var(--color-brand-light);
    --color-background-main: var(--color-background-main-light);
    --color-background-header: var(--color-background-header-light);
    --color-background-button: var(--color-background-button-light);
    --color-background-attention: var(--color-background-attention-light);
    --color-background-shadow: var(--color-background-shadow-light);
    --color-background-faded: var(--color-background-faded-light);
    --color-text-primary: var(--color-text-primary-light);
    --color-text-attention: var(--color-text-attention-light);
    --color-text-placeholder: var(--color-text-placeholder-light);
    --color-text-shadow: var(--color-text-shadow-light);
    --color-link: var(--color-link-light);
    --color-code-keyword: var(--color-code-keyword-light);
    --color-code-string: var(--color-code-string-light);
    --color-code-comment: var(--color-code-comment-light);
    --color-border-code: var(--color-border-code-light);
    --php8-logo: var(--php8-logo-light);
}

#theme-toggle{
    display: none;
}


@media screen and (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;
    }

    :root:has(#theme-toggle:checked) {
        color-scheme: light;
    }

    .theme-wrapper {
        --color-brand: var(--color-brand-dark);
        --color-text-primary: var(--color-text-primary-dark);
        --color-link: var(--color-link-dark);
        --color-placeholder: var(--color-text-placeholder-dark);
        --color-background-main: var(--color-background-main-dark);
        --color-background-attention: var(--color-background-attention-dark);
        --color-text-attention: var(--color-text-attention-dark);
        --color-background-shadow: var(--color-background-shadow-dark);
        --color-code-keyword: var(--color-code-keyword-dark);
        --color-code-string: var(--color-code-string-dark);
        --color-code-comment: var(--color-code-comment-dark);
        --color-background-faded: var(--color-background-faded-dark);
        --color-text-shadow: var(--color-text-shadow-dark);
        --color-background-header: var(--color-background-header-dark);
        --color-background-button: var(--color-background-button-dark);
        --php8-logo: var(--php8-logo-dark);
    }

    label[for="theme-toggle"] {
        background-image: url("/images/icons/light-mode.svg");
    }

    #theme-toggle:checked + .theme-wrapper {
        --color-brand: var(--color-brand-light);
        --color-text-primary: var(--color-text-primary-light);
        --color-link: var(--color-link-light);
        --color-placeholder: var(--color-text-placeholder-light);
        --color-background-main: var(--color-background-main-light);
        --color-background-attention: var(--color-background-attention-light);
        --color-text-attention: var(--color-text-attention-light);
        --color-background-shadow: var(--color-background-shadow-light);
        --color-background-faded: var(--color-background-faded-light);
        --color-text-shadow: var(--color-text-shadow-light);
        --color-background-header: var(--color-background-header-light);
        --color-background-button: var(--color-background-button-light);
        --color-code-keyword: var(--color-code-keyword-light);
        --color-code-string: var(--color-code-string-light);
        --color-code-comment: var(--color-code-comment-light);
        --php8-logo: var(--php8-logo-light);
    }

    #theme-toggle:checked + .theme-wrapper label[for="theme-toggle"] {
        background-image: url("/images/icons/dark-mode.svg");
    }

}

@media screen and (prefers-color-scheme: light) {
    :root {
        color-scheme: light;
    }

    label[for="theme-toggle"] {
        background-image: url("/images/icons/dark-mode.svg");
    }

    #theme-toggle:checked + .theme-wrapper {
        --color-brand: var(--color-brand-dark);
        --color-text-primary: var(--color-text-primary-dark);
        --color-link: var(--color-link-dark);
        --color-placeholder: var(--color-text-placeholder-dark);
        --color-background-main: var(--color-background-main-dark);
        --color-code-keyword: var(--color-code-keyword-dark);
        --color-code-string: var(--color-code-string-dark);
        --color-code-comment: var(--color-code-comment-dark);
        --color-background-attention: var(--color-background-attention-dark);
        --color-text-attention: var(--color-text-attention-dark);
        --color-background-shadow: var(--color-background-shadow-dark);
        --color-background-faded: var(--color-background-faded-dark);
        --color-text-shadow: var(--color-text-shadow-dark);
        --color-background-header: var(--color-background-header-dark);
        --color-background-button: var(--color-background-button-dark);
        --php8-logo: var(--php8-logo-dark);
    }

    #theme-toggle:checked + .theme-wrapper label[for="theme-toggle"] {
        background-image: url("/images/icons/light-mode.svg");
    }
}

label[for="theme-toggle"] {
    cursor: pointer;
    width: 1.5rem;
    height: 1.5rem;
}

/* COLOR THEME END*/

.theme-wrapper{
    background-color: var(--color-background-shadow);
    padding-bottom: 1rem;
}

/* NAV START */
#nav-toggle{
    display: none;
}
.nav__wrapper {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    background-color: var(--color-brand);
    max-width: 1500px;
    margin: 0 auto;
    padding: 1rem 0.5rem;
}

nav {
    display: contents;
    flex-direction: column;
    position: relative;

    padding: 1rem 1rem 0;
}

.hamburger-btn {
    grid-area: 1 / 1 / 2 / 2;
    z-index: 2; /*Only needed if you park the menu in same location*/
    width: 1.5rem;
    height: 1.5rem;
    background-color: transparent;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: none;
    cursor: pointer;
}

.hamburger-line {
    background-color: white;
    flex: 0 0 0.2rem;
    width: 100%;
    transition: transform var(--animation-time),
    opacity calc(var(--animation-time) * 1.5), scale var(--animation-time);
}

.hamburger-line:nth-child(1),
.hamburger-line:nth-child(3) {
    transform-origin: left;
}

.navbar__brand {
    grid-area: 1 / 2 / 2 / 3;
    margin: auto;
}

#nav-toggle:checked + nav .hamburger-line:nth-child(1) {
    transform: rotate(45deg) scaleX(1.25);
}

#nav-toggle:checked + nav .hamburger-line:nth-child(2) {
    opacity: 0;
}

#nav-toggle:checked + nav .hamburger-line:nth-child(3) {
    transform: rotate(-45deg) scaleX(1.25);
}

.navbar__nav {
    display: none;
    position: absolute;
    z-index: 2;
    top: 3rem;
    margin: 1rem 0;
    padding: 1rem;
    font-weight: 400;
    font-style: normal;
    font-variation-settings: "wdth" 400;
    color: var(--color-text-secondary);
    list-style: none;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    border: 1px solid hsl(229deg, 30%, calc(44% * 1.5));
    background-color: var(--color-brand);
}

#nav-toggle:checked + nav .navbar__nav {
    display: flex;
    animation: fadeIn 1s;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    20% {
        opacity: 0.5;
    }
    100% {
        opacity: 1;
    }
}

.navbar__nav a {
    display: block;
    padding: 0.5rem;
    text-decoration: none;
    color: inherit;
    font-size: 1.5rem;
    line-height: 1.5rem;
}

nav a:hover {
    background-color: var(--color-background-selected);
    outline: 1px solid #ffffff44;

}

.navbar__nav a:visited {
    color: inherit;
}

.navbar__nav a[aria-current="page"] {
    background-color: var(--color-background-selected);
    outline: 1px solid #ffffff44;
    pointer-events: none;
}

.navbar__item img {
    display: block;
    height: 1.5rem;
}

.navbar__search-form {
    grid-area: 2 / 1 / 3 / 4;
    display: block;
    margin: 0.5rem;
    position: relative;

}

.search-modal__form {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    border: 1px solid hsl(229deg, 30%, calc(44% * 1.5));
    padding: 0.5rem;
    border-radius: 1rem;
    color: white;
}

.search-modal__input {
    background-color: transparent;
    width: 100%;
    border: none;
    outline: none;
    color: white;
}

.search-modal__input::placeholder {
    color: var(--color-text-placeholder);
}

.search__results {
    z-index: 2;
    display: none;
    position: absolute;
    width: calc(100% - 2rem);
    top: 3rem;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.5rem 1rem;
    max-height: 20rem;
    overflow-y: auto;
    background-color: var(--color-brand);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border-code);
}

.search-modal__form:focus-within + .search__results {
    display: block;
}

.search__result {
    padding: 0.5rem;
    border-radius: 0.5rem;
    cursor: pointer;
}

.search__result:hover {
    background-color: var(--color-background-selected);
}
/* NAV END*/


/* HEADS UP START */
.headsup {
    background-color: var(--color-background-attention);
    color: var(--color-text-attention);
    max-width: 1500px;
    margin: 0 auto;
    padding: 0.5rem 1rem;
    font-weight: 400;
    font-style: normal;
    font-variation-settings: "wdth" 400;
    font-size: 1.2rem;
    text-align: center;
}

.headsup a {
    color: var(--color-text-attention);
    text-decoration: none;
}
/* HEADS UP END */


main {
    max-width: 1500px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}

a {
    color: var(--color-link);
}

a:visited {
    color: var(--color-link-visited);
}

main section {
    padding: 1rem;
}

/* HERO START */
.hero {
    background-color: var(--color-brand);
    color: var(--color-text-secondary);
}

.hero h1{
    z-index: -1;
    font-size: 3rem;
    font-weight: 600;
    font-style: italic;
    font-variation-settings: "wdth" 600;
    color: white;
    margin: 0.5rem 0;
    line-height: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;

}

.hero h1 span {
    margin-top: 0.4rem;
    height: 3.3rem;
}

.php8-logo-container {
    user-select: none;
    color: transparent;
    position: relative;
    width: 11.58rem;
    height: 3.3rem;
}

.php8-logo-container::after {
    content: var(--php8-logo);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.hero_text {
    text-align: center;
}

.hero_text p {
    font-size: 1.5rem;
}

.change-language {
    text-align: right;
}

.link-button {
    display: block;
    width: fit-content;
    margin: 1rem auto;
    padding: 1rem;
    background-color: var(--color-background-button);
    color: var(--color-text-secondary);
    text-decoration: none;
    font-size: 1.2rem;
    font-weight: 400;
    font-style: normal;
    font-variation-settings: "wdth" 400;
    text-shadow: 2px 2px 3px black;
    text-align: center;
    border-radius: 1rem;
    box-shadow: -1px -1px 2px 1px #ffffff88, 2px 2px 2px 1px #000000BB;
    transition: filter 0.2s ease-in-out;
}

.link-button:hover {
    outline: 3px solid #ffffff44;
    filter: brightness(1.1) contrast(1.1);
}
/* HERO END*/

/* FEATURES START */
.new-features, .changelog {
    background-color: var(--color-background-shadow);
    color: var(--color-text-secondary);
}

.card {
    margin: 0 0 1.5rem;
    background-color: var(--color-background-main);
    color: var(--color-text-primary);
    box-shadow: -2px -2px 4px 1px #ffffff22, 2px 2px 3px 1px #000000AA;
    border-radius: 0.5rem;
}

.card:last-child {
    margin-bottom: 0;
}

.card h2 {
    padding: 0.5rem;
    border-radius: 0.5rem 0.5rem 0 0;
    font-size: 1.5rem;
    text-align: center;
    background-color: var(--color-background-header);
}

.card h2 code {
    font-size: 1.5rem;
}

.feature h2 a {
    color: var(--color-text-secondary);
    text-decoration: none;
    font-size: 1rem;
    vertical-align: middle;
    margin-left: 1ch;
    padding: 0.125rem 0.5rem;
    background-color: var(--color-background-selected);
    border: 1px solid var(--color-border-code);
}

.feature h2 a:hover {
    filter: brightness(1.2) contrast(1.2);
}

.feature__description, .feature__description code {
    font-size: 1.2rem;
    line-height: 1.5;
    overflow-wrap: break-word;
    hyphens: auto;
}

.feature__description, .compare__code {
    padding: 1rem;
}

.code__label, .phpcode {
    padding: 0.25rem;
    border: 1px solid var(--color-border-code);
}

.code__label {
    /*border-radius: 0.75rem 0.75rem 0 0;*/
    padding: 0.5rem 1rem;
    width: fit-content;
    margin-bottom: -1px;
}

.code__label:nth-child(1) {
    background-color: var(--color-background-faded);
}

.code__label:nth-child(3) {
    background-color: var(--color-background-attention);
    color: var(--color-text-attention);
}

.phpcode code {
    white-space: pre;
}

code {
    font-family: monospace;
    font-weight: 400;
    font-size: 1rem;
}

.phpcode {
    padding: 0.5rem 1rem;
    overflow-x: auto;
}

.phpcode span.default {
    color: var(--color-text-primary);
}

.phpcode span.keyword {
    font-weight: 600;
    color: var(--color-code-keyword);
}

.phpcode span.string {
    color: var(--color-code-string);
}

.phpcode span.comment {
    color: var(--color-code-comment);
}

.phpcode span.number {

}

.phpcode:nth-child(even) {
    margin-bottom: 1rem;
}
/* FEATURES END*/

/* CHANGELOG START*/
.changelog__details {
    padding: 1rem 1rem 1rem 0;
    overflow-x: auto;
}

.additions .changed-items {
    list-style: "\2714";
}
.additions .changed-items li {
    padding-left: 0.5rem;
}

.additions .changed-items li::marker {
    color: var(--color-background-attention-light);
}

.no-deprecations {
    text-align: center;
    font-size: 1.5rem;
    font-style: italic;
}
/* CHANGELOG END*/

/* CALL TO ACTION START*/
.action {
    padding: 2rem;
    background-color: var(--color-brand);
    color: var(--color-text-secondary);
}

.action p a, .action p a:visited {
    color: var(--color-text-secondary);
}

.action h2 {
    text-align: center;
    margin-bottom: 0.5rem;
}
/* CALL TO ACTION END*/

/* FOOTER START */
.footmenu {
    margin: 1rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
}

.footmenu a {
    color: var(--color-text-primary);
    text-decoration: none;
}

.footmenu a:hover {
    text-decoration: underline;
}

.footmenu li {
    list-style: none;
}
/* FOOTER END*/

/* RESPONSIVENESS START */
@media screen and (min-width: 55ch) {
    .hero h1{
        flex-direction: row;
    }
    .hero h1 span{
        margin: 0;
    }
    .phpcode {
        overflow-x: unset;
    }

    .phpcode code {
        white-space: pre-wrap;
        word-wrap: break-word;
    }

}

@media screen and (min-width: 990px) {
    .hamburger-btn {
        display: none;
    }

    .nav__wrapper {
        display: flex;
        align-items: center;
        padding: 1rem;
    }

    .navbar__nav {
        width: auto;
        position: static;
        transform: none;
        display: flex;
        margin: 0 1rem;
        padding: 0;
        flex-direction: row;
        align-items: flex-start;
        gap: 1rem;
        border: none;
    }

    .navbar__nav a {
        font-size: 1rem;
    }

    .nav__header {
        display: contents;
    }

    label[for="theme-toggle"] {
        order: 1;
        margin-left: 1rem;
    }

    .navbar__search-form {
        margin: 0;
        flex: 1;
    }

    #nav-toggle:checked ~ .navbar__search-form {
        display: block;
    }

    h1 {
        flex-direction: row;
    }

    .compare__code {
        display: grid;
        grid-template-columns: repeat(2, calc(50% - 0.5rem));
        grid-template-rows: auto auto;
        grid-auto-flow: column;
        gap: 0 1rem;
    }

    .changed-items {
        column-count: 2;
        column-gap: 2rem;
        orphans: 3;
    }
}
/* RESPONSIVENESS END*/