/**
 * RingCentral Developer Portal – Global Rebrand CSS
 * Aligns developers.ringcentral.com with the ringcentral.com brand system.
 *
 * How to use:
 *   Option A – Browser extension (e.g. Stylus): paste this into a new style
 *              scoped to developers.ringcentral.com/*
 *   Option B – Inject via <link> or <style> tag in the portal's layout template
 *   Option C – UserScript (Tampermonkey) that appends a <style> with these rules
 *
 * Token reference pulled from ringcentral.com (2025–2026 brand refresh):
 *   Primary orange  #FF6300
 *   Orange dark     #E55A00
 *   Orange light    #FF8533
 *   Blue (legacy)   #0684BD  ← dev portal default; replaced throughout
 *   Near-black      #0D0D0D
 *   Dark surface    #1A1A1A
 *   Mid-grey        #4A4A4A
 *   Light grey      #F5F5F5
 *   White           #FFFFFF
 *   Gradient        linear-gradient(135deg, #FF6300 0%, #FF8533 50%, #B34AC8 100%)
 *                   (the orange-to-lavender used in RC hero & gradient-icon bg)
 */

/* ─────────────────────────────────────────────────────────────
   1. CSS CUSTOM PROPERTIES (design tokens)
──────────────────────────────────────────────────────────────── */
:root {
    /* Brand colors */
    --rc-orange:          #FF6300;
    --rc-orange-dark:     #E55A00;
    --rc-orange-light:    #FF8533;
    --rc-lavender:        #B34AC8;
    --rc-gradient:        linear-gradient(135deg, #FF6300 0%, #FF8533 50%, #B34AC8 100%);
    --rc-gradient-hover:  linear-gradient(135deg, #E55A00 0%, #FF6300 50%, #9B3CB0 100%);

    /* Neutrals */
    --rc-black:           #0D0D0D;
    --rc-dark:            #1A1A1A;
    --rc-mid-grey:        #4A4A4A;
    --rc-border:          #E0E0E0;
    --rc-light-bg:        #F5F5F5;
    --rc-white:           #FFFFFF;

    /* Typography – matches RC marketing site */
    --rc-font-sans:       'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont,
    'Segoe UI', Helvetica, Arial, sans-serif;
    --rc-font-mono:       'JetBrains Mono', 'Fira Code', 'Cascadia Code',
    'Courier New', monospace;

    /* Radius */
    --rc-radius-sm:       4px;
    --rc-radius-md:       8px;
    --rc-radius-lg:       12px;
    --rc-radius-pill:     100px;

    /* Shadows */
    --rc-shadow-card:     0 2px 12px rgba(0, 0, 0, 0.08);
    --rc-shadow-nav:      0 1px 0 rgba(0, 0, 0, 0.08);
    --rc-shadow-cta:      0 4px 20px rgba(255, 99, 0, 0.30);

    /* Transitions */
    --rc-transition:      0.2s ease;
}

/* ─────────────────────────────────────────────────────────────
   2. FONT IMPORT
──────────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&family=JetBrains+Mono:wght@400;500&display=swap');

/* ─────────────────────────────────────────────────────────────
   3. BASE / RESET
──────────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-family: var(--rc-font-sans);
    color: var(--rc-black);
    background-color: var(--rc-white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--rc-font-sans);
    font-size: 16px;
    line-height: 1.6;
    color: var(--rc-black);
    background: var(--rc-white);
}

/* ─────────────────────────────────────────────────────────────
   4. TYPOGRAPHY SCALE
──────────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--rc-font-sans);
    font-weight: 700;
    line-height: 1.2;
    color: var(--rc-black);
    letter-spacing: -0.02em;
}

h1 { font-size: clamp(2rem, 4vw, 3.25rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); }
h3 { font-size: clamp(1.25rem, 2.5vw, 1.75rem); }
h4 { font-size: 1.25rem; font-weight: 600; }
h5 { font-size: 1.125rem; font-weight: 600; }
h6 { font-size: 1rem;     font-weight: 600; }

p {
    color: var(--rc-mid-grey);
    font-size: 1rem;
    line-height: 1.7;
}

/* Inline code & pre */
code, kbd, samp {
    font-family: var(--rc-font-mono);
    font-size: 0.875em;
    background: var(--rc-light-bg);
    border: 1px solid var(--rc-border);
    border-radius: var(--rc-radius-sm);
    padding: 0.1em 0.35em;
}

pre {
    font-family: var(--rc-font-mono);
    font-size: 0.875rem;
    background: #1A1A1A;
    color: #E8E8E8;
    border-radius: var(--rc-radius-md);
    padding: 1.25rem 1.5rem;
    overflow-x: auto;
    line-height: 1.6;
    border: 1px solid #333;
}

pre code {
    background: transparent;
    border: none;
    padding: 0;
    color: inherit;
    font-size: inherit;
}

/* ─────────────────────────────────────────────────────────────
   5. GLOBAL LINK STYLES
──────────────────────────────────────────────────────────────── */
a {
    color: var(--rc-orange);
    text-decoration: none;
    transition: color var(--rc-transition);
}

a:hover,
a:focus {
    color: var(--rc-orange-dark);
    text-decoration: underline;
}

/* ─────────────────────────────────────────────────────────────
   6. BUTTONS
──────────────────────────────────────────────────────────────── */

/* Primary CTA – matches RC orange pill button */
.btn,
.btn-primary,
button[class*="btn"],
a[class*="btn-primary"],
[class*="cta-button"],
[class*="button--primary"],
[class*="button-primary"],
.get-started-btn,
.sign-in-btn,
[class*="register"] > a,
[class*="login"] > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--rc-font-sans);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1;
    padding: 0.75rem 1.625rem;
    border-radius: var(--rc-radius-pill);
    background: var(--rc-orange);
    color: var(--rc-white) !important;
    border: 2px solid transparent;
    cursor: pointer;
    transition: background var(--rc-transition), box-shadow var(--rc-transition),
    transform var(--rc-transition);
    text-decoration: none !important;
    box-shadow: var(--rc-shadow-cta);
    white-space: nowrap;
}

