/* Accessible Fonts */
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&display=swap');
@font-face {
    font-family: 'OpenDyslexic';
    src: url('https://cdnjs.cloudflare.com/ajax/libs/open-dyslexic/20160623/OpenDyslexic-Regular.woff') format('woff');
    font-style: normal;
    font-weight: normal;
}
@font-face {
    font-family: 'OpenDyslexic';
    src: url('https://cdnjs.cloudflare.com/ajax/libs/open-dyslexic/20160623/OpenDyslexic-Bold.woff') format('woff');
    font-style: normal;
    font-weight: bold;
}

/* CSS Custom Properties (Variables) for easy theming */
:root {
  --color-primary: #7B13D6;      /* Main brand color (purple) */
  --color-secondary: #FFC700;    /* Secondary brand color (yellow/gold) */
  --color-accent: #198754;       /* Accent color (green) */
  --color-background: whitesmoke; /* Page background */
  --color-card: white;           /* Card background */
  --color-text: #212529;         /* Main text color */
  --color-border: #dee2e6;       /* Border color */
  --color-navbar-bg: rgba(255, 255, 255, 0.95); /* Navbar background */
  --color-footer-bg: #f8f9fa;    /* Footer background */
  --color-footer-text: #6c757d;  /* Footer text */
}

/* Skip to main content link for keyboard accessibility */
.skip-to-main {
  position: absolute;
  left: -9999px;
  z-index: 999;
  padding: 1em;
  background-color: var(--color-primary);
  color: white;
  text-decoration: none;
  font-weight: bold;
}

.skip-to-main:focus {
  left: 50%;
  top: 10px;
  transform: translateX(-50%);
  box-shadow: 0 4px 6px rgba(0,0,0,0.3);
  border-radius: 4px;
}

/* Dark mode color scheme */
[data-theme="dark"] {
  /* Colors are now inverted dynamically in SiteSettings ViewComponent */
  --color-background: #1a1a1a;   /* Dark background */
  --color-card: #2d2d2d;         /* Dark card background */
  --color-text: #e0e0e0;         /* Light text */
  --color-border: #444;          /* Dark border */
  --color-navbar-bg: rgba(45, 45, 45, 0.95); /* Dark navbar */
  --color-footer-bg: #2d2d2d;    /* Dark footer */
  --color-footer-text: #a0a0a0;  /* Light footer text */
}

[data-theme="dark"] .navbar,
[data-theme="dark"] .navbar-light {
  background-color: var(--color-primary) !important;
}

[data-theme="dark"] .navbar-light .navbar-brand,
[data-theme="dark"] .navbar-light .nav-link,
[data-theme="dark"] .nav-link {
  color: var(--color-secondary) !important;
}

[data-theme="dark"] .navbar-light .navbar-toggler {
  border-color: var(--color-secondary);
}

[data-theme="dark"] .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%237B13D6' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

[data-theme="dark"] .card {
  background-color: var(--color-card);
  border-color: var(--color-border);
  color: var(--color-text);
}

[data-theme="dark"] .card-header {
  background-color: var(--color-primary) !important;
  color: var(--color-secondary) !important;
}

[data-theme="dark"] .card-header * {
  color: var(--color-secondary) !important;
}

[data-theme="dark"] .card-body {
  color: var(--color-text) !important;
}

[data-theme="dark"] h1, 
[data-theme="dark"] h2, 
[data-theme="dark"] h3, 
[data-theme="dark"] h4, 
[data-theme="dark"] h5, 
[data-theme="dark"] h6,
[data-theme="dark"] p,
[data-theme="dark"] a,
[data-theme="dark"] li,
[data-theme="dark"] span,
[data-theme="dark"] div {
  color: var(--color-text) !important;
}

[data-theme="dark"] .btn-cag {
  background-color: var(--color-primary) !important;
  color: var(--color-secondary) !important;
  border: none;
}

[data-theme="dark"] .btn-cag:hover {
  background-color: var(--color-primary) !important;
  color: var(--color-secondary) !important;
  opacity: 0.9;
}

/* Sepia theme for reduced eye strain */
[data-theme="sepia"] {
  --color-background: #f4ecd8;
  --color-card: #f9f3e3;
  --color-text: #2d2d25;
  --color-border: #d4c7a8;
  --color-navbar-bg: rgba(249, 243, 227, 0.95);
  --color-footer-bg: #f9f3e3;
  --color-footer-text: #5d5d4d;
}

