/* ============================================================
   Tohfaas Brand Layer — "Rani Pink Royale"
   Source of truth: 01-brand/Tohfaas_Brand_Guide_v1.md
   ============================================================ */

:root {
  --tf-primary: #C2185B;
  --tf-primary-deep: #8E1443;
  --tf-gold: #C9A24B;
  --tf-bg: #FBF3E7;
  --tf-surface: #F6E3EA;
  --tf-text: #2E2A26;
  --tf-text-muted: #7A716B;
  --tf-success: #1F8A5B;
  --tf-error: #B3261E;
}

/* ---------- Global typography & surfaces ---------- */

body,
button, input, select, textarea {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  color: var(--tf-text);
}

body {
  background-color: var(--tf-bg);
  font-size: 16px;
  line-height: 1.7;
}

h1, h2, h3, h4, h5, h6,
.site-title {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  color: var(--tf-text);
  line-height: 1.25;
}

a { color: var(--tf-primary); }
a:hover { color: var(--tf-primary-deep); }

::selection { background: var(--tf-surface); }

/* Astra header/footer alignment with the palette */
.main-header-bar, .ast-primary-header-bar, .site-header {
  background-color: var(--tf-bg);
}
.ast-builder-menu .main-header-menu .menu-item > .menu-link {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  color: var(--tf-text);
}
.ast-builder-menu .main-header-menu .menu-item > .menu-link:hover,
.ast-builder-menu .main-header-menu .current-menu-item > .menu-link {
  color: var(--tf-primary);
}
.site-footer, .ast-builder-footer-grid-columns {
  background-color: var(--tf-primary-deep);
  color: var(--tf-bg);
}
.site-footer a { color: var(--tf-bg); }
.site-footer a:hover { color: var(--tf-gold); }

/* ---------- Buttons ---------- */

.wp-block-button__link,
.wp-element-button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce button.button.alt,
.ast-site-header-cart .cart-container .button {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 500 !important;
  background-color: var(--tf-primary) !important;
  color: #ffffff !important;
  border-radius: 6px !important;
  padding: 0.85rem 2rem !important;
  border: none !important;
  text-transform: none !important;
  transition: background-color .2s ease, transform .15s ease;
}
.wp-block-button__link:hover,
.wp-element-button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover {
  background-color: var(--tf-primary-deep) !important;
  color: #ffffff !important;
  transform: translateY(-1px);
}

.tf-btn-ghost .wp-block-button__link {
  background-color: transparent !important;
  color: var(--tf-primary) !important;
  border: 1.5px solid var(--tf-primary) !important;
}
.tf-btn-ghost .wp-block-button__link:hover {
  background-color: var(--tf-primary) !important;
  color: #ffffff !important;
}

.tf-btn-whatsapp .wp-block-button__link {
  background-color: var(--tf-success) !important;
}
.tf-btn-whatsapp .wp-block-button__link:hover {
  background-color: #17714a !important;
}

/* Buttons on deep-rani sections: ivory fill */
.tf-section--deep .wp-block-button__link {
  background-color: var(--tf-bg) !important;
  color: var(--tf-primary-deep) !important;
}
.tf-section--deep .wp-block-button__link:hover {
  background-color: #ffffff !important;
}

/* ---------- Section scaffolding ---------- */

.tf-wrap {
  max-width: 1140px;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.tf-section { padding: 4.5rem 0; }
.tf-section--blush { background-color: var(--tf-surface); }
.tf-section--deep {
  background-color: var(--tf-primary-deep);
  color: var(--tf-bg);
}
.tf-section--deep h1, .tf-section--deep h2,
.tf-section--deep h3, .tf-section--deep p { color: var(--tf-bg); }
.tf-section--deep .tf-muted { color: #d9bfc9; }

.tf-kicker {
  font-family: 'Poppins', sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--tf-gold);
}

.tf-muted { color: var(--tf-text-muted); }

/* Gold divider — a garnish, never a background */
.tf-divider {
  width: 64px;
  height: 2px;
  background: var(--tf-gold);
  border: none;
  margin: 1.25rem auto;
}

/* ---------- Announcement bar ---------- */

.tf-announce {
  background-color: var(--tf-primary-deep);
  padding: 0.65rem 1rem;
}
.tf-announce p {
  color: var(--tf-bg);
  font-size: 0.9rem;
  margin: 0;
  text-align: center;
}
.tf-announce strong { color: #ffffff; }

/* ---------- Hero ---------- */

.tf-hero {
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, var(--tf-surface) 0%, var(--tf-bg) 70%);
  padding: 5.5rem 0 4.5rem;
  text-align: center;
}
.tf-hero h1 {
  font-size: clamp(2.6rem, 6vw, 4.2rem);
  font-style: italic;
  font-weight: 600;
  color: var(--tf-primary);
  margin-bottom: 1.25rem;
}
.tf-hero .tf-hero-sub {
  font-size: 1.25rem;
  max-width: 640px;
  margin: 0 auto 0.9rem;
}
.tf-hero .tf-hero-support {
  color: var(--tf-text-muted);
  max-width: 560px;
  margin: 0 auto 2rem;
}

/* ---------- Trust bar ---------- */

.tf-trustbar { padding: 2.5rem 0; background-color: var(--tf-surface); }
.tf-trustbar .tf-trust-item p { margin: 0; font-size: 0.95rem; }
.tf-trust-item strong { display: block; color: var(--tf-text); }
.tf-star { color: var(--tf-gold); font-size: 1.1rem; }

/* ---------- Steps (How It Works) ---------- */

.tf-step-num {
  font-family: 'Playfair Display', serif;
  font-size: 1.5rem;
  font-weight: 600;
  color: #ffffff;
  background: var(--tf-primary);
  width: 52px; height: 52px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1rem;
}

/* ---------- Cards / category tiles ---------- */

.tf-card {
  background: #ffffff;
  border: 1px solid var(--tf-surface);
  border-radius: 12px;
  padding: 2.25rem 1.75rem;
  height: 100%;
  transition: transform .2s ease, box-shadow .2s ease;
}
.tf-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(142, 20, 67, 0.10);
}
.tf-card h3 { margin-top: 0; font-size: 1.35rem; }
.tf-card h3 a { color: var(--tf-text); text-decoration: none; }
.tf-card h3 a:hover { color: var(--tf-primary); }

