@import "styles/ribbon.css";

/* ============================================
   BASE STYLES
   ============================================ */

* {
    box-sizing: border-box;
}

body {
    background-color: var(--content-background-color);
    width: 100dvw;
    overflow-x: hidden;
}

body > footer {
    background: var(--dark-grey-color);
    text-align: center;
}

#layout {
    margin: 0 auto;
    clear: both;
}

#layout-content {
    padding: 0;
}

.navbar {
    border-bottom: 1px solid hsl(229 30% 38% / 1);
    box-shadow: unset;
    width: 100dvw;
}

/* ============================================
   UTILITIES
   ============================================ */

.php8-breakout {
    position: relative;
    width: 100vw;
    left: 50%;
    transform: translateX(-50%);
    max-width: none;
}

/* ============================================
   COUNTER STYLES
   ============================================ */

@counter-style plus {
    system: cyclic;
    symbols: "\002B\002B";
    suffix: " ";
}

@counter-style minus {
    system: cyclic;
    symbols: "\002D\002D";
    suffix: " ";
}

/* ============================================
   TYPOGRAPHY
   ============================================ */

.php8-h2 {
    max-width: 42ch;
    margin-bottom: 2.4rem;
    text-wrap: balance;
    font-weight: 500;
}

.php8-h2 code,
.php8-compare__content code {
    color: hsl(225 42% 25% / 1);
    background-color: hsl(225deg 42% 25% / 8%);
    font-family: monospace;
}

.php8-h3 {
    line-height: 1.5;
}

.php8-subtitle {
    text-wrap: balance;
}

@media (max-width: 768px) {
    .php8-h2 {
        font-size: 24px;
    }
}

/* ============================================
   HEADER SECTION
   ============================================ */

.php8-section_header {
    font-family: var(--font-family-sans-serif);
}

.php8-hero {
    width: 56%;
    margin: 0 auto;
    text-wrap: balance;
}

@media (max-width: 768px) {
    .php8-section_header {
        min-height: 100dvh;
    }

    .php8-hero {
        width: auto;
        margin: unset;
    }
}

.php8-section {
    margin: 0 auto;
    /*padding: 1rem;*/

    @media (min-width: 768px) {
        max-width: 1440px;
    }
}

/* ============================================
   COMPARE SECTION
   ============================================ */

.php8-compare ~ .php8-compare {
    margin-top: 90px;
    padding-top: 90px;
    border-top: 1px solid hsl(0 0% 85% / 1);
}

.php8-compare__main {
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 1.4rem;
}

.php8-compare__arrow {
    display: none;
}

.php8-compare__content {
    margin-top: 3rem;
    padding-left: 0.4rem;
    font-size: 1.32rem;
    line-height: 2rem;

    p {
        max-width: 56ch;
    }

    .php8-new-breaking & {
        margin-top: 1rem;
    }
}

.php8-compare__block {
    width: 50%;
    display: flex;
    flex-basis: unset;
}

.php8-compare__block:first-child.example-contents .phpcode {
    background: hsl(0 0% 92% / 1);
}

.php8-compare__label {
    color: #858585;
    background-color: hsl(0 0% 85% / 1);
    margin-left: -1rem;
}

.php8-compare__label_new {
    background-color: var(--dark-blue-color);
    color: #fff;
}

@media (max-width: 768px) {
    .php8-compare ~ .php8-compare {
        margin-top: 48px;
        padding-top: 48px;
    }

    .php8-compare__content {
        max-width: 100%;
        margin-top: 1.5rem;
        padding-left: 0;
        font-size: 1.1rem;
        line-height: 1.6rem;

        p {
            max-width: unset;
        }
    }

    .php8-compare__block {
        width: 100%;
    }

    .php8-compare__main {
        display: flex;
        flex-direction: column;
        gap: 2rem;
    }
}

@media (max-width: 810px) {
    .php8-compare__main {
        display: flex;
    }
}

/* ============================================
   CODE BLOCKS
   ============================================ */

.example-contents > [class$="code"] {
    border-radius: 5px;
    border: 1px solid #b9bdc9;
    box-shadow: 1px 2px 2px 0px #1e264d26;
    background-color: white;
}

.example-contents:first-child > [class$="code"] {
    border: none;
    box-shadow: none;
    background-color: white;
}

.php8-code {
    padding: 2rem 1.5rem 1.5rem !important;
    align-items: flex-start;
}

