/* Liturgi GTM - public site styling
   Mobile-first, mirrors the app mockups: header, bordered cards,
   fixed bottom nav - restyled with the GTM liturgical palette
   (wine + gold) plus icons instead of flat black/white. */

:root {
	--wine: #7a1f3d;
	--wine-dark: #4a1029;
	--wine-light: #a5335a;
	--gold: #c99a2e;
	--gold-light: #f0d78c;
	--teal: #1f7a72;
	--ink: #2a2028;
	--paper: #fff;
	--muted: #8a7b83;
	--border: #e7dde2;
	--bg: #f7f1ee;
	--radius: 10px;
	--shadow: 0 2px 10px rgba(122, 31, 61, .08);
}

* { box-sizing: border-box; }

html, body {
	margin: 0;
	padding: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: 'Segoe UI', Roboto, Arial, sans-serif;
}

.icon { width: 1em; height: 1em; display: inline-block; vertical-align: -0.15em; }

.app {
	max-width: 480px;
	margin: 0 auto;
	min-height: 100vh;
	background: var(--paper);
	display: flex;
	flex-direction: column;
	position: relative;
	box-shadow: 0 0 28px rgba(74, 16, 41, .12);
}

/* ---- Header ---- */
.app-header {
	background: linear-gradient(135deg, var(--wine) 0%, var(--wine-dark) 100%);
	background-image:
		radial-gradient(circle at 14% 22%, rgba(255,255,255,.10) 0, transparent 40%),
		radial-gradient(circle at 86% 78%, rgba(201,154,46,.25) 0, transparent 45%),
		linear-gradient(135deg, var(--wine) 0%, var(--wine-dark) 100%);
	color: #fff;
	text-align: center;
	padding: 18px 12px 16px;
	position: sticky;
	top: 0;
	z-index: 10;
	border-bottom: 3px solid var(--gold);
}
.app-header .brand {
	font-weight: 700;
	letter-spacing: .5px;
	font-size: 15px;
	text-transform: uppercase;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
}
.app-header .brand .icon { color: var(--gold-light); width: 1.15em; height: 1.15em; }
.app-header .sub {
	font-size: 12px;
	color: #e9d3dc;
	margin-top: 3px;
}
.app-header a.back {
	position: absolute;
	left: 12px;
	top: 16px;
	color: #fff;
	text-decoration: none;
	font-size: 18px;
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(255,255,255,.12);
}
.app-header a.admin-link {
	position: absolute;
	right: 12px;
	top: 16px;
	color: var(--gold-light);
	text-decoration: none;
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(255,255,255,.12);
}
.app-header a.admin-link .icon { width: 15px; height: 15px; }

/* ---- Content ---- */
.app-content {
	flex: 1 0 auto;
	padding: 14px 14px 90px;
}

/* ---- Banner ---- */
.banner {
	border-radius: var(--radius);
	padding: 34px 12px;
	text-align: center;
	color: #fff;
	font-size: 12.5px;
	margin-bottom: 18px;
	line-height: 1.7;
	background:
		radial-gradient(circle at 20% 20%, rgba(255,255,255,.16) 0, transparent 45%),
		linear-gradient(135deg, var(--wine-light), var(--wine-dark));
	box-shadow: var(--shadow);
}
.banner .icon { width: 34px; height: 34px; margin-bottom: 8px; color: var(--gold-light); }
.banner .banner-logo {
	width: 96px;
	height: 96px;
	border-radius: 50%;
	object-fit: cover;
	margin-bottom: 10px;
	box-shadow: 0 4px 14px rgba(0,0,0,.25);
}
.banner-slide {
	padding: 0;
	overflow: hidden;
	border-radius: var(--radius);
	background: none;
}
.banner-slide img { width: 100%; display: block; }

