/*
 * SiteQode — layout.css
 * Global chrome: top bar, header/nav, off-canvas mobile menu, footer, breadcrumb.
 */

	.sq-site { display: flex; flex-direction: column; min-height: 100vh; }
	.sq-main { flex: 1 0 auto; }


	.scroll-trigger.animate--fade-in, 
	.scroll-trigger.animate--slide-in { opacity: .01; }

	.scroll-trigger:not(.scroll-trigger--offscreen).animate--slide-in {
		animation: slideIn .4s cubic-bezier(0, 0, .3, 1) forwards;
        animation-delay: calc(var(--reveal-order) * 75ms);
	}

	@keyframes slideIn {
		from { transform: translateY(1rem); opacity: 0.01; }
		to { transform: translateY(0); opacity: 1; }
	}
	@keyframes fadeIn {
		from { opacity: 0.01; }
		to { opacity: 1; }
	}

/** 
	Top bar marquee
*/

	.sq-topbar { background: var(--sq-color-ink); color: var(--sq-color-accent-white); overflow: hidden; position: relative; }

	.sq-topbar__track { display: flex; width: max-content; animation: sq-marquee var(--sq-topbar-speed, 40s) linear infinite; }

	.sq-topbar[data-direction="right"] .sq-topbar__track { animation-direction: reverse; }
	.sq-topbar:hover .sq-topbar__track { animation-play-state: paused; }

	.sq-topbar__group { display: flex; flex-shrink: 0; }

	.sq-topbar__item { display: inline-flex; align-items: center; gap: 10px; padding: var(--sq-space-2) 10px; 
		font-family: var(--sq-font-body); font-size: var(--sq-text-base); white-space: nowrap; 
	}
	.sq-topbar__highlight { color: var(--sq-color-amber-600); }
	a.sq-topbar__item:hover { color: var(--sq-color-amber-600); }

	/* .sq-topbar__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--sq-color-amber-600); flex: none; } */

	@keyframes sq-marquee {
		from { transform: translateX(0); }
		to { transform: translateX(-50%); }
	}
	@media (prefers-reduced-motion: reduce) {
		.sq-topbar__track { animation: none; overflow-x: auto; }
		.sq-topbar__group[aria-hidden="true"] { display: none; }
	}


/* Header ------------------------------------------------------------ */

.sq-header {
	background: var(--sq-color-surface);
	border-bottom: 1px solid var(--sq-color-border);
	z-index: var(--sq-z-header);
}
.sq-header[data-sticky="1"] {
	position: sticky;
	top: 0;
}
.sq-header.is-scrolled {
	box-shadow: var(--sq-shadow-sm);
}
.sq-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sq-space-6);
	padding-block: var(--sq-space-4);
}
.sq-header__brand img {
	max-height: 44px;
	width: auto;
}
.sq-header__site-name {
	font-family: var(--sq-font-head);
	font-size: var(--sq-text-base);
	font-weight: 600;
}
.sq-header__actions {
	display: flex;
	align-items: center;
	gap: var(--sq-space-4);
}

/* Desktop nav --------------------------------------------------------- */

	.sq-nav { display: none; }
	
	.sq-nav__link { font-size: var(--sq-text-base); font-weight: normal; padding: var(--sq-space-2) 0; transition: var(--sq-transition); }
	.sq-nav__link:hover { color: var(--sq-color-ink-soft); }
	.sq-nav__toggle { display: none !important; }

	.sq-nav__item .sq-nav__submenu { position: absolute; top: 100%; left: 0; min-width: 240px; background: var(--sq-color-surface);
		border-radius: 0px; box-shadow: var(--sq-shadow-md); padding: 10px; margin-top: var(--sq-space-2); opacity: 0; visibility: hidden;
		transition: opacity var(--sq-transition), transform var(--sq-transition), visibility var(--sq-transition);
		transform: translateY(6px); text-align: start; margin-left: -10px; z-index: 2;
	}
	.sq-nav__item--has-children:hover > .sq-nav__submenu,
	.sq-nav__item--open > .sq-nav__submenu { opacity: 1; visibility: visible; transform: translateY(0); }
	.sq-nav__item .sq-nav__submenu .sq-nav__item { display: block; padding: 0px; }
	.sq-nav__item .sq-nav__submenu .sq-nav__link { display: block; padding: var(--sq-space-1) var(--sq-space-3);
		color: var(--sq-color-ink); font-size: 0.92rem; }
	.sq-nav__item .sq-nav__submenu .sq-nav__link:hover { color: var(--sq-color-ink-soft); background: transparent; }

	@media (min-width: 960px) {
		.sq-nav { display: block; }
		.sq-header__actions { display: none; }
		.sq-header__actions:has(> .sq-header__cta) { display: block; }
	}

