/* Utility classes to replace inline styles in front-page.php */

/* Layout and sizing */
.w-100 {
  width: 100%;
}
.w-35p {
  width: 35%;
}
.w-40p {
  width: 40%;
}
.w-45p {
  width: 45%;
}
.w-60p {
  width: 60%;
}
.w-55p {
  width: 55%;
}
.w-65p {
  width: 65%;
}
.w-90p {
  width: 90%;
}
.w-10p {
  width: 10%;
}
.w-98 {
  width: 98%;
}
.maxw-100 {
  max-width: 100%;
}
.maxw-1300 {
  max-width: 1300px;
}
.maxw-1400 {
  max-width: 1400px;
}
.maxw-1100 {
  max-width: 1100px;
}
.maxw-250 {
  max-width: 250px;
}
.maxw-400 {
  max-width: 400px;
}
.mw-auto {
  max-width: none;
}

/* Text alignment */
.ta-left {
  text-align: left;
}
.ta-center {
  text-align: center;
}
.ta-right {
  text-align: right;
}

/* Display and float */
.d-block {
  display: block;
}
.d-none {
  display: none;
}
.fl {
  float: left;
}
.fr {
  float: right;
}

/* Spacing */
.m-0 {
  margin: 0;
}
.m-auto {
  margin: 0 auto;
}
.m-5 {
  margin: 5px;
}
.m-15 {
  margin: 15px;
}
.mt-10 {
  margin-top: 10px;
}
.mt-5 {
  margin-top: 5px;
}
.mt-15 {
  margin-top: 15px;
}
.mt-20 {
  margin-top: 20px;
}
.mt-30 {
  margin-top: 30px;
}
.mt-50 {
  margin-top: 50px;
}
.mt-40 {
  margin-top: 40px;
}
.mt-60 {
  margin-top: 60px;
}
.mt-100 {
  margin-top: 100px;
}
.mt-150 {
  margin-top: 36px;
}
.mt-80 {
  margin-top: 80px;
}
.mb-0 {
  margin-bottom: 0;
}

.p-0 {
  padding: 0;
}
.p-5 {
  padding: 5px;
}
.p-10 {
  padding: 10px;
}
.p-20 {
  padding: 20px;
}
.p-40 {
  padding: 40px;
}
.py-5 {
  padding-top: 5px;
  padding-bottom: 5px;
}
.px-5 {
  padding-left: 5px;
  padding-right: 5px;
}
.py-2 {
  padding-top: 2px;
  padding-bottom: 2px;
}
.px-2 {
  padding-left: 2px;
  padding-right: 2px;
}
.px-0 {
  padding-left: 0;
  padding-right: 0;
}

/* Box */
.bb {
  box-sizing: border-box;
}
.pos-rel {
  position: relative;
}
.h-1 {
  height: 1px;
}
/* Borders */
.bt-1-primary {
  border-top: 1px solid #0070be;
}
.bb-1-black {
  border-bottom: 1px solid #000000;
}

/* Colors and backgrounds */
.c-black {
  color: #000000;
}
.c-333 {
  color: #333333;
}
.c-blue-light {
  color: #64b9e9;
}
.c-e0fee1 {
  color: #333;
}
.bg-faf7f1 {
  background-color: #fff;
}
.bg-64b9e9 {
  background-color: #ebf5ff;
}
.bg-primary {
  background-color: #0070be;
}

/* Typography */
.fs-12 {
  font-size: 12px;
}
.fs-14 {
  font-size: 14px;
}
.fs-16 {
  font-size: 16px;
  color: #333333;
}
.fs-18 {
  font-size: 18px;
}
.fs-24 {
  font-size: 24px;
}
.fs-20 {
  font-size: 20px;
}
.fs-30 {
  font-size: 30px;
}
.fs-40 {
  font-size: 40px;
}
.lh-20 {
  line-height: 20px;
}
.lh-2-0 {
  line-height: 2;
}
.lh-1-3 {
  line-height: 1.3;
}

/* Font weight */
.fw-bold {
  font-weight: bold;
}

/* Components */
.label-badge {
  display: inline-block;
  padding: 5px 15px;
  color: #ffffff;
  background-color: #0070be;
  border-radius: 0;
  font-size: 12px;
  margin: 0;
  box-sizing: border-box;
}

/* News cover background helpers (moved from inline styles) */
.bg-news-2976 {
  background-image: url("https://ph-karin.com/wp-content/uploads/2024/05/ab7e356b5389b1580715b9fb08554d45-300x237.png");
}
.bg-news-top {
  background-image: url("../img/top_news_bg.webp");
}
.bg-news-2957 {
  background-image: url("https://ph-karin.com/wp-content/uploads/2024/12/470bed31c9e77bb63cb2f01553480299-300x167.png");
}