/*
Theme Name: Create Better Things
Theme URI: https://createbetterthings.co.uk
Author: Sam Roberts
Author URI: https://createbetterthings.co.uk
Description: A bold, colourful block theme for Create Better Things. Straight-talking web design, systems, and SEO.
Version: 1.0.0
Requires at least: 6.1
Tested up to: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: create-better-things
Tags: block-theme, custom-colors, custom-menu, editor-style, full-site-editing, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks
*/

/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@600;700&display=swap');

/* Base Styles */
:root {
  --color-black: #000000;
  --color-cyan: #00f5fb;
  --color-slate: #38445e;
  --color-white: #ffffff;
  --color-purple: #9600ff;
  --color-neon-green: #38ff12;
  --color-yellow: #fff100;
  --color-magenta: #ff00e3;
}

* {
  box-sizing: border-box;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Focus Styles */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--color-cyan);
  outline-offset: 2px;
}

/* Skip Link */
.skip-link {
  position: absolute;
  left: 0;
  top: 0;
  background: var(--color-cyan);
  color: var(--color-black);
  padding: 1rem 1.5rem;
  font-weight: 500;
  text-decoration: none;
  transform: translateY(-100%);
  transition: transform 0.3s;
  z-index: 9999;
}

.skip-link:focus {
  transform: translateY(0);
}

/* Custom Border Utilities */
.border-4 {
  border-width: 4px;
  border-style: solid;
}

.border-cyan {
  border-color: var(--color-cyan);
}

.border-purple {
  border-color: var(--color-purple);
}

.border-neon-green {
  border-color: var(--color-neon-green);
}

.border-magenta {
  border-color: var(--color-magenta);
}

.border-yellow {
  border-color: var(--color-yellow);
}

/* Gradient Backgrounds */
.has-purple-magenta-cyan-gradient-background {
  background: linear-gradient(135deg, var(--color-purple) 0%, var(--color-magenta) 50%, var(--color-cyan) 100%);
}

.has-cyan-green-purple-gradient-background {
  background: linear-gradient(135deg, var(--color-cyan) 0%, var(--color-neon-green) 50%, var(--color-purple) 100%);
}

/* Card Hover Effects */
.wp-block-group.service-card {
  transition: all 0.2s ease;
}

.wp-block-group.service-card:hover {
  transform: scale(1.02);
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}

/* Responsive Typography */
@media (max-width: 768px) {
  h1 {
    font-size: 2.5rem !important;
  }

  h2 {
    font-size: 2rem !important;
  }
}

/* Animations - Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Utility Classes */
.rounded-sm {
  border-radius: 2px;
}

.shadow-2xl {
  box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
}

/* Text Balance */
.text-balance {
  text-wrap: balance;
}