/*
Theme Name: TapToPaint
Template: astra
Author: Alf Enterprises Co., Ltd
Description: TapToPaint — pick pixel paint. Ocean-blue & fire-orange brand theme.
Version: 2.0.0
*/

:root{
  --navy:#12345e; --navy-d:#0d2545; --blue:#1667a3; --blue-2:#2e79bd;
  --orange:#ee6b1f; --orange-d:#d1571350; --orange-dd:#cc5514;
  --ink:#14202b; --muted:#5c6b78; --paper:#ffffff; --soft:#f2f6fb; --soft-2:#e9f0f7; --line:#e2e9f0;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --head:'Poppins',var(--sans);
  --wrap:1200px;
}

/* ---------- base ---------- */
body{ font-family:var(--sans); color:var(--ink); background:var(--paper); line-height:1.65; -webkit-font-smoothing:antialiased; }
h1,h2,h3,h4,.entry-title,.widget-title{ font-family:var(--head); color:var(--navy); font-weight:700; line-height:1.16; letter-spacing:-.2px; }
a{ color:var(--blue); text-decoration:none; }
a:hover{ color:var(--orange); }
img{ max-width:100%; height:auto; }

/* ---------- buttons ---------- */
.ttp-btn,
.woocommerce a.button, .woocommerce button.button, .woocommerce .button,
.woocommerce #respond input#submit, .woocommerce a.button.alt, .woocommerce button.button.alt{
  display:inline-block; font-family:var(--sans); font-weight:600; font-size:15px; letter-spacing:.3px;
  padding:15px 32px; border-radius:6px; border:2px solid transparent; transition:all .2s ease; cursor:pointer; line-height:1; }
