@charset "UTF-8";
/* CSS Document */

:root {
	--black: #0A0A0A;
	--purple: #6F4B81;
	--pink: #F2A9C5;
	--orange: #E8B55D;
	--blue: #9ECAED;
	--green: #83B692;
	--yellow: #F8E5AD;
	--white: #FEFEFE;
	--grey: #cccccc;

    --gutter: 20px;
	--margin: 60px;

	--small-text: 0.75rem;
	--med-text: 1rem;
	--large-text: 1.75rem;

	--other-text: 0.9rem;
	--big-text: 1.4rem;
	--giant-text: 3rem;
}

*{
	margin: 0;
    padding: 0;
    box-sizing: border-box;
	cursor: default;
	font-family: "Inter", sans-serif;
}

body {
	display: flex;
	flex-direction: column;
	background-color: var(--white);
    letter-spacing: 0.5px;
    color: var(--black);
}

h1 {
	letter-spacing: -0.5px;
	text-transform: uppercase;
	font-weight: 400;
}

a {
	text-decoration: none;
	cursor: pointer;
	color: var(--black);
}
a:hover {
	text-decoration: underline;
	text-decoration-color: var(--purple);
	text-underline-offset: 5px;
}


/* HEADER */
header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: var(--gutter) var(--margin);
	position: relative;
	z-index: 100;
}
#homepage header {
	padding: var(--gutter) var(--margin);
}
/* logo */
.title-position {
	color: var(--purple);
	letter-spacing: 0px;
	display: flex;
	align-items: center;
	gap: 5px;
	cursor: pointer;
}
.title-position h1 {
	font-family: "Sigmar";
	font-size: 2rem;
	letter-spacing: 0.5px;
	cursor: pointer;
	text-transform: lowercase;
}
.title-position p {
	text-transform: uppercase;
	font-size: 1.6rem;
	padding-top: 3px;
	font-weight: 400;
	cursor: pointer;
}
/* colour of logo on different pages */
#watch .title-position {
	color: var(--pink);
}
#listen .title-position {
	color: var(--blue);
}
#travel .title-position {
	color: var(--green);
}
#fanfiction .title-position {
	color: var(--orange);
}
/* hover effect on logo */
.title-position:hover {
	text-decoration: none;
	scale: 1.01;
}

/* MENU */
.pages {
	display: flex;
	text-transform: uppercase;
	z-index: 100;
}
.pages a {
	font-size: var(--other-text);
	font-weight: 500;
	margin: 0;               /* spacing handled by gap + dot spacing */
	position: relative;
	display: inline-block;   /* ensures ::after places nicely */
}
.pages .active {
	font-weight: 700;
	text-decoration: none;
	cursor: default;
}
.pages a:not(:last-child)::after {
  content: "\00B7";
  display: inline-block;
  margin: 0 var(--gutter);
}


/* SUBMENU */
.sub-menu {
	padding: 10px var(--margin) 0;
	border-top: 1px solid var(--grey);
	font-size: var(--small-text);
	text-transform: uppercase;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.sub-menu span {
	display: flex;
}

.sub-menu a {
  margin: 0;               /* spacing handled by gap + dot spacing */
  position: relative;
  display: inline-block; 
  width: 100px;
  text-align: center;
  border: 2px solid var(--grey);
  border-top-left-radius: 5px;
	border-top-right-radius: 5px;
  margin-bottom: -2px;
  padding: 10px;
}
.sub-menu a:hover {
	border: 2px solid var(--grey);
	border-bottom: none;
}

.sub-menu .active {
	font-weight: 700;
	text-decoration: none;
	cursor: default;
	border: 2px solid var(--grey);
	background-color: var(--grey);
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	color: var(--white);
}


/* HOMEPAGE */
.homepage {
	padding: var(--margin);
	display: flex;
	border: 1px solid var(--grey);
	align-items: flex-start;
	gap: var(--gutter);
}

/* .home {
	font-size: var(--other-text);
	text-transform: uppercase;
	font-weight: 700;
	z-index: 100;
} */

/* overview and description of pages on homepage */
#pages-overview {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--gutter);
	width: 100%;
}
.page-overview {
	display: flex;
	flex-direction: column;
	gap: var(--margin);
	align-items: center;
	padding: var(--gutter);
	border-radius: 5px;
	width: calc(100%/3 - 15px);
}
.page-overview h1 {
	color: var(--white);
}
/* colour boxes */
#watch-overview {
	border: 2px solid var(--pink);
	background-color: var(--pink);
}
#listen-overview {
	border: 2px solid var(--blue);
	background-color: var(--blue);
}
#travel-overview {
	border: 2px solid var(--green);
	background-color: var(--green);
}
#bts-overview {
	border: 2px solid var(--purple);
	background-color: var(--purple);
	color: var(--white);
}
#fanfiction-overview {
	border: 2px solid var(--orange);
	background-color: var(--orange);
}

