/* =========================================================================
   Emalahleni — premium layer
   Additive refinements over main.css: typographic polish, glass surfaces,
   softer depth, unified line-icon chips, and gentle scroll reveals.
   Remove this file (and its enqueue) to fall back to the base design.
   ========================================================================= */

/* ---------- Utility-bar / header icons ---------- */
.uicon { display: inline-flex; line-height: 0; vertical-align: -3px; }
.uicon svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.header-actions__pay .uicon svg { width: 16px; height: 16px; }
.alert-banner__icon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Hero: cinematic type + frosted search ---------- */
.hero__eyebrow {
	text-transform: uppercase; letter-spacing: .22em; font-size: .78rem;
	font-weight: 600; color: var(--c-accent); display: inline-flex; align-items: center; gap: .6rem;
}
.hero__eyebrow::before { content: ""; width: 34px; height: 2px; background: var(--c-accent); border-radius: 2px; }
.hero__title { font-size: clamp(2.2rem, 4.6vw, 3.4rem); letter-spacing: -.02em; line-height: 1.08; }
.hero__lead { font-size: clamp(1rem, 1.6vw, 1.15rem); color: #dfeae5; max-width: 46ch; }
.hero__search {
	background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22);
	backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
	border-radius: 14px; padding: .45rem; box-shadow: 0 18px 44px rgba(4, 30, 24, .35);
}
.hero__search input[type="search"] {
	background: transparent; border: 0; color: #fff; font-size: 1rem;
}
.hero__search input[type="search"]::placeholder { color: rgba(255, 255, 255, .65); }
.hero__search input[type="search"]:focus { outline: none; }
.hero__popular a {
	display: inline-block; padding: .28rem .8rem; border: 1px solid rgba(255, 255, 255, .28);
	border-radius: 999px; color: #eaf3ef; font-size: .82rem;
	transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.hero__popular a:hover { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-ink); }

/* ---------- Section headings: quiet gold signature ---------- */
.section-heading { letter-spacing: -.015em; }
.section-heading::after {
	content: ""; display: block; width: 44px; height: 3px; margin-top: .5rem;
	background: linear-gradient(90deg, var(--c-accent), var(--c-accent-dark)); border-radius: 3px;
}
.feed__header .section-heading::after { margin-top: .35rem; }