.btn:hover,
.btn-primary:hover,
button[class*="btn"]:hover,
a[class*="btn-primary"]:hover,
[class*="cta-button"]:hover,
[class*="button--primary"]:hover {
    background: var(--rc-orange-dark);
    box-shadow: 0 6px 24px rgba(255, 99, 0, 0.40);
    transform: translateY(-1px);
    text-decoration: none !important;
}

/* Secondary / outline button */
.btn-secondary,
a[class*="btn-secondary"],
[class*="button--secondary"],
[class*="button-secondary"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--rc-font-sans);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1;
    padding: 0.75rem 1.625rem;
    border-radius: var(--rc-radius-pill);
    background: transparent;
    color: var(--rc-orange) !important;
    border: 2px solid var(--rc-orange);
    cursor: pointer;
    transition: all var(--rc-transition);
    text-decoration: none !important;
}

.btn-secondary:hover,
a[class*="btn-secondary"]:hover,
[class*="button--secondary"]:hover {
    background: var(--rc-orange);
    color: var(--rc-white) !important;
    text-decoration: none !important;
}

/* ─────────────────────────────────────────────────────────────
   7. NAVIGATION BAR
──────────────────────────────────────────────────────────────── */

/* Top utility bar (RINGCENTRAL.COM / APP GALLERY links) */
.nav-utility-bar,
[class*="utility-nav"],
[class*="top-bar"],
header > nav:first-child,
.header-top {
    background: var(--rc-black);
    color: #999;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.45rem 0;
    border-bottom: none;
}

.nav-utility-bar a,
[class*="utility-nav"] a,
[class*="top-bar"] a {
    color: #999;
    transition: color var(--rc-transition);
}

.nav-utility-bar a:hover,
[class*="utility-nav"] a:hover {
    color: var(--rc-white);
    text-decoration: none;
}

/* Main navigation */
header,
nav,
.navbar,
.site-header,
[class*="header--main"],
[class*="main-header"],
[class*="navbar"],
#header {
    background: var(--rc-white) !important;
    border-bottom: 1px solid var(--rc-border);
    box-shadow: var(--rc-shadow-nav);
    font-family: var(--rc-font-sans);
}

/* Nav links */
header nav a,
.navbar a,
.site-header a,
[class*="nav-link"],
[class*="navbar__link"],
.menu-item > a,
header ul li a {
    color: var(--rc-black) !important;
    font-size: 0.9375rem;
    font-weight: 500;
    padding: 0.5rem 0;
    text-decoration: none !important;
    transition: color var(--rc-transition);
}

header nav a:hover,
.navbar a:hover,
[class*="nav-link"]:hover,
header ul li a:hover {
    color: var(--rc-orange) !important;
}

