@import url('https://fonts.googleapis.com/css2?family=Alfa+Slab+One&family=Kaushan+Script&display=swap');

/* =====================================================================
   ICS - ANNUAL PARISH CARNIVAL 2027
   Page CSS - visual identity taken from the 2027 carnival flyer.
   The full flyer treatment lives in the hero only; the other sections
   follow the site type scale (main.css TYPOGRAPHY) with flyer colors.
   All classes/IDs use the "icc-" prefix to avoid clashing with
   main.css / structure.css.

   Flyer palette
	#102a50  navy
	#1f7a3a  green
	#5fae3e  light green (outline)
	#f5c63b  gold (ticket)

   INDEX
	- SHARED (shamrock, kicker, headings, buttons)
	- HERO
	- WRISTBANDS
	- SPONSORS
	- SUPPORT
   ===================================================================== */

/*-----------------------------------------------------------  SHARED  -------------------------*/
.content .icc-center { text-align: center; }

/* Shamrock on both sides (each element sets its own size/position) */
.content p.icc-ribbon,
.content p.icc-kicker,
.icc-hero section .content p.icc-dates {
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='%2343a047' transform='translate(32 28)'%3E%3Cpath id='l' d='M0 0C-2-4-12-6-12-14C-12-20-5-22 0-16C5-22 12-20 12-14C12-6 2-4 0 0Z'/%3E%3Cuse href='%23l' transform='rotate(120)'/%3E%3Cuse href='%23l' transform='rotate(240)'/%3E%3C/g%3E%3Cpath d='M32 28Q33 46 41 60' stroke='%232e7d32' stroke-width='4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='%2343a047' transform='translate(32 28)'%3E%3Cpath id='l' d='M0 0C-2-4-12-6-12-14C-12-20-5-22 0-16C5-22 12-20 12-14C12-6 2-4 0 0Z'/%3E%3Cuse href='%23l' transform='rotate(120)'/%3E%3Cuse href='%23l' transform='rotate(240)'/%3E%3C/g%3E%3Cpath d='M32 28Q33 46 41 60' stroke='%232e7d32' stroke-width='4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
}

/* Small label above section headings */
.content p.icc-kicker {
	display: table;
	margin: 0 auto 6px;
	padding: 0 30px;
	color: #1f7a3a;
	font-family: 'Poppins', sans-serif;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 3px;
	text-transform: uppercase;
	background-size: 18px 18px;
	background-position: 0 center, 100% center;
}

/* Section headings: site h1 scale, flyer slab font, no outline */
.content h2.icc-heading {
	margin: 0 0 15px;
	text-align: center;
	color: #102a50;
	font-family: 'Alfa Slab One', serif;
	font-size: 36px;
	font-weight: 400;
	line-height: 1.2;
}

@media screen and (max-width:600px) {
	.content h2.icc-heading { font-size: 28px; }
	.content p.icc-kicker { font-size: 14px; letter-spacing: 1.5px; padding: 0 24px; background-size: 15px 15px; }
}

/* Buttons */
.content a.icc-btn {
	display: inline-block;
	padding: 13px 30px;
	background: #102a50;
	border: 3px solid #102a50;
	border-radius: 40px;
	color: white;
	font-family: 'Poppins', sans-serif;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-decoration: none;
	transition: background 0.3s, color 0.3s, border-color 0.3s;
}

.content a.icc-btn:hover {
	background: white;
	color: #102a50;
}

.content a.icc-btn.icc-btn-green {
	background: #1f7a3a;
	border-color: #1f7a3a;
}

.content a.icc-btn.icc-btn-green:hover {
	background: white;
	color: #1f7a3a;
}

.content a.icc-btn.icc-btn-white {
	background: transparent;
	border-color: white;
}

.content a.icc-btn.icc-btn-white:hover {
	background: white;
	color: #102a50;
}

