/* AKP modern theme, loaded after style.css */

:root {
  --akp-blue: #1d4ed8;
  --akp-blue-dark: #1e3a8a;
  --akp-red: #e11d2e;
  --ink: #0f172a;
  --text: #1f2937;
  --muted: #64748b;
  --line: #e5e7eb;
  --bg: #f3f5f9;
  --card: #ffffff;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 4px 16px rgba(15, 23, 42, .06);
  --shadow-hover: 0 2px 4px rgba(15, 23, 42, .06), 0 12px 28px rgba(15, 23, 42, .10);
  /* Latin first for English/French pages; Khmer glyphs fall through to Kantumruy Pro */
  --font: "Inter", "Kantumruy Pro", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-heading: var(--font);
}

html[lang="km"] {
  --font: "Kantumruy Pro", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-heading: "Kantumruy Pro", "Inter", sans-serif;
}

/* ---------- Typography: one consistent font stack everywhere ---------- */
body,
p,
a,
li,
ul li,
ol li,
h1,
h2,
h3,
h4,
h5,
h6,
input,
button,
select,
textarea,
.marquee span,
.hero-add,
.title-news,
.document > p,
.section-heading p,
.section-heading h1,
.section-heading2 p,
.section-heading3 p,
.footer-area .bottom-footer-area p,
.header-area .newspaper-main-menu .classy-navbar .classynav > ul > li > a {
  font-family: var(--font) !important;
}
h1, h2, h3, h4, h5, h6,
.section-heading p, .section-heading h1, .section-heading2 p, .section-heading3 p,
.header-area .newspaper-main-menu .classy-navbar .classynav > ul > li > a {
  font-family: var(--font-heading) !important;
}
.fa { font-family: FontAwesome !important; }

body {
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
/* links keep their own size; hover only changes the colour
   (a font-size on ".post-meta a:hover" made the photo story titles shrink when hovered) */
a {
  transition: color .2s ease;
  font-size: inherit;
}
img { max-width: 100%; }
/* Bootstrap 5 reboot indents every list; the theme expects flat lists */
ul, ol { padding-left: 0; }
.article-body ul, .article-body ol { padding-left: 1.5rem; margin-bottom: 1.1em; }

/* ---------- Header ---------- */
.header-area .top-header-area {
  background: #d1fefd;
  height: auto;
  border-bottom: 1px solid var(--line);
}
.header-area .top-header-area .top-header-content {
  background: transparent;
  height: auto;
  min-height: 96px;
  gap: 24px;
  padding: 12px 0;
}
.header-area .top-header-area .top-header-content .logo img {
  width: auto;
  max-width: 340px;
  max-height: 72px;
}
.header-area .top-header-area .login-search-area { gap: 16px; }
.header-area .top-header-area .login-search-area > div:first-child {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.header-area .top-header-area .login-search-area > div:first-child a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-decoration: none;
  white-space: nowrap;
}
.header-area .top-header-area .login-search-area > div:first-child a:hover {
  border-color: var(--akp-blue);
  color: var(--akp-blue);
}
.header-area .top-header-area .login-search-area .flag {
  width: 20px;
  height: 14px;
  object-fit: cover;
  border-radius: 2px;
}
.header-area .top-header-area .login-search-area .search-form form {
  position: relative;
  width: 240px;
}
@media (min-width: 992px) {
  .header-area .top-header-area .login-search-area > div:first-child { flex-wrap: nowrap; }
}
.header-area .top-header-area .login-search-area .search-form form input.form-control,
.header-area .top-header-area .login-search-area .search-form form input {
  height: 40px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
  padding: 0 44px 0 16px;
  font-size: 14px;
  font-style: normal;
  color: var(--ink);
}
.header-area .top-header-area .login-search-area .search-form form input:focus {
  background: #fff;
  border-color: var(--akp-blue);
  box-shadow: 0 0 0 3px rgba(29, 78, 216, .15);
}
.header-area .top-header-area .login-search-area .search-form form button {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--akp-blue);
  color: #fff;
  border: 0;
  line-height: 32px;
}

@media (min-width: 768px) and (max-width: 1199px) {
  .header-area .top-header-area .top-header-content { gap: 12px; }
  .header-area .top-header-area .top-header-content .logo img { max-width: 240px; }
  .header-area .top-header-area .login-search-area { gap: 10px; }
  .header-area .top-header-area .login-search-area > div:first-child a { padding: 5px 8px; font-size: 11px; gap: 4px; }
  .header-area .top-header-area .login-search-area .search-form form { width: 170px; }
}

