/*
 Theme Name:   Turning Point Fitness
 Theme URI:    https://turningpointfit.com
 Description:  Kadence child theme — Turning Point Fitness brand styles
 Author:       AE Marketing Consultant
 Template:     kadence
 Version:      1.0.0
 Text Domain:  tpf-child
*/

/*
 * NOTE: Parent theme stylesheet is enqueued programmatically in functions.php.
 * Do NOT add @import here — it causes a double HTTP request.
 * All brand customizations live below.
 */


/* =============================================================================
   1. CSS CUSTOM PROPERTIES (Brand Tokens)
   These are set here as a fallback. Kadence also outputs --global-palette vars.
   ============================================================================= */

:root {
  /* Core Brand — use 20% of the time */
  --tpf-green:          #5da923;
  --tpf-forest:         #1f4d35;
  --tpf-black:          #1d1d1b;
  --tpf-white:          #ffffff;

  /* Elevated Neutrals — use 70% of the time (backgrounds, large spaces) */
  --tpf-sage-gray:      #a9b3a2;
  --tpf-linen:          #d9d2c5;
  --tpf-muted-green:    #7a9e82;

  /* Accents — use 10% of the time */
  --tpf-blush:          #d7b7ae;
  --tpf-dusty-sage:     #a7b2a0;
  --tpf-rose:           #e59a9a;

  /* Typography */
  --tpf-font-headline:  'Cormorant Garamond', Georgia, serif;
  --tpf-font-ui:        var(--global-body-font-family);
  --tpf-font-body:      var(--global-body-font-family);
}


/* =============================================================================
   2. BASE TYPOGRAPHY OVERRIDES
   ============================================================================= */

body,
p,
li,
td,
input,
textarea,
select {
  font-family: var(--tpf-font-body);
  color: var(--tpf-black);
  font-size: 1rem;
  line-height: 1.65;
}

h1,
h2,
.tpf-headline-serif {
  font-family: var(--tpf-font-headline);
  font-weight: 400;
  line-height: 1.15;
  color: var(--tpf-black);
}

h3,
h4,
h5,
h6 {
  font-family: var(--tpf-font-body);
  font-weight: 600;
  line-height: 1.3;
}

/* Eyebrow / label text — uppercase tracked */
.tpf-eyebrow,
.wp-block-kadence-advancedheading.tpf-eyebrow {
  font-family: var(--tpf-font-ui);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tpf-forest);
  margin-bottom: 0.5rem;
}

/* Subheadings in forest green uppercase (per mockup) */
.tpf-subheading {
  font-family: var(--tpf-font-ui);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tpf-forest);
}


/* =============================================================================
   3. SITE-WIDE LAYOUT
   ============================================================================= */

/* Default page background — warm linen per mockup */
body {
  background-color: var(--tpf-linen);
}

/* Content areas stay white */
.entry-content,
.kadence-inner-column-inner,
.kb-row-layout-wrap {
  background-color: var(--tpf-white);
}


/* =============================================================================
   4. HEADER
   ============================================================================= */

/* Site wordmark */
.site-branding .site-title,
.site-branding .site-title a {
  font-family: var(--tpf-font-headline);
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--tpf-black);
  text-decoration: none;
  letter-spacing: 0.02em;
}

.site-branding .site-title a:hover {
  color: var(--tpf-forest);
}

/* Header background */
#masthead,
.site-header-wrap {
  background-color: var(--tpf-white);
}

/* Navigation links */
#site-navigation .nav-link-wrap a,
.kadence-navigation .menu-item a {
  font-family: var(--tpf-font-ui);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tpf-black);
}

#site-navigation .nav-link-wrap a:hover,
.kadence-navigation .menu-item a:hover {
  color: var(--tpf-forest);
}

/* Sticky header — subtle shadow on scroll */
.kadence-sticky-header.is-sticky #masthead {
  box-shadow: 0 2px 12px rgba(29, 29, 27, 0.08);
}


/* =============================================================================
   5. BUTTONS
   ============================================================================= */

