/**
 * AroundManchester.com - Theme Stylesheet
 * CSS custom properties (variables), colors, dark mode, and spacing
 * 
 * @charset UTF-8
 * @author AroundManchester.com Development Team
 * @version 1.0
 */

@charset "UTF-8";

/* ===== CSS CUSTOM PROPERTIES (VARIABLES) ===== */
:root {
  /* === COLOR VARIABLES === */
  --color-primary: #4a6bb5;
  --color-secondary: #3a5a95;
  --color-tertiary: #2a4a85;
  --color-white: #ffffff;
  --color-black: #000000;
  
  /* Text Colors */
  --color-text-primary: #333333;
  --color-text-secondary: #555555;
  --color-text-muted: #777777;
  --color-medium-gray: #cccccc;
  
  /* === BACKGROUND VARIABLES === */
  --bg-body: #e8e8e8;
  --bg-section-light: #f8f9fa;
  --bg-section-medium: #eef2f7;
  --bg-section-card: #ffffff;
  
  /* === GRADIENT VARIABLES === */
  --gradient-primary: linear-gradient(135deg, #4a6bb5, #3a5a95);
  --gradient-secondary: linear-gradient(135deg, #3a5a95, #2a4a85);
  --gradient-header: linear-gradient(90deg, #4a6bb5, #3a5a95, #2a4a85, #3a5a95, #4a6bb5);
  
  /* === SPACING VARIABLES === */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;
  
  /* === FONT SIZE VARIABLES === */
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;
  --font-size-5xl: 3rem;
  
  /* === BORDER RADIUS VARIABLES === */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-full: 50%;
  
  /* === SHADOW VARIABLES === */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.2);
  
  /* === TRANSITION VARIABLES === */
  --transition-base: all 0.3s ease;
  --transition-fast: all 0.2s ease;
  
  /* === Z-INDEX LAYERS === */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-popover: 600;
  --z-tooltip: 700;
}

/* ===== BASE BODY STYLING ===== */
body {
  color: var(--color-text-primary);
  background-color: var(--bg-body);
}

/* ===== LINK COLORS ===== */
a {
  color: var(--color-primary);
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-secondary);
}

/* ===== SELECTION STYLING ===== */
::selection {
  background-color: var(--color-primary);
  color: var(--color-white);
}

::-moz-selection {
  background-color: var(--color-primary);
  color: var(--color-white);
}

/* ===== FOCUS INDICATORS (Global) ===== */
/* WCAG 2.2 AA compliant focus indicators for all interactive elements */
:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

:focus:not(:focus-visible) {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Enhanced focus indicators for interactive elements */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(74, 107, 181, 0.2);
}

/* Specific focus styling for buttons */
.button:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(74, 107, 181, 0.25);
}

/* Focus styling for district chips */
.district-chip:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(74, 107, 181, 0.2);
  transform: translateY(-2px);
}

/* Focus styling for form inputs */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(74, 107, 181, 0.15);
}

/* ===== DIVIDER STYLES ===== */
.divider {
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, #cbd6ea, transparent);
  margin: 14px 0;
}

/*
 * ===== DISTRICT ORBIT COLOR SYSTEM =====
 * These colors indicate distance from Manchester City Centre.
 * Each modifier class sets the --district-orbit-color CSS variable
 * which is used by .district-chip__name::before in components.css.
 *
 * COLOR LEGEND (positive, professional, distinct colors):
 * - Core:  #4b0082 (regal purple)   - Prestigious, central
 * - Inner: #1565c0 (royal blue)     - Trustworthy, close
 * - Mid:   #2e7d32 (royal green)    - Natural, accessible
 * - Outer: #ffb300 (royal amber)    - Energetic, suburban
 * - Far:   #ff6d00 (royal orange)   - Warm, distant
 *
 * NOTE: Hot pink (#e91e63) is reserved for "New entries" indicator only
 *
 * WARNING: Do not add a default --district-orbit-color to .district-chip
 * in components.css as it will override these modifier values.
 */
