/* Main Body */

	html {
		background-image:url('/img/testbg4.webp');
		background-attachment: fixed;
		background-size: 100%;
	}
 
    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: nowrap; margin-right: -10px; margin-left: -10px; margin-top: -35px;}
	.nav-toggle { cursor:pointer; padding:10px; color:white; background:#007bff; border:none; text-align:left; font-size:16px; transition: background-color 0.5s; }
	.nav-toggle a { text-decoration:none; color:#FFFFFF; }
	.nav-toggle.nav-link { display: inline-block; text-decoration: none; line-height: normal; }
	.nav-toggle:hover { background-color: #0057b3; text-decoration: none; }


	/* Start hidden; becomes visible when .open is added to #navMenu */
	.nav-menu { display:none; list-style:none; padding-left:0; margin-top:5px; border:1px solid #ccc; background: white !important; column-count: 3; }
	.nav-menu.open { display:block; }
	
	/* Hover and keyboard focus background for top-level nav items */
	.nav-menu > li:hover,
	.nav-menu > li:focus { background-color: #f0f0f0; }

	/* Menu items */
	.nav-menu li { padding:8px 12px; border-bottom:1px solid #eee; }
	.nav-menu li a { text-decoration:none; color:#007bff; }
	
	
/* Universal text control and misc UI-altering classes */
	

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

	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;
    }




    /* Mobile Card Styles */
    @media screen and (max-width: 700px) {
		#social-menuitem { display: block; }
		
		html { background-size: auto 1090px; }
		
		.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;
		  }
		
		.nav-menu { column-count: 1 !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;
		}
		
		.event-title::before {
			content: "🎫";
		}

		.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;
		}

    }