/*
Theme Name: Patarei Muuseum – avamisleht
Theme URI: https://patareimuuseum.ee/
Author: Patarei Muuseum
Description: Patarei muuseumi ühevaateline avamisleht, mis põhineb teema esimesel kujundusversioonil.
Version: 1.2.0
Requires at least: 6.4
Requires PHP: 8.0
Text Domain: patarei-avamisleht
*/

:root {
  --patarei-yellow: #f5c400;
  --patarei-black: #070707;
  --header-height: clamp(88px, 9vw, 126px);
}

* { box-sizing: border-box; }

html,
body { margin: 0; min-height: 100%; background: var(--patarei-black); }

body {
  color: #fff;
  font-family: "gotham", Arial, sans-serif;
  overflow: hidden;
}

.skip-link {
  position: fixed;
  top: -5rem;
  left: 1rem;
  z-index: 100;
  padding: .75rem 1rem;
  background: var(--patarei-yellow);
  color: #000;
}

.skip-link:focus { top: 1rem; }

.landing {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  background: var(--patarei-black);
}

.site-header {
  position: absolute;
  z-index: 10;
  inset: 0 0 auto;
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid rgba(255,255,255,.2);
  background: rgba(5,5,5,.96);
  padding: 0 1.5rem;
}

.site-logo,
.custom-logo-link {
  display: flex;
  align-items: center;
  justify-content: center;
}

.site-logo img,
.custom-logo {
  display: block;
  width: clamp(220px, 18vw, 310px);
  height: auto;
  max-height: calc(var(--header-height) - 20px);
  object-fit: contain;
}

.hero-image {
  position: absolute;
  inset: var(--header-height) 0 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  filter: grayscale(100%) contrast(1.1);
}

.hero-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0,0,0,.86) 0%, rgba(0,0,0,.5) 44%, rgba(0,0,0,.18) 78%),
    linear-gradient(0deg, rgba(0,0,0,.42), transparent 56%);
}

.hero-grid {
  position: absolute;
  inset: var(--header-height) 0 0;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 12.5% 100%, 12.5% 100%;
  pointer-events: none;
}

.opening-message {
  position: absolute;
  z-index: 3;
  left: clamp(1.5rem, 7vw, 8rem);
  top: 55%;
  transform: translateY(-50%);
  margin: 0;
  max-width: min(900px, 78vw);
  text-transform: uppercase;
  letter-spacing: -.055em;
  line-height: .88;
  font-weight: 700;
}

.opening-message span {
  display: block;
  font-size: clamp(3.8rem, 8.5vw, 9rem);
}

.opening-message strong {
  display: block;
  color: var(--patarei-yellow);
  font-size: clamp(4.4rem, 10vw, 10.5rem);
  font-weight: 700;
  white-space: nowrap;
}

@media (max-width: 700px) {
  :root { --header-height: 88px; }

  .site-logo img,
  .custom-logo { width: min(245px, 75vw); }

  .hero-image { background-position: 58% center; }

  .hero-image::after {
    background: linear-gradient(90deg, rgba(0,0,0,.82), rgba(0,0,0,.18));
  }

  .opening-message {
    left: 1.5rem;
    top: 54%;
    max-width: calc(100vw - 3rem);
  }

  .opening-message span { font-size: clamp(3.2rem, 16vw, 5.5rem); }
  .opening-message strong {
    font-size: clamp(3.25rem, 15vw, 5rem);
    letter-spacing: -.07em;
  }
}

@media (max-height: 620px) and (min-width: 701px) {
  .opening-message { top: 58%; }
  .opening-message span { font-size: clamp(3.5rem, 7vw, 6rem); }
  .opening-message strong { font-size: clamp(4rem, 8vw, 7rem); }
}