/* ========================================================== VILTSJÖ CORE CSS Global dark theme foundation for all subprojects
   Author: Tomas Viltsjö Structure: Root variables → Resets → Typography → Layout ========================================================== */
@font-face {
  font-family: "tv";
  src: url("../fonts/tv.otf");
  src:
    url("../fonts/tv.woff") format("woff"),
    url("../fonts/tv.otf") format("opentype"),
    url("../fonts/tv.svg#filename") format("svg");
}

/* ===========================  ROOT VARIABLES  =========================== */
:root {
    --viltsjo-one:#fffffa; /* main background */
    --viltsjo-two:#fafafa; /* background secondary */
    --viltsjo-three:#1f1f1f; /* background accent */
    --viltsjo-four:#000; /* main text  */
    --viltsjo-five:#d81c23; /* links */
    --viltsjo-six:#6a0206; /* links hover */
    --viltsjo-seven:#212c3b; /* muted text */
    --viltsjo-eight:#7c756a; /* shining */
    --viltsjo-nine:#e8b12f; /* extra */

  --color-danger: #ff0000;
  --color-success: #6bc56b;

  /* SPACING SCALE */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 32px;
  --space-xl: 64px;

  /* TYPOGRAPHY SCALE */
  --font-title: 'tv';
  --font-sans: 'Lato', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-serif: 'Georgia', 'Times New Roman', serif;
  --font-mono: 'Fira Code', monospace;

  --text-xs: clamp(0.75rem, 0.6vw, 0.8rem);
  --text-sm: clamp(0.875rem, 0.8vw, 0.95rem);
  --text-md: clamp(1rem, 1vw, 1.1rem);
  --text-lg: clamp(1.25rem, 1.4vw, 1.4rem);
  --text-xl: clamp(1.5rem, 2vw, 2rem);
  --text-xxl: clamp(2rem, 3vw, 3rem);
  --text-xxxl: clamp(4rem, 6vw, 6rem);

  /* BORDER RADIUS / SHADOWS */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --shadow-sm: 0 2px 6px rgba(0,0,0,0.3);
  --shadow-md: 0 6px 20px rgba(0,0,0,0.4);
  --shadow-lg: 0 10px 40px rgba(0,0,0,0.5);

  /* TRANSITIONS */
  --transition-fast: 0.2s ease;
  --transition-base: 0.35s ease;
  --transition-slow: 0.6s ease;

  /* FOOTER */
  --footer-h: 400px;
}

.viltsjo-one{color:var(--viltsjo-one);}
.viltsjo-two{color:var(--viltsjo-two);}
.viltsjo-three{color:var(--viltsjo-three);}
.viltsjo-four{color:var(--viltsjo-four);}
.viltsjo-five{color:var(--viltsjo-five);}
.viltsjo-six{color:var(--viltsjo-six);}
.viltsjo-seven{color:var(--viltsjo-seven);}
.viltsjo-eight{color:var(--viltsjo-eight);}
.viltsjo-nine{color:var(--viltsjo-nine);}

.darkmode {
  --viltsjo-one:#000005;
  --viltsjo-two:#050505;
  --viltsjo-three:#e0e0e0;
  --viltsjo-four:#fff;
  --viltsjo-five:#d81c23;
  --viltsjo-six:#6a0206;
  --viltsjo-seven:#212c3b;
  --viltsjo-eight:#7c756a;
  --viltsjo-nine:#e8b12f;
}

/* ------------------------------ DARK AND LIGHT -------------------------------------- */
#theme-switch {
  height:25px;
  padding: 7px;
  border-radius: 10%;
  background-color: #f9f9f9;
  border: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
}
#theme-switch:hover {
  background-color: gold;
  cursor: pointer;
}
#theme-switch i {
  fill: var(--viltsjo-one);
}
#theme-switch i:last-child {
  display: none;
}

.darkmode #theme-switch i:first-child {
  display: none;
}
.darkmode #theme-switch i:last-child {
  display: block;
}


/* ========================================================== RESET & BASE  ========================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--viltsjo-one);
  color: var(--viltsjo-four);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  overflow-y: scroll;

}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--viltsjo-five);
  text-decoration: none;
  transition: color var(--transition-fast);
}
a:hover {
  color: var(--viltsjo-five);
}

button {
  cursor: pointer;
  font: inherit;
}

/* ==========================================================  TYPOGRAPHY  ========================================================== */
h1, h2, h3, h4, h5, h6 {
  color: var(--viltsjo-four);
  line-height: 1.2;
  margin-top: var(--space-lg);
  margin-bottom: var(--space-md);
  font-weight: 600;
}