#watch-overview:hover {
	text-decoration: none;
}
#watch-overview h1, #watch-overview p {
	cursor: pointer;
}

/* CALENDAR ON HOMEPAGE */

.homepage .calendar-container {
	padding: 0px;
	flex-direction: column;
	gap: 10px;
	border: 1px solid var(--grey);
	border-radius: 5px;
}
.home-calendar .calendar {
	width: 300px;
	padding: 20px;
	box-shadow: none;
	border-bottom: 1px solid var(--grey);
	border-radius: 0;
}
.home-calendar .calendar-header {
	margin-bottom: 20px;
}
.home-calendar .calendar-header h1 {
	font-size: var(--med-text);
}
.home-calendar .calendar-header button {
	font-size: var(--med-text);
	width: 20px;
	height: 20px;
}
.home-calendar .calendar-grid {
	gap: 5px;
}
.home-calendar .day {
	padding: 5px 5px;
}
.home-calendar .day.has-event::after {
	width: 25px;
	height: 25px;
}
.home-calendar .events-list {
	/* width: auto; */
	padding: 20px 20px;
}
.home-calendar .event-title {
	font-size: var(--small-text);
	font-weight: 700;
}
.home-calendar .event-day {
	width: 30px !important;
	height: 30px;
}
.home-calendar .event-extra-container {
	gap: 0;
}


/*  */
#search-container {
  display: flex;
  justify-content: end;
	margin-bottom: var(--gutter);
	/* margin-top: var(--gutter); */
}

#search-bar {
  padding: 5px 7px;
  border: 1px solid var(--grey);
  border-radius: 5px;
  font-size: var(--med-text);
  transition: all 0.2s ease;
  cursor: text;
}

#search-bar:focus {
  outline: none;
  border-color: none;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
}



.container-fluid {
	padding: var(--gutter) var(--margin);
	display: flex;
	flex-direction: column;
}








/* KPOP CALENDAR */

.calendar-container {
	padding: var(--margin);
	display: flex;
	gap: 40px;
	justify-content:center;
}

.calendar {
    width: 640px;
    border-radius: 5px;
    box-shadow: 0 0 5px 1px rgba(0,0,0,0.1);
    padding: 40px;
}

.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
}

.calendar-header h1 {
	font-size: var(--large-text);
    margin: 0;
}

.calendar-header button {
    background: none;
    border: none;
    font-size: var(--large-text);
    cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
}

.calendar-header button:hover {
	background-color: var(--grey);
	color: var(--white);
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    gap: var(--gutter);
}

.day-name {
    font-weight: 700;
    color: var(--grey);
    font-size: var(--small-text);
	text-transform: uppercase;
}

.day {
    padding: 12px 1px;
    border-radius: 5px;
    position: relative;
	font-size: var(--med-text);
}

.day.has-event::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border-radius: 5px;
	border-width: 2px;
	border-style: solid;
    border-color: var(--event-color, var(--purple));
}

