/*
Theme Name: TAT Theme
Author: Gemini
Description: A custom coming soon theme for TAT.
Version: 1.0
*/

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

body {
    font-family: 'Inter Tight', sans-serif;
    background-color: #121212;
    color: #e0e0e0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex-grow: 1; /* This makes the main content area fill the space */
}

.site-footer a {
    color: #a3a3a3;
    transition: color 0.3s ease;
}
.site-footer a:hover, .lang-switcher button:hover {
    color: #fff;
}
.text-gray-700 {
    color: #a3a3a3;
}

::placeholder {
    color: #a3a3a3;
    opacity: 1;
    font-weight: 300;
}

.custom-input {
    border-bottom: 0.5px solid #a3a3a3;
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.custom-input:focus {
    border-bottom-color: transparent;
    box-shadow: 0 0.5px 0 0 white;
}

.custom-button {
    color: #a3a3a3;
}

.custom-button:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.custom-button:not(:disabled):hover {
    box-shadow: 0 0 0 0.5px white;
    border-radius: 3px;
    color: white;
}

.lang-switcher button {
    opacity: 0.5;
    transition: opacity 0.3s ease;
    color: #a3a3a3;
}
.lang-switcher button.active {
    opacity: 1;
    color: #fff;
}

/* --- BEGIN: Sticky footer + iOS safe-area + layering (technical only, no visual changes) --- */
html, body { height: 100%; }
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  /* keep project's decision: no scroll */
  /* overflow already managed earlier */
}
main { flex: 1 0 auto; }
header, .site-header { position: relative; z-index: 10; }
footer, .site-footer {
  margin-top: auto;
  position: relative;
  z-index: 10;
  padding-bottom: calc(var(--footer-pad, 0px) + env(safe-area-inset-bottom, 0px));
}
/* success overlay or overlay containers if present */
.success, .success-overlay, .waitlist-success, .overlay-success { position: relative; z-index: 20; }

@supports (-webkit-touch-callout: none) {
  html, body { height: -webkit-fill-available; }
  body { min-height: -webkit-fill-available; }
}
/* --- END: Sticky footer block --- */

/* --- BEGIN: Mobile bottom-align main content (keeps footer at page bottom) --- */
@media (max-width: 640px) {
  main {
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* push inner text/forms down to the bottom of main */
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); /* breathing room above footer */
  }
}
/* --- END: Mobile bottom-align --- */

/* === Global typography & color adjustments === */
:root{
  --tat-text:#b5b5b5; /* unified light gray */
}

/* Gentle global kerning */
html{ letter-spacing:0.02em; }

/* Unify text color across the page (keeps layout intact) */
body, body *{ color:var(--tat-text) !important; }
a{ text-decoration:none; }

/* Inputs: consistent color + remove artifacts */
input, textarea, button{
  color:var(--tat-text);
  outline:none;
  box-shadow:none !important;
  -webkit-tap-highlight-color: transparent;
  backface-visibility:hidden;
  transform: translateZ(0); /* prevent border trails on some GPUs */
}

/* Placeholder visibility: hide instantly on focus */
input::placeholder, textarea::placeholder{
  color:var(--tat-text);
  opacity:1;
  transition:none;
}
input:focus::placeholder, textarea:focus::placeholder{ opacity:0; }

/* Ensure border states do not leave visual trails */
input, textarea{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  will-change: border-color, box-shadow;
}

/* === Interaction refinements (inputs, buttons, links, language switch) === */

/* 1) Input underline stays and turns white on focus */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="password"]{
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.28);
  background: transparent;
  transition: border-color .25s ease;
  caret-color: #fff;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="search"]:focus,
input[type="password"]:focus{
  border-bottom-color: #ffffff;
  outline: none;
}

/* 2) Submit button: visible outline on hover + white text */
button[type="submit"]{
  background: transparent;
  border: 1px solid rgba(255,255,255,0.28);
  transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}
button[type="submit"]:not(:disabled):hover,
button[type="submit"]:not(:disabled):focus{
  border-color: #ffffff;
  color: #ffffff !important;
}
button[type="submit"].is-loading,
button[type="submit"]:disabled{
  opacity: .6;
  cursor: default;
}

/* 3) Footer links hover: white */
.site-footer a:hover,
.site-footer a:focus{
  color: #ffffff !important;
}

/* 4) Language switch hover (header) */
.site-header a:hover,
.site-header a:focus{
  color: #ffffff !important;
}


/* === Refinements v4 === */

/* Language switch buttons (header) highlight to white */
.lang-switcher button:hover,
.lang-switcher button:focus{
  color:#ffffff !important;
}

