/* -------------------------------
   Belper Arts Main Styles CSS2
--------------------------------*/

/* Global */
body {
  text-align: center;                    /* Centers inline content inside the page (like text or inline-block elements).                     */
  font-size: 24px;                       /* Sets the base text size to 24 pixels — fairly large.                                             */
  font-family: "Poppins", sans-serif;    /* Uses the Poppins font. If the browser can't load it, it falls back to a generic sans-serif font. */
  margin: 0;                             /* Removes the default margin around the body (browsers add some by default).                       */
  background-color: #fdfdfd;             /* Sets the page background to a very light gray (almost white).                                    */
  color: #111;                           /* Sets the default text color to very dark gray (almost black).                                    */
                                         /* Result - Your entire webpage will have a clean, centered layout with modern typography.          */
}

/* Ensure padding and borders don't break layouts */
* {
  box-sizing: border-box;
}

body {
  overflow-x: hidden; /* Prevent horizontal scrolling caused by wide headers or dropdowns */
}

img {	pointer-events: none;		max-width: 100%;	height: auto;	}

.page-container {
	max-width: 1200px;
	margin: 0 auto;   /* centers the whole site */
	width: 100%;
}

.blue-header, .sticky-header {
  max-width: 100%;
  margin: 0 auto;
}

/* --- First Blue Header — Centered Text --- */
    .blue-header				/*  This begins a CSS rule that applies to any HTML element with class: <header class="blue-header">  */
 {						/*  So everything inside { } controls how that header looks. */		
      display: flex;				/*  This turns the header into a flexbox container.
						Flexbox is a layout system that makes it easy to align items (like icons and text) in a row.
						Because of this line, everything inside .blue-header:
						appears in a horizontal row can be spaced and centered easily  */			 
      align-items: center;			/*  This aligns the items vertically (top → bottom).
						It centers them in the height of the header.
						Without this, icons and text might sit higher or lower.  */
      justify-content: center;			/*  This aligns the items horizontally (left → right).
						It centers the whole row of items in the middle of the header.  */
      gap: 30px;				/*  This creates 40 pixels of space between each item in the row.  */
      padding: 10px 20px;			/*  This adds inner space inside the header.	10px = padding top and bottom	20px = padding left and right	So the
							header isn’t too tight around its content.  */
      height: 60px;				/*  This makes the header exactly 60 pixels tall.  */
        background: linear-gradient(
     180deg, 
     rgba(3, 30, 62, 1) 0%, 
     rgba(0, 102, 136, 1) 100%);		/* This sets the header’s background color.  */
      color: white;				/*  This sets the text color of everything inside the header.  */
    }

 /* --- Sticky Header Container --- */
    .sticky-header {
      position: sticky;
      top: 0;
      background-color: #333;
      color: white;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      padding: 10px 20px;
      gap: 20px;
      z-index: 50;
    }


/* Header */
header {
  position: sticky;
  top: 0;
  z-index: 50;            /* The z-index property specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order. */
  background: linear-gradient(
     180deg, 
     rgba(3, 30, 62, 1) 0%, 
     rgba(0, 102, 136, 1) 100%);
  color: white;
  text-align: center;
  padding: 1px 1px;                 /* down from 20px */
  font-family: "Manrope", sans-serif;
  font-weight: 700;
  letter-spacing: 0.5px;
  width: 100%;
  box-shadow: 0 4px 5px rgba(0, 0, 0, 0.3);
}

.header-center {
  display: flex;
  align-items: center;     /* vertically center logo and text */
  justify-content: center; /* horizontally center the whole header */
  gap: 20px;               /* space between logo and text */
  padding: 10px;
}

/* ------------------------------- */
/*              FOOTER             */
/* ------------------------------- */

footer.site-footer {
  background: linear-gradient(
    180deg,
    rgba(3, 30, 62, 1) 0%,
    rgba(0, 102, 136, 1) 100%
  );
  color: white;
  text-align: center;
  padding: 20px 10px;
  font-family: "Manrope", sans-serif;
  font-weight: 400;
  letter-spacing: 0.5px;
  width: 100%;
  box-sizing: border-box;
  box-shadow: 0 -4px 5px rgba(0, 0, 0, 0.3);
}

.footer-center {
  display: flex;
  flex-direction: column;  /* stack logo, text, icons vertically */
  align-items: center;
  gap: 15px;               /* space between logo, text, icons */
}

