/*
Theme Name: Humonolgy
Theme URI: https://humonolgy.com
Author: Humonolgy Design Studio
Author URI: https://humonolgy.com
Description: A premium, modern, accessible WordPress theme for Humonolgy psychology, counseling, and mental health practices. Features customizable hero, animated statistics, custom post types for services, team, testimonials, FAQs, and gallery, integrated wellness tools, and Google Apps Script booking integration.
Version: 1.1.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: steadierground
Tags: mental-health, psychology, therapy, medical, clean, modern, accessibility-ready, custom-menu, featured-images, theme-options, translation-ready

Humonolgy WordPress Theme, (C) 2026.
Distributed under the terms of the GNU GPL.
*/

:root {
  --sg-teal: #00B8A9;
  --sg-teal-dark: #008F83;
  --sg-teal-light: #E6F8F6;
  --sg-teal-glow: rgba(0, 184, 169, 0.15);
  
  --sg-navy: #1A2B5F;
  --sg-navy-dark: #111C40;
  --sg-navy-light: #2A3F80;
  --sg-navy-muted: rgba(26, 43, 95, 0.75);

  --sg-cream: #FAF9F6;
  --sg-sand: #F4F1EA;
  --sg-sand-light: #FAF8F5;
  --sg-white: #FFFFFF;
  
  --sg-charcoal: #2D3748;
  --sg-charcoal-light: #4A5568;
  --sg-slate: #64748B;
  --sg-border: #E2E8F0;
  --sg-border-light: #EEF2F6;
  --sg-error: #E53E3E;
  --sg-success: #38A169;

  --sg-font-heading: 'Playfair Display', Georgia, serif;
  --sg-font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --sg-radius-sm: 8px;
  --sg-radius-md: 14px;
  --sg-radius-lg: 22px;
  --sg-radius-pill: 9999px;

  --sg-shadow-sm: 0 2px 8px rgba(26, 43, 95, 0.04);
  --sg-shadow-md: 0 8px 24px rgba(26, 43, 95, 0.08);
  --sg-shadow-lg: 0 16px 40px rgba(26, 43, 95, 0.12);
  --sg-shadow-modal: 0 24px 60px rgba(17, 28, 64, 0.25);

  --sg-transition-fast: 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  --sg-transition-normal: 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  --sg-transition-slow: 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Base styles are detailed in assets/css/main.css */
@import url("assets/css/main.css");

/* ==========================================================================
   DIRECT HIGH-SPECIFICITY COMMENT SECTION ENHANCEMENT
   Ensures WordPress comments never display unstyled, floated, or cramped inputs
   ========================================================================== */

#respond,
.comment-respond,
.sg-comment-respond {
  background: #FAF8F5 !important;
  border: 1.5px solid #E2E8F0 !important;
  border-radius: 20px !important;
  padding: 36px 32px !important;
  margin-top: 48px !important;
  box-sizing: border-box !important;
  box-shadow: 0 4px 20px rgba(26, 43, 95, 0.04) !important;
  clear: both !important;
}

@media (max-width: 640px) {
  #respond,
  .comment-respond {
    padding: 24px 18px !important;
    border-radius: 16px !important;
  }
}

#respond *,
.comment-respond * {
  box-sizing: border-box !important;
}

/* Reply Title */
#respond #reply-title,
#respond .comment-reply-title,
.comment-respond .comment-reply-title {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: clamp(1.4rem, 2.6vw, 1.85rem) !important;
  font-weight: 700 !important;
  color: #1A2B5F !important;
  margin: 0 0 8px 0 !important;
  line-height: 1.25 !important;
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}

#respond .comment-notes,
.comment-respond .comment-notes {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 0.88rem !important;
  color: #64748B !important;
  margin: 0 0 24px 0 !important;
  line-height: 1.5 !important;
}

/* Form Grid: Desktop 3 columns for Name, Email, Website */
#respond #commentform,
#respond .comment-form,
.comment-respond #commentform,
.comment-respond .comment-form {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 20px !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

@media (min-width: 768px) {
  #respond #commentform,
  #respond .comment-form,
  .comment-respond #commentform,
  .comment-respond .comment-form {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px 22px !important;
  }
}

/* Force every paragraph in comment form to be a vertical flex column */
#respond p,
#respond #commentform > p,
#respond .comment-form > p,
.comment-respond p {
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  clear: both !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 8px !important;
  text-align: left !important;
}

/* Span Full Width for Comment Textarea, Notes, Cookies, Submit */
#respond .comment-notes,
#respond .comment-form-comment,
#respond .comment-form-cookies-consent,
#respond .form-submit,
#respond .sg-comment-moderation-note {
  grid-column: 1 / -1 !important;
  width: 100% !important;
}

/* Desktop 3 Columns */
#respond .comment-form-author {
  grid-column: 1 !important;
}
#respond .comment-form-email {
  grid-column: 2 !important;
}
#respond .comment-form-url {
  grid-column: 3 !important;
}

