/*
Theme Name: Gaming Keyboards
Theme URI: https://www.gamingkeyboards.net/
Description: Kadence child theme for an affiliate-focused gaming keyboard publication.
Author: Gaming Keyboards
Author URI: https://www.gamingkeyboards.net/
Template: kadence
Version: 1.0.0
Text Domain: gaming-keyboards
Requires at least: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

:root {
  --gk-ink: #111827;
  --gk-muted: #5b6472;
  --gk-surface: #f5f7fa;
  --gk-line: #dfe4ea;
  --gk-accent: #d7263d;
  --gk-accent-dark: #a9162a;
  --gk-rating: #f59e0b;
  --gk-radius: 12px;
}

.gk-section {
  padding-block: clamp(2.5rem, 6vw, 5.5rem);
}

.gk-card {
  height: 100%;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--gk-line);
  border-radius: var(--gk-radius);
  background: #fff;
  box-shadow: 0 12px 32px rgb(17 24 39 / 8%);
}

.gk-eyebrow {
  margin-bottom: .65rem;
  color: var(--gk-accent);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.gk-rating {
  color: var(--gk-rating);
  font-weight: 800;
}

.gk-price {
  color: var(--gk-ink);
  font-size: 1.35rem;
  font-weight: 800;
}

.gk-disclosure {
  padding: .9rem 1rem;
  border-inline-start: 4px solid var(--gk-accent);
  background: #fff5f6;
  color: var(--gk-muted);
  font-size: .9rem;
}

.gk-specs {
  border-top: 1px solid var(--gk-line);
}

.gk-specs > * {
  margin: 0;
  padding: .65rem 0;
  border-bottom: 1px solid var(--gk-line);
}

.gk-button .wp-block-button__link {
  border-radius: 8px;
  background: var(--gk-accent);
  font-weight: 800;
}

.gk-button .wp-block-button__link:hover,
.gk-button .wp-block-button__link:focus {
  background: var(--gk-accent-dark);
}

.gk-comparison table {
  border: 1px solid var(--gk-line);
}

.gk-comparison th {
  background: var(--gk-ink);
  color: #fff;
}

.gk-comparison td,
.gk-comparison th {
  padding: .9rem;
  border-color: var(--gk-line);
}

.gk-pros {
  border-top: 4px solid #16805b;
}

.gk-cons {
  border-top: 4px solid var(--gk-accent);
}

@media (max-width: 781px) {
  .gk-card {
    padding: 1.15rem;
  }

  .gk-comparison {
    overflow-x: auto;
  }
}