/* Active nav item */
.nav-link--active,
[class*="nav-link--active"],
[class*="active"] > a,
header ul li.active > a {
    color: var(--rc-orange) !important;
    border-bottom: 2px solid var(--rc-orange);
}

/* Dropdown menus */
[class*="dropdown"],
[class*="submenu"],
header .mega-menu,
.nav-dropdown {
    background: var(--rc-white);
    border: 1px solid var(--rc-border);
    border-radius: var(--rc-radius-lg);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    font-size: 0.875rem;
}

[class*="dropdown"] a,
[class*="submenu"] a {
    color: var(--rc-black) !important;
    font-weight: 400;
    padding: 0.5rem 1rem;
    border-radius: var(--rc-radius-sm);
}

[class*="dropdown"] a:hover,
[class*="submenu"] a:hover {
    background: var(--rc-light-bg);
    color: var(--rc-orange) !important;
    text-decoration: none !important;
}

/* Dropdown section headings */
[class*="dropdown"] [class*="category"],
[class*="dropdown"] [class*="group-title"],
[class*="dropdown"] h4,
[class*="dropdown"] h5 {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--rc-mid-grey);
    margin-bottom: 0.25rem;
}

/* Logo area */
header .logo,
header [class*="logo"],
header [class*="brand"],
.navbar-brand,
header img[alt*="RingCentral"],
header img[alt*="logo"] {
    max-height: 36px;
    width: auto;
}

/* ─────────────────────────────────────────────────────────────
   8. HERO / BANNER SECTIONS
──────────────────────────────────────────────────────────────── */
.hero,
[class*="hero"],
[class*="banner--main"],
[class*="page-hero"],
.home-hero,
section:first-of-type[class*="landing"] {
    background: var(--rc-gradient);
    color: var(--rc-white);
    position: relative;
    overflow: hidden;
}

.hero h1,
[class*="hero"] h1,
[class*="hero"] h2,
[class*="banner--main"] h1 {
    color: var(--rc-white);
    font-weight: 800;
    letter-spacing: -0.03em;
}

.hero p,
[class*="hero"] p,
[class*="banner--main"] p {
    color: rgba(255, 255, 255, 0.88);
    font-size: 1.125rem;
}

/* Hero button on gradient backgrounds – white fill */
.hero .btn,
.hero a[class*="btn"],
[class*="hero"] .btn,
[class*="hero"] a[class*="btn"],
[class*="banner--main"] .btn {
    background: var(--rc-white);
    color: var(--rc-orange) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.20);
}

.hero .btn:hover,
[class*="hero"] .btn:hover {
    background: var(--rc-light-bg);
    color: var(--rc-orange-dark) !important;
}

/* ─────────────────────────────────────────────────────────────
   9. CARDS & CONTENT BLOCKS
──────────────────────────────────────────────────────────────── */
.card,
[class*="card"],
[class*="tile"],
[class*="feature-block"],
[class*="api-card"],
[class*="product-card"] {
    background: var(--rc-white);
    border: 1px solid var(--rc-border);
    border-radius: var(--rc-radius-lg);
    box-shadow: var(--rc-shadow-card);
    transition: box-shadow var(--rc-transition), transform var(--rc-transition);
    overflow: hidden;
}