/** 
	Mobile trigger + off-canvas drawer 
*/

	.sq-header__actions .sq-mobile-trigger { display: inline-flex; align-items: center; justify-content: center; 
		width: 2.5rem; height: 2.5rem; border-radius: var(--sq-radius-sm); color: var(--sq-color-ink); 
		background: var(--sq-color-ink-700); padding: 6px; margin-top: 0px; 
	}
	
	.sq-mobile-trigger .sq-icon { font-size: 1.5rem; }
	.sq-mobile-trigger__close-icon { display: none; }
	.sq-mobile-trigger[aria-expanded="true"] .sq-mobile-trigger__open-icon { display: none; }
	.sq-mobile-trigger[aria-expanded="true"] .sq-mobile-trigger__close-icon { display: block; }

	.sq-mobile-panel[hidden] { display: none; }
	.sq-mobile-panel { position: fixed; inset: 0; z-index: var(--sq-z-mobile-panel); }
	.sq-mobile-panel__overlay { position: absolute; inset: 0; background: rgba(16, 30, 43, 0.55); opacity: 0; 
		transition: opacity var(--sq-transition); 
	}
	.sq-mobile-panel.is-open .sq-mobile-panel__overlay { opacity: 1; }
	.sq-mobile-panel__drawer { position: absolute; top: 0; right: 0; bottom: 0; width: min(86vw, 380px); 
		background: var(--sq-color-surface); box-shadow: var(--sq-shadow-lg); display: flex; flex-direction: column; 
		gap: var(--sq-space-5); padding: var(--sq-space-5); overflow-y: auto; transform: translateX(100%); 
		transition: transform var(--sq-transition); 
	}
	.sq-mobile-panel.is-open .sq-mobile-panel__drawer { transform: translateX(0); }

	.sq-mobile-panel__header { display: flex; align-items: center; justify-content: space-between; }
	.sq-mobile-panel__header .custom-logo-link { width: 100%; max-width: clamp(11.25rem, 10.0962rem + 5.1282vw, 16.25rem); display: block; }

	.sq-mobile-panel__header .sq-mobile-panel__close { width: 2.25rem; height: 2.25rem; display: inline-flex; align-items: center; 
		justify-content: center; border-radius: var(--sq-radius-sm); background-color: var(--sq-color-ink-700); 
		padding: 10px; color: var(--sq-color-ink); margin: 0px;
	}
	.sq-mobile-panel__header .sq-mobile-panel__close .sq-icon { font-size: 1.25rem; }

	.sq-mobile-panel__list { display: flex; flex-direction: column; gap: var(--sq-space-1); }
	.sq-mobile-panel__list .sq-nav__link { display: flex; align-items: center; justify-content: space-between; 
		padding: 10px 8px; font-size: var(--sq-text-base); border-bottom: 1px solid var(--sq-color-border); 
	}
	.sq-mobile-panel__list .sq-nav__toggle { position: absolute !important; right: 0; width: 100%; height: 45px; top: 0; margin: 0; 
		display: block !important; border-radius: 0px; background: transparent !important; border-radius: 0px; background: none !important; }
	.sq-mobile-panel__list .sq-nav__item { position: relative; padding: 0px; }
	.sq-mobile-panel__list .sq-nav__submenu { position: static; opacity: 1; visibility: visible; transform: none; 
		box-shadow: none; background: var(--sq-color-ink-100); margin: 0 0 var(--sq-space-2); display: none; 
	}
	.sq-mobile-panel__list .sq-nav__item--open > .sq-nav__submenu { display: block; padding-left: 20px; margin: 0px; }
	.sq-mobile-panel__cta { justify-content: center; width: 100%; }

	@media (min-width: 960px) {
		.sq-mobile-trigger { display: none; }
	}

