/*!
 * Thunder Coaches - Professional Coach & Minibus Hire WordPress Theme
 *
 * Theme Name:       Thunder Coaches
 * Theme URI:        https://thundercoaches.co.uk
 * Author:           Thunder Coaches
 * Author URI:       https://thundercoaches.co.uk
 * Description:      A professional, fully-responsive WordPress theme for coach and minibus hire services with booking integration, modern design, and SEO optimization.
 * Version:          1.0.0
 * Requires at least: 5.9
 * Requires PHP:     7.4
 * License:          GPL-2.0-or-later
 * License URI:      https://www.gnu.org/licenses/gpl-2.0-or-later.html
 * Text Domain:      thunder-coaches
 * Domain Path:      /languages
 * Tags:             transport, coach-hire, minibus-hire, business, services, booking, responsive, custom-colors
 *
 * © 2026 Thunder Coaches. All rights reserved.
 */

/* ===========================
   DESIGN SYSTEM VARIABLES
   =========================== */
:root {
  --color-primary:             #0a1628;
  --color-primary-container:   #0a1628;
  --color-on-primary:          #ffffff;
  --color-on-primary-container:#79849b;
  --color-secondary:           #F5A623;
  --color-surface:             #f7f9fd;
  --color-surface-low:         #f2f4f8;
  --color-surface-container:   #eceef2;
  --color-surface-white:       #ffffff;
  --color-on-surface:          #191c1f;
  --color-on-surface-variant:  #45474c;
  --color-outline:             #75777d;
  --color-outline-variant:     #c5c6cd;
  --font-display:              'Poppins', sans-serif;
  --font-body:                 'Poppins', sans-serif;
  --radius-sm:                 0.25rem;
  --radius:                    0.5rem;
  --radius-md:                 0.75rem;
  --radius-lg:                 1rem;
  --radius-xl:                 1.5rem;
}

/* ===========================
   BASE
   =========================== */
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--color-on-surface);
  background-color: var(--color-surface);
  overflow-x: hidden;
}
h1,h2,h3,h4,h5,h6 { font-family: var(--font-display); font-weight: 600; }
h1 { font-weight: 700; }
h2 { font-weight: 600; }

/* ===========================
   MATERIAL SYMBOLS
   =========================== */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
}
.material-symbols-outlined.filled {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ===========================
   BOOTSTRAP ICONS OVERRIDE
   =========================== */
.bi { vertical-align: middle; }

/* ===========================
   COLOUR UTILITIES
   =========================== */
.bg-secondary           { background-color: var(--color-secondary) !important; }
.bg-surface             { background-color: var(--color-surface) !important; }
.bg-surface-low         { background-color: var(--color-surface-low) !important; }
.text-primary-container { color: var(--color-primary-container) !important; }
.text-secondary         { color: var(--color-secondary) !important; }
.text-on-surface-variant{ color: var(--color-on-surface-variant) !important; }
.text-on-primary-container { color: var(--color-on-primary-container) !important; }
.border-outline-variant { border-color: rgba(197,198,205,0.3) !important; }

/* ===========================
   TYPOGRAPHY
   =========================== */
.text-xxs { font-size: 10px; letter-spacing: 0.1em; }

/* ===========================
   WORDPRESS-SPECIFIC RESETS
   =========================== */
.wp-container-* {
  max-width: 100%;
}

.wp-block-image {
  margin: 1.5em 0;
}

.wp-block-image img {
  max-width: 100%;
  height: auto;
}

.wp-block-button__link {
  background-color: var(--color-primary-container);
  color: var(--color-on-primary);
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: filter 0.2s;
}

.wp-block-button__link:hover {
  filter: brightness(1.1);
}

.wp-block-separator {
  border-color: var(--color-outline-variant);
}

/* WordPress Editor Classes */
.alignleft { float: left; margin-right: 1.5em; }
.alignright { float: right; margin-left: 1.5em; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }

/* Skip Link */
.skip-link {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

.skip-link:focus {
  top: 0;
  left: 0;
  z-index: 9999;
}