/* ============================================================================
   Zeal.Maui public site — compiled styles (mirrors Zeal.Blazor.Web home page).
   Hand-authored CSS (no SCSS pipeline here yet); .scss sources kept alongside.
   ========================================================================== */

/*#region FONTS*/
@font-face {
	font-family: "WhitneySSmBold";
	src: url("/css/fonts/Whitney-Bold.woff2") format("woff2"), url("/css/fonts/Whitney-Bold.woff") format("woff");
	font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
	font-family: "Font Awesome 6 Pro";
	font-style: normal; font-weight: 900;
	src: url("/css/fonts/fa-solid-900.woff2") format("woff2");
}
.fi { font-family: "Font Awesome 6 Pro"; font-weight: 900; font-style: normal; line-height: 1; }
.fi-bars::before { content: "\f0c9"; }
.fi-expand::before { content: "\f065"; }
.fi-compress::before { content: "\f066"; }
.fi-phone::before { content: "\f095"; }
.fi-envelope::before { content: "\f0e0"; }
.fi-info::before { content: "\f05a"; }
.fi-lock::before { content: "\f023"; }
.fi-user::before { content: "\f007"; }
.fi-clock::before { content: "\f017"; }
.fi-globe::before { content: "\f0ac"; }
.fi-server::before { content: "\f233"; }
.fi-xmark::before { content: "\f057"; }
.fi-dollar::before { content: "\f155"; }
.fi-atom::before { content: "\f5d2"; }
.fi-chart::before { content: "\f1fe"; }
.fi-dish::before { content: "\f7c0"; }
.fi-users::before { content: "\f0c0"; }
.fi-grad::before { content: "\f19d"; }
.fi-check::before { content: "\f560"; }
.fi-file::before { content: "\f15c"; }
/*#endregion FONTS*/

/*#region BASE*/
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
	font-family: "Montserrat", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	background-color: #333333; color: #ffffff;
	-webkit-font-smoothing: antialiased;
}
a { text-decoration: none; color: inherit; }
.page { padding-bottom: 60px; } /* room for the fixed bottom navbar */
/*#endregion BASE*/

/*#region HTML ELEMENTS (sections)*/
h2 { font-family: WhitneySSmBold; font-size: 32pt; margin: 0 0 .5rem 0; }
h2 .fi { color: gold; margin-right: .5rem; }
ul { list-style: none; padding: 0 0 0 15px; margin: 0; text-align: left; }
ul li { position: relative; padding-left: 1.6em; font-size: 17pt; margin: .35em 0; }
ul li::before { content: "\f058"; font-family: "Font Awesome 6 Pro"; font-weight: 900; position: absolute; left: 0; top: .15em; color: gold; }

@media (max-width: 1024px) { h2 { font-size: 19pt; } ul li { font-size: 13pt; } }
@media (max-width: 640px)  { h2 { font-size: 18pt; } ul li { font-size: 11pt; } }
/*#endregion*/