/* ----- Primary: Forest Green ----- */
.wp-block-button.is-style-fill .wp-block-button__link,
.wp-block-button:not([class*="is-style"]) .wp-block-button__link,
.button,
button,
input[type="submit"],
.kadence-button,
.tpf-btn-primary {
  background-color: var(--tpf-forest) !important;
  color: var(--tpf-white) !important;
  font-family: var(--tpf-font-ui);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 0;
  border: none;
  padding: 14px 28px;
  transition: background-color 0.2s ease, opacity 0.2s ease;
  cursor: pointer;
}

.wp-block-button.is-style-fill .wp-block-button__link:hover,
.wp-block-button:not([class*="is-style"]) .wp-block-button__link:hover,
.button:hover,
button:hover,
input[type="submit"]:hover,
.tpf-btn-primary:hover {
  background-color: #163d28 !important; /* forest darkened ~15% */
  color: var(--tpf-white) !important;
}

/* ----- Secondary: Bright Green ----- */
.wp-block-button.is-style-secondary .wp-block-button__link,
.tpf-btn-secondary {
  background-color: var(--tpf-green) !important;
  color: var(--tpf-white) !important;
  font-family: var(--tpf-font-ui);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 0;
  border: none;
  padding: 14px 28px;
  transition: background-color 0.2s ease;
}

.wp-block-button.is-style-secondary .wp-block-button__link:hover,
.tpf-btn-secondary:hover {
  background-color: #4d9119 !important;
  color: var(--tpf-white) !important;
}

/* ----- Outline / Ghost variant ----- */
.wp-block-button.is-style-outline .wp-block-button__link,
.tpf-btn-outline {
  background-color: transparent !important;
  color: var(--tpf-forest) !important;
  border: 2px solid var(--tpf-forest) !important;
  font-family: var(--tpf-font-ui);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 0;
  padding: 12px 26px;
  transition: all 0.2s ease;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover,
.tpf-btn-outline:hover {
  background-color: var(--tpf-forest) !important;
  color: var(--tpf-white) !important;
}

/* ----- Header CTA button ----- */
.header-menu-container .button-item a,
.kadence-header-button a {
  background-color: var(--tpf-forest) !important;
  color: var(--tpf-white) !important;
  font-family: var(--tpf-font-ui);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 0;
  padding: 10px 22px;
}


/* =============================================================================
   6. SECTION BACKGROUND UTILITY CLASSES
   (Applied to Kadence Row Layouts in the editor)
   ============================================================================= */

/* Linen — default page background */
.tpf-bg-linen,
.tpf-bg-linen > .kb-row-layout-wrap {
  background-color: var(--tpf-linen) !important;
}

/* Forest Green dark section */
.tpf-bg-forest,
.tpf-bg-forest > .kb-row-layout-wrap {
  background-color: var(--tpf-forest) !important;
  color: var(--tpf-white) !important;
}
.tpf-bg-forest h1,
.tpf-bg-forest h2,
.tpf-bg-forest h3,
.tpf-bg-forest p,
.tpf-bg-forest li {
  color: var(--tpf-white) !important;
}

/* White card section */
.tpf-bg-white {
  background-color: var(--tpf-white) !important;
}

/* Sage gray section */
.tpf-bg-sage {
  background-color: var(--tpf-sage-gray) !important;
}


/* =============================================================================
   7. CARD / OVERLAY COMPONENT
   Matches the white card overlapping hero image pattern in the mockups
   ============================================================================= */

.tpf-card-overlay {
  background: var(--tpf-white);
  padding: 3rem 3.5rem;
}

.tpf-card-overlay h2 {
  font-family: var(--tpf-font-headline);
  font-size: 2.8rem;
  font-weight: 400;
  margin-bottom: 1.25rem;
}

.tpf-card-overlay .tpf-eyebrow {
  margin-bottom: 0.75rem;
}

@media (max-width: 768px) {
  .tpf-card-overlay {
    padding: 2rem;
  }
  .tpf-card-overlay h2 {
    font-size: 2rem;
  }
}


/* =============================================================================
   8. HERO SECTION
   ============================================================================= */

.tpf-hero {
  position: relative;
  min-height: 80vh;
  display: flex;
  align-items: center;
}

.tpf-hero-content {
  position: relative;
  z-index: 2;
  background: var(--tpf-white);
  padding: 3rem 3.5rem;
  max-width: 560px;
}

.tpf-hero-content h1 {
  font-size: clamp(2.2rem, 4vw, 3.6rem);
  margin-bottom: 1rem;
}

.tpf-hero-buttons {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}


/* =============================================================================
   9. FOOTER
   ============================================================================= */

#colophon,
.site-footer {
  background-color: var(--tpf-forest);
  color: var(--tpf-white);
  padding: 2.5rem 0 1.5rem;
}

.site-footer a,
.site-footer .footer-nav a {
  color: rgba(255,255,255,0.8);
  font-family: var(--tpf-font-ui);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-decoration: none;
  text-transform: uppercase;
}

.site-footer a:hover,
.site-footer .footer-nav a:hover {
  color: var(--tpf-white);
}

.site-footer .site-info {
  font-family: var(--tpf-font-ui);
  font-size: 0.72rem;
  color: rgba(255,255,255,0.6);
  text-align: center;
  margin-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,0.15);
  padding-top: 1.25rem;
}


