/*
Theme Name: Shine Up
Theme URI: https://shineup.pro
Author: Shine Up
Description: Theme for Shine Up, a business setup and PRO services company in Doha, Qatar. English, Arabic (RTL), Bengali, Nepali and Urdu (RTL), 95 services in 8 categories, contact and free consultation forms. Brand colours: silver and black.
Version: 1.2.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: shine-up
*/

/* Brand tokens. The same values are in the Tailwind config (_build/tailwind.config.js). */
:root {
  --su-ink: #111111;
  --su-coal: #1B1B1B;
  --su-silver: #A6A6A6;
  --su-silver-light: #D4D4D4;
  --su-mist: #F5F5F5;
  --su-steel: #5E5E5E;
}

html { scroll-behavior: smooth; scroll-padding-top: 88px; }

body { font-family: 'Poppins', 'Tajawal', system-ui, -apple-system, 'Segoe UI', sans-serif; }
[dir="rtl"] body { font-family: 'Tajawal', 'Poppins', system-ui, sans-serif; }
html[lang="bn"] body { font-family: 'Hind Siliguri', 'Poppins', system-ui, sans-serif; }
html[lang="ne"] body { font-family: 'Poppins', 'Noto Sans Devanagari', system-ui, sans-serif; }
html[lang="ur"] body { font-family: 'Noto Nastaliq Urdu', 'Tajawal', system-ui, sans-serif; line-height: 2; }

/* Letter-spacing breaks the joined letters of Arabic and Urdu, and the conjuncts of Bengali and Devanagari. */
[dir="rtl"] [class*="tracking-"], html[lang="bn"] [class*="tracking-"], html[lang="ne"] [class*="tracking-"] { letter-spacing: 0; }

/* Bengali and Devanagari have tall vowel signs, and Nastaliq is taller still: tight headline line heights would clip them. */
html[lang="bn"] :is(h1, h2, h3), html[lang="ne"] :is(h1, h2, h3) { line-height: 1.35; }
html[lang="ur"] :is(h1, h2, h3) { line-height: 1.9; }
html[lang="ur"] :is(p, li, dd, label, summary) { line-height: 2.1; }

/* Metallic silver button: black text, the brand's silver as a brushed gradient. */
.btn-silver {
  background: linear-gradient(135deg, #F4F4F4 0%, #C9C9C9 45%, #A6A6A6 70%, #E2E2E2 100%);
  color: var(--su-ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 1px 2px rgba(0, 0, 0, .15);
}
.btn-silver:hover { filter: brightness(1.05); }

.btn-dark { background: var(--su-ink); color: #fff; }
.btn-dark:hover { background: #2A2A2A; }

/* Silver text for headlines on black. */
.text-silver-metal {
  background: linear-gradient(180deg, #FFFFFF 0%, #D4D4D4 55%, #9A9A9A 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Fine dot grid behind the dark hero. */
.hero-grid {
  background-color: var(--su-ink);
  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .08) 1px, transparent 0);
  background-size: 28px 28px;
}

/* The rising arrow from the logo, used as a thin decorative line. */
.rise-line { background: linear-gradient(90deg, transparent, var(--su-silver) 30%, var(--su-silver) 70%, transparent); height: 1px; }

summary { list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }

/* Arrows point the reading direction. */
[dir="rtl"] .flip-rtl { display: inline-block; transform: scaleX(-1); }

/* Body copy of plain pages (Privacy Policy, blog posts). */
.entry-content > * + * { margin-top: 1rem; }
.entry-content h2 { font-size: 1.5rem; font-weight: 700; margin-top: 2rem; }
.entry-content h3 { font-size: 1.25rem; font-weight: 600; margin-top: 1.5rem; }
.entry-content ul { list-style: disc; padding-inline-start: 1.5rem; }
.entry-content ol { list-style: decimal; padding-inline-start: 1.5rem; }
.entry-content a { color: var(--su-ink); text-decoration: underline; text-underline-offset: 3px; }
.entry-content a:hover { color: var(--su-steel); }

a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--su-ink);
  outline-offset: 2px;
}

button[type="submit"] { transition: transform .15s ease, box-shadow .15s ease; }
button[type="submit"]:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(0, 0, 0, .18); }
button[type="submit"]:disabled { opacity: .6; cursor: not-allowed; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}