/* VFD branding overrides on TheAgencyTheme — v1.2.1 (#12 follow-up) */

:root {
  --bs-primary: #FF774A;
  --bs-primary-rgb: 255, 119, 74;
  --bs-link-color: #FF774A;
  --bs-link-hover-color: #e5663a;
  --bs-link-color-rgb: 255, 119, 74;
  --bs-link-hover-color-rgb: 229, 102, 58;
  --vfd-orange: #FF774A;
  --vfd-orange-rgb: 255, 119, 74;
}

/* Override Agency yellow (#ffc800) / Bootstrap primary everywhere */
a:not(.btn):not(.nav-link):not(.navbar-brand):not(.dropdown-item):not(.page-link) {
  color: #FF774A;
}
a:not(.btn):not(.nav-link):not(.navbar-brand):not(.dropdown-item):not(.page-link):hover,
a:not(.btn):not(.nav-link):not(.navbar-brand):not(.dropdown-item):not(.page-link):focus {
  color: #e5663a;
}

.text-primary {
  --bs-text-opacity: 1;
  color: #FF774A !important;
}

.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #FF774A;
  --bs-btn-border-color: #FF774A;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #e5663a;
  --bs-btn-hover-border-color: #d85c32;
  --bs-btn-focus-shadow-rgb: 255, 119, 74;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #d85c32;
  --bs-btn-active-border-color: #cc552e;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #FF774A;
  --bs-btn-disabled-border-color: #FF774A;
  color: #fff !important;
  background-color: #FF774A !important;
  border-color: #FF774A !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle {
  color: #fff !important;
  background-color: #e5663a !important;
  border-color: #d85c32 !important;
}

.btn-outline-primary {
  --bs-btn-color: #FF774A;
  --bs-btn-border-color: #FF774A;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #FF774A;
  --bs-btn-hover-border-color: #FF774A;
  --bs-btn-focus-shadow-rgb: 255, 119, 74;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #FF774A;
  --bs-btn-active-border-color: #FF774A;
  --bs-btn-disabled-color: #FF774A;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #FF774A;
  color: #FF774A !important;
  border-color: #FF774A !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline-primary.active {
  color: #fff !important;
  background-color: #FF774A !important;
  border-color: #FF774A !important;
}

.bg-primary {
  --bs-bg-opacity: 1;
  background-color: #FF774A !important;
}

.border-primary {
  --bs-border-opacity: 1;
  border-color: #FF774A !important;
}

/* Agency timeline / icon accents that used primary yellow */
.fa-stack .fa-stack-2x.text-primary,
.timeline > li .timeline-image,
#mainNav .navbar-nav .nav-item .nav-link.active {
  color: #FF774A !important;
}

.timeline > li .timeline-image {
  background-color: #FF774A !important;
}

.portfolio .portfolio-item .portfolio-link .portfolio-hover {
  background: rgba(255, 119, 74, 0.9) !important;
}

header.masthead {
  background-image: url("../img/hero-digital-workspace.png") !important;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

/*
 * Logo size (#12 follow-up):
 * Agency sets `#mainNav .navbar-brand img { height: 1.5rem }` and at lg `2rem`
 * (plus shrink `1.5rem`). That ID selector beat `.navbar-brand img.vfd-logo`,
 * so the doubled heights in v1.2.0 never won. Match/beat Agency specificity.
 */
#mainNav .navbar-brand img.vfd-logo {
  height: 4rem !important;
  width: auto !important;
  max-width: 440px;
  display: inline-block;
  vertical-align: middle;
}

@media (min-width: 992px) {
  #mainNav .navbar-brand img.vfd-logo {
    height: 5rem !important;
  }
}

#mainNav.navbar-shrink .navbar-brand img.vfd-logo,
#mainNav.navbar-shrink .navbar-brand svg.vfd-logo {
  height: 3.5rem !important;
}

/* #12: circular center-crop friendly team photo */
.team-member img {
  width: 14rem;
  height: 14rem;
  object-fit: cover;
  object-position: center center;
  border-radius: 50%;
}

/* Contact CTA strip (replaces stock Send Message form) */
.vfd-contact-cta .btn {
  margin: 0.35rem;
}

/*
 * Page body layout (#12 follow-up):
 * Orchard bootstrap-oc defines `.flow { display: flex; flex-wrap: wrap; }`
 * (row gutters). Privacy/Terms HtmlBody is wrapped in `<section class="flow">`,
 * so h1/h2/p/ul sit as flex items in a row and concatenate visually.
 * Restore normal block document flow; do not change CMS copy.
 */
section.flow,
.flow {
  display: block !important;
  flex-wrap: unset !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-top: 0 !important;
}

.flow > h1,
.flow > h2,
.flow > h3,
.flow > h4,
.flow > h5,
.flow > h6,
.flow > p,
.flow > ul,
.flow > ol,
.flow > blockquote,
.flow > pre,
.flow > table,
.flow > hr,
.flow > div {
  display: block;
  width: 100%;
  max-width: 100%;
  flex: none;
}

.flow > ul,
.flow > ol {
  padding-left: 1.25rem;
}

.flow > ul > li,
.flow > ol > li {
  display: list-item;
}

/* Cache-bust: bump ResourceManagement + recipe with this CSS */