/* =========================================================
   Royal Area Hub (Premium) - Hub Only Styles
   Scope: .royal-hub-page
   RTL-first, Responsive, Premium editor typography
========================================================= */

.royal-hub-page {
  direction: rtl;
  text-align: right;
  unicode-bidi: isolate;
}

/* Optional: better Arabic font stack */
.royal-hub-page,
.royal-hub-page .royal-hub-editor {
  font-family: "Tajawal", "Segoe UI", "Tahoma", "Arial", sans-serif;
}

/* -----------------------------
   HERO polish (optional)
------------------------------ */
.royal-hub-page .royal-area-hero-inner {
  max-width: 980px;
  color: white;
}

.royal-hub-page .royal-hero-title {
  font-weight: 900;
  letter-spacing: .2px;
  line-height: 1.25;
  color: rgba(255,255,255,.92);
}

.royal-hub-page .royal-hero-subtitle {
  line-height: 1.9;
  font-size: 1.05rem;
}

/* -----------------------------
   Editor Content Styling
   Applies to everything you write in WP editor
------------------------------ */
.royal-hub-page .royal-hub-editor {
  max-width: 980px;
  margin-inline: auto;
}

.royal-hub-page .royal-hub-editor p {
  color: rgba(0,0,0,.72);
  line-height: 2;
  font-size: 1.04rem;
  margin-bottom: 1rem;
}

.royal-hub-page .royal-hub-editor strong {
  color: rgba(0,0,0,.88);
  font-weight: 800;
}

.royal-hub-page .royal-hub-editor a {
  text-decoration: none;
  font-weight: 800;
  border-bottom: 1px solid rgba(0,0,0,.12);
}

.royal-hub-page .royal-hub-editor a:hover {
  border-bottom-color: rgba(0,0,0,.35);
}

/* Headings */
.royal-hub-page .royal-hub-editor h2,
.royal-hub-page .royal-hub-editor h3,
.royal-hub-page .royal-hub-editor h4 {
  color: rgba(0,0,0,.92);
  font-weight: 900;
  line-height: 1.35;
  margin: 1.6rem 0 .8rem;
  position: relative;
}

.royal-hub-page .royal-hub-editor h2 {
  font-size: 1.55rem;
  padding-right: 14px;
}

.royal-hub-page .royal-hub-editor h2::before {
  content: "";
  position: absolute;
  right: 0;
  top: .35em;
  width: 6px;
  height: 1.25em;
  border-radius: 999px;
  background: rgba(0,0,0,.18);
}

.royal-hub-page .royal-hub-editor h3 { font-size: 1.25rem; }
.royal-hub-page .royal-hub-editor h4 { font-size: 1.12rem; }

/* Lists */
.royal-hub-page .royal-hub-editor ul,
.royal-hub-page .royal-hub-editor ol {
  padding-right: 1.2rem;
  padding-left: 0;
  margin-bottom: 1.2rem;
  color: rgba(0,0,0,.72);
  line-height: 1.9;
}

.royal-hub-page .royal-hub-editor li {
  margin: .35rem 0;
}

/* Blockquote */
.royal-hub-page .royal-hub-editor blockquote {
  margin: 1.4rem 0;
  padding: 1.1rem 1.1rem 1.1rem 1.25rem;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(0,0,0,.05), rgba(0,0,0,.015));
  border: 1px solid rgba(0,0,0,.07);
  position: relative;
}

.royal-hub-page .royal-hub-editor blockquote:before {
  content: "“";
  position: absolute;
  right: 16px;
  top: 8px;
  font-size: 42px;
  line-height: 1;
  opacity: .18;
}

.royal-hub-page .royal-hub-editor blockquote p {
  margin: 0;
  color: rgba(0,0,0,.75);
}

/* Separator */
.royal-hub-page .royal-hub-editor hr {
  border: none;
  height: 1px;
  background: rgba(0,0,0,.08);
  margin: 1.8rem 0;
}

/* Images & galleries */
.royal-hub-page .royal-hub-editor img {
  max-width: 100%;
  height: auto;
  border-radius: 18px;
}

.royal-hub-page .royal-hub-editor figure {
  margin: 1.2rem 0;
}

.royal-hub-page .royal-hub-editor figcaption {
  color: rgba(0,0,0,.55);
  font-size: .95rem;
  margin-top: .5rem;
}

/* Tables */
.royal-hub-page .royal-hub-editor table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.2rem 0 1.6rem;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.08);
}

.royal-hub-page .royal-hub-editor th,
.royal-hub-page .royal-hub-editor td {
  padding: .9rem .9rem;
  border-bottom: 1px solid rgba(0,0,0,.06);
  vertical-align: top;
}

.royal-hub-page .royal-hub-editor th {
  background: rgba(0,0,0,.04);
  font-weight: 900;
  color: rgba(0,0,0,.85);
}

.royal-hub-page .royal-hub-editor tr:last-child td {
  border-bottom: 0;
}

