/*
 * Spid brand overrides.
 *
 * Loaded last, after responsive.css, so it wins on specificity ties. The
 * template ships a dozen interchangeable accent palettes (green, blue, purple,
 * ...) and this page was assembled from the green one; every rule below remaps
 * that green accent onto the Spid logo colours. Nothing here changes layout.
 *
 * Palette sampled from /images/spid_logo.png:
 *   orange  #f17c1e  (logo field)
 *   green   #2b9c74  (map pin + "Mr Tilapia" wordmark)
 */

:root {
  --spid-orange: #f17c1e;
  --spid-orange-dark: #d1660f;
  --spid-orange-light: #ff9440;
  --spid-green: #2b9c74;
  --spid-green-dark: #1f7a59;
}

/*------------------------------------------*/
/*  BUTTONS
/*------------------------------------------*/

.btn-green,
.btn-lightgreen {
  color: #fff;
  background-color: var(--spid-orange);
  border-color: var(--spid-orange);
}

.btn-green:hover,
.btn-lightgreen:hover,
.btn-green:focus,
.btn-lightgreen:focus,
.btn-green:active,
.btn-lightgreen:active {
  color: #fff;
  background-color: var(--spid-orange-dark);
  border-color: var(--spid-orange-dark);
}

/* The template's focus ring is a hard-coded rgba of the old accent. */
.btn:focus,
.btn:active:focus {
  box-shadow: 0 0 0 0.2rem rgba(241, 124, 30, 0.35);
}

/*------------------------------------------*/
/*  TEXT + LINK ACCENTS
/*------------------------------------------*/

.green-color,
.green-color h2,
.green-color h3,
.green-color h4,
.green-color h5,
.green-color h6,
.green-color p,
.green-color a,
.green-color li,
.green-color i,
.green-color span {
  color: var(--spid-orange);
}

a {
  color: var(--spid-orange);
}

a:hover {
  color: var(--spid-orange-dark);
}

/* Footer/dark surfaces keep the template's light-on-dark link treatment. */
.bg-dark a,
.footer a,
.navbar a,
.foo-links li a,
.blog-post a,
.hero-txt a {
  color: inherit;
}

::selection {
  background: var(--spid-orange);
  color: #fff;
}

/*------------------------------------------*/
/*  ICONS
/*------------------------------------------*/

/* Icon numerals/glyphs are painted with a clipped gradient, not `color`. */
.green-icon span {
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(var(--spid-orange)),
    to(var(--spid-orange-light))
  );
  background: linear-gradient(to bottom, var(--spid-orange), var(--spid-orange-light));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* No coloured accent along the card's top edge on hover. The template draws
   one two ways — recolouring `border-top` and revealing the 2px `.box-line`
   bar — so both are neutralised explicitly: deleting these rules would just
   let style.css put its own green (#4fcb36) back. The card's border stays the
   flat #d0d0d0 it has at rest; the lift comes from the shared box-shadow. */
.fbox-3.green-hover:hover {
  border-top-color: #d0d0d0;
}

.fbox-3.green-hover:hover .box-line {
  background-color: transparent;
  opacity: 0;
}

.fbox-3.green-hover:hover > span {
  color: var(--spid-orange);
}

.team-member.green-hover:hover {
  border-bottom: 1px solid var(--spid-orange);
}

.team-member.green-hover:hover .box-line {
  background-color: var(--spid-orange);
  opacity: 1;
}

.team-member.green-hover:hover .team-img-meta span {
  color: var(--spid-orange);
}

/*------------------------------------------*/
/*  SURFACES
/*------------------------------------------*/

.bg-green {
  background-color: var(--spid-green);
}

/* Video poster overlay: the play button is a green PNG sprite in the template,
   so it is re-drawn here as a CSS disc to pick up the brand colour. */
.play-icon-green {
  background: var(--spid-orange) !important;
  border-radius: 50%;
  position: relative;
}

.play-icon-green:hover {
  background: var(--spid-orange-dark) !important;
}

.play-icon-green:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-42%, -50%);
  border-style: solid;
  border-width: 0.65em 0 0.65em 1.05em;
  border-color: transparent transparent transparent #fff;
}

/*------------------------------------------*/
/*  CAROUSEL DOTS
/*------------------------------------------*/

.no-bg.screens-section .slick-dots li button:hover:before,
.bg-lightgrey.screens-section .slick-dots li button:hover:before,
.no-bg.screens-section .slick-dots li.slick-active button:before,
.bg-lightgrey.screens-section .slick-dots li.slick-active button:before,
.reviews-section .slick-dots li.slick-active button:before {
  background: var(--spid-orange);
}

/*------------------------------------------*/
/*  FORMS
/*------------------------------------------*/

.form-control:focus,
.newsletter-form .form-control:focus,
.quick-form .form-control:focus {
  border-color: var(--spid-orange);
  box-shadow: none;
}

/*------------------------------------------*/
/*  "COMMENT ÇA MARCHE" STEPS
/*------------------------------------------*/

/* The template has no numbered-list style, so the counter is drawn here as a
   brand-coloured disc in the gutter. */
.steps-list {
  counter-reset: step;
  list-style: none;
  padding: 0;
  margin: 0 0 30px;
}

.steps-list li {
  counter-increment: step;
  position: relative;
  padding-left: 46px;
  margin-bottom: 18px;
  line-height: 1.6;
}

.steps-list li:before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--spid-orange);
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 30px;
  text-align: center;
}

/*------------------------------------------*/
/*  SERVICES GRID
/*------------------------------------------*/

/* The service blurbs are of uneven length, so the cards are stretched to the
   height of the tallest one on their row. `.row` is already a flex container
   (Bootstrap 4), so the columns line up by themselves; only the card inside
   each column needs to grow. */
.services-grid > div {
  display: flex;
}

.services-grid .fbox-3 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  flex: 1 1 auto;
}

/* Drops the paragraph's trailing margin so the card's bottom padding stays
   symmetric with the top once the box is stretched. */
.services-grid .fbox-3 p {
  margin-bottom: 0;
}

/*------------------------------------------*/
/*  SECTION TITLE SUBHEADING
/*------------------------------------------*/

/* The template's section title is h2 + p; the services block adds a tagline
   line between the two. */
.section-title h4 {
  margin-top: 18px;
  margin-bottom: 14px;
}

/*------------------------------------------*/
/*  HEADER + LOGO
/*------------------------------------------*/

/* The Spid mark is a square tile, not the template's 130x30 wordmark. The
   radius keeps the solid orange field from reading as a hard-edged sticker. */
.navbar-brand img {
  width: auto;
  height: 58px;
  border-radius: 14px;
}

.footer .footer-info img {
  width: auto;
  height: 56px;
  border-radius: 14px;
}

/*------------------------------------------*/
/*  CONTACT FORM SUCCESS STATE
/*------------------------------------------*/

.contact-form-msg .success {
  color: #2b9c74;
  font-size: 1.1rem;
  line-height: 1;
  font-weight: 600;
}