/* =====================================================================
   Riverside Holdings — global.css
   Design tokens + component library. Applied via Elementor CSS Classes.
   ===================================================================== */

:root {
  /* Brand colours (mirror Elementor Global Colors) */
  --rs-primary: #11669F;   /* logo blue */
  --rs-primary-600: #0E5688;
  --rs-primary-700: #0B4A76;
  --rs-secondary: #8F9091; /* logo gray */
  --rs-navy: #0E2D47;
  --rs-ink: #1B2530;
  --rs-muted: #66727D;
  --rs-bg: #F3F7FA;
  --rs-border: #DCE4EA;
  --rs-white: #FFFFFF;

  /* Typography */
  --rs-font-head: "Playfair Display", Georgia, "Times New Roman", serif;
  --rs-font-body: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Fluid type scale */
  --rs-h1: clamp(2.2rem, 1.4rem + 3.2vw, 4rem);
  --rs-h2: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem);
  --rs-h3: clamp(1.35rem, 1.05rem + 1.2vw, 1.9rem);
  --rs-h4: clamp(1.15rem, 1rem + 0.6vw, 1.4rem);
  --rs-body: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --rs-small: 0.875rem;

  /* Spacing scale */
  --rs-sp-1: 4px;  --rs-sp-2: 8px;  --rs-sp-3: 12px; --rs-sp-4: 16px;
  --rs-sp-5: 24px; --rs-sp-6: 32px; --rs-sp-7: 48px; --rs-sp-8: 64px;
  --rs-sp-9: 96px; --rs-sp-10: 128px;

  /* Radius / shadow / motion */
  --rs-radius: 10px;
  --rs-radius-sm: 6px;
  --rs-radius-lg: 18px;
  --rs-shadow-sm: 0 2px 8px rgba(14, 45, 71, 0.06);
  --rs-shadow: 0 10px 30px rgba(14, 45, 71, 0.10);
  --rs-shadow-lg: 0 22px 60px rgba(14, 45, 71, 0.16);
  --rs-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --rs-t: 350ms;
  --rs-container: 1240px;
}

/* ---------- Base ---------- */
.rs-site { font-family: var(--rs-font-body); color: var(--rs-ink); }
.rs-site h1, .rs-site h2, .rs-site h3, .rs-site h4, .rs-site h5 { font-family: var(--rs-font-head); color: var(--rs-navy); line-height: 1.15; font-weight: 600; }
.rs-heading { font-size: var(--rs-h2); margin: 0 0 var(--rs-sp-4); }
.rs-eyebrow { font-family: var(--rs-font-body); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.8rem; font-weight: 700; color: var(--rs-primary); display: inline-block; margin-bottom: var(--rs-sp-3); }
.rs-lead { font-size: var(--rs-body); line-height: 1.7; color: var(--rs-muted); }
.rs-container { max-width: var(--rs-container); margin-inline: auto; padding-inline: var(--rs-sp-5); }

/* ---------- Buttons ---------- */
.rs-btn,
.rs-btn:visited {
  --_bg: var(--rs-primary);
  display: inline-flex; align-items: center; gap: var(--rs-sp-2);
  font-family: var(--rs-font-body); font-weight: 600; font-size: 0.95rem;
  line-height: 1; text-decoration: none; cursor: pointer;
  padding: 14px 26px; min-height: 44px; border-radius: var(--rs-radius-sm);
  background: var(--_bg); color: var(--rs-white); border: 1.5px solid var(--_bg);
  transition: background var(--rs-t) var(--rs-ease), transform var(--rs-t) var(--rs-ease), box-shadow var(--rs-t) var(--rs-ease);
}
.rs-btn:hover { background: var(--rs-primary-600); border-color: var(--rs-primary-600); box-shadow: var(--rs-shadow); }
.rs-btn .rs-btn__arrow { transition: transform var(--rs-t) var(--rs-ease); }
.rs-btn:hover .rs-btn__arrow { transform: translateX(4px); }

.rs-btn--outline,
.rs-btn--outline:visited { background: transparent; color: var(--rs-primary); border-color: var(--rs-border); }
.rs-btn--outline:hover { background: var(--rs-primary); color: var(--rs-white); border-color: var(--rs-primary); }