[data-theme="sepia"] body {
  background-color: #f4ecd8;
  color: #2d2d25;
}

[data-theme="sepia"] .card {
  background-color: #f9f3e3;
  color: #2d2d25;
}

/* Blue theme for eye comfort */
[data-theme="blue"] {
  --color-background: #f0f7ff;
  --color-card: #f8fbff;
  --color-text: #002b4d;
  --color-border: #b3d9ff;
  --color-navbar-bg: rgba(248, 251, 255, 0.95);
  --color-footer-bg: #f8fbff;
  --color-footer-text: #004d80;
}

[data-theme="blue"] body {
  background-color: #f0f7ff;
  color: #002b4d;
}

[data-theme="blue"] .card {
  background-color: #f8fbff;
  color: #002b4d;
}

[data-theme="dark"] .border-bottom {
  border-color: var(--color-border) !important;
}

[data-theme="dark"] .border-top {
  border-color: var(--color-border) !important;
}

[data-theme="dark"] .footer {
  background-color: var(--color-footer-bg);
  color: var(--color-footer-text) !important;
}

[data-theme="dark"] .text-muted {
  color: var(--color-footer-text) !important;
}

[data-theme="dark"] .btn-outline-primary,
[data-theme="dark"] .btn-outline-secondary {
  color: var(--color-text);
  border-color: var(--color-border);
}

[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select,
[data-theme="dark"] .form-control {
  background-color: #3a3a3a;
  border-color: var(--color-border);
  color: var(--color-text);
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: #888;
}

html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
  overflow-x: hidden; /* Prevent horizontal scroll */
}

body {
  margin-bottom: 100px; /* Increased from 60px */
  padding-bottom: 2rem; /* Extra padding for content */
  overflow-x: hidden; /* Prevent horizontal scroll */
  max-width: 100vw; /* Ensure body doesn't exceed viewport width */
}

/* Footer styling */
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  background-color: var(--color-footer-bg);
  color: var(--color-footer-text);
  padding: 0.75rem 0;
  margin-top: 2rem;
}

/* Add extra padding on mobile to prevent footer overlap */
@media (max-width: 768px) {
  body {
    margin-bottom: 150px; /* More space on mobile */
    padding-bottom: 3rem;
  }
  
  .footer {
    padding: 2rem 0;
  }
  
  .footer .row {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
  }
  
  main {
    padding-bottom: 2rem !important;
  }
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

body {
  background-color: var(--color-background); 
  padding-top: 4.5rem;
  /* Font family is now set via CSS variable from SiteSettings ViewComponent */
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  color: var(--color-text);
}

/* Navbar styling */
.navbar {
  background-color: var(--color-primary) !important; 
  color: var(--color-secondary) !important;
  z-index: 1030;
}

.navbar-brand {
    display: flex;
    align-items: center;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.navbar-brand img {
    max-height: 60px;
    height: 40px;
    width: auto;
    display: block;
}

.nav-link {
  color: var(--color-secondary) !important; 
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23FFC700' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

.navbar-toggler {
    border-color: var(--color-secondary) !important;
}

.navbar-toggler:focus {
    box-shadow: 0 0 0 0.25rem rgba(255, 199, 0, 0.25) !important;
}

/* Cards */
.list-group-item, .card {
  background-color: var(--color-card);
  margin-bottom: 8px;
}

.card {
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.card-header {
  background-color: var(--color-primary) !important;
  color: var(--color-secondary) !important;
  font-weight: bold;
}

.card-header * {
  color: var(--color-secondary) !important;
}

.card-header .text-warning {
  color: var(--color-secondary) !important;
}

/* Custom buttons */
.btn-cag {
  background-color: var(--color-primary) !important;
  color: var(--color-secondary) !important;
  border: none; 
}

.btn-cag:hover {
  background-color: var(--color-primary) !important;
  color: var(--color-secondary) !important;
  opacity: 0.9;
}

.bg-cag {
  background-color: var(--color-primary) !important;
  color: var(--color-secondary) !important;
}

/* Special colors */
.bg-pink {
    background-color: #ff69b4 !important;
    color: white;
}

/* Carousel */
#homeCarousel {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 8px;
    margin-bottom: 2rem;
    max-width: 100%;
    overflow: hidden;
}

#homeCarousel .carousel-inner {
    height: 100%;
    border-radius: 8px;
    overflow: hidden;
}

#homeCarousel .carousel-item {
    height: 100%;
}

#homeCarousel .carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    max-width: 100%;
}