/* =============================================================================
   10. MEMBERPRESS OVERRIDES
   ============================================================================= */

/* Account page headings */
.mepr-account-page h2,
.mepr-login-page h2,
.mepr-registration-page h2 {
  font-family: var(--tpf-font-headline);
  font-weight: 400;
}

/* MemberPress buttons inherit brand */
.mepr-submit,
.mepr_btn,
input.mepr-submit {
  background-color: var(--tpf-forest) !important;
  color: var(--tpf-white) !important;
  font-family: var(--tpf-font-ui);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 0;
  border: none;
  padding: 12px 24px;
}

/* MemberPress form inputs */
.mepr-form input[type="text"],
.mepr-form input[type="email"],
.mepr-form input[type="password"],
.mepr-form select {
  border: 1px solid var(--tpf-sage-gray);
  border-radius: 0;
  font-family: var(--tpf-font-body);
  padding: 10px 14px;
  color: var(--tpf-black);
}

.mepr-form input:focus,
.mepr-form select:focus {
  border-color: var(--tpf-forest);
  outline: none;
  box-shadow: 0 0 0 2px rgba(31, 77, 53, 0.15);
}

/* Membership plan cards */
.mepr-price-box {
  border: 1px solid var(--tpf-sage-gray);
  border-top: 4px solid var(--tpf-forest);
  border-radius: 0;
}


/* =============================================================================
   11. FORMS (Contact, General)
   ============================================================================= */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="number"],
textarea,
select {
  border: 1px solid var(--tpf-sage-gray);
  border-radius: 0;
  font-family: var(--tpf-font-body);
  color: var(--tpf-black);
  padding: 10px 14px;
  transition: border-color 0.2s ease;
  width: 100%;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--tpf-forest);
  outline: none;
  box-shadow: 0 0 0 2px rgba(31, 77, 53, 0.12);
}

label {
  font-family: var(--tpf-font-ui);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tpf-black);
  margin-bottom: 0.35rem;
  display: block;
}


/* =============================================================================
   12. WOOCOMMERCE / MEMBERPRESS PRICING TABLE
   ============================================================================= */

.wp-block-kadence-pricelist .kb-price-list-item,
.tpf-pricing-card {
  border: 1px solid var(--tpf-sage-gray);
  border-top: 3px solid var(--tpf-forest);
  background: var(--tpf-white);
}

/* Highlight card variant */
.tpf-pricing-card.is-featured {
  border-top-color: var(--tpf-green);
  box-shadow: 0 8px 32px rgba(29, 29, 27, 0.1);
}


/* =============================================================================
   13. MISCELLANEOUS UTILITIES
   ============================================================================= */

/* Horizontal rule */
hr.tpf-divider {
  border: none;
  border-top: 1px solid var(--tpf-sage-gray);
  margin: 2.5rem 0;
}

/* Dark divider (used under hero subheadings per mockup) */
hr.tpf-divider-dark {
  border: none;
  border-top: 2px solid var(--tpf-black);
  width: 60px;
  margin: 1rem 0 1.5rem;
}

/* Accent text color */
.tpf-text-forest { color: var(--tpf-forest); }
.tpf-text-green  { color: var(--tpf-green);  }
.tpf-text-white  { color: var(--tpf-white);  }

/* Text size helpers */
.tpf-small {
  font-size: 0.85rem;
  color: rgba(29,29,27,0.7);
}

/* Screen reader only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}