.card:hover,
[class*="card"]:hover,
[class*="tile"]:hover,
[class*="api-card"]:hover {
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

.card h3,
.card h4,
[class*="card"] h3,
[class*="card"] h4 {
    color: var(--rc-black);
    font-weight: 700;
}

/* Card accent bar – orange top border on hover */
[class*="api-card"]:hover,
[class*="product-card"]:hover {
    border-top: 3px solid var(--rc-orange);
}

/* ─────────────────────────────────────────────────────────────
   10. TAGS / BADGES / PILLS
──────────────────────────────────────────────────────────────── */
.badge,
.tag,
[class*="badge"],
[class*="tag"],
[class*="label"],
[class*="chip"],
[class*="method-badge"],
[class*="api-method"] {
    font-family: var(--rc-font-sans);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.2em 0.65em;
    border-radius: var(--rc-radius-pill);
    display: inline-flex;
    align-items: center;
}

/* New/Beta badges */
[class*="new"],
[class*="beta"],
[class*="badge--new"] {
    background: rgba(255, 99, 0, 0.1);
    color: var(--rc-orange);
    border: 1px solid rgba(255, 99, 0, 0.25);
}

/* HTTP method badges */
[class*="method--get"],
[data-method="GET"],
.method-get { background: #D4EDDA; color: #155724; border: 1px solid #C3E6CB; }

[class*="method--post"],
[data-method="POST"],
.method-post { background: #CCE5FF; color: #004085; border: 1px solid #B8DAFF; }

[class*="method--put"],
[data-method="PUT"],
.method-put { background: #FFF3CD; color: #856404; border: 1px solid #FFEEBA; }

[class*="method--delete"],
[data-method="DELETE"],
.method-delete { background: #F8D7DA; color: #721C24; border: 1px solid #F5C6CB; }

/* ─────────────────────────────────────────────────────────────
   11. FORM ELEMENTS & INPUTS
──────────────────────────────────────────────────────────────── */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="tel"],
textarea,
select {
    font-family: var(--rc-font-sans);
    font-size: 0.9375rem;
    color: var(--rc-black);
    background: var(--rc-white);
    border: 1.5px solid var(--rc-border);
    border-radius: var(--rc-radius-md);
    padding: 0.625rem 0.875rem;
    transition: border-color var(--rc-transition), box-shadow var(--rc-transition);
    outline: none;
    width: 100%;
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--rc-orange);
    box-shadow: 0 0 0 3px rgba(255, 99, 0, 0.15);
}

input::placeholder,
textarea::placeholder {
    color: #A0A0A0;
}

/* Search bar */
[class*="search"] input,
[class*="search-bar"] input,
[class*="searchbox"] input {
    border-radius: var(--rc-radius-pill);
    padding-left: 2.5rem;
}

/* ─────────────────────────────────────────────────────────────
   12. SIDEBAR / LEFT NAV (docs pages)
──────────────────────────────────────────────────────────────── */
aside,
.sidebar,
[class*="sidebar"],
[class*="side-nav"],
[class*="docs-nav"],
[class*="toc"] {
    background: var(--rc-light-bg);
    border-right: 1px solid var(--rc-border);
    font-size: 0.875rem;
}

.sidebar a,
[class*="sidebar"] a,
[class*="side-nav"] a,
[class*="docs-nav"] a {
    color: var(--rc-mid-grey);
    font-weight: 400;
    transition: color var(--rc-transition), background var(--rc-transition);
    border-radius: var(--rc-radius-sm);
    padding: 0.3rem 0.75rem;
    display: block;
}

.sidebar a:hover,
[class*="sidebar"] a:hover,
[class*="docs-nav"] a:hover {
    color: var(--rc-orange);
    background: rgba(255, 99, 0, 0.06);
    text-decoration: none;
}

/* Active sidebar item */
.sidebar a.active,
[class*="sidebar"] a[class*="active"],
[class*="docs-nav"] a[aria-current="page"],
[class*="side-nav"] .active > a {
    color: var(--rc-orange) !important;
    font-weight: 600;
    background: rgba(255, 99, 0, 0.08);
    border-left: 3px solid var(--rc-orange);
}

/* Sidebar section headings */
.sidebar h5,
.sidebar h6,
[class*="sidebar"] [class*="group-label"],
[class*="docs-nav"] [class*="section-title"] {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--rc-mid-grey);
    margin: 1.25rem 0 0.35rem;
    padding: 0 0.75rem;
}

/* ─────────────────────────────────────────────────────────────
   13. TABS
──────────────────────────────────────────────────────────────── */
[class*="tabs"],
[role="tablist"] {
    border-bottom: 2px solid var(--rc-border);
}

[class*="tab"],
[role="tab"] {
    font-family: var(--rc-font-sans);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--rc-mid-grey);
    padding: 0.625rem 1rem;
    cursor: pointer;
    border: none;
    background: transparent;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color var(--rc-transition), border-color var(--rc-transition);
}

[class*="tab"]:hover,
[role="tab"]:hover {
    color: var(--rc-black);
}

[class*="tab--active"],
[class*="tab"].active,
[role="tab"][aria-selected="true"] {
    color: var(--rc-orange);
    font-weight: 600;
    border-bottom-color: var(--rc-orange);
}

/* ─────────────────────────────────────────────────────────────
   14. ALERTS / CALLOUTS
──────────────────────────────────────────────────────────────── */
.alert,
[class*="alert"],
[class*="callout"],
[class*="notice"],
[class*="admonition"] {
    border-radius: var(--rc-radius-md);
    padding: 1rem 1.25rem;
    font-size: 0.9375rem;
    border-left: 4px solid;
}

[class*="alert--info"],
[class*="callout--info"],
.admonition-note {
    background: rgba(255, 99, 0, 0.06);
    border-color: var(--rc-orange);
    color: var(--rc-black);
}

[class*="alert--warning"],
[class*="callout--warning"],
.admonition-warning {
    background: #FFF8E6;
    border-color: #F0A500;
    color: #5C3D00;
}

[class*="alert--success"],
[class*="callout--success"],
.admonition-tip {
    background: #EBF7EE;
    border-color: #2E7D4F;
    color: #1C4D31;
}

[class*="alert--error"],
[class*="callout--error"],
.admonition-danger {
    background: #FFF0F0;
    border-color: #D32F2F;
    color: #7B1A1A;
}

/* ─────────────────────────────────────────────────────────────
   15. TABLES
──────────────────────────────────────────────────────────────── */
table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
    border-radius: var(--rc-radius-md);
    overflow: hidden;
}

