/* =====================================================================
   Agntix — Brochure Download sidebar widget
   ---------------------------------------------------------------------
   1:1 port of the `.tp-career-details-sidebar-box` component used by
   all-in-fabrics/blogs-details.html.

   The base rules live in the plugin's Elementor career widget
   (include/elementor/career/career.css), which only loads on pages that
   render a career widget — never on a blog sidebar. They are repeated
   here so the widget is self-contained and can be dropped into any
   sidebar without depending on another widget being present.

   Sources merged into this file:
   - main.css                 .tp-career-details-sidebar-*  (base + media queries)
   - ak-theme.css  §21e       heading colour routed to the brand dark green
   - main.css (dark)          .agntix-dark overrides already ship in the
                              theme's agntix-core.css, so they are NOT
                              duplicated here.

   Everything else the markup uses — .tp-btn-yellow-green, .d-flex,
   .align-items-center, .w-100, .text-center, .mt-20, .mb-25 — is already
   in the theme (agntix-core.css / bootstrap.css / spacing.css), which
   load site-wide.
   ===================================================================== */

.tp-career-details-sidebar-box {
  border-radius: 20px;
  border: 1px solid #F2F2F5;
  background: #F8F8FB;
  padding: 50px 40px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px), (max-width: 767px) {
  .tp-career-details-sidebar-box {
    padding: 50px 25px;
  }
}

/* ak-theme.css §21e — main.css hardcodes #111013 on these headings; route
   them through --tp-common-black (the brand dark green #2A4C3A on this
   site) so they match every other heading, with the original as fallback. */
.tp-career-details-sidebar-title {
  margin: 0;
  font-size: 26px;
  font-weight: 500;
  color: var(--tp-common-black, #111013);
  letter-spacing: -0.52px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px), (max-width: 767px) {
  .tp-career-details-sidebar-title {
    font-size: 24px;
  }
}

.tp-career-details-sidebar-heading {
  margin-bottom: 50px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px), (max-width: 767px) {
  .tp-career-details-sidebar-heading {
    margin-bottom: 40px;
  }
}

.tp-career-details-sidebar-heading span {
  font-size: 16px;
  font-weight: 400;
  color: #6B6C74;
  margin-bottom: 10px;
  display: inline-block;
}

.tp-career-details-sidebar-thumb img {
  width: 100%;
}

.tp-career-details-sidebar-item {
  margin-bottom: 30px;
}

.tp-career-details-sidebar-item-icon {
  margin-right: 12px;
}

.tp-career-details-sidebar-item-icon span {
  display: grid;
  height: 50px;
  width: 50px;
  place-content: center;
  border-radius: 50%;
  background: var(--tp-common-white);
  border: 1px solid rgba(17, 16, 19, 0.1);
}

.tp-career-details-sidebar-item-content span {
  font-size: 15px;
  font-weight: 400;
  color: #6B6C74;
  display: inline-block;
}

.tp-career-details-sidebar-item-content h5 {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  color: var(--tp-common-black, #111013);
  letter-spacing: -0.36px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px), (max-width: 767px) {
  .tp-career-details-sidebar-item-content h5 {
    font-size: 16px;
  }
}

.tp-career-details-sidebar-btn a {
  width: 100%;
  font-size: 20px;
  font-weight: 500;
  text-align: center;
  padding: 17px 30px;
  border-radius: 200px;
  display: inline-block;
  letter-spacing: -0.2px;
  background: #FF5722;
  color: var(--tp-common-white);
}

@media only screen and (min-width: 992px) and (max-width: 1199px), (max-width: 767px) {
  .tp-career-details-sidebar-btn a {
    font-size: 17px;
    padding: 14px 27px;
  }
}

.tp-career-details-sidebar-btn a:hover {
  background-color: #111013;
}

/* ---- widget-only touch-ups ---------------------------------------
   The static page hand-picked its copy to fit; a real editor can enter a
   long file name, so keep it inside the box instead of overflowing. */
.agntix-brochure-box .tp-career-details-sidebar-item-content {
  min-width: 0;
}

.agntix-brochure-box .tp-career-details-sidebar-item-content h5 {
  overflow-wrap: anywhere;
}

.agntix-brochure-box .tp-career-details-sidebar-item-icon {
  flex: 0 0 auto;
}

/* The icon SVG uses `stroke: currentcolor`, so it follows the box text
   colour on both light and dark. */
.agntix-brochure-box .tp-career-details-sidebar-item-icon span svg {
  color: var(--tp-common-black, #111013);
}