/*
Theme Name: Tiny Timmy's Tattoo
Theme URI: https://example.com/
Author: OpenAI for Tiny Timmy's Tattoo
Description: A lightweight custom tattoo studio theme with neon/punk styling, gallery, pricing, contact form with client-side image compression, and mobile call/text buttons.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: tiny-timmys-tattoo
*/

:root {
  --tt-bg: #06060a;
  --tt-panel: #101019;
  --tt-panel-2: #171722;
  --tt-text: #f7f3ec;
  --tt-muted: #b8b6c2;
  --tt-pink: #ff2d9b;
  --tt-cyan: #20d9ef;
  --tt-yellow: #ffb20f;
  --tt-lime: #c9ff2f;
  --tt-purple: #8a3ffc;
  --tt-line: rgba(255,255,255,.13);
  --tt-shadow: 0 14px 40px rgba(0,0,0,.45);
  --tt-radius: 20px;
  --tt-max: 1160px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background:
    radial-gradient(circle at 8% 12%, rgba(255,45,155,.11), transparent 24rem),
    radial-gradient(circle at 92% 22%, rgba(32,217,239,.09), transparent 24rem),
    radial-gradient(circle at 65% 85%, rgba(138,63,252,.09), transparent 22rem),
    var(--tt-bg);
  color: var(--tt-text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  padding-bottom: 0;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  opacity: .28;
  background-image:
    linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px);
  background-size: 32px 32px;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button, input, textarea { font: inherit; }

.tt-wrap { width: min(calc(100% - 36px), var(--tt-max)); margin-inline: auto; }
.tt-section { padding: 78px 0; position: relative; }
.tt-section--tight { padding: 48px 0; }
.tt-section--panel { background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.008)); border-block: 1px solid rgba(255,255,255,.05); }

