/* =====================================
   GLOBAL RESET & BASE STYLES
   ===================================== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  background-image: url("https://f2.toyhou.se/file/f2-toyhou-se/images/54134699_7lBxPpPUdIs3qNM.png");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: #BEE2FF; /* Base text color */
  line-height: 1.6;
}

a {
  color: inherit; /* Inherit color from parent */
  text-decoration: none;
  transition: all 0.3s ease-in-out;
}

a:hover {
  color: #00d4ff; /* Default hover color for general links */
}

:focus {
  outline: 2px dashed #00d4ff;
  outline-offset: 4px;
}

img {
  max-width: 100%;
  height: auto;
  display: block; /* Removes extra space below images */
}

/* =====================================
   TYPOGRAPHY
   ===================================== */
h1, h2, h3, h4 {
  color: #BEE2FF;
  text-shadow: 1px 1px 2px blue, 0 0 15px blue, 0 0 4px darkblue;
  margin-bottom: 0.5rem; /* Add some spacing below headings */
}

h1 { font-size: 2rem; }
h2 { font-size: 1.75rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }

p {
  font-size: 1rem;
  color: #e0f3ff;
  margin-bottom: 1rem; /* Spacing below paragraphs */
}

/* Responsive Typography */
@media (max-width: 600px) {
  h1 { font-size: 1.5rem; }
  h2 { font-size: 1.25rem; }
  h3 { font-size: 1.1rem; }
  p  { font-size: 0.95rem; }
}

/* =====================================
   HEADER & NAVIGATION BAR
   ===================================== */
.header { /* This class seems unused in your HTML, consider removing if not needed */
  display: flex;
  text-align: center;
  padding: 3px;
  background: transparent;
}

/* Custom Navigation Bar Styles */
/* These styles assume you are NOT using Bootstrap's full navbar component */
.custom-nav { /* This class needs to be applied to your <nav> element for these styles to work */
  background-color: #1d1f23;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  /* Added to prevent it from collapsing on small screens if not using Bootstrap's JS toggler */
  display: flex;
  justify-content: center; /* Center the nav items */
}

.nav-list { /* This class needs to be applied to your <ul> element inside <nav> */
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-item { /* This class needs to be applied to your <li> elements */
  position: relative;
  margin-right: 1.5rem;
}

.nav-item:last-child {
  margin-right: 0; /* Remove margin from the last item */
}

.nav-item > a {
  color: #ffffff;
  text-decoration: none;
  padding: 0.5rem;
  display: block;
  font-weight: 600;
  transition: color 0.2s ease;
}

.nav-item > a:hover,
.nav-item > a.active { /* Added .active for current page highlighting */
  color: #ffc107;
}

/* Dropdown Menu */
.dropdown-menu-content { /* Renamed to avoid conflict if you later use Bootstrap's .dropdown-menu */
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  display: none; /* Hidden by default */
  flex-direction: column;
  background-color: #ffffff;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
  z-index: 999;
  list-style: none; /* Remove bullets from dropdown list */
  padding: 0; /* Remove default padding from dropdown list */
  margin: 0; /* Remove default margin from dropdown list */
}

/* Each item within the dropdown */
.dropdown-menu-content li a {
  color: #333333;
  padding: 0.75rem 1rem;
  text-decoration: none;
  display: block;
}

.dropdown-menu-content li a:hover {
  background-color: #f8f9fa;
  color: #007bff;
}

/* Show dropdown on hover */
.nav-item:hover .dropdown-menu-content {
  display: flex;
}

/* =====================================
   Responsive (Mobile) Navigation - REMOVED
   ===================================== */
/* The previous `topnav` rules were for a specific JS-driven responsive menu (like W3Schools example).
   If you're using Bootstrap's navbar, it handles responsiveness.
   If you're using your custom nav, you'll need to implement your own hamburger menu/responsiveness logic with media queries and JS.
   For now, I've removed these as they don't align with the provided HTML structure.
*/

/* =====================================
   MAIN LAYOUT GRID
   ===================================== */
.main-grid {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 1.5rem;
  padding: 1rem;
  max-width: 1200px; /* Optional: Constrain max width for better readability */
  margin: 1rem auto; /* Optional: Center the grid */
}

@media screen and (max-width: 992px) {
  .main-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* Explicitly target specific columns for grid areas if needed */
  .col-lg-3,
  .col-lg-6 {
    /* Bootstrap's col classes already handle this. If using your own classes, map them. */
  }
}

@media screen and (max-width: 768px) {
  .main-grid {
    grid-template-columns: 1fr; /* Stack columns on smaller screens */
    padding: 0.5rem; /* Reduce padding on small screens */
    gap: 1rem; /* Adjust gap */
  }
}

/* =====================================
   COLUMN STYLES
   ===================================== */
/* These classes (left, middle, right) are not explicitly on your HTML divs.
   Your HTML uses Bootstrap's `col-lg-3`, `col-lg-6`.
   If you want these border styles, you'll need to add these classes to your HTML divs
   OR apply the styles directly to the Bootstrap column classes if you intend them globally.
   For now, assuming they will be added or are placeholders. */
.left,
.middle,
.right {
  padding: 5px;
  border: 3px solid blue;
}

/* =====================================
   CARDS
   ===================================== */
.card {
  background-color: #1e1f26;
  border: 2px solid #333;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  padding: 1.25rem;
  color: #BEE2FF;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  margin-bottom: 1rem; /* Add margin to space out cards */
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.card-header { /* Bootstrap's card-header needs styling if you want it to match */
    background-color: #2b2d35; /* Slightly darker than card body */
    border-bottom: 1px solid #333;
    padding: 0.75rem 1.25rem;
    margin: -1.25rem -1.25rem 1.25rem -1.25rem; /* Adjust to sit well within card padding */
    border-top-left-radius: 8px; /* Match card border-radius */
    border-top-right-radius: 8px; /* Match card border-radius */
}

/* Ensure h3 inside card-header inherits correct color/shadow */
.card-header h3 {
    margin-bottom: 0; /* Remove default margin */
    color: #BEE2FF;
    text-shadow: 1px 1px 2px blue, 0 0 10px blue, 0 0 3px darkblue;
}


/* CARD GROUP FLEX (Optional) */
.card-group { /* This class isn't used in your HTML, consider if you need it */
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.card-group .card {
  flex: 1 1 250px;
}

/* =====================================
   FOOTER
   ===================================== */
footer {
  background-color: #14151A;
  color: #BEE2FF;
  padding: 1rem 0;
  text-align: center;
}

footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

footer li {
  margin: 0.25rem 1rem;
}

footer a {
  color: #BEE2FF;
}

footer a:hover {
  color: #00d4ff;
}

/* =====================================
   UTILITY CLASSES
   ===================================== */
.accent {
  color: #00d4ff;
  font-weight: bold;
}