/*
Theme Name: Find TikTok Creator
Theme URI: https://findtiktokcreator.online
Author: FindTikTokCreator.online
Author URI: https://findtiktokcreator.online
Description: Dark, TikTok-pink marketing theme for connecting brands with TikTok creators. Faithful WordPress port of the FindTikTokCreator.online landing page. Includes a full-width front page, custom menu support, and a widgetized footer.
Version: 1.0.0
Requires at least: 5.6
Tested up to: 6.6
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: findtiktokcreator
*/

/* ================= Design tokens ================= */
:root {
  --background: #000000;
  --foreground: #f7f7f7;
  --muted-foreground: #b0a7ac;
  --primary: #ff0050;
  --primary-foreground: #ffffff;
  --border: rgba(255, 255, 255, 0.12);
  --wine: #2a0f18;
  --wine-deep: #1a0810;
  --radius: 0.75rem;
  --font-sans: "IBM Plex Sans Thai", ui-sans-serif, system-ui, -apple-system, sans-serif;
}

/* ================= Base ================= */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }

.container { max-width: 80rem; margin: 0 auto; padding: 0 1.5rem; }
.accent-rule { display: inline-block; width: 3.5rem; height: 2px; background-color: var(--primary); margin-bottom: 1.5rem; }
.muted { color: var(--muted-foreground); }

/* ================= Buttons ================= */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 0.5rem; background-color: var(--primary);
  padding: 0.75rem 1.5rem; font-size: 0.875rem; font-weight: 500;
  color: var(--primary-foreground); transition: background-color 0.2s;
}
.btn-primary:hover { background-color: rgba(255, 0, 80, 0.9); }
.read-more { font-size: 0.875rem; font-weight: 600; color: var(--primary); }
.read-more:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ================= Header ================= */
.site-header {
  position: sticky; top: 0; z-index: 50;
  border-bottom: 1px solid var(--border);
  background-color: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
}
.site-header .inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.25rem 0;
}
.brand { font-size: 1.125rem; font-weight: 700; letter-spacing: -0.01em; }
.main-nav { display: none; align-items: center; gap: 2.25rem; }
.main-nav a { font-size: 0.875rem; color: rgba(247, 247, 247, 0.8); transition: color 0.2s; }
.main-nav a:hover { color: var(--primary); }
.header-cta { display: none; }
@media (min-width: 768px) {
  .main-nav { display: flex; }
  .header-cta { display: inline-flex; }
}

