/*
Theme Name: Custom Coming Soon
Author: Fondazione Mimmo Rotella
Version: 3.13
*/

/* ✅ global reset + typography for ALL pages */


@font-face {
  font-family: 'FK Grotesk Neue';
  src: url('assets/fonts/FKGroteskNeue-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'FK Grotesk Neue';
  src: url('assets/fonts/FKGroteskNeue-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'FK Grotesk Neue';
  src: url('assets/fonts/FKGroteskNeue-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'FK Grotesk Neue';
  src: url('assets/fonts/FKGroteskNeue-BoldItalic.woff2') format('woff2');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

html, body{
  margin:0;
  height:100%;
  font-family: 'FK Grotesk Neue', sans-serif;
  color: var(--text);
  background-color: var(--color-beige);
}

/* =========================
   FRONT PAGE ONLY
   ========================= */
body.coming-soon-body{
  background:#000;
  overflow:hidden;
}

/* =========================
   HERO
   ========================= */
.coming-soon-hero{
  position:relative;
  width:100vw;

  /* IMPORTANT: order matters. vh first (fallback), then svh, then dvh */
  height: 100vh;
  height: 100svh;
  height: 100dvh;
}

/* Hide cursor only when JS enables cursor-follow */
.mr-cursor-none{ cursor:none; }

/* =========================
   BACKGROUND
   ========================= */
.coming-soon-bg{
  position:absolute;
  inset:0;
  z-index:0;
}

.coming-soon-bg img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
  filter:grayscale(100%);
  transform:scale(1.02);
}

/* =========================
   OVERLAY
   ========================= */
.coming-soon-overlay{
  position:absolute;
  inset:0;
  z-index:1;
}

/* =========================
   CONTACT BUTTON
   ========================= */
.coming-soon-contact{
  position:absolute;
  top:31px;
  left:24px;
  z-index:6;
  border:1.5px solid var(--brand-color);
  color:var(--brand-color);
  font-weight:400;
  font-size:18px;
  letter-spacing:0.01em;
  text-decoration:none;
  backdrop-filter:blur(6px);
  -webkit-font-smoothing:antialiased;
  display:inline-flex;
  padding:8px 16px;
  justify-content:center;
  align-items:center;
  gap:8px;
  border-radius:100px;
  background:rgba(0,0,0,0.60);
}

/* =========================
   BADGE
   ========================= */
.coming-soon-badge{
  position:absolute;

  /* Desktop / fallback position (if JS is off) */
  left:24px;
  bottom:240px;

  z-index:5;
  border-radius:50%;
  background:#000;
  color:var(--brand-color);

  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;

  font-weight:700;
  font-size:14px;
  line-height:1.05;
  letter-spacing:0.01em;

  -webkit-font-smoothing:antialiased;
  pointer-events:none;

  width:96px;
  height:96px;
}

/* =========================
   LOCKUP
   ========================= */
.mr-lockup{
  position:absolute;
  left:var(--safe-x);
  right:var(--safe-x);
  bottom:0;
  z-index:3;

  display:flex;
  flex-direction:column;
  align-items:flex-start;

  padding-bottom:var(--bottom-offset, 10px);
  box-sizing:border-box;
}

.mr-heritage{
  width:25%;
  height:auto;
  margin-bottom:25px;
}

.mr-title{
  width:100%;
  max-width:none;
  height:auto;
  display:block;
}

/* =========================
   DESKTOP
   ========================= */
@media (min-width:1024px){
  :root{
    --safe-x:20px;
    --bottom-offset:10px;
    --heritage-gap:22px;
    --title-lift:22px;
  }
}

/* =========================
   MOBILE SAFE AREA FIX
   ========================= */
@media (max-width:768px){
  :root{
    --safe-x: max(14px, env(safe-area-inset-left));
    --heritage-gap: 16px;
    --title-lift: 14px;
  }

  /* Contact button - respect top notch */
  .coming-soon-contact{
    top: max(20px, calc(env(safe-area-inset-top) + 8px));
    left: max(20px, calc(env(safe-area-inset-left) + 8px));
  }

  /* Badge - upper right with notch respect */
  .coming-soon-badge{
    left: auto !important;
    bottom: auto !important;
    right: max(20px, calc(env(safe-area-inset-right) + 8px));
    top: max(120px, calc(env(safe-area-inset-top) + 100px));
    width: 96px;
    height: 96px;
    font-size: 14px;
  }

  /* ✅ Lockup: lift above iOS Safari bottom bar (safe-area + extra buffer) */
  .mr-lockup{
    left: max(14px, calc(env(safe-area-inset-left) + 6px));
    right: max(14px, calc(env(safe-area-inset-right) + 6px));

    /* This is the important part */
    bottom: calc(env(safe-area-inset-bottom) + 28px);

    /* avoid double-offset from padding */
    padding-bottom: 0;
  }

  .mr-heritage{
    width: 80%;
    height: auto;
    margin-bottom: 25px;
  }

  .mr-title{
    width: 90%;
  }
}

/* =========================
   TABLET
   ========================= */
@media (min-width: 768px) and (max-width: 1024px){
  .mr-lockup{
    left: 16px;
    right: 16px;
    bottom: 14px;
    padding-bottom: 0;
  }

  .mr-heritage{
    width: 30%;
  }

  .mr-note{
    margin-bottom: 0px;
  }
}