/* =========================================================================
 Helmara - Global base styles
 Reset + typography + buttons + skip-link + theme-transition mechanics.
 Ported 1:1 in effect from /client/src/index.css @layer base rules.
 ========================================================================= */

*,
*::before,
*::after {
 box-sizing: border-box;
}

html {
 scroll-behavior: smooth;
 -webkit-text-size-adjust: 100%;
}

body {
 margin: 0;
 background-color: var(--color-bg-base);
 color: var(--color-text-primary);
 font-family: "League Spartan", system-ui, -apple-system, sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 transition: background-color 0.3s ease, color 0.3s ease;
}

img,
video,
svg {
 max-width: 100%;
 display: block;
}

a {
 color: inherit;
 text-decoration: none;
}

button {
 font: inherit;
 color: inherit;
}

ul,
ol {
 margin: 0;
 padding: 0;
 list-style: none;
}

p {
 margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
 margin: 0;
 font-family: "League Spartan", system-ui, sans-serif;
 font-weight: 600;
 letter-spacing: -0.015em;
 line-height: 1.15;
 color: var(--color-text-primary);
}

.pp-display {
 font-family: "League Spartan", system-ui, sans-serif;
 font-weight: 600;
 letter-spacing: -0.02em;
 line-height: 1.12;
 color: var(--color-text-primary);
 margin: 0;
}

.pp-page {
 background-color: var(--color-bg-base);
 color: var(--color-text-primary);
 font-family: "League Spartan", system-ui, sans-serif;
 overflow-x: clip;
}

:focus-visible {
 outline: 2px solid var(--color-border-focus);
 outline-offset: 2px;
}

/* ---- Skip link (a11y) ---- */
.skip-link {
 position: absolute;
 left: -9999px;
 top: 0;
 z-index: 100;
 padding: 12px 20px;
 background: var(--color-primary);
 color: white;
 font-weight: 600;
 border-radius: var(--radius-md);
}

.skip-link:focus {
 left: 16px;
 top: 16px;
}

/* ---- Container ---- */
.container {
 width: 100%;
 max-width: var(--container-2xl);
 margin-inline: auto;
 padding-inline: 20px;
}

@media (min-width: 640px) {
 .container {
 padding-inline: 24px;
 }
}

@media (min-width: 1024px) {
 .container {
 padding-inline: 56px;
 }
}

/* ---- Visually hidden (screen-reader only) ---- */
.visually-hidden {
 position: absolute !important;
 width: 1px;
 height: 1px;
 padding: 0;
 margin: -1px;
 overflow: hidden;
 clip: rect(0, 0, 0, 0);
 white-space: nowrap;
 border: 0;
}

/* ---- Gradient text helpers ---- */
.text-gradient-hero {
 background: var(--gradient-text-hero);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 background-clip: text;
}

.text-gradient-orange {
 background: var(--gradient-orange-text);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 background-clip: text;
}

/* ---- Primary CTA button (btn-cta) ---- */
.btn-cta {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 0.5rem;
 background: var(--color-accent);
 color: #ffffff;
 font-family: "League Spartan", sans-serif;
 font-weight: 600;
 line-height: 1;
 letter-spacing: 0.01em;
 border: none;
 cursor: pointer;
 transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
 position: relative;
 overflow: hidden;
 min-height: 48px;
 border-radius: calc(var(--radius) - 2px);
 box-shadow: 0 4px 14px rgba(247, 151, 35, 0.18);
 padding: 0.95em 2rem 0.7em;
 text-decoration: none;
}

.btn-cta-icon {
 display: inline-flex;
 flex-shrink: 0;
 align-items: center;
 justify-content: center;
 width: 0.95em;
 height: 0.95em;
 line-height: 0;
}

.btn-cta-icon svg {
 display: block;
 width: 100%;
 height: 100%;
}

.btn-cta:hover {
 background: var(--color-accent-dim);
 transform: translateY(-1px);
 box-shadow: 0 6px 18px rgba(247, 151, 35, 0.22);
}

.btn-cta:active {
 transform: translateY(0);
 box-shadow: 0 4px 14px rgba(247, 151, 35, 0.18);
}

.btn-cta.btn-cta-outline {
 background: #0b0b0b;
 color: #fff;
 box-shadow: none;
 padding: 0.85em 1.25rem 0.65em;
 min-height: 40px;
 font-size: 0.875rem;
}

.btn-cta.btn-cta-outline:hover {
 background: #000;
}

.btn-ghost {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 background: transparent;
 border: 1px solid var(--color-border-strong);
 color: var(--color-text-primary);
 font-family: "League Spartan", sans-serif;
 font-weight: 500;
 cursor: pointer;
 transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
 min-height: 48px;
 border-radius: 6px;
 padding: 0 1.25rem;
 text-decoration: none;
}

