/* JB Estrella Cosmic Theme - Starry Night Experience */

/* KNOWN ISSUE: these custom properties are declared on :root, and
   minimalist.css declares the same names on :root too. Both stylesheets load
   on every page, so the one loaded last (minimalist) wins for both themes and
   the values below are mostly inert — cosmic currently renders minimalist's
   purple accents rather than its own blues. Scoping each theme's block to
   body.theme-cosmic / body.theme-minimalist would fix it, but that changes
   cosmic's whole palette, so it's left for a deliberate follow-up rather than
   done as a drive-by. Rules that must survive the collision use literal
   values. */
:root {
  /* Brand colors - space-themed */
  --primary-color: #4e6bff;     /* Bright blue */
  --secondary-color: #00c2c7;   /* Teal */
  --accent-color: #ff4081;      /* Pink */
  --text-color: #c0c0c0;        /* White text for dark background */
  --light-bg-color: rgba(20, 30, 50, 0.7); /* Semi-transparent dark blue */
  --dark-bg-color: rgba(10, 15, 30, 0.85); /* Darker blue, more opaque */
  --transparent-bg-color: rgba(20, 30, 50, 0.2); /* Semi-transparent dark blue */
  
  /* Font settings */
  --title-font: 'Great Vibes', cursive;
  --body-font: 'Fondamento', cursive;
  --ui-font: 'Fondamento', 'Inter', system-ui, -apple-system, sans-serif;
}

