/*
 * TimePlus additions on top of the Cleanon template.
 *
 * Loaded last, after style.css and responsive.css. Keep this file small: it is
 * only for things the template has no styling for, not for restyling it.
 */

/* Form result messages. The template relied on a jQuery-validate `.result`
   div; the Vue forms render their own status line instead. */
.form-feedback {
  margin-top: 20px;
  margin-bottom: 0;
  padding: 12px 18px;
  border-radius: 6px;
  font-size: 15px;
  line-height: 1.5;
}

.form-feedback--ok {
  color: #0f5132;
  background-color: #d1e7dd;
  border: 1px solid #badbcc;
}

.form-feedback--error {
  color: #842029;
  background-color: #f8d7da;
  border: 1px solid #f5c2c7;
}

/* The template's buttons have no disabled state, but the forms disable them
   while a request is in flight. */
.thm-btn:disabled,
.thm-btn[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Images coming from the API vary in aspect ratio, unlike the template's
   pre-cropped demo files. Constrain them to the shape each card expects. */
.services-two__img img,
.blog-one__img > img,
.team-one__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* The active nav item needs no rule here: the template already styles
   `.main-menu .main-menu__list > li.current > a` for every header variant,
   and SiteHeader now binds that class. An earlier `.current-menu-item` rule
   here was standing in for a class the template never styles.
*/

/* ───────────────────────────────────────────────────────────────────────────
   Equal-height cards

   The template gives every card `display: block` with no height, so a card is
   exactly as tall as whatever is inside it. Its demo copy was written to
   matching lengths, which hid that; content from the admin varies, so cards in
   the same row came out ragged.

   Three things decide a card's height, so all three are pinned:

     1. the column stretches its card to the tallest in the row
     2. the image box keeps a fixed aspect ratio, so an upload of a different
        shape cannot change the card's height — the ratios below are the ones
        the template's own demo images use
     3. the title and body are clamped to a set number of lines, so height
        stops depending on how much was typed

   Only (1) and (3) are needed for equal height; (2) keeps the row from
   jumping when someone uploads a portrait photo into a landscape slot.
   ─────────────────────────────────────────────────────────────────────────── */

/* 1. Stretch. `tp-card-col` is on the grid column, never on a page-level
      layout column, so the sidebar and split sections are untouched. */
.tp-card-col {
  display: flex;
}

.tp-card-col > * {
  width: 100%;
}

/* 2. Image boxes, at the template's own ratios. The wrappers are
      `position: relative; overflow: hidden` with no height of their own, so
      setting a ratio here does not fight anything. */
.services-two__img { aspect-ratio: 276 / 230; }
.blog-two__img     { aspect-ratio: 410 / 270; }
.blog-three__img   { aspect-ratio: 380 / 280; }
.blog-one__img     { aspect-ratio: 590 / 260; }
.blog-one__img-two { aspect-ratio: 250 / 218; }
.team-one__img     { aspect-ratio: 300 / 380; }
.team-two__img     { aspect-ratio: 300 / 370; }
.sidebar-post__img { aspect-ratio: 350 / 140; }

.services-two__img > img,
.blog-two__img > img,
.blog-three__img > img,
.blog-one__img > img,
.blog-one__img-two > img,
.team-one__img > img,
.team-two__img > img,
.sidebar-post__img > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 3. Clamp the text that varies. `-webkit-line-clamp` is the only
      cross-browser way to do this and is supported everywhere current. */
.services-one__title,
.services-two__title,
.services-four__title,
.blog-one__title,
.blog-one__title-two,
.blog-two__title,
.blog-three__title,
.process-one__title,
.why-choose-two__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.services-one__text,
.services-two__text,
.services-four__text,
.blog-one__text,
.blog-two__text,
.process-one__text,
.why-choose-two__single-text {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* The small stacked cards beside the blog-one feature get less room. */
.blog-one__text-two {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Recent-post titles in the sidebar are already excerpted in the component;
   this stops a long unbroken word from pushing the row taller. */
.sidebar__post-content-box h3 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Names and roles are single-line by nature, but a long role should not wrap
   a team card taller than its neighbours. */
.team-one__name,
.team-one__sub-title,
.team-two__title,
.team-two__sub-title,
.who-we-serve__single-title {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Testimonials and project cards live in Swiper, which already equalises
   slide heights; only their copy needs bounding. */
.testimonial-one__text {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ───────────────────────────────────────────────────────────────────────────
   Form controls the template never styled

   Every input rule in the template is written
   `input[type="text"], input[type="email"]` (plus `number` on the contact
   page). Anything else falls through to the browser's own widget — which is
   why the phone, date and time fields rendered as white native boxes that
   broke out of their forms, and why the service dropdowns showed a native
   control instead of the themed one.

   The declarations below are copied from each form's own text/email rule, so
   the added types match it exactly rather than approximating it. Native
   selects are included: the template styles `.nice-select`, the markup that
   jquery.nice-select generates, but our selects carry `ignore` to keep that
   plugin away from them — it replaces the real <select>, which breaks
   v-model — so they need the same look applied directly.
   ─────────────────────────────────────────────────────────────────────────── */

/* from .who-we-serve__input-box input[type="text"] */
.who-we-serve__input-box input[type="tel"],
.who-we-serve__input-box input[type="number"],
.who-we-serve__input-box input[type="date"],
.who-we-serve__input-box input[type="time"],
.who-we-serve__input-box input[type="search"],
.who-we-serve__input-box input[type="url"],
.who-we-serve__input-box input[type="password"],
.who-we-serve__input-box select {
  height: 45px;
  width: 100%;
  border: 1px solid rgba(var(--cleanon-white-rgb), .30);
  background-color: transparent;
  padding-left: 20px;
  padding-right: 20px;
  outline: none;
  font-size: 14px;
  color: rgba(var(--cleanon-white-rgb), .60);
  display: block;
  font-weight: 400;
  line-height: 45px;
  border-radius: var(--cleanon-bdr-radius);
}

/* from .progress-one__input-box input[type="text"] */
.progress-one__input-box input[type="tel"],
.progress-one__input-box input[type="number"],
.progress-one__input-box input[type="date"],
.progress-one__input-box input[type="time"],
.progress-one__input-box input[type="search"],
.progress-one__input-box input[type="url"],
.progress-one__input-box input[type="password"],
.progress-one__input-box select {
  height: 50px;
  width: 100%;
  border: 1px solid rgba(var(--cleanon-white-rgb), .30);
  background-color: transparent;
  padding-left: 20px;
  padding-right: 20px;
  outline: none;
  font-size: 16px;
  color: rgba(var(--cleanon-white-rgb), .70);
  display: block;
  font-weight: 400;
  border-radius: var(--cleanon-bdr-radius);
}

/* from .contact-one__input-box input[type="text"] */
.contact-one__input-box input[type="tel"],
.contact-one__input-box input[type="number"],
.contact-one__input-box input[type="date"],
.contact-one__input-box input[type="time"],
.contact-one__input-box input[type="search"],
.contact-one__input-box input[type="url"],
.contact-one__input-box input[type="password"],
.contact-one__input-box select {
  height: 58px;
  width: 100%;
  background-color: transparent;
  border: 1px solid rgba(var(--cleanon-white-rgb), 0.45);
  padding-left: 30px;
  padding-right: 30px;
  outline: none;
  font-size: 16px;
  color: rgba(var(--cleanon-white-rgb), .60);
  display: block;
  font-weight: 400;
  border-radius: 10px;
  line-height: 58px;
}

/* from .contact-page__input-box input[type="text"] */
.contact-page__input-box input[type="tel"],
.contact-page__input-box input[type="number"],
.contact-page__input-box input[type="date"],
.contact-page__input-box input[type="time"],
.contact-page__input-box input[type="search"],
.contact-page__input-box input[type="url"],
.contact-page__input-box input[type="password"],
.contact-page__input-box select {
  height: 57px;
  width: 100%;
  background-color: rgba(var(--cleanon-white-rgb), 0.03);
  border: 1px solid rgba(var(--cleanon-white-rgb), .10);
  padding-left: 20px;
  padding-right: 20px;
  outline: none;
  font-size: 16px;
  font-weight: 400;
  color: rgba(var(--cleanon-primary-rgb), .60);
  display: block;
  border-radius: var(--cleanon-bdr-radius);
}

/* from .comment-form__input-box input[type="text"] */
.comment-form__input-box input[type="tel"],
.comment-form__input-box input[type="number"],
.comment-form__input-box input[type="date"],
.comment-form__input-box input[type="time"],
.comment-form__input-box input[type="search"],
.comment-form__input-box input[type="url"],
.comment-form__input-box input[type="password"],
.comment-form__input-box select {
  height: 60px;
  width: 100%;
  border-radius: var(--cleanon-bdr-radius);
  background-color: var(--cleanon-white);
  border: none;
  padding-left: 20px;
  padding-right: 20px;
  outline: none;
  font-size: 16px;
  font-weight: 400;
  color: var(--cleanon-gray);
  display: block;
}
/* A native select still draws the OS widget on top of the rule above, so the
   chevron is suppressed and redrawn to match the template's `.nice-select`
   arrow — a rotated border box in the same position. */
.who-we-serve__input-box select,
.progress-one__input-box select,
.contact-one__input-box select,
.contact-page__input-box select,
.comment-form__input-box select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* Room for the chevron so a long option label never runs under it. */
  padding-right: 42px;
  cursor: pointer;
}

.who-we-serve__input-box .select-box,
.progress-one__input-box .select-box,
.contact-one__input-box .select-box,
.contact-page__input-box .select-box {
  position: relative;
}

.who-we-serve__input-box .select-box::after,
.progress-one__input-box .select-box::after,
.contact-one__input-box .select-box::after,
.contact-page__input-box .select-box::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 22px;
  width: 7px;
  height: 7px;
  margin-top: -5px;
  border-bottom: 2px solid rgba(var(--cleanon-white-rgb), .8);
  border-right: 2px solid rgba(var(--cleanon-white-rgb), .8);
  transform: rotate(45deg);
  pointer-events: none;
}

/* These four forms sit on a dark panel. `color-scheme` is what tells the
   browser to draw its own date and time widgets — the picker, the spinners
   and the calendar icon — for a dark surface; without it they render as dark
   glyphs on a dark background and effectively disappear. */
.who-we-serve__form,
.progress-one__form,
.contact-one__form,
.contact-page__form {
  color-scheme: dark;
}

/* Safari and Chrome paint an autofilled field with their own near-white
   background and black text, which is what made the phone field a white slab.
   There is no way to set the background directly, so it is covered with an
   inset shadow and the text colour is forced. */
.who-we-serve__input-box input:-webkit-autofill,
.progress-one__input-box input:-webkit-autofill,
.contact-one__input-box input:-webkit-autofill,
.contact-page__input-box input:-webkit-autofill,
.who-we-serve__input-box input:-webkit-autofill:focus,
.progress-one__input-box input:-webkit-autofill:focus,
.contact-one__input-box input:-webkit-autofill:focus,
.contact-page__input-box input:-webkit-autofill:focus {
  -webkit-box-shadow: inset 0 0 0 1000px var(--cleanon-black) !important;
  -webkit-text-fill-color: rgba(var(--cleanon-white-rgb), .8) !important;
  caret-color: rgba(var(--cleanon-white-rgb), .8);
  transition: background-color 9999s ease-in-out 0s;
}

.comment-form__input-box input:-webkit-autofill,
.comment-form__input-box input:-webkit-autofill:focus {
  -webkit-box-shadow: inset 0 0 0 1000px var(--cleanon-white) !important;
  -webkit-text-fill-color: var(--cleanon-gray) !important;
}

/* The template's rules set width:100% but not box-sizing, so the 20–30px of
   horizontal padding was added on top of the full column width and pushed the
   field past its card. Native widgets also carry a UA min-width that ignores
   width:100%, which is what let the phone and date fields overlap the field
   beside them. */
.who-we-serve__input-box input,
.who-we-serve__input-box select,
.who-we-serve__input-box textarea,
.progress-one__input-box input,
.progress-one__input-box select,
.progress-one__input-box textarea,
.contact-one__input-box input,
.contact-one__input-box select,
.contact-one__input-box textarea,
.contact-page__input-box input,
.contact-page__input-box select,
.contact-page__input-box textarea,
.comment-form__input-box input,
.comment-form__input-box select,
.comment-form__input-box textarea {
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
}

/* Date and time inputs centre their value vertically in Safari only if the
   line-height does not fight the fixed height the template sets. */
.who-we-serve__input-box input[type="date"],
.who-we-serve__input-box input[type="time"],
.progress-one__input-box input[type="date"],
.progress-one__input-box input[type="time"],
.contact-one__input-box input[type="date"],
.contact-one__input-box input[type="time"] {
  line-height: normal;
}

/* Placeholders inherit the field colour but browsers dim them further; match
   the template, which styles its placeholders at the same opacity as text. */
.who-we-serve__input-box ::placeholder,
.progress-one__input-box ::placeholder,
.contact-one__input-box ::placeholder,
.contact-page__input-box ::placeholder {
  color: inherit;
  opacity: 1;
}

/* ───────────────────────────────────────────────────────────────────────────
   Stretch the panel that is actually visible

   Making the card element equal height is not enough on its own. On several
   of these cards the outer element is transparent and the panel you can see
   is a child: `.blog-two__single` has no background, and the white box is
   `.blog-two__content`. Stretching only the outer element left the visible
   panels ragged — measured at 352/320/352px on the blog listing — even though
   the cards around them were identical.

   So the card becomes a flex column and the content pane grows to fill it.
   The footer row is then pushed to the bottom with `margin-top: auto`, which
   is what lines the author and the read-more arrow up across a row instead of
   leaving them wherever the text happened to end.
   ─────────────────────────────────────────────────────────────────────────── */

.blog-two__single,
.blog-three__single,
.services-two__single,
.services-four__single,
.services-one__single,
.team-one__single,
.team-two__single {
  display: flex;
  flex-direction: column;
}

.blog-two__content,
.blog-three__content,
.services-two__content,
.services-four__content,
.services-one__content,
.team-one__content,
.team-two__content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

/* The row each card ends on, pinned to the bottom of the pane. */
.blog-two__author-and-read-more,
.blog-three__author-and-btn,
.services-two__btn-box,
.services-four__read-more,
.services-one__read-more {
  margin-top: auto;
}

/* The image box must keep its own height rather than being stretched as a
   flex item, or the aspect ratio set earlier would be overridden. */
.blog-two__img-box,
.blog-three__img,
.services-two__img-box,
.team-one__img-box,
.team-two__img-box {
  flex: 0 0 auto;
}

/* blog-one (index.html's blog band) is asymmetric on purpose: one tall card
   in the left column, two stacked in the right. Equal height here means the
   feature card fills its column and the two stacked cards split theirs
   evenly, so the three line up as one block rather than three loose boxes.
   Their content panes stretch for the same reason as the other cards — the
   panel you see is the child, not the column. */
.blog-one .row > [class*="col-xl-6"] {
  display: flex;
  flex-direction: column;
}

.blog-one__single {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

/* The stacked card is already a horizontal flex row in the template — image
   on the left at max-width 250px, content beside it at flex:1 — so it only
   needs a share of the column's height, never a direction change. Setting
   flex-direction:column here stacked the image above the text. */
.blog-one__single-two {
  flex: 1 1 0;
}

/* Only the feature card's pane is a column, so its button can sit under the
   text. The stacked card's pane keeps the template's `flex: 1`, which is its
   width in the row. */
.blog-one__content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

.blog-one__img,
.blog-one__img-two {
  flex: 0 0 auto;
}

/* The stacked card's image keeps the template's cap; the ratio above then
   fixes its height so both cards' images match. */
.blog-one__img-two > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Give the clamped text a fixed number of lines, not just a maximum.
 *
 * `-webkit-line-clamp` caps how tall a title can get but does nothing when it
 * is shorter, so a one-line title still produces a shorter card than a
 * two-line one. That is invisible while the row has spare height to
 * distribute — the flex rules above absorb it — but at mobile widths the
 * columns stack, the container height becomes the content height, there is no
 * free space, and the difference shows. It measured 301 vs 331px on the home
 * blog band at 390px.
 *
 * `min-height` in `lh` units (one line box) pins the slot to exactly the
 * clamp count, so every card reserves the same space whatever was typed.
 * Browsers without `lh` ignore the rule and fall back to the clamp alone.
 */
.services-one__title,
.services-two__title,
.services-four__title,
.blog-one__title,
.blog-one__title-two,
.blog-two__title,
.blog-three__title,
.process-one__title,
.why-choose-two__title {
  min-height: 2lh;
}

.services-one__text,
.services-two__text,
.services-four__text,
.blog-one__text,
.blog-two__text,
.process-one__text,
.why-choose-two__single-text {
  min-height: 3lh;
}

.blog-one__text-two {
  min-height: 2lh;
}

/* Inner-page banner spacing, now that one header serves every page.
   `main-header-three` is `position: relative`, so it takes its own space,
   while the template's inner-page header was absolute and overlaid the
   banner. Its `page-header__inner` padding-top therefore included the
   header: 331px = the header's 170px bottom edge + a 161px visual gap
   (191px = 100px + 91px on mobile). With nothing overlapping any more, the
   padding is just the visual gap, which keeps the banner looking as it did. */
.page-header__inner {
  padding-top: 161px;
}

@media only screen and (max-width: 767px) {
  .page-header__inner {
    padding-top: 91px;
  }
}