/*
  gerenda.studio — teaser landing custom styles
  Covers the site header and site footer (not part of the sitebuild main.css).
  Load AFTER main.css.
*/

/* ── Google Font ─────────────────────────────────────────────────────────────
   main.css uses Source Sans Pro via @import internally; if the static page is
   served offline this @import ensures the font is still requested.          */
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400&display=swap');

/* ── Prevent Safari font size inflation on navigation ────────────────────── */
/* main.css uses pt units for html font-size which Safari recalculates when   */
/* the viewport height changes between navigations. Override with px instead. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  font-size: 18px;
}

@media screen and (max-width: 1680px) {
  html { font-size: 14px; }
}

@media screen and (max-width: 1280px) {
  html { font-size: 12px; }
}

@media screen and (max-width: 736px) {
  html { font-size: 11px; }
}

@media screen and (max-width: 360px) {
  html { font-size: 10px; }
}

/* ── Site Header ─────────────────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10000;
  background-color: #ffffff;
}

.site-header .inner {
  padding: 0 1.75rem;
  height: 4.125rem;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: start;
  justify-content: flex-start;
  gap: 0.5rem;
}

/* ── Brand ───────────────────────────────────────────────────────────────── */
.brand {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.brand__logo {
  display: block;
  height: 2rem;
  width: auto;
}

.brand__name {
  font-family: 'Source Sans Pro', Helvetica, sans-serif;
  color: #000000;
  letter-spacing: 0.05em;
  font-size: 1.1rem;
  white-space: nowrap;
  font-weight: 300;
}

.brand__name strong {
  font-weight: 400;
  color: #000000;
}

/* ── Site Footer ─────────────────────────────────────────────────────────── */
.site-footer {
  background-color: #0D0D1B;
  color: #ffffff;
}

.site-footer .footer-inner {
  max-width: 64rem;
  margin: 0 auto;
  padding: 1.75rem 1.75rem;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: justify;
  justify-content: space-between;
  gap: 1.5rem;
}

/* Brand in footer — white version */
.site-footer .brand__logo {
  -webkit-filter: brightness(0) invert(1);
  filter: brightness(0) invert(1);
}

.site-footer .brand__name {
  color: #ffffff;
}

.site-footer .brand__name strong {
  color: #ffffff;
}

/* Footer nav */
.footer-nav {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  gap: 1.75rem;
}

.footer-nav a {
  font-family: 'Source Sans Pro', Helvetica, sans-serif;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
  -webkit-transition: color 0.2s ease;
  transition: color 0.2s ease;
}

.footer-nav a:hover {
  color: #ffffff;
}

/* Copyright bar */
.footer-copyright {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  text-align: center;
  padding: 0.9rem 1.75rem;
}

.footer-copyright span {
  font-family: 'Source Sans Pro', Helvetica, sans-serif;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.3);
  letter-spacing: 0.03em;
}

.video-wrapper {
  position: relative;
  width: 50%;
  /* height: 100%; */
  min-height: 20rem;
  overflow: hidden;
}

video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── Mobile ──────────────────────────────────────────────────────────────── */
@media screen and (max-width: 736px) {
  .video-wrapper {
    width: 100%;
    height: 56vw; /* ~16:9 ratio */
    min-height: 14rem;
    max-height: 24rem;
  }

  .site-footer .footer-inner {
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-align: start;
    align-items: flex-start;
    gap: 1rem;
    padding-block: 1.5rem;
  }

  .footer-nav {
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-align: start;
    align-items: flex-start;
    gap: 0.6rem;
  }
}