/*
 * HighSea front-end styles.
 *
 * The theme header lives in style.css at the theme root; that file carries no
 * rules and is not enqueued.
 *
 * Two ordering rules matter here:
 *
 * 1. The @import lines must stay at the very top. Per the CSS spec @import is
 *    only honoured before any other rule, so they cannot be moved down.
 * 2. The Motion block must stay last. Inside it, `.hs-scroll-cue {animation:
 *    none}` and `.projectBtn {opacity: 1}` carry no !important — they beat the
 *    Header and Project showcase blocks purely by coming later in the cascade.
 *
 * responsive.css is deliberately NOT imported here: breakpoint overrides have
 * to load after the rules they override, and @media adds no specificity. It is
 * enqueued separately, after this file — see hs_theme_style() in functions.php.
 */

@import url('fonts.css');
@import url('tokens.css');
@import url('reset.css');

/* * * Base * * */
body {
	min-height: 100svh;
	display: flex;
	flex-direction: column;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	line-height: 1.5;
	color: var(--hs-ink-strong);
	background: #fff;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}
main {flex: 1 0 auto;}
em {font-style: italic;}
strong {font-weight: bold;}
a {color: var(--hs-deep);}
a:hover {text-decoration: none;}

.wrapper {width: min(var(--hs-wrap), 100% - (var(--hs-gutter) * 2));margin-inline: auto;position: relative;text-align: left;}
.container {width: 100%;overflow-x: clip;}

.hs-skip-link {position: absolute;left: -9999px;top: 0;z-index: 10000;padding: 12px 20px;background: #fff;color: var(--hs-deep);}
.hs-skip-link:focus {left: 0;}

/* * * Header * * */
.hs-header {position: relative;isolation: isolate;width: 100%;min-height: 480px;}
.hs-header__image {position: absolute;inset: 0;width: 100%;height: 100%;object-fit: cover;object-position: center;z-index: 0;}
.hs-menu-toggle {position: absolute;left: 20px;top: 20px;width: 34px;height: 21px;background: url(../images/sprite.svg) no-repeat 0 0;opacity: 0.8;z-index: 3;}
.logo {position: absolute;left: 50%;top: 50%;width: min(250px, 40vw);translate: -50% -50%;z-index: 2;}
.hs-scroll-cue {position: absolute;left: 50%;bottom: 20px;width: 22px;height: 34px;padding: 0 2px;translate: -50% 0;z-index: 3;animation: hs-scroll-cue-bob 1.5s ease infinite alternate;animation-delay: .3s;}
.hs-scroll-cue__icon {transition: fill 0.3s ease;}
.hs-scroll-cue:hover .hs-scroll-cue__icon {fill: #34aad7;}
@keyframes hs-scroll-cue-bob {0% {translate: -50% 0;opacity: 1} 100% {translate: -50% 3px;opacity: 0.4}}

/* * * Hero (front page) * * */
.hs-hero {min-height: 100svh;background-color: var(--hs-hero-fallback);}
.hs-hero__scrim {position: absolute;inset: 0;background: var(--hs-hero-scrim);pointer-events: none;z-index: 1;}
.hs-hero__inner {position: relative;z-index: 2;width: 100%;min-height: 100svh;display: flex;flex-direction: column;align-items: center;justify-content: center;gap: var(--hs-hero-gap);padding: clamp(90px, 12vh, 140px) var(--hs-gutter);text-align: center;}
.hs-hero__logo {display: block;width: clamp(96px, 12vw, 128px);}
.hs-hero__logo-image {width: 100%;}
.hs-hero__text {display: flex;flex-direction: column;align-items: center;gap: var(--hs-hero-gap-text);}
.hs-hero__title {width: min(960px, 100%);color: var(--hs-hero-text);font-size: clamp(28px, 3.1vw, 40px);font-family: var(--hs-font);font-weight: 400;line-height: 1.15;text-transform: uppercase;}
.hs-hero__lead {width: min(700px, 100%);color: var(--hs-hero-text-muted);font-size: clamp(16px, 1.5vw, 21px);font-family: var(--hs-font);font-weight: 300;line-height: 1.5;}
.hs-wave-flourish {display: block;line-height: 0;}

/* * * Overlay menu * * */
.mainMenu {position: fixed;inset: 0;display: grid;place-content: center;background: var(--hs-pale);opacity: 0;visibility: hidden;z-index: -1;transition: opacity 0.3s ease, visibility 0s linear 0.3s;}
.menuActive .mainMenu {opacity: 1;visibility: visible;z-index: 9999;transition: opacity 0.3s ease, visibility 0s;}
.closeMenu {position: absolute;left: 26px;top: 20px;width: 22px;height: 22px;background: url(../images/sprite.svg) no-repeat -20px -35px;}
.mainMenu ul {display: block;padding: 0;}
.mainMenu li {display: block;margin: clamp(16px, 4vh, 33px) 0;text-align: center;}
.mainMenu li a, .mainMenu li a:visited {display: inline-block;color: var(--hs-deep);font-size: clamp(24px, 5vw, 38px);font-family: var(--hs-font);text-decoration: none;text-transform: uppercase;}

/* * * Intro + contact (front page) * * */
.screen2 {padding: clamp(48px, 9vw, 85px) 0 clamp(56px, 10vw, 95px);}
.screen2 .wrapper {display: flex;flex-direction: column;align-items: center;width: min(570px, 100% - (var(--hs-gutter) * 2));text-align: center;}
/* Marked up as h2 (it follows the hero's h1 in document order), but sized to
   match .hs-page-title — visually it's the page's main heading. */
.screen2 h2 {margin-bottom: clamp(16px, 3vw, 24px);color: var(--hs-ink);font-family: var(--hs-font);font-weight: 700;font-size: 24px;}
.screen2 p {margin-bottom: clamp(28px, 5vw, 48px);color: var(--hs-ink);font-size: 20px;line-height: 1.5;font-family: var(--hs-font);font-weight: 400;}
.screen2 .hs-contact__form {max-width: 570px;width: 100%;}

/* * * Project showcase (front page) * * */
.projectItem .wrapper {width: min(1266px, 100% - (var(--hs-gutter) * 2));padding-top: clamp(48px, 8vw, 88px);text-align: center;}
.projectItem h2 {margin-bottom: clamp(18px, 3vw, 42px);color: #fff;font-size: clamp(32px, 6vw, 64px);font-family: var(--hs-font);font-weight: 300;text-transform: uppercase;}
.projectTags {padding-bottom: clamp(24px, 6vw, 80px);}
.projectTags span {display: inline-block;line-height: 26px;padding: 0 10px;margin: 0 4.5px 12px;border: 1px solid rgba(255,255,255,0.4);border-radius: 13px;color: rgba(255,255,255,0.9);font-size: 13px;font-family: var(--hs-font);font-weight: 300;}
.projectTags a {text-decoration: none;}

.projectImg {position: relative;display: flex;justify-content: center;}
.projectImgItem {position: relative;width: 100%;max-width: 768px;padding-top: 11px;background: url(../images/bg-browser.png) no-repeat top left;background-size: 100% 11px;}
.projectImgItem:nth-child(1), .projectImgItem:nth-child(2) {display: none;}
.projectImgItem img {width: 100%;}
.projectImgBg {position: absolute;left: 0;bottom: 0;width: 100%;height: calc(100% - 11px);background: rgba(0,0,0,0);transition: background-color 0.3s ease;}
.projectBtnWrap {position: absolute;left: 50%;top: 50%;width: min(327px, 90%);translate: -50% -50%;display: flex;flex-wrap: wrap;gap: 12px;justify-content: center;}
.projectBtn, .projectBtn:visited {display: block;line-height: 42px;width: 152px;border: 2px solid #fff;border-radius: 23px;color: #fff;font-size: 14px;font-family: var(--hs-font);font-weight: 600;text-transform: uppercase;text-decoration: none;text-align: center;transition: opacity 0.3s ease, background 0.3s ease, color 0.3s ease, border-color 0.3s ease;}
.projectBtn:hover {background: #fff;color: #333333;}
.projectBtn.projectComingsoonBtn, .projectBtn.projectBuyBtn {border-color: var(--hs-accent);background: var(--hs-accent);}
.projectBtn.projectComingsoonBtn:hover, .projectBtn.projectBuyBtn:hover {border-color: var(--hs-accent-hover);background: var(--hs-accent-hover);color: #fff;}
.comingSoonItem .projectImgBg {background: rgba(255,255,255,0);}

/* Reveal-on-hover only where hovering is actually possible; touch users get
   the buttons straight away instead of having to guess. */
@media (hover: hover) {
	.projectBtn {opacity: 0;}
	.projectImg:hover .projectBtn, .projectImg:focus-within .projectBtn {opacity: 1;}
	.projectImg:hover .projectImgBg, .projectImg:focus-within .projectImgBg {background: rgba(0,0,0,0.6);}
	.comingSoonItem .projectImg:hover .projectImgBg {background: rgba(255,255,255,0.6);}
}

@media (min-width: 1024px) {
	.projectImg {display: block;height: 455px;overflow: hidden;}
	.projectImgItem {position: absolute;width: 668px;padding-top: 24px;background-size: 668px 24px;}
	.projectImgItem:nth-child(1) {display: block;right: 0;bottom: -60px;}
	.projectImgItem:nth-child(2) {display: block;left: 0;bottom: -60px;}
	.projectImgItem:nth-child(3) {left: 50%;bottom: 0;margin-left: -334px;}
	.projectImgBg {height: calc(100% - 24px);}
}
@media (min-width: 1280px) {
	.projectImg {height: 523px;}
	.projectImgItem {width: 768px;padding-top: 28px;background-size: 768px 28px;}
	.projectImgItem:nth-child(3) {margin-left: -384px;}
	.projectImgBg {height: calc(100% - 28px);}
}

/* * * Inner pages * * */
.hs-main {padding: clamp(40px, 7vw, 80px) 0 clamp(48px, 8vw, 96px);}
.hs-page-header {margin-bottom: clamp(24px, 4vw, 40px);}
.hs-page-title {color: var(--hs-ink);font-family: var(--hs-font);font-weight: 300;font-size: clamp(28px, 4.5vw, 44px);}
.hs-page-description {margin-top: 12px;color: var(--hs-ink);}
.hs-content {font-family: var(--hs-font);font-size: 16px;line-height: 1.7;color: var(--hs-ink);}
.hs-content > * + * {margin-top: 1.2em;}
.hs-content h2 {font-size: clamp(22px, 3vw, 30px);}
.hs-content h3 {font-size: clamp(19px, 2.4vw, 24px);}
.hs-content ul, .hs-content ol {padding-left: 1.4em;}
.hs-content li + li {margin-top: .4em;}
.hs-content blockquote {padding-left: 1em;border-left: 3px solid var(--hs-accent);font-style: italic;}
.hs-content img, .hs-content figure {margin-inline: auto;}
.hs-content pre {overflow-x: auto;padding: 1em;background: #f5f5f5;}
.hs-content table {width: 100%;display: block;overflow-x: auto;}
.hs-single__thumb {margin-bottom: clamp(20px, 4vw, 36px);}
.hs-entry__meta {color: var(--hs-ink-muted);font-family: var(--hs-font);font-size: 13px;}
.hs-entry__tags {margin-top: 2em;font-size: 13px;}

.hs-entry-list {display: grid;gap: clamp(28px, 5vw, 48px);}
@media (min-width: 700px) {.hs-entry-list {grid-template-columns: repeat(2, 1fr);}}
.hs-entry {display: flex;flex-direction: column;gap: 10px;}
.hs-entry__thumb {display: block;}
.hs-entry__title {font-family: var(--hs-font);font-weight: 300;font-size: clamp(20px, 2.6vw, 26px);}
.hs-entry__title a {color: var(--hs-ink);text-decoration: none;}
.hs-entry__title a:hover {color: var(--hs-accent);}
.hs-entry__excerpt {font-family: var(--hs-font);color: var(--hs-ink);}

.pagination, .post-navigation {margin-top: clamp(32px, 5vw, 56px);font-family: var(--hs-font);}
.pagination .nav-links, .post-navigation .nav-links {display: flex;flex-wrap: wrap;gap: 10px;align-items: center;}
.pagination a, .pagination .current {display: inline-block;padding: 6px 12px;border: 1px solid var(--hs-rule);text-decoration: none;}
.pagination .current {background: var(--hs-accent);border-color: var(--hs-accent);color: #fff;}
.hs-nav__label {display: block;font-size: 12px;color: var(--hs-ink-muted);text-transform: uppercase;}

/* * * Footer * * */
footer {flex-shrink: 0;width: 100%;padding: 33px var(--hs-gutter) 40px;background-color: var(--hs-footer-bg);display: flex;flex-direction: column;align-items: center;gap: 24px;}
.footerLogo {display: block;width: 134px;}
.copyright {color: var(--hs-footer-ink);font-size: 12px;font-family: var(--hs-font);font-weight: 300;text-align: center;}
.footerSocialLnks {display: flex;flex-wrap: wrap;justify-content: center;gap: 10px;}
.footerSocialLnks a {display: block;width: 38px;height: 38px;line-height: 38px;border: 2px solid var(--hs-footer-ink);border-radius: 100%;transition: background 0.3s ease;}
.footerSocialLnks a:hover {background: var(--hs-footer-ink);}
.footerSocialLnks a .socialIcon {transition: fill 0.3s ease;}
.footerSocialLnks a:hover .socialIcon {fill: var(--hs-footer-bg);}

/* * * Motion * * */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
	.hs-scroll-cue {animation: none;}
	.projectBtn {opacity: 1;}
}