/* ---------- Main menu ---------- */
.header-area .newspaper-main-menu { border-bottom: 0; }
.header-area .newspaper-main-menu .classy-nav-container,
.header-area .is-sticky #stickyMenu,
.header-area .is-sticky #stickyMenu .classy-nav-container {
  background: #397efb;
}
.header-area .is-sticky #stickyMenu { box-shadow: 0 6px 24px rgba(15, 23, 42, .18); }
@media (min-width: 992px) {
  /* let long menus wrap onto a second row instead of being clipped */
  .header-area .newspaper-main-menu .classy-navbar { height: auto; min-height: 52px; }
  .header-area .newspaper-main-menu .classy-navbar .classynav > ul { display: flex; flex-wrap: wrap; }
}
.header-area .newspaper-main-menu .classy-navbar .classynav > ul > li > a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 5px;
  height: 52px;
  padding: 0 7px;
  color: #fff;
  font-size: 14px;
  font-weight: 600 !important;
  line-height: 1.2;
  letter-spacing: 0;
}
/* Khmer marks sit below the baseline, so nudge the line box down to look centred */
html[lang="km"] .header-area .newspaper-main-menu .classy-navbar .classynav > ul > li > a {
  font-size: 15px;
  padding-left: 10px;
  padding-right: 10px;
  line-height: 1.5;
  padding-top: 3px;
}
/* desktop: Home shows only the house icon, so the other items get more room */
@media (min-width: 992px) {
  .menu-home-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .header-area .newspaper-main-menu .classy-navbar .classynav > ul > li:first-child > a { font-size: 17px; }
}
/* small laptops (992-1199px): a little tighter so the menu fits on one row */
@media (min-width: 992px) and (max-width: 1199px) {
  .header-area .newspaper-main-menu .classy-navbar .classynav > ul > li > a { padding: 0 6px; font-size: 13px !important; }
  html[lang="km"] .header-area .newspaper-main-menu .classy-navbar .classynav > ul > li > a { padding-left: 6px; padding-right: 6px; font-size: 14px !important; }
  /* one row: if the items still do not fit (long French names), the row scrolls sideways instead of growing a second row */
  .header-area .newspaper-main-menu .classy-navbar .classynav { min-width: 0; max-width: 100%; }
  .header-area .newspaper-main-menu .classy-navbar .classynav > ul { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, #000 94%, transparent); mask-image: linear-gradient(to right, #000 94%, transparent); }
  .header-area .newspaper-main-menu .classy-navbar .classynav > ul::-webkit-scrollbar { display: none; }
  .header-area .newspaper-main-menu .classy-navbar .classynav > ul > li { flex: none; margin: 0 !important; }
}
/* hover: colour change only, no underline */
.header-area .newspaper-main-menu .classy-navbar .classynav > ul > li > a { transition: color .15s ease; }
.header-area .newspaper-main-menu .classy-navbar .classynav > ul > li > a:hover,
.header-area .newspaper-main-menu .classy-navbar .classynav > ul > li > a:focus {
  color: #ffe066;
  text-decoration: none;
}
@media (max-width: 991px) {
  .header-area .newspaper-main-menu { background: var(--akp-blue-dark); }
  .header-area .newspaper-main-menu .classy-navbar .logo img { max-height: 44px; width: auto; }
  .breakpoint-on .classy-navbar .classy-menu { background: #fff; }
  .breakpoint-on .header-area .newspaper-main-menu .classy-navbar .classynav > ul > li > a,
  .header-area .newspaper-main-menu .breakpoint-on .classy-navbar .classynav > ul > li > a {
    color: var(--ink);
    border-bottom: 1px solid var(--line);
  }
  .breakpoint-on .header-area .newspaper-main-menu .classy-navbar .classynav > ul > li > a:hover,
  .header-area .newspaper-main-menu .breakpoint-on .classy-navbar .classynav > ul > li > a:hover { color: #397efb; }
}

/* ---------- Page frame ---------- */
.frame-content { background: transparent; padding-top: 24px; padding-bottom: 0; } /* same gap under the menu on every page */
.frame-content > br:first-child { display: none; } /* category/search pages started with a <br> */
.frame-content + br { display: none; } /* stray <br> between the page and the footer */
.hero-area { padding: 0 0 16px; }
.hero-add {
  background: linear-gradient(135deg, var(--akp-blue-dark), var(--akp-blue));
  border-radius: var(--radius);
  margin-left: 0;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 16px;
  box-shadow: var(--shadow);
}
.hero-add a, .video-title-size {
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .01em;
}
#carouselExampleIndicators {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.video-post {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  margin-bottom: 16px;
  padding-bottom: 12px;
}
.video-post p { line-height: 0; }
.video-post iframe { border-radius: var(--radius) var(--radius) 0 0; }
.video-post > a {
  display: block;
  padding: 10px 14px 0;
  color: var(--ink);
  font-weight: 600;
  line-height: 1.6;
}

/* ---------- Section headings ---------- */
.section-heading, .section-heading2, .section-heading3 {
  border-bottom: 1px solid var(--line);
  margin-bottom: 16px;
  box-shadow: none !important;
  padding: 0 !important;
}
.section-heading p, .section-heading h1, .section-heading2 p, .section-heading3 p {
  position: relative;
  background: transparent;
  color: var(--ink);
  height: auto;
  min-width: 0;
  line-height: 1.4;
  padding: 0 0 12px;
  font-size: 18px;
  font-weight: 800;
  text-align: left;
  letter-spacing: .02em;
}
.section-heading p::after, .section-heading h1::after, .section-heading2 p::after, .section-heading3 p::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 3px;
  border-radius: 3px;
  background: var(--akp-red);
}
.section-heading2 p::after { background: var(--akp-blue); }
.section-heading3 p::after { background: var(--muted); }

/* ---------- Post cards (index, category, search) ---------- */
.featured-post-area .single-blog-post.small-featured-post,
.blog-sidebar-area .single-blog-post.small-featured-post {
  background: var(--card) !important;
  border: 1px solid var(--line);
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow) !important;
  transition: box-shadow .2s ease, transform .2s ease;
}
.featured-post-area .single-blog-post.small-featured-post:hover,
.blog-sidebar-area .single-blog-post.small-featured-post:hover {
  box-shadow: var(--shadow-hover) !important;
  transform: translateY(-2px);
}
.featured-post-area .col-md-8 > .single-blog-post.small-featured-post,
.featured-post-area .col-lg-8 > .single-blog-post.small-featured-post {
  padding: 20px !important;
}
.featured-post-area .col-md-8 > br,
.featured-post-area .col-lg-8 > br { display: none; }
.featured-post-area .col-md-8 > .single-blog-post,
.featured-post-area .col-lg-8 > .single-blog-post { margin-bottom: 16px; }
.single-blog-post .post-data .post-catagory,
.single-blog-post.small-featured-post .post-data .post-catagory {
  color: var(--ink);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.45;
  margin-bottom: 0;
}
html[lang="km"] .single-blog-post .post-data .post-catagory { line-height: 1.8; font-size: 17px; }
.single-blog-post .post-data .post-catagory:hover { color: var(--akp-blue); }
.single-blog-post.small-featured-post hr { border-color: var(--line); margin: 12px 0; }

.post-title > h6,
.single-blog-post.small-featured-post .post-meta .post-title h6 {
  color: var(--muted);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.7;
  margin-bottom: 0;
}
html[lang="km"] .post-title > h6 { line-height: 1.9; }

.card-footer-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

/* photo stories */
.single-blog-post.small-featured-post.d-flex {
  padding: 0;
  margin-bottom: 16px;
  border-radius: var(--radius);
  overflow: hidden;
}
.single-blog-post.small-featured-post.d-flex img {
  display: block;
  width: 100%;
  height: auto; /* full photo at its own shape, no crop and no empty bars */
  border-radius: var(--radius) var(--radius) 0 0;
}
.single-blog-post.small-featured-post.d-flex .post-meta {
  background: var(--card) !important;
  border-radius: 0 0 var(--radius) var(--radius) !important;
  box-shadow: var(--shadow) !important;
}
/* photo story titles: same as the news titles in the left column */
.post-meta > .photo {
  display: block;
  color: var(--ink);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.45;
}
html[lang="km"] .post-meta > .photo { font-size: 17px; line-height: 1.8; }
.post-meta > .photo:hover { color: var(--akp-blue); }

