@import url(https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Roboto:wght@300;400;500;700&family=Signika+Negative:wght@300;400;500;600;700&display=swap);
/*
 * theme.css — the only custom stylesheet.
 *
 * The UI is built with Bootstrap 5 (CDN). This file holds just:
 *   1. Light/dark theme variables + the .bg classes that consume them
 *      (the theme reducers set the variables at runtime).
 *   2. A minimal grid/helper shim so existing pages keep their positioning
 *      without rewriting every Materialize class to Bootstrap.
 */

:root {
  --brand: #009a96;
  --brand-dark: #00827f;
  --bs-primary: #009a96;
  --bs-primary-rgb: 0, 154, 150;

  --background-colour: #ffffff;
  --background-font-colour: #1a1b1f;
  --background-heading-colour: #000000;
  --primary-background: #ffffff;
  --primary-font-colour: #4a4a4a;
  --primary-heading-colour: #000000;
  --primary-link-colour: #1a1b1f;
  --secondary-background: #002531;
  --secondary-font-colour: #ffffff;
  --secondary-heading-colour: #ffffff;
  --secondary-link-colour: #ffffff;
  --border-colour: #e9e9e9;
}

/* ---- theme (light/dark) ---- */
body {
  background: var(--background-colour);
  color: var(--background-font-colour);
  font-family: "Signika Negative", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* !important so the themed backgrounds beat Bootstrap's .bg-secondary/.bg-* utilities (which are !important) */
.bg {
  color: var(--primary-font-colour) !important;
  background-color: var(--primary-background) !important;
}
.bg.bg-secondary {
  color: var(--secondary-font-colour) !important;
  background-color: var(--secondary-background) !important;
}
.bg a {
  color: var(--primary-link-colour);
}
.bg.bg-secondary a {
  color: var(--secondary-link-colour);
}
.bg.bg-secondary h1,
.bg.bg-secondary h2,
.bg.bg-secondary h3,
.bg.bg-secondary h4,
.bg.bg-secondary h5,
.bg.bg-secondary h6 {
  color: var(--secondary-heading-colour);
}

/* brand the Bootstrap primary as teal */
.btn-primary {
  --bs-btn-bg: var(--brand);
  --bs-btn-border-color: var(--brand);
  --bs-btn-hover-bg: var(--brand-dark);
  --bs-btn-hover-border-color: var(--brand-dark);
  --bs-btn-active-bg: var(--brand-dark);
}
.text-primary { color: var(--brand) !important; }
a { text-decoration: none; }
ul { list-style: none; padding-left: 0; }

/* hide the Google Translate injected top banner and keep the page in place */
.goog-te-banner-frame,
.goog-te-banner-frame.skiptranslate,
.VIpgJd-ZVi9od-ORHb-OEVmcd { display: none !important; }
body { top: 0 !important; }
.goog-tooltip, .goog-tooltip:hover { display: none !important; }
.goog-text-highlight { background: none !important; box-shadow: none !important; }

/* homepage hero height (taller on mobile) */
.br-hero { min-height: 60vh; }
@media (max-width: 768px) { .br-hero { min-height: 80vh; } }

/* scroll-reveal (fade in up) */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.show { opacity: 1; transform: none; }

/* ---- minimal grid shim (Materialize col l#/s#/m#) ---- */
.container { width: 92%; max-width: 1200px; margin: 0 auto; }
.row { display: flex; flex-wrap: wrap; margin: 0 -0.75rem 1rem; }
/* when an element is BOTH container + row, keep it centered (row's negative
   side margins would otherwise override the container's auto-centering) */
.container.row { margin-left: auto; margin-right: auto; }
/* inner-page hero banner (Tour container) — uses the theme secondary colour and
   clears the fixed nav so the solid nav sits on the banner, not on white */
.page-hero { padding: 130px 0 60px; text-align: center; }
.page-hero h1 { margin-bottom: 10px; }
.row > .col, .col { padding: 0 0.75rem; box-sizing: border-box; width: 100%; }
.col.s1 { width: 8.3333%; } .col.s2 { width: 16.6666%; } .col.s3 { width: 25%; }
.col.s4 { width: 33.3333%; } .col.s5 { width: 41.6666%; } .col.s6 { width: 50%; }
.col.s7 { width: 58.3333%; } .col.s8 { width: 66.6666%; } .col.s9 { width: 75%; }
.col.s10 { width: 83.3333%; } .col.s11 { width: 91.6666%; } .col.s12 { width: 100%; }
@media (min-width: 601px) {
  .col.m4 { width: 33.3333%; } .col.m6 { width: 50%; } .col.m12 { width: 100%; }
}
@media (min-width: 993px) {
  .col.l1 { width: 8.3333%; } .col.l2 { width: 16.6666%; } .col.l3 { width: 25%; }
  .col.l4 { width: 33.3333%; } .col.l5 { width: 41.6666%; } .col.l6 { width: 50%; }
  .col.l7 { width: 58.3333%; } .col.l8 { width: 66.6666%; } .col.l9 { width: 75%; }
  .col.l10 { width: 83.3333%; } .col.l11 { width: 91.6666%; } .col.l12 { width: 100%; }
  .col.offset-l2 { margin-left: 16.6666%; } .col.offset-l3 { margin-left: 25%; }
}

/* ---- minimal legacy component styling ---- */
.card-panel {
  background: var(--primary-background);
  color: var(--primary-font-colour);
  border-radius: 0.5rem;
  padding: 1.5rem;
  margin: 0.5rem 0 1rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}
/* form fields: responsive auto-fit columns that never collapse to tiny boxes */
/* form fields stack one per row by default; col-classed fields keep their width */
form .row > div { flex: 1 1 100%; padding: 0 0.5rem; }
form .row > div.col { flex: 0 0 auto; }
.input-field { position: relative; margin-bottom: 1.25rem; }
.input-field > label { display: block; margin-bottom: 0.35rem; color: #6b6b6b; font-size: 0.85rem; }
.input-field input, .input-field textarea, input[type="text"], input[type="email"],
input[type="password"], input[type="number"], input[type="search"], input[type="tel"],
input[type="date"], textarea, select {
  display: block; width: 100%; padding: 0.5rem 0.75rem; font-size: 1rem;
  border: 1px solid var(--border-colour); border-radius: 0.375rem; box-sizing: border-box;
  background: var(--primary-background); color: var(--background-font-colour);
}
.collection { list-style: none; padding: 0; margin: 0.5rem 0 1rem; }
.collection .collection-item {
  background: var(--primary-background);
  color: var(--primary-font-colour);
  border: 1px solid var(--border-colour);
  border-radius: 0.5rem;
  padding: 1rem 1.25rem;
  margin-bottom: 0.75rem;
  position: relative;
  transition: box-shadow 0.15s ease;
}
.collection .collection-item:hover { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08); }
.secondary-content { position: absolute; top: 1rem; right: 1.2rem; }
/* Bootstrap list-group / card / table themed so the admin pages follow light/dark */
.list-group-item {
  background-color: var(--primary-background);
  color: var(--background-font-colour);
  border-color: var(--border-colour);
}
.list-group-item-action:hover,
.list-group-item-action:focus {
  background-color: var(--hover);
  color: var(--background-font-colour);
}
.card {
  background-color: var(--primary-background);
  color: var(--background-font-colour);
}
.table {
  --bs-table-bg: var(--primary-background);
  --bs-table-color: var(--background-font-colour);
  color: var(--background-font-colour);
  border-color: var(--border-colour);
}
/* admin data tables (TableComponent) — left aligned + striped */
table.data-table { width: 100%; border-collapse: collapse; }
table.data-table td {
  text-align: left;
  vertical-align: top;
  padding: 0.65rem 1rem;
}
table.data-table .table-key { width: 35%; white-space: nowrap; }
table.data-table.striped tbody tr:nth-child(odd) { background-color: var(--hover); }
/* Bootstrap accordion (FAQ pages) themed for light/dark */
.accordion {
  --bs-accordion-bg: var(--primary-background);
  --bs-accordion-color: var(--background-font-colour);
  --bs-accordion-border-color: var(--border-colour);
  --bs-accordion-btn-color: var(--background-font-colour);
  --bs-accordion-btn-bg: var(--primary-background);
  --bs-accordion-active-bg: var(--hover);
  --bs-accordion-active-color: var(--background-font-colour);
  --bs-accordion-btn-focus-box-shadow: none;
  /* grey chevron — readable on both light and dark backgrounds */
  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27 fill=%27%23888888%27%3e%3cpath fill-rule=%27evenodd%27 d=%27M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z%27/%3e%3c/svg%3e");
  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27 fill=%27%23888888%27%3e%3cpath fill-rule=%27evenodd%27 d=%27M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z%27/%3e%3c/svg%3e");
}
.btn, .btn-large, .btn-small {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem;
  background: var(--brand); color: #fff; border: none; border-radius: 0.375rem;
  padding: 0.5rem 1.25rem; cursor: pointer; text-decoration: none;
}
/* no hover effect on buttons */
.btn:hover, .btn-large:hover, .btn:focus, .btn-large:focus { color: #fff; background: var(--brand); border-color: var(--brand); filter: none; }
.btn-full { width: 100%; }
/* admin header title ("CONTROL PANEL"): no colour change on hover (match base) */
.bg .navbar-brand:hover, .bg .navbar-brand:focus { color: var(--primary-link-colour); }
/* larger textareas (consistent with the send-email body box) */
.auto-grow-textarea { min-height: 250px; }
/* floating "create" action button on admin list pages (Materialize FAB shim) */
.fixed-action-btn { position: fixed; right: 24px; bottom: 24px; z-index: 1030; margin: 0; }
.btn-floating {
  padding: 0; border-radius: 50%; width: 47px; height: 47px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
}
.btn-floating.btn-large { width: 56px; height: 56px; font-size: 1.4rem; }
.navbar-toggler { border: none; box-shadow: none; color: inherit; }
/* expanded burger menu — slightly different shade from the nav bar */
.navbar .navbar-collapse {
  background: rgba(128, 128, 128, 0.12);
  border-radius: 0.5rem;
  margin-top: 0.5rem;
  padding: 0.5rem 1rem;
}
.preloader-wrapper { display: inline-block; width: 40px; height: 40px; position: relative; }
.preloader-wrapper.active::after {
  content: ""; position: absolute; inset: 0; border: 4px solid #e3e3e3;
  border-top-color: var(--brand); border-radius: 50%; animation: app-spin 0.8s linear infinite;
}
.preloader-wrapper .spinner-layer { display: none; }
@keyframes app-spin { to { transform: rotate(360deg); } }
.progress { position: relative; height: 4px; background: #b2dfdb; border-radius: 2px; overflow: hidden; margin: 0.5rem 0; }
.progress .indeterminate { position: absolute; height: 100%; background: var(--brand); animation: app-indet 1.6s ease-in-out infinite; }
@keyframes app-indet { 0% { left: -35%; width: 35%; } 100% { left: 100%; width: 35%; } }

/* ---- helpers still used in markup ---- */
.center, .center-align { text-align: center; }
.left { float: left; } .right { float: right; }
.responsive-img { max-width: 100%; height: auto; }
.valign-wrapper { display: flex; align-items: center; }
.white-text { color: #fff !important; }
.grey-text { color: #9e9e9e !important; }
.section { padding: 1rem 0; }
.divider { height: 1px; background: var(--border-colour); margin: 0.75rem 0; }
.app-py-1 { padding: 1rem 0 !important; }
.app-py-2 { padding: 2rem 0 !important; }
.app-py-3 { padding: 3rem 0 !important; }
.app-px-1 { padding-left: 1rem !important; padding-right: 1rem !important; }
.no-padding { padding: 0 !important; }
@media (max-width: 600px) { .hide-on-small-only { display: none !important; } .mobile-center { text-align: center; } }
@media (max-width: 992px) { .hide-on-med-and-down { display: none !important; } }

/* ma.css — MA (assets / gold / vaults) home design.
 * Self-contained styling for the hero slider. The app-slider-* background
 * classes + images (Slider1/2/3.jpg) were ported from the old project's
 * materialize-theme.css (the design originally shipped with no CSS here). */

/* per-slide hero backgrounds */
.app-slider-one {
  background: url(/assets/images/site/Slider1.jpg) center/cover no-repeat;
}
.app-slider-two {
  background: url(/assets/images/site/Slider2.jpg) center/cover no-repeat;
}
.app-slider-three {
  background: url(/assets/images/site/Slider3.jpg) center/cover no-repeat;
}

.overlay2 {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.8);
}

.app-slider-vh {
  position: relative;
  min-height: 600px;
  display: flex;
  align-items: center;
}

/* hero text sits above the dark overlay */
.container-50 {
  position: relative;
  z-index: 2;
  max-width: 720px;
  padding: 0 1rem;
}
.f-45 {
  font-size: 45px;
  line-height: 1.15;
  font-weight: 700;
}
.white-text {
  color: #fff !important;
}

@media (max-width: 768px) {
  .f-45 { font-size: 32px; }
  .app-slider-vh { min-height: 480px; }
}