/*
 * try.devowl.io design layer: a slightly modernised devowl.io.
 * Source: the sandbox signup mockup 01-signup.html and assets/devowl.css (draft v6, 2026-11-01).
 * Palette and base type sizes come from Blocksy (deploy/setup/design-system.php), the font files from
 * this plugin. Header, footer and fonts copy the old https://try.devowl.io (sandbox concept S10-8,
 * 2026-11-10); the sign-up page components below keep the slightly modernised look. Selectors are scoped by the
 * body class .try-site, which only blog 1 carries.
 *
 * Type scale (identical to design-system.php): title 34px (26px under 640px), card heading 28px,
 * body 17px (16px under 640px), small 15px, fine print 13px.
 */

/*
 * Fonts of the old https://try.devowl.io, self-hosted from this plugin (product owner, sandbox concept
 * S10-8, 2026-11-10): Lato 2.015 (tyPoland Lukasz Dziedzic) and Nunito Sans 2.001 (The Nunito Project
 * Authors), both SIL Open Font License 1.1 (fonts/OFL.txt, licence fields read from the files' name tables).
 * They serve the whole site under the family names Blocksy's typography already uses ("Lato", "Nunito Sans").
 */
@font-face {
    font-display: swap;
    font-family: "Nunito Sans";
    font-style: normal;
    font-weight: 400;
    src: url("fonts/nunito-sans-normal-400.woff2") format("woff2");
}
@font-face {
    font-display: swap;
    font-family: "Nunito Sans";
    font-style: italic;
    font-weight: 400;
    src: url("fonts/nunito-sans-italic-400.woff2") format("woff2");
}
@font-face {
    font-display: swap;
    font-family: "Nunito Sans";
    font-style: normal;
    font-weight: 600;
    src: url("fonts/nunito-sans-normal-600.woff2") format("woff2");
}
@font-face {
    font-display: swap;
    font-family: "Nunito Sans";
    font-style: italic;
    font-weight: 600;
    src: url("fonts/nunito-sans-italic-600.woff2") format("woff2");
}
@font-face {
    font-display: swap;
    font-family: "Nunito Sans";
    font-style: normal;
    font-weight: 700;
    src: url("fonts/nunito-sans-normal-700.woff2") format("woff2");
}
@font-face {
    font-display: swap;
    font-family: "Nunito Sans";
    font-style: normal;
    font-weight: 800;
    src: url("fonts/nunito-sans-normal-800.woff2") format("woff2");
}
@font-face {
    font-display: swap;
    font-family: "Lato";
    font-style: normal;
    font-weight: 400;
    src: url("fonts/lato-regular.woff2") format("woff2");
}
@font-face {
    font-display: swap;
    font-family: "Lato";
    font-style: normal;
    font-weight: 600;
    src: url("fonts/lato-semibold.woff2") format("woff2");
}
@font-face {
    font-display: swap;
    font-family: "Lato";
    font-style: normal;
    font-weight: 700;
    src: url("fonts/lato-bold.woff2") format("woff2");
}