.tt-kicker {
  margin: 0 0 8px;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: .78rem;
  font-weight: 900;
  color: var(--tt-cyan);
}
.tt-title, .tt-page-title, .tt-card h2, .tt-card h3 {
  font-family: Impact, Haettenschweiler, "Arial Black", sans-serif;
  letter-spacing: .02em;
  text-transform: uppercase;
  line-height: .98;
}
.tt-title { font-size: clamp(2.2rem, 6vw, 5.4rem); margin: 0 0 18px; }
.tt-page-title { font-size: clamp(2.5rem, 6vw, 5.2rem); margin: 0 0 14px; }
.tt-gradient-text {
  background: linear-gradient(90deg, var(--tt-cyan), #fff 31%, var(--tt-yellow) 65%, var(--tt-pink));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.tt-lead { font-size: clamp(1.05rem, 2.1vw, 1.25rem); max-width: 720px; color: #dedce6; }
.tt-muted { color: var(--tt-muted); }

.tt-site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(4,4,8,.88);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.tt-header-inner { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.tt-brand { display:flex; align-items:center; gap:12px; text-decoration:none; min-width:0; }
.tt-brand-mark {
  width: 44px; height: 44px; border-radius: 12px;
  display:block;
  overflow:hidden;
  background:#0a0a0f;
  border:1px solid rgba(255,255,255,.14);
  box-shadow: 0 0 25px rgba(255,45,155,.22);
}
.tt-brand-mark img { width:100%; height:100%; object-fit:cover; display:block; }
.tt-brand-copy strong { display:block; line-height:1; font-size:1.02rem; text-transform:uppercase; letter-spacing:.04em; }
.tt-brand-copy span { display:block; color:var(--tt-muted); font-size:.75rem; margin-top:5px; }
.tt-nav { display:flex; align-items:center; gap:6px; }
.tt-nav li { list-style:none; margin:0; padding:0; }
.tt-nav li::marker, .tt-nav li::before, .tt-nav li::after { content:none !important; display:none !important; }
.tt-nav a { text-decoration:none; color:#dedde5; font-weight:800; font-size:.9rem; padding:10px 12px; border-radius:10px; }
.tt-nav a:hover, .tt-nav a:focus { color:#fff; background:rgba(255,255,255,.07); }
.tt-nav .tt-nav-cta { background: linear-gradient(135deg, var(--tt-pink), #c50e72); color:#fff; padding-inline:16px; box-shadow:0 0 18px rgba(255,45,155,.18); }
.tt-menu-button { display:none; background:transparent; border:1px solid var(--tt-line); color:#fff; border-radius:11px; padding:9px 12px; }

.tt-hero { padding: 32px 0 70px; overflow:hidden; }
.tt-hero-art { border:1px solid rgba(255,255,255,.1); border-radius:26px; overflow:hidden; box-shadow:var(--tt-shadow); background:#000; }
.tt-hero-art img { width:100%; aspect-ratio:1170/574; object-fit:cover; }
.tt-hero-copy { text-align:center; padding-top:34px; }
.tt-hero-copy .tt-lead { margin:0 auto 26px; }
.tt-actions { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.tt-button {
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:48px; padding:12px 20px; border-radius:14px;
  border:1px solid transparent; text-decoration:none; font-weight:900;
  cursor:pointer; transition:transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.tt-button:hover { transform:translateY(-1px); }
.tt-button--primary { background:linear-gradient(135deg, var(--tt-pink), #d51a7e); color:#fff; box-shadow:0 0 24px rgba(255,45,155,.22); }
.tt-button--secondary { background:rgba(32,217,239,.08); border-color:rgba(32,217,239,.35); color:#dffcff; }
.tt-button--dark { background:#0a0a0e; border-color:var(--tt-line); color:#fff; }

.tt-grid { display:grid; gap:22px; }
.tt-grid--3 { grid-template-columns:repeat(3, minmax(0,1fr)); }
.tt-grid--2 { grid-template-columns:repeat(2, minmax(0,1fr)); }
.tt-card {
  background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.025));
  border:1px solid rgba(255,255,255,.1); border-radius:var(--tt-radius);
  padding:26px; box-shadow:0 12px 30px rgba(0,0,0,.22);
}
.tt-card h2, .tt-card h3 { margin:0 0 12px; font-size:1.7rem; }
.tt-card p:last-child { margin-bottom:0; }
.tt-icon { font-size:1.5rem; margin-bottom:12px; display:block; }

.tt-split { display:grid; grid-template-columns:.8fr 1.2fr; gap:34px; align-items:center; }
.tt-poster { border-radius:24px; overflow:hidden; border:1px solid rgba(255,255,255,.12); box-shadow:var(--tt-shadow); }
.tt-poster img { width:100%; aspect-ratio:1054/1492; object-fit:cover; }
.tt-checks { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:24px 0; }
.tt-check { border:1px solid var(--tt-line); background:rgba(255,255,255,.035); border-radius:14px; padding:14px; font-weight:800; }
.tt-check::before { content:"★"; color:var(--tt-yellow); margin-right:8px; }

.tt-gallery { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.tt-gallery-item { margin:0; border-radius:18px; overflow:hidden; border:1px solid rgba(255,255,255,.1); background:var(--tt-panel); min-height:240px; box-shadow:0 12px 24px rgba(0,0,0,.18); }
.tt-gallery-item img { width:100%; height:100%; min-height:240px; max-height:460px; object-fit:cover; transition:transform .22s ease; }
.tt-gallery-item:hover img { transform:scale(1.025); }

.tt-page-hero { padding:62px 0 34px; text-align:center; }
.tt-page-hero .tt-lead { margin-inline:auto; }
.tt-price-wrap { max-width:760px; margin:0 auto; }
.tt-price-sheet { border-radius:24px; overflow:hidden; border:1px solid rgba(255,255,255,.12); box-shadow:var(--tt-shadow); background:#000; }
.tt-price-note { text-align:center; color:var(--tt-muted); margin-top:18px; font-size:.95rem; }

.tt-form-shell { max-width:820px; margin:0 auto; }
.tt-form { display:grid; gap:18px; }
.tt-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.tt-field label { display:block; font-weight:900; margin-bottom:7px; }
.tt-field input, .tt-field textarea {
  width:100%; color:#fff; background:#0b0b11; border:1px solid rgba(255,255,255,.16);
  border-radius:13px; padding:13px 14px; outline:none;
}
.tt-field input:focus, .tt-field textarea:focus { border-color:var(--tt-cyan); box-shadow:0 0 0 3px rgba(32,217,239,.10); }
.tt-field textarea { min-height:150px; resize:vertical; }
.tt-field small { display:block; color:var(--tt-muted); margin-top:7px; }
.tt-upload-status { font-size:.9rem; color:var(--tt-muted); min-height:20px; }
.tt-honeypot { position:absolute !important; left:-10000px !important; width:1px !important; height:1px !important; overflow:hidden !important; }
.tt-alert { padding:14px 16px; border-radius:13px; margin-bottom:18px; border:1px solid; }
.tt-alert--success { background:rgba(61,255,138,.08); border-color:rgba(61,255,138,.34); }
.tt-alert--error { background:rgba(255,79,79,.08); border-color:rgba(255,79,79,.34); }
.tt-contact-band { display:grid; grid-template-columns:1fr auto; gap:24px; align-items:center; padding:24px; border-radius:20px; background:linear-gradient(120deg, rgba(32,217,239,.10), rgba(255,45,155,.09)); border:1px solid rgba(255,255,255,.12); }

.tt-site-footer { margin-top:58px; border-top:1px solid rgba(255,255,255,.09); background:#030306; }
.tt-footer-banner { overflow:hidden; border-bottom:1px solid rgba(255,255,255,.08); }
.tt-footer-banner img { width:100%; max-height:330px; object-fit:cover; object-position:center; opacity:.86; }
.tt-footer-inner { padding:32px 0 94px; display:flex; justify-content:space-between; gap:24px; align-items:flex-start; }
.tt-footer-inner p { margin:6px 0; color:var(--tt-muted); }
.tt-footer-links { display:flex; gap:14px; flex-wrap:wrap; }
.tt-footer-links a { color:#fff; text-decoration:none; font-weight:800; }

.tt-mobile-actions { display:none; }

@media (max-width: 900px) {
  .tt-grid--3 { grid-template-columns:1fr; }
  .tt-grid--2, .tt-split { grid-template-columns:1fr; }
  .tt-split .tt-poster { max-width:520px; margin-inline:auto; }
  .tt-gallery { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .tt-nav { position:absolute; top:76px; right:18px; left:18px; display:none; flex-direction:column; align-items:stretch; padding:12px; border:1px solid rgba(255,255,255,.12); background:#0b0b11; border-radius:16px; box-shadow:var(--tt-shadow); }
  .tt-nav.is-open { display:flex; }
  .tt-menu-button { display:inline-flex; }
}

@media (max-width: 640px) {
  body { padding-bottom:72px; }
  .tt-wrap { width:min(calc(100% - 24px), var(--tt-max)); }
  .tt-section { padding:56px 0; }
  .tt-hero { padding-top:14px; }
  .tt-hero-art { border-radius:18px; }
  .tt-hero-copy { padding-top:26px; }
  .tt-title { font-size:clamp(2.1rem, 12vw, 3.6rem); }
  .tt-gallery { grid-template-columns:1fr; }
  .tt-gallery-item img { max-height:none; aspect-ratio:auto; object-fit:contain; background:#050508; }
  .tt-checks, .tt-form-grid { grid-template-columns:1fr; }
  .tt-contact-band { grid-template-columns:1fr; }
  .tt-footer-inner { flex-direction:column; padding-bottom:28px; }
  .tt-brand-copy span { display:none; }
  .tt-mobile-actions {
    display:grid; grid-template-columns:1fr 1fr; gap:1px;
    position:fixed; left:0; right:0; bottom:0; z-index:200;
    background:#1c1c25; border-top:1px solid rgba(255,255,255,.16);
    padding-bottom:env(safe-area-inset-bottom);
    box-shadow:0 -10px 25px rgba(0,0,0,.35);
  }
  .tt-mobile-actions a { min-height:64px; display:flex; align-items:center; justify-content:center; gap:8px; text-decoration:none; font-weight:950; text-transform:uppercase; letter-spacing:.05em; }
  .tt-mobile-actions a:first-child { background:linear-gradient(135deg, var(--tt-cyan), #087e8e); color:#001317; }
  .tt-mobile-actions a:last-child { background:linear-gradient(135deg, var(--tt-pink), #b90f6b); color:#fff; }
}