.rs-btn--ghost { background: transparent; color: var(--rs-navy); border-color: transparent; }

.rs-link { color: var(--rs-primary); font-weight: 600; text-decoration: none; border-bottom: 1px solid transparent; transition: border-color var(--rs-t) var(--rs-ease); }
.rs-link:hover { border-color: currentColor; }

.rs-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--rs-white); border: 1px solid var(--rs-border); color: var(--rs-navy); transition: all var(--rs-t) var(--rs-ease); }
.rs-iconbtn:hover { background: var(--rs-primary); color: var(--rs-white); border-color: var(--rs-primary); }

/* ---------- Pills / taxonomy labels ---------- */
.rs-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.02em; background: var(--rs-bg); color: var(--rs-primary); border: 1px solid var(--rs-border); }
.rs-pill--status { background: rgba(17,102,159,0.10); }
.rs-pill.is-active { background: var(--rs-primary); color: var(--rs-white); border-color: var(--rs-primary); }

/* ---------- Cards ---------- */
.rs-card { background: var(--rs-white); border: 1px solid var(--rs-border); border-radius: var(--rs-radius); box-shadow: var(--rs-shadow-sm); overflow: hidden; transition: transform var(--rs-t) var(--rs-ease), box-shadow var(--rs-t) var(--rs-ease); }
.rs-card:hover { transform: translateY(-6px); box-shadow: var(--rs-shadow-lg); }

.rs-card--project .rs-card__media { aspect-ratio: 16 / 10; overflow: hidden; }
.rs-card--project .rs-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--rs-t) var(--rs-ease); }
.rs-card--project:hover .rs-card__media img { transform: scale(1.04); }
.rs-card__body { padding: var(--rs-sp-5); }
.rs-card__title { font-size: var(--rs-h4); margin: var(--rs-sp-2) 0; }
.rs-card__meta { display: flex; align-items: center; gap: var(--rs-sp-3); color: var(--rs-muted); font-size: var(--rs-small); }

.rs-card--stat { text-align: center; padding: var(--rs-sp-6) var(--rs-sp-5); }
.rs-card--stat .rs-stat__num { font-family: var(--rs-font-head); font-size: clamp(2rem, 1.4rem + 2vw, 3.25rem); color: var(--rs-primary); font-weight: 700; line-height: 1; }
.rs-card--stat .rs-stat__label { color: var(--rs-muted); margin-top: var(--rs-sp-2); font-size: 0.95rem; }

.rs-card--value, .rs-card--service { padding: var(--rs-sp-6); }
.rs-card--value .rs-card__icon, .rs-card--service .rs-card__icon { width: 52px; height: 52px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--rs-radius-sm); background: var(--rs-bg); color: var(--rs-primary); margin-bottom: var(--rs-sp-4); }