#homeCarousel .carousel-caption {
    background: rgba(0, 0, 0, 0.5);
    border-radius: 8px;
    padding: 1rem;
}

/* Mobile carousel adjustments */
@media (max-width: 768px) {
  #homeCarousel {
    aspect-ratio: 4 / 3;
    border-radius: 4px;
    margin-bottom: 1rem;
  }
  
  #homeCarousel .carousel-caption {
    padding: 0.5rem;
    font-size: 0.875rem;
  }
}

/* Social media embeds */
.twitter-tweet {
    margin: 0 auto !important;
    max-width: 100% !important;
}

/* Smooth transitions */
* {
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* Mobile overflow fixes */
img {
  max-width: 100%;
  height: auto;
}

.container-fluid {
  padding-left: 15px;
  padding-right: 15px;
}

.row {
  margin-left: 0;
  margin-right: 0;
}

@media (max-width: 768px) {
  .container-fluid {
    padding-left: 10px;
    padding-right: 10px;
  }
  
  .card {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

button, .btn, a {
  transition: all 0.2s ease;
}

/* Accessibility: Text-to-Speech button */
.btn-accessibility-tts {
  position: fixed;
  bottom: 80px;
  right: 20px;
  background-color: var(--color-accent);
  color: white;
  border: none;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  font-size: 1.5rem;
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
  cursor: pointer;
  z-index: 1030;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.btn-accessibility-tts:hover {
  background-color: var(--color-primary);
  transform: scale(1.1);
}

.btn-accessibility-tts:focus {
  outline: 3px solid var(--color-secondary);
  outline-offset: 2px;
}

.btn-accessibility-tts.active {
  background-color: var(--color-secondary);
  color: var(--color-primary);
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* Accessibility Panel */
.accessibility-panel {
  position: fixed;
  bottom: 140px;
  right: 20px;
  z-index: 1030;
}

.btn-accessibility-toggle {
  background-color: var(--color-primary);
  color: white;
  border: none;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  font-size: 1.5rem;
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.btn-accessibility-toggle:hover {
  background-color: var(--color-secondary);
  color: var(--color-primary);
  transform: scale(1.1);
}

.btn-accessibility-toggle:focus {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

.accessibility-options {
  position: absolute;
  bottom: 60px;
  right: 0;
  background: white;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  padding: 1rem;
  min-width: 250px;
  border: 2px solid var(--color-primary);
}

[data-theme="dark"] .accessibility-options {
  background: var(--color-card);
  color: var(--color-text);
}

.accessibility-title {
  margin: 0 0 0.75rem 0;
  color: var(--color-primary);
  font-weight: bold;
  font-size: 0.9rem;
  text-align: center;
}

.accessibility-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.75rem;
  margin-bottom: 0.5rem;
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.9rem;
}

.accessibility-option:hover {
  background: var(--color-primary);
  color: white;
  transform: translateX(-2px);
}

.accessibility-option.active {
  background: var(--color-accent);
  color: white;
  border-color: var(--color-accent);
}

.accessibility-option i {
  font-size: 1.2rem;
}

.accessibility-option-group {
  margin-bottom: 0.75rem;
  padding: 0.5rem;
  background: var(--color-background);
  border-radius: 8px;
}

.accessibility-label {
  display: block;
  font-size: 0.85rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
  color: var(--color-text);
}

.accessibility-reset {
  background: #dc3545;
  color: white;
  border-color: #dc3545;
}

.accessibility-reset:hover {
  background: #c82333;
}

/* High Contrast Mode */
[data-accessibility="high-contrast"] {
  --color-background: #000000 !important;
  --color-card: #1a1a1a !important;
  --color-text: #FFFFFF !important;
  --color-primary: #FFFFFF !important;
  --color-secondary: #FFFF00 !important;
  --color-border: #FFFFFF !important;
}

[data-accessibility="high-contrast"] body {
  background-color: #000000 !important;
  color: #FFFFFF !important;
}

[data-accessibility="high-contrast"] .card {
  background-color: #1a1a1a !important;
  color: #FFFFFF !important;
  border: 2px solid #FFFFFF !important;
}

[data-accessibility="high-contrast"] .card-header {
  background-color: #000000 !important;
  color: #FFFFFF !important;
  border-bottom: 2px solid #FFFFFF !important;
}

[data-accessibility="high-contrast"] .navbar {
  background-color: #000000 !important;
  border-bottom: 3px solid #FFFFFF !important;
}

[data-accessibility="high-contrast"] .navbar-light .navbar-brand,
[data-accessibility="high-contrast"] .navbar-light .nav-link,
[data-accessibility="high-contrast"] .nav-link {
  color: #FFFFFF !important;
  font-weight: bold !important;
}

[data-accessibility="high-contrast"] .btn {
  background-color: #FFFFFF !important;
  color: #000000 !important;
  border: 2px solid #FFFFFF !important;
  font-weight: bold !important;
}

[data-accessibility="high-contrast"] .btn:hover {
  background-color: #CCCCCC !important;
  color: #000000 !important;
}

[data-accessibility="high-contrast"] a {
  color: #FFFFFF !important;
  text-decoration: underline !important;
  font-weight: bold !important;
}

[data-accessibility="high-contrast"] .btn-cag {
  background-color: #FFFFFF !important;
  color: #000000 !important;
}

[data-accessibility="high-contrast"] .footer {
  background-color: #000000 !important;
  color: #FFFFFF !important;
  border-top: 3px solid #FFFFFF !important;
}

[data-accessibility="high-contrast"] input,
[data-accessibility="high-contrast"] select,
[data-accessibility="high-contrast"] textarea {
  background-color: #1a1a1a !important;
  color: #FFFFFF !important;
  border: 2px solid #FFFFFF !important;
}

/* High contrast overrides for programme page */
[data-accessibility="high-contrast"] .text-warning,
[data-accessibility="high-contrast"] .text-primary,
[data-accessibility="high-contrast"] .text-secondary,
[data-accessibility="high-contrast"] .text-danger,
[data-accessibility="high-contrast"] .text-success,
[data-accessibility="high-contrast"] .text-info {
  color: #FFFFFF !important;
}

[data-accessibility="high-contrast"] .badge {
  background-color: #000000 !important;
  color: #FFFFFF !important;
  border: 2px solid #FFFFFF !important;
}

[data-accessibility="high-contrast"] .list-group-item {
  background-color: #1a1a1a !important;
  color: #FFFFFF !important;
  border: 1px solid #FFFFFF !important;
}

[data-accessibility="high-contrast"] .programme-item {
  background-color: #0a0a0a !important;
  color: #FFFFFF !important;
  border: 1px solid #FFFFFF !important;
}

[data-accessibility="high-contrast"] .card-header h5,
[data-accessibility="high-contrast"] .card-header small,
[data-accessibility="high-contrast"] .card-header * {
  color: #FFFFFF !important;
}

[data-accessibility="high-contrast"] .btn-outline-secondary {
  background-color: #1a1a1a !important;
  color: #FFFFFF !important;
  border: 2px solid #FFFFFF !important;
}

[data-accessibility="high-contrast"] .btn-warning,
[data-accessibility="high-contrast"] .btn-danger {
  background-color: #FFFFFF !important;
  color: #000000 !important;
  border: 2px solid #FFFFFF !important;
}

/* Font size adjustments */
[data-font-size="large"] {
  font-size: 1.2rem;
}

[data-font-size="larger"] {
  font-size: 1.4rem;
}

[data-font-size="largest"] {
  font-size: 1.6rem;
}

/* Dyslexia-friendly font */
[data-dyslexia-font="true"] * :not(.accessibility-panel):not(.accessibility-panel *) {
  font-family: 'OpenDyslexic', 'Comic Sans MS', 'Arial', sans-serif !important;
  letter-spacing: 0.05em;
  line-height: 1.8;
}

[data-dyslexia-font="true"] h1,
[data-dyslexia-font="true"] h2,
[data-dyslexia-font="true"] h3,
[data-dyslexia-font="true"] h4,
[data-dyslexia-font="true"] h5,
[data-dyslexia-font="true"] h6 {
  font-family: 'OpenDyslexic', 'Comic Sans MS', 'Arial', sans-serif !important;
}

/* Brightness control */
[data-brightness] body {
  filter: brightness(var(--brightness-value, 1));
}

/* Line height control */
[data-line-height] * :not(.accessibility-panel):not(.accessibility-panel *) {
  line-height: var(--line-height-value, 1.6) !important;
}

/* Letter spacing control */
[data-letter-spacing] * :not(.accessibility-panel):not(.accessibility-panel *) {
  letter-spacing: var(--letter-spacing-value, 0) !important;
}

/* Word spacing control */
[data-word-spacing] * :not(.accessibility-panel):not(.accessibility-panel *) {
  word-spacing: var(--word-spacing-value, 0) !important;
}