/*
Theme Name: The T-Town Touch
Theme URI: https://www.t-towntouch.com
Author: The T-Town Touch
Author URI: https://www.t-towntouch.com
Description: Custom multi-page theme for The T-Town Touch — embroidery & engraving in Dayton, Ohio. Black & gold luxe with warm cream content sections. Includes Home, About, Services, Gallery, Request a Quote, and Contact page templates.
Version: 1.6.0
Requires at least: 5.8
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: t-town-touch
*/

/* ============================================================
   BASE / RESET
   ============================================================ */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Jost',sans-serif;
  background:#16130D;
  color:#F3ECDB;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:#C9A24A;text-decoration:none;transition:color .25s}
a:hover{color:#E3C36B}
::selection{background:#C9A24A;color:#16130D}
input,textarea,select,button{font-family:inherit}

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes ttfade{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes ttfadein{from{opacity:0}to{opacity:1}}
.tt-fade{animation:ttfade .9s ease both}
.tt-fadein{animation:ttfadein 1.2s ease both}

/* ============================================================
   HEADER / NAV
   ============================================================ */
.tt-navlink{position:relative;padding:6px 0;color:#D8CEB8;transition:color .25s}
.tt-navlink:hover{color:#E3C36B}
.tt-navlink .tt-underline{position:absolute;left:0;right:0;bottom:-2px;height:1.5px;background:#C9A24A;transform:scaleX(0);transform-origin:left;transition:transform .3s}
.tt-navlink:hover .tt-underline,.tt-navlink.tt-active .tt-underline{transform:scaleX(1)}
.tt-navlink.tt-active{color:#E3C36B}

.tt-cta{
  font-family:'Cinzel',serif;font-weight:600;font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;color:#16130D;
  background:linear-gradient(135deg,#E3C36B,#C9A24A);
  padding:12px 22px;border-radius:2px;box-shadow:0 4px 14px rgba(201,162,74,.25);
  transition:box-shadow .25s,transform .25s;
}
.tt-cta:hover{box-shadow:0 6px 20px rgba(201,162,74,.45);color:#16130D}

/* Buttons */
.tt-btn-gold{
  display:inline-block;font-family:'Cinzel',serif;font-weight:600;font-size:13px;
  letter-spacing:.1em;text-transform:uppercase;color:#16130D;
  background:linear-gradient(135deg,#E9CE7B,#C9A24A);
  padding:17px 34px;border-radius:2px;box-shadow:0 8px 24px rgba(201,162,74,.28);
  transition:transform .25s,filter .25s;cursor:pointer;border:none;
}
.tt-btn-gold:hover{transform:translateY(-2px);color:#16130D;filter:brightness(1.03)}
.tt-btn-ghost{
  display:inline-block;font-family:'Cinzel',serif;font-weight:500;font-size:13px;
  letter-spacing:.1em;text-transform:uppercase;color:#E3C36B;background:transparent;
  border:1px solid rgba(201,162,74,.5);padding:17px 34px;border-radius:2px;transition:background .25s;
}
.tt-btn-ghost:hover{background:rgba(201,162,74,.1);color:#E3C36B}
.tt-btn-dark{
  display:inline-block;font-family:'Cinzel',serif;font-weight:600;font-size:13px;
  letter-spacing:.1em;text-transform:uppercase;color:#F6F1E7;
  background:linear-gradient(135deg,#2A2113,#3A2E17);padding:17px 32px;border-radius:2px;
  transition:transform .25s;
}
.tt-btn-dark:hover{transform:translateY(-2px);color:#F6F1E7}

/* Cards / hovers */
.tt-svc-cell{background:#FBF7EF;transition:background .25s}
.tt-svc-cell:hover{background:#fff}
.tt-svc-row{transition:border-color .25s}
.tt-svc-row:hover{border-color:rgba(201,162,74,.5)!important}
.tt-serve-card{transition:border-color .25s}
.tt-serve-card:hover{border-color:rgba(201,162,74,.55)!important}
.tt-work-cell{transition:border-color .25s}
.tt-work-cell:hover{border-color:rgba(201,162,74,.6)!important}
.tt-link-underline{border-bottom:1.5px solid #C9A24A;padding-bottom:4px}

/* Form fields */
.tt-field{
  font-size:15px;padding:13px 15px;border:1px solid rgba(42,36,23,.2);
  background:#fff;color:#2A2417;border-radius:2px;outline:none;transition:border-color .2s;width:100%;
}
.tt-field:focus{border-color:#C9A24A}

/* ============================================================
   MASONRY GALLERY
   ============================================================ */
.tt-masonry{column-count:3;column-gap:16px}
@media(max-width:900px){.tt-masonry{column-count:2}}
@media(max-width:560px){.tt-masonry{column-count:1}}

/* ============================================================
   RESPONSIVE NAV
   ============================================================ */
.tt-toggle{display:none}
.tt-mobile{display:none}
@media(max-width:1024px){
  .tt-primary-nav{display:none!important}
  .tt-toggle{display:flex!important}
}
.tt-mobile.is-open{display:flex!important}
body.tt-menu-open{overflow:hidden}

/* ============================================================
   SCROLL TO TOP
   ============================================================ */
.tt-totop{
  position:fixed;right:26px;bottom:26px;z-index:70;
  width:52px;height:52px;border-radius:50%;border:1px solid rgba(201,162,74,.55);
  background:linear-gradient(135deg,#E9CE7B,#C9A24A);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  box-shadow:0 8px 22px rgba(0,0,0,.4);
  opacity:0;visibility:hidden;transform:translateY(16px);
  transition:opacity .35s ease,transform .35s ease,visibility .35s,box-shadow .25s;
}
.tt-totop.is-visible{opacity:1;visibility:visible;transform:none}
.tt-totop:hover{box-shadow:0 10px 28px rgba(201,162,74,.5);transform:translateY(-3px)}
.tt-totop-arrow{
  display:block;width:11px;height:11px;
  border-top:2px solid #16130D;border-left:2px solid #16130D;
  transform:rotate(45deg);margin-top:4px;
}
@media(max-width:560px){.tt-totop{right:18px;bottom:18px;width:46px;height:46px}}
@media print{.tt-totop{display:none}}

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal-ready [data-reveal]{
  opacity:0;will-change:opacity,transform;
  transition:opacity .95s cubic-bezier(.16,1,.3,1),
             transform .95s cubic-bezier(.16,1,.3,1),
             clip-path 1.05s cubic-bezier(.16,1,.3,1);
}
.reveal-ready [data-reveal="up"]{transform:translateY(46px)}
.reveal-ready [data-reveal="left"]{transform:translateX(-64px)}
.reveal-ready [data-reveal="right"]{transform:translateX(64px)}
.reveal-ready [data-reveal="swipe"]{clip-path:inset(0 100% 0 0)}
.reveal-ready [data-reveal].reveal-in{
  opacity:1;transform:none;clip-path:inset(0 0 0 0);
}
@media (prefers-reduced-motion: reduce){
  .reveal-ready [data-reveal]{opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important}
}

/* ============================================================
   WP ADMIN BAR OFFSET
   The fixed header sits at top:0. When a logged-in user views the
   site, WordPress renders its 32px (46px on narrow screens) admin
   bar over the top — pushing the logo & nav out of view. These
   rules drop the fixed header (and the mobile menu overlay) below
   the admin bar. Only affects logged-in admins; public visitors
   are unchanged.
   ============================================================ */
body.admin-bar .tt-header{top:32px!important}
body.admin-bar .tt-mobile{top:32px!important}
@media screen and (max-width:782px){
  body.admin-bar .tt-header{top:46px!important}
  body.admin-bar .tt-mobile{top:46px!important}
}

/* ============================================================
   BRAND HOVER — golden sparkle sweep
   A warm gold light streak sweeps left→right across the whole
   logo + wordmark lockup on hover, with a soft gold glow.
   ============================================================ */
.tt-brand{position:relative;overflow:hidden;isolation:isolate;flex-shrink:0;padding:2px 4px;margin:-2px -4px}
.tt-brand::after{
  content:"";
  position:absolute;top:0;bottom:0;left:-80%;width:65%;
  pointer-events:none;
  transform:skewX(-18deg);
  mix-blend-mode:screen;
  opacity:0;
  background:linear-gradient(105deg,
    rgba(233,206,123,0) 0%,
    rgba(233,206,123,0) 38%,
    rgba(233,206,123,0.55) 47%,
    rgba(255,246,214,0.95) 50%,
    rgba(233,206,123,0.55) 53%,
    rgba(233,206,123,0) 62%,
    rgba(233,206,123,0) 100%);
}
.tt-brand:hover::after{ animation:tt-shine 0.9s cubic-bezier(.22,.61,.36,1) forwards; }
.tt-brand:hover img{ filter:drop-shadow(0 2px 6px rgba(0,0,0,0.4)) drop-shadow(0 0 10px rgba(233,206,123,0.55)); }
.tt-brand img{ transition:filter .35s ease; }
@keyframes tt-shine{
  0%{left:-80%;opacity:0}
  12%{opacity:1}
  88%{opacity:1}
  100%{left:140%;opacity:0}
}
@media (prefers-reduced-motion: reduce){
  .tt-brand::after{display:none}
}