thead {
    background: var(--rc-black);
    color: var(--rc-white);
}

thead th {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.875rem 1rem;
    text-align: left;
    color: var(--rc-white);
}

tbody tr {
    border-bottom: 1px solid var(--rc-border);
    transition: background var(--rc-transition);
}

tbody tr:hover {
    background: rgba(255, 99, 0, 0.04);
}

tbody td {
    padding: 0.875rem 1rem;
    color: var(--rc-mid-grey);
    vertical-align: top;
}

tbody tr:last-child {
    border-bottom: none;
}

/* ─────────────────────────────────────────────────────────────
   16. FOOTER
──────────────────────────────────────────────────────────────── */
footer,
.site-footer,
[class*="footer"],
#footer {
    background: var(--rc-black);
    color: #999;
    font-size: 0.875rem;
    border-top: 1px solid #222;
}

footer a,
.site-footer a,
[class*="footer"] a {
    color: #CCC;
    transition: color var(--rc-transition);
}

footer a:hover,
.site-footer a:hover,
[class*="footer"] a:hover {
    color: var(--rc-orange);
    text-decoration: none;
}

footer h5,
footer h6,
[class*="footer"] h5,
[class*="footer"] h6,
[class*="footer"] [class*="heading"] {
    color: var(--rc-white);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.75rem;
}

[class*="footer-bottom"],
footer hr,
.footer-legal {
    border-color: #222;
    color: #666;
    font-size: 0.8125rem;
}

/* ─────────────────────────────────────────────────────────────
   17. SECTIONS & PAGE LAYOUT
──────────────────────────────────────────────────────────────── */

/* Alternating section backgrounds – keeps content scannable like RC.com */
section:nth-of-type(even) {
    background: var(--rc-light-bg);
}

section:nth-of-type(odd) {
    background: var(--rc-white);
}

/* Eyebrow labels above headings */
[class*="eyebrow"],
[class*="overline"],
[class*="category-label"],
[class*="section-label"] {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--rc-orange);
    display: block;
    margin-bottom: 0.5rem;
}

/* Dividers */
hr {
    border: none;
    border-top: 1px solid var(--rc-border);
}

/* ─────────────────────────────────────────────────────────────
   18. DEVELOPER-SPECIFIC: API REFERENCE & DOCS
──────────────────────────────────────────────────────────────── */

/* API endpoint lines */
[class*="endpoint"],
[class*="api-path"],
[class*="route"] {
    font-family: var(--rc-font-mono);
    font-size: 0.875rem;
    background: var(--rc-light-bg);
    border: 1px solid var(--rc-border);
    border-radius: var(--rc-radius-md);
    padding: 0.625rem 1rem;
    color: var(--rc-black);
}

/* Response / request body blocks */
[class*="response-body"],
[class*="request-body"],
[class*="code-sample"],
[class*="json-viewer"] {
    background: #1A1A1A;
    border-radius: var(--rc-radius-md);
    border: 1px solid #333;
}

/* Try-it / interactive panels */
[class*="try-it"],
[class*="sandbox"],
[class*="playground"] {
    background: var(--rc-white);
    border: 2px solid var(--rc-orange);
    border-radius: var(--rc-radius-lg);
    box-shadow: 0 0 0 4px rgba(255, 99, 0, 0.08);
}