/* ---------- Service tiles: icon chips + finer depth ---------- */
.tile { padding: 1.6rem 1.5rem; border-radius: 16px; }
.tile__icon {
	width: 46px; height: 46px; border-radius: 13px;
	display: grid; place-items: center; margin-bottom: .65rem;
	background: color-mix(in srgb, var(--c-primary) 9%, #fff);
	transition: background var(--transition);
}
.tile__icon svg { width: 22px; height: 22px; stroke-width: 1.7; }
.tile:hover .tile__icon { background: color-mix(in srgb, var(--c-accent) 18%, #fff); }
@supports not (background: color-mix(in srgb, red 9%, #fff)) {
	.tile__icon { background: #eef4f1; }
	.tile:hover .tile__icon { background: #fbf1d9; }
}

/* ---------- Report band: glass cards on deep green ---------- */
.report-band { background: linear-gradient(135deg, #06352c 0%, var(--c-primary-dark) 45%, var(--c-primary) 100%); }
.report-card {
	background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14);
	backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-radius: 14px;
	transition: transform var(--transition), background var(--transition), border-color var(--transition);
}
.report-card:hover { transform: translateY(-4px); background: rgba(255, 255, 255, .12); border-color: rgba(240, 165, 0, .55); }
.report-card__icon { line-height: 0; }
.report-card__icon svg { width: 26px; height: 26px; fill: none; stroke: var(--c-accent); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Feeds: card surfaces ---------- */
.two-col-feeds { background: var(--c-bg-soft); }
.two-col-feeds .feed {
	background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius-lg);
	padding: 1.6rem 1.7rem; box-shadow: var(--shadow-sm);
}
.notice-list__item a, .tender-list__item a { border-radius: 10px; transition: background var(--transition); }
.notice-list__item a:hover, .tender-list__item a:hover { background: var(--c-bg-mist); }

/* ---------- Document chips: refined pills ---------- */
.doc-chip {
	border-radius: 999px; border: 1.5px solid var(--c-line); font-weight: 600;
	transition: border-color var(--transition), background var(--transition), color var(--transition), transform var(--transition);
}
.doc-chip:hover { border-color: var(--c-primary); background: var(--c-primary); color: #fff; transform: translateY(-2px); }

/* ---------- Buttons: subtle lift ---------- */
.btn { box-shadow: 0 1px 2px rgba(16, 32, 25, .12); }
.btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(16, 32, 25, .18); }

/* ---------- Gentle scroll reveals (scoped under .js-reveal set by JS) ---------- */
.js-reveal .site-main > section,
.js-reveal .site-main .quick-tiles,
.js-reveal .site-main .report-band,
.js-reveal .site-main .feature-split,
.js-reveal .site-main .two-col-feeds,
.js-reveal .site-main .doc-shortcuts,
.js-reveal .site-main .pay-cta {
	opacity: 0; transform: translateY(22px);
	transition: opacity .7s cubic-bezier(.22, .61, .36, 1), transform .7s cubic-bezier(.22, .61, .36, 1);
}
.js-reveal .site-main .hero { opacity: 1; transform: none; } /* hero shows instantly */
.js-reveal .site-main .is-revealed { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.js-reveal .site-main > section,
	.js-reveal .site-main .is-revealed { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* =========================================================================
   Elegance pass — quiet refinements only.
   One shared depth scale, one radius, finer typography, gentle hovers.
   No layout changes.
   ========================================================================= */

:root { --shadow-soft: 0 8px 26px rgba(10, 44, 35, .07), 0 2px 6px rgba(10, 44, 35, .04); }

::selection { background: rgba(240, 165, 0, .25); color: var(--c-ink); }

/* Typography: a little more air and poise. */
.section-heading { font-size: clamp(1.45rem, 2.8vw, 2.05rem); letter-spacing: -.02em; }
.hero__title { font-weight: 800; }
.hero__lead { line-height: 1.7; }

/* One consistent card language across the page. */
.tile, .photo-card, .two-col-feeds .feed, .doc-chip,
.notice-list__item a, .tender-list__item a { border-radius: 14px; }

/* Service tiles: calm lift, nothing loud. */
.tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-soft); }
.tile__title { letter-spacing: -.01em; }

/* Gallery: barely-there zoom, softer caption. */
.photo-card__image { transition: transform .8s cubic-bezier(.22, .61, .36, 1); }
.photo-card:hover .photo-card__image { transform: scale(1.03); }
.photo-card figcaption { font-weight: 600; }

/* Feeds: soft surfaces, quieter hover. */
.two-col-feeds .feed { box-shadow: var(--shadow-soft); border-radius: 18px; }
.notice-list__item a:hover, .tender-list__item a:hover { transform: none; border-color: var(--c-line); box-shadow: var(--shadow-soft); }
.feed__more { text-underline-offset: 3px; }
.feed__more:hover { text-decoration: underline; }

/* Pay panel: same light layout, finer frame. */
.pay-cta__inner { border-radius: 22px; box-shadow: var(--shadow-soft); }
.pay-cta__bank > div { border-radius: 10px; box-shadow: 0 1px 2px rgba(16, 32, 25, .05); }

/* Report band cards: align radius, steadier hover. */
.report-card { border-radius: 14px; }
.report-card:hover { transform: translateY(-3px); }

/* Feature split: slightly softer photo corners. */
.feature-split__media img,
.feature-split__media::before { border-radius: 18px; }
.feature-split__media::after { border-radius: 0 0 18px 18px; }

/* Footer: a single fine gold rule as a signature. */
.site-footer { border-top: 3px solid var(--c-accent); }

@media (prefers-reduced-motion: reduce) {
	.photo-card__image { transition: none !important; }
}