/* ---- Section titles ---- */
.section-title {
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .5px;
	color: var(--wine);
	margin: 6px 0 10px;
	text-transform: uppercase;
	display: flex;
	align-items: center;
	gap: 6px;
}
.section-title .icon { color: var(--gold); width: 1.05em; height: 1.05em; }

/* ---- Menu grid (home) ---- */
.menu-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin-bottom: 22px;
}
.menu-grid a {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 8px;
	border: none;
	border-radius: var(--radius);
	padding: 20px 8px;
	font-weight: 700;
	font-size: 12.5px;
	color: var(--ink);
	text-decoration: none;
	min-height: 92px;
	background: var(--paper);
	box-shadow: var(--shadow);
	border-bottom: 3px solid var(--menu-color, var(--wine));
	transition: transform .12s ease;
}
.menu-grid a:active { transform: scale(.97); background: #fbf6f4; }
.menu-grid a .icon-badge {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--menu-color, var(--wine));
	color: #fff;
}
.menu-grid a .icon-badge .icon { width: 22px; height: 22px; }
.menu-grid a.m-liturgi { --menu-color: var(--wine); }
.menu-grid a.m-nyanyian { --menu-color: var(--gold); }
.menu-grid a.m-jadwal { --menu-color: var(--teal); }
.menu-grid a.m-warta { --menu-color: #b3552f; }

/* ---- News list (home / warta) ---- */
.news-item {
	border-bottom: 1px solid var(--border);
	padding: 12px 0;
	display: flex;
	gap: 10px;
}
.news-item:last-child { border-bottom: none; }
.news-item .news-icon {
	flex: none;
	width: 34px;
	height: 34px;
	border-radius: 8px;
	background: linear-gradient(135deg, var(--gold-light), var(--gold));
	color: var(--wine-dark);
	display: flex;
	align-items: center;
	justify-content: center;
}
.news-item .news-icon .icon { width: 18px; height: 18px; }
.news-item .news-title {
	font-weight: 700;
	font-size: 13.5px;
	margin: 0 0 3px;
	color: var(--ink);
}
.news-item .news-meta {
	font-size: 11px;
	color: var(--muted);
}
.news-item .news-excerpt {
	font-size: 12.5px;
	color: #4a3f46;
	margin-top: 6px;
	line-height: 1.5;
}
.news-item .news-more {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	margin-top: 7px;
	font-size: 12px;
	font-weight: 700;
	color: var(--wine);
	text-decoration: none;
}
.news-item .news-more .icon { width: 14px; height: 14px; }

/* ---- Cards (liturgi order, jadwal, generic box) ---- */
.card-box {
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 15px;
	margin-bottom: 12px;
	background: var(--paper);
	box-shadow: var(--shadow);
}
.card-box .badge-date {
	display: inline-block;
	background: linear-gradient(135deg, var(--wine-light), var(--wine));
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	padding: 5px 12px;
	border-radius: 20px;
	margin-bottom: 10px;
}
.card-box .row {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	padding: 6px 0;
	border-bottom: 1px dotted var(--border);
	font-size: 12.5px;
}
.card-box .row:last-child { border-bottom: none; }
.card-box .row .label { font-weight: 700; color: var(--wine); }
.card-box .row .value { color: #4a3f46; text-align: right; }

/* ---- Profil ---- */
.card-box.history p {
	margin: 0 0 10px;
	font-size: 13px;
	line-height: 1.65;
	color: #4a3f46;
	text-align: justify;
}
.card-box.history p:last-child { margin-bottom: 0; }
.card-box.developer {
	display: flex;
	align-items: center;
	gap: 12px;
	border-left: 4px solid var(--gold);
}
.card-box.developer .dev-avatar {
	flex: none;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, var(--wine-light), var(--wine));
	color: #fff;
}
.card-box.developer .dev-avatar .icon { width: 22px; height: 22px; }
.card-box.developer .dev-name { font-weight: 700; font-size: 14px; color: var(--wine); }
.card-box.developer .dev-meta { font-size: 12px; color: var(--muted); margin-top: 2px; }

/* ---- Liturgi order-of-service list ---- */
.liturgi-item { margin-bottom: 16px; }
.liturgi-item .no-title {
	font-weight: 700;
	font-size: 13px;
	margin-bottom: 4px;
	text-transform: uppercase;
	color: var(--wine);
}
.liturgi-item .lagu-chip {
	display: inline-block;
	background: linear-gradient(135deg, var(--gold-light), var(--gold));
	color: var(--wine-dark);
	font-size: 11px;
	font-weight: 700;
	padding: 3px 9px;
	border-radius: 20px;
	margin-right: 6px;
}
.liturgi-item .body-text {
	font-size: 12.5px;
	color: #4a3f46;
	line-height: 1.6;
	white-space: pre-line;
}
.liturgi-item .rubric { font-style: italic; color: var(--muted); }

/* ---- Liturgi points (collapsible order-of-service list) ---- */
.liturgi-points { margin-bottom: 12px; }
.liturgi-point {
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--paper);
	box-shadow: var(--shadow);
	margin-bottom: 10px;
	overflow: hidden;
}
.liturgi-point summary {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 13px 14px;
	cursor: pointer;
	list-style: none;
	font-weight: 700;
	font-size: 13px;
	color: var(--ink);
}
.liturgi-point summary::-webkit-details-marker { display: none; }
.liturgi-point summary .point-no {
	flex: none;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--wine-light), var(--wine));
	color: #fff;
	font-size: 11.5px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.liturgi-point summary .point-title {
	flex: 1;
	text-transform: uppercase;
	letter-spacing: .2px;
}
.liturgi-point summary .point-chevron {
	flex: none;
	color: var(--gold);
	transition: transform .15s ease;
}
.liturgi-point summary .point-chevron .icon { width: 15px; height: 15px; }
.liturgi-point[open] summary .point-chevron { transform: rotate(90deg); }
.liturgi-point[open] summary { border-bottom: 1px solid var(--border); }
.liturgi-point .point-body {
	padding: 14px 16px 16px 50px;
	font-size: 13.5px;
	line-height: 1.8;
	color: #4a3f46;
}

