/*
Theme Name: Hello Elementor Child
Theme URI: https://elementor.com/hello-theme/?utm_source=wp-themes&utm_campaign=theme-uri&utm_medium=wp-dash
Template: hello-elementor
Author: Elementor Team
Author URI: https://elementor.com/?utm_source=wp-themes&utm_campaign=author-uri&utm_medium=wp-dash
Description: Hello Elementor is a lightweight and minimalist WordPress theme that was built specifically to work seamlessly with the Elementor site builder plugin. The theme is free, open-source, and designed for users who want a flexible, easy-to-use, and customizable website. The theme, which is optimized for performance, provides a solid foundation for users to build their own unique designs using the Elementor drag-and-drop site builder. Its simplicity and flexibility make it a great choice for both beginners and experienced Web Creators.
Tags: accessibility-ready,flexible-header,custom-colors,custom-menu,custom-logo,featured-images,rtl-language-support,threaded-comments,translation-ready
Version: 3.4.6.1776012944
Updated: 2026-04-12 09:55:44

*/

/* =========================================================
   ROYAL ROADS (RRU) – ELEMENTOR CSS SYSTEM
   Usage:
   - Add class names (no dots) in Elementor → Advanced → CSS Classes
   - Do NOT add CSS in Elementor
   ========================================================= */
/* =========================================================
   FORCE ELEMENTOR HEADING BASELINE
   ========================================================= */

.elementor .elementor-heading-title {
  font-family: 'Auto1', system-ui, serif !important;
  color: var(--rru-navy);
  font-weight: 600;
  line-height: 1.25;
}

/* =========================================================
   HEADING SIZE SYSTEM (ELEMENTOR-SAFE)
   ========================================================= */

/* Page title */
.rru-page-title.elementor-heading-title {
  font-size: clamp(2.5rem, 4.5vw, 3.25rem);
}

/* Section headings */
.rru-section-title.elementor-heading-title {
  font-size: 1.75rem;
}

/* Hero headings */
.rru-hero-title.elementor-heading-title {
  font-size: clamp(3rem, 5vw, 4rem);
  line-height: 1.1;
}

/* =========================================================
   1. DESIGN TOKENS (RRU-ALIGNED)
   ========================================================= */

:root {
  /* Primary colours */
  --rru-navy: #002d56;
  --rru-navy-dark: #001a33;
  --rru-gold: #c69214;
  --rru-copper: #b75a2a;

  /* Neutrals */
  --rru-grey-900: #1f2933;
  --rru-grey-700: #4b5563;
  --rru-grey-500: #6b7280;
  --rru-grey-100: #f3f4f6;

  /* Backgrounds */
  --rru-bg-white: #ffffff;
  --rru-bg-alt: #f6f7f8;

  /* Spacing */
  --rru-space-xs: 0.5rem;
  --rru-space-sm: 1rem;
  --rru-space-md: 2rem;
  --rru-space-lg: 4rem;

  /* Radius */
  --rru-radius-sm: 4px;
  --rru-radius-md: 6px;
}


/* =========================================================
   2. ELEMENTOR GLOBAL BASELINE
   ========================================================= */

.elementor {
  font-family: 'Auto1', system-ui, sans-serif;
  color: var(--rru-grey-900);
}

.elementor-heading-title {
  color: var(--rru-navy);
  font-weight: 600;
}

.elementor-text-editor p {
  color: var(--rru-grey-900);
  line-height: 1.65;
}


/* =========================================================
   3. SECTION & LAYOUT CLASSES
   ========================================================= */

.rru-section {
  padding-block: var(--rru-space-lg);
}

.rru-section-tight {
  padding-block: var(--rru-space-md);
}

.rru-section-wide {
  max-width: 1200px;
  margin-inline: auto;
}

.rru-section-alt {
  background-color: var(--rru-bg-alt);
}

.rru-section-divider {
  border-top: 1px solid var(--rru-grey-100);
}


/* =========================================================
   4. TYPOGRAPHY ROLES
   ========================================================= */

.rru-page-title {
  font-size: clamp(2.5rem, 4.5vw, 3.25rem);
  line-height: 1.2;
  margin-bottom: var(--rru-space-sm);
  font-weight:900
}

