:root {
    /* Color palette */
    --color-primary: #005C2A;   /* Moss green */
    --color-primary-alt: #4d6b53; /* lighter shade of primary */
    --color-secondary: #7F5C88; /* Heather purple */
    --color-secondary-alt: #A484AC; /* lighter shade of secondary */
    --color-tertiary: #004b84;  /* Sea blue (currently same as tertiary) */
    --color-tertiary-alt: #405866; /* lighter shade of tertiary */
    --color-bg: #F8F7F2;        /* Light background */
    --color-text: #333;         /* Default text */
    --color-shadow: #c5c5c5; /* Shadow color */
}

body {
    background-color: var(--color-bg);
    font-family: 'Ubuntu', sans-serif;
    color: var(--color-text);
}

/* Text colour */
.text-primary {
    color: var(--color-primary) !important;
}
.text-secondary {
    color: var(--color-secondary) !important;
}

/* Hyperlink hover color for text-primary and text-secondary */
.text-primary a:hover,
a.text-primary:hover {
    color: var(--color-primary-alt) !important;
}

.text-secondary a:hover,
a.text-secondary:hover {
    color: var(--color-secondary-alt) !important;
}

/* Custom button styles that extend Bootstrap */
/* Primary button */
.btn-primary {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-bg);
}
.btn-primary:hover {
    background-color: var(--color-primary-alt);
    border-color: var(--color-primary-alt);
    color: var(--color-bg);
}
.btn-primary:active {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-bg);
}

/* Secondary button */
.btn-secondary {
    background-color: var(--color-secondary);
    border-color: var(--color-secondary);
    color: var(--color-bg);
}
.btn-secondary:hover {
    background-color: var(--color-secondary-alt);
    border-color: var(--color-secondary-alt);
    color: var(--color-bg);
}

/* Tertiary button */
.btn-tertiary {
    background-color: var(--color-tertiary);
    border-color: var(--color-tertiary);
    color: var(--color-bg);
}
.btn-tertiary:hover {
    background-color: var(--color-tertiary-alt);
    border-color: var(--color-tertiary-alt);
    color: var(--color-bg);
}

/* Outline button */
.btn-outline-primary {
    background-color: transparent;
    border-color: var(--color-tertiary);
    color: var(--color-tertiary);
}
.btn-outline-primary:hover {
    background-color: var(--color-tertiary);
    border-color: var(--color-tertiary);
    color: var(--color-bg);
}

.btn-outline-secondary {
    background-color: transparent;
    border-color: var(--color-secondary);
    color: var(--color-secondary);
}
.btn-outline-secondary:hover {
    background-color: var(--color-secondary);
    border-color: var(--color-secondary);
    color: var(--color-bg);
}
.btn-outline-tertiary {
    background-color: transparent;
    border-color: var(--color-primary);
    color: var(--color-primary);
}
.btn-outline-tertiary:hover {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-bg);
}

/* Disabled button */
.btn-disabled {
    background-color: var(--color-primary-alt);
    border-color: var(--color-primary-alt);
    color: var(--color-bg);
    cursor: not-allowed;
    opacity: 0.65;
    pointer-events: none;
}

/* Badge color styles */
.badge.bg-primary {
    background-color: var(--color-primary-alt) !important;
    color: var(--color-bg) !important;
}

.badge.bg-secondary {
    background-color: var(--color-secondary-alt) !important;
    color: var(--color-bg) !important;
}

.badge.bg-tertiary {
    background-color: var(--color-tertiary-alt) !important;
    color: var(--color-bg) !important;
}

/* Header and footer styles */
.navbar {
    background-color: var(--color-primary-alt) !important;
}

.navbar .navbar-nav .nav-link {
    color: var(--color-tertiary) !important;
    font-weight: bold;
    transition: color 0.2s ease-in-out;
}


.navbar .navbar-nav .nav-link:hover {
    color: var(--color-teritary-alt) !important;
    text-decoration: underline;
}

/* Alert boxes */
.alert-secondary-custom {
    background-color: var(--color-secondary-alt) !important;
    color: var(--color-bg) !important;
    border-color: var(--color-secondary) !important;
}

/* Custom card styles */
.card {
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    border-color: var(--color-primary);
    box-shadow: 0 8px 16px var(--color-shadow);
}

/* ------- RichText Content Styles ------- */
/* Add heading styles for StreamField content */
.rich-text h1,
.rich-text h2,
.rich-text h3,
.rich-text h4,
.rich-text h5,
.rich-text h6 {
    color: var(--bs-primary);
    margin-top: 1.5rem;
    margin-bottom: 1rem;
}

.rich-text p {
    margin-bottom: 1rem;
    line-height: 1.6;
}

/* Centre and make responsive all images and embeds */
.rich-text img,
.rich-text .richtext-image,
.rich-text .responsive-object {
    display: block;
    max-width: 800px;
    width: 100%;
    margin: 2rem auto;
}

/* Image specific */
.rich-text img {
    height: auto;
}

/* Embed aspect ratio wrapper */
.rich-text .responsive-object {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
    overflow: hidden;
}

/* Embed iframe positioning */
.rich-text .responsive-object iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/* ------- End RichText Content Styles ------- */

/* Blockquote Styles */
.blog-quote {
    border-left: 4px solid var(--bs-primary);
    padding-left: 1rem;
    margin: 1.5rem 0;
    color: var(--bs-secondary);
}

.quote-text {
    font-style: normal;
}

.quote-attribution {
    display: block;
    text-align: right;
    font-weight: bold;
    color: var(--bs-primary);
}