/* ---- Rich text content (from the admin WYSIWYG editor) ---- */
.point-body-html p { margin: 0 0 10px; }
.point-body-html p:last-child { margin-bottom: 0; }
.point-body-html ul, .point-body-html ol { margin: 0 0 10px; padding-left: 20px; }
.point-body-html li { margin-bottom: 4px; }
.point-body-html strong { color: var(--ink); }
.point-body-html h2, .point-body-html h3 {
	font-size: 13.5px;
	color: var(--wine);
	margin: 0 0 8px;
}
.point-body-html a { color: var(--wine); }
.point-body-html img { max-width: 100%; height: auto; display: inline-block; border-radius: 6px; }
.point-body-html .ql-align-center { text-align: center; }
.point-body-html .ql-align-right { text-align: right; }
.point-body-html .ql-align-justify { text-align: justify; }
.point-body-html .ql-indent-1 { padding-left: 3em; }
.point-body-html .ql-indent-2 { padding-left: 6em; }
.point-body-html .ql-indent-3 { padding-left: 9em; }
.point-body-html .ql-indent-4 { padding-left: 12em; }
.point-body-html .ql-indent-5 { padding-left: 15em; }
.point-body-html .ql-indent-6 { padding-left: 18em; }
.point-body-html .ql-indent-7 { padding-left: 21em; }
.point-body-html .ql-indent-8 { padding-left: 24em; }
.point-body-html li.ql-indent-1 { margin-left: 3em; padding-left: 0; }
.point-body-html li.ql-indent-2 { margin-left: 6em; padding-left: 0; }
.point-body-html li.ql-indent-3 { margin-left: 9em; padding-left: 0; }
.point-body-html li.ql-indent-4 { margin-left: 12em; padding-left: 0; }
.article-body.point-body-html { white-space: normal; }

