/*=================================================
  KR Info Solutions — contact.html stylesheet
  Rebuild of https://krinfosolutions.com/contact-us/

  Loaded AFTER css/style.css, which supplies the shared design
  tokens, reset, container, header, nav, footer and buttons.
  Prefix: .ct-

  ⚠ CORRECTION TO SITE-STRUCTURE.md — the live contact page DOES
  carry a form. The earlier analysis recorded "no forms on any page";
  that was wrong. The form is a MetForm widget rendered from a nested
  Elementor template (post-967), which is why a plain fetch of the page
  body missed it. Fields, labels, placeholders, the 16 Services options
  and the submit-button styling below were all read out of that widget's
  settings JSON and post-5580.css.

  Values marked (live) came off the live CSS. A few properties the live
  sheet never sets — input border colour, the info-card icon treatment —
  are marked (fill) and use the site's own tokens; check them during the
  pixel-comparison pass.
=================================================*/

/* NOTE: the theme's empty `.breadcumb-wrapper` band above the hero is
   omitted here as on every other inner page (client, 2026-07-27). */

/* ---------- Page hero ---------- (live: min-height 400/300/280) */
.ct-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  padding: 40px 0;
  background-image: url("../assets/images/bg2.png");
  background-position: bottom center;
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
}
.ct-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--black-color);
  opacity: 0.5;
}
.ct-hero .container { position: relative; z-index: 2; }
.ct-hero-title {
  font-family: var(--body-font);
  font-size: 60px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--white-color);
  text-align: center;
  margin: 0 0 10px 0;
}
.ct-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0;
}
.ct-breadcrumb li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  color: var(--white-color);
}
.ct-breadcrumb a { color: var(--white-color); }
.ct-breadcrumb a:hover { color: var(--accent-orange); }
.ct-breadcrumb .sep {
  width: 14px;
  height: 14px;
  flex: none;
  color: var(--accent-orange);
}

/* ---------- Section rhythm ----------
   Same 80px run-in/run-out as the product and projects pages. */
.ct-sec { padding: calc(var(--inner-section-space) * 2) 0; }

/* ---------- "Join Us!!!" + enquiry form section ----------
   The leaf, phone and dotted-circuit artwork are NOT separate vector layers —
   live paints them with ONE background image on the section container
   (`cbcf9c2`), over a #F5F5F5 base:
     background: #F5F5F5 url(contact_bg_1.png) center/cover no-repeat;
   Keeps its own top padding (the info-card section above sits on white, so
   the two must not be collapsed together). */
#contact-form {
  background-color: var(--smoke-color);
  background-image: url("../assets/images/contact_bg_1.png");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
/* Live left-aligns this title block (centred only on mobile). */
#contact-form .title-area { text-align: left; }
.ct-join-desc {
  max-width: 740px;
  margin: 0 0 40px 0;
}

/* ---------- Info cards ----------
   Exact values from the live page CSS. NOTE: these live in `post-967.css`,
   not `post-5580.css` — the contact page renders two Elementor documents and
   the card widgets belong to 967. An earlier note here said the values were
   unavailable; they were simply in the other file.

   Each card is a shadowed rounded box. The icon is an ORANGE ROUNDED SQUARE
   (widget container: `background-color:#F05C1F; padding:10px; border-radius:10px`)
   wrapping a `elementor-view-framed elementor-shape-circle` icon — a circle
   with a white border and white glyph at 30px. Reproduced without extra
   markup by framing the <svg> itself. */
.ct-info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.ct-info-card {
  text-align: center;
  background-color: var(--white-color);
  border-radius: 10px;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
  padding: 30px 25px;
}
/* the orange rounded square */
.ct-info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  margin: 0 auto 24px auto;
  background-color: var(--btn-orange);
  border-radius: 10px;
  color: var(--white-color);
}
/* the framed white circle inside it */
.ct-info-icon svg {
  width: 30px;
  height: 30px;
  box-sizing: content-box;
  padding: 15px;
  border: 3px solid var(--white-color);
  border-radius: 50%;
}
.ct-info-title {
  font-family: var(--body-font);
  font-size: 25px;
  font-weight: 600;
  color: #09232F;
  margin: 0 0 12px 0;
}
.ct-info-text { margin: 0; }
/* links keep the theme colour on live, not the body grey */
.ct-info-text a {
  display: block;
  color: var(--theme-color);
  line-height: 1.9;
}
.ct-info-text a:hover { color: var(--accent-orange); }

/* ---------- Contact form ----------
   Live heading pair (live: post-5580):
     "Your Details"  IBM Plex Sans 26px/700, line-height 34px, #0D1427
     sub-line        IBM Plex Sans 16px/400, line-height 21px, #54565C
   IBM Plex Sans is not one of the site's two fonts — the MetForm template
   pulls it in on this page only, so contact.html loads it in <head>. */
