/* ==========================================================================
   IKMa Portal — homepage design prototype
   Palette is a PLACEHOLDER pending IKMa brand guidelines. Every foreground/
   background pair below was chosen to clear WCAG 2.2 AA (4.5:1 body, 3:1 large
   text and UI components) so the ratios survive when real brand values land.
   ========================================================================== */

:root {
  --navy-900:#062F5C;
  --navy-800:#0B4D8F;   /* primary            on white  6.9:1 */
  --navy-700:#125FA8;
  --teal-700:#0B7C70;   /* accent             on white  4.9:1 */
  --gold-600:#9A6B00;   /* accent text        on white  4.7:1 */
  --gold-400:#F0A500;   /* decorative only, never text */

  --ink-900:#12171F;    /* body text          on white 15.9:1 */
  --ink-600:#48525F;    /* muted text         on white  7.4:1 */
  --line:#DFE4EA;
  --bg:#FFFFFF;
  --bg-soft:#F5F7FA;
  --bg-softer:#FAFBFC;

  --r-sm:6px; --r-md:10px; --r-lg:16px;
  --sp:8px;
  --wrap:1200px;
  --shadow-sm:0 1px 2px rgba(6,47,92,.06), 0 2px 8px rgba(6,47,92,.06);
  --shadow-md:0 4px 12px rgba(6,47,92,.09), 0 12px 28px rgba(6,47,92,.08);
  --font:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0; background:var(--bg); color:var(--ink-900);
  font-family:var(--font); font-size:16px; line-height:1.6;
}
img { max-width:100%; display:block; }
h1,h2,h3 { line-height:1.25; margin:0; font-weight:700; letter-spacing:-.01em; }
p { margin:0; }
ul { margin:0; padding:0; list-style:none; }
a { color:var(--navy-800); }

/* Visible focus everywhere — never removed (WCAG 2.4.7). */
:focus-visible { outline:3px solid var(--gold-400); outline-offset:2px; border-radius:2px; }

.wrap { max-width:var(--wrap); margin:0 auto; padding:0 20px; }
.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
/* Clip rather than shove off-screen: a negative offset can extend the scroll box. */
.skip-link {
  position:absolute; top:0; left:0; z-index:200;
  width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
  background:var(--navy-900); color:#fff; padding:12px 20px; border-radius:0 0 var(--r-sm) 0;
}
.skip-link:focus { width:auto; height:auto; clip:auto; overflow:visible; }

/* Prototype banner ------------------------------------------------------- */
.proto-banner {
  background:#7A2E00; color:#fff; text-align:center;
  padding:8px 16px; font-size:.8125rem; line-height:1.4;
}
.proto-banner strong { letter-spacing:.06em; margin-right:8px; }
.proto-banner span { opacity:.92; }

