/*
Theme Name: Kouzina Coming Soon
Theme URI: https://kouzinabathanddesign.com
Author: Kouzina Bath and Design
Description: A single-page "coming soon" theme for Kouzina Bath and Design, built around the brand's black, gold and ivory identity.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: kouzina-coming-soon
*/

/* ==========================================================================
   Design tokens
   ========================================================================== */
:root {
  --ks-black: #0a0a0a;
  --ks-black-soft: #141414;
  --ks-ivory: #faf7f2;
  --ks-ivory-dim: #f0ebe1;
  --ks-charcoal: #1c1a17;
  --ks-charcoal-70: rgba(28, 26, 23, 0.7);
  --ks-gold-light: #e0bb74;
  --ks-gold: #c9a25a;
  --ks-gold-deep: #8a6a2f;
  --ks-gold-gradient: linear-gradient(135deg, var(--ks-gold-light) 0%, var(--ks-gold-deep) 100%);
  --ks-hairline: rgba(201, 162, 90, 0.35);
  --ks-hairline-on-ivory: rgba(28, 26, 23, 0.15);

  --ks-font-display: "Cinzel", Georgia, "Times New Roman", serif;
  --ks-font-serif: "Cinzel", Georgia, serif;
  --ks-font-sans: "Cinzel", "Helvetica Neue", Arial, sans-serif;

  --ks-max: 1080px;
  --ks-gutter: clamp(24px, 6vw, 72px);
}

/* ==========================================================================
   Reset & base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body.kouzina-coming-soon {
  margin: 0;
  background: var(--ks-ivory);
  color: var(--ks-charcoal);
  font-family: var(--ks-font-serif);
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: inherit; }

.ks-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.ks-hero {
  position: relative;
  background: var(--ks-black);
  color: var(--ks-ivory);
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 64px var(--ks-gutter) 56px;
  overflow: hidden;
}

/* faint gold ring echoing the mark, purely atmospheric */
.ks-hero::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(120vw, 1400px);
  aspect-ratio: 1 / 1;
  border: 1px solid var(--ks-hairline);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.ks-hero-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: ks-rise 900ms ease-out both;
}

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

.ks-logo {
  width: min(238px, 53vw);
  height: auto;
  margin-bottom: 36px;
}

/* Wraps either the WP custom logo (Customizer) or the bundled fallback img,
   so both are sized and centered identically. */
.ks-logo-wrap {
  margin-bottom: 36px;
}

.ks-logo-wrap .custom-logo-link {
  display: block;
}

.ks-logo-wrap img {
  width: min(238px, 53vw);
  height: auto;
  margin: 0 auto;
}

.ks-logo-wrap .ks-logo {
  margin-bottom: 0;
}

.ks-eyebrow {
  font-family: var(--ks-font-sans);
  font-size: 12px;
  letter-spacing: 0.32em;
  color: var(--ks-gold-light);
  margin: 0 0 18px;
}

.ks-headline {
  font-family: var(--ks-font-display);
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.04em;
  font-size: clamp(2.4rem, 5.6vw, 4rem);
  line-height: 1.15;
  margin: 0 0 22px;
}

.ks-hero-sub {
  font-family: var(--ks-font-serif);
  font-size: 1.15rem;
  line-height: 1.7;
  color: rgba(250, 247, 242, 0.82);
  max-width: 46ch;
  margin: 0 0 34px;
}

.ks-divider {
  width: 64px;
  height: 1px;
  background: var(--ks-gold-gradient);
  margin-bottom: 32px;
}

.ks-hero-cta {
  display: inline-block;
  font-family: var(--ks-font-sans);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--ks-gold-light);
  text-decoration: none;
  background: transparent;
  border: 1px solid var(--ks-gold);
  padding: 13px 34px;
  transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}

.ks-hero-cta:hover,
.ks-hero-cta:focus-visible {
  background: var(--ks-gold-gradient);
  color: var(--ks-black);
  transform: translateY(-1px);
}

.ks-scroll-cue {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 46px;
  background: linear-gradient(to bottom, var(--ks-gold-light), transparent);
}

/* ==========================================================================
   Contact section
   ========================================================================== */
.ks-contact {
  background: var(--ks-ivory);
  padding: clamp(64px, 10vw, 120px) var(--ks-gutter);
}