@media (max-width: 767px) {
  #respond .comment-form-author,
  #respond .comment-form-email,
  #respond .comment-form-url {
    grid-column: 1 / -1 !important;
  }
}

/* Labels: Stacked cleanly ABOVE input boxes */
#respond label,
#respond #commentform label,
.comment-respond label,
.comment-form label,
.sg-field-label,
.sg-form-label {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  float: none !important;
  clear: both !important;
  width: 100% !important;
  margin: 0 0 6px 0 !important;
  padding: 0 !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  color: #1A2B5F !important;
  text-align: left !important;
  line-height: 1.3 !important;
}

#respond label .required,
.comment-form label .required {
  color: #00B8A9 !important;
  font-weight: 700 !important;
  margin-left: 2px !important;
}

/* Beautiful Input Boxes and Textarea */
#respond input[type="text"],
#respond input[type="email"],
#respond input[type="url"],
#respond textarea,
#commentform input[type="text"],
#commentform input[type="email"],
#commentform input[type="url"],
#commentform textarea,
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea,
.sg-form-input,
.sg-form-textarea {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  float: none !important;
  clear: both !important;
  box-sizing: border-box !important;
  height: 52px !important;
  min-height: 52px !important;
  padding: 13px 18px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 0.95rem !important;
  line-height: 1.5 !important;
  color: #2D3748 !important;
  background: #FFFFFF !important;
  border: 1.5px solid #E2E8F0 !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 5px rgba(26, 43, 95, 0.03) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  outline: none !important;
}

#respond textarea,
#commentform textarea,
.comment-form textarea,
.sg-form-textarea {
  height: auto !important;
  min-height: 140px !important;
  padding: 16px 18px !important;
  resize: vertical !important;
  line-height: 1.6 !important;
}

/* Hover and Focus States */
#respond input[type="text"]:hover,
#respond input[type="email"]:hover,
#respond input[type="url"]:hover,
#respond textarea:hover,
#commentform input[type="text"]:hover,
#commentform input[type="email"]:hover,
#commentform input[type="url"]:hover,
#commentform textarea:hover {
  border-color: #00B8A9 !important;
  background: #FFFFFF !important;
}

#respond input[type="text"]:focus,
#respond input[type="email"]:focus,
#respond input[type="url"]:focus,
#respond textarea:focus,
#commentform input[type="text"]:focus,
#commentform input[type="email"]:focus,
#commentform input[type="url"]:focus,
#commentform textarea:focus,
.sg-form-input:focus,
.sg-form-textarea:focus {
  border-color: #00B8A9 !important;
  background: #FFFFFF !important;
  box-shadow: 0 0 0 4px rgba(0, 184, 169, 0.18) !important;
}

/* Placeholder Styling */
#respond input::placeholder,
#respond textarea::placeholder,
#commentform input::placeholder,
#commentform textarea::placeholder {
  color: #94A3B8 !important;
  opacity: 1 !important;
}

/* Cookies Checkbox: Clean Horizontal Layout */
#respond p.comment-form-cookies-consent,
#commentform p.comment-form-cookies-consent,
.comment-form .comment-form-cookies-consent {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  grid-column: 1 / -1 !important;
  margin-top: 6px !important;
}

#respond p.comment-form-cookies-consent input[type="checkbox"],
#commentform p.comment-form-cookies-consent input[type="checkbox"] {
  width: 20px !important;
  min-width: 20px !important;
  height: 20px !important;
  min-height: 20px !important;
  border-radius: 6px !important;
  accent-color: #00B8A9 !important;
  cursor: pointer !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
}

#respond p.comment-form-cookies-consent label,
#commentform p.comment-form-cookies-consent label {
  display: inline !important;
  margin: 0 !important;
  font-weight: 400 !important;
  font-size: 0.85rem !important;
  color: #64748B !important;
  cursor: pointer !important;
}

/* Submit Button: Teal Pill with High-Contrast Text */
#respond .form-submit,
#commentform .form-submit {
  grid-column: 1 / -1 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  margin-top: 10px !important;
}

#respond input[type="submit"],
#respond button[type="submit"],
#commentform input[type="submit"],
#commentform button[type="submit"],
.comment-form input[type="submit"],
.comment-form button[type="submit"],
.sg-comment-submit-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  background: #00B8A9 !important;
  color: #111C40 !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  padding: 14px 36px !important;
  border-radius: 9999px !important;
  border: none !important;
  cursor: pointer !important;
  box-shadow: 0 4px 14px rgba(0, 184, 169, 0.28) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  height: auto !important;
  min-height: 50px !important;
  width: auto !important;
  text-decoration: none !important;
}

#respond input[type="submit"]:hover,
#respond button[type="submit"]:hover,
#commentform input[type="submit"]:hover,
#commentform button[type="submit"]:hover,
.sg-comment-submit-btn:hover {
  background: #008F83 !important;
  color: #FFFFFF !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 22px rgba(0, 143, 131, 0.35) !important;
}