:root {
  --calc-navy: #14213d;
  --calc-navy-dark: #0c1526;
  --calc-green: #2f9e44;
  --calc-green-dark: #21762f;
}

/* Site-wide header styling */
header.wp-block-template-part {
  background-color: var(--calc-navy);
  color: #ffffff;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

header.wp-block-template-part a {
  color: #ffffff;
}

header.wp-block-template-part .wp-block-site-title a,
header.wp-block-template-part .wp-block-site-title {
  color: #ffffff;
  font-weight: 700;
}

header.wp-block-template-part .wp-block-navigation a:hover,
header.wp-block-template-part .wp-block-navigation a:focus {
  color: var(--calc-green);
}

header.wp-block-template-part .wp-block-navigation__responsive-container-open svg {
  fill: #ffffff;
}

/* Homepage intro + category tiles */
.calc-home-intro {
  max-width: 800px;
  margin: 2rem auto 1rem;
  text-align: center;
}

.calc-home-intro h1 {
  color: var(--calc-navy);
}

.calc-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem;
  max-width: 1000px;
  margin: 1.5rem auto 3rem;
  padding: 0 1rem;
}

.calc-tile {
  display: block;
  border: 2px solid var(--calc-navy);
  border-radius: 10px;
  padding: 1.5rem;
  text-decoration: none;
  background: #fff;
  transition: background 0.15s ease, transform 0.15s ease;
}

.calc-tile:hover {
  background: var(--calc-navy);
  transform: translateY(-3px);
}

.calc-tile h2 {
  color: var(--calc-navy);
  margin: 0 0 0.5rem;
  font-size: 1.25rem;
}

.calc-tile p {
  color: #444;
  margin: 0;
}

.calc-tile:hover h2,
.calc-tile:hover p {
  color: #fff;
}

/* Category page link list */
.calc-category-list {
  max-width: 640px;
  margin: 1.5rem auto;
}

.calc-category-list ul {
  list-style: none;
  padding: 0;
}

.calc-category-list li {
  border-bottom: 1px solid #ddd;
}

.calc-category-list a {
  display: block;
  padding: 0.75rem 0.25rem;
  color: var(--calc-navy);
  text-decoration: none;
  font-weight: 600;
}

.calc-category-list a:hover {
  color: var(--calc-green);
}

/* Calculator tool styling */
.Calculatoro-tool {
  max-width: 640px;
  margin: 0 auto 2rem;
  font-size: 1rem;
}

.Calculatoro-intro {
  color: #444;
  margin-bottom: 1rem;
}

.calc-box {
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 1.25rem;
  background: #fafafa;
}

.calc-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.calc-tab {
  padding: 0.5rem 0.9rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  font-size: 0.9rem;
}

.calc-tab.active {
  background: var(--calc-navy);
  border-color: var(--calc-navy);
  color: #fff;
}

.calc-panel {
  display: none;
}

.calc-panel.active {
  display: block;
}

.calc-box label {
  display: block;
  margin-bottom: 0.75rem;
  line-height: 2.2;
}

.calc-box input[type="number"],
.calc-box input[type="text"],
.calc-box select {
  width: 90px;
  padding: 0.35rem 0.5rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 1rem;
}

.calc-box button {
  padding: 0.55rem 1.1rem;
  border: none;
  border-radius: 6px;
  background: var(--calc-navy);
  color: #fff;
  font-size: 0.95rem;
  cursor: pointer;
}

.calc-box button:hover {
  background: var(--calc-green);
}

.calc-result {
  margin-top: 0.9rem;
  font-weight: 600;
  font-size: 1.1rem;
  min-height: 1.4rem;
  color: var(--calc-green-dark);
}

.calc-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
}

.calc-row input {
  flex: 1;
  min-width: 80px;
}

.calc-remove-row {
  background: #d64545 !important;
  padding: 0.35rem 0.6rem !important;
}

.Calculatoro-faq {
  max-width: 640px;
  margin: 2rem auto 0;
}

.Calculatoro-faq-item {
  margin-bottom: 1rem;
}

.Calculatoro-faq-item h3 {
  font-size: 1.05rem;
  margin-bottom: 0.25rem;
}

.Calculatoro-faq-item p {
  color: #444;
  margin: 0;
}