/*
Theme Name: VARI
Description: VARI studio theme with Gooseberry Juice headings and readable Inter body text.
Template: twentytwenty
Version: 1.0.0
Text Domain: vari
*/

@font-face {
    font-family: "Gooseberry Juice";
    src: url("fonts/gooseberry-juice.otf") format("opentype");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

body,
.entry-content,
.entry-content p,
.entry-content li,
input,
textarea,
select {
    font-family: "Inter var", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

h1, h2, h3, h4, h5, h6,
.entry-content h1, .entry-content h2, .entry-content h3,
.entry-content h4, .entry-content h5, .entry-content h6,
button, .button, input[type="submit"], .wp-block-button__link {
    font-family: "Gooseberry Juice", sans-serif !important;
}

/* Keep the VARI site title in its original Twenty Twenty font. */
body .site-title,
body .site-title * {
    font-family: "Inter var", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif !important;
}

/* Softer links, with a visible focus outline for keyboard navigation. */
.entry-content a,
.primary-menu a,
.modal-menu a,
.footer-menu a {
    color: #d4b9df !important;
    text-decoration-color: #94759f;
    text-underline-offset: .2em;
}

.entry-content a:hover,
.primary-menu a:hover,
.footer-menu a:hover {
    color: #f0dff5 !important;
}

a:focus-visible, button:focus-visible {
    outline: 2px solid #e7c8f0;
    outline-offset: 5px;
}

/* Bring the existing Projects heading and game closer to the navigation. */
.header-inner { padding-top: 2.4rem; padding-bottom: 2.4rem; }
.singular .entry-header { padding: 2.4rem 0 3rem; }
.entry-title { font-size: clamp(3.8rem, 5vw, 6rem); }
.post-inner { padding-top: 3.2rem; }
.entry-content > h2,
.entry-content > p { margin-left: auto; margin-right: auto; }
.entry-content > .wp-block-image { margin-top: 0 !important; margin-bottom: 3.2rem !important; }
.entry-content .wp-block-image img { width: 100%; height: auto; }
.entry-content h2 { font-size: clamp(3rem, 4vw, 4.2rem); margin: 0 auto 1.6rem; }
.entry-content p { font-size: 1.8rem; line-height: 1.7; margin: 0 auto 2.4rem; color: #ddd4de; }

.entry-content li, .entry-content figcaption { font-family: "Inter var", sans-serif; font-size: 1.8rem; line-height: 1.7; }
.entry-content h3 { font-size: clamp(2.4rem, 3vw, 3.2rem); margin-top: 3.2rem; margin-bottom: 1.6rem; }
.entry-content h4, .entry-content h5, .entry-content h6 { margin-top: 2.4rem; margin-bottom: 1.2rem; }
.entry-content > :first-child { margin-top: 0 !important; }
.entry-content > :last-child { margin-bottom: 0 !important; }
body.template-full-width .entry-content > p,
body.template-full-width .entry-content > h2,
body.template-full-width .entry-content > h3 { max-width: 76rem !important; }
body.template-full-width .entry-content > .wp-block-image { max-width: 90rem !important; }
.entry-content figure { margin-top: 2.4rem; margin-bottom: 2.4rem; }
.entry-content .wp-block-group { margin-top: 3.2rem; margin-bottom: 3.2rem; }
.entry-content li { color: #ddd4de; }
.archive-header { padding: 3rem 0; }
.archive-title { font-size: clamp(3.8rem, 5vw, 6rem); }
.archive-subtitle, .intro-text { font-size: 1.8rem; line-height: 1.7; }
.pagination-wrapper { margin-top: 4.8rem; }
.post-meta a, .pagination a, .footer-credits a, .to-the-top { color: #d4b9df !important; }
.primary-menu .sub-menu, .modal-menu .sub-menu { background: #4c0b3a; }

/* The parent customizer gives dropdowns a white background: override the
   dropdown surface and its pointer together for clear, consistent contrast. */
#site-header .primary-menu ul {
    background: #211823 !important;
    color: #ffffff;
    border: 1px solid #65506c;
    box-shadow: 0 .8rem 2.4rem rgba(0, 0, 0, .3);
}
#site-header .primary-menu ul::after { border-bottom-color: #211823 !important; }
#site-header .primary-menu ul a { color: #ffffff !important; }
#site-header .primary-menu ul a:hover,
#site-header .primary-menu ul a:focus {
    color: #ffffff !important;
    background: #49374e;
}

/* Shared form fields and actions for Contact, search and comments. */
input[type="text"], input[type="email"], input[type="url"], input[type="search"],
input[type="tel"], input[type="number"], textarea, select {
    background: #211823;
    color: #ffffff;
    border: 1px solid #65506c;
    border-radius: .6rem;
    font-size: 1.8rem;
    padding: 1.2rem 1.4rem;
    width: 100%;
    max-width: 100%;
}
input:focus, textarea:focus, select:focus { border-color: #d4b9df; outline: 2px solid #d4b9df; outline-offset: 2px; }
.entry-content label, .comment-form label { display: block; color: #ddd4de; font-size: 1.6rem; line-height: 1.6; }
.entry-content input[type="submit"], .search-submit, .comment-form .submit {
    min-height: 4.8rem;
    border: 1px solid #d4b9df;
    border-radius: .6rem;
    padding: 1.4rem 2.4rem;
    background: #d4b9df;
    color: #29132f;
    font-size: 1.8rem;
    text-decoration: none;
}
.entry-content input[type="submit"]:hover, .search-submit:hover, .comment-form .submit:hover { background: #ead6f2; text-decoration: none; }
.wpcf7 form .wpcf7-response-output { margin: 2rem 0; color: #ddd4de; }

/* Wider team profiles preserve the full biographies without narrow columns. */
.entry-content > .vari-team { width: calc(100% - 4rem) !important; max-width: 58rem !important; }
.vari-team > .wp-block-group__inner-container { max-width: 100% !important; width: 100%; }
.vari-team .wp-block-columns { flex-direction: column; gap: 2.4rem; width: 100%; max-width: 100% !important; margin-bottom: 0; }
.vari-team .wp-block-column { flex-basis: auto !important; width: 100%; }
.vari-team-card { width: 100%; max-width: 100% !important; padding: 2.8rem; background: #211823; border: 1px solid #49374e; border-radius: .8rem; margin: 0 !important; }
.vari-team-card,
.vari-team-card > .wp-block-group__inner-container {
    display: grid;
    grid-template-columns: 14rem minmax(0, 1fr);
    column-gap: 2.8rem;
    row-gap: .8rem;
    align-items: start;
}
.vari-team-card > .wp-block-group__inner-container { grid-column: 1 / -1; width: 100%; max-width: 100%; }
.vari-team-card .wp-block-image { grid-column: 1; grid-row: 1 / span 3; width: 14rem; max-width: 100%; margin: 0 !important; }
.vari-team-card .wp-block-image img { width: 14rem; max-width: 100%; }
.vari-team-card h3 { grid-column: 2; grid-row: 1; text-align: left; font-size: 2.8rem; margin: 0 !important; }
.vari-team-card .vari-role { grid-column: 2; grid-row: 2; font-size: 1.5rem; line-height: 1.5; color: #d4b9df; text-align: left; margin: 0 0 .8rem !important; }
.vari-team-card p:not(.vari-role) { grid-column: 2; grid-row: 3; font-size: 1.7rem; line-height: 1.65; margin: 0 !important; }

.entry-content .wp-block-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem;
    margin-top: 0;
    margin-bottom: 4.8rem;
}

.entry-content .wp-block-button__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 4.8rem;
    padding: 1.4rem 2.4rem;
    border: 1px solid #d4b9df;
    border-radius: .6rem;
    background: #d4b9df;
    color: #29132f !important;
    font-size: 1.8rem;
    text-decoration: none !important;
    transition: background-color .15s ease, border-color .15s ease;
}

.entry-content .wp-block-button__link:hover {
    background: #ead6f2;
    border-color: #ead6f2;
    color: #29132f !important;
}

.entry-content > .vari-contact-buttons {
    width: calc(100% - 4rem) !important;
    max-width: 76rem !important;
    justify-content: center;
}
@media (min-width: 601px) {
    .entry-content .vari-contact-buttons { flex-wrap: nowrap; }
    .entry-content .vari-contact-buttons .wp-block-button { flex: 0 0 auto; }
    .entry-content .vari-contact-buttons .wp-block-button__link { white-space: nowrap; }
}
@media (min-width: 601px) and (max-width: 799px) {
    .entry-content .vari-contact-buttons .wp-block-button__link { font-size: 1.6rem; padding-left: 1.6rem; padding-right: 1.6rem; }
}

.entry-content .is-style-outline .wp-block-button__link {
    background: transparent;
    border-width: 1px;
    color: #d4b9df !important;
}

.entry-content .is-style-outline .wp-block-button__link:hover {
    background: #291d2e;
    color: #f0dff5 !important;
}

.entry-content > .vari-studio-intro {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 3.2rem;
    border-top: 1px solid #49374e;
}

.home .vari-studio-intro p:last-child { margin-bottom: 0; }
.footer-nav-widgets-wrapper { margin-top: 4.8rem; }

@media (max-width: 600px) {
    .singular .entry-header { padding: 1.6rem 0 2rem; }
    .post-inner { padding-top: 2.4rem; }
    .entry-content p { font-size: 1.6rem; }
    .entry-content .wp-block-button { flex: 1 1 22rem; }
    .entry-content .wp-block-button__link { width: 100%; }
    .vari-team-card { padding: 2rem; }
    .vari-team-card,
    .vari-team-card > .wp-block-group__inner-container { grid-template-columns: 8rem minmax(0, 1fr); column-gap: 1.6rem; }
    .vari-team-card .wp-block-image { width: 8rem; grid-row: 1 / span 2; }
    .vari-team-card .wp-block-image img { width: 8rem; }
    .vari-team-card h3 { font-size: 2.4rem; }
    .vari-team-card .vari-role { font-size: 1.4rem; }
    .vari-team-card p:not(.vari-role) { grid-column: 1 / -1; margin-top: 1.2rem !important; font-size: 1.6rem; }
}

/* Compact project rows sit below the featured Slimy Timey game. */
.entry-content > .vari-webgame-projects { max-width: 58rem; margin: 4.8rem auto; }
.vari-webgame-project-list { display: grid; gap: 1.6rem; }
.vari-webgame-project { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: 2rem; align-items: center; padding: 1.6rem; background: #211823; border: 1px solid #49374e; border-radius: .8rem; }
.vari-webgame-project .vari-game-icon { width: 10rem; height: 10rem; }
.vari-game-icon { display: block; aspect-ratio: 1; overflow: hidden; background: #34283a; }
.vari-game-icon img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vari-game-icon-pending { display: grid; place-content: center; height: 100%; padding: 1rem; color: #ddd4de; text-align: center; font-family: "Gooseberry Juice", sans-serif; }
.vari-webgame-project h3 { font-size: 2.6rem; margin: 0 0 1.2rem; }
.vari-webgame-project .wp-block-button__link { font-size: 1.6rem; min-height: 4.4rem; padding: 1rem 1.6rem; }

/* One 960 by 540 desktop player, scaled proportionally on smaller screens. */
.entry-content > .vari-webgames { width: calc(100% - 4rem) !important; max-width: 96rem !important; margin: 0 auto; }
.vari-webgame-panel { margin-bottom: 3.2rem; scroll-margin-top: 2rem; animation: vari-player-open .25s ease-out; }
.vari-webgame-panel[hidden] { display: none !important; }
.vari-webgame-player-heading { display: flex; align-items: center; justify-content: space-between; gap: 1.6rem; margin-bottom: 1.6rem; }
.vari-webgame-player-heading h2 { font-size: 3rem; margin: 0; }
.vari-player-close { background: transparent; color: #d4b9df; border: 1px solid #65506c; border-radius: .6rem; padding: 1rem 1.4rem; font-size: 1.5rem; white-space: nowrap; }
.vari-player-close:hover { background: #34283a; text-decoration: none; }
.vari-webgame-stage { width: 100%; aspect-ratio: 16 / 9; background: #000; outline: 1px solid #49374e; }
.vari-webgame-stage iframe { display: block; width: 100%; height: 100%; border: 0; margin: 0; }
.vari-webgame-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; max-width: 58rem; margin: 0 auto; }
.vari-webgames .vari-webgame-hint { text-align: center; font-size: 1.6rem; margin-bottom: 2rem; }
.vari-webgame-tile { padding: 1rem; background: #211823; border: 2px solid #49374e; border-radius: .8rem; text-transform: none; color: #fff; font-size: 1.8rem; text-align: center; }
.vari-webgame-tile .vari-game-icon { width: 100%; margin-bottom: 1.2rem; }
.vari-webgame-tile:hover { border-color: #94759f; background: #2f2133; text-decoration: none; }
.vari-webgame-tile[aria-pressed="true"] { border-color: #d4b9df; background: #34283a; }
.vari-webgame-tile-title { display: block; line-height: 1.35; }
.vari-webgame-size { display: block; margin-top: .6rem; font-family: "Inter var", sans-serif; font-size: 1.3rem; font-weight: 400; line-height: 1.4; color: #aaa0ad; }
@keyframes vari-player-open { from { opacity: 0; transform: translateY(-1.2rem); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .vari-webgame-panel { animation: none; } }
@media (max-width: 600px) {
    .vari-webgame-project { grid-template-columns: 8rem minmax(0, 1fr); gap: 1.4rem; padding: 1.2rem; }
    .vari-webgame-project .vari-game-icon { width: 8rem; height: 8rem; }
    .vari-webgame-project h3 { font-size: 2.2rem; }
    .vari-webgame-project .wp-block-button__link { width: auto; font-size: 1.4rem; padding: .8rem 1.2rem; }
    .vari-webgame-gallery { gap: .8rem; }
    .vari-webgame-tile { padding: .6rem; font-size: 1.4rem; }
    .vari-webgame-player-heading h2 { font-size: 2.2rem; }
    .vari-player-close { font-size: 1.3rem; }
}