/* ---- Liturgi menu (list of tata ibadah) ---- */
a.liturgi-list-item {
	display: block;
	text-decoration: none;
	color: inherit;
	transition: transform .12s ease;
}
a.liturgi-list-item:active { transform: scale(.98); }
.badge-date.badge-latest {
	background: linear-gradient(135deg, var(--gold-light), var(--gold));
	color: var(--wine-dark);
	margin-left: 6px;
}

/* ---- Search ---- */
.search-box {
	width: 100%;
	padding: 11px 14px;
	border: 1.5px solid var(--border);
	border-radius: 24px;
	font-size: 13px;
	margin-bottom: 14px;
	background: #fff url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%238a7b83" stroke-width="1.8"><circle cx="10.5" cy="10.5" r="6.5"/><path d="m20 20-4.8-4.8"/></svg>') no-repeat 12px center / 16px 16px;
	padding-left: 36px;
}
.search-box:focus { outline: none; border-color: var(--wine-light); }

.song-list-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 0;
	border-bottom: 1px solid var(--border);
	text-decoration: none;
	color: var(--ink);
}
.song-list-item .tag {
	background: linear-gradient(135deg, var(--wine-light), var(--wine));
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	padding: 4px 9px;
	border-radius: 20px;
	white-space: nowrap;
}
.song-list-item .judul { font-size: 13px; color: var(--ink); font-weight: 600; }
.empty-state {
	text-align: center;
	color: var(--muted);
	font-size: 13px;
	padding: 36px 10px;
}
.empty-state .icon { width: 40px; height: 40px; color: var(--border); margin-bottom: 10px; }

/* ---- Bottom nav ---- */
.app-bottomnav {
	position: sticky;
	bottom: 0;
	display: flex;
	border-top: 1px solid var(--border);
	background: #fff;
	padding-bottom: env(safe-area-inset-bottom, 0);
}
.app-bottomnav a {
	flex: 1;
	text-align: center;
	padding: 10px 4px 9px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .3px;
	color: var(--muted);
	text-decoration: none;
	text-transform: uppercase;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
}
.app-bottomnav a .icon { width: 20px; height: 20px; }
.app-bottomnav a.active { color: var(--wine); }

/* ---- Detail article ---- */
.article-title { font-size: 16px; font-weight: 700; margin: 0 0 4px; color: var(--ink); }
.article-meta { font-size: 11.5px; color: var(--muted); margin-bottom: 12px; }
.article-body { font-size: 13.5px; line-height: 1.7; white-space: pre-line; color: #4a3f46; }

.btn-plain {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: none;
	border-radius: 24px;
	padding: 9px 16px;
	font-size: 12.5px;
	font-weight: 700;
	color: #fff;
	background: linear-gradient(135deg, var(--wine-light), var(--wine));
	text-decoration: none;
	margin-top: 10px;
}

@media (min-width: 481px) {
	body { padding: 20px 0; }
}

/* Any screen 700px+ wide (tablets, desktop-class devices) and landscape
   phones: use the extra width instead of a narrow centered column. */
@media (min-width: 700px),
       (orientation: landscape) and (max-height: 600px) {
	body { padding: 0; }
	.app { max-width: none; box-shadow: none; }
	.app-content { padding: 18px 28px 90px; }
	.banner-slide img { max-height: 55vh; object-fit: cover; }
	.menu-grid { grid-template-columns: repeat(4, 1fr); }
}

/* Short landscape screens: slim down the header to save vertical space. */
@media (orientation: landscape) and (max-height: 600px) {
	.app-header { padding: 10px 56px; }
	.app-header a.back, .app-header a.admin-link { top: 50%; transform: translateY(-50%); }
	.app-content { padding: 14px 24px 80px; }
	.banner { padding: 18px 12px; }
}