/*-----------------------------------------------------------  HERO  ---------------------------*/
.icc-hero {
	position: relative;
	padding: 50px 0;
	background:
		radial-gradient(ellipse 30% 12% at 15% 30%, rgba(255,255,255,0.8), transparent 70%),
		radial-gradient(ellipse 25% 10% at 85% 22%, rgba(255,255,255,0.7), transparent 70%),
		radial-gradient(ellipse 35% 12% at 70% 62%, rgba(255,255,255,0.5), transparent 70%),
		linear-gradient(180deg, #7fbbe6 0%, #c4e1f5 40%, #fde8d4 78%, #fbd9b5 100%);
	overflow: hidden;
}

/* String lights */
.icc-hero::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 30px;
	background:
		radial-gradient(circle at 50% 18px, #fff8d6 0 4px, rgba(255,205,90,0.7) 5px, transparent 11px) 0 0 / 64px 30px repeat-x,
		linear-gradient(#3b3b3b, #3b3b3b) 0 12px / 100% 1px no-repeat;
}

.icc-hero section .content { text-align: center; }

/* Navy ribbon with notched ends */
.content p.icc-ribbon {
	display: table;
	margin: 0 auto 6px;
	padding: 6px 54px;
	background-color: #102a50;
	color: white;
	font-family: 'Poppins', sans-serif;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 4px;
	line-height: 1.2;
	text-transform: uppercase;
	clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 50%, 100% 100%, 0 100%, 14px 50%);
	background-size: 20px 20px;
	background-position: 22px center, calc(100% - 22px) center;
}

.icc-hero section .content h1.icc-title {
	margin: 0 0 20px;
	text-align: center;
	line-height: 1;
}

.icc-hero section .content h1.icc-title .icc-script {
	display: block;
	position: relative;
	z-index: 1;
	margin-bottom: -0.12em;
	color: #102a50;
	font-family: 'Kaushan Script', cursive;
	font-size: clamp(46px, 6vw, 80px);
	font-weight: 400;
	text-transform: none;
}

/* Outlined slab word, as on the flyer */
.icc-hero section .content h1.icc-title .icc-slab {
	display: block;
	color: #102a50;
	font-family: 'Alfa Slab One', serif;
	font-size: clamp(46px, 7.5vw, 100px);
	font-weight: 400;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-shadow:
		0.03em 0em #fff, 0.028em 0.011em #fff, 0.021em 0.021em #fff, 0.011em 0.028em #fff,
		0em 0.03em #fff, -0.011em 0.028em #fff, -0.021em 0.021em #fff, -0.028em 0.011em #fff,
		-0.03em 0em #fff, -0.028em -0.011em #fff, -0.021em -0.021em #fff, -0.011em -0.028em #fff,
		0em -0.03em #fff, 0.011em -0.028em #fff, 0.021em -0.021em #fff, 0.028em -0.011em #fff,
		0.06em 0em #5fae3e, 0.055em 0.023em #5fae3e, 0.042em 0.042em #5fae3e, 0.023em 0.055em #5fae3e,
		0em 0.06em #5fae3e, -0.023em 0.055em #5fae3e, -0.042em 0.042em #5fae3e, -0.055em 0.023em #5fae3e,
		-0.06em 0em #5fae3e, -0.055em -0.023em #5fae3e, -0.042em -0.042em #5fae3e, -0.023em -0.055em #5fae3e,
		0em -0.06em #5fae3e, 0.023em -0.055em #5fae3e, 0.042em -0.042em #5fae3e, 0.055em -0.023em #5fae3e,
		0 0.09em 0 #1f7a3a,
		0 0.12em 0.12em rgba(0,0,0,0.2);
}

/* Navy banner under the title */
.icc-hero section .content p.icc-banner {
	display: table;
	margin: 0 auto 35px;
	padding: 9px 45px;
	background: #102a50;
	color: white;
	font-family: 'Poppins', sans-serif;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 2px;
	line-height: 1.5;
	text-transform: uppercase;
	clip-path: polygon(0 0, 100% 0, calc(100% - 18px) 50%, 100% 100%, 0 100%, 18px 50%);
}

/* Marquee board with light bulbs */
.icc-marquee {
	position: relative;
	max-width: 600px;
	margin: 0 auto 55px;
	padding: 18px;
	background: #1f7a3a;
	border-radius: 36px;
	box-shadow: 0 10px 24px rgba(16,42,80,0.25);
}

.icc-marquee::before {
	content: '';
	position: absolute;
	inset: 4px;
	border-radius: 32px;
	background: radial-gradient(circle, #fff 0 4px, rgba(255,255,255,0.35) 5px, transparent 6px) center / 20px 20px;
}

.icc-marquee-inner {
	position: relative;
	z-index: 1;
	background: white;
	border: 3px solid #102a50;
	border-radius: 22px;
	padding: 20px 20px 0;
}

.icc-hero section .content h2.icc-month {
	margin: 0;
	text-align: center;
	color: #1f7a3a;
	font-family: 'Poppins', sans-serif;
	font-size: clamp(28px, 3.5vw, 40px);
	font-weight: 600;
	letter-spacing: 3px;
	line-height: 1;
	text-transform: uppercase;
}

/* "8-10" with a shamrock on each side */
.icc-hero section .content p.icc-dates {
	margin: 4px 0 0;
	padding: 0 1em;
	color: #102a50;
	font-family: 'Poppins', sans-serif;
	font-size: clamp(60px, 8vw, 96px);
	font-weight: 800;
	line-height: 1;
	white-space: nowrap;
	background-size: 0.6em 0.6em;
	background-position: 0.2em center, calc(100% - 0.2em) center;
}

.icc-hero section .content p.icc-year {
	margin: 4px 0 15px;
	color: #1f7a3a;
	font-family: 'Poppins', sans-serif;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 8px;
}

.icc-days {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	margin: 0 -20px;
	border-top: 2px solid #1f7a3a;
}

.icc-days > div {
	padding: 12px 8px 16px;
	border-left: 2px solid #1f7a3a;
}

.icc-days > div:first-child { border-left: 0; }

.icc-hero section .content .icc-days h3 {
	margin: 0;
	text-align: center;
	color: #102a50;
	font-family: 'Alfa Slab One', serif;
	font-size: 20px;
	font-weight: 400;
	line-height: 1.2;
	text-transform: uppercase;
}

.icc-hero section .content .icc-days p {
	margin: 4px 0 0;
	color: #102a50;
	font-family: 'Poppins', sans-serif;
	font-size: 17px;
	font-weight: 700;
}

/* Gold "FREE ENTRY" ticket */
.content p.icc-ticket {
	position: absolute;
	right: -60px;
	bottom: -30px;
	z-index: 2;
	margin: 0;
	padding: 8px 20px;
	background: #f5c63b;
	transform: rotate(-7deg);
	filter: drop-shadow(0 5px 6px rgba(0,0,0,0.25));
	-webkit-mask: radial-gradient(circle at 0 50%, transparent 11px, #000 12px) left / 51% 100% no-repeat,
	              radial-gradient(circle at 100% 50%, transparent 11px, #000 12px) right / 51% 100% no-repeat;
	        mask: radial-gradient(circle at 0 50%, transparent 11px, #000 12px) left / 51% 100% no-repeat,
	              radial-gradient(circle at 100% 50%, transparent 11px, #000 12px) right / 51% 100% no-repeat;
}

.content p.icc-ticket span {
	display: block;
	padding: 8px 18px;
	border: 2px dashed #102a50;
	color: #102a50;
	font-family: 'Alfa Slab One', serif;
	font-size: 24px;
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
}

.icc-buttons {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
}

/* Split hero: title on the left, date marquee on the right */
@media screen and (min-width:880px) {
	.icc-hero { padding: 45px 0 55px; }

	.icc-hero-grid {
		display: grid;
		grid-template-columns: 1.1fr 1fr;
		gap: 50px;
		align-items: center;
		max-width: 1100px;
		margin: 0 auto;
	}

	.icc-hero section .content .icc-hero-text { text-align: left; }

	.icc-hero-text p.icc-ribbon { margin-left: 0; }

	.icc-hero section .content h1.icc-title { text-align: left; }

	.icc-hero section .content h1.icc-title .icc-script {
		font-size: clamp(44px, 5vw, 68px);
		margin-left: 0.3em;
	}

	.icc-hero section .content h1.icc-title .icc-slab { font-size: clamp(52px, 6vw, 84px); }

	.icc-hero section .content p.icc-banner {
		margin: 0 0 28px;
		padding: 8px 34px;
		font-size: 14px;
		letter-spacing: 1.5px;
	}

	.icc-hero-text .icc-buttons { justify-content: flex-start; }

	.icc-hero-date .icc-marquee { margin: 0; max-width: none; }

	.icc-hero section .content p.icc-dates { font-size: clamp(60px, 6.5vw, 88px); }

	.content p.icc-ticket { right: -25px; bottom: -32px; }
}

/* Narrower marquee on tablets: keep each day's hours on one line */
@media screen and (min-width:880px) and (max-width:1179px) {
	.icc-hero section .content .icc-days h3 { font-size: 16px; }
	.icc-hero section .content .icc-days p { font-size: 14px; white-space: nowrap; }
	.icc-days > div { padding-left: 4px; padding-right: 4px; }
}

@media screen and (max-width:879px) {
	.icc-hero { padding-top: 45px; }
	.icc-hero-grid { display: flex; flex-direction: column; }
	.icc-hero-text { display: contents; }
	.icc-hero-date { order: 1; }
	.icc-hero-text .icc-buttons { order: 2; }
	.icc-hero section .content p.icc-banner { padding: 8px 30px; font-size: 13px; letter-spacing: 1px; }
	.icc-marquee { margin-bottom: 35px; padding: 14px; border-radius: 30px; }
	.icc-marquee::before { border-radius: 26px; background-size: 16px 16px; }
	.icc-marquee-inner { border-radius: 18px; }
	.icc-days { grid-template-columns: 1fr; }
	.icc-days > div { border-left: 0; border-top: 2px solid #1f7a3a; }
	.icc-days > div:first-child { border-top: 0; }
	.content p.icc-ticket {
		position: relative;
		right: auto;
		bottom: auto;
		display: table;
		margin: 18px auto -4px;
	}
	.content p.icc-ticket span { font-size: 22px; }
}

/*-----------------------------------------------------------  WRISTBANDS  ---------------------*/
.icc-wristbands {
	background: #102a50;
	border-top: 6px solid #1f7a3a;
	padding: 42px 0 38px;
}

.icc-wristbands section .content p.icc-kicker { color: #7fd6a4; }
.icc-wristbands section .content h2.icc-heading { color: white; margin-bottom: 30px; }

.icc-wb-list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 25px;
	max-width: 860px;
	margin: 0 auto 25px;
}

/* Ticket-shaped card: info + price stub with notches */
.icc-wb-card {
	display: grid;
	grid-template-columns: 1fr 120px;
	background: white;
	border-radius: 12px;
	overflow: hidden;
	-webkit-mask: radial-gradient(circle at calc(100% - 120px) 0, transparent 11px, #000 12px) top / 100% 51% no-repeat,
	              radial-gradient(circle at calc(100% - 120px) 100%, transparent 11px, #000 12px) bottom / 100% 51% no-repeat;
	        mask: radial-gradient(circle at calc(100% - 120px) 0, transparent 11px, #000 12px) top / 100% 51% no-repeat,
	              radial-gradient(circle at calc(100% - 120px) 100%, transparent 11px, #000 12px) bottom / 100% 51% no-repeat;
}

.icc-wb-info {
	padding: 22px 22px 20px;
	border-right: 2px dashed #c9d3e0;
}

.icc-wristbands section .content .icc-wb-info h3 {
	margin: 0 0 4px;
	color: #102a50;
	font-family: 'Alfa Slab One', serif;
	font-size: 22px;
	font-weight: 400;
	line-height: 1.2;
	text-transform: uppercase;
}

.icc-wristbands section .content .icc-wb-info p {
	margin: 0;
	color: #333;
	font-size: 18px;
}

.icc-wb-price {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #1f7a3a;
	color: white;
	font-family: 'Poppins', sans-serif;
	font-size: 36px;
	font-weight: 800;
}

.icc-wristbands section .content p.icc-soon {
	margin: 0;
	text-align: center;
	color: #c9d3e0;
	font-size: 18px;
}

.icc-wristbands section .content p.icc-soon::before {
	content: '\f017';
	font-family: 'Font Awesome 5 Free';
	font-weight: 400;
	margin-right: 8px;
}

@media screen and (max-width:879px) {
	.icc-wb-list { grid-template-columns: 1fr; max-width: 460px; }
}

@media screen and (max-width:420px) {
	.icc-wb-card {
		grid-template-columns: 1fr 96px;
		-webkit-mask: none;
		        mask: none;
	}
	.icc-wb-price { font-size: 30px; }
}

/*-----------------------------------------------------------  SPONSORS  -----------------------*/
.icc-sponsors {
	background: var(--gray1);
	padding: 45px 0 45px;
}

.icc-sponsors section .content p.icc-intro {
	max-width: 760px;
	margin: 0 auto 30px;
	text-align: center;
	font-size: 18px;
}

.icc-tiers {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 25px;
}

/* Whole card is the Square link */
.content a.icc-tier {
	display: flex;
	flex-direction: column;
	align-items: center;
	background: white;
	border: 1px solid #e3e8ef;
	border-radius: 14px;
	overflow: hidden;
	color: #222;
	text-align: center;
	text-decoration: none;
	transition: transform 0.25s, box-shadow 0.25s;
}

.content a.icc-tier:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 24px rgba(16,42,80,0.14);
	color: #222;
}

.icc-tier .icc-tier-head {
	display: block;
	width: 100%;
	padding: 16px 15px 30px;
	background: #102a50;
	color: white;
	font-family: 'Alfa Slab One', serif;
	font-size: 18px;
	letter-spacing: 0.5px;
	line-height: 1.2;
	text-transform: uppercase;
}

.icc-tier .icc-tier-badge {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin-top: -26px;
	border: 3px solid white;
	border-radius: 50%;
	background: #1f7a3a;
	color: white;
	font-size: 20px;
}

.icc-tier .icc-tier-price {
	display: block;
	margin: 10px 0 14px;
	color: #102a50;
	font-family: 'Poppins', sans-serif;
	font-size: 36px;
	font-weight: 800;
	line-height: 1;
}

.content .icc-tier ul {
	width: 100%;
	margin: 0 0 15px;
	padding: 0 22px;
	text-align: left;
}

.content .icc-tier ul li { font-size: 17px; }

.content .icc-tier ul li::before { color: #1f7a3a; }

.icc-tier .icc-tier-btn {
	display: inline-block;
	margin: auto 0 22px;
	padding: 10px 26px;
	border: 2px solid #1f7a3a;
	border-radius: 40px;
	color: #1f7a3a;
	font-family: 'Poppins', sans-serif;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	transition: background 0.25s, color 0.25s;
}

.content a.icc-tier:hover .icc-tier-btn {
	background: #1f7a3a;
	color: white;
}

/* Tier medal colors */
.icc-tier-presenting .icc-tier-badge { background: #f5c63b; color: #102a50; }
.icc-tier-diamond .icc-tier-badge { background: #4aa8d8; }
.icc-tier-gold .icc-tier-badge { background: #d4a017; }
.icc-tier-silver .icc-tier-badge { background: #9aa3ad; }
.icc-tier-copper .icc-tier-badge { background: #b87333; }
.icc-tier-friend .icc-tier-badge { background: #1f7a3a; }

/* Presenting: gold line under the header */
.icc-tier-presenting .icc-tier-head { box-shadow: inset 0 -4px 0 #f5c63b; }

@media screen and (min-width:880px) and (max-width:1179px) {
	.icc-tiers { grid-template-columns: repeat(2, 1fr); }
}

@media screen and (max-width:879px) {
	.icc-tiers { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
}

/*-----------------------------------------------------------  SUPPORT  ------------------------*/
.icc-support {
	background: linear-gradient(135deg, #22843f 0%, #1f7a3a 50%, #196a31 100%);
	padding: 45px 0 40px;
	color: white;
}

.icc-support section .content {
	max-width: 980px;
	margin: 0 auto;
}

.icc-support-grid {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 28px;
	align-items: center;
	margin-bottom: 30px;
}

/* Gold icon circle, same gold as the flyer ticket */
.icc-support-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 78px;
	height: 78px;
	border-radius: 50%;
	background: #f5c63b;
	color: #102a50;
	font-size: 34px;
	box-shadow: 0 6px 14px rgba(0,0,0,0.18);
}

.icc-support section .content h2.icc-heading {
	margin: 0 0 6px;
	text-align: left;
	color: white;
	font-size: 30px;
}

.icc-support section .content .icc-support-text p {
	margin: 0;
	font-size: 18px;
	line-height: 1.5;
	color: rgba(255,255,255,0.92);
}

.content a.icc-btn.icc-btn-gold {
	background: #f5c63b;
	border-color: #f5c63b;
	color: #102a50;
	padding: 15px 34px;
	white-space: nowrap;
	box-shadow: 0 6px 14px rgba(0,0,0,0.18);
}

.content a.icc-btn.icc-btn-gold:hover {
	background: white;
	border-color: white;
	color: #102a50;
}

/* Contact bar: info on the left, links on the right */
.icc-contact {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 30px;
	padding: 16px 26px;
	background: rgba(255,255,255,0.08);
	border: 1px solid rgba(255,255,255,0.18);
	border-radius: 12px;
}

.icc-support section .content .icc-contact p {
	margin: 0;
	font-size: 17px;
	line-height: 1.45;
	color: rgba(255,255,255,0.88);
}

.icc-support section .content .icc-contact p.icc-contact-name { color: white; }

.icc-support section .content .icc-contact p.icc-contact-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 26px;
}

.icc-support section .content .icc-contact a {
	color: #f5c63b;
	font-size: 18px;
	font-weight: 600;
	white-space: nowrap;
}

.icc-support section .content .icc-contact a:hover { color: white; }

.icc-support section .content .icc-contact a i { margin-right: 8px; }

@media screen and (max-width:879px) {
	.icc-support-grid { grid-template-columns: 1fr; gap: 18px; justify-items: center; text-align: center; }
	.icc-support-icon { width: 64px; height: 64px; font-size: 28px; }
	.icc-support section .content h2.icc-heading { text-align: center; }
	.icc-contact { flex-direction: column; text-align: center; }
	.icc-support section .content .icc-contact p.icc-contact-links { justify-content: center; }
}