.footer-text {
  font-size: 16px;       /* smaller than h4 */
  line-height: 1.5;
  max-width: 700px;      /* optional, keeps text readable */
  margin: 0;
}

.footer-icons {
  display: flex;          /* side by side */
  gap: 15px;              /* space between Facebook and Instagram */
}

/* Icon hover effect */
.footer-icons a img {
  transition: transform 0.3s ease;
}

.footer-icons a:hover img {
  transform: scale(1.2);  /* grow icon slightly on hover */
}

/* Responsive for small screens */
@media (max-width: 500px) {
  .footer-center {
    gap: 10px;              /* reduce spacing */
  }

  .footer-icons {
    gap: 10px;              /* reduce icon spacing */
  }

  .footer-text {
    font-size: 13px;        /* smaller text for mobile */
    max-width: 90%;
  }
}

.logo img {
 /* width: 100px;          */  /* adjust size as needed */ 
  height: auto;
  display: block;
}

.intro h2 {
  font-size: 2rem;
  margin: 0;
}


.event {
  position: relative;
  display: inline-block;
  width: 80%;			/* image (and section) will be 50% wide */
}

.event-link {
  position: relative;
  display: inline-block;
  text-decoration: none;	/* optional, removes underline */
}

.event img {
  width: 100%;
  height: auto;
  display: block;
}

.event-text {
  position: absolute;
  top: 50%;			/* move to vertical center */
  left: 50%;            /* move to horizontal center */
  transform: translateX(-50%);    /* perfectly center it */
  color: white;
  background: rgba(0, 0, 0, 0.5); /* semi-transparent background */
  padding: 10px 20px;
  border-radius: 6px;
  font-size: 2.5rem;                  /* bigger text was 1.2rem */
  font-weight: bold;
  text-align: center;
  white-space: nowrap; /* optional: keep on one line */
}

/* Musicians */
.musicians {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
  margin: 30px auto 60px auto;
}

.musicians img {
  width: 25%;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* ------------------------------- */
/* TWO-ROW HEADER LAYOUT           */
/* ------------------------------- */

/* Top header with date */
.top-header {
  background: #0a3e73;
  color: white;
  padding: 6px 0;
  font-size: 1rem;
  text-align: center;
  font-weight: 600;
}

/* Second header row (menu left, logo center, icons right) */
.main-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(180deg, rgba(3, 30, 62, 1) 0%, rgba(0, 102, 136, 1) 100%);
  padding: 10px 20px;
  position: sticky;
  top: 0;
  z-index: 60;
}

/* LEFT (menu) */
.header-left {
   display: flex;
  align-items: center;
  width: 33%;
  min-width: 0; /* allows the left menu to shrink if needed */
}

/* CENTER (logo) — *perfectly centered* */
.header-center {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 34%;
  min-width: 0; /* prevents logo from pushing total width */
}

.header-center img {
  width: 120px;
  height: auto;
}

/* RIGHT (icons) */
.header-right {
    display: flex;
  align-items: center;
  width: 33%;
  min-width: 0; /* allows icons to shrink */
}

.main-header {
  gap: 0;            /* remove gap for now */
}

/* Dropdown container */
.dropdown {
  position: relative;
  display: inline-block;
}

/* .dropbtn {
  background-color: #333;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}
*/
.dropdown-content {
  display: none;
  position: absolute;
  background-color: white;
  min-width: 160px;
  box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
  z-index: 100;
}

.dropdown-content.open {
  display: block;
}

.dropdown:hover .dropdown-content {
  display: block;
}

/* Links styling */
.dropdown-content a {
  color: black;
  padding: 8px 12px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  background-color: #e0e0e0;
}


/* --------Artist Buttons--------- */

.artist-buttons {
  display: flex;              /* Arrange cards in a row */
  flex-wrap: wrap;            /* Wrap on smaller screens */
  gap: 20px;                  /* Space between cards */
  justify-content: center;    /* Center cards horizontally */
}

.artist-card {
  display: block;             /* Makes the <a> behave like a block */
  text-decoration: none;      /* Remove underline */
  color: inherit;             /* Inherit text color */
  width: 350px;               /* Fixed width for cards */
  border: 2px solid #ccc;     /* Card border */
  border-radius: 8px;         /* Rounded corners */
  overflow: hidden;           /* Keep image inside card */
  transition: transform 0.3s, box-shadow 0.3s;
}

