/* ==========================================================
   Financial Results Portal Theme Layer
   Built on top of Bootstrap 5
   ========================================================== */

/* GOOGLE FONT */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');

/* ==========================================================
   BRAND VARIABLES
   Edit these per financial client
   ========================================================== */

:root {

  /* Typography */
  --site-font-family: 'Roboto', system-ui, -apple-system, sans-serif;

  /* Page background */
  --site-bg-color: #f8f9fa;
  
  --site-bg-image: url('../img/2025-bg-white-grey.jpg');


  /* Text */
  --text-color: #3d3f44;
  --heading-color: #003e52;
  --muted-color: #6c757d;

  /* Brand colours */
  --brand-primary: #003e52;
  --brand-primary-hover: #1e9c8d;
  --brand-secondary: #87189a;
  --brand-accent: #1e9c8d;

  /* Links */
  --link-color: var(--brand-primary);
  --link-hover-color: var(--brand-primary-hover);

  /* Buttons */
  --btn-primary-bg: var(--brand-primary);
  --btn-primary-border: var(--brand-primary);
  --btn-primary-hover-bg: var(--brand-primary-hover);
  --btn-primary-hover-border: var(--brand-primary-hover);

  /* Cards / panels */
  --card-bg: #ffffff;
  --card-border: rgba(0,0,0,.08);

  /* Navbar */
  --navbar-bg: #ffffff;
  --navbar-border: rgba(0,0,0,.06);
  
  
  

}

/* ==========================================================
   GLOBAL SITE STYLING
   ========================================================== */

html {
  scroll-behavior: smooth;
}

body {

  font-family: var(--site-font-family);

  background-color: var(--site-bg-color);

  background-image: var(--site-bg-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;  

  color: var(--text-color);

}

/* ==========================================================
   TYPOGRAPHY
   ========================================================== */

h1, h2, h3, h4, h5, h6 {

  color: var(--heading-color);
  font-weight: 600;

}

.text-muted {
  color: var(--muted-color) !important;
}

/* ==========================================================
   LINKS
   ========================================================== */

a {

  color: var(--link-color);
  text-decoration: none;

}

a:hover {

  color: var(--link-hover-color);
  text-decoration: underline;

}

/* ==========================================================
   FORMS
   ========================================================== */
   
   .input-group-text {
background:#f8f9fa;
border-right:0;
}

.input-group .form-control,
.input-group .form-select {
border-left:0;
}

/* ==========================================================
   BUTTONS
   ========================================================== */

.btn-primary {

  background-color: var(--btn-primary-bg);
  border-color: var(--btn-primary-border);

}

.btn-primary:hover,
.btn-primary:focus {

  background-color: var(--btn-primary-hover-bg);
  border-color: var(--btn-primary-hover-border);

}

/* Outline buttons inherit brand */

.btn-outline-primary {

  color: var(--brand-primary);
  border-color: var(--brand-primary);

}

.btn-outline-primary:hover {

  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: #fff;

}

/* ==========================================================
   CARDS
   ========================================================== */

.card {

  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 12px;

}

/* ==========================================================
   NAVBAR
   ========================================================== */

.site-navbar {

  background: var(--navbar-bg);
  border-bottom: 1px solid var(--navbar-border);

}

/* ==========================================================
   FOOTER
   ========================================================== */

.site-footer {

  background: var(--card-bg);
  border-top: 1px solid var(--card-border);

}

/* ==========================================================
   FAQ PAGE POLISH
   ========================================================== */

.faq-hero {

  background: linear-gradient(
    135deg,
    rgba(255,255,255,.95),
    rgba(248,249,250,.95)
  );

}

/* ==========================================================
   UTILITY
   ========================================================== */

.rounded-xl {
  border-radius: 16px;
}

.shadow-soft {
  box-shadow: 0 6px 20px rgba(0,0,0,.05);
}