/* Global styling */
body.theme-cosmic {
  color: var(--text-color);
  /* Literal, not var(--body-font): this file and minimalist.css both define
     that property on :root, so whichever stylesheet loads last wins for
     BOTH themes — which silently left cosmic rendering Inter. The same
     collision affects the color tokens; see the note at the top of this
     file. */
  font-family: 'Fondamento', cursive;
  line-height: 1.6;
  background: linear-gradient(to bottom, #0c133d, #000216); /* Space blue gradient */
  background-attachment: fixed;
  min-height: 100vh;
}

/* Starscape background styles */
body.theme-cosmic {
  color: #fff;
}

/* Keep Inter for UI elements like buttons, forms, etc. */
.theme-cosmic .btn, 
.theme-cosmic input, 
.theme-cosmic select, 
.theme-cosmic .navbar, 
.theme-cosmic footer {
  font-family: var(--ui-font);
}

/* Navigation styling */
.theme-cosmic .navbar {
  background: transparent !important;
  box-shadow: none;
  transition: all 0.3s ease;
  padding: 1.5rem 1rem; /* Taller navbar */
  font-weight: 700;
  color: var(--secondary-color) !important;
}

.theme-cosmic .navbar.scrolled {
  padding: 0.5rem 1rem; /* Shrink when scrolled */
  background: transparent !important;
}

.theme-cosmic .navbar-brand {
  font-weight: 700;
  color: var(--secondary-color) !important;
  font-size: 2.5rem; /* Larger logo text */
  transition: all 0.3s ease;
  padding: 0.5rem 0;
}

.theme-cosmic .navbar.scrolled .navbar-brand {
  font-size: 1.8rem; /* Smaller when scrolled */
}

.theme-cosmic .navbar-light .navbar-nav .nav-link {
  color: rgba(255, 255, 255, 0.8);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.theme-cosmic .navbar-light .navbar-nav .nav-link:hover {
  color: #fff;
}

/* Shopping cart icon styling */
.theme-cosmic .navbar-light .navbar-nav .nav-link .fa-shopping-basket {
  color: rgba(255, 255, 255, 0.9);
}

.theme-cosmic .navbar-light .navbar-nav .nav-link:hover .fa-shopping-basket {
  color: #fff;
}

.theme-cosmic .navbar-light .navbar-toggler {
  border-color: rgba(255, 255, 255, 0.5);
}

/* Great Vibes font for special elements */
.theme-cosmic .font-great-vibes {
  font-family: var(--title-font);
  font-weight: normal;
}

/* Great Vibes font for special elements */
.theme-cosmic .font-great-vibes {
  font-family: var(--title-font);
  font-weight: normal;
}

.theme-cosmic .nav-link {
  font-weight: 500;
}

.theme-cosmic .nav-link:hover {
  color: var(--primary-color) !important;
}

/* Button styling */
.theme-cosmic .btn-primary {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

.theme-cosmic .btn-secondary {
  background-color: var(--secondary-color);
  border-color: var(--secondary-color);
}

/* Footer styling */
.theme-cosmic footer {
  background-color: var(--dark-bg-color);
  color: white;
  padding: 2rem 0;
  margin-top: 3rem;
}

/* .site-footer (the copyright line): literal color, not var(--text-color) -
   see the known-issue note at the top of this file, minimalist.css's
   :root wins that variable for both themes. */
.theme-cosmic .site-footer {
  color: rgba(255, 255, 255, 0.55);
}

/* Hero section for homepage */
.theme-cosmic .hero {
  padding: 6rem 0 4rem 0;
  margin-bottom: 2rem;
}

/* Improved paragraph spacing for Fondamento */
.theme-cosmic p {
  margin-bottom: 1.2em;
  line-height: 1.8;
}

/* Wagtail content styling */
.theme-cosmic .rich-text img {
  max-width: 100%;
  height: auto;
  margin: 1rem 0;
  border-radius: 4px;
}

.theme-cosmic .rich-text h2 {
  color: var(--secondary-color);
  margin-top: 2rem;
  margin-bottom: 1rem;
}

.theme-cosmic .rich-text h3 {
  color: var(--accent-color);
  margin-top: 1.5rem;
}

.theme-cosmic .rich-text ul, 
.theme-cosmic .rich-text ol {
  margin-bottom: 1.5rem;
}

.theme-cosmic .rich-text a {
  color: var(--secondary-color);
  text-decoration: none;
  border-bottom: 1px dotted;
}

.theme-cosmic .rich-text a:hover {
  color: var(--accent-color);
  border-bottom: 1px solid;
}

.theme-cosmic .page-header {
  padding-bottom: 1.5rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.theme-cosmic .page-meta {
  color: #aaaaaa;
  margin-bottom: 1.5rem;
}

/* Card styling for blog listings */
.theme-cosmic .content-card {
  transition: transform 0.2s, box-shadow 0.2s;
  margin-bottom: 1.5rem;
  background-color: var(--transparent-bg-color);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.theme-cosmic .content-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
}

.theme-cosmic .content-card .card-body {
  padding: 1.5rem;
}

/* Custom badge styling */
.theme-cosmic .badge {
  padding: 0.5em 1em;
  font-weight: 500;
}

/* Enhance readability in the starscape */
.theme-cosmic p, 
.theme-cosmic li {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.theme-cosmic h1, 
.theme-cosmic h2, 
.theme-cosmic h3, 
.theme-cosmic h4, 
.theme-cosmic h5, 
.theme-cosmic h6 {
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

/* Theme-specific mobile styles */
@media (max-width: 768px) {
  /* Mobile menu theme-specific styling */
  .theme-cosmic .mobile-menu {
    background: linear-gradient(to right, rgba(10, 20, 50, 0.95), rgba(26, 41, 128, 0.9));
    color: var(--text-color);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    border-right: 1px solid rgba(100, 150, 255, 0.1);
  }
  
  .theme-cosmic .mobile-menu-item {
    color: rgba(255, 255, 255, 0.8);
  }
  
  .theme-cosmic .mobile-menu-item:hover,
  .theme-cosmic .mobile-menu-item.active {
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
  }
  
  .theme-cosmic .close-menu {
    color: rgba(255, 255, 255, 0.8);
  }
  
  .theme-cosmic .hamburger-menu {
    color: rgba(255, 255, 255, 0.8);
  }
  
  /* Mobile header theme-specific styling */
  .theme-cosmic .mobile-header {
    background: transparent !important;
  }
  
  .theme-cosmic .mobile-header .brand {
    color: var(--secondary-color);
    font-family: var(--title-font);
    font-size: 1.8rem;
  }
  
  .theme-cosmic .mobile-header .actions button {
    color: rgba(255, 255, 255, 0.8);
  }

  .theme-cosmic .mobile-header .actions button:hover {
    color: var(--primary-color);
  }
  
  /* Mobile slide-out menu. Literal colours, not the :root tokens (see the
     note at the top of this file). */
  .theme-cosmic .mobile-menu {
    background: linear-gradient(to bottom, #0c133d, #000216);
    box-shadow: 0 0 24px rgba(0, 0, 0, 0.6);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
  }

  .theme-cosmic .mobile-menu-item,
  .theme-cosmic .close-menu,
  .theme-cosmic .hamburger-menu {
    color: rgba(255, 255, 255, 0.85);
  }

  .theme-cosmic .mobile-menu-item:hover,
  .theme-cosmic .mobile-menu-item.active {
    background-color: rgba(78, 107, 255, 0.15);
    color: #fff;
  }

  /* Content adjustments for mobile */
  .theme-cosmic .content-container {
    padding: 1.5rem;
    margin-bottom: 1.5rem;
  }
  
  /* Card adjustments for mobile */
  .theme-cosmic .content-card {
    margin-left: -0.5rem;
    margin-right: -0.5rem;
  }
}