.district-chip--core { --district-orbit-color: #4b0082 !important; }
.district-chip--inner { --district-orbit-color: #1565c0 !important; }
.district-chip--mid { --district-orbit-color: #2e7d32 !important; }
.district-chip--outer { --district-orbit-color: #ffb300 !important; }
.district-chip--far { --district-orbit-color: #ff6d00 !important; }

/*
 * ===== LEGEND SWATCHES =====
 * These must match the orbit colors above exactly.
 * If you change an orbit color, update the matching swatch.
 */
.district-legend__swatch--core { background: #4b0082 !important; }
.district-legend__swatch--inner { background: #1565c0 !important; }
.district-legend__swatch--mid { background: #2e7d32 !important; }
.district-legend__swatch--outer { background: #ffb300 !important; }
.district-legend__swatch--far { background: #ff6d00 !important; }
.district-legend__swatch--new {
  width: 15px;
  height: 15px;
  border-radius: var(--radius-full);
  background: #e91e63 !important;
  box-shadow: 0 0 0 3px rgba(233, 30, 99, 0.08);
}

/* ===== HIGH CONTRAST MODE ===== */
/*
 * High contrast mode for accessibility and e-ink devices.
 * Applied when .high-contrast class is on <html> element.
 * Optimised for Kindle Paperwhite, Scribe, Colorsoft and other e-ink displays.
 */
.high-contrast {
  /* === HIGH CONTRAST COLOR VARIABLES === */
  --color-primary: #000000;
  --color-secondary: #000000;
  --color-tertiary: #000000;
  --color-white: #ffffff;
  --color-black: #000000;
  
  /* Text Colors - Maximum contrast */
  --color-text-primary: #000000;
  --color-text-secondary: #000000;
  --color-text-muted: #333333;
  --color-medium-gray: #666666;
  
  /* === BACKGROUND VARIABLES === */
  --bg-body: #ffffff;
  --bg-section-light: #ffffff;
  --bg-section-medium: #f0f0f0;
  --bg-section-card: #ffffff;
  
  /* === GRADIENT VARIABLES - Flattened for e-ink === */
  --gradient-primary: #000000;
  --gradient-secondary: #000000;
  --gradient-header: #000000;
  
  /* === SHADOW VARIABLES - Simplified for e-ink === */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 3px 6px rgba(0, 0, 0, 0.3);
  --shadow-xl: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* === HIGH CONTRAST BODY STYLING === */
.high-contrast body {
  background-color: #ffffff;
  color: #000000;
}

/* === HIGH CONTRAST LINKS === */
.high-contrast a {
  color: #000000;
  text-decoration: underline;
}

.high-contrast a:hover,
.high-contrast a:focus {
  color: #000000;
  text-decoration: underline;
  outline: 2px solid #000000;
}

/* === HIGH CONTRAST FOCUS INDICATORS === */
.high-contrast :focus {
  outline: 3px solid #000000 !important;
  outline-offset: 2px !important;
}

.high-contrast :focus-visible {
  outline: 3px solid #000000 !important;
  outline-offset: 2px !important;
}

/* === HIGH CONTRAST SELECTION === */
.high-contrast ::selection {
  background-color: #000000;
  color: #ffffff;
}

.high-contrast ::-moz-selection {
  background-color: #000000;
  color: #ffffff;
}

/* === HIGH CONTRAST BUTTONS === */
/* Note: .high-contrast-toggle is excluded - it has its own rules in layout.css */
.high-contrast .button,
.high-contrast button:not(.high-contrast-toggle) {
  background: #000000 !important;
  color: #ffffff !important;
  border: 2px solid #000000 !important;
}

.high-contrast .button:hover,
.high-contrast .button:focus,
.high-contrast button:not(.high-contrast-toggle):hover,
.high-contrast button:not(.high-contrast-toggle):focus {
  background: #ffffff !important;
  color: #000000 !important;
  border: 2px solid #000000 !important;
}

.high-contrast .button--light {
  background: #ffffff !important;
  color: #000000 !important;
  border: 2px solid #000000 !important;
}

.high-contrast .button--light:hover,
.high-contrast .button--light:focus {
  background: #000000 !important;
  color: #ffffff !important;
}

/* === HIGH CONTRAST HEADER === */
.high-contrast .site-header {
  background: #ffffff;
  border-bottom: 3px solid #000000;
}

.high-contrast .site-header::before {
  background: #000000;
}

.high-contrast .site-header__brand-text {
  background: none;
  -webkit-background-clip: unset;
  -webkit-text-fill-color: #000000;
  background-clip: unset;
  color: #000000;
}

.high-contrast .site-header__brand-subtitle {
  color: #000000;
}

.high-contrast .site-header__brand-circle {
  border-color: #000000;
  box-shadow: none;
  filter: grayscale(100%) contrast(150%);
}

.high-contrast .site-header__breadcrumb {
  background: #ffffff;
  border: 2px solid #000000;
  color: #000000;
}

.high-contrast .site-header__description {
  background: #ffffff;
  border: 2px solid #000000;
  color: #000000;
}

/* === HIGH CONTRAST FOOTER === */
.high-contrast .site-footer {
  background: #000000;
  color: #ffffff;
}

.high-contrast .site-footer a {
  color: #ffffff;
}

.high-contrast .site-footer a:hover,
.high-contrast .site-footer a:focus {
  color: #ffffff;
  outline-color: #ffffff;
}

.high-contrast .site-footer__column-title {
  color: #ffffff;
}

.high-contrast .site-footer__divider {
  background: #ffffff;
}

/* === HIGH CONTRAST CARDS === */
.high-contrast .card,
.high-contrast [class*="__card"] {
  background: #ffffff;
  border: 2px solid #000000;
  box-shadow: none;
}

/* === HIGH CONTRAST DISTRICT CHIPS === */
.high-contrast .district-chip {
  background: #ffffff !important;
  border: 2px solid #000000 !important;
  color: #000000 !important;
}

.high-contrast .district-chip:hover,
.high-contrast .district-chip:focus {
  background: #000000 !important;
  color: #ffffff !important;
}

/* Orbit color stripes - distinct grayscale for each tier */
.high-contrast .district-chip__name::before {
  opacity: 1 !important;
}

/* New listing indicator - keep visible with distinct appearance */
.high-contrast .district-chip__status-dot {
  background: #000000 !important;
  border: 2px solid #000000 !important;
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #000000 !important;
  animation: high-contrast-pulse 2s ease-in-out infinite;
}

@keyframes high-contrast-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.2); opacity: 0.7; }
}

/* Distinct grayscale values for each orbit tier in high contrast mode */
.high-contrast .district-chip--core {
  --district-orbit-color: #000000 !important;
}

.high-contrast .district-chip--inner {
  --district-orbit-color: #1a1a1a !important;
}

.high-contrast .district-chip--mid {
  --district-orbit-color: #333333 !important;
}

.high-contrast .district-chip--outer {
  --district-orbit-color: #4d4d4d !important;
}

.high-contrast .district-chip--far {
  --district-orbit-color: #666666 !important;
}

/* === HIGH CONTRAST ORBIT LEGEND === */
.high-contrast .district-legend__swatch {
  border: 2px solid #000000;
}

/* Maintain distinct grayscale values in legend to match district chips */
.high-contrast .district-legend__swatch--core {
  background: #000000 !important;
}

.high-contrast .district-legend__swatch--inner {
  background: #1a1a1a !important;
}

.high-contrast .district-legend__swatch--mid {
  background: #333333 !important;
}

.high-contrast .district-legend__swatch--outer {
  background: #4d4d4d !important;
}

.high-contrast .district-legend__swatch--far {
  background: #666666 !important;
}

.high-contrast .district-legend__swatch--new {
  background: #000000 !important;
  border: 2px solid #000000 !important;
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #000000 !important;
}

/* === HIGH CONTRAST FORMS === */
.high-contrast input,
.high-contrast select,
.high-contrast textarea {
  background: #ffffff;
  color: #000000;
  border: 2px solid #000000;
}

.high-contrast input:focus,
.high-contrast select:focus,
.high-contrast textarea:focus {
  outline: 3px solid #000000;
  outline-offset: 2px;
}

/* === HIGH CONTRAST HERO SECTION === */
.high-contrast .hero {
  background: #ffffff;
  border: 2px solid #000000;
}

.high-contrast .hero__title {
  color: #000000;
}

.high-contrast .hero__text {
  color: #000000;
  opacity: 1;
}

.high-contrast .hero__countdown {
  background: #ffffff;
  border: 3px solid #000000;
}

.high-contrast .hero__countdown-label {
  color: #000000;
  opacity: 1;
}

.high-contrast .hero__countdown-timer {
  color: #000000;
}

.high-contrast .hero__countdown-number {
  color: #000000;
  background: #f0f0f0;
  border: 1px solid #000000;
}

.high-contrast .hero__countdown-unit-label {
  color: #333333;
  opacity: 1;
}

.high-contrast .hero__countdown-date {
  color: #000000;
  opacity: 1;
}

.high-contrast .hero__countdown-disclaimer {
  color: #333333;
  opacity: 1;
}

.high-contrast .hero__countdown-glow {
  display: none;
}

/* === HIGH CONTRAST FOUNDER COUNTER === */
.high-contrast .founder-counter {
  background: #000000;
  color: #ffffff;
}

.high-contrast .founder-counter__title {
  color: #ffffff;
}

.high-contrast .founder-counter__subtitle {
  color: #ffffff;
  opacity: 1;
}

.high-contrast .founder-counter__display {
  background: #ffffff;
  border: 2px solid #ffffff;
}

.high-contrast .founder-counter__current {
  color: #000000;
  text-shadow: none;
}

.high-contrast .founder-counter__separator {
  color: #000000;
  opacity: 1;
}

.high-contrast .founder-counter__total {
  color: #000000;
  opacity: 1;
}

.high-contrast .founder-counter__label {
  color: #000000;
  opacity: 1;
}

.high-contrast .founder-counter__progress {
  background: rgba(255, 255, 255, 0.3);
}

.high-contrast .founder-counter__progress-bar {
  background: #ffffff;
}

/* === HIGH CONTRAST DISTRICT CONSTELLATION === */
.high-contrast .district-constellation__intro-title {
  color: #000000;
}

.high-contrast .district-constellation__intro-text {
  color: #000000;
}

.high-contrast .district-orbit__title {
  color: #000000;
}

.high-contrast .district-orbit__subtitle {
  color: #333333;
}

.high-contrast .district-legend__title {
  color: #000000;
}

.high-contrast .district-legend__label {
  color: #000000;
}

/* === HIGH CONTRAST ATLAS STATS === */
.high-contrast .atlas-stats {
  background: #ffffff;
  border: 2px solid #000000;
}

.high-contrast .atlas-stats__title {
  color: #000000;
}

.high-contrast .atlas-stats__card {
  background: #ffffff;
  border: 2px solid #000000;
}

.high-contrast .atlas-stats__number {
  color: #000000;
}

.high-contrast .atlas-stats__label {
  color: #333333;
}

.high-contrast .atlas-stats__breakdown-title {
  color: #000000;
}

.high-contrast .atlas-stats__breakdown-swatch {
  background: #000000 !important;
  border: 2px solid #000000;
}

.high-contrast .atlas-stats__breakdown-count {
  color: #000000;
}

.high-contrast .atlas-stats__breakdown-label {
  color: #333333;
}

/* === HIGH CONTRAST STATISTICS === */
.high-contrast .statistics {
  background: #ffffff;
}