/* ---------- Checklists ---------- */

.tf-check { list-style: none; padding-left: 0; }
.tf-check li {
  padding-left: 1.6em;
  position: relative;
  margin-bottom: 0.7em;
}
.tf-check li::before {
  content: "\2726"; /* ✦ */
  color: var(--tf-gold);
  position: absolute;
  left: 0;
}

/* ---------- Quote / story ---------- */

.tf-quote {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 1.35rem;
  color: var(--tf-primary-deep);
  border-left: 3px solid var(--tf-gold);
  padding-left: 1.25rem;
}

/* ---------- FAQ teaser ---------- */

.tf-faq-q { font-family: 'Poppins', sans-serif; font-weight: 500; font-size: 1.05rem; margin-bottom: 0.25rem; }
.tf-faq-a { color: var(--tf-text-muted); margin-top: 0; }

/* ---------- WooCommerce polish ---------- */

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: 'Playfair Display', serif;
  font-size: 1.15rem;
}
.woocommerce div.product p.price,
.woocommerce ul.products li.product .price {
  color: var(--tf-primary);
  font-weight: 500;
}
.woocommerce span.onsale {
  background-color: var(--tf-gold);
  color: var(--tf-text);
}

/* ---------- Page heroes (inner pages) ---------- */

.tf-hero--page { padding: 3.5rem 0 3rem; }
.tf-hero--page h1 { font-size: clamp(2.2rem, 4vw, 3.1rem); }

/* ---------- Stats band ---------- */

.tf-stat {
  font-family: 'Playfair Display', serif;
  font-size: 2.3rem;
  font-weight: 600;
  color: var(--tf-gold);
  margin-bottom: 0.15rem;
}
.tf-stat-label { font-size: 0.95rem; margin-top: 0; }

/* ---------- FAQ accordions ---------- */

.tf-faq details {
  border-bottom: 1px solid var(--tf-surface);
  padding: 0.95rem 0;
}
.tf-faq summary {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 1.05rem;
  cursor: pointer;
  list-style-position: outside;
}
.tf-faq summary::marker { color: var(--tf-gold); }
.tf-faq details p { color: var(--tf-text-muted); margin: 0.6rem 0 0; }

/* ---------- Service sections ---------- */

.tf-service { scroll-margin-top: 90px; }
.tf-service h2 { margin-bottom: 0.35rem; }
.tf-service .tf-service-tag {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 1.25rem;
  color: var(--tf-primary);
  margin-top: 0;
}

/* ---------- Channel cards (Contact) ---------- */

.tf-card .tf-card-icon { font-size: 1.8rem; margin-bottom: 0.4rem; }

/* ---------- Imagery ---------- */

.tf-hero-img {
  max-width: 880px;
  margin: 2.75rem auto 0;
}
.tf-hero-img img {
  width: 100%;
  height: auto;
  border-radius: 16px;
  box-shadow: 0 20px 48px rgba(142, 20, 67, 0.14);
}

/* Card images bleed to the card edges (negates .tf-card padding) */
.tf-card .tf-card-img {
  margin: -2.25rem -1.75rem 1.35rem;
}
.tf-card .tf-card-img img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 11px 11px 0 0;
}

/* Standalone section images */
.tf-img { margin: 2.25rem auto 0; }
.tf-img img {
  width: 100%;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 14px 34px rgba(142, 20, 67, 0.10);
}

/* ---------- Responsive ---------- */

@media (max-width: 768px) {
  .tf-section { padding: 3rem 0; }
  .tf-hero { padding: 3.5rem 0 3rem; }
  .tf-hero h1 { font-size: 2.4rem; }
}