/*
Theme Name: TEMAGUE Under Construction
Theme URI: https://temague.com/
Author: TEMAGUE
Author URI: https://temague.com/
Description: A lightweight, modern WordPress block theme for a single-viewport under-construction page.
Version: 1.3.6
Requires at least: 6.6
Tested up to: 6.9
Requires PHP: 8.0
Copyright: 2026 TEMAGUE
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: temague-under-construction
Tags: block-patterns, full-site-editing, one-column, custom-colors, custom-logo
*/

html,
body {
  margin: 0;
  min-width: 320px;
  overflow: hidden;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

.wp-site-blocks {
  min-height: 100svh;
  overflow: hidden;
}

.tg-under-construction {
  min-height: 100svh;
  height: 100svh;
  overflow: hidden;
  display: flex;
  align-items: center;
  background: #ffffff;
}

.tg-under-construction__inner {
  width: min(100% - 64px, 1500px);
  margin-inline: auto;
}

.tg-under-construction__grid {
  display: grid;
  grid-template-columns: minmax(0, 500px) minmax(0, 700px);
  gap: 0;
  align-items: center;
  justify-content: center;
}

.tg-copy {
  order: 2;
  padding-left: 0;
  padding-right: 0;
}

.tg-visual {
  order: 1;
}

.tg-eyebrow {
  margin: 0 0 18px;
  font-family: 'Poppins', sans-serif;
  font-size: clamp(13.5px, 1.0125vw, 15.75px);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #e2040d;
}

.tg-title {
  margin: 0;
  font-family: 'Press Start 2P', monospace;
  max-width: 760px;
  font-size: clamp(38.25px, 4.275vw, 72px);
  line-height: 1.18;
  letter-spacing: -.035em;
  font-weight: 400;
  color: #111111;
}

.tg-title .tg-accent {
  color: #3775ef;
}

.tg-description {
  font-family: 'Poppins', sans-serif;
  margin: clamp(22px, 3vh, 34px) 0 0;
  max-width: 600px;
  color: #4c4c4c;
  font-size: clamp(18px, 1.40625vw, 22.5px);
  line-height: 1.65;
}

.tg-credit {
  font-family: 'Poppins', sans-serif;
  margin: clamp(26px, 4vh, 46px) 0 0;
  color: #777777;
  font-size: 13.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.tg-credit a {
  color: #111111;
  font-weight: 800;
  text-decoration: none;
}

.tg-credit a:hover,
.tg-credit a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.tg-visual {
  position: relative;
  width: 100%;
  max-width: 620px;
  width: 620px;
  justify-self: end;
  transform: translateX(56px);
}

.tg-visual svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 72svh;
}

@media (max-width: 900px) {
  .tg-under-construction__inner {
    width: min(100% - 40px, 720px);
  }

  .tg-under-construction__grid {
    grid-template-columns: 1fr;
    gap: clamp(20px, 4vh, 34px);
  }

  .tg-copy {
    padding-left: 0;
    padding-right: 0;
    text-align: left;
  }

  .tg-title {
    font-size: clamp(31.5px, 8.1vw, 54px);
  }

  .tg-description {
    font-size: clamp(15.75px, 4.05vw, 20.25px);
    line-height: 1.55;
  }

  .tg-credit {
    margin-top: 20px;
  }

  .tg-visual {
    width: 100%;
    max-width: min(76vw, 480px);
    justify-self: center;
    transform: none;
  }

  .tg-visual svg {
    max-height: 35svh;
  }
}

@media (max-width: 560px) {
  .tg-under-construction__inner {
    width: min(100% - 28px, 520px);
  }

  .tg-under-construction__grid {
    gap: 14px;
  }

  .tg-copy {
    order: 2;
    padding-left: 0;
    padding-right: 0;
  }

  .tg-visual {
    order: 1;
  }

  .tg-eyebrow {
    margin-bottom: 10px;
    font-size: 11.25px;
  }

  .tg-title {
    font-size: clamp(27px, 7.875vw, 42.75px);
  }

  .tg-description {
    margin-top: 14px;
  }

  .tg-credit {
    margin-top: 14px;
    font-size: 11.25px;
  }

  .tg-visual {
    max-width: min(82vw, 390px);
  }

  .tg-visual svg {
    max-height: 31svh;
  }
}

@media (max-height: 650px) {
  .tg-title {
    font-size: clamp(27px, 6.1875vh, 49.5px);
  }

  .tg-description {
    margin-top: 12px;
    font-size: 15.75px;
  }

  .tg-credit {
    margin-top: 12px;
  }

  .tg-visual svg {
    max-height: 45svh;
  }
}

.tg-countdown {
  margin: clamp(20px, 3vh, 30px) 0 0;
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(22px, 2.05vw, 34px);
  line-height: 1.25;
  letter-spacing: .035em;
  color: #111111;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 900px) {
  .tg-countdown {
    margin-top: 16px;
    font-size: clamp(18px, 5vw, 28px);
  }
}

@media (max-width: 560px), (max-height: 650px) {
  .tg-countdown {
    margin-top: 12px;
  }
}