.btn-primary {
  background: var(--akp-blue);
  border-color: var(--akp-blue);
  border-radius: 999px;
  padding: 8px 20px;
  font-weight: 600;
}
.btn-primary:hover { background: var(--akp-blue-dark); border-color: var(--akp-blue-dark); }

.document {
  background: var(--card);
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: var(--shadow) !important;
}
.document > p a { color: var(--ink); }
.document > p a:hover { color: var(--akp-blue); }

/* pagination (Bootstrap 5 markup from partials/pagination) */
.akp-pagination { margin: 8px 0 24px; }
.akp-pagination .pagination { gap: 6px; flex-wrap: wrap; margin: 0; }
.akp-pagination .page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 40px;
  height: 40px;
  padding: 0 12px !important;
  border: 1px solid var(--line) !important;
  border-radius: 10px !important;
  background: var(--card);
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  box-shadow: none;
}
.akp-pagination .page-link:hover { background: var(--bg); color: var(--akp-blue); border-color: var(--akp-blue) !important; }
.akp-pagination .page-item.active .page-link {
  background: var(--akp-blue) !important;
  border-color: var(--akp-blue) !important;
  color: #fff;
}
.akp-pagination .page-item.disabled .page-link { background: transparent; color: #cbd5e1; }

/* ---------- Article (detail) ---------- */
.blog-area { padding-top: 12px; }
.blog-area .blog-posts-area {
  background: var(--card) !important;
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 32px !important;
}
.single-blog-post.featured-post.single-post .post-data { padding: 0; }
.article-title {
  color: var(--ink);
  font-size: 30px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -.01em;
  margin-bottom: 16px;
}
html[lang="km"] .article-title { font-size: 26px; line-height: 1.7; letter-spacing: 0; }
.article-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 0;
  margin-bottom: 20px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.reading-time {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}
.reading-time .fa { color: var(--akp-blue); }
.article-body,
.article-body p {
  color: var(--text);
  font-size: 17px !important;
  line-height: 1.8 !important;
}
html[lang="km"] .article-body,
html[lang="km"] .article-body p { line-height: 2.1 !important; }
.single-blog-post.featured-post.single-post .post-data .article-body p { margin-bottom: 1.1em; }
.article-body img {
  display: block;
  width: 100% !important; /* every photo uses the full article width (overrides width="..." in the post HTML) */
  max-width: 100%;
  height: auto !important;
  margin: 0 auto;
  border-radius: 12px;
}
/* a paragraph that only holds photos: small gap between photos, not text spacing */
.single-blog-post.featured-post.single-post .post-data .article-body p:has(> img),
.article-body p:has(> img) {
  margin-bottom: 10px;
  text-align: center;
}
.article-body a { color: var(--akp-blue); text-decoration: underline; }
.article-body iframe { max-width: 100%; border-radius: 12px; }
.article-share-bottom {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

/* "Latest News" title box: same look as the section headings on the left (title + red line) */
.blog-sidebar-area .latest-posts-widget > .single-blog-post:first-child {
  padding: 0 !important;
  margin-bottom: 16px;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.blog-sidebar-area .latest-posts-widget > .single-blog-post:first-child:hover { transform: none; box-shadow: none !important; }
.blog-sidebar-area .title-news {
  position: relative;
  display: inline-block;
  padding-bottom: 12px;
  line-height: 1.4;
  letter-spacing: .02em;
  font-size: 18px;
  font-weight: 800;
  color: var(--ink);
}
.blog-sidebar-area .hr1 { display: none; }
.blog-sidebar-area .title-news::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 3px;
  border-radius: 3px;
  background: var(--akp-red);
}
/* latest news titles: same typeface as the home page news, smaller for the narrow column */
.blog-sidebar-area .latest-posts-widget .post-meta .post-catagory,
html[lang="km"] .blog-sidebar-area .latest-posts-widget .post-meta .post-catagory {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.55;
  color: var(--ink);
}
html[lang="km"] .blog-sidebar-area .latest-posts-widget .post-meta .post-catagory { line-height: 1.8; }
.blog-sidebar-area .latest-posts-widget .post-meta .post-catagory:hover { color: #397efb; }
.blog-sidebar-area .latest-posts-widget .row { align-items: center; }
/* even padding around each latest news card (the markup's pe-0 removed the right side) */
.blog-sidebar-area .latest-posts-widget > .single-blog-post:not(:first-child) {
  padding: 10px 16px 10px 10px !important;
}
.blog-sidebar-area .single-blog-post.small-featured-post { margin-bottom: 12px; }
/* style.css forces width:100%, which Bootstrap 5 columns no longer cap */
.feature-image-smaller { height: auto; }
.feature-image-smaller.col-4 { width: 33.33333%; height: auto; }
.feature-image-smaller img { border-radius: 8px; aspect-ratio: 4 / 3; object-fit: contain; background: #eef2f7; width: 100%; }

#reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 100000;
  background: linear-gradient(90deg, var(--akp-red), var(--akp-blue));
  transform: scaleX(0);
  transform-origin: 0 50%;
}

/* ---------- Share bar ---------- */
.share-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.share-bar__label {
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  margin-right: 2px;
}
.share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  color: #fff !important;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  text-decoration: none !important;
  transition: transform .15s ease, filter .15s ease, background .15s ease;
}
.share-btn:hover { transform: translateY(-1px); filter: brightness(1.08); }
.share-btn:focus-visible { outline: 3px solid rgba(29, 78, 216, .35); outline-offset: 2px; }
.share-btn svg { width: 15px; height: 15px; }
.share-btn--facebook { background: #1877f2; }
.share-btn--x { background: #000; }
.share-btn--telegram { background: #229ed9; }
.share-btn--whatsapp { background: #25d366; }
.share-btn--linkedin { background: #0a66c2; }
.share-btn--email { background: #64748b; }
.share-btn--copy {
  padding: 0 14px;
  background: var(--bg);
  color: var(--ink) !important;
  border: 1px solid var(--line);
  font-size: 13px;
  font-weight: 600;
}
.share-btn--copy:hover { border-color: var(--akp-blue); color: var(--akp-blue) !important; }
.share-btn--copy.is-copied { background: #dcfce7; border-color: #22c55e; color: #15803d !important; }
.share-btn--copy.is-copied .fa::before { content: "\f00c"; }
.share-btn[hidden] { display: none; }

.share-bar--compact { gap: 6px; }
.share-bar--compact .share-btn {
  min-width: 30px;
  height: 30px;
  font-size: 13px;
  background: var(--bg);
  color: var(--muted) !important;
  border: 1px solid var(--line);
}
.share-bar--compact .share-btn svg { width: 12px; height: 12px; }
.share-bar--compact .share-btn--copy { padding: 0; }
.share-bar--compact .share-btn--facebook:hover { background: #1877f2; border-color: #1877f2; color: #fff !important; }
.share-bar--compact .share-btn--x:hover { background: #000; border-color: #000; color: #fff !important; }
.share-bar--compact .share-btn--telegram:hover { background: #229ed9; border-color: #229ed9; color: #fff !important; }
.share-bar--compact .share-btn--whatsapp:hover { background: #25d366; border-color: #25d366; color: #fff !important; }
.share-bar--compact .share-btn--linkedin:hover { background: #0a66c2; border-color: #0a66c2; color: #fff !important; }
.share-bar--compact .share-btn--copy:hover { background: var(--ink); border-color: var(--ink); color: #fff !important; }

.akp-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 100001;
  transform: translate(-50%, 20px);
  opacity: 0;
  pointer-events: none;
  background: var(--ink);
  color: #fff;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  box-shadow: var(--shadow-hover);
  transition: opacity .2s ease, transform .2s ease;
}
.akp-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Footer: header colours (cyan + menu blue), no black ---------- */
.footer-area {
  margin-top: 24px;
  background: #d1fefd;
  border-top: 4px solid #397efb;
  color: var(--text);
}
.footer-area .main-footer-area { padding: 40px 0 32px; }
.footer-area .footer-logo { display: inline-block; }
.footer-area .footer-logo img { width: auto; max-width: 100%; max-height: 80px; }
.footer-area .widget-title {
  position: relative;
  margin-bottom: 18px;
  padding-bottom: 10px;
  font-size: 16px;
  font-weight: 800;
  color: #0b2a5b;
}
.footer-area .widget-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 36px;
  height: 3px;
  border-radius: 3px;
  background: #397efb;
}
.footer-contact { list-style: none; margin: 0; padding: 0; }
.footer-contact li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
}
.footer-contact small {
  display: block;
  font-size: 12px;
  color: var(--muted);
}
.footer-contact a { color: var(--text); }
.footer-contact a:hover { color: #397efb; }
.footer-contact-icon {
  flex: 0 0 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #fff;
  color: #397efb;
  box-shadow: 0 2px 6px rgba(57, 126, 251, .18);
}
.footer-social { display: flex; flex-wrap: wrap; gap: 10px; }
.footer-social a {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  font-size: 19px;
  box-shadow: 0 4px 10px rgba(15, 23, 42, .12);
  transition: transform .15s ease, box-shadow .15s ease;
}
.footer-social a:hover { color: #fff; transform: translateY(-3px); box-shadow: 0 8px 16px rgba(15, 23, 42, .18); }
.footer-social .is-facebook { background: #1877f2; }
.footer-social .is-youtube { background: #ff0033; }
.footer-social .is-twitter { background: #1d9bf0; }
.footer-social .is-telegram { background: #229ed9; }
.footer-area .bottom-footer-area {
  height: auto;
  padding: 16px 0;
  background: #397efb;
}
.footer-area .bottom-footer-area p {
  margin: 0;
  text-align: center;
  color: #fff;
  font-size: 13px;
}

/* ---------- Small screens ---------- */
@media (max-width: 991px) {
  /* white bar so the logo stays readable; menu links stay dark */
  .header-area .newspaper-main-menu,
  .header-area .newspaper-main-menu .classy-nav-container,
  .header-area .is-sticky #stickyMenu,
  .header-area .is-sticky #stickyMenu .classy-nav-container {
    background: #fff;
  }
  .header-area .newspaper-main-menu { border-bottom: 3px solid var(--akp-blue); height: auto; }
  .header-area .newspaper-main-menu .classy-navbar { height: 64px; }
  .header-area .newspaper-main-menu .classy-navbar .logo a { max-width: 240px; }
  .header-area .newspaper-main-menu .classy-navbar .logo img { max-height: 48px; }
  .classy-navbar-toggler .navbarToggler span { background-color: var(--ink) !important; }
  .header-area .newspaper-main-menu .classy-navbar .classynav > ul > li > a { color: var(--ink); padding: 14px 20px; }
}
@media (max-width: 767px) {
  .header-area .top-header-area .top-header-content {
    min-height: 0;
    flex-direction: column;
    align-items: stretch !important;
    gap: 10px;
    padding: 10px 0;
  }
  .header-area .top-header-area .top-header-content > .logo { display: none; }
  /* phones: search + light/dark button on one row, the languages on one row below (swipe if they do not fit) */
  .header-area .top-header-area .login-search-area {
    display: grid !important;
    grid-template-columns: 1fr auto;
    align-items: center !important;
    gap: 10px;
    width: 100%;
  }
  .header-area .top-header-area .login-search-area .search-form { grid-column: 1; grid-row: 1; min-width: 0; }
  .header-area .top-header-area .login-search-area .site-theme-toggle { grid-column: 2; grid-row: 1; }
  .header-area .top-header-area .login-search-area > div:first-child {
    grid-column: 1 / -1; grid-row: 2;
    display: flex; flex-wrap: nowrap !important; justify-content: flex-start; gap: 6px;
    overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px;
  }
  .header-area .top-header-area .login-search-area > div:first-child::-webkit-scrollbar { display: none; }
  .header-area .top-header-area .login-search-area > div:first-child a { flex: none; }
  /* languages centred; auto margins (not justify-content) so the first one is still reachable when the row scrolls */
  .header-area .top-header-area .login-search-area > div:first-child a:first-child { margin-left: auto; }
  .header-area .top-header-area .login-search-area > div:first-child a:last-child { margin-right: auto; }
  .header-area .top-header-area .login-search-area .search-form form { width: 100%; }
  .blog-area .blog-posts-area { padding: 20px !important; border-radius: var(--radius); }
  .article-title { font-size: 24px; }
  html[lang="km"] .article-title { font-size: 21px; }
  .article-body, .article-body p { font-size: 16px !important; }
  
  .single-blog-post .post-data .post-catagory { font-size: 16px; }
  .hero-add { margin-top: 16px; }
}

/* ---------- Home videos ---------- */
.video-post .video-akp {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9; /* same shape as the video, so no black bars top and bottom */
}

/* ---------- Quote marquee ---------- */
.marquee { white-space: nowrap; overflow: hidden; }
.marquee span { padding-left: 0; animation: none; } /* old style.css rule: fixed 30s for any length */
.marquee-track { display: inline-flex; will-change: transform; }
.marquee-track.is-running { animation: marquee-loop linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-group { display: inline-flex; flex-shrink: 0; }
.marquee-item { display: inline-flex; align-items: center; padding-right: 28px; }
.marquee-item::after { content: "•"; color: var(--akp-red); font-size: 18px; padding-left: 28px; }

/* bar: label on the left, scrolling quotes on the right */
.quote-bar {
  display: flex;
  align-items: stretch;
  min-height: 40px;
  background: #fff;
  border: 1px solid var(--line);
  border-left: 4px solid var(--akp-red);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.quote-label {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  padding: 0 14px;
  background: linear-gradient(135deg, var(--akp-blue-dark), var(--akp-blue));
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.quote-label .fa { color: #fca5a5; font-size: 16px; }
.quote-bar .marquee {
  flex: 1;
  display: flex;
  align-items: center;
  /* soft fade at both ends */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 32px, #000 calc(100% - 32px), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 32px, #000 calc(100% - 32px), transparent);
}
.quote-bar .marquee-item {
  /* same font as the label */
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.6;
}
@media (max-width: 767px) {
  .quote-bar { min-height: 38px; margin-bottom: 12px; }
  .quote-label { padding: 0 12px; font-size: 13px; letter-spacing: 0; }
  .quote-bar .marquee-item { font-size: 13px; }
}
@keyframes marquee-loop {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track.is-running { animation: none; }
  .marquee { overflow-x: auto; }
}

/* ---------- Video page ---------- */
.video-page { padding-bottom: 24px; }
.video-page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 24px;
  padding-bottom: 12px;
  border-bottom: 3px solid var(--akp-blue);
}
.video-page-head h1 { margin: 0; font-size: 28px; font-weight: 800; color: var(--ink); }
.video-page-head p { margin: 0; color: var(--muted); font-size: 14px; }
.video-card {
  height: 100%;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: box-shadow .2s ease, transform .2s ease;
}
.video-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); }
.video-thumb {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 0;
  background: #000;
  cursor: pointer;
  overflow: hidden;
}
.video-thumb img, .video-thumb iframe {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover; /* hqdefault thumbnails are 4:3 with black bars; cover trims only those bars */
  border: 0;
}
.video-thumb img { height: 100% !important; transition: transform .4s ease; } /* style.css forces img height:auto !important */
.video-card:hover .video-thumb img { transform: scale(1.04); }
.video-play {
  /* YouTube's red play button, same as the players on the home page */
  position: absolute;
  left: 50%;
  top: 50%;
  width: 68px;
  height: 48px;
  margin: -24px 0 0 -34px;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .3));
}
.video-play-bg { fill: #ff0033; }
.video-card-title {
  margin: 0;
  padding: 14px 16px 16px;
  color: var(--ink);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.7;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (max-width: 575px) {
  .video-page-head h1 { font-size: 22px; }
}

/* ---------- Search page ---------- */
.search-head {
  margin-bottom: 20px;
  padding: 20px;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.search-head h1 { margin: 0 0 14px; font-size: 22px; font-weight: 800; color: var(--ink); }
.search-page-form {
  position: relative;
  display: flex;
  gap: 8px;
}
.search-page-form .fa {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
}
.search-page-form input {
  flex: 1;
  min-width: 0;
  height: 46px;
  padding: 0 16px 0 42px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
  font-size: 15px;
  color: var(--ink);
}
.search-page-form input:focus {
  outline: none;
  background: #fff;
  border-color: #397efb;
  box-shadow: 0 0 0 3px rgba(57, 126, 251, .18);
}
.search-page-form button {
  flex-shrink: 0;
  height: 46px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  background: #397efb;
  color: #fff;
  font-weight: 700;
}
.search-page-form button:hover { background: #1f63e0; }
.search-count { margin: 12px 0 0; color: var(--muted); font-size: 14px; }

.news-card {
  margin-bottom: 14px;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: box-shadow .2s ease, transform .2s ease;
}
.news-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); }
.news-card-link { display: flex; gap: 20px; padding: 16px; color: inherit; text-decoration: none; }
.news-card-image { flex: 0 0 300px; display: block; overflow: hidden; border-radius: 12px; }
.news-card-image img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2; /* most AKP photos are about 3:2, so the whole photo shows with almost no bars */
  object-fit: contain;
  background: #eef2f7;
  border-radius: 12px;
  transition: transform .4s ease;
}
.news-card:hover .news-card-image img { transform: scale(1.03); }
/* wide photos fill the box; tall images keep object-fit: contain (set by article.js) */
.news-card-image img.is-landscape,
.feature-image-smaller img.is-landscape { object-fit: cover; }
.news-card-body { flex: 1; min-width: 0; }
.news-card-body { display: flex; flex-direction: column; }
.news-card-body h3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--ink);
}
html[lang="km"] .news-card-body h3 { font-size: 17px; line-height: 1.8; } /* same as photo story titles */
.news-card:hover h3 { color: #397efb; }
.news-card-body p {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.7;
}
html[lang="km"] .news-card-body p { line-height: 1.85; }

.news-card mark { padding: 0 2px; border-radius: 3px; background: #fff3a3; color: inherit; }

.search-empty {
  padding: 48px 24px;
  text-align: center;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.search-empty > .fa {
  width: 72px;
  height: 72px;
  line-height: 72px;
  margin-bottom: 16px;
  border-radius: 50%;
  background: rgba(57, 126, 251, .12);
  color: #397efb;
  font-size: 30px;
}
.search-empty h2 { margin: 0 0 8px; font-size: 20px; font-weight: 700; color: var(--ink); word-break: break-word; }
.search-empty p { margin: 0 0 20px; color: var(--muted); }
@media (min-width: 768px) and (max-width: 1199px) {
  .news-card-image { flex-basis: 240px; }
}
/* tablets and up: the "Videos & Infographics" bar sits next to the quote bar (style.css pushed it 80px down) */
@media (min-width: 768px) { .hero-area .hero-add { margin-top: 0; } }
/* news cards follow their own width, whatever the screen: narrow card = photo on top, wide card = photo on the left */
.news-card { container-type: inline-size; }
@container (max-width: 560px) {
  .news-card-link { flex-direction: column; gap: 12px; }
  .news-card-image { flex-basis: auto; }
}
@media (max-width: 575px) {
  .news-card-link { flex-direction: column; gap: 12px; }
  .news-card-image { flex-basis: auto; }
  .search-page-form button { padding: 0 16px; }
}

/* ---------- Section headings: one creative style everywhere ----------
   title + blue line that fades out */
.section-heading, .section-heading2, .section-heading3 {
  border-bottom: 0;
  margin-bottom: 18px;
}
.section-heading p, .section-heading h1, .section-heading2 p, .section-heading3 p,
.blog-sidebar-area .title-news,
.video-page-head h1 {
  display: flex !important;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 0 !important;
  color: var(--ink);
  font-size: 19px;
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: .01em;
}
html[lang="km"] .section-heading p, .section-heading h1, html[lang="km"] .section-heading2 p, html[lang="km"] .section-heading3 p,
html[lang="km"] .blog-sidebar-area .title-news { line-height: 1.9; }
.section-heading p::after, .section-heading h1::after, .section-heading2 p::after, .section-heading3 p::after,
.blog-sidebar-area .title-news::after,
.video-page-head h1::after {
  content: "";
  position: static;
  flex: 1;
  width: auto;
  min-width: 24px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, #397efb 0, #397efb 36px, rgba(57, 126, 251, .25) 36px, rgba(57, 126, 251, 0) 100%);
}
.blog-sidebar-area .latest-posts-widget > .single-blog-post:first-child { border-bottom: 0 !important; margin-bottom: 14px; }
.video-page-head { border-bottom: 0; flex-wrap: nowrap; align-items: center; }
.video-page-head h1 { flex: 1; font-size: 24px; }
.video-page-head p { flex-shrink: 0; padding: 4px 12px; border-radius: 999px; background: #d1fefd; color: #0b2a5b; font-weight: 600; }

/* ---------- Reading time + share row on every card ---------- */
.news-card-body h3 a { color: inherit; text-decoration: none; }
.news-card:hover h3 a, .news-card-body h3 a:hover { color: #397efb; }
.news-card .card-footer-meta { margin-top: auto; padding-top: 10px; } /* sits at the bottom, level with the image */
.post-meta > .photo + .card-footer-meta { margin-top: 10px; padding-top: 10px; }
.card-footer-meta--mini { margin-top: 6px; padding-top: 6px; gap: 6px; }
.card-footer-meta--mini .reading-time { font-size: 11px; }
.card-footer-meta--mini .share-bar--compact { gap: 4px; }
.card-footer-meta--mini .share-bar--compact .share-btn { width: 22px; min-width: 22px; height: 22px; font-size: 10px; }
.card-footer-meta--mini .share-bar--compact .share-btn svg { width: 10px; height: 10px; }
.video-card-meta { margin: 0 16px; padding: 10px 0 14px; }
.video-card-meta .reading-time { color: #ff0033; font-weight: 600; text-decoration: none; }
.video-card-meta .reading-time .fa { color: #ff0033; }
.video-card-title { padding-bottom: 6px; }
@media (max-width: 575px) {
  .video-page-head { flex-wrap: wrap; }
}

/* home videos: YouTube thumbnail + play button (player loads on click) */
.video-post .video-thumb { border-radius: var(--radius) var(--radius) 0 0; }
.video-post > a { padding-top: 12px; }

/* ---------- Advertisements (Admin > Advertisements) ---------- */
.akp-ads { display: flex; flex-direction: column; gap: 16px; margin: 16px 0; }
.akp-ads--right { padding: 0 8px; }
.akp-ads--bottom { margin-top: 24px; }
.akp-ad { position: relative; }
.akp-ad img {
  display: block;
  width: 100%;
  height: auto !important; /* keeps the image shape; width/height attributes reserve the space while it loads */
  border-radius: 12px;
  box-shadow: var(--shadow);
  background: #eef2f7;
  transition: transform .3s ease, box-shadow .3s ease;
}
.akp-ad a:hover img { transform: translateY(-2px); box-shadow: var(--shadow-hover); }

/* ---------- Copy-link box under articles ---------- */
.copy-link-box { margin-top: 14px; padding: 14px 16px; border-radius: 12px; background: #f3f7ff; border: 1px solid #dbe6fb; }
.copy-link-box label { display: block; margin-bottom: 8px; color: var(--ink); font-size: 13px; font-weight: 700; }
.copy-link-box label .fa { color: #397efb; }
.copy-link-row { display: flex; gap: 8px; }
.copy-link-row input {
  flex: 1;
  min-width: 0;
  height: 42px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--muted);
  font-size: 14px;
}
.copy-link-row input:focus { outline: none; border-color: #397efb; box-shadow: 0 0 0 3px rgba(57, 126, 251, .18); }
.copy-link-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 42px;
  padding: 0 18px;
  border: 0;
  border-radius: 10px;
  background: #397efb;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: background .15s ease, transform .1s ease;
}
.copy-link-btn:hover { background: #1f63e0; }
.copy-link-btn:active { transform: translateY(1px); }
.copy-link-btn.is-copied { background: #16a34a; }
.copy-link-btn.is-copied .fa::before { content: "\f00c"; }
@media (max-width: 575px) { .copy-link-btn span { display: none; } .copy-link-btn { padding: 0 14px; } }
.article-share-bottom .share-btn--copy { display: none; } /* the copy-link box below replaces it */

/* ---------- Article image captions (editor "caption" under a photo): centred, italic ---------- */
.article-body figure,
.article-body figure.image { display: block; margin: 0 auto 16px; text-align: center; }
.article-body figure img { margin: 0 auto; }
.article-body figcaption {
  display: block;
  margin: 8px auto 0;
  padding: 0 12px;
  color: var(--muted);
  font-size: 14px;
  font-style: italic;
  line-height: 1.7;
  text-align: center;
}
html[lang="km"] .article-body figcaption { font-size: 15px; line-height: 1.9; }

/* ---------- Whole news card opens the article (title link stretched over the card) ---------- */
.news-card { position: relative; cursor: pointer; }
.news-card-body h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
/* only the share buttons sit above the card link; the rest of the row (reading time) opens the article */
.news-card .card-footer-meta,
.single-blog-post.small-featured-post.d-flex .card-footer-meta { position: static; }
.news-card .share-bar,
.single-blog-post.small-featured-post.d-flex .share-bar { position: relative; z-index: 2; }
/* photo stories: same, the whole card opens the article */
.single-blog-post.small-featured-post.d-flex { position: relative; cursor: pointer; }
.single-blog-post.small-featured-post.d-flex .post-meta > .photo::after { content: ""; position: absolute; inset: 0; z-index: 1; }

/* =====================================================================
   Light / dark mode (button next to the search box, saved per visitor)
   ===================================================================== */
.site-theme-toggle {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  color: #0b2a5b;
  font-size: 17px;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.site-theme-toggle:hover { transform: rotate(-15deg); color: #397efb; }
.site-theme-toggle .site-theme-light { display: none; }
html[data-theme="dark"] .site-theme-toggle .site-theme-dark { display: none; }
html[data-theme="dark"] .site-theme-toggle .site-theme-light { display: inline-block; }

html[data-theme="dark"] {
  color-scheme: dark;
  --ink: #e6edf8;
  --text: #c3cede;
  --muted: #8a9ab3;
  --line: #22314d;
  --bg: #0b1426;
  --card: #111d33;
  --soft: #172642;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 20px rgba(0, 0, 0, .25);
  --shadow-hover: 0 4px 10px rgba(0, 0, 0, .35), 0 18px 40px rgba(0, 0, 0, .35);
}
html[data-theme="dark"] body,
html[data-theme="dark"] .frame-content,
html[data-theme="dark"] .featured-post-area,
html[data-theme="dark"] .hero-area { background: var(--bg) !important; color: var(--text); }
html[data-theme="dark"] .site-theme-toggle { background: var(--card); border-color: var(--line); color: #f2c94c; }
/* header: dark navy instead of cyan */
html[data-theme="dark"] .header-area .top-header-area,
html[data-theme="dark"] .header-area .top-header-area .top-header-content { background: #0e1a30 !important; border-color: var(--line); }
html[data-theme="dark"] .header-area .top-header-area .login-search-area > div:first-child a { color: var(--text); border-color: var(--line); }
html[data-theme="dark"] .header-area .top-header-area .login-search-area > div:first-child a:hover { color: #8fb6ff; border-color: #397efb; }
html[data-theme="dark"] .header-area .top-header-area .login-search-area .search-form form input { background: var(--card) !important; border-color: var(--line); color: var(--ink); }
html[data-theme="dark"] .header-area .newspaper-main-menu .classy-nav-container,
html[data-theme="dark"] .header-area .is-sticky #stickyMenu,
html[data-theme="dark"] .header-area .is-sticky #stickyMenu .classy-nav-container { background: #1d4ed8 !important; }
/* cards and lists */
html[data-theme="dark"] .news-card,
html[data-theme="dark"] .featured-post-area .single-blog-post.small-featured-post,
html[data-theme="dark"] .blog-sidebar-area .single-blog-post.small-featured-post,
html[data-theme="dark"] .single-blog-post.small-featured-post.d-flex .post-meta,
html[data-theme="dark"] .single-blog-post.featured-post.single-post,
html[data-theme="dark"] .video-post,
html[data-theme="dark"] .video-card,
html[data-theme="dark"] .search-head,
html[data-theme="dark"] .search-empty,
html[data-theme="dark"] .document,
html[data-theme="dark"] .bg-light { background: var(--card) !important; color: var(--text); }
html[data-theme="dark"] .blog-sidebar-area .latest-posts-widget > .single-blog-post:first-child { background: transparent !important; }
html[data-theme="dark"] .news-card-body h3, html[data-theme="dark"] .news-card-body h3 a,
html[data-theme="dark"] .single-blog-post .post-data .post-catagory, html[data-theme="dark"] .post-meta > .photo,
html[data-theme="dark"] .video-card-title, html[data-theme="dark"] .video-post > a,
html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3, html[data-theme="dark"] h4, html[data-theme="dark"] h5, html[data-theme="dark"] h6,
html[data-theme="dark"] .section-heading p, .section-heading h1, html[data-theme="dark"] .section-heading2 p, html[data-theme="dark"] .section-heading3 p,
html[data-theme="dark"] .blog-sidebar-area .title-news, html[data-theme="dark"] .video-page-head h1 { color: var(--ink) !important; }
html[data-theme="dark"] .news-card:hover h3 a, html[data-theme="dark"] .single-blog-post .post-data .post-catagory:hover { color: #8fb6ff !important; }
html[data-theme="dark"] .news-card-body p, html[data-theme="dark"] .post-title > h6 { color: var(--muted) !important; }
html[data-theme="dark"] .news-card-image img,html[data-theme="dark"] .feature-image-smaller img { background: var(--soft); }
html[data-theme="dark"] hr, html[data-theme="dark"] .card-footer-meta { border-color: var(--line) !important; }
/* share buttons, pagination, search */
html[data-theme="dark"] .share-bar--compact .share-btn { background: var(--soft); border-color: var(--line); color: var(--muted) !important; }
html[data-theme="dark"] .share-btn--x { background: #2b3a55; }
html[data-theme="dark"] .pagination .page-link, html[data-theme="dark"] .akp-pagination .page-link { background: var(--card); border-color: var(--line); color: var(--text); }
html[data-theme="dark"] .pagination .page-item.active .page-link { background: #397efb; border-color: #397efb; color: #fff; }
html[data-theme="dark"] .pagination .page-item.disabled .page-link { background: var(--bg); color: #3c4c68; }
html[data-theme="dark"] .search-page-form input { background: var(--bg); border-color: var(--line); color: var(--ink); }
html[data-theme="dark"] .news-card mark { background: #6b5b12; color: #fff; }
/* quote bar, ads, video page */
html[data-theme="dark"] .quote-bar { background: var(--card); border-color: var(--line); border-left-color: var(--akp-red); }
html[data-theme="dark"] .quote-bar .marquee-item { color: var(--ink); }
html[data-theme="dark"] .akp-ad img { background: var(--soft); }
html[data-theme="dark"] .video-page-head p { background: var(--soft); color: #8fb6ff; }
/* article page */
html[data-theme="dark"] .article-body, html[data-theme="dark"] .article-body p { color: var(--text) !important; }
html[data-theme="dark"] .article-body a { color: #8fb6ff; }
html[data-theme="dark"] .article-title { color: var(--ink); }
html[data-theme="dark"] .copy-link-box { background: var(--soft); border-color: var(--line); }
html[data-theme="dark"] .copy-link-row input { background: var(--card); border-color: var(--line); color: var(--muted); }
html[data-theme="dark"] .copy-link-box label { color: var(--ink); }
html[data-theme="dark"] .akp-toast { background: #e6edf8; color: #0b1426; }
/* footer: dark navy instead of cyan */
html[data-theme="dark"] .footer-area { background: #0e1a30; border-top-color: #397efb; color: var(--text); }
html[data-theme="dark"] .footer-area .widget-title { color: var(--ink); }
html[data-theme="dark"] .footer-contact li, html[data-theme="dark"] .footer-contact a { color: var(--text); }
html[data-theme="dark"] .footer-contact-icon { background: var(--card); }
/* smooth switch */
body, .news-card, .single-blog-post, .footer-area, .header-area .top-header-area { transition: background-color .3s ease, color .3s ease; }
/* header row: languages, search and the light/dark switch on one line */
.header-area .top-header-area .login-search-area { margin-top: 0; }
.header-area .top-header-area .login-search-area .search-form { display: flex; align-items: center; }
.header-area .top-header-area .login-search-area .search-form form { margin: 0 !important; }

/* ---------- Search: no results, but helpful ---------- */
.search-empty--rich { padding: 24px; text-align: left; }
.search-empty-head { display: flex; align-items: flex-start; gap: 18px; }
.search-empty-head > .fa {
  flex: 0 0 56px; width: 56px; height: 56px; line-height: 56px; margin: 0;
  border-radius: 50%; background: rgba(57, 126, 251, .12); color: #397efb; font-size: 22px; text-align: center;
}
.search-empty--rich h2 { margin: 6px 0 8px; font-size: 19px; }
.search-tips { margin: 0; padding-left: 18px; color: var(--muted); font-size: 14px; line-height: 1.9; }
.search-other { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.search-other-link {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 12px;
  background: #397efb; color: #fff !important; font-weight: 700; font-size: 14px; text-decoration: none !important;
  box-shadow: 0 6px 14px rgba(57, 126, 251, .3); transition: transform .15s ease, background .15s ease;
}
.search-other-link:hover { background: #1f63e0; transform: translateY(-1px); }
.search-sections { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.search-sections h3 { margin: 0 0 10px; font-size: 14px; font-weight: 700; color: var(--ink); }
.search-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.search-chips a {
  padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg);
  color: var(--ink); font-size: 13px; font-weight: 600; text-decoration: none; transition: all .15s ease;
}
.search-chips a:hover { border-color: #397efb; color: #397efb; background: #fff; }
.search-latest-head { display: flex; align-items: center; gap: 10px; margin: 24px 0 14px; color: var(--ink); font-size: 18px; font-weight: 800; }
.search-latest-head::after { content: ""; flex: 1; height: 3px; border-radius: 3px; background: linear-gradient(90deg, #397efb 0, #397efb 36px, rgba(57,126,251,.25) 36px, rgba(57,126,251,0) 100%); }
html[data-theme="dark"] .search-chips a { background: var(--soft); }
html[data-theme="dark"] .search-chips a:hover { background: var(--card); color: #8fb6ff; }
@media (max-width: 575px) { .search-empty-head { flex-direction: column; gap: 10px; } }

/* ---------- Article: section + date line under the title ---------- */
.article-info { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 0 6px; color: var(--muted); font-size: 12px; line-height: 1.4; }
.article-section { padding: 2px 9px; border-radius: 999px; background: #e7f0ff; color: #1f63e0 !important; font-weight: 700; text-decoration: none !important; }
.article-section:hover { background: #397efb; color: #fff !important; }
.article-info time .fa { color: #397efb; }
html[data-theme="dark"] .article-section { background: var(--soft); color: #8fb6ff !important; }

/* category name is the page's <h1> (same look as before) */
.section-heading h1 { margin: 0; }
/* main heading for search engines and screen readers, not shown */
.sr-only-heading { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- tablets / iPad (768-991px): one wide column; videos and photo stories in a grid under it ---------- */
@media (min-width: 768px) and (max-width: 991px) {
  .hero-area .lp-info { display: none !important; }
  .mb-info { display: block !important; margin: 0 0 14px; }
  .mb-info .hero-add { margin-top: 0; }
  .akp-side-videos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; margin-bottom: 24px; }
  .akp-side-videos > .video-post { margin: 0 !important; }
  .akp-side-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; margin-top: 16px; }
  .akp-side-col > * { grid-column: 1 / -1; }
  .akp-side-col > .single-blog-post.small-featured-post.d-flex { grid-column: auto; margin-bottom: 0 !important; }
}

/* sidebar "latest news": when the column is narrow (tablet / small laptop) the share buttons are left out so the
   titles have room; they stay on the article itself */
.blog-sidebar-area .latest-posts-widget { container-type: inline-size; }
@container (max-width: 420px) {
  .latest-posts-widget .card-footer-meta--mini .share-bar { display: none; }
  .latest-posts-widget .card-footer-meta--mini { margin-top: 8px; padding-top: 8px; }
}

/* missing photos: placeholder icon centred on a soft gradient box
   (post_thumb() returns no-image.svg when the file is gone; the layout's error handler swaps in the same file) */
img.img-missing,
img[src$="no-image.svg"] {
  object-fit: none !important;
  object-position: center;
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%) !important;
  transform: none !important;
}
html[data-theme="dark"] img.img-missing,
html[data-theme="dark"] img[src$="no-image.svg"] {
  background: linear-gradient(135deg, var(--soft) 0%, #0f1b33 100%) !important;
  opacity: .9;
}