.events-list {
    width: 480px;
    padding: 40px;
	display: flex;
	flex-direction: column;
	gap: var(--gutter);
}

.event {
	display: flex;
	gap: var(--gutter);
	align-items: center;
}

.event-day {
	font-size: var(--med-text);
    width: 40px;
    height: 40px;
    border-radius: 5px;
	border-width: 2px;
	border-style: solid;
    border-color: var(--event-color, var(--purple));
	display: flex;
	align-items: center;
	justify-content: center;
}

.event-extra-container {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.event-title {
    font-weight: 500;
	font-size: var(--med-text);
	text-transform: uppercase;
}

.event-info {
    font-size: var(--small-text);
	display: flex;
	gap: 5px;
}




/* LINKS */

.side-bar {
	padding: var(--margin);
	display: flex;
	gap: var(--margin);
	width: 100%;
	border-top: 1px solid #ccc;
}

.links-title {
	width: 160px;
}

.side-bar h1 {
	padding-bottom: var(--gutter);
	font-size: var(--med-text);
	font-weight: 500;
}

.side-bar h6 {
	font-size: var(--small-text);
	font-weight: 400;
	font-style: italic;
}

.links-group {
	display: flex;
	gap: var(--margin);
	width: 100%;
	flex-wrap: wrap;
}

.links-group span {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.links-heading {
	font-weight: 700;
	font-size: var(--small-text);
	text-transform: uppercase;
	padding-bottom: var(--gutter);
}


/* FOOTER */

footer {
	padding: var(--margin) var(--margin) var(--gutter);
	border-top: 1px solid #ccc;
	display: flex;
	flex-direction: column;
	gap: var(--margin);
}
.footer-links, .legal-stuff {
	display: flex;
	justify-content: space-between;
	font-size: var(--small-text);
}
.footer-links img {
	height: 80px;
}
.footer-links div {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.copyright, .legal-stuff a {
	font-weight: 700;
	text-transform: uppercase;
}
#legal-links {
	display: flex;
	gap: 5px;
	font-size: var(--small-text);
	text-transform: uppercase;
}

#cookie-banner {
	display: none;
	flex-direction: column;
	position: fixed; 
	bottom: 20px; 
	left: 50%; 
	transform: translateX(-50%);
    background: var(--white); 
	border: 1px solid #ccc; 
	box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.1);
    padding: var(--gutter);
	border-radius: 5px; 
	/* max-width: 400px;  */
	font-size: var(--other-text); 
	z-index: 9999;
}

#cookie-banner p {
	margin: 0 0 0.5rem 0; 
	text-align: center;
}

#cookie-banner button {
	background: var(--purple); 
	color: var(--white); 
	border: none; 
	border-radius: 5px; 
	padding: 10px 14px; 
	cursor: pointer;
}

.cookie-container {
	padding: var(--margin);
	display: flex;
	flex-direction: column;
	gap: var(--gutter);
}

.cookie-container h3 {
	padding-top: var(--gutter);
}

.cookie-container ul {
	padding-left: var(--gutter);
}

@media (max-width: 700px) {
	header {
		flex-direction: column;
		gap: var(--gutter);
	}
	.page-overview {
		width: 100%;
		gap: var(--gutter);
	}
	.home-calendar {
		flex-wrap: wrap;
	}
	.event-info {
		flex-wrap: wrap;
		row-gap: 0;
	}
	.side-bar{
		flex-direction: column;
	}
	.legal-stuff {
		flex-direction: column;
		gap: var(--gutter);
	}


  .photo-grid {
    grid-template-columns: 1fr; /* 1 column on small screens */
  }

  #artist-grid {
    height: auto;
  }
  .artist {
    position: static;
    width: 100%;
    height: auto;
    border-radius: 10px;
  }
  .artist img {
    border-radius: 10px;
  }
  .artist.expanded {
    transform: none;
    position: static;
    width: 100%;
    height: auto;
    box-shadow: none;
  }
}