/* Fortified — Tint/trx_addons Elementor widget styling (skin layer).
 *
 * The site's Elementor pages use trx_addons widgets (counters, section titles,
 * buttons, portfolio carousel, icon lists, tables). The trx_addons PLUGIN (kept
 * active) provides their markup + mechanics (swiper, odometer, column grid, icon
 * font), but the *skin* — typography, colors, sizing — came from the Tint THEME's
 * CSS, which this lightweight theme doesn't load. Without it those widgets render
 * unstyled. These rules reproduce the Tint skin layer (values sampled from live
 * fortified.com.sg) so the pages keep their look after the theme switch.
 *
 * NOTE: written from the live computed styles and not yet verified against real
 * content on local (local pages are out of date). Verify on staging/production.
 *
 * Palette: red #D82C2B · ink #171616 · body text #797C7F
 */

/* ── trx_sc_title — section eyebrow (small uppercase) + heading ─────────────── */
.sc_item_subtitle {
  font-size: 14px;
  font-weight: 700;
  line-height: 18px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: #171616;
  margin: 0 0 20px;
}
.sc_item_title.sc_title_title,
.sc_title .sc_item_title {
  font-size: 47px;
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -1.4px;
  color: #171616;
  margin: 0;
}

/* ── trx_sc_button — solid red button ──────────────────────────────────────── */
.sc_button,
a.sc_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  line-height: 21px;
  color: #fff;
  background-color: #D82C2B;
  border: none;
  border-radius: 0;
  padding: 19px 42px;
  transition: background-color 0.2s ease;
}
.sc_button:hover,
a.sc_button:hover {
  background-color: #B9241F;
  color: #fff;
}

/* ── trx_sc_skills — odometer counters (column grid + odometer from plugin) ──── */
.sc_skills.sc_align_center { text-align: center; }
.sc_skills_total {
  font-size: 61px;
  font-weight: 700;
  line-height: 1;
  color: #171616;
}
.sc_skills_item_title {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
  color: #171616;
  margin: 0 0 8px;
}

/* ── trx_sc_portfolio + slider controls ────────────────────────────────────── */
.sc_portfolio_item_title,
.sc_portfolio_item .post_title {
  font-size: 22.6px;
  font-weight: 700;
  line-height: 1.2;
  color: #171616;
}
.slider_controls .slider_prev,
.slider_controls .slider_next,
.sc_slider_controls a {
  color: #797C7F;
  transition: color 0.2s ease;
}
.slider_controls .slider_prev:hover,
.slider_controls .slider_next:hover,
.sc_slider_controls a:hover {
  color: #D82C2B;
}

/* ── trx_sc_icons — contact info list (icon + text rows) ───────────────────── */
.sc_icons_item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 16px;
}
.sc_icons_icon {
  flex: 0 0 auto;
  width: 27px;
  font-size: 17px;
  color: #D82C2B;
  line-height: 1.6;
}
.sc_icons_item_description,
.sc_icons_item_description span,
.sc_icons_item_subtitle {
  font-size: 17px;
  color: #797C7F;
  line-height: 1.7;
}
.sc_icons_item_linked:hover .sc_icons_item_description span { color: #D82C2B; }

/* ── trx_sc_table — striped table (header uses inline bg/color in content) ───── */
.sc_table table {
  width: 100%;
  border-collapse: collapse;
}
.sc_table td {
  padding: 16px 13px;
  font-size: 16px;
  line-height: 1.6;
  color: #797C7F;
}
.sc_table .responsive-table-striped tr:nth-child(even) td {
  background: #fff;
}

/* ── trx_widget_slider — swiper arrows. Layout + base come from the plugin; this
   only sets on-brand colours (live showed an off-brand navy icon; normalised to
   ink + red-on-hover). The slides themselves are plugin/swiper-driven. ────────── */
.widget_slider .slider_prev,
.widget_slider .slider_next,
.sc_widget_slider .swiper-button-prev,
.sc_widget_slider .swiper-button-next {
  color: #171616;
  background-color: #F1F2F4;
  transition: color 0.2s ease, background-color 0.2s ease;
}
.widget_slider .slider_prev:hover,
.widget_slider .slider_next:hover,
.sc_widget_slider .swiper-button-prev:hover,
.sc_widget_slider .swiper-button-next:hover {
  color: #fff;
  background-color: #D82C2B;
}