h1 { font-size: var(--text-xxl); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }
h4 { font-size: var(--text-md); }
h5 { font-size: var(--text-sm); }
h6 { font-size: var(--text-xs); text-transform: uppercase; }

p {
  margin-bottom: var(--space-md);
  color: var(--viltsjo-four);
}

small {
  font-size: var(--text-sm);
}

.title {
  font-family: tv;
  font-size: var(--text-xxl);
}
.megatext{
  font-family: tv;
  font-size: var(--text-xxxl);
}

.font-family-tv { font-family: tv; }
.uppercase { text-transform: uppercase; }
.underline {text-decoration: underline;}

.fat-link {
    color: var(--viltsjo-five);    
    text-decoration: none;        /* remove underline by default */
    font-weight: bold;
}

/* When hovered */
.fat-link:hover {
    color: var(--viltsjo-five);    
    text-decoration: underline;   /* show underline */
    text-decoration-color: var(--viltsjo-six);
    text-underline-offset: 3px;   /* makes it look clean and modern */
}

/* ========================================================== COLOR HELPERS ========================================================== */
.silver    { color:#f4f4f4; }
.grey      { color:#333333; }
.lightgrey { color:#999; }
.white     { color:#FFF; }
.black     { color:#000; }
.red       { color:#FF0000; }
.teal      { color:#48706f; }
.viltsjo_red { color:#d81c23; }
.gold      { color:#91763a; }
.purple    { color:#420c40; }
.blue      { color:#20109c; }
.pink      { color:#c22d74; }

.background-silver { background:#f4f4f4; }
.background-black  { background:#000; }
.background-white  { background:#FFF; }
.background-red    { background:#FF0000; }
.background-gold   { background:#91763a; }
.background-one    { background:var(--viltsjo-one); }
.background-two    { background:var(--viltsjo-two); }
.background-three  { background:var(--viltsjo-five); }
.background-four   { background:var(--viltsjo-four); }
.background-five   { background:var(--color-surface); }

/* ==========================================================   LAYOUT HELPERS   ========================================================== */
.flex {
  display: flex;
  gap: var(--space-md);
}

.flex.center {
  align-items: center;
  justify-content: center;
}

.grid {
  display: grid;
  gap: var(--space-md);
}

.section {
  padding: var(--space-xl) 0;
}

.center {
  text-align: center;
}

.space-xs { margin:var(--space-xs); }
.space-sm { margin:var(--space-sm); }
.space-md { margin:var(--space-md); }
.space-lg { margin:var(--space-lg); }
.space-xl { margin:var(--space-xl); }

.padding-xs { padding:var(--space-xs); }
.padding-sm { padding:var(--space-sm); }
.padding-md { padding:var(--space-md); }
.padding-lg { padding:var(--space-lg); }
.padding-xl { padding:var(--space-xl); }

/* ==========================================================  HEADER & NAVIGATION  ========================================================== */
header {
  padding: var(--space-md) 0;
  position: relative;
  top: 0;
  z-index: 1000;
}

.nav {
  font-family: tv;
}

/* nav wrapper */
header .nav {
  display: block; /* brand is hidden currently, so no flex needed */
}

/* center .menu inside .mainpage */
header .nav .mainpage {
  width: 1250px;
  margin: 0 auto;
  display: flex;
  justify-content: center;  /* centers .menu horizontally */
}

/* .menu can stay inline-block */
header .nav .mainpage .menu {
  display: inline-block;
}

header .nav > .menu {
  margin-left: auto;
  margin-right: auto;
}

/* language links (top left) */
.top-lang {
  position: relative;
  z-index: 99999;
  float:left;
  font-family: tv;
  font-size:var(--text-md);
  text-transform: uppercase;
  padding:var(--space-sm);
}
.top-lang a {
  color:#000;
}
.top-lang a:hover {
  color:var(--viltsjo-five);
}
.top-lang a.active {
  color: var(--viltsjo-five);
}

/* social icons (top right) */
.social {
  position: relative;
  z-index: 99999;
  display: flex;
  font-size:var(--text-md);
  padding:var(--space-sm);
}
.social a {
  color:var(--viltsjo-four);
}
.social a:hover {
  color:var(--viltsjo-five) !important;
}
.social div {
  padding-right:5px;
}
.top-social {
  float:right;
}
.logo {
  height:200px;
}
.logo-koala-lumpur {
  height:180px;
}



/* ==========================================================  SEARCH IN HEADER  ========================================================== */
.menu-item-search {
  display: inline-block;
  position: relative;
  top: -10px;
}

/* wrapper so we can show icon + border around the whole thing */
.search-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--viltsjo-four);;
  padding: 0 8px;
}

/* the actual input */
.search {
  border: none;
  outline: none;
  background: transparent;
  width: 100px;
  height: 16px;
  padding: 10px 8px 10px 26px; /* extra left space for icon */
  -webkit-transition: width 0.4s ease-in-out;
  transition: width 0.4s ease-in-out;
}

.search:focus {
  width: 250px;
}

/* placeholder in black */
.search::placeholder {
  color: var(--viltsjo-four);
  opacity: 1;
}

/* magnifier icon */
.search-icon {
  position: absolute;
  left: 8px;
  font-size: 0.9rem;
  color: var(--viltsjo-four);
  pointer-events: none;
}

/* full-width search results overlay */
#search-results {
  position: fixed;
  left: 0;
  right: 0;
  top: 80px;
  min-height: 250px;
  max-height: 450px;
  background: var(--viltsjo-one);
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
  z-index: 99999;
  overflow-y: auto;   /* was 'none' – invalid */
  display: none;
  font-size: var(--text-sm);
}

/* inner container – align with .mainpage width */
#search-results .search-results-inner {
  max-width: 1250px;
  margin: 0 auto;
  padding: 8px 16px 12px;
}

.search-result-item {
  padding: 6px 0;
  border-bottom: 1px solid #eee;
}
.search-result-item:last-child {
  border-bottom: none;
}
.search-result-item a {
  text-decoration: none;
  color: var(--viltsjo-four);
}
.search-result-item a:hover {
  color: var(--viltsjo-five);
}
.search-result-title {
  font-weight: 600;
  margin-bottom: 2px;
}
.search-result-meta {
  font-size: var(--text-xs);
  color: var(--viltsjo-four);
}
.search-result-snippet {
  font-size: var(--text-xs);
  color: #555;
}
.search-results-empty {
  padding: 6px 0;
  color: #777;
}

/* ==========================================================  MENU  ========================================================== */
.menu {
  display: inline-block;
  text-align: center;
}

.menu-item {
  display: inline-block;
  overflow:hidden;
  cursor: pointer;
}

.menu-item a {
  text-decoration: none;
  padding:5px;
  font-size:var(--text-lg);
  text-transform: uppercase;
  color:var(--viltsjo-four);
}
.menu-item a:hover {
  color:var(--viltsjo-five);
}
.menu-item a:not(.box) {
  font-size:var(--text-lg);
}

.menu-item-content a.box {
  font-size: var(--text-sm) !important;
}

.menu-item.feature {
  font-family: lato;
}

/* dropdown content */
.menu-item-content {
  box-sizing: border-box;
  display: none;
  position: absolute;
  left: 0;
  z-index: 1;
  width: 100%;
  background-color: #FFF;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  text-align: left;
  padding-left: 25%;
  font-family: lato;
}
.menu-item-content:hover {
  cursor: default;
}
.menu-item-content div:first-child img {
  height:225px;
  width:175px;
  float:left;
  padding:10px;
}
.menu-item-content div:nth-child(2) {
  margin-top:25px;
  color:000;
  font-size:var(--text-lg);
}
.menu-item-content div:nth-child(3) {
  margin-top:15px;
  color:#000;
  font-size:var(--text-xs);
  max-width: 70%;
}
.menu-item-content div:nth-child(4) {
  margin-top:15px;
}

.menu-item:hover .menu-item-content {
  display:block;
}

/* - - - RESPONSIVE MENU - - - */
.mini-menu-content{display: none;}
.mini-menu-toggle{display:none;}
.show{display: block;}


/* small box button used in dropdowns etc */
.box {
  display: inline-block;
  padding: 4px 18px;            /* top/bottom | left/right */
  border: 1px solid var(--viltsjo-five);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--viltsjo-five) !important;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none !important;
  transition: all 0.2s ease;
}
.box:hover {
    background: var(--viltsjo-five);
  color: #fff !important;
  text-decoration: none;
}

/* ========================================================== TO TOP   ========================================================== */
.thetop {
  height:0px;
  position: absolute;
  top:-50px;
  left:0px;
}
.totop {
  padding-right: 10px;
  position:fixed;
  top:85%;
  left:90%;
  font-size:80px;
}

/* ==========================================================  BUTTONS  ========================================================== */
.btn {
  display: inline-block;
  padding: var(--space-sm) var(--space-lg);
  border:2px solid var(--viltsjo-five);
  background: transparent;
  color: var(--viltsjo-five);
  font-weight: 600;
  transition: background var(--transition-base);
  text-transform: uppercase;
}
.btn:hover {
  background: var(--viltsjo-five);
  color:var(--viltsjo-one);
}

/* ========================================================== FORMS (generic)  ========================================================== */
input,
select,
textarea {
  background: transparent;
  border: 1px solid #000;
  color: var(--viltsjo-four);
  padding: var(--space-sm);
  width: 100%;
  font: lato;
}
input:focus,
textarea:focus,
select:focus {
  outline: 0;
}

/* ==========================================================   ANIMATIONS  ========================================================== */
.grow {
  display:inline-flex;
  transform: scale(1);
  transition: all 0.3s ease-out;
}
.grow:hover {
  display:inline-flex;
  transform: scale(1.2);
  cursor: pointer;
  transition: all 0.6s ease-out;
}





/* ------------------------------ LOADING SPINNER -------------------------------------- */
.spinner {
   width: 15px;
   height: 15px;
   border: 2px solid #fdd102;
   border-bottom-color: transparent;
   border-radius: 50%;
   display: inline-block;
   box-sizing: border-box;
   animation: rotation 1s linear infinite;
   }

   @keyframes rotation {
   0% {
       transform: rotate(0deg);
   }
   100% {
       transform: rotate(360deg);
   }
   } 
 #loader{
  display: none;
  width:100%;

  position: absolute;
  top:5px;
  left:0px;
  z-index:9999999999;
  
}
.loader-display {text-align: center;}
.loader-display-spinner {
	margin-top:3px;
	}
.loader-display-text {
	margin-top:5px;
	color:#fdd102;
	font-size:12px;
	
}
.loader-layout {
	margin:1px auto;
	vertical-align: middle;
	display: inline-block;
}




/* ==========================================================   LAYOUT   ========================================================== */
.splash {
  width:100%;
  height:1100px;
  background: var(--viltsjo-one) url(../images/kl.jpg) no-repeat;
  background-size: 100%;
  background-position: 0px 0px;
  margin-top:-200px;
  padding:200px;
}
.fullpage {
  width:100%;
  margin: auto;
}
.mainpage {
  width:1080px;
  margin: auto;
}
/* ==========================================================  SHARED CONTENT LAYOUT  ========================================================== */

.content-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 32px;
  align-items: flex-start;
}

.content-main {
  border: 0;
}

.content-sidebar {
  border-left: 2px solid red;
  padding-left: var(--space-md);
}

/* list view items (for “news” type lists etc) */
.content-link {
  text-decoration: none;
}

.content-item-title {
  margin-bottom: 2px;
   font-family: tv;
  color: var(--viltsjo-five);
}

.content-item-meta {
  font-size: var(--text-xs);
  color: var(--viltsjo-four);
  margin-bottom: 4px;
}

.content-item-excerpt {
  margin-bottom: 18px;
}

/* detail / article view */
.content-article {
  border: 0;
}

.content-title {
  margin-bottom: 6px;
  font-family: tv;
  color: var(--viltsjo-five);
}

.content-meta {
  font-size: var(--text-xs);
  color: var(--viltsjo-eight);
  margin-bottom: 10px;
}

.content-figure img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 0 16px 0;
}

.content-body {
  margin-bottom: 16px;
}

.content-back a {
  text-decoration: none;
}

/* sidebar headings & archive links */
.sidebar h3 {
  margin-top: 0;
}

.archives {
  display: block;
  font-size: var(--text-sm);
  margin-bottom: 4px;
}

.archives:hover {
  text-decoration: underline !important;
}

/* ==========================================================   MAIN CONTENT WRAPPER ========================================================== */
.container {
  position: relative;
  z-index: 2;
  margin-bottom: var(--footer-h); /* leaves real space before fixed footer */
  min-height: 100vh;
  background: var(--viltsjo-one);
  padding-bottom:50px;
}



/* ===== START SECTION (book teaser on front page) ===== */
.start {
  padding: var(--space-xl) 0;
  background:var(--viltsjo-one);
}

.start-layout {
  display: flex;
  align-items: flex-start;
  gap: var(--space-lg);
}

/* image column */
.start-image {
  flex: 0 0 320px;       /* fixed-ish column on desktop */
  max-width: 40%;
}
.start-image img {
  width: 100%;
  height: auto;
  display: block;
}

/* text column */
.start-text {
  flex: 1;
  font-size: var(--text-md);
  line-height: 1.6;
}
.start-text p:last-child {
  margin-bottom: 0;
}


/* ========================================================== COOKIES ========================================================== */
#noteBar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(20,20,20,0.95);
  color: #f1f1f1;
  text-align: center;
  padding: 14px 20px;
  font-size: 0.9rem;
  z-index: 9999;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.5);
  backdrop-filter: blur(6px);
}
html.cookie-accepted #noteBar {
  display: none !important;
}

/* cookie accept button */
#noteBar .ack-btn,
#noteBar button.ack-btn {
  display: inline-block;
  margin-left: 12px;
  padding: 8px 16px;
  border-radius: 10px;
  background: var(--viltsjo-five, #ffda44);
  color: #000 !important;
  font-weight: 700;
  text-decoration: none !important;
  border: 2px solid rgba(0,0,0,0.2);
  cursor: pointer;
  transition: transform .15s ease, background .15s ease;
  line-height: 1;
  vertical-align: middle;
}
#noteBar .ack-btn:hover {
  background: #fff;
  transform: translateY(-1px);
}


.parallax-one {
  background:#111111;height:800px;text-align:center;padding-top:150px;background:url(../images/malaysia1.jpg);background-size:cover;background-position:0px -800px;
  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.parallax-two {
  background:#111111;height:800px;text-align:center;padding-top:150px;background:url(../images/zoo_negara_2015.jpg);background-size:cover;background-position:0px -800px;
  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

 .home-news{
  max-width:1100px;
  margin:24px auto;
  padding:0 16px;
}
  .home-news .lead{display:block;padding:16px;border:1px solid #eee;border-radius:10px;margin-bottom:14px;background:var(--viltsjo-two)}
  .home-news .row{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
  .home-news .item{padding:12px;border:1px solid #eee;border-radius:10px;background:var(--viltsjo-one)}
  /* Make full news blocks clickable without looking like links */
.home-news a.lead,
.home-news a.item {
  color: inherit;              /* remove default link color */
  text-decoration: none;       /* no underline */
  display: block;              /* whole block is clickable */
}

/* Title should look like a link */
.home-news .lead h2,
.home-news .item h5 {
  color: var(--viltsjo-five);  /* your main link color */
  text-decoration: none;
}

/* Optional hover effect */
.home-news .lead:hover h2,
.home-news .item:hover h5 {
  text-decoration: underline;
}
.home-news .lead > div,
.home-news .item > div {
  font-size: var(--text-xs);         /* smaller text */
  color: var(--viltsjo-eight);       /* the muted gold-ish tone */
  margin-bottom: 6px;                /* a bit of breathing room */
}


/* ==========================================================  FOOTER ========================================================== */
footer {
  position: fixed;
  width: 100%;
  bottom:0;
  height: var(--footer-h);
  background: #111111 !important;
  padding: var(--space-md) 0;
  color: #9d9d9d;
  font-size: var(--text-sm);
  text-align: center;
  z-index:0;
}

.footer-copyright {
  color:#FFF;
}
.footer-logo {
  filter: invert(1);
  height:150px;
  margin:var(--space-md);
}
.social-footer {
  margin:var(--space-md);
}
.footer-links {
  margin:var(--space-md);
}
.footer-copyright {
  margin:var(--space-md);
  font-size:var(--text-xs);
}
.social-footer a {
  color:#9d9d9d;
}
.social-footer a:hover {
  color: var(--viltsjo-five);
}
.footer-links a {
  color:#9d9d9d;
}
.footer-links a:hover {
  color:#fff;
}