/* Utility bar ------------------------------------------------------------ */
.utility { background:var(--navy-900); color:#D9E4F0; font-size:.8125rem; }
.utility__inner { display:flex; justify-content:space-between; align-items:center; gap:16px; min-height:40px; flex-wrap:wrap; }
.utility__gov { opacity:.9; }
.utility__right { display:flex; align-items:center; gap:16px; }
.lang { display:flex; gap:2px; }
.lang__opt {
  min-width:36px; min-height:32px; display:inline-flex; align-items:center; justify-content:center;
  color:#D9E4F0; text-decoration:none; border-radius:var(--r-sm); font-weight:600; font-size:.75rem;
}
.lang__opt:hover { background:rgba(255,255,255,.14); color:#fff; }
.lang__opt.is-active { background:#fff; color:var(--navy-900); }

/* Header ----------------------------------------------------------------- */
.header { background:var(--bg); border-bottom:1px solid var(--line); position:relative; z-index:50; }
.header__inner { display:flex; align-items:center; gap:20px; padding-top:16px; padding-bottom:16px; }
.brand { display:flex; align-items:center; gap:14px; text-decoration:none; color:inherit; margin-right:auto; }
.brand__mark {
  width:52px; height:52px; flex:0 0 52px; border-radius:var(--r-md);
  background:linear-gradient(135deg, var(--navy-800), var(--teal-700));
  color:#fff; font-weight:800; font-size:1.15rem; letter-spacing:.02em;
  display:flex; align-items:center; justify-content:center;
}
.brand__text { display:flex; flex-direction:column; }
.brand__name { font-weight:700; font-size:1.0625rem; color:var(--navy-900); line-height:1.2; }
.brand__tag { font-size:.8125rem; color:var(--teal-700); font-style:italic; }

.search { display:flex; align-items:stretch; }
.search input {
  width:260px; max-width:44vw; padding:10px 14px; font-size:.9375rem; font-family:inherit;
  border:1px solid var(--line); border-right:0; border-radius:var(--r-sm) 0 0 var(--r-sm);
  color:var(--ink-900); background:var(--bg-softer);
}
.search input::placeholder { color:var(--ink-600); }
.search button {
  min-width:46px; border:0; background:var(--navy-800); color:#fff; cursor:pointer;
  border-radius:0 var(--r-sm) var(--r-sm) 0; font-size:1.15rem;
}
.search button:hover { background:var(--navy-700); }

.nav-toggle {
  display:none; align-items:center; gap:8px; min-height:44px; padding:8px 14px;
  background:var(--navy-800); color:#fff; border:0; border-radius:var(--r-sm);
  font-family:inherit; font-size:.9375rem; font-weight:600; cursor:pointer;
}
.nav-toggle__bars { display:inline-flex; flex-direction:column; gap:3px; }
.nav-toggle__bars span { display:block; width:18px; height:2px; background:#fff; }

/* Main nav --------------------------------------------------------------- */
.mainnav { background:var(--navy-800); }
.mainnav__list { display:flex; flex-wrap:wrap; }
.mainnav__list > li { position:relative; }
.mainnav__list > li > a {
  display:flex; align-items:center; min-height:48px; padding:0 18px;
  color:#fff; text-decoration:none; font-weight:600; font-size:.9375rem;
}
.mainnav__list > li > a:hover,
.mainnav__list > li:focus-within > a { background:var(--navy-900); }
.has-sub > a::after { content:"▾"; margin-left:8px; font-size:.75rem; opacity:.85; }

.submenu {
  position:absolute; top:100%; left:0; min-width:250px; background:#fff;
  border:1px solid var(--line); border-radius:0 0 var(--r-md) var(--r-md);
  box-shadow:var(--shadow-md); padding:6px 0; z-index:60;
  opacity:0; visibility:hidden; transform:translateY(-4px); transition:.15s ease;
}
.has-sub:hover > .submenu,
.has-sub:focus-within > .submenu { opacity:1; visibility:visible; transform:none; }
.submenu a {
  display:block; padding:10px 18px; color:var(--ink-900); text-decoration:none; font-size:.9375rem;
}
.submenu a:hover { background:var(--bg-soft); color:var(--navy-800); }

/* Hero slider ------------------------------------------------------------ */
.hero { position:relative; background:var(--navy-900); color:#fff; }
.hero__viewport { position:relative; }
.slide {
  min-height:420px; display:flex; align-items:center;
  background-size:cover; background-position:center;
}
.slide--1 { background:radial-gradient(120% 130% at 12% 20%, #125FA8 0%, #062F5C 60%, #041F3D 100%); }
.slide--2 { background:radial-gradient(120% 130% at 85% 25%, #0B7C70 0%, #084E58 55%, #04303B 100%); }
.slide--3 { background:radial-gradient(120% 130% at 45% 80%, #1B4C8F 0%, #0A2E58 60%, #06203E 100%); }
.slide[hidden] { display:none; }
.slide__inner { max-width:720px; padding-top:56px; padding-bottom:56px; }
.slide__eyebrow {
  display:inline-block; font-size:.75rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:#0E1A2B; background:var(--gold-400);
  padding:5px 12px; border-radius:999px; margin-bottom:16px;
}
.slide__title { font-size:clamp(1.6rem, 3.6vw, 2.6rem); margin-bottom:14px; }
.slide__text { font-size:clamp(.98rem, 1.5vw, 1.115rem); color:#DCE7F3; margin-bottom:26px; max-width:60ch; }
.slide__cta { display:flex; gap:12px; flex-wrap:wrap; }

.btn {
  display:inline-flex; align-items:center; justify-content:center;
  min-height:46px; padding:11px 24px; border-radius:var(--r-sm);
  font-weight:600; font-size:.9375rem; text-decoration:none; border:2px solid transparent;
}
.btn--primary { background:var(--gold-400); color:#241800; }
.btn--primary:hover { background:#FFB71A; }
.btn--ghost { border-color:rgba(255,255,255,.6); color:#fff; }
.btn--ghost:hover { background:rgba(255,255,255,.14); border-color:#fff; }

.hero__controls {
  display:flex; align-items:center; gap:10px;
  padding-top:14px; padding-bottom:18px;
  background:var(--navy-900);
}
.hero__btn {
  min-width:40px; min-height:40px; border-radius:50%;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.3);
  color:#fff; cursor:pointer; font-size:1.25rem; line-height:1;
  display:inline-flex; align-items:center; justify-content:center;
}
.hero__btn:hover { background:rgba(255,255,255,.26); }
.hero__btn--play { margin-left:auto; font-size:.8rem; }
.hero__dots { display:flex; gap:8px; }
.hero__dots button {
  width:34px; height:10px; min-height:10px; padding:0; border-radius:999px;
  background:rgba(255,255,255,.32); border:0; cursor:pointer;
}
/* The dot is small by design, so it gets an invisible ≥24px hit area (SC 2.5.8). */
.hero__dots button { position:relative; }
.hero__dots button::after { content:""; position:absolute; inset:-9px -2px; }
.hero__dots button.is-active { background:var(--gold-400); }

/* Quick access ----------------------------------------------------------- */
.quick { background:var(--bg-soft); padding:40px 0; }
.quick__grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.quick__card {
  display:flex; flex-direction:column; gap:6px; height:100%;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-md);
  padding:22px 20px; text-decoration:none; color:inherit;
  box-shadow:var(--shadow-sm); transition:.16s ease;
}
.quick__card:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--navy-700); }
.quick__ico { font-size:1.6rem; line-height:1; }
.quick__label { font-weight:700; color:var(--navy-900); }
.quick__desc { font-size:.875rem; color:var(--ink-600); }

/* Two-column panels ------------------------------------------------------ */
.cols { display:grid; grid-template-columns:1fr 1fr; gap:32px; padding-top:48px; padding-bottom:48px; }
/* Grid/flex children default to min-width:auto and refuse to shrink below their
   content. Without this the nowrap "more" link forces the panel past the
   viewport at 320px — a WCAG 1.4.10 Reflow failure. */
.cols > *, .quick__grid > *, .news__grid > *, .footer__grid > * { min-width:0; }
.panel__head { display:flex; align-items:baseline; justify-content:space-between; gap:8px 16px; margin-bottom:18px; flex-wrap:wrap; }
.panel__head h2 { min-width:0; }
.panel__head h2 { font-size:1.35rem; color:var(--navy-900); position:relative; padding-bottom:10px; }
.panel__head h2::after {
  content:""; position:absolute; left:0; bottom:0; width:54px; height:3px;
  background:var(--gold-400); border-radius:2px;
}
.panel__more { font-size:.875rem; font-weight:600; text-decoration:none; white-space:nowrap; }
.panel__more:hover { text-decoration:underline; }

.ann__item { display:flex; gap:16px; padding:16px 0; border-bottom:1px solid var(--line); }
.ann__item:last-child { border-bottom:0; }
.ann__date {
  flex:0 0 58px; height:58px; border-radius:var(--r-sm);
  background:var(--bg-soft); border:1px solid var(--line);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.ann__d { font-size:1.25rem; font-weight:800; color:var(--navy-900); line-height:1; }
.ann__m { font-size:.6875rem; text-transform:uppercase; color:var(--ink-600); letter-spacing:.04em; }
.ann__title { font-size:1rem; font-weight:600; margin:6px 0 4px; }
.ann__title a { color:var(--ink-900); text-decoration:none; }
.ann__title a:hover { color:var(--navy-800); text-decoration:underline; }
.ann__meta, .card__meta { font-size:.8125rem; color:var(--ink-600); }

.tag {
  display:inline-block; font-size:.6875rem; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; padding:3px 9px; border-radius:999px;
}
.tag--tender { background:#FFF1D6; color:#7A4E00; }
.tag--notis  { background:#E3F0FF; color:#0B4D8F; }
.tag--berita { background:#DDF3EF; color:#0B5F56; }

/* The programme panel (.cal__*) is styled by mod_takwim itself, in
   media/css/takwim.css. Add overrides here if the design needs to diverge --
   the module's rules sit in a @layer, so anything written here wins without
   needing !important or extra specificity. */

/* Statistics ------------------------------------------------------------- */
.stats { background:linear-gradient(135deg, var(--navy-900), #0A3E72); color:#fff; padding:44px 0; }
.stats__h { font-size:1.35rem; margin-bottom:24px; }
.stats__grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin:0; }
.stat { text-align:center; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16); border-radius:var(--r-md); padding:22px 14px; }
.stat dt { font-size:.8125rem; color:#C9DAEC; margin-bottom:8px; order:2; }
.stat dd { margin:0; font-size:2rem; font-weight:800; color:var(--gold-400); order:1; }
.stat { display:flex; flex-direction:column; }
.stats__note { margin-top:16px; font-size:.75rem; color:#A9C3DB; }

/* News ------------------------------------------------------------------- */
.news { padding:48px 0; }
.news__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.card {
  background:#fff; border:1px solid var(--line); border-radius:var(--r-md);
  overflow:hidden; box-shadow:var(--shadow-sm); transition:.16s ease;
  display:flex; flex-direction:column;
}
.card:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); }
.card__img { height:172px; }
.card__img--a { background:linear-gradient(135deg,#125FA8,#0B7C70); }
.card__img--b { background:linear-gradient(135deg,#0B7C70,#9A6B00); }
.card__img--c { background:linear-gradient(135deg,#062F5C,#125FA8); }
.card__body { padding:18px 20px 22px; }
.card__title { font-size:1.0625rem; margin:8px 0 6px; }
.card__title a { color:var(--ink-900); text-decoration:none; }
.card__title a:hover { color:var(--navy-800); text-decoration:underline; }

/* Footer ----------------------------------------------------------------- */
.footer { background:var(--navy-900); color:#C6D6E6; margin-top:8px; }
.footer__grid {
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:32px;
  padding-top:48px; padding-bottom:40px;
}
.brand--footer .brand__name { color:#fff; }
.brand--footer .brand__tag { color:#8FD3C9; }
.footer__addr { font-style:normal; margin:18px 0 12px; line-height:1.7; }
.footer__contact a { color:#9EC7EE; }
.footer__h { font-size:.9375rem; color:#fff; margin-bottom:14px; }
.footer__h--sp { margin-top:24px; }
.footer__list li { margin-bottom:9px; }
.footer__list a, .footer__contact a { color:#C6D6E6; text-decoration:none; }
.footer__list a:hover { color:#fff; text-decoration:underline; }
.social { display:flex; gap:10px; }
/* The icons are decorative and inert — there are no real social accounts to
   link to yet, and a dead href="#" is worse than no link. Styles target the
   list item so the markup needs no anchor. */
.social li {
  width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.2);
  color:#fff; text-decoration:none; font-weight:700;
}
.counter { display:flex; gap:4px; }
.counter span {
  width:24px; height:32px; border-radius:4px; background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.2); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.9375rem;
}
.footer__bar { border-top:1px solid rgba(255,255,255,.14); font-size:.8125rem; }
.footer__bar-in { display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; padding-top:16px; padding-bottom:16px; }
.footer__bar p { margin:0; }
.footer__updated { opacity:.8; }

/* Responsive ------------------------------------------------------------- */
@media (max-width:1024px) {
  .quick__grid, .stats__grid { grid-template-columns:repeat(2,1fr); }
  .news__grid { grid-template-columns:repeat(2,1fr); }
  .footer__grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:860px) {
  .cols { grid-template-columns:1fr; gap:36px; }
  .nav-toggle { display:inline-flex; }
  .header__right { display:none; }
  .header__inner { flex-wrap:wrap; }
  .mainnav { display:none; }
  .mainnav.is-open { display:block; }
  .mainnav__list { flex-direction:column; }
  .mainnav__list > li > a { min-height:52px; border-bottom:1px solid rgba(255,255,255,.14); }
  .submenu {
    position:static; opacity:1; visibility:visible; transform:none; box-shadow:none;
    border:0; border-radius:0; background:rgba(0,0,0,.18); padding:0;
  }
  .submenu a { color:#DCE7F3; padding-left:34px; }
  .submenu a:hover { background:rgba(0,0,0,.3); color:#fff; }
  .has-sub > a::after { margin-left:auto; }
}
@media (max-width:620px) {
  .news__grid, .quick__grid, .stats__grid, .footer__grid { grid-template-columns:1fr; }
  .slide { min-height:360px; }
  .utility__inner { justify-content:center; }
  .utility__gov { display:none; }
}

/* Honour reduced-motion: no transforms, and app.js also disables autoplay. */
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation-duration:.001ms !important; transition-duration:.001ms !important; }
  .quick__card:hover, .card:hover { transform:none; }
}

@media print {
  .utility, .mainnav, .hero__controls, .nav-toggle, .search, .social, .proto-banner { display:none !important; }
  body { color:#000; font-size:12pt; }
  .footer { background:none; color:#000; }
}

/* ==========================================================================
   Joomla integration — styles for core markup the static prototype did not have
   ========================================================================== */

/* Search module (mod_finder) --------------------------------------------- */
.header__right .mod-finder { margin:0; }
.header__right form { display:flex; align-items:stretch; gap:0; }
.header__right .mod-finder__search,
.header__right .awesomplete { display:flex; }
.header__right input[type="search"], .header__right input[type="text"] {
  width:260px; max-width:44vw; padding:10px 14px; font-size:.9375rem; font-family:inherit;
  border:1px solid var(--line); border-right:0; border-radius:var(--r-sm) 0 0 var(--r-sm);
  color:var(--ink-900); background:var(--bg-softer);
}
.header__right button, .header__right .btn {
  min-width:46px; border:0; background:var(--navy-800); color:#fff; cursor:pointer;
  border-radius:0 var(--r-sm) var(--r-sm) 0; font-size:1rem; padding:0 14px;
}
.header__right button:hover { background:var(--navy-700); }
.header__right label { display:none; }

/* Language switcher (mod_languages) -------------------------------------- */
.utility__right .mod-languages ul { display:flex; gap:2px; }
.utility__right .mod-languages a,
.utility__right .mod-languages .lang-active > a {
  min-width:38px; min-height:32px; display:inline-flex; align-items:center; justify-content:center;
  color:#D9E4F0; text-decoration:none; border-radius:var(--r-sm); font-weight:600; font-size:.75rem;
  padding:0 8px;
}
.utility__right .mod-languages a:hover { background:rgba(255,255,255,.14); color:#fff; }
.utility__right .mod-languages .lang-active > a { background:#fff; color:var(--navy-900); }
.utility__right .mod-languages img { max-height:14px; width:auto; }

/* Menu module wrapper ----------------------------------------------------- */
.mainnav .mainnav__list > li > a.is-current,
.mainnav .mainnav__list > li.is-active > a { background:var(--navy-900); }
.menu-sep { display:flex; align-items:center; min-height:48px; padding:0 18px; color:#C6D6E6; }

/* Quick-links module: a menu or custom HTML renders inside .quick ---------- */
.quick ul { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.quick ul > li { min-width:0; }
.quick ul > li > a {
  display:flex; flex-direction:column; gap:6px; height:100%;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-md);
  padding:22px 20px; text-decoration:none; color:var(--navy-900); font-weight:700;
  box-shadow:var(--shadow-sm); transition:.16s ease;
}
.quick ul > li > a:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--navy-700); }

/* Slider slides that carry a real article image ---------------------------- */
.slide { background-size:cover; background-position:center; }

/* News cards using real article images ------------------------------------- */
img.card__img { height:172px; width:100%; object-fit:cover; }

/* Stats module (custom HTML) ----------------------------------------------- */
.stats ul { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.stats ul > li {
  text-align:center; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16);
  border-radius:var(--r-md); padding:22px 14px; min-width:0;
}
.stats strong { display:block; font-size:2rem; font-weight:800; color:var(--gold-400); line-height:1.1; }
.stats span { font-size:.8125rem; color:#C9DAEC; }
.stats h2, .stats .panel__head h2 { color:#fff; }

/* Inner content pages ------------------------------------------------------ */
.page { display:grid; grid-template-columns:1fr; gap:32px; padding-top:36px; padding-bottom:48px; }
body.is-inner .page { grid-template-columns:minmax(0,1fr) 320px; }
body.is-inner .page:has(.page__side:empty) { grid-template-columns:1fr; }
.page__main { min-width:0; }
.page__side { min-width:0; }
body.is-home .page:not(:has(*:not(:empty))) { display:none; }
.page__main h1 { font-size:1.75rem; color:var(--navy-900); margin-bottom:16px; }
.page__main h2 { font-size:1.35rem; color:var(--navy-900); margin:28px 0 12px; }
.page__main p { margin-bottom:14px; }
.page__main ul, .page__main ol { margin:0 0 14px 20px; }
.page__main ul { list-style:disc; }
.page__main ol { list-style:decimal; }
.modcard {
  background:#fff; border:1px solid var(--line); border-radius:var(--r-md);
  padding:20px; margin-bottom:20px; box-shadow:var(--shadow-sm);
}
.modcard__h { font-size:1.05rem; color:var(--navy-900); margin-bottom:12px; }
.breadcrumbs-wrap { padding-top:18px; }
/* Joomla emits Bootstrap classes (breadcrumb, breadcrumb-item, px-3) that this
   template does not load, so the <ol> kept its default decimal markers and never
   received Bootstrap*s "/" divider — rendering as "1. Anda di sini:2. Laman
   Utama3. ...". Reset the list and supply the separator here. */
.breadcrumbs-wrap ol {
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  list-style:none; margin:0; padding:0;
  font-size:.8125rem; color:var(--ink-600);
}
.breadcrumbs-wrap li { display:flex; align-items:center; }
.breadcrumbs-wrap .mod-breadcrumbs__item + .mod-breadcrumbs__item::before {
  content:"/";
  /* Second declaration gives the separator empty alternative text, so screen
     readers do not announce "slash" between every crumb. Browsers without
     the alt-text syntax ignore it and keep the line above. */
  content:"/" / "";
  margin-right:8px; color:var(--ink-600); opacity:.7;
}
.breadcrumbs-wrap a { text-decoration:none; }
.breadcrumbs-wrap a:hover { text-decoration:underline; }

/* Error page --------------------------------------------------------------- */
.errorpage { padding:72px 0 96px; text-align:center; }
.errorpage__code { font-size:4rem; font-weight:800; color:var(--navy-800); line-height:1; }
.errorpage__title { font-size:1.6rem; color:var(--navy-900); margin:12px 0; }
.errorpage__msg { color:var(--ink-600); margin-bottom:24px; }

/* Joomla system messages ---------------------------------------------------- */
.page__main .alert { border-radius:var(--r-md); padding:14px 18px; margin-bottom:18px; border:1px solid var(--line); }
.page__main .alert-success { background:#E7F6EF; border-color:#9FD8BE; color:#0A5236; }
.page__main .alert-danger  { background:#FDECEA; border-color:#F0B3AC; color:#7A1D12; }
.page__main .alert-info    { background:#E3F0FF; border-color:#A9CDF3; color:#0B4D8F; }

@media (max-width:1024px) { .quick ul, .stats ul { grid-template-columns:repeat(2,1fr); } }
@media (max-width:860px)  { body.is-inner .page { grid-template-columns:1fr; } }
@media (max-width:620px)  { .quick ul, .stats ul { grid-template-columns:1fr; } }

/* Disclosure buttons in the main nav ------------------------------------- */
.mainnav__toggle {
  display:flex; align-items:center; gap:8px; min-height:48px; padding:0 18px;
  background:none; border:0; color:#fff; font-family:inherit; font-weight:600;
  font-size:.9375rem; cursor:pointer; width:100%; text-align:left;
}
.mainnav__toggle:hover, .mainnav__toggle[aria-expanded="true"] { background:var(--navy-900); }
.mainnav__caret { border:solid #fff; border-width:0 2px 2px 0; padding:2.5px; transform:rotate(45deg); margin-top:-3px; }
.mainnav__list > li.is-open > .submenu { opacity:1; visibility:visible; transform:none; }
@media (min-width:861px) { .mainnav__toggle { width:auto; } }
@media (max-width:860px) {
  .mainnav__list > li > .mainnav__toggle { border-bottom:1px solid rgba(255,255,255,.14); }
  .mainnav__caret { margin-left:auto; }
  .submenu { display:none; }
  .mainnav__list > li.is-open > .submenu { display:block; }
}
.stats .stats__note { margin-top:16px; font-size:.75rem; color:#A9C3DB; }

/* Any link inside the footer must use the light-on-dark colour. Scoping this to
   .footer__list left editor-authored links (e.g. tel: in the address module)
   falling back to the global dark blue — 2.2:1 on the navy footer. */
.footer a { color:#9EC7EE; }
.footer a:hover { color:#fff; }
.footer .social li { color:#fff; }

/* Article attachments (press releases, speeches) -------------------------- */
.article__title { font-size:1.75rem; color:var(--navy-900); margin-bottom:10px; }
.article__meta { display:flex; flex-wrap:wrap; gap:14px; font-size:.8125rem;
  color:var(--ink-600); margin-bottom:18px; }
.article__body { line-height:1.7; margin-bottom:24px; }

/* Custom-field attachments -------------------------------------------------
   Rendered by templates/ikma/html/plg_fields_media/media.php, which turns a
   non-image media value into a download link instead of a broken <img>.
   Styled to match .attach__item, since they are the same thing in two places. */
.field-attachment { display:inline-flex; align-items:center; gap:10px; min-height:44px;
  padding:8px 14px; border:1px solid var(--line); border-radius:8px;
  text-decoration:none; color:var(--ink-900); background:#fff; }
.field-attachment:hover { border-color:var(--navy-700); color:var(--navy-800); }
.field-attachment__icon { font-size:1.05rem; line-height:1; color:var(--navy-800); }
.field-attachment__label { text-decoration:underline; }
.field-attachment__meta { font-size:.8125rem; color:var(--ink-600); }


/* Article listings (Siaran Akhbar, Teks Ucapan, Pengumuman) -----------------
   Overrides html/com_content/category/blog_item.php. Core would render an
   info block plus a raw custom-field dump here; this is the deliberate
   version. */
.artitem { padding:22px 0; border-bottom:1px solid var(--line); }
.artitem:last-child { border-bottom:0; }
.artitem__title { font-size:1.25rem; line-height:1.35; margin:0 0 6px; }
.artitem__title a { color:var(--navy-900); text-decoration:none; }
.artitem__title a:hover { color:var(--navy-700); text-decoration:underline; }
.artitem__meta {
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px;
  margin:0 0 10px; font-size:.8125rem; color:var(--ink-600);
}
.artitem__date { white-space:nowrap; }
.artitem__field-label { font-weight:600; }
.artitem__intro { margin-bottom:12px; line-height:1.7; }
.artitem__intro p:last-child { margin-bottom:0; }
.artitem__more { margin:12px 0 0; }
.artitem__more a {
  display:inline-flex; align-items:center; gap:6px; min-height:44px;
  font-weight:600; color:var(--navy-800); text-decoration:none;
}
.artitem__more a:hover { text-decoration:underline; }
.artitem__arrow { font-size:1.1em; line-height:1; }

/* Attachment list — html/layouts/ikma/attachments.php, shared by the article
   view and the listings so both look and behave the same. */
.attach { margin:12px 0 0; }
.attach__h { font-size:1.05rem; color:var(--navy-900); margin:0 0 10px; }
.attach .attach__list { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.attach .attach__item {
  display:inline-flex; align-items:center; gap:10px; min-height:44px;
  padding:8px 14px; border:1px solid var(--line); border-radius:8px;
  background:#fff; color:var(--ink-900); text-decoration:none;
}
.attach .attach__item:hover { border-color:var(--navy-700); color:var(--navy-800); }
.attach__icon { font-size:1.05rem; line-height:1; color:var(--navy-800); }
.attach__label { text-decoration:underline; }
.attach__meta { font-size:.8125rem; color:var(--ink-600); }

/* Compact mobile header ----------------------------------------------------
   Before this, a phone spent 189px before any content: a full-width language
   bar (40px), then the brand block, then the Menu button pushed onto a row of
   its own because .header__inner was set to wrap and the brand takes the full
   width. Three stacked bands to show a logo and a menu button.

   Everything below collapses that into two short rows -- language, then
   brand + Menu side by side -- without moving any markup, so the DOM order and
   the accessible names are untouched. */
@media (max-width:860px) {
  /* Brand and Menu share one row; the brand text shrinks rather than wrapping
     the button away. min-width:0 is what actually allows a flex child to
     shrink below its content width. */
  .header__inner { flex-wrap:nowrap; gap:12px; padding-top:10px; padding-bottom:10px; }
  .brand { min-width:0; gap:10px; }
  .brand__text { min-width:0; }
  .brand__name { font-size:1rem; }

  .utility__inner { min-height:34px; }
  .nav-toggle { padding:8px 12px; }
}

@media (max-width:620px) {
  /* The tagline is decorative and costs a whole line. The brand link takes its
     accessible name from aria-label, so hiding it changes nothing for
     assistive technology. */
  .brand__tag { display:none; }
  .brand__mark { width:40px; height:40px; font-size:.9375rem; }
  .brand__logo { max-height:40px; }
  .brand__name { font-size:.9375rem; line-height:1.25; }

  /* Keep the word "Menu" -- it is the button's accessible name, and hiding it
     with display:none would leave a button that announces nothing. */
  .nav-toggle { padding:8px 10px; gap:6px; font-size:.875rem; }
}

/* Language switcher in the header ------------------------------------------
   It used to sit in the dark utility bar, which cost a whole 34px band on a
   phone to show two small buttons. It now lives in the header beside the search
   on desktop, and beside the Menu button on mobile. The pills are restyled for
   a light background -- the old rules assumed the navy bar. */
.header__util { display:flex; align-items:center; gap:12px; }
.header__util .lang { display:flex; gap:4px; }
.header__util .lang__opt {
  min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center;
  padding:0 10px; border:1px solid var(--line); border-radius:var(--r-sm);
  color:var(--navy-800); background:#fff;
  font-weight:700; font-size:.8125rem; text-decoration:none;
}
.header__util .lang__opt:hover { border-color:var(--navy-700); background:var(--bg-soft); color:var(--navy-800); }
.header__util .lang__opt.is-active { background:var(--navy-800); border-color:var(--navy-800); color:#fff; }

@media (max-width:860px) {
  /* Two rows: brand across the top, then Menu and the language switcher.
     The brand takes the full width so the second row is free for the controls. */
  .header__inner { flex-wrap:wrap; row-gap:8px; padding-top:8px; padding-bottom:8px; }
  .brand { flex:1 0 100%; margin-right:0; }
  .nav-toggle { order:1; }
  .header__util { order:2; margin-left:auto; }
}

@media (max-width:620px) {
  /* With the agency line hidden and the switcher moved out, this bar has
     nothing left to show. */
  .utility { display:none; }
}

/* com_content listing pagination ------------------------------------------
   Joomla emits Bootstrap classes (pagination, page-item, page-link) and
   icon-font spans for first/previous/next/last. This template loads neither,
   so the pager rendered as a bulleted vertical list with two invisible
   zero-width entries where the arrows should be. Same root cause as the
   breadcrumbs.

   `.page__main ul` sets list-style at specificity (0,1,1), so the reset is
   scoped to two classes to outrank it. */
.com-content-category-blog__navigation { margin-top:28px; }
.com-content-category-blog__navigation .counter {
  display:block; margin:0 0 10px; padding:0;
  font-size:.8125rem; color:var(--ink-600);
}
.pagination__wrapper .pagination {
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; align-items:center; gap:6px;
}
.pagination__wrapper .page-item { margin:0; }
.pagination__wrapper .page-link {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:44px; min-height:44px; padding:0 12px;
  border:1px solid var(--line); border-radius:8px;
  background:#fff; color:var(--navy-800);
  font-size:.875rem; font-weight:600; text-decoration:none;
}
.pagination__wrapper .page-link:hover { border-color:var(--navy-700); background:var(--bg-soft); }
.pagination__wrapper .active .page-link {
  background:var(--navy-800); border-color:var(--navy-800); color:#fff;
}
.pagination__wrapper .disabled .page-link {
  background:var(--bg-soft); color:var(--ink-600); opacity:.5;
}

/* The arrow glyphs the missing icon font would have supplied. Decorative: the
   links carry their own aria-label, and these spans are aria-hidden. */
.pagination__wrapper .page-link [class^="icon-"] { display:inline-block; line-height:1; }
.pagination__wrapper .icon-angle-double-left::before  { content:"\00AB"; }
.pagination__wrapper .icon-angle-left::before         { content:"\2039"; }
.pagination__wrapper .icon-angle-right::before        { content:"\203A"; }
.pagination__wrapper .icon-angle-double-right::before { content:"\00BB"; }

/* Announcement summary — shown only when the module's Show Intro Text is on.
   Clamped so a long summary cannot stretch the homepage panel. */
.ann__intro {
  margin:6px 0 0; font-size:.875rem; line-height:1.55; color:var(--ink-600);
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.ann__intro p { margin:0; }

/* News card summary — shown only when the module's Show Intro Text is on. */
.card__intro {
  margin:6px 0 0; font-size:.875rem; line-height:1.55; color:var(--ink-600);
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.card__intro p { margin:0; }

/* Clearance for the floating accessibility button.
   It is fixed to the bottom-right of the viewport, so at the foot of the page
   it sits on top of the last footer row — which is where the visitor counter
   lives. Space is reserved vertically rather than horizontally on purpose: the
   button is 218px wide in Malay and 174px in English, and it changes again if
   the label is switched off, so any horizontal figure would be wrong for some
   configuration. Height is a constant 48px plus its 16px offset. */
.footer__bar-in { padding-bottom: 76px; }