/* Platinum Pets Transport custom overrides (loaded after custom.css) */

/* Logo badge, matching the design reference: logo inside a white rounded card */
.navbar-brand{
  background:#ffffff;
  padding:16px 30px;
  border-radius:12px;
  box-shadow:0 8px 24px rgba(0,0,0,.12);
  display:inline-flex;
  align-items:center;
  line-height:0;
}
.navbar-brand img{
  width:180px;      /* overrides the inline width="200" */
  height:auto;
}

@media (max-width:768px){
  .navbar-brand{ padding:12px 20px; }
  .navbar-brand img{ width:150px; }
}

/* ---- Focus states ----
   No glow rings anywhere: inputs take a border colour on focus, buttons take a
   background change. Form fields use a 6px radius; the theme's pill-shaped CTA
   buttons are left as the design intends. */
input:focus,
textarea:focus,
select:focus,
.form-control:focus{
  outline: none;
  box-shadow: none;
  border-color: var(--primary-color);
}
button:focus,
button:focus-visible,
a:focus,
a:focus-visible,
.btn-default:focus,
.newsletter-btn:focus{
  outline: none;
  box-shadow: none;
}
/* Keyboard focus has to be visible: the rules above strip the browser default
   from every link and button, and brightness alone is a colour-only cue that
   disappears on a dark or busy background. :focus-visible means a mouse click
   still looks clean. */
button:focus-visible,
a:focus-visible,
.btn-default:focus-visible,
.newsletter-btn:focus-visible{
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}
button:focus-visible{
  filter: brightness(0.94);
}
/* The theme sets 10px on its own form selectors, which are more specific than
   a bare element rule, hence !important here. This file exists to override the
   purchased theme, and the scope is deliberately limited to form controls. */
input,
textarea,
select,
.form-control,
.form-group input,
.form-group textarea,
.contact-form input,
.contact-form textarea{
  border-radius: 6px !important;
}
input:focus,
textarea:focus,
select:focus,
.form-control:focus,
.form-group input:focus,
.form-group textarea:focus,
.contact-form input:focus,
.contact-form textarea:focus{
  border-color: var(--primary-color) !important;
  box-shadow: none !important;
  outline: none !important;
}

/* ---- Reviews ----
   The section at the foot of the home page, built from the reviews an admin has
   published. Written here rather than borrowing the theme's testimonial slider:
   that markup is a swiper with a fixed photo panel beside it, and a section that
   holds anywhere between one review and twelve wants a grid that simply wraps.
   Everything below takes its colours from the theme variables, so a palette
   change reaches it too. */
.our-reviews{
  padding: 100px 0;
  background-color: var(--secondary-color);
}
.our-reviews .section-title{
  margin-bottom: 50px;
}
/* A grid rather than the theme's twelve columns. Bootstrap columns fill from
   the left, so the first published review sat alone against the left edge of a
   wide empty row and read as a layout that had lost the other two. Tracks that
   size themselves and a centred row mean one review is a centred card, two are
   a centred pair, and three fill the width, with no count-specific rules.
   The min() keeps the track from outgrowing a narrow phone, which a bare 300px
   minimum would do. */
.reviews-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 380px));
  justify-content: center;
  gap: 30px;
}
.review-item{
  /* the padding is a variable so the full-bleed photo below can cancel it out
     without the two drifting apart when one of them changes */
  --review-pad: 28px;
  display: flex;
  flex-direction: column;
  /* Natural height, not stretched to match the row. Once a card can carry a
     photograph, forcing a card without one to the same height leaves a void
     the size of the missing picture, which reads as an image that failed to
     load rather than a review that never had one. */
  align-self: start;
  padding: var(--review-pad);
  overflow: hidden;
  border: 1px solid var(--divider-color);
  border-radius: 16px;
  background-color: var(--white-color);
  box-shadow: 0 1px 2px rgba(16, 75, 90, .04);
  transition: transform .3s ease, box-shadow .3s ease;
}
.review-item:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(16, 75, 90, .10);
}
/* flex rather than the theme's inline icons, so the gap between stars is a gap
   and not letter-spacing hanging off the last one. The padding is what keeps
   the row from sitting tight against the bottom edge of the photograph. */
.review-rating{
  display: flex;
  gap: 6px;
  padding: 6px 0 4px;
  margin-bottom: 14px;
  font-size: 14px;
  color: var(--accent-color);
}
/* the quote takes the slack under a photograph, so the name and date sit on the
   bottom edge of the card rather than floating under a short line */
.review-content{
  flex: 1 1 auto;
}
.review-content p{
  margin-bottom: 0;
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-color);
  /* A long review is cut off at seven lines rather than allowed to run a card
     to twice the height of the ones beside it. The full text is on the
     paragraph's title attribute, so hovering it shows the rest. */
  display: -webkit-box;
  -webkit-line-clamp: 7;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* The quotation marks are typography, not part of what the customer wrote, so
   they live here rather than in the admin's text: proper curly marks, and none
   left stranded in the database if the quoting ever changes. */
.review-content p::before{ content: "\201C"; }
.review-content p::after{ content: "\201D"; }
/* The customer's photograph, running to the card edges: it cancels the card's
   own padding rather than sitting inside it, so the picture is as wide as the
   card allows. */
.review-photo{
  display: block;
  width: calc(100% + var(--review-pad) * 2);
  /* the theme sets img{max-width:100%} globally, which clamps the width above
     back to the card's content box and leaves the picture short of one edge */
  max-width: none;
  margin: calc(var(--review-pad) * -1) calc(var(--review-pad) * -1) 18px;
  /* A height rather than a ratio: a portrait snapshot at 4:3 still came out
     taller than the words underneath it and pushed the name off the bottom of
     the card. Fixed and covered, every photograph is the same band across the
     top of its card whatever shape it arrived in. */
  height: 230px;
  object-fit: cover;
  background-color: var(--secondary-color);
}
/* Who said it on the left, when on the right, sharing a baseline: the date was
   a third stacked line that pushed the card taller for six characters. */
.review-author{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--divider-color);
}
.review-author h3{
  margin-bottom: 3px;
  font-size: 17px;
  line-height: 1.3;
}
.review-author p{
  margin-bottom: 0;
  font-size: 13px;
}
.review-date{
  flex: none;
  font-size: 12px;
  opacity: .65;
  /* a wrapped date would drop below the name it is meant to sit beside */
  white-space: nowrap;
}

@media (max-width: 768px){
  .our-reviews{ padding: 60px 0; }
  .our-reviews .section-title{ margin-bottom: 34px; }
  .reviews-grid{ gap: 24px; }
  /* the variable, not the padding, so the photo's negative margin follows it */
  .review-item{ --review-pad: 24px; }
  .review-photo{ height: 200px; }
}