.btn-ghost:hover {
 border-color: var(--color-text-primary);
 background: rgba(15, 23, 42, 0.04);
}

.dark .btn-ghost:hover {
 border-color: var(--color-accent);
 background: rgba(247, 151, 35, 0.08);
}

/* ---- Scrollbars ---- */
::-webkit-scrollbar {
 width: 6px;
}
::-webkit-scrollbar-track {
 background: var(--color-bg-base);
}
::-webkit-scrollbar-thumb {
 background: var(--color-border-strong);
 border-radius: 3px;
}

/* =========================================================================
 Theme switch - circular View Transition reveal
 Ported verbatim from /client/src/index.css (::view-transition-* rules).
 ========================================================================= */
::view-transition-group(root) {
 z-index: 2147483646;
}

::view-transition-old(root),
::view-transition-new(root) {
 animation: none;
 mix-blend-mode: normal;
 height: 100%;
 width: 100%;
}

::view-transition-old(root) {
 z-index: 1;
}

::view-transition-new(root) {
 z-index: 2;
 animation: theme-circle-reveal 620ms cubic-bezier(0.645, 0.045, 0.355, 1) both;
}

@keyframes theme-circle-reveal {
 from {
 clip-path: circle(0px at var(--theme-reveal-x, 50%) var(--theme-reveal-y, 50%));
 }
 to {
 clip-path: circle(var(--theme-reveal-r, 100vmax) at var(--theme-reveal-x, 50%) var(--theme-reveal-y, 50%));
 }
}

@keyframes theme-toggle-icon-pulse {
 0% {
 transform: scale(1) rotate(0deg);
 }
 40% {
 transform: scale(0.85) rotate(-10deg);
 }
 100% {
 transform: scale(1) rotate(0deg);
 }
}

.theme-toggle-icon-pulse {
 animation: theme-toggle-icon-pulse 220ms ease-out;
}

/* No-JS theme toggle button must still render sensibly before hydration */
.theme-toggle {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 height: 36px;
 width: 36px;
 border-radius: 8px;
 border: 1px solid var(--pp-border);
 background: var(--pp-elevated);
 color: var(--pp-text-3);
 cursor: pointer;
 transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.theme-toggle:hover {
 border-color: var(--pp-border-s);
 background: rgba(148, 163, 184, 0.12);
 color: var(--pp-text);
}

/* Temporary locale artwork toggle (legacy; prefer .lang-switch crawlable anchors) */
.locale-toggle {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 height: 36px;
 min-width: 36px;
 padding: 0 0.55rem;
 border-radius: 8px;
 border: 1px solid var(--pp-border);
 background: var(--pp-elevated);
 color: var(--pp-text-3);
 cursor: pointer;
 font-family: "League Spartan", sans-serif;
 font-size: 0.72rem;
 font-weight: 700;
 letter-spacing: 0.06em;
 transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.locale-toggle:hover {
 border-color: var(--pp-border-s);
 background: rgba(148, 163, 184, 0.12);
 color: var(--pp-text);
}

.locale-toggle__ar {
 display: none;
 font-size: 0.95rem;
 letter-spacing: 0;
 font-weight: 700;
}

html.locale-ar .locale-toggle__en {
 display: none;
}

html.locale-ar .locale-toggle__ar {
 display: inline;
}

/* Crawlable language switcher (EN ↔ AR) */
.lang-switch {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 height: 36px;
 min-width: 36px;
 padding: 0 0.65rem;
 border-radius: 8px;
 border: 1px solid var(--pp-border);
 background: var(--pp-elevated);
 color: var(--pp-text-3);
 font-family: "League Spartan", "Tajawal", system-ui, sans-serif;
 font-size: 0.72rem;
 font-weight: 700;
 letter-spacing: 0.02em;
 text-decoration: none;
 transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.lang-switch:hover {
 border-color: var(--pp-border-s);
 background: rgba(148, 163, 184, 0.12);
 color: var(--pp-text);
}

.theme-toggle svg {
 width: 16px;
 height: 16px;
}

.theme-toggle .icon-sun {
 display: none;
}
.theme-toggle .icon-moon {
 display: inline-flex;
}
html.dark .theme-toggle .icon-sun {
 display: inline-flex;
}
html.dark .theme-toggle .icon-moon {
 display: none;
}

@media (prefers-reduced-motion: reduce) {
 ::view-transition-old(root),
 ::view-transition-new(root) {
 animation: none !important;
 }

 .theme-toggle-icon-pulse {
 animation: none !important;
 }

 html {
 scroll-behavior: auto;
 }

 *,
 *::before,
 *::after {
 animation-duration: 0.01ms !important;
 animation-iteration-count: 1 !important;
 transition-duration: 0.01ms !important;
 }
}