/* PureShot - theme-only additions on top of the compiled app.css */

/* Work gallery tab panes (JS toggles .active) */
.ps-tabpane { display: none; }
.ps-tabpane.is-active { display: grid; }

/* Work gallery tab bar */
.ps-tabs { display: flex; gap: 0; margin-bottom: 28px; border-bottom: 1px solid rgba(255,255,255,0.07); overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.ps-tabs::-webkit-scrollbar { display: none; }
.ps-tab { padding: 12px 20px; background: transparent; border: none; border-bottom: 2px solid transparent; color: rgba(240,235,227,0.68); font-size: 13px; font-weight: 700; cursor: pointer; transition: all 180ms; white-space: nowrap; font-family: 'Almarai','Tajawal','IBM Plex Sans Arabic',sans-serif; min-height: 44px; margin-bottom: -1px; display: inline-flex; align-items: center; gap: 6px; }
.ps-tab[data-active] { border-bottom-color: #FF8B00; color: #FF8B00; }
.ps-tab-count { font-size: 10px; font-weight: 800; direction: ltr; background: rgba(255,255,255,0.07); color: rgba(240,235,227,0.48); padding: 1px 6px; border-radius: 10px; min-width: 18px; text-align: center; }
.ps-tab[data-active] .ps-tab-count { background: rgba(255,139,0,0.5); color: #FF8B00; }

/* FAQ answer collapse */
.ps-faq-body { max-height: 0; overflow: hidden; transition: max-height 320ms cubic-bezier(0.4,0,0.2,1); }
.ps-faq-item.is-open .ps-faq-body { max-height: 600px; }
.ps-faq-item.is-open .ps-faq-plus { transform: rotate(45deg); }

/* Blog prose */
.ps-prose { font-family: 'Almarai','Tajawal','IBM Plex Sans Arabic',sans-serif; color: rgba(240,235,227,0.82); line-height: 2; font-size: 17px; }
.ps-prose h2 { font-family: 'Noto Kufi Arabic','Tajawal',sans-serif; color: #F0EBE3; font-size: clamp(22px,3vw,32px); margin: 40px 0 14px; }
.ps-prose h3 { font-family: 'Noto Kufi Arabic','Tajawal',sans-serif; color: #F0EBE3; font-size: clamp(18px,2.4vw,24px); margin: 32px 0 12px; }
.ps-prose p { margin: 0 0 18px; }
.ps-prose a { color: #FF8B00; }
.ps-prose ul, .ps-prose ol { margin: 0 18px 18px; padding-inline-start: 22px; }
.ps-prose li { margin-bottom: 8px; }
.ps-prose img { max-width: 100%; height: auto; border-radius: 6px; margin: 12px 0; }
.ps-prose blockquote { border-inline-start: 3px solid #FF8B00; margin: 20px 0; padding: 4px 18px; color: rgba(240,235,227,0.7); }

/* Blog list card hover */
@media (hover: hover) {
  .ps-post-card:hover { border-color: rgba(255,139,0,0.28) !important; transform: translateY(-4px); }
}
.ps-post-card { transition: transform 220ms ease, border-color 220ms ease; }

/* Hero background showreel (poster is the section bg; video fades in on top, desktop only) */
:root { --nav-h: 78px; }
.hero { position: relative; overflow: hidden; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; justify-content: center; margin-top: calc(-1 * var(--nav-h)); }
.hero-cta { transition: transform 200ms ease, box-shadow 200ms ease, filter 200ms ease !important; }
.hero-cta:hover { transform: translateY(-2px); filter: brightness(1.06); }
.hero-cta svg { flex-shrink: 0; }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; opacity: 0; transition: opacity 900ms ease; pointer-events: none; }
.hero-video.is-ready { opacity: 1; }
.hero-overlay { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(15,14,13,0.8) 0%, rgba(15,14,13,0.58) 45%, rgba(15,14,13,0.9) 100%); }
.hero-inner { position: relative; z-index: 2; }
@media (max-width: 768px) { .hero-video { display: none; } }
@media (prefers-reduced-motion: reduce) { .hero-video { display: none; } }

/* Sticky floating WhatsApp button (all pages) */
.ps-wa-float { position: fixed; z-index: 200; bottom: clamp(16px,3vw,26px); left: clamp(16px,3vw,26px); width: 56px; height: 56px; border-radius: 50%; background: #25D366; color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 28px rgba(0,0,0,0.4); transition: transform 220ms ease, box-shadow 220ms ease; }
.ps-wa-float:hover { transform: scale(1.07); box-shadow: 0 14px 34px rgba(37,211,102,0.45); }
.ps-wa-float .ps-wa-ico { position: relative; z-index: 1; }
.ps-wa-pulse { position: absolute; inset: 0; border-radius: 50%; background: #25D366; z-index: 0; animation: ps-wa-ping 2.2s cubic-bezier(0,0,0.2,1) infinite; }
@keyframes ps-wa-ping { 0% { transform: scale(1); opacity: 0.5; } 70% { transform: scale(1.9); opacity: 0; } 100% { transform: scale(1.9); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ps-wa-pulse { animation: none; display: none; } }

/* Trust band: stats + certifications (home) */
.ps-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(255,255,255,0.07); }
.ps-stat { background: #181614; text-align: center; padding: clamp(22px,3vw,34px) clamp(10px,2vw,16px); min-width: 0; }
.ps-stat-n { font-family: 'Playfair Display',Georgia,serif; font-size: clamp(28px,3.6vw,44px); font-weight: 900; line-height: 1; direction: ltr; display: inline-block; background: linear-gradient(135deg,#FF8B00,#FFB04D); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.ps-stat-l { font-size: 13px; font-weight: 700; color: #F0EBE3; margin-top: 8px; font-family: 'Almarai','Tajawal','IBM Plex Sans Arabic',sans-serif; }
.ps-stat-s { font-size: 10.5px; color: rgba(240,235,227,0.48); margin-top: 3px; letter-spacing: 0.4px; font-family: 'Almarai','Tajawal','IBM Plex Sans Arabic',sans-serif; }

.ps-certs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: clamp(16px,2.2vw,20px) clamp(16px,4vw,48px); border-top: 1px solid rgba(255,255,255,0.07); }
.ps-cert { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 10px 14px; background: #211F1C; border: 1px solid rgba(255,139,0,0.16); border-radius: 10px; min-height: 48px; min-width: 0; transition: border-color 200ms ease, background 200ms ease; }
.ps-cert-check { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%; background: rgba(255,139,0,0.12); color: #FF8B00; font-weight: 900; font-size: 12px; }
.ps-cert-txt { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.ps-cert-l { font-size: 12.5px; font-weight: 800; color: #F0EBE3; white-space: nowrap; font-family: 'Almarai','Tajawal','IBM Plex Sans Arabic',sans-serif; }
.ps-cert-s { font-size: 10px; color: rgba(240,235,227,0.5); margin-top: 2px; white-space: nowrap; font-family: 'Almarai','Tajawal','IBM Plex Sans Arabic',sans-serif; }
@media (hover: hover) { .ps-cert:hover { border-color: rgba(255,139,0,0.4); background: #262320; } }

@media (max-width: 720px) {
  .ps-stats { grid-template-columns: repeat(2, 1fr); }
  .ps-certs { grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 16px; }
  .ps-cert { padding: 10px 12px; }
  .ps-cert-l, .ps-cert-s { white-space: normal; }
}

/* Linked service cards + single service landing page */
.ps-svc-card { transition: transform 220ms ease, border-color 220ms ease; }
@media (hover: hover) { .ps-svc-card:hover { transform: translateY(-4px); border-color: rgba(255,139,0,0.28); } }
.ps-svc-card:hover .ps-svc-more { text-decoration: underline; text-underline-offset: 3px; }
.ps-svc-cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px,5vw,56px); }
@media (max-width: 760px) { .ps-svc-cols { grid-template-columns: 1fr; gap: 30px; } }