.artist-card:hover {
  transform: translateY(-5px);              /* Slight lift on hover */
  box-shadow: 0 5px 15px rgba(0,0,0,0.2);  /* Shadow effect */
}

.artist-card img {
  width: 100%;               /* Full width */
  height: auto;              /* Maintain aspect ratio */
  display: block;
}

.artist-info {
  padding: 10px;
  text-align: center;        /* Center text inside the card */
}

.artist-info span {
  display: block;            /* Puts the secondary text on a new line */
  margin-top: 5px;
  font-size: 0.9rem;
  color: #555;
}

.artist-section {
  display: flex;
  gap: 2rem;
  margin-top: 2rem;
}

.artist-layout {
  display: flex;            /* Arrange children in a row */
  flex-wrap: nowrap;        /* Keep items side by side on desktop *
  align-items: flex-start;  /* Align top edges */
  gap: 20px;  			/* Space between text and image */
  margin-top: 20px;
}

.artist-text,
.artist-image {
  flex: 0 0 50%;            /* Fixed 50% width each */
  box-sizing: border-box;   /* Include padding in width */
  
}

.artist-image img {
  width: 100%;              /* Fill container */
  height: auto;
  display: block;
  border-radius: 8px;
}

/* ----------------------- */
/*        UNIVERSAL CARD   */
/* ----------------------- */

.card {
  display: block;
  width: 350px;
  text-decoration: none;
  border-radius: 12px;
  overflow: hidden;
  background-color: white;
  color: #111;
  border: 2px solid #ddd;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

.card img {
  width: 100%;
  height: auto;
  display: block;
}

.card-info {
  padding: 12px;
  text-align: center;
}

.card-info span {
  display: block;
  margin-top: 5px;
  font-size: 0.9rem;
  color: #666;
}

.card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  margin-top: 20px;
}



/* --------Musician Buttons--------- */

.musician-buttons {
  display: flex;              /* Arrange cards in a row */
  flex-wrap: wrap;            /* Wrap on smaller screens */
  gap: 20px;                  /* Space between cards */
  justify-content: center;    /* Center cards horizontally */
}

.musician-card {
  display: block;	/* Makes the <a> behave like a block */
  text-decoration: none;	/* Remove underline */
  width: 350px;
  border: 2px solid #ccc;
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
}

.musician-card,
.musician-card:visited,
.musician-card:hover,
.musician-card:active {
  color: white;
}



.musician-card:hover {
  transform: translateY(-5px);              /* Slight lift on hover */
  box-shadow: 0 5px 15px rgba(0,0,0,0.2);  /* Shadow effect */
}

.musician-card img {
  width: 100%;               /* Full width */
  height: auto;              /* Maintain aspect ratio */
  display: block;
}

.musician-info {
  padding: 10px;
  text-align: center;        /* Center text inside the card */
}

.musician-info span {
  display: block;            /* Puts the secondary text on a new line */
  margin-top: 5px;
  font-size: 0.9rem;
  color: white;
}

.musician-section {
  display: flex;
  gap: 2rem;
  margin-top: 2rem;
}

.musician-layout {
  display: flex;            /* Arrange children in a row */
  flex-wrap: nowrap;        /* Keep items side by side on desktop *
  align-items: flex-start;  /* Align top edges */
  gap: 20px;  			/* Space between text and image */
  margin-top: 20px;
}

.musician-text,
.musician-image {
  flex: 0 0 50%;            /* Fixed 50% width each */
  box-sizing: border-box;   /* Include padding in width */
  
}

.musician-image img {
  width: 100%;              /* Fill container */
  height: auto;
  display: block;
  border-radius: 8px;
}


				/* ----------------------- */
				/*     IMAGE AND TEXT      */
				/* ----------------------- */

.splitpage-layout {
  display: flex;			/*	Arrange children in a row 		*/
  flex-wrap: nowrap;			/*	Keep items side by side on desktop	*/
  align-items: flex-start;		/*	Align top edges				*/
  gap: 20px;				/*	Space between text and image		*/
  margin-top: 20px;
}
				/* ----------------------- */
				/*  WHITE IMAGE AND TEXT   */
				/* ----------------------- */

