/* ==========================================================
   Green Jofiyat — Pages (hero, prose, gallery, faq, contact, 404)
   + global search overlay (loaded everywhere)
   ========================================================== */

/* Page hero (used on every inner page) */
.gj-page__hero {
    position: relative; overflow: hidden;
    padding: var(--space-3xl) 0 calc(var(--space-3xl) + 6px);
    background:
        radial-gradient(circle at 88% 0%, rgba(139,191,90,0.10), transparent 40%),
        linear-gradient(180deg, var(--gj-bg-alt) 0%, var(--gj-bg-white) 100%);
    border-bottom: 1px solid var(--gj-border-light);
}
.gj-page__hero--green {
    background-color: var(--gj-primary-darker);
    background-image:
        radial-gradient(circle at 85% 18%, rgba(139,191,90,0.30), transparent 46%),
        radial-gradient(circle at 8% 95%, rgba(201,162,75,0.18), transparent 42%),
        linear-gradient(135deg, #133a26 0%, #2E7D4F 60%, #4f6b2c 100%);
    color: #fff; border-bottom: none;
}
.gj-page__hero--green::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image: radial-gradient(rgba(255,255,255,0.06) 1.5px, transparent 1.5px);
    background-size: 24px 24px; opacity: .5;
}
.gj-page__hero .container { position: relative; z-index: 1; }
.gj-page__hero--green .gj-page__title, .gj-page__hero--green .gj-page__lead { color: #fff; }
.gj-page__hero--green .gj-breadcrumbs { color: rgba(255,255,255,.78); }
.gj-page__hero--green .gj-breadcrumbs a:hover { color: #fff; }
.gj-page__title { margin-bottom: var(--space-sm); }
.gj-page__hero .gj-page__title::after {
    content: ""; display: block; width: 64px; height: 4px; margin-top: var(--space-sm);
    border-radius: var(--radius-pill); background: var(--gj-accent);
}
.gj-page__hero--green .gj-page__title::after { background: var(--gj-gold); }
.gj-page__lead { font-size: var(--text-lg); color: var(--gj-text-muted); max-width: 680px; }
.gj-page__hero--green .gj-page__lead { color: rgba(255,255,255,.85); }

/* Prose */
.gj-prose { line-height: 1.95; font-size: var(--text-lg); }
.gj-prose h2 {
    margin: var(--space-2xl) 0 var(--space-md); color: var(--gj-primary-dark);
    font-size: var(--text-3xl); position: relative; padding-bottom: 10px;
}
.gj-prose h2::after { content: ""; display: block; position: absolute; bottom: 0; inset-inline-start: 0; width: 52px; height: 4px; background: var(--gj-accent); border-radius: var(--radius-pill); }
.gj-prose h3 { margin: var(--space-xl) 0 var(--space-sm); font-size: var(--text-xl); color: var(--gj-primary); }
.gj-prose p, .gj-prose li { color: var(--gj-text-secondary); }
.gj-prose > p:first-of-type { font-size: var(--text-xl); color: var(--gj-text); line-height: 1.9; } /* lead paragraph */
.gj-prose ul:not(.gj-checklist) { list-style: none; padding: 0; margin-bottom: var(--space-md); }
.gj-prose ul:not(.gj-checklist) li { position: relative; padding-inline-start: 1.6em; margin-bottom: .5rem; }
.gj-prose ul:not(.gj-checklist) li::before { content: ""; position: absolute; inset-inline-start: 0; top: .65em; width: 8px; height: 8px; border-radius: 50%; background: var(--gj-accent); }
.gj-prose__cta { margin-top: var(--space-2xl); text-align: center; }

.gj-checklist { display: flex; flex-direction: column; gap: var(--space-md); margin: var(--space-lg) 0; }
.gj-checklist li { display: flex; align-items: center; gap: var(--space-md); background: var(--gj-bg-white); border: 1px solid var(--gj-border-light); border-radius: var(--radius-md); padding: var(--space-md) var(--space-lg); box-shadow: var(--shadow-sm); }
.gj-checklist .gj-icon { flex-shrink: 0; width: 40px; height: 40px; border-radius: var(--radius-circle); background: rgba(46,125,79,0.10); color: var(--gj-primary); font-size: 20px; }

/* Steps */
.gj-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-lg); margin: var(--space-xl) 0; }
.gj-step {
    text-align: center; padding: var(--space-xl) var(--space-md);
    background: var(--gj-bg-white); border: 1px solid var(--gj-border-light);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.gj-step:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }
.gj-step span { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: var(--radius-circle); background: var(--gradient-primary); color: #fff; font-weight: 800; font-size: var(--text-lg); margin-bottom: var(--space-sm); box-shadow: var(--shadow-sm); }
.gj-step h4 { font-size: var(--text-base); margin-bottom: 4px; }
.gj-step p { font-size: var(--text-sm); color: var(--gj-text-muted); }

/* About values */
.gj-about__values { display: flex; flex-direction: column; gap: var(--space-md); }
.gj-value {
    display: flex; gap: var(--space-md); padding: var(--space-lg);
    background: var(--gj-bg-white); border: 1px solid var(--gj-border-light);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.gj-value:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); }
.gj-value > .gj-icon {
    flex-shrink: 0; width: 48px; height: 48px; border-radius: var(--radius-circle);
    background: rgba(46,125,79,0.10); color: var(--gj-primary); font-size: 22px;
}
.gj-value h4 { margin-bottom: 2px; }
.gj-value p { font-size: var(--text-sm); }

/* Gallery */
.gj-gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md); }
.gj-gallery-item { position: relative; aspect-ratio: 1/1; border-radius: var(--radius-lg); overflow: hidden; }
.gj-gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slow); }
.gj-gallery-item:hover img { transform: scale(1.08); }
.gj-gallery-item__zoom { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; background: rgba(26,74,48,.4); opacity: 0; transition: opacity var(--transition-base); }
.gj-gallery-item:hover .gj-gallery-item__zoom { opacity: 1; }
@media (max-width: 767px) { .gj-gallery-grid { grid-template-columns: repeat(2, 1fr); } }

/* FAQ accordion */
.gj-faq__cat { margin: var(--space-xl) 0 var(--space-md); color: var(--gj-primary-dark); }
.gj-accordion { display: flex; flex-direction: column; gap: var(--space-sm); }
.gj-accordion__item { border: 1px solid var(--gj-border); border-radius: var(--radius-md); overflow: hidden; background: var(--gj-bg-white); transition: box-shadow var(--transition-base), border-color var(--transition-base); }
.gj-accordion__item.is-open { border-color: rgba(46,125,79,0.4); box-shadow: var(--shadow-card); }
.gj-accordion__head { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: var(--space-md) var(--space-lg); font-weight: 600; text-align: start; gap: var(--space-md); transition: color var(--transition-fast); }
.gj-accordion__head:hover { color: var(--gj-primary); }
.gj-accordion__item.is-open .gj-accordion__head { color: var(--gj-primary-dark); }
.gj-accordion__chev { transition: transform var(--transition-base); flex-shrink: 0; color: var(--gj-primary); }
.gj-accordion__item.is-open .gj-accordion__chev { transform: rotate(180deg); }
.gj-accordion__body { max-height: 0; overflow: hidden; transition: max-height var(--transition-base); }
.gj-accordion__inner { padding: 0 var(--space-lg) var(--space-md); color: var(--gj-text-secondary); }

/* Contact */
.gj-contact__list { display: flex; flex-direction: column; gap: var(--space-md); }
.gj-contact__list li { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-sm) 0; }
.gj-contact__list .gj-icon { flex-shrink: 0; width: 46px; height: 46px; border-radius: var(--radius-circle); background: rgba(46,125,79,0.10); color: var(--gj-primary); font-size: 20px; }
.gj-contact__list strong { display: block; font-size: var(--text-sm); color: var(--gj-text); }
.gj-contact__list a, .gj-contact__list span { color: var(--gj-text-secondary); }
.gj-contact__hours { margin-top: var(--space-md); color: var(--gj-text-muted); font-size: var(--text-sm); }
.gj-contact__map { margin-top: var(--space-lg); border-radius: var(--radius-lg); overflow: hidden; }
.gj-contact__map iframe { width: 100%; height: 280px; border: 0; display: block; }
.gj-contact__form-wrap { background: var(--gj-bg-white); padding: var(--space-xl); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }

/* Forms */
.gj-form .gj-form__msg { margin-top: var(--space-sm); font-size: var(--text-sm); min-height: 1.2em; }
.gj-form.is-loading { opacity: .6; pointer-events: none; }
.gj-form__msg.is-success { color: var(--gj-primary); }
.gj-form__msg.is-error { color: var(--gj-danger); }
.gj-vendor-apply { margin-top: var(--space-3xl); background: var(--gj-bg-white); padding: var(--space-2xl); border-radius: var(--radius-xl); box-shadow: var(--shadow-card); }

/* 404 */
.gj-404 { padding-block: var(--space-5xl); }
.gj-404__leaf { color: var(--gj-accent); }
.gj-404__code { font-size: clamp(4rem, 14vw, 8rem); color: var(--gj-primary); line-height: 1; }
.gj-404__actions { display: flex; gap: var(--space-md); justify-content: center; margin-top: var(--space-lg); flex-wrap: wrap; }

/* Pagination */
.gj-pagination { margin-top: var(--space-2xl); display: flex; justify-content: center; }
.gj-pagination .page-numbers { display: inline-grid; place-items: center; min-width: 42px; height: 42px; padding: 0 .5rem; border-radius: var(--radius-md); border: 1px solid var(--gj-border); margin: 0 3px; }
.gj-pagination .page-numbers.current { background: var(--gj-primary); color: #fff; border-color: var(--gj-primary); }
.gj-pagination .page-numbers:hover:not(.current) { background: var(--gj-bg-alt); }

/* Empty state */
.gj-empty { padding-block: var(--space-3xl); }
.gj-empty .btn { margin-top: var(--space-md); }

/* ===== Global search overlay (header button works on every page) ===== */
.gj-search { position: fixed; inset: 0; z-index: 1100; opacity: 0; visibility: hidden; transition: opacity var(--transition-base); }
.gj-search.is-open { opacity: 1; visibility: visible; }
.gj-search__backdrop { position: absolute; inset: 0; background: rgba(26,74,48,.55); backdrop-filter: blur(4px); }
.gj-search__panel { position: relative; max-width: 720px; margin: 8vh auto 0; background: #fff; border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); overflow: hidden; }
.gj-search__form { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-md) var(--space-lg); border-bottom: 1px solid var(--gj-border); }
.gj-search__form > .gj-icon { color: var(--gj-text-muted); }
.gj-search__input { flex: 1; border: none; font-size: var(--text-lg); padding: .5rem 0; background: transparent; }
.gj-search__input:focus { outline: none; }
.gj-search__results { max-height: 60vh; overflow-y: auto; padding: var(--space-sm) var(--space-lg) var(--space-lg); }
.gj-search__group h4 { font-size: var(--text-sm); color: var(--gj-text-muted); margin: var(--space-md) 0 var(--space-xs); }
.gj-search__group ul { display: flex; flex-direction: column; gap: 4px; }
.gj-search__group li a { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-sm); border-radius: var(--radius-md); }
.gj-search__group li a:hover { background: var(--gj-bg-alt); }
.gj-search__group img, .gj-search__noimg { width: 44px; height: 44px; border-radius: var(--radius-md); object-fit: cover; background: var(--gj-bg-alt); flex-shrink: 0; }
.gj-search__txt strong { display: block; }
.gj-search__txt small { color: var(--gj-text-muted); font-size: var(--text-xs); }
.gj-search__empty { text-align: center; color: var(--gj-text-muted); padding: var(--space-xl); }
.gj-search__loading { height: 120px; background: linear-gradient(90deg,var(--gj-bg-alt) 25%,var(--gj-sand-light) 50%,var(--gj-bg-alt) 75%); background-size: 200% 100%; animation: gj-shimmer 1.2s infinite; border-radius: var(--radius-md); }
@keyframes gj-shimmer { to { background-position: -200% 0; } }

@media (max-width: 767px) {
    .gj-steps { grid-template-columns: repeat(2, 1fr); }
    .gj-contact__grid, .gj-about__grid, .gj-mission__grid { grid-template-columns: 1fr; }
}
@media (max-width: 575px) { .gj-search__panel { margin: 0; height: 100dvh; border-radius: 0; } }