/* Code */
.royal-hub-page .royal-hub-editor code {
  background: rgba(0,0,0,.06);
  padding: .15rem .35rem;
  border-radius: 10px;
}

/* Buttons inside editor (Gutenberg button blocks) */
.royal-hub-page .royal-hub-editor .wp-block-button__link {
  border-radius: 999px;
  padding: .85rem 1.25rem;
  font-weight: 900;
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 12px 26px rgba(0,0,0,.08);
}

.royal-hub-page .royal-hub-editor .wp-block-buttons {
  gap: .6rem;
}

.royal-hub-page .royal-hub-editor .wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
}

/* Callout / Highlight block (if you use your .royal-highlight in editor) */
.royal-hub-page .royal-highlight {
  border-radius: 22px;
  padding: 1.1rem 1.15rem;
  background: linear-gradient(135deg, rgba(0,0,0,.045), rgba(0,0,0,.01));
  border: 1px solid rgba(0,0,0,.07);
}

/* -----------------------------
   Sub-areas Grid Cards - premium
------------------------------ */
.royal-hub-page .royal-area-card {
  border-radius: 22px;
  overflow: hidden;
  background: #fff;
  text-decoration: none;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 14px 34px rgba(0,0,0,.07);
  transition: transform .18s ease, box-shadow .18s ease;
}

.royal-hub-page .royal-area-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 46px rgba(0,0,0,.11);
}

.royal-hub-page .royal-area-card-media {
  position: relative;
  height: 190px;
  overflow: hidden;
}

.royal-hub-page .royal-area-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.03);
}

.royal-hub-page .royal-area-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,.12));
}

.royal-hub-page .royal-area-card-chip {
  position: absolute;
  right: 16px;
  bottom: 14px;
  color: #fff;
  padding: .35rem .7rem;
  border-radius: 999px;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.18);
  font-size: .9rem;
  font-weight: 800;
}

.royal-hub-page .royal-area-card-body {
  padding: 18px;
}

.royal-hub-page .royal-card-title {
  font-weight: 950;
  margin-bottom: .35rem;
  color: #111;
  line-height: 1.35;
}

.royal-hub-page .royal-card-desc {
  color: rgba(0,0,0,.63);
  line-height: 1.8;
  margin-bottom: .85rem;
  min-height: 54px;
}

.royal-hub-page .royal-area-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding-top: 10px;
  border-top: 1px solid rgba(0,0,0,.06);
}

.royal-hub-page .royal-link {
  font-weight: 900;
  color: rgba(0,0,0,.80) !important;
}

.royal-hub-page .royal-hub-cta {
  font-weight: 950;
  color: rgba(0,0,0,.75);
  background: rgba(0,0,0,.06);
  padding: .25rem .55rem;
  border-radius: 999px;
}

/* CTA Box */
.royal-hub-page .royal-hub-cta{
  display:flex; flex-wrap:wrap; gap: 14px;
  align-items:center; justify-content:space-between;
  padding: 22px;
  border-radius: 26px;
  background: linear-gradient(135deg, rgba(0,0,0,.04), rgba(0,0,0,.01));
  border: 1px solid rgba(0,0,0,.06);
}
.royal-hub-page .royal-hub-cta .royal-cta-label{
  display:inline-block;
  padding:.25rem .6rem;
  border-radius:999px;
  background: rgba(0,0,0,.06);
  font-weight: 950;
  margin-bottom: .35rem;
}
.royal-hub-page .royal-mini-cta .royal-hub-cta-actions{ display:flex; flex-wrap:wrap; gap:.6rem; }

/* Keep phone/WA numbers readable */
.royal-hub-page a[href^="tel:"],
.royal-hub-page a[href*="wa.me/"],
.royal-hub-page .royal-hub-cta,
.royal-hub-page .royal-hub-cta-actions{
  direction:rtl;
  text-align:right;
}
.royal-hub-page .royal-hub-cta a,
.royal-hub-page .royal-hub-cta-actions a{ direction: rtl; }

/* -----------------------------
   Better RTL numerals / phone links (keep numbers readable)
------------------------------ */
.royal-hub-page a[href^="tel:"],
.royal-hub-page a[href*="wa.me/"],
.royal-hub-page .royal-hero-cta,
.royal-hub-page .services-bottom-actions {
  direction: rtl;
  text-align: right;
}

.royal-hub-page .royal-hero-cta a,
.royal-hub-page .services-bottom-actions a {
  direction: rtl; /* keep button text RTL, but numbers remain fine */
}

/* -----------------------------
   Responsive
------------------------------ */
@media (max-width: 992px) {
  .royal-hub-page .royal-area-card-media { height: 175px; }
}

@media (max-width: 576px) {
  .royal-hub-page .royal-hub-editor p { font-size: 1rem; }
  .royal-hub-page .royal-hub-editor h2 { font-size: 1.35rem; }
  .royal-hub-page .royal-area-card-media { height: 165px; }
}