/*
  TAYF Page Patterns — Minimal UI layer
  هدفه: يخلي Gutenberg blocks تطلع شكلها “Product / Dashboard” قريب من Lovable
*/

:root{
  --tayf-bg: #0b1220;
  --tayf-surface: #0f172a;
  --tayf-border: #1f2937;
  --tayf-text: #e5e7eb;
  --tayf-muted: #94a3b8;
  --tayf-accent: #22c55e;
  --tayf-dark: #071019;
  --tayf-radius-lg: 22px;
  --tayf-radius-md: 16px;
  --tayf-shadow: 0 10px 30px rgba(0,0,0,.25);
}

/* Make sure Arabic reads well */
body{
  text-rendering: optimizeLegibility;
}

/* Pattern helpers */
.tayf-hero{
  background: radial-gradient(1200px 500px at 50% -100px, rgba(34,197,94,.18), rgba(11,18,32,0) 70%), var(--tayf-bg);
  border: 1px solid var(--tayf-border);
  border-radius: var(--tayf-radius-lg);
  color: var(--tayf-text);
}

.tayf-pill{
  display:inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  background: #0f172a;
  color: var(--tayf-text);
  border: 1px solid var(--tayf-border);
}

.tayf-tabs{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:center;
  margin-top: 10px;
}

.tayf-tab{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(226,232,240,.18);
  background: rgba(15,23,42,.65);
  color: var(--tayf-text);
  text-decoration:none;
  font-size: 12px;
  font-weight: 700;
}

.tayf-tab.is-active{
  border-color: rgba(34,197,94,.55);
  box-shadow: 0 0 0 3px rgba(34,197,94,.12);
}

.tayf-card{
  border:1px solid var(--tayf-border);
  border-radius: var(--tayf-radius-md);
  background: var(--tayf-surface);
  color: var(--tayf-text);
  box-shadow: var(--tayf-shadow);
}

.tayf-card .tayf-card-title{
  font-weight: 800;
  margin: 0 0 6px;
}

.tayf-card .tayf-card-text{
  margin:0;
  color: #cbd5e1;
  line-height: 1.8;
  font-size: 13px;
}

.tayf-link{
  color: var(--tayf-accent);
  text-decoration: none;
  font-weight: 800;
}

/* Block styles (Gutenberg “Styles” panel) */
.wp-block-button.is-style-tayf-primary .wp-block-button__link{
  background: var(--tayf-accent) !important;
  color: var(--tayf-dark) !important;
  border-radius: 999px !important;
  padding: 12px 18px !important;
  font-weight: 800 !important;
}

.wp-block-button.is-style-tayf-ghost .wp-block-button__link{
  background: transparent !important;
  color: var(--tayf-text) !important;
  border: 1px solid rgba(226,232,240,.25) !important;
  border-radius: 999px !important;
  padding: 12px 18px !important;
  font-weight: 700 !important;
}

.wp-block-group.is-style-tayf-card{
  border:1px solid var(--tayf-border) !important;
  border-radius: var(--tayf-radius-md) !important;
  background: var(--tayf-surface) !important;
  padding: 18px !important;
}

.wp-block-columns.is-style-tayf-tight{
  gap: 14px;
}

/* Ensure links remain readable on dark surfaces */
.tayf-hero a,
.tayf-card a{
  color: var(--tayf-accent);
}

/* Mobile safety */
@media (max-width: 600px){
  .tayf-hero{ border-radius: 18px; }
}

/* Tabs (implemented as Button block style) */
.wp-block-buttons.tayf-tabs{gap:8px}
.wp-block-button.is-style-tayf-tab .wp-block-button__link{
  background:rgba(255,255,255,.08);
  color:var(--tayf-text, #e5e7eb);
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  padding:8px 12px;
  font-size:13px;
  font-weight:700;
  line-height:1;
  text-decoration:none;
}
.wp-block-button.is-style-tayf-tab.is-active .wp-block-button__link{
  background:rgba(34,197,94,.18);
  border-color:rgba(34,197,94,.45);
  color:#ecfdf5;
}
.wp-block-button.is-style-tayf-tab .wp-block-button__link:hover{
  border-color:rgba(255,255,255,.25);
  transform:translateY(-1px);
}

/* Light cards used in mixed sections */
.tayf-light-card{
  box-shadow: 0 10px 24px rgba(15,23,42,.08);
}

/* Improve contrast on dark hero if theme forces dark text */
.tayf-hero,
.tayf-hero *{
  color: inherit;
}
.tayf-hero .has-text-color{ color: var(--tayf-text) !important; }

/* Make links on light background look like product UI */
.tayf-light-card a{ color: #16a34a; text-decoration:none; font-weight:800; }
.tayf-light-card a:hover{ text-decoration:underline; }

/* Light cards + links (used outside the hero) */
.tayf-light-card{
  box-shadow: 0 8px 30px rgba(2,6,23,0.06);
}

.tayf-link{
  color: var(--tayf-accent);
  text-decoration: none;
}
.tayf-link:hover{ text-decoration: underline; }

/* Tight columns spacing helper (optional) */
.wp-block-columns.is-style-tayf-tight{
  gap: 14px;
}

/* Primary button style for patterns */
.wp-block-button.is-style-tayf-primary .wp-block-button__link{
  background: var(--tayf-accent);
  color: #071019;
  border-radius: 999px;
  padding: 10px 16px;
  font-weight: 800;
  border: 1px solid rgba(34,197,94,0.25);
}

/* Highlight card */
.tayf-highlight{
  box-shadow: 0 12px 40px rgba(34,197,94,0.12);
}