/* ============================================================
   GLOBAL — Brenom Systems
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
@import url('https://api.fontshare.com/v2/css?f[]=switzer@400,500,600&display=swap');

/* ---- Reset ---- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ---- Custom Properties ---- */
:root {
  /* Colors */
  --orange:        #f57518;
  --orange-dark:   #d9630f;  /* hover state */
  --dark:          #121212;
  --cream:         #f0ede7;
  --gray-mid:      #646464;
  --gray-light:    #e8e8e8;
  --gray-footer:   #818181;
  --white:         #ffffff;

  /* Borders */
  --border-subtle: rgba(0, 0, 0, 0.12);
  --border-mid:    rgba(0, 0, 0, 0.08);

  /* Timing */
  --transition:    0.2s;

  /* Typography */
  --font-heading: 'Bebas Neue', sans-serif;
  --font-body:    'Switzer', sans-serif;
}

/* ---- Base ---- */
html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-weight: 500;
  background: var(--white);
  color: var(--dark);
  overflow-x: hidden;
}

img {
  display: block;
  max-width: 100%;
}

ul {
  list-style: disc;
}

a {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
}

/* ---- Shared Button Styles ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  border: none;
  line-height: 1;
  transition: background var(--transition), color var(--transition), border-color var(--transition), opacity var(--transition);
}

.btn--primary {
  background: var(--orange);
  color: var(--white);
}
.btn--primary:hover {
  background: var(--orange-dark);
}

.btn--outline-white {
  border: 1px solid var(--white);
  color: var(--white);
  background: transparent;
}
.btn--outline-white:hover {
  background: var(--white);
  color: var(--dark);
}

.btn--outline-dark {
  border: 1px solid var(--dark);
  color: var(--dark);
  background: transparent;
}
.btn--outline-dark:hover {
  background: var(--dark);
  color: var(--white);
}

.btn--sm {
  font-size: 16px;
  padding: 10px 16px;
  height: 40px;
}


/* ---- Shared Section Label ---- */
/* Use alongside any __label class. Replaces per-section redeclarations. */
.section-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--orange);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  display: block;
}


/* ---- Shared Bullet List ---- */
/* Use .list-bullet on <ul>, .list-bullet__item on <li> */
.list-bullet {
  list-style: none;
  display: flex;
  flex-direction: column;
}

.list-bullet__item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  border-bottom: 1px solid var(--gray-light);
}

.list-bullet__item:first-child {
  border-top: 1px solid var(--gray-light);
}

.list-bullet__item::before {
  content: '';
  width: 8px;
  height: 8px;
  background: var(--orange);
  border-radius: 50%;
  flex-shrink: 0;
}


/* ---- Shared Bordered Grid ---- */
/* Use .grid-bordered on the wrapper, add --2col or --3col modifier */
.grid-bordered {
  display: grid;
  gap: 0;
  border: 1px solid var(--dark);
}

.grid-bordered--2col {
  grid-template-columns: repeat(2, 1fr);
}

.grid-bordered--3col {
  grid-template-columns: repeat(3, 1fr);
}