/*
Theme Name: KrunchKaro Coming Soon
Theme URI: https://krunchkaro.com
Author: KrunchKaro
Description: A single screen coming soon theme for KrunchKaro. Every front end URL renders the same centred holding page. Headline, subline, colours and logo are editable in Appearance, Customise, with no code required.
Version: 1.0.0
Requires at least: 5.9
Tested up to: 6.5
Requires PHP: 7.4
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: krunchkaro-coming-soon
Tags: one-column, custom-colors, custom-logo, full-width-template
*/

*{ margin:0; padding:0; box-sizing:border-box; }

html,body{ height:100%; }

body{
  background:var(--cream);
  color:var(--ink);
  font-family:'General Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:24px;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

::selection{ background:var(--select); color:var(--ink); }
::-moz-selection{ background:var(--select); color:var(--ink); }

.wrap{
  animation:rise .9s cubic-bezier(.2,.7,.2,1) both;
  max-width:100%;
}

.kk-logo{
  display:block;
  margin:0 auto 34px;
  max-width:min(220px, 60vw);
  height:auto;
}

h1{
  font-family:'Clash Display', 'General Sans', sans-serif;
  font-weight:700;
  font-size:clamp(48px,11vw,150px);
  line-height:.86;
  letter-spacing:-.01em;
  overflow-wrap:break-word;
}

h1 .g{ color:var(--accent); }

.soon{
  margin-top:26px;
  font-family:'General Sans', sans-serif;
  font-weight:500;
  font-size:clamp(13px,2.4vw,17px);
  letter-spacing:.42em;
  text-transform:uppercase;
  color:var(--soon-color);
}

/* Letter spacing pushes the last character right. Nudge back so the line reads optically centred. */
.soon{ text-indent:.42em; }

.screen-reader-text{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* Keep the holding page centred when a logged in user sees the admin bar. */
body.admin-bar{ min-height:calc(100vh - 32px); }

@media screen and (max-width:782px){
  body.admin-bar{ min-height:calc(100vh - 46px); }
}

@keyframes rise{
  from{ opacity:0; transform:translateY(24px); }
  to{ opacity:1; transform:translateY(0); }
}

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}