/* Main Body */

	body::before {
	  content: "";
	  position: fixed;
	  inset: 0;                 /* top:0; right:0; bottom:0; left:0; */
	  z-index: -1;
	  background-image: url('/img/concertbackground.webp');
	  background-size: cover;   /* or 100vw 100vh */
	  background-position: center;
	  background-repeat: no-repeat;
	}
 
    body {
		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
		padding: 10px;
		max-width: 1000px;
		margin: 0 auto;
	}
	

	
	.body {
		background-color: #ffffff;
		padding: 10px;
	}
	
/* Header */	

	.site-logo img {
		max-width: 100%;
		-webkit-filter: drop-shadow(12px 12px 7px rgba(255, 255, 255, 1));
		filter: drop-shadow(12px 12px 7px rgba(255, 255, 255, 1));
	}
	
	.header-wrapper {
		justify-content: space-between;
		align-items: center;
		text-align: center;
	}

/* Navigation */

	#social-menuitem {
		width: 32px;
		padding: 2px;
		margin: 2px;
		margin-right: 5px;
		float: right;
		display: none;
	}
	
	.nav-container { margin-bottom:-30px; background:#007bff; white-space:normal; margin-right:-10px; margin-left:-10px; margin-top:-35px; display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:8px; box-sizing:border-box; }
	.nav-toggle { cursor:pointer; padding:8px 10px; color:#FFFFFF; background:#007bff; border:none; text-align:left; font-size:16px; transition:background-color .2s; display:inline-flex; align-items:center; gap:8px; text-decoration:none; }
	.nav-toggle img { display:inline-block; vertical-align:middle; }
	.nav-toggle:hover { background-color:#0057b3; text-decoration:none; }
	.nav-menu { display:none; list-style:none; padding:8px; margin:5px 0 0 0; border:1px solid #ccc; background:#fff !important; box-sizing:border-box; width:100%; grid-template-columns:repeat(4,minmax(160px,1fr)); gap:0; }
	.nav-menu.open { display:grid; }
	.nav-menu > li:hover, .nav-menu > li:focus { background-color:#f0f0f0; }
    .nav-menu li { padding: 0; border-bottom: 1px solid #eee; }
    .nav-menu li a { display: block; width: 100%; padding: 8px 12px; text-decoration: none; color: #007bff; box-sizing: border-box; }
    .nav-menu li a:focus { outline: 2px solid #0057b3; outline-offset: -2px; }
	.subscribe-text { display:inline; }
	
	
	
	
	
/* Universal text control and misc UI-altering classes */
	

	h1 {
		margin-top: 1rem;
		color: #007bff;
		text-align: center;
	}

	a {
		color: #2563eb;
		text-decoration: none;
		font-weight: 500;
	}
	a:hover {
		text-decoration: underline;
	}
	.fb>img {
		vertical-align: middle;
	}

	.social-link {
		flex: 1;                 /* takes remaining whitespace */
		display: flex;
		justify-content: center; /* centers horizontally */
	}

	.social-link img {
		width: 80px;             /* adjust as needed */
		height: auto;
		opacity: 0.5;
		transition: transform 0.2s ease;
	}
	
	.social-link img:hover {
		transform: scale(1.1);
		opacity: 1.0;
	}

	.pinlink::before {
		content: "📌";
	}
	.weblink::before {
		content: "🌐";
	}
	
	details {
	   	cursor: pointer;
		color: #2563eb;
    }

/* Month Navigation */

	.month-nav{margin: 10px; padding:6px 4px;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
	.month-nav::before { content: "Jump: "; }
	.month-nav .month{display:inline-block;width:40px;height:28px;line-height:28px;text-align:center;border-radius:4px;background:#f5f5f5;color:#222;text-decoration:none;font-weight:600;position:relative;transition: width 0.5s; overflow:none; }
	.month-nav .month.present{background:#dff0d8} /* has events */
	.month-nav .month.empty{opacity:0.35;filter:grayscale(80%);pointer-events:none} /* no events */
	.month-nav .month:hover{ background:#bfedac; }

/* Event List Table */


    .month-header td {
		background: #007bff !important;
		color: #FFFFFF !important;
		font-weight: 600;
		font-size: 18px;
		padding: 14px;
		border-top: 2px solid #c7d2fe;
		text-align: left;
		position: sticky;
		top: 0px;
		z-index: 97;
	}
	
	.eventlist {
		border-collapse: separate;
		border-spacing: 0;
		width: 100%;
		background: #ffffff;
		border-radius: 10px;
		box-shadow: 0 4px 12px rgba(0,0,0,0.06);
	}
	
    .eventlist th {
		background: #f3f4f6;
		color: #374151;
		font-size: 12px;
		text-transform: uppercase;
        letter-spacing: .05em;
        padding: 12px;
        border-bottom: 1px solid #e5e7eb;
    }
    .eventlist td {
        padding: 10px;
        border-bottom: 1px solid #f0f0f0;
        vertical-align: top;
        color: #111827;
    }
    .eventlist tr:hover td {
        background-color: #f9fbff;
    }


	.datecell {
		font-size: 0.8em;
		white-space: nowrap;
	}

	
	.agricultural-show { background:#FEF2F2;}
	.carnival { background:#FFF7ED;}
	.cultural-festival { background:#FFFBEB;}
	.festival { background:#FEFCE8;}
	.food-festival { background:#F7FEE7;}
	.market { background:#F0FDF4;}
	.music { background:#EEF2FF;}
	.music-festival { background:#FFF1F2;}
	.writers-festival { background:#ECFEFF;}	
		
    /* Show/Hide rows per device */
    .desktop-row { display: table-row; }
    .mobile-card-row { display: none; }
	.hideondesktop { display: none; }
	
	

/* Suburb List Page */

	#suburblist {
		column-count: 4;
		column-gap: 20px;
	}
	
	#suburblist div {
		break-inside: avoid;
	}
	
	/* apply to each letter-group wrapper so h2 and ul stay together */
	#suburblist .group {
		/* prevent column breaks inside the whole group */
		-webkit-column-break-inside: avoid; /* Chrome/Safari */
		-moz-column-break-inside: avoid;    /* older Firefox */
		column-break-inside: avoid;         /* legacy */
		break-inside: avoid;                /* modern spec */
		page-break-inside: avoid;           /* for print */
		/* optional: ensure block formatting */
		display: block;
		/* optional: reduce extra spacing when column breaks attempt to happen */
		margin: 0 0 1em 0;
	}

	/* optional: if headings have top margin that causes break, reduce it */
	#suburblist .group h2 {
		margin-top: 0.2em;
	}

	/* nav disabled style */
	.alphabet-nav .disabled {
		color: #c0c0c0;
		cursor: default;
		text-decoration: none;
		pointer-events: none; /* prevents clicks in supporting browsers */
	}
	
	
/* Event page */
	
    .galleryphoto {
      width: 150px;
      height: 95px;
      object-fit: cover;  /* cover = fills box and crops; use contain to letterbox instead */
      cursor: pointer;
	  margin: 5px;
    }

/** Social Button CSS **/

	.share-btn {
	  display: inline-block;
	  color: #ffffff;
	  border: none;
	  padding: 0.1em 0.6em;
	  outline: none;
	  text-align: center;
	  font-size: 0.9em;
	  margin: 0 0.2em;
	}

	.share-btn:focus,
	.share-btn:hover {
	  text-decoration: none;
	  opacity: 0.8;
	}

	.share-btn:active {
	  color: #e2e2e2;
	}

	.share-btn.facebook    { background: #3B5998; }
	.share-btn.reddit      { background: #ff5700; }
	.share-btn.twitter     { background: #55acee; }
	.share-btn.email       { background: #444444; }
	.share-btn.owner       { background: #276221; }


    /* Mobile Card Styles */
    @media screen and (max-width: 700px) {
		html { background-size: auto 1500px; background-size: auto 100%; }
		
		.hideondesktop { display: block; }
		.hideonmobile, .desktop-row,.social-link,thead { display: none; }

		  .table-stack,
		  .table-stack thead,
		  .table-stack tbody,
		  .table-stack th,
		  .table-stack td,
		  .table-stack tr {
			display: block;
		  }
		
		#social-menuitem { display:block; }
		.nav-container { gap:5px; padding:4px; margin-top:-32px; margin-bottom:-20px; margin-right:-10px; margin-left:-10px; }
		.nav-toggle { padding:6px 8px; font-size:14px; gap:6px; }
		.nav-toggle img { width:18px; height:auto; }
		.nav-menu { grid-template-columns:1fr !important; padding:6px; margin:4px 0 0 0; }
		.nav-menu.open { display:grid; }
		.nav-menu li { padding:6px 8px; border-bottom:1px solid #eee; font-size:14px; line-height:1.2; }
		.nav-menu li a { font-size:14px; }
  
		h1,h2 { text-align: center; }
  
		.subscribe-text { display:none !important; }
		
        .mobile-card-row { display: block; width: 100%;}

        .mobile-card-row td {
            background: white;
            margin-bottom: 10px;
            padding: 5px;
            border-radius: 10px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.06);
			display: block;
        }

        .date-header {
            font-weight: 600;
            margin-bottom: 6px;
        }
		
		.event-header {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap; /* allow title to wrap */
			align-items: center;
			width: 100%;
		}

		.loc-expand {
			display: flex;
			align-items: center;
			margin-left: auto;
			white-space: nowrap;
			flex-shrink: 0; /* prevents the arrow from breaking onto a new line */
		}
		
		.loc-expand::after {
		  content: "\25BC";      /* ▼ */
		  margin-left: 6px;      /* small space between suburb and arrow */
		  display: inline-block;
		  flex-shrink: 0;
		  line-height: 1;
		}
		
		.event-toggle:checked ~ .event-header .loc-expand::after {
		  content: "\25B2";      /* ▲ */
		}

        .event-item {
            padding: 6px 0;
            border-bottom: 1px solid #f0f0f0;
			display: flex;
			flex-wrap: wrap;
			width: 100%;
        }

		.event-title {
			flex: 1 1 auto;
			min-width: 0;
			color: #0366d6;        /* link-blue (adjust as needed) */
			cursor: pointer;
		}
		

		.loc {
			flex: 0 1 auto;
			margin-left: auto; 
			text-align: right;
			padding-left: 5px;
		}

		/* When there isn’t enough space, force location onto its own line */
		.event-item::after {
			content: '';
			flex-basis: 100%;
			width: 0;
			height: 0;
		}

        .event-item:last-child {
            border-bottom: none;
        }
		

		/* the “expand” button label */
		.expand-btn {
		  display: flex;
		  justify-content: space-between;
		  align-items: center;
		  flex-wrap: wrap;
		  width: 100%;
		}

		/* hidden by default */
		.event-details {
			display: none;
			padding: 12px;
			border-top: 1px solid #f0f0f0;
			width: 100%;
			line-height: 1.5em;
			margin-top: 10px;
		}
		
		a.fb::after {
			content: " Facebook";
		}

		/* hide the toggle checkbox */
		.event-toggle {
			display: none;
		}		
		/* show details when checkbox is checked */
		.event-toggle:checked ~ .event-details {
			display: block;
		}
		/* flip arrow when expanded */
		
		.event-toggle:checked + .expand-btn::after {
			content: "\25B2";  /* ▲ */
		}
		
		#suburblist {
			column-count: 2 !important;
			column-gap: 20px;
		}

    }