/*#region SECTIONS*/
.section { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.section-content { position: relative; z-index: 2; display: flex; width: 100%; height: 100%; }
.section-content-col { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 4rem; text-align: left; overflow: hidden; }
.section-content-col img { max-width: 100%; max-height: 95%; height: auto; }

@media (max-width: 1024px) { .section-content-col { padding: 3rem; } }
@media (max-width: 640px) {
	.section { min-height: auto; }
	.section-content { flex-direction: column; }
	.section-content-col { width: 100%; flex: none; padding: 1rem 2rem; }
}

.dark-section { background-color: #333333; color: #fff; }
.tiffany-section { background-color: rgb(241, 250, 255); color: #222; }
.white-section { background-color: #fafafa; color: #222; }
.connected-section { background: linear-gradient(135deg,#1b1f2a 0%,#2a3140 45%,#1d2733 100%); color: #fff; }
.documents-section { background: linear-gradient(135deg,#12212a 0%,#1c3340 45%,#14242e 100%); color: #fff; }
.welcome-section { background: linear-gradient(135deg,#211c16 0%,#3a2f20 45%,#1f1d18 100%); color: #fff; margin-bottom: 60px; }
.billing-section { background: linear-gradient(135deg,#14182a 0%,#232c4a 45%,#161b2e 100%); color: #fff; }
.communications-section { background: linear-gradient(135deg,#1b1726 0%,#2d2442 45%,#191a2e 100%); color: #fff; }
.programs-section { background: linear-gradient(135deg,#102220 0%,#1b3a32 45%,#122420 100%); color: #fff; }

/* reverse columns on wide screens */
.reverse-section .section-content { flex-direction: row-reverse; }
@media (max-width: 640px) { .reverse-section .section-content { flex-direction: column; } }
/*#endregion*/

/*#region HERO*/
.hero-section .section-content-col .logo { max-width: 80%; height: auto; }
.hero-section .hero-intro { margin-top: 15px; padding-left: 25px; font-weight: 700; font-size: 16pt; }
.hero-section .hero-buttons { padding-left: 25px; display: flex; gap: 1rem; margin-top: 1rem; }
@media (max-width: 640px) { .hero-section .hero-intro, .hero-section .hero-buttons { padding-left: 15px; } }
/*#endregion*/

/*#region WAVES*/
.zt-waves { position: absolute; inset: 0; width: 100%; height: 39vh; overflow: hidden; z-index: 0; pointer-events: none; clip-path: polygon(0 0,100% 0,100% 40%,0 75%); box-shadow: 0 12px 25px rgba(0,0,0,.25); opacity: .3; }
.wave-layer { position: absolute; inset: 0; top: -26vh; mix-blend-mode: screen; filter: saturate(160%) contrast(125%); }
.wave-layer.w-gold-1 { opacity: .99; } .wave-layer.w-gray-1 { opacity: .60; }
.wave-layer.w-gold-2 { opacity: .75; } .wave-layer.w-gray-2 { opacity: .45; }
.wave-svg { position: absolute; top: 0; left: 0; width: 330%; height: 90%; }
@keyframes wave-slide { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.w-gold-1 .wave-svg { animation: wave-slide 33s linear infinite; }
.w-gray-1 .wave-svg { animation: wave-slide 22s linear infinite reverse; }
.w-gold-2 .wave-svg { animation: wave-slide 14s linear infinite; }
.w-gray-2 .wave-svg { animation: wave-slide 18s linear infinite reverse; }
@media (prefers-reduced-motion: reduce) { .wave-svg { animation: none !important; } }
/*#endregion*/

/*#region BUTTONS*/
.zt-btn { display: inline-flex; align-items: center; gap: .6rem; border: none; border-radius: 8px; padding: .9rem 1.6rem; font-size: 15pt; font-weight: 700; cursor: pointer; color: #fff; }
.zt-btn-success { background-color: #2d602d; }
.zt-btn-success:hover { background-color: #357a35; }
.zt-btn .fi { font-size: 1.3em; }
/*#endregion*/

/*#region NAVBAR (fixed bottom)*/
.zt-navbar { position: fixed; bottom: 0; left: 0; right: 0; height: 60px; background: #333333; display: flex; align-items: center; padding: 0 16px; z-index: 1000; box-shadow: 0 -2px 10px rgba(0,0,0,.4); }
.zt-navbar .menu-btn { color: #fff; font-size: 26px; cursor: pointer; padding: 6px 12px 6px 0; }
.zt-navbar .zeal-logo img { height: 34px; }
.zt-navbar .spacer { flex: 1; }
.zt-navbar .min-max { color: #fff; font-size: 22px; cursor: pointer; padding: 6px; background: none; border: none; }
/*#endregion*/

/*#region SLIDE-OUT MENU (CSS checkbox toggle)*/
#menuToggle, #infoToggle { position: absolute; opacity: 0; pointer-events: none; }
.navmenu-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.85); z-index: 1500; display: none; }
#menuToggle:checked ~ .navmenu-overlay { display: block; }
.navmenu-panel { position: fixed; top: 20px; left: 20px; z-index: 1600; display: none; }
#menuToggle:checked ~ .navmenu-panel { display: block; }
/* matches ZtNavGroup/ZtNavButton: translucent 68px tiles, no card panel */
.nav-group { margin: 20px 0 0 0; }
.nav-group-title { color: #fff; font-weight: 600; font-size: 10pt; display: flex; align-items: center; gap: 4px; margin-bottom: 10px; }
.nav-group-buttons { display: grid; grid-auto-flow: column; gap: 10px; }
.nav-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 68px; height: 68px; background: rgba(255,255,255,0.20); opacity: .90; border-radius: 3px; color: #fff; cursor: pointer; border: none; text-decoration: none; transition: all .2s ease; }
.nav-btn .fi { font-size: 14pt; }
.nav-btn .nav-label { font-size: 7pt; font-weight: 500; }
.nav-btn:hover { opacity: 1; color: #ffcb04; }
.nav-btn:hover .fi { color: #ffcb04; transform: scale(1.2); }
/*#endregion*/

/*#region INFO MODAL (CSS checkbox toggle)*/
.info-modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 2000; display: none; align-items: flex-start; justify-content: center; }
#infoToggle:checked ~ .info-modal-backdrop { display: flex; }
.info-modal { background: #fff; color: #222; width: 620px; max-width: 92vw; margin-top: 90px; border-radius: 10px; overflow: hidden; box-shadow: 0 16px 50px rgba(0,0,0,.5); }
.info-modal-header { background: #ffcb04; color: #222; display: flex; align-items: center; gap: 12px; padding: 16px 20px; font-size: 22px; font-weight: 700; }
.info-modal-header .fi { font-size: 22px; }
.info-modal-header .info-close { margin-left: auto; cursor: pointer; color: #222; font-size: 24px; }
.info-modal-body { padding: 18px 22px; }
.info-row { display: flex; align-items: center; gap: 12px; padding: 7px 0; font-size: 16px; color: #333; }
.info-row .fi { color: #555; width: 22px; text-align: center; }
.info-row img { height: 18px; }
/*#endregion*/

/*#region CONTENT PAGES (WaveLayout: waves + centered white card)*/
.fi-sms::before { content: "\f7cd"; }
.fi-person-q::before { content: "\e542"; }
.fi-database::before { content: "\f1c0"; }

/* WAVES BACKDROP (distinct class so it doesn't clash with the hero .zt-waves) */
.wl-waves { position: fixed; top: -78vh; left: 0; width: 100%; height: 160vh; z-index: 0; pointer-events: none; overflow: hidden; clip-path: polygon(0 0,100% 0,100% 75%,0 90%); box-shadow: 0 12px 25px rgba(0,0,0,.25); }
.wl-layer { position: absolute; inset: 0; mix-blend-mode: screen; filter: saturate(115%) contrast(105%); }
.wl-layer.w-gold-1 { opacity: .9; } .wl-layer.w-gray-1 { opacity: .6; }
.wl-layer.w-gold-2 { opacity: .55; } .wl-layer.w-gray-2 { opacity: .45; }

/* PAGE + CENTERED WHITE CARD */
.zeal-content-page { position: relative; z-index: 2; min-height: 100vh; display: flex; align-items: flex-start; justify-content: center; padding: 7vh 0 90px; }
.zeal-content-card { position: relative; z-index: 2; width: min(92vw, 560px); background: #fff; color: #222; border: 1px solid #999; border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,.45); padding: clamp(20px,4vw,34px); }
.zeal-card-logo { margin-bottom: 1.2rem; }
.zeal-card-logo img { height: 30px; }

/* SECTIONS INSIDE THE WHITE CARD (dark text, gold icons) */
.zt-page-section { padding: 14px 0; border-bottom: 1px solid #ececec; }
.zt-page-section:last-child { border-bottom: none; padding-bottom: 0; }
.zt-page-section h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-family: WhitneySSmBold; font-size: 14pt; color: #222; }
.zt-page-section h3 .fi { color: #ebb41f; font-size: 15pt; }
.zt-page-section p { margin: 0; font-size: 11.5pt; line-height: 1.5; color: #444; }
.zt-page-section a { color: #b8860b; text-decoration: underline; }
/*#endregion*/

/*#region 404 / NOT FOUND*/
.fi-home::before { content: "\f015"; }
.zt-404 { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 2rem 1.5rem 90px; gap: .6rem; position: relative; overflow: hidden; }
.zt-404::before { content: ""; position: absolute; top: 42%; left: 50%; width: 80vmax; height: 80vmax; transform: translate(-50%,-50%); background: radial-gradient(circle, rgba(235,180,31,.13) 0%, rgba(235,180,31,0) 60%); pointer-events: none; }
.zt-404 > * { position: relative; z-index: 1; }
.zt-404-logo { width: min(70%, 300px); margin-bottom: .4rem; }
.zt-404-code { font-family: WhitneySSmBold; font-size: clamp(64pt, 18vw, 110pt); line-height: 1; color: #ffcb04; text-shadow: 0 6px 30px rgba(235,180,31,.35); }
.zt-404-title { font-family: WhitneySSmBold; font-size: clamp(20pt, 6vw, 30pt); color: #fff; margin: 0; }
.zt-404-msg { color: #b8b8b8; font-size: clamp(12pt, 3.4vw, 15pt); max-width: 460px; margin: .2rem 0 1rem; line-height: 1.5; }
.zt-404-btn { margin-top: .4rem; }
/*#endregion*/