/* styles for markham40 */
			
			:root {
				/* fonts */
				--font-primary: 'Poppins', sans-serif;
				--font-secondary: 'Roboto', sans-serif;
				/* backgrounds */
				--color-primary: #0E47B2;
				--color-secondary: #0E47B2;
				--color-offset: #FFC135;
				--color-offset-text: #FFFFFF;
				--color-homebanner-gradient: #000;
				--color-body: #FFFFFF;
				--color-footer: #2B2B2B;
				/* text colors */
				--color-primary-text: #FFFFFF;
				--color-secondary-text: #FFFFFF;
				--color-body-text: #222222;
				--color-footer-text: #EEEEEE;
				--color-heading-text: #222222;
				--color-homebanner-text: #FFFFFF;
				--color-details-summary: #EEEEEE;
				--color-details-summary-text: #222222;
				--color-details-content: #FFFFFF;
				--color-details-content-text: #222222;
				/* buttons */
				--btn-primary: #FFC135;
				--btn-primary-text: #FFFFFF;
				--btn-secondary: #2B2B2B;
				--btn-secondary-text: #EEEEEE;
			}
			@media (min-width: 0px) {
				body {
					font-family: var(--font-primary);
					background-color: var(--color-body, #fff);
				}
				.identity-title-season,
				.nav-main-item-link {
					font-family: var(--font-secondary);
				}
				#topbar,
				.panel-title>a,
				.panel-title-anchor {
					background-color: var(--color-primary);
					color: var(--color-primary-text);
				}
				.mobile-action .fa,
				.identity-title,
				.nav-main-item-text,
				.auth .f.segments .segments-heading,
				/* mobile menu */
				.offcanvas-header .header-login,
				.offcanvas-header button .fa,
				.offcanvas-nav-item,
				.offcanvas-nav-item-child,
				/* mobile menu - active, hover, open */
				.offcanvas-nav-item:hover, 
				.offcanvas-nav-item:focus, 
				.offcanvas-nav-item:active, 
				.offcanvas-nav-item-child:hover, 
				.offcanvas-nav-item-child:focus, 
				.offcanvas-nav-item-child:active,
				.body-entries .entry-card .entry-card-caption h3,
				.body-entries .entry-card .entry-card-caption h4 {
					color: var(--color-primary-text);
				}
				.body-entries .entry-card .entry-card-caption {
					background-color: var(--color-primary);
				}
				.nav-main li.nav-main-item .nav-main-item-link:hover {
					background: var(--color-body);
				}
				.nav-main li.nav-main-item .nav-main-item-link:hover .nav-main-item-text {
					color: var(--color-body-text);
				}
				.home-preview-link {
					background: var(--color-secondary);
					color: var(--color-secondary-text);
				}
				.btn-primary {
					background-color: var(--btn-primary);
					color: var(--btn-primary-text);
					border-color: var(--btn-primary);
				}
				.btn-primary:hover {
					background-color: var(--color-body);
					border-color: var(--color-primary);
					color: var(--color-body-text);
				}
				.btn-secondary {
					background-color: var(--btn-secondary);
					color: var(--btn-secondary-text);
					border-color: var(--btn-secondary);
				}
				.btn-primary:hover {
					background-color: var(--color-body);
					border-color: var(--color-primary);
					color: var(--color-body-text);
				}
				.featured {
					background-color: var(--color-secondary);
					color: var(--color-secondary-text);
				}
					.featured-item {
						color: var(--color-secondary-text);
					}
					.featured-item:hover,
					.featured-item:active,
					.featured-item:focus {
						color: var(--color-offset);
					}
		
				main {
					background: var(--color-body, #fff);
					color: var(--color-body-text, #222);
				}
		
				.post-content {
					background: var(--color-body, #fff);
					color: var(--color-body-text, #222);
				}
					.post-content p,
					.post-content li,
					.post-content td,
					.post-content th,
					.post-content label,
					.post-content span {
						color: var(--color-body-text, #222);
					}
		
				.post-header {
					background: var(--color-secondary);
					color: #fff;
				}
					.post-header h1 {
						color: var(--color-secondary-text);
					}
		
				.h {
					margin-bottom: 0;
				}
				.h-wrap {
					background-color: var(--color-homebanner-gradient);
				}
					.h-wrap .h-picture {
						opacity: 0.5;
					}
				.h-title,
				.banner-title {
					color: var(--color-homebanner-text);
				}
				.h-text,
				.banner-desc {
					color: var(--color-homebanner-text);
				}
				.h-content .btn-primary,
				.banner .banner-cta .btn-primary.banner-btn {
					background-color: var(--color-offset);
					border-color: var(--color-offset);
					color: var(--color-offset-text);
				}
				.h-content .btn-primary:hover,
				.banner .banner-cta .btn-primary.banner-btn:hover {
					background-color: var(--btn-primary);
					border-color: var(--btn-primary);
					color: var(--btn-primary-text);
				}
		
				main h2,
				main h3,
				main h4,
				main h5,
				main h6,
				main .post-content h2,
				main .post-content h3,
				main .post-content h4,
				main .post-content h5,
				main .post-content h6,
				h2.h-heading,
				h3.h-heading,
				h4.h-heading {
					color: var(--color-heading-text, #385728);
				}
				.body-awards h4.h-heading,
				.body-awards h5.h-heading {
					padding: 16px 0;
				}

				details summary {
					background-color: var(--color-details-summary, #EEEEEE);
					color: var(--color-details-summary-text, #222222);
				}
				details .details-contents,
				details .details-content {
					background-color: var(--color-details-content, #FFFFFF);
					color: var(--color-details-content-text, #222222);
				}
				details .details-contents p,
				details .details-contents li,
				details .details-contents td,
				details .details-contents th,
				details .details-contents label,
				details .details-contents span,
				details .details-contents h1,
				details .details-contents h2,
				details .details-contents h3,
				details .details-contents h4,
				details .details-contents h5,
				details .details-contents h6,
				details .details-content p,
				details .details-content li,
				details .details-content td,
				details .details-content th,
				details .details-content label,
				details .details-content span,
				details .details-content h1,
				details .details-content h2,
				details .details-content h3,
				details .details-content h4,
				details .details-content h5,
				details .details-content h6,
				main details .details-contents h1,
				main details .details-contents h2,
				main details .details-contents h3,
				main details .details-contents h4,
				main details .details-contents h5,
				main details .details-contents h6,
				main details .details-content h1,
				main details .details-content h2,
				main details .details-content h3,
				main details .details-content h4,
				main details .details-content h5,
				main details .details-content h6,
				main .post-content details .details-contents h1,
				main .post-content details .details-contents h2,
				main .post-content details .details-contents h3,
				main .post-content details .details-contents h4,
				main .post-content details .details-contents h5,
				main .post-content details .details-contents h6,
				main .post-content details .details-content h1,
				main .post-content details .details-content h2,
				main .post-content details .details-content h3,
				main .post-content details .details-content h4,
				main .post-content details .details-content h5,
				main .post-content details .details-content h6,
				details .details-contents h2.h-heading,
				details .details-contents h3.h-heading,
				details .details-contents h4.h-heading,
				details .details-content h2.h-heading,
				details .details-content h3.h-heading,
				details .details-content h4.h-heading {
					color: var(--color-details-content-text, #222222);
				}
				
				.sidenav .nav > li.active > a,
				.sidenav .nav > li.active > a:hover {
					background: var(--color-primary);
					color: var(--color-primary-text);
				}
		
				.sponsors,
				.by {
					background: #fff;
				}
				.by a {
					color: #999;
				}
		
				.body-awards .h-heading .badge.desc {
					display: none;
				}
		
				footer {
					background: var(--color-footer);
					color: var(--color-footer-text);
				}
				footer .footer-heading,
				footer a,
				footer p,
				footer ul li,
				footer .contact-item,
				footer .contact-item-link {
					color: var(--color-footer-text);
				}
				footer a:hover,
				footer .contact-item-link:hover {
					color: var(--color-body-text, #222);
				}
				
				.footer-primary .footer-img {
					/* override default from settings */
					background-image: url('https://awardify.s3.us-east-1.amazonaws.com/a/markham40/design/2026-WZBVTC/design-footer-img-1777410282.svg') !important;
					display: block;
				}
				
				
				#offcanvas {
					background: var(--color-primary);
				}
			}
			@media (min-width: 768px) {
				.identity.wordmark .identity-title {
					color: var(--color-primary-text);
				}
				.nav-main .nav-main-item .nav-main-item-link:hover {
					background: var(--color-body);
					color: var(--color-body-text);
				}
					.nav-main .nav-main-item .nav-main-item-link:hover .nav-main-item-text {
						color: #fff;
					}
					/* hover and open menus */
					.nav-main .nav-main-item.show .nav-main-item-link[aria-expanded="true"] .nav-main-item-text,
					.nav-main .nav-main-item.show .nav-main-item-link:hover .nav-main-item-text {
						color: #333;
					}
					.nav-main li.nav-main-item.show .nav-main-item-child-menu.dropdown-menu li a:hover {
						background: var(--color-primary);
						color: var(--color-primary-text);
					}
			}
			@media (min-width: 992px) {
				.identity.wordmark .identity-img.logo-only {
					width: 320px;
				}
				/* logo position: beside */
				body.body-logo-beside .identity {
					padding-top: 12px;
				}
				body.body-logo-beside .header-inner {
					flex-direction: row;
				}
				body.body-logo-beside .identity.wordmark,
				body.body-logo-beside .identity.wordmark .identity-img.logo-only {
					flex-grow: 0;
					flex-shrink: 0;
					width: 200px;
				}
				body.body-logo-beside .nav-main {
					flex-grow: 1;
					flex-shrink: 1;
				}
			}
			@media (min-width: 1200px) {
				.identity-title {
					max-width: none;
				}
			}
			/* ============================================ TYPOGRAPHY & GLOBAL STYLES ============================================ */ body { font-family: 'Roboto', sans-serif; color: #374151; font-weight: 400; font-size: 1rem; line-height: 1.6; letter-spacing: 0em; } p { font-family: 'Roboto', sans-serif; color: #374151; font-weight: 400; font-size: 1rem; line-height: 1.6; letter-spacing: 0em; margin-bottom: 1.5rem; } /* ============================================ HEADINGS ============================================ */ h1 { font-family: 'Poppins', sans-serif; color: #000000; font-weight: 500; letter-spacing: -0.02em; font-size: 3.5rem; line-height: 1.2; } h2 { font-family: 'Poppins', sans-serif; color: #ffffff; font-weight: 500; letter-spacing: -0.02em; font-size: 2.2rem; line-height: 1.3; } h3 { font-family: 'Poppins', sans-serif; color: #ffffff; font-weight: 500; letter-spacing: -0.02em; font-size: 2.2rem; line-height: 1.3; } h4 { font-family: 'Poppins', sans-serif; color: #ffffff; font-weight: 500; letter-spacing: -0.02em; font-size: 2.2rem; line-height: 1.3; } h5 { font-family: 'Poppins', sans-serif; font-size: 1rem; font-weight: 600; line-height: 1.6; color: #fbbf24; margin-bottom: 1rem; } /* ============================================ BUTTONS ============================================ */ .btn.btn-primary { background: linear-gradient(90deg, #ff66bd 0%, #a42af0 100%); color: #ffffff; border: none; border-radius: 10px; font-size: 20pt; font-weight: 700; letter-spacing: 0; transition: all 0.3s ease; } .btn.btn-primary:hover { background: linear-gradient(90deg, #fcee21 0%, #fbb03b 100%); color: #ffffff; transform: translateY(-2px); box-shadow: 0 10px 20px rgba(255, 102, 189, 0.3); } .explore-btn { background: linear-gradient(90deg, #ff66bd 0%, #a42af0 100%); color: #ffffff; border: none; border-radius: 10px; font-size: 20pt; font-weight: 700; letter-spacing: 0; transition: all 0.3s ease; cursor: pointer; padding: 8px 25px; text-transform: uppercase; display: inline-block; } .explore-btn:hover { background: linear-gradient(90deg, #fcee21 0%, #fbb03b 100%); color: #ffffff; transform: translateY(-2px); box-shadow: 0 10px 20px rgba(255, 102, 189, 0.3); } /* ============================================ CATEGORIES SECTION ============================================ */ .categories-section { width: 100%; max-width: 100%; } .categories-grid { display: grid; grid-template-columns: 30% 70%; gap: 2rem; align-items: center; } .categories-left { max-width: 100%; } .categories-right { width: 100%; } .category-label { font-family: 'Poppins', sans-serif; font-size: 0.875rem; font-weight: 600; letter-spacing: 0.1em; color: #fbbf24; margin-bottom: 1rem; text-transform: uppercase; } .categories-section h2 { font-family: 'Poppins', sans-serif; color: #111827; font-weight: 700; letter-spacing: -0.015em; font-size: 2.8rem; line-height: 1.3; margin-bottom: 1.25rem; } .category-description { font-family: 'Roboto', sans-serif; font-size: 1rem; line-height: 1.6; color: #6b7280; margin-bottom: 1.5rem; } .categories-right figure { margin: 0; padding: 0; width: 100%; } .categories-right img { width: 100%; height: auto; display: block; } /* ============================================ RESPONSIVE ============================================ */ @media (max-width: 1024px) { .categories-grid { grid-template-columns: 1fr; gap: 1.5rem; } } /* TEST */ .countdown-timer { background: #02122d; padding: 3rem 2rem; border-radius: 12px; text-align: center; } .countdown-title { font-family: 'Poppins', sans-serif; font-size: 1.5rem; font-weight: 700; color: #fcee21; margin-bottom: 2rem; letter-spacing: -0.015em; } .countdown-container { display: flex; gap: 2rem; justify-content: center; flex-wrap: wrap; } .countdown-box { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; } .countdown-number { font-size: 3rem; font-weight: 700; color: #fcee21; font-family: 'Poppins', sans-serif; } .countdown-label { font-size: 0.875rem; color: #fcee21; text-transform: uppercase; font-family: 'Poppins', sans-serif; font-weight: 600; letter-spacing: 0.05em; }