/*
Theme Name: The Relative Detective
Theme URI: https://therelativedetective.com
Description: A custom Kadence child theme for The Relative Detective, a warm genealogy brand helping curious people uncover their family stories.
Author: The Relative Detective
Author URI: https://therelativedetective.com
Template: kadence
Version: 1.0.0
Text Domain: the-relative-detective
*/

/* ======================================================
   The Relative Detective Brand Colors
   ====================================================== */

:root {
  --trd-deep-teal: #2F5F5B;
  --trd-soft-sage: #AFC7B5;
  --trd-warm-cream: #F7F0DF;
  --trd-antique-gold: #C89B4B;
  --trd-parchment-tan: #D8C3A5;
  --trd-dark-espresso: #3A2A22;
  --trd-muted-cocoa: #6B4F3F;
  --trd-dusty-rose: #B47B68;
  --trd-ink-navy: #263A40;
  --trd-light-linen: #FBF7EC;
}

/* ======================================================
   Basic Site Styling
   ====================================================== */

body {
  background-color: var(--trd-warm-cream);
  color: var(--trd-dark-espresso);
}

a {
  color: var(--trd-deep-teal);
}

a:hover {
  color: var(--trd-antique-gold);
}

/* ======================================================
   Headings
   ====================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--trd-deep-teal);
}

/* ======================================================
   Header / Navigation - Kadence
   ====================================================== */

.site-header,
#masthead {
  background-color: var(--trd-light-linen);
  border-bottom: 1px solid rgba(58, 42, 34, 0.12);
}

.main-navigation .primary-menu-container > ul > li.menu-item > a,
.header-navigation .header-menu-container ul ul li.menu-item > a,
.header-navigation .header-menu-container ul li.menu-item > a {
  color: var(--trd-dark-espresso);
  font-weight: 600;
}

.main-navigation .primary-menu-container > ul > li.menu-item > a:hover,
.header-navigation .header-menu-container ul li.menu-item > a:hover {
  color: var(--trd-deep-teal);
}

/* ======================================================
   Buttons - Kadence + WordPress + WooCommerce
   ====================================================== */

.wp-block-button__link,
.wp-element-button,
button,
input[type="submit"],
input[type="button"],
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
  background-color: var(--trd-deep-teal);
  color: var(--trd-light-linen);
  border-radius: 999px;
  padding: 12px 24px;
  font-weight: 700;
  border: none;
  text-decoration: none;
}

.wp-block-button__link:hover,
.wp-element-button:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
  background-color: var(--trd-ink-navy);
  color: var(--trd-light-linen);
}

/* Add this CSS class to a button block for gold buttons */
.trd-button-secondary .wp-block-button__link,
.trd-button-secondary .wp-element-button {
  background-color: var(--trd-antique-gold);
  color: var(--trd-dark-espresso);
}

.trd-button-secondary .wp-block-button__link:hover,
.trd-button-secondary .wp-element-button:hover {
  background-color: var(--trd-dusty-rose);
  color: var(--trd-light-linen);
}

/* ======================================================
   Footer - Kadence
   ====================================================== */

.site-footer,
#colophon {
  background-color: var(--trd-deep-teal);
  color: var(--trd-light-linen);
}

.site-footer a,
#colophon a {
  color: var(--trd-antique-gold);
}

.site-footer a:hover,
#colophon a:hover {
  color: var(--trd-light-linen);
}

/* ======================================================
   Cards / Content Boxes
   Add class "trd-card" to Kadence Row, Column, or Group blocks
   ====================================================== */

.trd-card {
  background-color: var(--trd-light-linen);
  border: 1px solid rgba(58, 42, 34, 0.12);
  border-radius: 18px;
  padding: 28px;
  box-shadow: 0 10px 30px rgba(58, 42, 34, 0.08);
}

.trd-card h3,
.trd-card h2 {
  color: var(--trd-deep-teal);
}

.trd-card p {
  color: var(--trd-muted-cocoa);
}

/* ======================================================
   Section Background Utility Classes
   Add these classes to Kadence Row Layout blocks
   ====================================================== */

.trd-section-cream {
  background-color: var(--trd-warm-cream);
}

.trd-section-linen {
  background-color: var(--trd-light-linen);
}

.trd-section-sage {
  background-color: var(--trd-soft-sage);
}

.trd-section-parchment {
  background-color: var(--trd-parchment-tan);
}

.trd-section-teal {
  background-color: var(--trd-deep-teal);
  color: var(--trd-light-linen);
}

.trd-section-teal h1,
.trd-section-teal h2,
.trd-section-teal h3,
.trd-section-teal h4,
.trd-section-teal h5,
.trd-section-teal h6 {
  color: var(--trd-light-linen);
}

/* ======================================================
   Decorative Accent
   Add an HTML block with <div class="trd-gold-divider"></div>
   ====================================================== */

.trd-gold-divider {
  width: 90px;
  height: 3px;
  background-color: var(--trd-antique-gold);
  margin: 20px auto;
  border-radius: 999px;
}

/* ======================================================
   Forms
   ====================================================== */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="search"],
textarea,
select {
  border: 1px solid rgba(58, 42, 34, 0.25);
  border-radius: 10px;
  background-color: var(--trd-light-linen);
  color: var(--trd-dark-espresso);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
  border-color: var(--trd-deep-teal);
  outline: none;
  box-shadow: 0 0 0 2px rgba(47, 95, 91, 0.15);
}

/* ======================================================
   Blog / The Case Files
   ====================================================== */

.entry,
.post,
.type-post {
  border-radius: 18px;
}

.content-bg,
.entry-content-wrap {
  background-color: var(--trd-light-linen);
}

.entry-title,
.entry-title a {
  color: var(--trd-deep-teal);
}

.entry-title a:hover {
  color: var(--trd-antique-gold);
}

.entry-meta,
.entry-meta a {
  color: var(--trd-muted-cocoa);
}

/* ======================================================
   WooCommerce
   ====================================================== */

.woocommerce ul.products li.product {
  background-color: var(--trd-light-linen);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 10px 25px rgba(58, 42, 34, 0.08);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  color: var(--trd-deep-teal);
}

.woocommerce div.product .product_title {
  color: var(--trd-deep-teal);
}

.woocommerce span.onsale {
  background-color: var(--trd-antique-gold);
  color: var(--trd-dark-espresso);
}

/* ======================================================
   Mobile Tweaks
   ====================================================== */

@media (max-width: 768px) {
  .trd-card {
    padding: 22px;
  }

  .wp-block-button__link,
  .wp-element-button,
  button,
  input[type="submit"],
  input[type="button"],
  .woocommerce a.button,
  .woocommerce button.button,
  .woocommerce input.button {
    width: 100%;
    text-align: center;
  }
}