/* ================= Hero ================= */
.hero { position: relative; overflow: hidden; }
.hero .top { padding-top: 4rem; padding-bottom: 0; }
.hero .grid { display: grid; gap: 2.5rem; align-items: center; }
.hero h1 { font-size: 2.25rem; font-weight: 500; line-height: 1.1; letter-spacing: -0.02em; }
.hero p { margin-top: 1.5rem; max-width: 28rem; color: var(--muted-foreground); }
.hero .cta { margin-top: 2rem; }
.hero .images { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.hero .images img { aspect-ratio: 7/10; width: 100%; border-radius: 1rem; object-fit: cover; }
@media (min-width: 1024px) {
  .hero .grid { grid-template-columns: 1fr 1fr; }
  .hero h1 { font-size: 3.75rem; }
}

/* ================= Stats band ================= */
.stats {
  margin-top: 3.5rem;
  background: linear-gradient(to right, var(--wine-deep), var(--wine), var(--wine-deep));
}
.stats .grid { display: grid; gap: 2rem; padding: 3.5rem 0; }
.stat-value { font-size: 3rem; font-weight: 600; }
.stat-label { margin-top: 0.5rem; font-size: 0.875rem; color: var(--muted-foreground); }
@media (min-width: 640px) { .stats .grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .stats .grid { grid-template-columns: repeat(4, 1fr); } }

/* ================= Sections ================= */
.section { padding: 6rem 0; }
.section-title { font-size: 1.875rem; font-weight: 500; letter-spacing: -0.01em; }
@media (min-width: 640px) { .section-title { font-size: 2.25rem; } }
.two-col { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 1024px) { .two-col { grid-template-columns: 1fr 1fr; } }
.rounded-img { width: 100%; border-radius: 1.5rem; object-fit: cover; }
.center { text-align: center; }
hr.divider { border: 0; border-top: 1px solid var(--border); margin: 2rem 0; }

.founder { display: flex; align-items: center; gap: 1rem; }
.founder img { height: 3rem; width: 3rem; border-radius: 9999px; object-fit: cover; }
.founder .name { font-weight: 600; }
.founder .role { font-size: 0.875rem; color: var(--muted-foreground); }

/* ================= Services ================= */
.services-card {
  border-radius: 1.5rem;
  background: linear-gradient(to bottom right, var(--wine-deep), var(--wine), var(--wine-deep));
  padding: 2.5rem 1.5rem;
}
.service-row { display: grid; gap: 1.5rem; align-items: center; padding: 1.5rem 0; }
.service-row + .service-row { border-top: 1px solid var(--border); }
.service-num { font-size: 2.25rem; font-weight: 600; color: var(--primary); }
.service-title { font-size: 1.25rem; font-weight: 500; }
.service-desc { margin-top: 0.25rem; font-size: 0.875rem; color: var(--muted-foreground); }
.service-row img { height: 6rem; width: 10rem; border-radius: 0.75rem; object-fit: cover; }
@media (min-width: 640px) { .service-row { grid-template-columns: auto 1fr auto auto; } }

/* ================= CTA band ================= */
.cta-band { position: relative; background-size: cover; background-position: center; }
.cta-band .overlay { background-color: rgba(0, 0, 0, 0.7); }
.cta-band .grid { display: grid; gap: 2rem; align-items: center; padding: 6rem 0; }
.cta-band h2 { font-size: 1.875rem; font-weight: 500; line-height: 1.15; letter-spacing: -0.01em; }
.cta-band p { margin-bottom: 2rem; max-width: 32rem; color: rgba(247, 247, 247, 0.9); }
@media (min-width: 640px) { .cta-band h2 { font-size: 2.25rem; } }
@media (min-width: 1024px) { .cta-band .grid { grid-template-columns: 1fr 1fr; } }

/* ================= Offers ================= */
.offer-row { display: grid; gap: 1rem; padding: 1.5rem 0; }
.offer-row + .offer-row { border-top: 1px solid var(--border); }
.offer-title { font-size: 1.25rem; font-weight: 500; }
.offer-desc { font-size: 0.875rem; color: var(--muted-foreground); }
@media (min-width: 640px) { .offer-row { grid-template-columns: minmax(0, 220px) 1fr; } }

/* ================= Testimonials ================= */
.testimonials { background: linear-gradient(to bottom, var(--wine-deep), var(--background)); }
.quote-mark { position: absolute; top: -1.5rem; left: 0.5rem; font-size: 4.5rem; font-weight: 700; line-height: 1; color: var(--primary); }
.testimonial { border-top: 1px solid var(--border); padding-top: 2rem; margin-top: 2rem; }
.testimonial .who { margin-top: 1rem; display: flex; align-items: center; gap: 0.75rem; }
.testimonial .who img { height: 2.5rem; width: 2.5rem; border-radius: 9999px; object-fit: cover; }
.testimonial .who span { font-weight: 600; }

/* ================= Portfolio ================= */
.portfolio-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.portfolio-grid img { width: 100%; border-radius: 1rem; object-fit: cover; }
.portfolio-grid .tall { aspect-ratio: 3/4; }
.portfolio-grid .wide { aspect-ratio: 4/3; }
.portfolio-grid .stack { display: grid; gap: 1.25rem; }
@media (min-width: 1024px) { .portfolio-grid { grid-template-columns: repeat(4, 1fr); } }

/* ================= Footer ================= */
.site-footer { border-top: 1px solid var(--border); }
.site-footer .inner { padding: 4rem 0; }
.footer-nav { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 2rem; }
.footer-nav a { font-size: 0.875rem; color: rgba(247, 247, 247, 0.8); transition: color 0.2s; }
.footer-nav a:hover { color: var(--primary); }
.footer-copy { font-size: 0.875rem; color: var(--muted-foreground); }


/* Nav list reset for wp_nav_menu */
.main-nav ul, .footer-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: inherit; }
.main-nav ul { gap: 2.25rem; }
.footer-nav ul { gap: 2rem; }