/* Input underline logic: hidden by default, thin white on focus */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="password"]{
  border: none;
  border-bottom: 1px solid transparent;
  background: transparent;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="search"]:focus,
input[type="password"]:focus{
  border-bottom-color: #ffffff;
}

/* Submit button logic */
button[type="submit"]{
  background: transparent;
  border: 1px solid transparent; /* invisible on initial page load */
  color: inherit;
}
button[type="submit"]:not(:disabled):hover,
button[type="submit"]:not(:disabled):active,
button[type="submit"]:not(:disabled):focus{
  border-color:#ffffff;
  border-width:2px; /* thicker on hover/active */
  color:#ffffff !important;
}


/* === Refinements v5 (exact states) === */

/* Input underline: always visible thin gray; on focus -> white */
form input[type="text"],
form input[type="email"],
form input[type="tel"],
form input[type="search"],
form input[type="password"]{
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.28) !important; /* visible by default */
  background: transparent;
  outline: none;
  transition: border-color .2s ease;
}
form input[type="text"]:focus,
form input[type="email"]:focus,
form input[type="tel"]:focus,
form input[type="search"]:focus,
form input[type="password"]:focus{
  border-bottom-color: #ffffff !important; /* white on focus */
}

/* Submit button: initially no visible border; hover -> gray; active/focus -> white + white text */
form button[type="submit"]{
  background: transparent;
  border: 1px solid transparent; /* invisible at rest */
  color: inherit;
  transition: border-color .15s ease, color .15s ease, border-width .15s ease;
  outline: none;
}
form button[type="submit"]:not(:disabled):hover{
  border-color: rgba(255,255,255,0.28); /* gray on hover */
}
form button[type="submit"]:not(:disabled):active,
form button[type="submit"]:not(:disabled):focus{
  border-color: #ffffff;
  border-width: 2px;            /* thicker on press/focus */
  color: #ffffff !important;    /* button text to white */
}

/* Keep disabled/loading quiet */
form button[type="submit"].is-loading,
form button[type="submit"]:disabled{
  border-color: transparent !important;
  color: inherit !important;
  opacity: .6;
  cursor: default;
}


/* === Refinements v6 (no thickness change; fixed hover) === */
form button[type="submit"]{
  background: transparent;
  border: 1px solid transparent; /* constant width */
  box-sizing: border-box;         /* no layout shift */
  color: inherit;
  outline: none;
  transition: border-color .15s ease, color .15s ease;
  transform: none;
}
/* Hover -> thin gray border (no jump) */
form button[type="submit"]:not(:disabled):hover{
  border-color: rgba(255,255,255,0.28) !important;
  border-width: 1px !important;
}
/* Active/Focus -> white border + white text (still 1px) */
form button[type="submit"]:not(:disabled):active,
form button[type="submit"]:not(:disabled):focus{
  border-color: #ffffff !important;
  border-width: 1px !important;
  color: #ffffff !important;
}


/* === Refinements v6 (no thickness change; stable hover) === */

/* Submit button states (constant 1px border; only color changes) */
form button[type="submit"]{
  border-width: 1px !important;
  border-style: solid;
  border-color: transparent;
  transition: border-color .15s ease, color .15s ease; /* no border-width in transition */
}
form button[type="submit"]:not(:disabled):hover{
  border-color: rgba(255,255,255,0.28); /* gray on hover */
  color: inherit; /* keep text color */
}
form button[type="submit"]:not(:disabled):active,
form button[type="submit"]:not(:disabled):focus{
  border-color: #ffffff;         /* white on press/focus */
  color: #ffffff !important;     /* button text becomes white */
}

/* Ensure input underline remains thin (1px) always; color switches only */
form input[type="text"],
form input[type="email"],
form input[type="tel"],
form input[type="search"],
form input[type="password"]{
  border-bottom-width: 1px !important;
}


/* === Refinements v7 === */
/* Lift the small heading up by 5px for both locales */
#content-en h2, #content-ua h2{
  position: relative;
  top: -5px;
}

/* Ensure button inner text goes white on press/focus and stays white during loading */
form button[type="submit"]:not(:disabled):active .button-text,
form button[type="submit"]:not(:disabled):focus .button-text,
form button[type="submit"].is-loading .button-text{
  color: #ffffff !important;
}

/* Background video */
.bg-video{
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
  opacity: 1;
}

/* Content layers above video */
header, .site-header,
main,
footer, .site-footer,
.success, .success-overlay, .waitlist-success{
  position: relative;
  z-index: 10;
}