<div class="grid-container2">
  <div class="grid-item">Column 1</div>
  <div class="grid-item">Column 2</div>
</div>

<div class="grid-container">
  <div class="grid-item">Column 1</div>
  <div class="grid-item">Column 2</div>
  <div class="grid-item">Column 3</div>
</div>


<div class="flex-container">
  <div class="flex-item">Column 1</div>
  <div class="flex-item">Column 2</div>
  <div class="flex-item">Column 3</div>
</div>


.grid-container {
  display: grid;
  /* repeat(3, 1fr) creates three equal columns that take up 1 fraction of space each */
  grid-template-columns: repeat(3, 1fr); 
  gap: 10px; /* Optional spacing between columns */
}

.grid-item {
  border: 1px solid #ccc;
  padding: 20px;
  text-align: center;
}

.flex-container {
  display: flex;
  gap: 10px;
}

.flex-item {
  flex: 1; /* Makes all items grow equally to fill the row */
  border: 1px solid #ccc;
  padding: 20px;
  text-align: center;
}

.side-left {
  width: 250px;
  border: 1px solid #ff6600;
  padding: 20px;
  font-size: 12px;  }

.container-header .mod-menu {
    color: #010156;
    flex: 1 0 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.header {
    background: linear-gradient(180deg, rgba(250, 215, 95, 1) 0%, rgba(247, 107, 28, 1) 100%);
}
.card-header {
    padding: var(--card-cap-padding-y) var(--card-cap-padding-x);
    color: var(--card-cap-color);
    background-color: var(--card-cap-bg);
    border-bottom: var(--card-border-width) solid var(--card-border-color);
    margin-bottom: 0;
    font-size: 14px;
}
.footer {
    background: linear-gradient(180deg, rgba(250, 215, 95, 1) 0%, rgba(247, 107, 28, 1) 100%);
    color: #000;
}
/* for Genre box */
.bg-info {
    --bg-opacity: 1;
    background-color: rgb(225 128 58) !important;
    float: right;
}
a:not([class]) {
    text-decoration: underline;
}
/* ---     COLOUR SCHEME      --- */
/* --- Global Theme Variables --- */
:root {
  --color-brand-primary: #ff6600;
  --color-link-hover: #ff8533;
  --color-link-active: #cc5200;
  --color-link-visited: #b3591f;
  
  --color-dark-bg: #1a1a1a;
  --color-light-bg: #f9f9f9;
  --color-light-hover-bg: #ffebe0;
  
  --color-border-subtle: #e0e0e0;
  --color-border-brand: #ff9955;
  --color-accent-blue: #a51f18;
}

/* --- Core Text & Link Elements --- */
a {
  color: var(--color-brand-primary);
  text-decoration: underline;
  transition: color 0.2s ease, background-color 0.2s ease;
}

a:visited {
  color: var(--color-link-visited);
}

a:hover, 
a:focus-visible {
  color: var(--color-link-hover);
  text-decoration: none;
  outline: 2px solid var(--color-accent-blue);
  outline-offset: 4px;
}

a:active {
  color: var(--color-link-active);
}

/* --- Dark Navigation Menu --- */
.menu-dark {
  background-color: var(--color-dark-bg);
  border-bottom: 2px solid var(--color-brand-primary);
  padding: 1rem;
}

.menu-dark a {
  color: #ffffff;
  text-decoration: none;
}

.menu-dark a:hover {
  color: var(--color-brand-primary);
}

/* --- Light Navigation Menu --- */
.menu-light {
  background-color: var(--color-light-bg);
  border-bottom: 1px solid var(--color-border-subtle);
  padding: 1rem;
}

.menu-light a {
  color: #000000;
  text-decoration: none;
  padding: 0.5rem 1rem;
  border-radius: 4px;
}

.menu-light a:hover {
  color: var(--color-brand-primary);
  background-color: var(--color-light-hover-bg);
}

/* --- UI Component Accents --- */
.card-component {
  border: 1px solid var(--color-border-subtle);
}

.card-component:focus-within {
  border-color: var(--color-border-brand);
}

.btn-cta {
  background-color: var(--color-accent-blue);
  color: #ffffff;
}
/* --- end colour sheme --- */


}
h3, .h3 {
    font-size: 1.0rem;
}

/*center menu */

/* Suggestion 1: Center children within the navigation bar */
.grid-child.container-nav {
  display: flex;
  align-items: center; /* Change from 'normal' to 'center' */
}

/* Suggestion 2: Adjust internal megamenu alignment if the wrapper must remain 86px 
.dj-megamenu-wrapper {
  display: flex;
  align-items: center;
  /* Ensures the 60px UL centers within the 86px wrapper 
}*/

/* Suggestion 3: Standardize container padding */
.grid-child.container-nav {
  padding-top: 12px;
  padding-bottom: 12px;
}*/


#jem .copyright {
    font-size: 0.9em;
    clear: both;
    float: none;
    width: 100%;
    margin: 1em 0;
    text-align: center;
    color: #808080;
    display: none;
  }