.ttp-btn-accent,
.woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce .button.alt,
.woocommerce #respond input#submit{ background:var(--orange); color:#fff !important; border-color:var(--orange); }
.ttp-btn-accent:hover,
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover{ background:var(--orange-dd); border-color:var(--orange-dd); color:#fff !important; }
.ttp-btn-dark{ background:var(--navy); color:#fff !important; border-color:var(--navy); }
.ttp-btn-dark:hover{ background:var(--blue); border-color:var(--blue); color:#fff !important; }
.ttp-btn-ghost{ background:transparent; color:#fff !important; border-color:rgba(255,255,255,.6); }
.ttp-btn-ghost:hover{ background:#fff; color:var(--navy) !important; border-color:#fff; }
.woocommerce a.button, .woocommerce button.button{ background:transparent; color:var(--navy) !important; border-color:var(--navy); }
.woocommerce a.button:hover, .woocommerce button.button:hover{ background:var(--navy); color:#fff !important; }

/* ---------- header (white, with logo) ---------- */
.site-header, header.site-header, .ast-primary-header-bar, .main-header-bar{ background:#fff !important; box-shadow:0 1px 0 var(--line); }
.main-header-bar{ border-bottom:1px solid var(--line) !important; }
.custom-logo, .site-logo-img .custom-logo{ max-height:58px; width:auto; }
.ast-site-identity{ padding:.55em 0; }
/* fallback text title if no logo */
.site-title a{ color:var(--navy) !important; font-family:var(--head); font-weight:700; }
.site-title a::after{ content:''; }
.main-header-menu a, .ast-header-navigation-bar .main-header-menu a, .main-navigation a, .main-header-menu .menu-link{
  color:var(--navy) !important; font-weight:600; font-size:15px; letter-spacing:.2px; white-space:nowrap; }
.main-header-menu a:hover, .main-navigation a:hover, .main-header-menu .current-menu-item > a{ color:var(--orange) !important; }
.main-header-menu .menu-item > a{ position:relative; }
.main-header-menu .menu-item > a:after{ content:''; position:absolute; left:0; bottom:1px; width:0; height:2px; background:var(--orange); transition:width .25s ease; }
.main-header-menu .menu-item:hover > a:after, .main-header-menu .current-menu-item > a:after{ width:100%; }
/* cart + toggle in navy */
.ast-cart-menu-wrap .count, .ast-cart-menu-wrap, .ast-site-header-cart a, .ast-header-woo-cart .count,
.ast-mobile-menu-buttons-minimal, .menu-toggle, .ast-mobile-svg{ color:var(--navy) !important; fill:var(--navy) !important; }
.ast-cart-menu-wrap .count{ background:var(--orange) !important; border-color:var(--orange) !important; }

/* ---------- layout helpers ---------- */
.ttp-full{ width:100vw; margin-left:calc(50% - 50vw); }
.ttp-container{ max-width:var(--wrap); margin:0 auto; padding:0 24px; }
.ttp-section{ padding:90px 0; }
.ttp-kicker{ font-family:var(--sans); text-transform:uppercase; letter-spacing:3px; font-size:12px; font-weight:700; color:var(--orange); margin:0 0 12px; }
.ttp-h2{ font-size:clamp(28px,4vw,44px); margin:0 0 18px; }
.ttp-lead{ color:var(--muted); font-size:18px; max-width:660px; }
.ttp-center{ text-align:center; }

/* ---------- hero ---------- */
.ttp-hero{ position:relative; color:#fff; background:linear-gradient(120deg,rgba(10,26,50,.82),rgba(12,52,94,.6)),url('/wp-content/uploads/2026/07/hero-bg.jpg') center/cover no-repeat; }
.ttp-hero-inner{ max-width:var(--wrap); margin:0 auto; padding:140px 24px 130px; }
.ttp-eyebrow{ text-transform:uppercase; letter-spacing:4px; font-size:13px; font-weight:700; color:#ffb787; margin:0 0 20px; }
.ttp-hero-title{ color:#fff; font-size:clamp(38px,6vw,70px); line-height:1.06; margin:0 0 22px; max-width:16ch; }
.ttp-hero-sub{ color:rgba(255,255,255,.92); font-size:20px; max-width:620px; margin:0 0 36px; }
.ttp-hero-cta{ display:flex; gap:16px; flex-wrap:wrap; }
.ttp-hero-strip{ background:var(--navy); color:#fff; }
.ttp-hero-strip .ttp-container{ display:flex; flex-wrap:wrap; gap:12px 40px; justify-content:space-between; padding-top:18px; padding-bottom:18px; }
.ttp-hero-strip span{ font-size:14.5px; font-weight:500; color:#dbe6f2; display:flex; align-items:center; gap:10px; }
.ttp-hero-strip b{ color:#ffb787; }

/* ---------- categories ---------- */
.ttp-cats{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:40px; }
.ttp-cat{ position:relative; display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-start;
  min-height:210px; padding:26px; border-radius:10px; background:var(--c,#155a94); color:#fff !important; overflow:hidden; isolation:isolate; }
.ttp-cat:before{ content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,0) 35%,rgba(0,0,0,.4) 100%); z-index:-1; }
.ttp-cat:after{ content:'→'; position:absolute; top:22px; right:24px; font-size:20px; opacity:.9; transition:transform .25s ease; }
.ttp-cat:hover:after{ transform:translateX(6px); }
.ttp-cat h3{ color:#fff; font-size:23px; margin:0; }
.ttp-cat span{ display:block; font-family:var(--sans); font-size:13px; letter-spacing:.2px; opacity:.92; margin-top:6px; }

/* ---------- features ---------- */
.ttp-features-sec{ background:var(--navy); color:#e6eef7; }
.ttp-features{ display:grid; grid-template-columns:repeat(3,1fr); gap:44px; }
.ttp-feature h3{ color:#fff; font-size:21px; margin:0 0 10px; }
.ttp-feature p{ color:rgba(230,238,247,.75); margin:0; font-size:15.5px; }
.ttp-feature .ttp-ic{ font-size:26px; display:block; margin-bottom:14px; }
.ttp-features-sec .ttp-kicker{ color:#ffb787; }
.ttp-features-sec .ttp-h2{ color:#fff; }

/* ---------- soft section ---------- */
.ttp-soft{ background:var(--soft); }

/* ---------- split about ---------- */
.ttp-split{ display:grid; grid-template-columns:1.05fr .95fr; align-items:center; }
.ttp-split-text{ padding:92px clamp(24px,6vw,86px); }
.ttp-split-media{ min-height:470px; background:radial-gradient(120% 90% at 85% 15%,rgba(238,107,31,.85),rgba(238,107,31,0) 55%),linear-gradient(160deg,#12345e,#1667a3); position:relative; }
.ttp-split-media:after{ content:''; position:absolute; inset:38px; border:1px solid rgba(255,255,255,.25); border-radius:6px; }
.ttp-chips{ position:absolute; inset:0; display:flex; flex-wrap:wrap; align-content:center; justify-content:center; gap:16px; padding:60px; }
.ttp-chips i{ width:72px; height:72px; border-radius:50%; display:block; box-shadow:0 10px 26px rgba(0,0,0,.3); }

/* ---------- projects ---------- */
.ttp-projects{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:36px; }
.ttp-proj{ background:var(--soft-2); border:1px solid var(--line); border-radius:8px; padding:26px 22px; }
.ttp-proj b{ display:block; color:var(--navy); font-family:var(--head); font-weight:600; font-size:17px; }
.ttp-proj span{ color:var(--muted); font-size:13.5px; }

/* ---------- cta band ---------- */
.ttp-cta-band{ background:linear-gradient(120deg,var(--orange),#f0872f); color:#fff; text-align:center; padding:80px 24px; }
.ttp-cta-band h2{ color:#fff; font-size:clamp(26px,3.6vw,40px); margin:0 0 14px; }
.ttp-cta-band p{ color:rgba(255,255,255,.95); font-size:18px; margin:0 0 30px; }

/* ---------- WooCommerce ---------- */
.woocommerce ul.products li.product{ text-align:left; }
.woocommerce ul.products li.product img{ border-radius:8px; margin-bottom:16px !important; border:1px solid var(--line); }
.woocommerce ul.products li.product .woocommerce-loop-product__title{ font-family:var(--head); font-size:18px; font-weight:600; padding:0 0 6px !important; color:var(--navy); }
.woocommerce ul.products li.product .price{ color:var(--muted) !important; font-size:16px; }
.woocommerce ul.products li.product .price .amount{ color:var(--ink); font-weight:700; }
.woocommerce ul.products li.product .button{ margin-top:12px; }
.woocommerce span.onsale{ background:var(--orange); border-radius:4px; }
.woocommerce div.product span.price, .woocommerce div.product p.price{ color:var(--navy); }
.woocommerce .woocommerce-message, .woocommerce .woocommerce-info{ border-top-color:var(--orange); }
.woocommerce .woocommerce-message::before, .woocommerce .woocommerce-info::before{ color:var(--orange); }
.woocommerce .star-rating span{ color:var(--orange); }

/* ---------- WhatsApp float ---------- */
.ttp-wa{ position:fixed; right:20px; bottom:20px; z-index:9999; width:58px; height:58px; border-radius:50%;
  background:#25D366; box-shadow:0 8px 22px rgba(0,0,0,.25); display:flex; align-items:center; justify-content:center; transition:transform .2s; }
.ttp-wa:hover{ transform:scale(1.08); }
.ttp-wa svg{ width:32px; height:32px; fill:#fff; }

/* ---------- branded footer ---------- */
.ttp-footer{ background:var(--navy-d); color:#c3d0de; padding:64px 0 40px; }
.ttp-footer .ttp-container{ display:grid; grid-template-columns:1.6fr 1fr 1.2fr; gap:40px; }
.ttp-footer h4{ color:#fff; font-family:var(--head); font-size:16px; letter-spacing:.5px; margin:0 0 16px; text-transform:uppercase; }
.ttp-footer p, .ttp-footer li{ color:#aebdce; font-size:15px; line-height:1.9; }
.ttp-footer ul{ list-style:none; margin:0; padding:0; }
.ttp-footer a{ color:#c3d0de; } .ttp-footer a:hover{ color:var(--orange); }
.ttp-footer .ttp-brandline{ font-family:var(--head); font-size:22px; color:#fff; font-weight:700; margin-bottom:8px; }
.ttp-footer .ttp-brandline b{ color:var(--orange); }
.ttp-social{ display:flex; gap:12px; margin-top:16px; }
.ttp-social a{ width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; }
.ttp-social a:hover{ background:var(--orange); }
.ttp-social svg{ width:18px; height:18px; fill:#fff; }
/* replace Astra's footer with our branded one */
footer.site-footer{ display:none !important; }
.ttp-copyright{ border-top:1px solid rgba(255,255,255,.09); margin-top:44px; padding-top:26px; }
.ttp-copyright .ttp-container{ display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; padding-left:24px; padding-right:24px; }
.ttp-copyright span{ color:#7f8fa2; font-size:13.5px; }
/* close the gap between page content and footer on the front page */
body.home #content, body.home #primary, body.home #main, body.home .ast-container,
body.home .site-main, body.home .entry-content, body.home .ast-page-builder-template,
body.home article, body.home .site-content{ padding-bottom:0 !important; margin-bottom:0 !important; }

/* ---------- responsive ---------- */
@media(max-width:880px){
  .ttp-cats{ grid-template-columns:1fr 1fr; }
  .ttp-features{ grid-template-columns:1fr; gap:30px; }
  .ttp-split{ grid-template-columns:1fr; }
  .ttp-split-media{ min-height:300px; order:-1; }
  .ttp-projects{ grid-template-columns:1fr 1fr; }
  .ttp-footer .ttp-container{ grid-template-columns:1fr; gap:28px; }
  .ttp-section{ padding:60px 0; }
  .ttp-hero-inner{ padding:100px 24px 84px; }
}
@media(max-width:520px){ .ttp-cats{ grid-template-columns:1fr; } .ttp-projects{ grid-template-columns:1fr; } }