/*
Theme Name:   Xplicit Tech Base
Theme URI:    https://xplicittechsolutions.com
Description:  Base child theme by Xplicit Tech Solutions. Built on Hello Elementor.
Author:       Xplicit Tech Solutions
Author URI:   https://xplicittechsolutions.com
Template:     hello-elementor
Version:      1.0.0
Text Domain:  xts-base

License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
*/

/* ============================================================
   XPLICIT TECH BASE — Child Theme of Hello Elementor
   Developed by Xplicit Tech Solutions
   https://xplicittechsolutions.com
   ============================================================

   HOW TO USE FOR A NEW CLIENT:
   ─────────────────────────────────────────────────────────────
   1. Edit the CLIENT CONFIG block below with the client's
      brand colors and fonts.
   2. Update the @import in functions.php with the correct
      Google Fonts URL for the chosen fonts.
   3. Deploy via WP-CLI or upload as a zip.
   4. All Elementor sections and WPForms will automatically
      inherit these values.
   ============================================================ */


/* ============================================================
   ★ CLIENT CONFIG — EDIT THIS BLOCK PER PROJECT
   ============================================================ */
:root {

  /* --- Brand Colors --- */
  --client-primary:       #2D4A2D;   /* Main brand color — buttons, nav, headings */
  --client-primary-dark:  #1E2E1E;   /* Darker shade — hover states */
  --client-primary-light: #4E7A4E;   /* Lighter shade — accents, icons, labels */
  --client-accent:        #B87820;   /* Accent/highlight color */
  --client-accent-light:  #D4930A;   /* Lighter accent */

  /* --- Neutrals --- */
  --client-white:         #FFFFFF;
  --client-offwhite:      #F7F5F0;   /* Subtle section backgrounds */
  --client-lightgray:     #EEECE7;   /* Photo placeholders, light fills */
  --client-stone:         #D6D0C4;   /* Borders, dividers */
  --client-muted:         #B8CCB8;   /* Muted accents on dark backgrounds */

  /* --- Text --- */
  --client-text-dark:     #1E2E1E;   /* Headings */
  --client-text-body:     #3A4A3A;   /* Body copy */
  --client-text-muted:    #7A8A7A;   /* Captions, meta, placeholder text */

  /* --- Typography --- */
  --client-font-heading:  'Rye', serif;
  --client-font-body:     'Cabin', sans-serif;
  --client-font-serif:    'Libre Baskerville', serif;
}
/* ============================================================
   ★ END CLIENT CONFIG
   ============================================================ */


/* ── GLOBAL RESETS ── */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--client-font-body);
  color: var(--client-text-body);
  background-color: var(--client-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── TYPOGRAPHY ── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--client-font-heading);
  color: var(--client-text-dark);
  line-height: 1.15;
}

p {
  font-family: var(--client-font-body);
  color: var(--client-text-body);
  line-height: 1.75;
}

a {
  color: var(--client-primary-light);
  text-decoration: none;
  transition: color 0.2s ease;
}

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

/* ── ELEMENTOR BUTTON OVERRIDES ── */
.elementor-button {
  font-family: var(--client-font-body) !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
  transition: background 0.2s ease, transform 0.15s ease !important;
}

.elementor-button-wrapper .elementor-button {
  background-color: var(--client-primary) !important;
  color: var(--client-white) !important;
  border: none !important;
}

.elementor-button-wrapper .elementor-button:hover {
  background-color: var(--client-primary-dark) !important;
  transform: translateY(-2px);
}

/* ── ELEMENTOR DEFAULTS ── */
.elementor-widget:last-child {
  margin-bottom: 0;
}

/* Remove Hello Elementor page title on Elementor pages */
.elementor-page .entry-title,
.elementor-page h1.entry-title {
  display: none;
}

/* ── WPFORMS STYLING ── */
/* Automatically inherits client brand colors */

.wpforms-container .wpforms-form input[type=text],
.wpforms-container .wpforms-form input[type=email],
.wpforms-container .wpforms-form input[type=tel],
.wpforms-container .wpforms-form input[type=number],
.wpforms-container .wpforms-form input[type=url],
.wpforms-container .wpforms-form textarea,
.wpforms-container .wpforms-form select {
  background: var(--client-white) !important;
  border: 1px solid var(--client-stone) !important;
  border-radius: 0 !important;
  color: var(--client-text-dark) !important;
  font-family: var(--client-font-body) !important;
  font-size: 0.9rem !important;
  padding: 0.75rem 1rem !important;
  transition: border-color 0.2s ease !important;
  box-shadow: none !important;
}

.wpforms-container .wpforms-form input:focus,
.wpforms-container .wpforms-form textarea:focus,
.wpforms-container .wpforms-form select:focus {
  border-color: var(--client-primary-light) !important;
  outline: none !important;
  box-shadow: none !important;
}

.wpforms-container .wpforms-form .wpforms-field-label {
  font-family: var(--client-font-body) !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--client-primary-light) !important;
}

.wpforms-container .wpforms-form button[type=submit],
.wpforms-container .wpforms-form .wpforms-submit {
  background-color: var(--client-primary) !important;
  color: var(--client-white) !important;
  border: none !important;
  border-radius: 0 !important;
  font-family: var(--client-font-body) !important;
  font-weight: 700 !important;
  font-size: 0.8rem !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  padding: 1rem 2rem !important;
  transition: background 0.2s ease !important;
  width: 100% !important;
  cursor: pointer !important;
}

.wpforms-container .wpforms-form button[type=submit]:hover,
.wpforms-container .wpforms-form .wpforms-submit:hover {
  background-color: var(--client-primary-dark) !important;
}

.wpforms-confirmation-container-full,
.wpforms-container .wpforms-confirmation-container {
  background: var(--client-offwhite) !important;
  border-left: 4px solid var(--client-primary) !important;
  color: var(--client-text-dark) !important;
  font-family: var(--client-font-body) !important;
  padding: 1.5rem !important;
  border-radius: 0 !important;
}

/* ── UTILITY CLASSES ── */
/* Use these in Elementor's Custom CSS field on any widget */

.xts-label {
  font-family: var(--client-font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--client-primary-light);
}

.xts-serif {
  font-family: var(--client-font-serif);
  font-style: italic;
}

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

.xts-section-light {
  background-color: var(--client-offwhite);
}

.xts-section-dark {
  background-color: var(--client-primary);
  color: var(--client-white);
}

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
  .xts-hide-mobile {
    display: none !important;
  }
}

@media (min-width: 769px) {
  .xts-hide-desktop {
    display: none !important;
  }
}