.ks-contact-inner {
  max-width: var(--ks-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: clamp(48px, 6vw, 96px);
}

.ks-contact-heading {
  font-family: var(--ks-font-display);
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.03em;
  font-size: clamp(1.7rem, 2.6vw, 2.2rem);
  line-height: 1.3;
  margin: 0 0 14px;
  color: var(--ks-charcoal);
}

.ks-contact-intro {
  color: var(--ks-charcoal-70);
  max-width: 42ch;
  margin: 0 0 32px;
}

/* form */
.ks-form {
  display: grid;
  gap: 22px;
}

.ks-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.ks-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ks-field label {
  font-family: var(--ks-font-sans);
  font-size: 18px;
  font-weight: 800
  letter-spacing: 0.14em;
  color: var(--ks-gold-deep);
}

.ks-field input,
.ks-field textarea {
  font-family: var(--ks-font-serif);
  font-size: 1rem;
  color: var(--ks-charcoal);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--ks-hairline-on-ivory);
  padding: 8px 2px;
  transition: border-color 160ms ease;
}

.ks-field input:focus,
.ks-field textarea:focus {
  outline: none;
  border-bottom-color: var(--ks-gold-deep);
}

.ks-field textarea {
  resize: vertical;
  min-height: 96px;
  font-family: var(--ks-font-serif);
}

.ks-submit {
  justify-self: start;
  margin-top: 8px;
  font-family: var(--ks-font-sans);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--ks-black);
  background: var(--ks-gold-gradient);
  border: none;
  padding: 15px 36px;
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.ks-submit:hover,
.ks-submit:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(138, 106, 47, 0.28);
}

.ks-form-notice {
  font-family: var(--ks-font-sans);
  font-size: 13px;
  letter-spacing: 0.02em;
  padding: 12px 16px;
  border-left: 2px solid var(--ks-gold-deep);
  background: var(--ks-ivory-dim);
}

.ks-form-notice.is-error {
  border-left-color: #8a2f2f;
}

/* info column */
.ks-info {
  border-left: 1px solid var(--ks-hairline-on-ivory);
  padding-left: clamp(32px, 4vw, 56px);
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.ks-info-block h3 {
  font-family: var(--ks-font-sans);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--ks-gold-deep);
  margin: 0 0 8px;
}

.ks-info-block p {
  margin: 0;
  color: var(--ks-charcoal);
}

.ks-hours-note {
  display: inline-block;
  font-size: 0.78em;
  color: var(--ks-charcoal-70);
}

.ks-info-block a {
  text-decoration: none;
  border-bottom: 1px solid var(--ks-hairline-on-ivory);
}

.ks-info-block a:hover {
  border-bottom-color: var(--ks-gold-deep);
}

/* ==========================================================================
   Footer
   ========================================================================== */
.ks-footer {
  background: var(--ks-black);
  color: rgba(250, 247, 242, 0.72);
  text-align: center;
  padding: 40px var(--ks-gutter);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.ks-footer-mark {
  font-family: var(--ks-font-display);
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0.06em;
  font-size: 1rem;
  color: var(--ks-ivory);
}

.ks-social {
  display: flex;
  gap: 22px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ks-social a {
  font-family: var(--ks-font-sans);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-decoration: none;
  color: var(--ks-gold-light);
  border-bottom: 1px solid transparent;
}

.ks-social a:hover,
.ks-social a:focus-visible {
  border-bottom-color: var(--ks-gold-light);
}

.ks-footer-copy {
  font-family: var(--ks-font-sans);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: rgba(250, 247, 242, 0.45);
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 780px) {
  .ks-contact-inner {
    grid-template-columns: 1fr;
  }
  .ks-info {
    border-left: none;
    padding-left: 0;
    padding-top: 32px;
    border-top: 1px solid var(--ks-hairline-on-ivory);
  }
  .ks-form-row {
    grid-template-columns: 1fr;
  }
  /* The Contact Us button made the hero content taller than the old
     scroll-cue accounted for, so on short mobile screens the cue could
     land on top of the button. The button now serves the same purpose,
     so the cue is hidden on small screens rather than repositioned. */
  .ks-scroll-cue {
    display: none;
  }
}

/* ==========================================================================
   Keyboard focus visibility
   ========================================================================== */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--ks-gold-deep);
  outline-offset: 2px;
}