:root {
    --try-blue: var(--theme-palette-color-1, #45b3dd);
    --try-blue-dark: #469bc3;
    --try-blue-grad: linear-gradient(135deg, #45b3dd, #469bc3);
    --try-yellow: var(--theme-palette-color-2, #ffcc3e);
    --try-slate: var(--theme-palette-color-4, #535b7c);
    --try-text: var(--theme-palette-color-3, #666666);
    --try-line: var(--theme-palette-color-5, #e3e9ef);
    --try-bg-alt: var(--theme-palette-color-6, #f5f9fc);
    --try-footer: var(--theme-palette-color-8, #333333);
    --try-footer-text: #b3b3b3; /* 6.03:1 on #333333; the old site's #999999 reaches 4.43:1 */
    --try-footer-text-hover: #ffffff;
    --try-footer-heading: #f5f5f5;
    --try-footer-line: #444444;
    --try-menu-line: #e8e8e8;
    --try-menu-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
    --try-width: 1080px;
    --try-gutter: 24px;
    --try-fs-title: 34px;
    --try-fs-small: 15px;
    --try-fs-fine: 13px;
    --try-fs-shell-small: 14.45px; /* the old site's footer and menu descriptions */
    --try-header-height: 80px;
    --try-logo-height: 55px;
    --try-font-head: "Nunito Sans", "Helvetica Neue", Arial, sans-serif;
    --try-font-text: Lato, "Helvetica Neue", Arial, sans-serif;
}

/*
 * Font smoothing as on the old https://try.devowl.io, which sets none on text (manual test 2, 2026-11-11: the
 * fonts looked "much sharper" than there). Blocksy's main.min.css sets -webkit-font-smoothing: antialiased and
 * -moz-osx-font-smoothing: grayscale on body, which macOS browsers render thinner and crisper. Every other
 * typographic value (face, file, weight, letter-spacing, text-rendering, font-feature-settings, font-display)
 * already matched the old site (verify/site-type-compare.mjs). body.try-site outranks Blocksy's body rule, and
 * every element inherits the value.
 */
body.try-site {
    -webkit-font-smoothing: auto;
    -moz-osx-font-smoothing: auto;
}

.try-container {
    width: 100%;
    max-width: calc(var(--try-width) + 2 * var(--try-gutter));
    margin: 0 auto;
    padding: 0 var(--try-gutter);
}

/* The old site's base line height (32px) holds in the shell only, the content area keeps its own. */
.try-header,
.try-footer {
    font-family: var(--try-font-text);
    line-height: 32px;
}

/* ---------- Header: the old site's sticky bar ---------- */
.try-site #header {
    position: sticky;
    top: var(--wp-admin--admin-bar--height, 0px);
    z-index: 50;
}
.try-header {
    background: #fff;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
}
.try-header > .try-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    height: var(--try-header-height);
}
.try-logo {
    display: block;
    flex: none;
    height: var(--try-logo-height);
}
.try-logo img {
    display: block;
    width: auto;
    height: 100%;
}
.try-header__end {
    display: flex;
    align-items: center;
    height: 100%;
    margin-right: -17px; /* the last item's padding ends on the container edge, as on the old site */
}
.try-chevron {
    flex: none;
    width: 0.625em;
    height: 1em;
    margin-left: 0.45em;
    transition: transform 0.15s ease;
}

/* Menu items: "WordPress Plugins" with the product dropdown, "Support". */
.try-nav__list {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}
.try-nav__item {
    position: relative;
}
.try-nav__link {
    display: inline-flex;
    align-items: center;
    padding: 0 17px;
    color: var(--try-slate);
    font: 600 17px/50px var(--try-font-head);
    text-decoration: none;
}
.try-nav__link:hover,
.try-nav__link:focus-visible,
.try-nav__plugins:hover > .try-nav__link,
.try-nav__plugins.is-open > .try-nav__link {
    color: var(--try-blue);
}
/* Closed with display:none (not visibility), so the product icons (loading="lazy") load only when the list opens,
   never with the page. */
.try-nav__submenu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 60;
    width: 470px;
    margin: 0;
    padding: 0;
    background: #fff;
    box-shadow: var(--try-menu-shadow);
    list-style: none;
}
.try-nav__plugins:hover > .try-nav__submenu,
.try-nav__plugins:focus-within > .try-nav__submenu,
.try-nav__plugins.is-open > .try-nav__submenu {
    display: block;
}
.try-nav__plugins.is-closed > .try-nav__submenu {
    display: none;
}
.try-nav__submenu > li + li,
.try-mnav__products > li + li {
    border-top: 1px solid var(--try-menu-line);
}

/* One product row (dropdown and hamburger panel). */
.try-product {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 17px 25.5px;
    color: var(--try-text);
    text-decoration: none;
}
.try-product img {
    flex: none;
    width: 60px;
    height: 60px;
}
.try-product__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.try-product__name {
    color: var(--try-slate);
    font: 600 17px/1.4 var(--try-font-head);
}
.try-product__desc {
    color: var(--try-text);
    font: 400 var(--try-fs-shell-small) / 1.4 var(--try-font-head);
}
.try-product:hover .try-product__name,
.try-product:focus-visible .try-product__name {
    color: var(--try-blue);
}

/*
 * Language switch as on the old site: the current language's round 18px flag and a slate chevron, no
 * visible text. The list below names the other language with its flag (204px wide, white, shadow).
 * Tap and keyboard open it through <details>, try-devowl-site.js adds hover.
 */
.try-lang {
    position: relative;
    flex: none;
}
.try-lang__current {
    display: inline-flex;
    align-items: center;
    height: 50px;
    padding: 0 17px;
    color: var(--try-slate);
    font-size: 17px;
    cursor: pointer;
    list-style: none;
}
.try-lang__current::-webkit-details-marker,
.try-burger__toggle::-webkit-details-marker,
.try-mnav__plugins > summary::-webkit-details-marker {
    display: none;
}
.try-lang__current img,
.try-lang__list img,
.try-mnav__languages img {
    display: block;
    flex: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
}
.try-lang[open] .try-chevron,
.try-mnav__plugins[open] .try-chevron {
    transform: rotate(180deg);
}
.try-lang__list {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 60;
    width: 204px;
    margin: 0;
    padding: 0;
    background: #fff;
    box-shadow: var(--try-menu-shadow);
    list-style: none;
}
.try-lang__list a,
.try-mnav__languages a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10.2px 20px;
    color: var(--try-slate);
    font: 600 17px/25.5px var(--try-font-head);
    text-decoration: none;
}
.try-lang__list a:hover,
.try-lang__list a:focus-visible {
    color: var(--try-blue);
}

/* Hamburger (below 1150px, the old site's breakpoint): a panel under the bar with the same entries. */
.try-burger {
    display: none;
}
.try-burger__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px; /* 24px icon plus 17px on each side, so the icon's right edge sits 17px from the screen edge */
    height: 50px;
    color: var(--try-slate);
    cursor: pointer;
    list-style: none;
}
.try-burger__icon {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 24px;
    height: 18px;
}
.try-burger__icon > span {
    display: block;
    height: 2px;
    border-radius: 1px;
    background: currentColor;
    transition:
        transform 0.15s ease,
        opacity 0.15s ease;
}
.try-burger[open] .try-burger__icon > span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}
.try-burger[open] .try-burger__icon > span:nth-child(2) {
    opacity: 0;
}
.try-burger[open] .try-burger__icon > span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}
.try-burger__panel {
    position: absolute;
    top: var(--try-header-height);
    right: 0;
    left: 0;
    max-height: calc(100vh - var(--try-header-height));
    overflow-y: auto;
    padding: 0 0 17px;
    background: #fff;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.try-mnav,
.try-mnav__products,
.try-mnav__languages ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.try-mnav__link {
    display: flex;
    align-items: center;
    padding: 0 var(--try-gutter);
    color: var(--try-slate);
    font: 600 17px/50px var(--try-font-head);
    text-decoration: none;
    cursor: pointer;
    list-style: none;
}
.try-mnav__link:hover,
.try-mnav__link:focus-visible {
    color: var(--try-blue);
}
.try-mnav__products .try-product {
    padding-right: var(--try-gutter);
    padding-left: var(--try-gutter);
}
.try-mnav__languages a {
    padding: 10.2px var(--try-gutter);
}

@media (max-width: 1149.98px) {
    .try-nav,
    .try-header .try-lang {
        display: none;
    }
    .try-burger {
        display: block;
    }
}

.try-lang__current:focus-visible,
.try-lang__list a:focus-visible,
.try-logo:focus-visible,
.try-nav__link:focus-visible,
.try-product:focus-visible,
.try-burger__toggle:focus-visible,
.try-mnav__link:focus-visible,
.try-mnav__languages a:focus-visible,
.try-footer a:focus-visible {
    outline: 2px solid var(--try-blue-dark);
    outline-offset: -2px;
}

/* ---------- Main area: light section that fills the viewport down to the footer ---------- */
.try-site #main-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.try-site #main-container > main {
    flex: 1 0 auto;
    background: var(--try-bg-alt);
}

/* ---------- Sign-up page: blue band with the highlighted title ---------- */
/* Visual rules carry .wp-block-group so they also apply in the editor canvas (editor parity),
   the .entry-content rules only beat Blocksy's block spacing on the frontend. */
.wp-block-group.try-band {
    padding: 20px 24px 56px;
    background: var(--try-blue-grad);
    text-align: center;
}
.try-site .entry-content > .try-band {
    margin-top: 0;
    margin-bottom: 0;
}
.try-band .try-title {
    max-width: var(--try-width);
    margin: 0 auto;
    color: var(--try-slate);
    font: 400 var(--try-fs-title) / 1.3 var(--try-font-head);
    text-align: center;
}
.try-title mark,
.try-title .try-highlight {
    padding: 0.08em 0.4em;
    background: var(--try-yellow);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    color: inherit;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}
.try-title strong,
.try-title b {
    font-weight: 800;
}

/* ---------- Sign-up page: the card that overlaps the band by 40px ---------- */
.wp-block-group.try-card,
.try-site .entry-content > .try-card {
    margin-top: -40px;
    margin-bottom: 48px;
}
.wp-block-group.try-card {
    position: relative;
    box-sizing: border-box;
    width: auto;
    max-width: 640px;
    margin-right: auto;
    margin-left: auto;
    padding: 24px 32px;
    border: 1px solid var(--try-line);
    border-radius: 2px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(31, 45, 61, 0.05);
}
.try-card > * {
    margin-top: 0;
    margin-bottom: 0;
}
/*
 * The card's intro reads like the old site's card intro, the paragraph under "Create Sandbox" on
 * https://try.devowl.io (manual test 2, 2026-11-11: the lead was "too weak against the form"): Lato 400, 17px on a
 * 32px line, #666666, at every width (the old site keeps 17px/32px at 390px too). Before: 15px on a 24px line.
 */
.try-card > .try-intro {
    margin-bottom: 12px;
    color: var(--try-text);
    font-family: var(--try-font-text);
    font-size: 17px;
    font-weight: 400;
    line-height: 32px;
}

/* ---------- Footer: the old site's two sections ---------- */
.try-footer {
    background: var(--try-footer);
    color: var(--try-footer-text);
    font-size: var(--try-fs-shell-small);
}
.try-footer__top,
.try-footer__bottom {
    padding: 68px 0;
}
.try-footer__bottom {
    border-top: 1px solid var(--try-footer-line);
    text-align: center;
}
.try-footer__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 51px;
}
.try-footer p {
    margin: 0;
}
.try-footer__heading {
    margin: 0 0 17px;
    color: var(--try-footer-heading);
    font: 700 20.4px/32px var(--try-font-head);
    letter-spacing: 0;
    text-transform: none;
}
.try-footer__brand p {
    margin: 0 0 25.5px;
}
.try-footer__brand img {
    display: block;
    width: 50px;
    height: 50px;
}
.try-footer__legal {
    text-align: right;
}
.try-footer__legal ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.try-footer__legal li {
    margin: 0 0 8.5px;
}
.try-footer__legal li:last-child {
    margin-bottom: 0;
}
.try-footer a {
    color: var(--try-footer-text);
    text-decoration: none;
}
.try-footer a:hover,
.try-footer a:focus-visible {
    color: var(--try-footer-text-hover);
}
@media (max-width: 767.98px) {
    :root {
        --try-header-height: 70px;
        --try-logo-height: 50px;
        --try-gutter: 17px;
    }
    .try-footer__top,
    .try-footer__bottom {
        padding: 25.5px 0;
    }
    .try-footer__grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .try-footer__spacer {
        display: none;
    }
    .try-footer__legal,
    .try-footer__bottom {
        text-align: left;
    }
    /* The old site's stacked footer: 25.5px on every side, and its empty middle column leaves about 51px
       between the owl and the legal heading. */
    .try-footer .try-container {
        padding-right: 25.5px;
        padding-left: 25.5px;
    }
    .try-footer__brand {
        margin-bottom: 51px;
    }
}

/* ---------- Small screens ---------- */
@media (max-width: 640px) {
    :root {
        --try-fs-title: 26px;
    }
    .wp-block-group.try-band {
        padding: 16px 16px 56px;
    }
    .try-band .try-title {
        line-height: 1.45;
    }
    /* Core's constrained layout forces margin-inline: auto !important, so the 12px side gap
       comes from the width, not from a margin. */
    .wp-block-group.try-card {
        max-width: calc(100% - 24px);
        padding: 20px 18px;
    }
    .wp-block-group.try-card,
    .try-site .entry-content > .try-card {
        margin-bottom: 32px;
    }
}

/* ---------- Buttons as on devowl.io: 135deg gradient #45b3dd > #469bc3, white text (Q2, 2026-11-05) ---------- */
.try-site .wp-element-button,
.try-site .wp-block-button__link,
.try-site .ct-button,
.try-site button[type="submit"],
.try-site input[type="submit"] {
    background-image: var(--try-blue-grad);
}
.try-site .wp-element-button:hover,
.try-site .wp-block-button__link:hover,
.try-site .ct-button:hover,
.try-site button[type="submit"]:hover,
.try-site input[type="submit"]:hover {
    background-image: none;
    background-color: var(--try-blue-dark);
}