/* Inter 400 Regular */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/inter/inter-regular.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Inter 600 SemiBold */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/inter/inter-semibold.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Playfair 500 Italic */
@font-face {
    font-family: 'Playfair Text';
    font-style: italic;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/playfair/playfair-italic-500.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* playfair-display-500 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Playfair Display';
    font-style: normal;
    font-weight: 500;
    src: url('../fonts/playfair/playfair-display-v37-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

  /* playfair-display-500italic - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Playfair Display';
    font-style: italic;
    font-weight: 500;
    src: url('../fonts/playfair/playfair-display-v37-latin-500italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* San Francisco Text – Regular (400) */
@font-face {
    font-family: 'SF Text';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/san_francisco_text/regular.woff2') format('woff2');
}
  
/* San Francisco Text – Italic (400 italic) */
@font-face {
    font-family: 'SF Text';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/san_francisco_text/regular-italic.woff2') format('woff2');
}
  
/* San Francisco Text – Bold (700) */
@font-face {
    font-family: 'SF Text';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/san_francisco_text/bold.woff2') format('woff2');
}
  
/* San Francisco Display – Regular (400) */
@font-face {
    font-family: 'SF Display';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/san_francisco_display/regular.woff2') format('woff2');
}
  
/* San Francisco Display – Medium (500) */
@font-face {
    font-family: 'SF Display';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/san_francisco_display/medium.woff2') format('woff2');
}
  
/* San Francisco Display – Bold (700) */
@font-face {
    font-family: 'SF Display';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/san_francisco_display/bold.woff2') format('woff2');
}

.inter-regular {
    font-family: 'Inter', sans-serif;
}

.playfair-italic {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 500;
}

.sf-text {
    font-family: 'SF Text', sans-serif;
}
  
.sf-display {
    font-family: 'SF Display', sans-serif;
}

.sf-bold {
    font-weight: 700;
}

.sf-medium {
    font-weight: 500;
}

.sf-italic {
    font-style: italic;
}

/* cream background and grey #545454 */
body {
    background-color: #f5f4ec;
    /* font-family: 'San Francisco', sans-serif; */
    font-family: 'SF Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

h1, h2, h3 {
    font-family: 'SF Display', sans-serif;
}

/* Set all modals to have your beige background */
.modal-content {
    background-color: #f5f4ec !important;
}
  
  /* Match header and footer too */
.modal-header,
.modal-footer {
    background-color: #f5f4ec !important;
    border-color: #e0dfd6;
}
  
/* Optional: Set modal title text color for contrast */
.modal-title {
    color: #0e3335; /* Dark teal from your palette */
}
  
.form-control,
.form-select {
    background-color: #f5f4ec !important;
    border: 1px solid #0e3335 !important;   /* Dark teal border */
    border-radius: 50rem !important;
    color: #0e3335; /* Optional: dark text for contrast */
}

/* Optional: Styling when focused */
.form-control:focus,
.form-select:focus {
    border-color: #109186 !important; /* Teal green focus */
    background-color: #f5f4ec;
    color: #0e3335;
    box-shadow: none;
    outline: none;
}

.form-control::placeholder {
    color: #888; /* Subtle grey */
    opacity: 1;   /* Make sure it's visible on light backgrounds */
}
  
.form-select {
    background-color: #f5f4ec !important;
    border-color: #ccc;
    color: #0e3335;
}
  
.form-select:focus {
    background-color: #f5f4ec;
    border-color: #109186;
    box-shadow: none;
}

/* Checkbox + radio background and border */
.form-check-input {
    background-color: #f5f4ec;
    border: 1px solid #ccc;
}

/* Checked state — use brand accent */
.form-check-input:checked {
    background-color: #109186; /* light teal */
    border-color: #109186;
}

/* Optional: remove Bootstrap blue ring */
.form-check-input:focus {
    box-shadow: none;
    border-color: #109186;
}

.form-label,
.form-check-label {
    color: #0e3335;
}

#captcha-image {
    height: 38px;
    width: auto;
    border: 1px solid #0e3335;
    border-radius: 50rem;
    background-color: #f5f4ec;
    padding: 0.25rem 0.5rem;
    object-fit: contain;
}

/* custom.css */
.bg-beige {
    background-color: #f8f0e4 !important;
}

.text-beige {
    color: #f8f0e4 !important;
}

.border-beige {
    border-color: #f8f0e4 !important;
}

/* Dark Teal - Used in the logo as the dark colour */
.bg-dark-teal {
    background-color: #0e3335 !important;
}

.text-dark-teal {
    color: #0e3335 !important;
}

.border-dark-teal {
    border-color: #0e3335 !important;
}

/* Teal Green - Used in the logo as the light colour */
.bg-teal-green {
    background-color: #109186 !important;
}

.text-teal-green {
    color: #109186 !important;
}

.text-teal-green:hover {
    color: #0b6f67;
}

.border-teal-green {
    border-color: #109186 !important;
}

.btn-teal-green {
    background-color: #109186;
    color: #fff;
    border: 2px solid #109186;
    transition: all 0.2s ease-in-out;
}

.btn-teal-green:hover,
.btn-teal-green:focus {
    background-color: #0b6f67; /* Slightly darker for hover */
    border-color: #0b6f67;
    color: #fff;
}

.custom-navbar {
    background-color: #f5f4ec; /* Match your body */
    font-family: 'SF Text', sans-serif;
    color: #0e3335; /* Your dark teal for text */
}
  
.custom-navbar .nav-link {
    color: #0e3335;
    font-weight: 400;
}
  
.custom-navbar .nav-link:hover,
.custom-navbar .nav-link:focus {
    color: #109186; /* Teal green hover */
}
  
.custom-navbar .dropdown-menu {
    background-color: #f5f4ec;
    border-color: #e0dfd6;
    font-family: 'SF Text', sans-serif;
}
  
.custom-navbar .dropdown-item {
    color: #0e3335;
}
  
.custom-navbar .dropdown-item:hover {
    background-color: #f0ebe1;
    color: #109186;
}

.navbar-toggler {
    border-color: #0e3335;
}
  
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%230e3335' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(14, 51, 53, 0.75)' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar-nav .nav-link img {
    max-height: 30px;
    display: inline-block;
}

/* Style the logo inside the navbar */
.nav-logo {
    height: 50px;
    display: inline-block;
    vertical-align: middle;
}