.ct-form-wrap {
  max-width: 860px;
  margin: 0 auto;
}
.ct-form-title {
  font-family: "IBM Plex Sans", var(--body-font), sans-serif;
  font-size: 26px;
  font-weight: 700;
  line-height: 34px;
  color: #0d1427;
  margin: 0 0 6px 0;
}
.ct-form-sub {
  font-family: "IBM Plex Sans", var(--body-font), sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 21px;
  color: #54565c;
  margin: 0 0 24px 0;
}
.ct-form-divider {
  height: 1px;
  background-color: var(--th-border-color);
  border: 0;
  margin: 0 0 30px 0;
}

.ct-form-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.ct-field { margin-bottom: 20px; }
.ct-field--full { grid-column: 1 / -1; }

/* live: display:block; #0D1427; IBM Plex Sans 16px/500; lh 21px; 0 0 7px */
.ct-label {
  display: block;
  color: #0d1427;
  font-family: "IBM Plex Sans", var(--body-font), sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 21px;
  margin: 0 0 7px 0;
}
.ct-label .req { color: #f00; } /* live */

/* live: padding 15px 24px 17px 24px; border-radius 6px.
   (fill: live never declares the border colour — the theme border token
   is used so it matches the rest of the site.) */
.ct-input,
.ct-select,
.ct-textarea {
  width: 100%;
  padding: 15px 24px 17px 24px;
  border: 1px solid var(--th-border-color);
  border-radius: 6px;
  font-family: var(--body-font);
  font-size: 16px;
  color: var(--title-color);
  background-color: var(--white-color);
  transition: border-color 0.3s ease;
}
.ct-input:focus,
.ct-select:focus,
.ct-textarea:focus {
  outline: none;
  border-color: var(--theme-color);
}
.ct-input::placeholder,
.ct-textarea::placeholder { color: var(--light-color); }
/* live gives the select 0 vertical padding and the textarea square corners */
.ct-select {
  padding: 0 24px;
  height: 56px;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512' fill='%2372849B'%3E%3Cpath d='M137.4 374.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8L32 192c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 20px center;
  background-size: 12px;
  padding-right: 48px;
}
.ct-textarea {
  border-radius: 0; /* live */
  min-height: 150px;
  resize: vertical;
}

/* live: #FF712D; padding 17px 28px 16px 28px; Roboto 14px/500;
   line-height 11px; #FFF; no border; radius 8px */
.ct-submit {
  display: inline-block;
  background-color: #ff712d;
  padding: 17px 28px 16px 28px;
  font-family: var(--body-font);
  font-size: 14px;
  font-weight: 500;
  line-height: 11px;
  color: var(--white-color);
  border: 0;
  border-radius: 8px;
  transition: background-color 0.3s ease;
}
.ct-submit:hover { background-color: var(--theme-color); }

/* Spam trap — must stay invisible to people and reachable to bots. */
.ct-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Status banner shown after php/contact.php redirects back. */
.ct-alert {
  display: none;
  padding: 16px 20px;
  border-radius: 6px;
  margin: 0 0 24px 0;
  font-size: 15px;
}
.ct-alert.is-shown { display: block; }
.ct-alert--ok {
  background-color: #e8f6ec;
  border: 1px solid var(--success-color);
  color: #1c6b30;
}
.ct-alert--err {
  background-color: #fdeaec;
  border: 1px solid var(--error-color);
  color: #96222d;
}

/* ---------- Map ----------
   Live embeds a Google Maps iframe with no explicit height, so it falls
   back to the widget default. (fill: 450px, a standard embed height.) */
.ct-map { line-height: 0; }
.ct-map iframe {
  width: 100%;
  height: 450px;
  border: 0;
  display: block;
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .ct-hero { min-height: 300px; }
  /* Tablet keeps the desktop 3-across layout (client, 2026-07-28) — the
     cards used to stack to one column from 991px down. Three cards in a
     ~744px container leaves each about 230px, so the gap and the inner
     padding are pulled in to stop the long office address from crowding
     the card edges. Column count itself is unchanged. */
  .ct-info-grid { gap: 16px; }
  .ct-info-card { padding: 26px 16px; }
  .ct-info-title { font-size: 21px; }
  .ct-info-text a { font-size: 15px; }
}
@media (max-width: 991px) {
  /* live centres the Join Us title block at mobile */
  #contact-form .title-area { text-align: center; }
  .ct-join-desc { margin-left: auto; margin-right: auto; }
}
@media (max-width: 767px) {
  .ct-hero { min-height: 280px; }
  .ct-hero-title { font-size: 40px; }
  /* Stack only once we are genuinely on a phone. */
  .ct-info-grid { grid-template-columns: 1fr; gap: 40px; }
  .ct-info-card { padding: 30px 25px; }
  .ct-info-title { font-size: 25px; }
  .ct-info-text a { font-size: 16px; }
  .ct-form-row { grid-template-columns: 1fr; }
  .ct-map iframe { height: 320px; }
}