/* ============================
   Ben Franklin Print Co.
   Global Stylesheet (Bootstrap 5 companion)
   ============================ */

/* ---- Brand Colour Variables ---- */
:root {
  --brand-primary: #284735;
  --brand-dark: #1B3B2B;
  --brand-gold: #c28b00;
  --font-display: 'Bebas Neue', sans-serif;
  --font-script: 'Great Vibes', cursive;
  --font-accent: 'Oswald', sans-serif;
  --font-body: 'Inter', sans-serif;
}

/* ---- Base Typography ---- */
body {
  font-family: var(--font-body);
}

h1 {
  font-family: var(--font-display);
  font-size: 5rem;
  line-height: 1;
  letter-spacing: -0.5px;
}

h2 {
  font-size: 3.5rem;
}

h3 {
  font-size: 2.5rem;
}

h4 {
  font-size: 2rem;
}

h5 {
  font-size: 1.5rem;
}

/* ---- Brand Button ---- */
.btn-brand {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
  color: #fff;
  letter-spacing: 2px;
  font-size: 0.85rem;
  transition: background-color 0.25s ease, box-shadow 0.25s ease;
}

.btn-brand:hover,
.btn-brand:focus {
  background-color: var(--brand-dark);
  border-color: var(--brand-dark);
  color: #fff;
}

.btn-brand--dark {
  background-color: var(--brand-dark);
  border-color: var(--brand-dark);
}

.btn-brand--dark:hover {
  background-color: #132b1f;
  border-color: #132b1f;
}

/* ---- Nav link brand colour ---- */
.nav-link-brand {
  color: var(--brand-primary) !important;
  font-size: 0.82rem;
  letter-spacing: 1.2px;
  transition: color 0.2s ease;
}

.nav-link-brand:hover,
.nav-link-brand:focus {
  color: var(--brand-gold) !important;
}

/* ---- Navbar Logo ---- */
.navbar-logo {
  height: 64px;
  width: auto;
}

/* ---- Navbar toggle icon ---- */
.navbar-toggler-icon-custom {
  width: 28px;
  height: 28px;
  fill: var(--brand-primary);
}



/* ---- Dropdown menu styling ---- */
.dropdown-menu {
  border-radius: 0.375rem;
  border: none;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.dropdown-item:hover {
  background-color: #f3f4f6;
  color: var(--brand-primary);
}

/* ---- Inline SVG Icons (body icons, 1.5× scale) ---- */
.icon {
  width: 1.5em;
  height: 1.5em;
  fill: currentColor;
}

.icon-brand {
  width: 64px;
  height: 64px;
  fill: var(--brand-primary);
}

.icon-banner {
  width: 28px;
  height: 28px;
  fill: rgba(255, 255, 255, 0.6);
}

/* ---- Footer CTA Section ---- */
.footer-cta {
  background-color: var(--brand-primary);
}

.footer-mascot {
  height: 96px;
  width: auto;
}

.footer-cta-heading {
  font-family: var(--font-accent);
  font-size: 2.5rem;
}

.footer-contact-border {
  border-color: rgba(255, 255, 255, 0.2) !important;
}

/* Footer icon (phone, email, map) */
.icon-footer {
  width: 22px;
  height: 22px;
  fill: #e6b800;
  flex-shrink: 0;
}

/* Bottom footer logo */
.footer-logo {
  height: 56px;
  width: auto;
}

/* Footer nav font */
.footer-nav {
  font-family: var(--font-accent);
}

/* ---- Social circle icons ---- */
.social-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: var(--brand-primary);
  transition: background-color 0.2s ease;
  text-decoration: none;
}

.social-circle:hover {
  background-color: var(--brand-dark);
}

/* ---- Gold quote button ---- */
.btn-gold {
  background-color: var(--brand-gold);
  border-color: var(--brand-gold);
  color: #fff;
  letter-spacing: 2px;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
}

.btn-gold:hover {
  background-color: #a87700;
  border-color: #a87700;
  color: #fff;
}

/* ---- Warning colour override for gold ---- */
.text-warning {
  color: var(--brand-gold) !important;
}



/* -- Banner Section -- */
.banner-section {
  background-color: #111827;
  overflow: hidden;
}

.banner-bg-overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.4;
}

.banner-heading {
  font-family: var(--font-display);
  color: #fff;
  font-size: 4rem;
  line-height: 1;
}

.banner-list-item {
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: 1px;
  color: #fff;
}

.banner-divider {
  border-left: 1px solid rgba(255, 255, 255, 0.2);
}

/* ---- Bootstrap responsive border helpers ---- */
@media (min-width: 992px) {
  .border-start-lg {
    border-left: 1px solid rgba(255, 255, 255, 0.2) !important;
  }
}

/* ---- Z-index helpers ---- */
.z-above {
  z-index: 10;
}

.z-above-line {
  z-index: 1;
}

/* ---- Utility: object-fit cover ---- */
.img-cover {
  object-fit: cover;
}

/* ---- Outline brand button ---- */
.btn-outline-brand {
  letter-spacing: 2px;
  font-size: 0.85rem;
}

/* Mobile specific row padding */
@media (max-width: 767.98px) {
  .row {
    padding-left: 18px;
    padding-right: 18px;
  }
  .designCustomButton {
    width:100%;
    display: block;
  }
}
.text-gold {
  color: #C89B3C !important;
}
.font-bebas {
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 0.8px;
}
.cta-icon-box {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(200, 155, 60, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(200, 155, 60, 0.3);
}