/*
Theme Name: Omer Avcioglu Portfolio
Theme URI: https://omeravcioglu.com
Author: Omer Avcioglu
Description: Portfolio of Omer Avcioglu, product designer and technical game designer. Built on the McHunter Studio design system: an orange title screen, Game Select, a career log and a postcard. The page is made of custom elements in assets/js/portfolio.js.
Version: 1.1.1
Requires at least: 6.0
Requires PHP: 7.4
License: All rights reserved
Text Domain: omer-portfolio
*/

body {
	margin: 0;
	background: #12141B;
	color: #F2F3F6;
	font-family: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
	-webkit-font-smoothing: antialiased;
}

/* The header stays on top while the page scrolls (below the admin bar when logged in). */
.site-header { position: sticky; top: 0; z-index: 100; }
body.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .site-header { top: 46px; } }
@media (max-width: 600px) { body.admin-bar .site-header { top: 0; } }

mch-header { display: block; height: 84px; }
@media (max-width: 900px) { mch-header { height: 64px; } }

/* The title screen fills most of the window on bigger screens; on tablets and phones it is as tall as its content. */
mch-hero { display: block; --hero-min: clamp(600px, calc(100vh - 84px), 720px); }
@media (max-width: 900px) { mch-hero { --hero-min: 0px; } }

mch-games, mch-stats, mch-careers, mch-about, mch-contact, mch-footer { display: block; }

/* Hold the space while the elements load, so the page doesn't jump. */
mch-hero:not(:defined) { min-height: var(--hero-min); background: #EE7417; }
mch-games:not(:defined) { min-height: 800px; background: #12141B; }
mch-stats:not(:defined) { min-height: 260px; background: #3B63AC; }
mch-careers:not(:defined) { min-height: 900px; background: #EE7417; }
mch-about:not(:defined) { min-height: 800px; background: #EEF0F4; }
mch-contact:not(:defined) { min-height: 560px; background: #EE7417; }

/* Without JavaScript: the essentials. */
.oa-fallback { max-width: 760px; margin: 0 auto; padding: 64px 24px; line-height: 1.6; }
.oa-fallback h1 { margin: 0 0 8px; font-size: 48px; line-height: 1; letter-spacing: -.03em; }
.oa-fallback a { color: #F7A55C; }

/* Other pages (privacy policy and the like): a plain sheet of paper. */
.oa-page { min-height: 70vh; background: #EEF0F4; color: #1E1F26; }
.oa-page article { max-width: 760px; margin: 0 auto; padding: 72px 24px 96px; font-size: 17px; line-height: 1.65; }
.oa-page h1 { margin: 0 0 24px; font-size: clamp(38px, 6vw, 64px); line-height: 1; letter-spacing: -.04em; }
.oa-page a { color: #3B63AC; }

/* 404: game over. */
.oa-over { position: relative; min-height: calc(100vh - 84px); display: grid; place-items: center; padding: 48px 20px; overflow: hidden; text-align: center;
	background: #0B0C10; color: #F2F3F6; isolation: isolate; }
.oa-over::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .04) 0 1px, transparent 1px 3px); }
.oa-over small { display: block; margin-bottom: 18px; color: #EE7417; font: 500 13px/1 "Fira Mono", ui-monospace, Consolas, monospace; letter-spacing: .14em; text-transform: uppercase; }
.oa-over h1 { margin: 0; font-size: clamp(64px, 14vw, 168px); font-weight: 800; line-height: .9; letter-spacing: -.05em; color: #fff;
	text-shadow: 4px 0 0 #E04A3A, -4px 0 0 #3B63AC; animation: oa-flicker 3.2s steps(1) infinite; }
@keyframes oa-flicker { 0%, 100% { opacity: 1; } 92% { opacity: .55; transform: translateX(3px); } 94% { opacity: 1; transform: none; } }
.oa-over p { margin: 22px auto 30px; max-width: 34ch; color: #A9AFBF; font-size: 18px; line-height: 1.5; }
.oa-over a { display: inline-flex; align-items: center; gap: 10px; padding: 15px 24px; border-radius: 999px; background: #EE7417; color: #1E1F26;
	font-size: 17px; font-weight: 700; text-decoration: none; box-shadow: 0 5px 0 rgba(0, 0, 0, .5); }
.oa-over a:hover { transform: translateY(-2px); }
.oa-over .count { display: block; margin-top: 18px; color: #7D8395; font: 500 12px/1 "Fira Mono", ui-monospace, Consolas, monospace; letter-spacing: .12em; text-transform: uppercase; }
@media (prefers-reduced-motion: reduce) { .oa-over h1 { animation: none; } }