/*
Theme Name: TechFlick Exact Landing
Theme URI: https://techflickllc.com/
Author: TechFlick
Author URI: https://techflickllc.com/
Description: Pixel-matched promotional landing page using the supplied TechFlick hero artwork.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: techflick-exact
*/

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100%;
  background: #eef0ff;
}

body {
  overflow-x: hidden;
}

* {
  box-sizing: border-box;
}

.tf-exact-page {
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  background:
    radial-gradient(circle at 85% 72%, rgba(232, 180, 255, .25), transparent 35%),
    linear-gradient(120deg, #eef2ff, #f8efff);
}

.tf-exact-stage {
  position: relative;
  width: 100vw;
  max-width: 1672px;
  aspect-ratio: 1672 / 941;
  margin: 0 auto;
  overflow: hidden;
}

.tf-exact-stage img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: top center;
  user-select: none;
  -webkit-user-drag: none;
}

.tf-hotspot {
  position: absolute;
  display: block;
  z-index: 5;
  text-decoration: none;
  background: transparent;
  border-radius: 16px;
}

.tf-hotspot:focus-visible {
  outline: 3px solid rgba(82, 108, 255, .85);
  outline-offset: 3px;
}

/* Exact clickable areas based on the supplied 1672 × 941 design */
.tf-logo-hotspot {
  left: 4.2%;
  top: 5.0%;
  width: 24.5%;
  height: 15.5%;
}

.tf-primary-hotspot {
  left: 4.9%;
  top: 57.0%;
  width: 20.4%;
  height: 7.3%;
}

.tf-services-hotspot {
  left: 26.5%;
  top: 57.2%;
  width: 13.0%;
  height: 7.0%;
}

.tf-bottom-site-hotspot {
  left: 4.7%;
  top: 81.5%;
  width: 37.0%;
  height: 10.7%;
}

.tf-results-hotspot {
  left: 64.3%;
  top: 81.5%;
  width: 24.6%;
  height: 10.7%;
}

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

/* On wider screens the reference expands edge-to-edge while preserving ratio. */
@media (min-width: 1673px) {
  .tf-exact-stage {
    max-width: none;
  }
}

/* Mobile: preserve the exact artwork instead of rebuilding/reflowing it */
@media (max-width: 767px) {
  .tf-exact-page {
    min-height: auto;
  }
  .tf-exact-stage {
    width: 100vw;
    aspect-ratio: 1672 / 941;
  }
}

/* WordPress admin toolbar remains visible only for logged-in users */
.admin-bar .tf-exact-page {
  min-height: calc(100vh - 32px);
}