/** 
	Footer 
*/

	footer.sq-footer { position: relative; background: #1c498c08; color: var(--sq-color-base); }

    footer.sq-footer:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0;
        background-image: url(../images/footer-patten.png); background-repeat: no-repeat; background-size: cover; opacity: 0.05; } 

    footer.sq-footer > div { position: relative; }
	footer.sq-footer > .sq-footer__inner { display: grid; grid-template-columns: 2fr 1fr 1fr 1.6fr; gap: 30px;
    	padding: clamp(3.125rem, 2.6923rem + 1.9231vw, 5rem) 0px 40px; max-width: 1100px; 
	}

	footer.sq-footer .custom-logo { width: 100%; max-width: clamp(11.25rem, 10.0962rem + 5.1282vw, 16.25rem); display: block; }

	footer.sq-footer .sq-footer__heading { font-family: var(--sq-font-body); font-weight: normal; 
		text-transform: capitalize; color: var(--sq-color-accent-black); margin-bottom: var(--sq-space-4); }
	footer.sq-footer .sq-footer__description { font-size: var(--sq-text-base); margin: 20px 0px; width: 100%; max-width: 280px; }

	footer.sq-footer .sq-footer__list { display: flex; flex-direction: column; gap: 4px; }
	footer.sq-footer .sq-footer__list li { padding: 0px; }
	footer.sq-footer .sq-footer__list a:hover { color: var(--sq-color-ink); }

	footer.sq-footer .sq-footer__list .sq-nav__link { font-size: var(--sq-text-base); font-weight: normal; padding: 0; }

	footer.sq-footer .sq-footer__contact-list { display: flex; flex-direction: column; gap: 4px; font-size: var(--sq-text-base); }
	footer.sq-footer .sq-footer__contact-list li,
	footer.sq-footer .sq-footer__contact-list li a { display: flex; align-items: flex-start; gap: var(--sq-space-2); padding: 0px; }

	footer.sq-footer .sq-footer__contact-list a:hover,
	footer.sq-footer .sq-footer__contact-list a:focus { color: var(--sq-color-ink); }

	footer.sq-footer .sq-footer__contact-list li svg,
	footer.sq-footer .sq-footer__contact-list li a svg { color: var(--sq-color-ink); top: 0.2em; 
		position: relative; font-size: 20px; stroke-width: 1.2px; }

	.sq-social { display: flex; gap: 8px; margin-top: var(--sq-space-5); }
	.sq-social a { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; 
		border-radius: var(--sq-radius-full); background: var(--sq-color-ink); transition: background var(--sq-transition); 
        color: var(--sq-color-accent-white);
	}
	.sq-social a:hover { background: var(--sq-color-muted); }
	.sq-social .sq-icon { font-size: 20px; }

	footer.sq-footer .sq-footer__bottom { border-top: 1px solid var(--sq-color-border); }
	footer.sq-footer .sq-footer__bottom-inner { padding-block: var(--sq-space-5); font-size: var(--sq-text-base); }

	footer.sq-footer .sq-footer__bottom-inner p { margin: 0; text-align: center; }

	@media (max-width: 1024px) {

		footer.sq-footer .sq-footer__inner { grid-template-columns: 1fr 1fr 1fr; max-width: 640px; }
		footer.sq-footer .sq-footer__col--brand { grid-column: 1/-1; text-align: center; display: flex; flex-direction: column; 
			justify-content: center; align-items: center; margin: 0 0 10px; }

		.sq-social { margin-top: 0px; }
	}

	@media (max-width: 600px) {
		
		footer.sq-footer .sq-footer__inner { grid-template-columns: 1fr 1fr; max-width: 400px; }
		footer.sq-footer .sq-footer__col--brand { grid-column: 1/-1; text-align: start; display: flex; flex-direction: column; 
			justify-content: start; align-items: start; margin: 0 0 10px; }

		footer.sq-footer .sq-footer__col--contact { grid-column: 1/-1; }

		.sq-social { margin-top: 0px; }
	}

/** 
	Breadcrumb
*/

	.sq-breadcrumb { padding: clamp(2.5rem, 1.9231rem + 2.5641vw, 5rem) 0px; overflow: hidden; 
		background-color: var(--sq-color-ink); position: relative; text-align: center; }

	.sq-breadcrumb:before { content: ""; position: absolute; top: 0; right: 0; left: 0; bottom: 0; 
		background-image: url(../images/breadcrumb-bg.png); background-position: center center; background-repeat: no-repeat;
		background-size: contain; opacity: 0.1; pointer-events: none;
	}

	.sq-breadcrumb .sq-container { position: relative; }

	.sq-breadcrumb__list { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sq-space-2); 
		font-size: var(--sq-text-base); font-family: var(--sq-font-mono); color: var(--sq-color-accent-white); justify-content: center;
	}

	.sq-breadcrumb__item { display: inline-flex; align-items: center; gap: var(--sq-space-2); padding: 0px; }
	.sq-breadcrumb__item a:hover { color: var(--sq-color-muted); }

	.sq-breadcrumb__item [aria-current="page"],
    .sq-breadcrumb .sq-breadcrumb__title { color: var(--sq-color-accent-white); }

	.sq-breadcrumb .sq-breadcrumb__title { margin: 0 0 clamp(0.5rem, 0.4712rem + 0.1282vw, 0.625rem); }

	@media (max-width: 767px) {
		.sq-breadcrumb:before { background-size: cover; }
	}


/** 
	Page / archive headers 
*/

	.sq-archive { padding: clamp(3.125rem, 2.4038rem + 3.2051vw, 6.25rem) 0px; }

	.sq-archive__header { margin: 0 0 30px; }
	.sq-archive__count { color: var(--sq-color-ink); font-size: var(--sq-text-base);
		padding: 10px 20px; border-radius: var(--sq-radius-sm); border: 1px dashed var(--sq-color-border); 
		background-color: var(--sq-color-ink-500); margin: 0; display: inline-block;
	}

	/* .sq-page__header { padding-block: var(--sq-space-8) var(--sq-space-4); } */
	/* .sq-page__content { padding-bottom: var(--sq-space-12); } */