.rs-card--blog .rs-card__media { aspect-ratio: 16 / 9; }
.rs-card--blog .rs-card__media img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Forms ---------- */
.rs-field label, .rs-form label { font-weight: 600; font-size: 0.9rem; color: var(--rs-ink); display: block; margin-bottom: 6px; }
.rs-field input, .rs-field select, .rs-field textarea,
.rs-form input:not([type=submit]), .rs-form select, .rs-form textarea {
  width: 100%; padding: 12px 14px; min-height: 44px; font-family: var(--rs-font-body); font-size: 0.95rem;
  color: var(--rs-ink); background: var(--rs-white); border: 1px solid var(--rs-border); border-radius: var(--rs-radius-sm);
  transition: border-color var(--rs-t) var(--rs-ease), box-shadow var(--rs-t) var(--rs-ease);
}
.rs-field input:focus, .rs-form input:focus, .rs-form select:focus, .rs-form textarea:focus { outline: none; border-color: var(--rs-primary); box-shadow: 0 0 0 3px rgba(17,102,159,0.15); }
.rs-required { color: #c0392b; }
.rs-alert { padding: 12px 16px; border-radius: var(--rs-radius-sm); font-size: 0.9rem; }
.rs-alert--success { background: #e8f5ee; color: #1e7d46; border: 1px solid #bfe3cd; }
.rs-alert--error { background: #fdecea; color: #b23b31; border: 1px solid #f5c6c0; }

/* ---------- Breadcrumbs ---------- */
.rs-breadcrumbs { font-size: 0.85rem; color: var(--rs-muted); display: flex; gap: 8px; flex-wrap: wrap; }
.rs-breadcrumbs a { color: var(--rs-muted); text-decoration: none; }
.rs-breadcrumbs a:hover { color: var(--rs-primary); }
.rs-breadcrumbs [aria-current="page"] { color: var(--rs-navy); font-weight: 600; }

/* ---------- Accordions / Tabs ---------- */
.rs-accordion__item { border-bottom: 1px solid var(--rs-border); }
.rs-accordion__trigger { width: 100%; text-align: left; background: none; border: 0; padding: var(--rs-sp-4) 0; font-family: var(--rs-font-head); font-size: var(--rs-h4); color: var(--rs-navy); display: flex; justify-content: space-between; align-items: center; gap: var(--rs-sp-4); cursor: pointer; }
.rs-accordion__icon { transition: transform var(--rs-t) var(--rs-ease); flex: 0 0 auto; }
.rs-accordion__item.is-open .rs-accordion__icon { transform: rotate(180deg); }
.rs-tabs__list { display: flex; gap: var(--rs-sp-2); flex-wrap: wrap; border-bottom: 1px solid var(--rs-border); }
.rs-tabs__tab { padding: 12px 18px; border: 0; background: none; font-weight: 600; color: var(--rs-muted); cursor: pointer; border-bottom: 2px solid transparent; }
.rs-tabs__tab[aria-selected="true"] { color: var(--rs-primary); border-color: var(--rs-primary); }

/* ---------- Pagination ---------- */
.rs-pagination { display: flex; gap: 6px; justify-content: center; }
.rs-pagination a, .rs-pagination span { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--rs-radius-sm); border: 1px solid var(--rs-border); color: var(--rs-navy); text-decoration: none; }
.rs-pagination .current { background: var(--rs-primary); color: var(--rs-white); border-color: var(--rs-primary); }

/* ---------- Empty state ---------- */
.rs-empty { text-align: center; padding: var(--rs-sp-9) var(--rs-sp-5); color: var(--rs-muted); }

/* ---------- Accessibility helpers ---------- */
.rs-skip-link { position: absolute; left: -9999px; top: 0; background: var(--rs-primary); color: #fff; padding: 12px 18px; z-index: 100000; border-radius: 0 0 var(--rs-radius-sm) 0; }
.rs-skip-link:focus { left: 0; }
:where(a, button, input, select, textarea):focus-visible { outline: 3px solid rgba(17,102,159,0.5); outline-offset: 2px; }
.rs-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Header ---------- */
.rs-header { position: sticky; top: 0; z-index: 999; transition: background var(--rs-t) var(--rs-ease), box-shadow var(--rs-t) var(--rs-ease); }
.rs-header.is-scrolled { background: var(--rs-white); box-shadow: var(--rs-shadow-sm); }
/* Elementor Theme Builder header location wrapper (top-level container class is not emitted, so target the wrapper) */
.elementor-location-header { transition: box-shadow var(--rs-t) var(--rs-ease); }
.elementor-location-header.is-scrolled { box-shadow: var(--rs-shadow); }
.rs-nav__link { position: relative; color: var(--rs-navy); text-decoration: none; font-weight: 600; padding: 8px 2px; }
.rs-nav__link::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--rs-primary); transition: width var(--rs-t) var(--rs-ease); }
.rs-nav__link:hover::after, .rs-nav__link.is-active::after { width: 100%; }

/* Floating WhatsApp */
.rs-whatsapp { position: fixed; right: 20px; bottom: 20px; z-index: 9999; display: inline-flex; align-items: center; gap: 8px; background: #25D366; color: #fff; padding: 12px 16px; border-radius: 999px; box-shadow: var(--rs-shadow); text-decoration: none; font-weight: 600; }
.rs-whatsapp:focus-visible { outline: 3px solid #fff; }