/*
Theme Name:     Cannabis-Anbau.de
Theme URI:      n/a
Template:       kadence
Author:         DMPH Marketing GmbH
Author URI:     n/a
Description:    Child Theme Description
Version:        1.0
License:        GNU General Public License v3.0 (or later)
License URI:    https://www.gnu.org/licenses/gpl-3.0.html
*/
/* THC-Abbaurechner Styles */
:root {
  --thc-primary-color: #1b5e20;  /* Dunkleres Grün */
  --thc-secondary-color: #2e7d32; /* Mittleres Dunkelgrün */
  --thc-warning-color: #e65100; /* Orange statt Rot */
  --thc-info-color: #4e342e;     /* Braun statt Blau */
  --thc-danger-color: #B71C1C;    /* Rot für Gefahr */
  --thc-light-bg: #f5f5f5;
  --thc-border-radius: 8px;
  --thc-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  --thc-text-dark: #212121;
}

.thc-calculator-container {
  background-color: var(--thc-light-bg);
  border-radius: var(--thc-border-radius);
  padding: 25px;
  margin-bottom: 30px;
  box-shadow: var(--thc-box-shadow);
  color: var(--thc-text-dark); /* Ensure text color contrast */
}

.thc-calculator-container h3 {
    margin-top: 0;
    margin-bottom: 20px;
    color: var(--thc-primary-color);
}

.thc-form-group {
  margin-bottom: 20px;
}

.thc-calculator-container label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: var(--thc-text-dark); /* Ensure label color contrast */
}

.thc-calculator-container input[type="number"],
.thc-calculator-container input[type="datetime-local"],
.thc-calculator-container select {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
  box-sizing: border-box; /* Include padding and border in element's total width and height */
  background-color: #fff; /* Ensure background for contrast */
  color: var(--thc-text-dark); /* Ensure text color */
}

/* Style for validation errors */
.thc-calculator-container input.error,
.thc-calculator-container select.error {
  border-color: var(--thc-danger-color); /* Use a red color for error indication */
  background-color: #FFCDD2;
}

.thc-calculator-container button[type="button"] {
  background-color: var(--thc-primary-color);
  color: white;
  border: none;
  padding: 12px 20px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  transition: background-color 0.3s;
  display: inline-block; /* Ensure button behaves correctly */
  width: auto; /* Override potential full width */
}

.thc-calculator-container button[type="button"]:hover {
  background-color: var(--thc-secondary-color);
}

/* WICHTIG: Ergebnis-Container anfangs verstecken */
.thc-result-container {
  margin-top: 30px;
  padding: 20px;
  border-radius: var(--thc-border-radius);
  background-color: white;
  box-shadow: var(--thc-box-shadow);
  display: none; /* Initially hidden */
}

/* Klasse, um den Ergebnis-Container sichtbar zu machen */
.thc-result-container.visible {
  display: block; /* Make visible when calculated */
}

.thc-gauge-container {
  text-align: center;
  margin: 20px 0 30px 0; /* Adjusted margin */
}

.thc-gauge {
  width: 180px; /* Slightly smaller */
  height: 180px;
  position: relative;
  margin: 0 auto;
  display: block; /* Ensure it behaves as a block */
}

.thc-gauge-value {
    font-size: 22px; /* Adjusted size */
    font-weight: bold;
    fill: var(--thc-text-dark); /* SVG uses fill, not color */
}

/* Make sure the gauge circle transition is smooth */
#gauge-circle {
    transition: stroke-dashoffset 1s ease-in-out, stroke 0.5s linear;
}


.thc-status-indicator {
  margin-top: 20px;
  padding: 15px;
  border-radius: var(--thc-border-radius);
  text-align: center;
  font-weight: bold;
  border: 2px solid transparent; /* Base border */
}

.thc-status-safe {
  background-color: #C8E6C9;
  color: var(--thc-primary-color);
  border-color: var(--thc-primary-color);
}

.thc-status-warning {
  background-color: #FFECB3;
  color: var(--thc-warning-color);
  border-color: var(--thc-warning-color);
}

.thc-status-danger {
  background-color: #FFCDD2;
  color: var(--thc-danger-color);
  border-color: var(--thc-danger-color);
}

.thc-time-prediction {
  margin-top: 25px;
  font-size: 16px; /* Slightly smaller */
  text-align: center;
  color: var(--thc-text-dark);
  padding: 10px;
  background-color: #f9f9f9; /* Light background */
  border-radius: 4px;
}

.thc-info-box {
  background-color: #EFEBE9; /* Braun statt Blau */
  border-left: 4px solid var(--thc-info-color);
  padding: 15px;
  margin: 25px 0; /* Adjusted margin */
  border-radius: 0 var(--thc-border-radius) var(--thc-border-radius) 0;
}

.thc-info-box h3 {
  margin-top: 0;
  color: var(--thc-info-color);
  margin-bottom: 10px; /* Added margin */
}

.thc-progressbar {
  width: 100%;
  height: 20px;
  background-color: #e0e0e0;
  border-radius: 10px;
  margin: 20px 0;
  overflow: hidden;
}

.thc-progressbar-inner {
  height: 100%;
  background-color: var(--thc-primary-color);
  width: 0%;
  transition: width 1s ease-in-out;
  border-radius: 10px; /* Ensure inner bar is also rounded */
}

.thc-factors-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin: 25px 0;
}

.thc-factor-card {
  background-color: white;
  border-radius: var(--thc-border-radius);
  padding: 15px;
  box-shadow: var(--thc-box-shadow);
  border: 1px solid #ddd;
}

.thc-factor-card h3 {
  margin-top: 0;
  font-size: 16px; /* Adjusted size */
  color: var(--thc-text-dark);
  margin-bottom: 8px; /* Added margin */
}

.thc-factor-card p {
  color: var(--thc-text-dark);
  font-size: 14px; /* Smaller text for details */
  margin-bottom: 0; /* Remove default paragraph margin */
}

.thc-disclaimers {
  font-size: 13px; /* Smaller disclaimer text */
  margin-top: 30px;
  color: #555;
  background-color: #f9f9f9;
  padding: 15px;
  border-radius: var(--thc-border-radius);
  border: 1px solid #eee;
}

.thc-disclaimers h3 {
  color: var(--thc-text-dark);
  margin-top: 0;
  font-size: 15px; /* Slightly smaller heading */
  margin-bottom: 10px; /* Added margin */
}