.rru-section-title {
  font-size: 1.75rem;
  margin-bottom: var(--rru-space-sm);
  font-weight:900
}

.rru-subtitle {
  font-size: 1.125rem;
  color: var(--rru-grey-700);
  font-weight:700
}

.rru-lead {
  font-size: 1.125rem;
  color: var(--rru-grey-700);
  max-width: 65ch;
  font-weight: 400
}

.rru-small-print {
  font-size: 0.875rem;
  color: var(--rru-grey-500);
  font-weight:300
}


/* =========================================================
   5. TEXT HELPERS
   ========================================================= */

.rru-text-navy {
  color: var(--rru-navy);
}

.rru-text-gold {
  color: var(--rru-gold);
}

.rru-text-muted {
  color: var(--rru-grey-500);
}

.rru-text-center {
  text-align: center;
}

.rru-text-accent {
  color: var(--rru-copper);
}


/* =========================================================
   6. BUTTONS & LINKS
   ========================================================= */

.rru-btn {
  display: inline-block;
  font-weight: 600;
  padding: 0.65em 1.25em;
  border-radius: var(--rru-radius-md);
  text-decoration: none;
}

.rru-btn-primary {
  background-color: var(--rru-navy);
  color: #ffffff;
}

.rru-btn-primary:hover {
  background-color: var(--rru-navy-dark);
}

.rru-btn-secondary {
  background-color: var(--rru-grey-100);
  color: var(--rru-navy);
}

.rru-btn-outline {
  border: 2px solid var(--rru-navy);
  color: var(--rru-navy);
  background: transparent;
}

.rru-link-inline {
  color: var(--rru-navy);
  text-decoration: underline;
}


/* =========================================================
   7. CARDS & CALLOUTS
   ========================================================= */

.rru-card {
  background-color: var(--rru-bg-white);
  padding: var(--rru-space-md);
  border-radius: var(--rru-radius-sm);
  border: 1px solid var(--rru-grey-100);
}

.rru-card-highlight {
  border-left: 4px solid var(--rru-gold);
}

.rru-callout {
  background-color: var(--rru-bg-alt);
  padding: var(--rru-space-md);
  border-left: 4px solid var(--rru-navy);
}

.rru-callout-info {
  border-left-color: var(--rru-gold);
}

.rru-callout-warning {
  border-left-color: var(--rru-copper);
}


/* =========================================================
   8. HERO & PAGE CONTEXT
   ========================================================= */

.rru-hero {
  padding-block: calc(var(--rru-space-lg) * 1.25);
}

.rru-hero-title {
  font-size: clamp(3rem, 5vw, 6rem);
  line-height: 1.1;
  text-transform: uppercase;
}
.rru-hero-title-small{
 font-size: clamp(1rem, 5vw, 2rem);
  line-height: 1.1;
  text-transform: uppercase;
}

.rru-landing .rru-section-title {
  font-size: 2rem;
  text-transform: uppercase;
}

.rru-department-home .rru-page-title {
  max-width: 20ch;
  text-transform: uppercase;
}



/* =========================================================
   9. MENU (OPTIONAL)
   ========================================================= */

.rru-menu a {
  font-family: 'Auto1', system-ui, sans-serif;
  color: var(--rru-navy);
  text-decoration: none;
}

.rru-menu a:hover {
  color: var(--rru-gold);
}

.rru-menu .current-menu-item > a {
  font-weight: 600;
}


/* =========================================================
   OVERRIDE ELEMENTOR GLOBAL FONTS (FINAL)
   ========================================================= */

/* Headings */
.elementor .elementor-heading-title {
  font-family: 'Auto1', system-ui, sans-serif;
  font-weight: 900;
}

/* Body text */
.elementor .elementor-text-editor,
.elementor .elementor-text-editor p,
.elementor .elementor-text-editor li {
  font-family: 'Auto1', system-ui, sans-serif;
  font-weight: 400;
}

/* Strong / emphasis */
.elementor .elementor-text-editor strong,
.elementor .elementor-heading-title span {
  font-family: 'Auto1', system-ui, sans-serif;
}