[class*="try-it"] h3,
[class*="sandbox"] h3,
[class*="playground"] h3 {
    color: var(--rc-orange);
}

/* Parameter rows */
[class*="param-row"],
[class*="parameter"] {
    border-bottom: 1px solid var(--rc-border);
    padding: 0.75rem 0;
}

[class*="param-name"],
[class*="parameter-name"] {
    font-family: var(--rc-font-mono);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--rc-black);
}

[class*="param-type"],
[class*="parameter-type"] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--rc-orange);
    font-family: var(--rc-font-mono);
}

[class*="required"] {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #D32F2F;
    letter-spacing: 0.04em;
}

/* ─────────────────────────────────────────────────────────────
   19. LOADING / SKELETON STATES
──────────────────────────────────────────────────────────────── */
[class*="skeleton"],
[class*="loading-placeholder"],
[class*="shimmer"] {
    background: linear-gradient(90deg, var(--rc-light-bg) 25%, #EBEBEB 50%, var(--rc-light-bg) 75%);
    background-size: 200% 100%;
    animation: rc-shimmer 1.4s ease infinite;
    border-radius: var(--rc-radius-md);
}

@keyframes rc-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ─────────────────────────────────────────────────────────────
   20. FOCUS / ACCESSIBILITY
──────────────────────────────────────────────────────────────── */
:focus-visible {
    outline: 2px solid var(--rc-orange);
    outline-offset: 2px;
    border-radius: var(--rc-radius-sm);
}

:focus:not(:focus-visible) {
    outline: none;
}

/* Skip link */
.skip-to-content,
[class*="skip-link"],
[class*="skip-nav"] {
    position: absolute;
    top: -100vh;
    left: 1rem;
    background: var(--rc-orange);
    color: var(--rc-white);
    font-weight: 700;
    padding: 0.625rem 1.25rem;
    border-radius: var(--rc-radius-md);
    z-index: 9999;
    transition: top var(--rc-transition);
}

.skip-to-content:focus,
[class*="skip-link"]:focus {
    top: 1rem;
}

/* ─────────────────────────────────────────────────────────────
   21. SCROLLBAR (Chrome/Edge/Safari)
──────────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--rc-light-bg); }
::-webkit-scrollbar-thumb {
    background: #CACACA;
    border-radius: var(--rc-radius-pill);
}
::-webkit-scrollbar-thumb:hover { background: #AAAAAA; }

/* ─────────────────────────────────────────────────────────────
   22. RESPONSIVE OVERRIDES
──────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    h1 { font-size: 2rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.25rem; }

    .btn,
    .btn-primary,
    .btn-secondary {
        width: 100%;
        justify-content: center;
    }

    header,
    .navbar {
        padding: 0.75rem 1rem;
    }
}

/* ─────────────────────────────────────────────────────────────
   23. REDUCED MOTION
──────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ─────────────────────────────────────────────────────────────
   24. DARK MODE (honours OS preference)
──────────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
    :root {
        --rc-black:    #FFFFFF;
        --rc-dark:     #F5F5F5;
        --rc-mid-grey: #B0B0B0;
        --rc-border:   #2A2A2A;
        --rc-light-bg: #111111;
        --rc-white:    #0D0D0D;
    }

    html, body {
        background: #0D0D0D;
        color: #F5F5F5;
    }

    header, .navbar, .site-header {
        background: #111111 !important;
        border-bottom-color: #2A2A2A;
    }

    header nav a,
    .navbar a,
    header ul li a {
        color: #F5F5F5 !important;
    }

    [class*="dropdown"],
    [class*="submenu"] {
        background: #1A1A1A;
        border-color: #2A2A2A;
    }

    .card, [class*="card"] {
        background: #1A1A1A;
        border-color: #2A2A2A;
    }

    aside, .sidebar, [class*="sidebar"] {
        background: #111111;
        border-right-color: #2A2A2A;
    }

    pre {
        background: #0A0A0A;
        border-color: #2A2A2A;
    }

    code, kbd {
        background: #1A1A1A;
        border-color: #2A2A2A;
        color: #E8E8E8;
    }

    input, textarea, select {
        background: #1A1A1A;
        border-color: #333;
        color: #F5F5F5;
    }

    tbody tr:hover {
        background: rgba(255, 99, 0, 0.08);
    }

    section:nth-of-type(even) { background: #111111; }
    section:nth-of-type(odd)  { background: #0D0D0D; }
}