.splitpagewhite-image,
.splitpagewhite-text {
  flex: 0 0 50%;			/*	Fixed 50% width each			*/
  box-sizing: border-box;		/*	Include padding in width		*/
}

.splitpagewhite {
  display: flex;
  width: 100%;
  padding: 40px;			/*	optional but recommended for spacing	*/
  box-sizing: border-box;
}

.splitpagewhite-image {
  display: flex;
  justify-content: center;
  align-items: center;
}

.splitpagewhite-image img {
  width: 80%;				/*	Fill most of container			*/
  height: auto;
  display: block;
  border-radius: 8px;
}
				/* ----------------------- */
				/*   BLUE IMAGE AND TEXT   */
				/* ----------------------- */

					/*	Full-width gradient background		*/
.splitpageblue {
  display: flex;
  width: 100%;
  background: linear-gradient(
    180deg, 
    rgba(3, 30, 62, 1) 0%, 
    rgba(0, 102, 136, 1) 100%
  );
  padding: 40px;			/*	optional but recommended for spacing	*/
  box-sizing: border-box;
}

.splitpageblue-image {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Two equal columns */
.splitpageblue-text,
.splitpageblue-image {
  flex: 0 0 50%;
  color: white;
  box-sizing: border-box;
  background: none;  /* ensure no column overrides the gradient */
}

/* Image styling */
.splitpageblue-image img {
  width: 80%;
  height: auto;
  display: block;
  border-radius: 8px;
}

				/* ----------------------- */
				/*      BLUE MUSICIANS     */
				/* ----------------------- */

					/*	Full-width gradient background		*/
.pageblue {
  width: 100%;
  background: linear-gradient(
    180deg, 
    rgba(3, 30, 62, 1) 0%, 
    rgba(0, 102, 136, 1) 100%
  );
  padding: 40px;			/*	optional but recommended for spacing	*/
  box-sizing: border-box;
  Color: white;
}




/* ------------------------------------ */
/* Responsive: stack on smaller screens */
/* ------------------------------------ */

@media (max-width: 800px) {
  .blue-header				/*  This begins a CSS rule that applies to any HTML element with class: <header class="blue-header">  */
 {						/*  So everything inside { } controls how that header looks. */		
      display: flex;				/*  This turns the header into a flexbox container.
						Flexbox is a layout system that makes it easy to align items (like icons and text) in a row.
						Because of this line, everything inside .blue-header:
						appears in a horizontal row can be spaced and centered easily  */			 
 
	align-items: center;			/*  This aligns the items vertically (top → bottom).
						It centers them in the height of the header.
						Without this, icons and text might sit higher or lower.  */
	justify-content: center;			/*  This aligns the items horizontally (left → right).
						It centers the whole row of items in the middle of the header.  */
	h4 {
Font-size: 1.2rem;
}
	gap: 20px;				/*  This creates 40 pixels of space between each item in the row.  */
	padding: 10px 10px;			/*  This adds inner space inside the header.	10px = padding top and bottom	20px = padding left and right	So the
							header isn’t too tight around its content.  */
      }
  .artist-layout {
    flex-wrap: wrap;        /* Allow stacking */
  }
  
  .artist-text,
  .artist-image {
    flex: 0 0 100%;         /* Full width on mobile */
  }

  /* Stack the layout */
  .splitpage-layout {
    flex-direction: column;
    flex-wrap: wrap;
  }

  /* White section columns */
  .splitpagewhite-text,
  .splitpagewhite-image {
    flex: 0 0 100%;
    width: 100%;
  }

  /* Blue section columns */

  .splitpageblue-text,
  .splitpageblue-image {
    flex: 0 0 100%;
    width: 100%;
  }

  /* Optional: make images responsive on mobile */
  .splitpagewhite-image img,
  .splitpageblue-image img {
    width: 80%;
    height: auto;
  }

}

.category-button {
  display: inline-block;        /* Behaves like a button */
  padding: 10px 20px;           /* Space inside the button */
  margin: 3px;                  /* Space between buttons */
  background-color: #fdfdfd;	/* Sets the page background to a very light gray (almost white).	*/
  color: black;                  /* Black text */
  text-decoration: none;         /* Remove underline */
  border-radius: 12px;            /* Rounded corners */
  font-size: 20px;               /* Button text size */
  text-align: center;            /* Center text inside */
  border: 2px solid black;    /* Black border */
  box-shadow: 0 4px 5px rgba(0, 0, 0, 0.3);
  transition: background-color 0.3s, border-color 0.3s; /* Smooth hover transition */
}

.category-button:hover {
  background-color: #e0e0e0;    /* Darker grey on hover */

}

/* --- Sticky Header --- */
.sticky-header {
  position: sticky;
  top: 0;
  background-color: #333;
  color: white;
  display: flex;
/* position: relative;      */        /* make it relative for absolute logo */
  justify-content: space-between;  /* left + center */
  padding: 20px 20px;
  z-index: 50;
}

/* --- Header sections --- */
.header-left, .header-center {
  display: flex;
  align-items: center;
}



.header-center {
   position: absolute;           /* absolutely center logo */
  left: 50%;
  transform: translateX(-50%);

  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 5;
}

.header-center img {
  height: 60px;   /* adjust as needed */
  width: auto;
}

/* --- Dropdown Menu --- */
    .dropdown {                      /*  This is the container that holds both the button and the hidden dropdown panel.  */
      position: relative;            /*  Makes it the reference point for the dropdown menu.  */
      display: inline-block;         /*  Makes the element behave like text but still accept width/height.  */
    }

    .dropbtn {                       /*  This styles the button you click to open the dropdown.  */
      background-color: #4CAF50;     /*  Green background  */
      color: white;                  /*  White text  */
      padding: 10px 20px;            /*  Padding (makes it bigger)  */
      font-size: 16px;
      border: none;                  /*  No border  */
      cursor: pointer;               /*  Pointer cursor  */
      border-radius: 6px;            /*  Rounded corners (6px)  */
    }

    .dropdown-content {
      display: none;                  /*  Hidden by default.  */
      position: absolute;             /*  It will appear below the button.  */
      background-color: #f9f9f9;      /*  Light background color.  */
      min-width: 160px;               /*  Minimum width of the dropdown.  */
      box-shadow: 0px 8px 16px rgba(0,0,0,0.2);   /*  Soft shadow around the dropdown.  */
      z-index: 999;                   /*  Makes sure it appears on top of other elements.  */
      border-radius: 6px;             /*  Slight rounded corners.  */
    }

/* Main dropdown links */
    .dropdown-content a {		/*  This styles the links inside the dropdown menu.  */
      color: black;			/*  Text is black.  */
      padding: 12px 14px;		/*  Adds space around each menu item → makes each option easy to click.  */
      text-decoration: none;		/*  Removes the underline.  */
      display: block;			/*  Makes the whole row clickable, not just the text.  */
      font-size: 16px;			/*  Sets consistent text size.  */
    }


	.dropdown-content a:hover {
		background-color: #f1f1f1;	/*  When you hover a dropdown item, it turns light gray.This gives a nice interactive highlight. Might need to darken it a bit  */
    }

    .dropdown:hover .dropdown-content {
      display: block;                 	/*  This makes the dropdown open when you hover the container.		*/
                                      	/*  Normally: dropdown menu is hidden (display: none)			*/
                                      	/*  On hover: it becomes visible (display: block)			*/
                                      	/*  This is the core of your CSS-only dropdown behavior.		*/
    }

    .dropdown:hover .dropbtn {
      background-color: #3e8e41;	/*  When the user hovers the dropdown, the button changes color.	*/
                                      	/*  Meaning:								*/
					/*  #4CAF50 → normal button color					*/
					/*  #3e8e41 → hover color						*/
					/*  This gives the button a visual "active" state.			*/
    }


/* --- Submenus --- */
.submenu {
  position: relative;
}

.submenu-content {
  display: none;
  position: absolute;
  left: 100%;  /* positions to the right of parent */
  top: 0;
  background-color: #f9f9f9;
  min-width: 160px;
  border-radius: 6px;
  box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
}

.submenu:hover > .submenu-content {
  display: block;
}

.submenu-content a:hover {
  background-color: #e0e0e0;
}

/* --- Mobile Friendly: click to open --- */
@media (max-width: 768px) {
  .dropdown:hover > .dropdown-content,
  .submenu:hover > .submenu-content {
    display: none; /* hover doesn’t work on mobile */
  }

  .dropbtn {
    width: 100%;
    text-align: left;
  }

  .dropdown-content, .submenu-content {
    position: static;
    box-shadow: none;
    width: 100%;
  }
}