.phpcode pre,
.phpcode code {
    white-space: pre-wrap !important; /* preserve newlines but allow wrapping */
    overflow-wrap: anywhere !important; /* allow breaking long words/URLs */
    word-break: break-word !important; /* fallback for older browsers */
    hyphens: auto;
}

.phpcode span.comment {
    color: hsl(229 8% 69% / 1);
    letter-spacing: -0.4px;
    padding-top: 0.4rem;
    display: block;
    clear: both;
}

/* ============================================
   COLUMNS & LISTS
   ============================================ */

.php8-columns {
    gap: 1.4rem;
}

.php8-column {
    padding: 0;
    border-radius: 4px;
    width: auto;
}

.php8-list {
    padding: 0;
    margin: 0 0 0 1.2rem;
    display: flex;
    flex-direction: column;
    border-radius: 4px;
    width: 100%;
    max-width: 100vw;
    gap: 0.48rem;
    list-style-position: outside;
    list-style-type: plus;

    @media (max-width: 768px) {
        margin: 0 0 0 0;
    }
}

.php8-list li {
    padding: 3px 8px;
    font-size: 15px;
    text-wrap: auto;
    word-break: break-word;
    white-space: pre-wrap;
    line-height: 1.2em;
}

.php8-list li ~ li {
    margin: 0;
}

@media (max-width: 768px) {
    .php8-columns {
        flex-direction: column;
        display: flex;
    }
}

/* ============================================
   NEW & BREAKING CHANGES SECTION
   ============================================ */

.php8-breakout-new-breaking {
    padding: 8rem 0;
    padding-bottom: 0;
    background-image: linear-gradient(0deg, var(--dark-grey-color), #383c4d);
    margin-top: 4.8rem;

    @media (max-width: 768px) {
        padding: 4rem 0;
        margin-top: 0;
    }
}

.php8-new-breaking__container {
    gap: 1.4rem;
    max-width: calc(1440px - 3rem);
    margin: 0 auto;
    padding: 1.4rem;
    border: 1px solid #d9d9d9;
    border-radius: 4px;

    > div {
        padding: 4rem 2rem;
        background-color: #fff;
        border-radius: 3px;

        @media (max-width: 768px) {
            padding: 2rem;
        }
    }

    @media (max-width: 768px) {
        padding: 0.4rem;
        margin: 1rem;
    }
}

.php8-new-breaking {
    header {
        max-width: 48ch;
        margin: 0 0 2rem 2rem;

        @media (max-width: 768px) {
            margin: 0 0 2rem 0;
        }
    }

    li {
        border-radius: 4px;
    }

    code {
        color: hsl(120 71% 30% / 1);
        background-color: hsl(120 35% 93% / 1);
        font-size: 12px;
    }

    ::marker {
        color: #b4bfb4;
    }

    .php8-h2 {
        font-size: 26px;
        line-height: 1.3;
        font-family: monospace;
        font-weight: 400;
        text-wrap: balance;
        max-width: 36ch;
        margin: 0;
        background-color: hsl(0 0% 94% / 1);
        display: inline;
    }

    /* Breaking changes variant */
    &:last-child {
        ul {
            list-style-type: minus;
        }

        li {
            border-radius: 4px;
        }

        code {
            color: hsl(33 52% 32% / 1);
            background-color: hsl(33 88% 90% / 1);
            font-size: 12px;
        }
    }
}

/* ============================================
   FOOTER SECTION
   ============================================ */

.php8-section_darker {
    background: var(--dark-grey-color);
    color: #fff;

    .php8-h2 {
        color: #fff;
    }

    #layout-content & {
        a:link,
        a:visited {
            color: var(--background-text-color);
        }
    }
}

.php8-footer__content {
    text-align: center;
}

.php8-footer {
    .php8-h2 {
        max-width: unset;
        font-family: monospace;
    }
}

/* ============================================
    STRIPES
   ============================================ */
.stripes {
    background-image: linear-gradient(
        135deg,
        hsl(0 0% 86% / 0.4) 12.5%,
        hsl(0 0% 86% / 0) 12.5%,
        hsl(0 0% 86% / 0) 50%,
        hsl(0 0% 86% / 0.4) 50%,
        hsl(0 0% 86% / 0.4) 62.5%,
        hsl(0 0% 86% / 0) 62.5%,
        hsl(0 0% 86% / 0) 100%
    );
    background-size: 5.66px 5.66px;
}

/* ============================================
   BUTTONS
   ============================================ */

.php8-button_light {
    color: var(--dark-blue-color) !important;
}