/* custom.css — edit and reload the browser to test styling changes.
 *
 * QUICK EDIT GUIDE — where to look for common changes:
 *   - Colors everywhere        -> the 4 variables right below.
 *   - Welcome title/subtitle   -> search for `content:` (2 hits, ~line 90).
 *   - Per-category description -> 2 active blocks right after the h1 rule
 *     (~line 135), for Brand Edu (15) and Stockist Edu (11) only — each
 *     `content:` is DUMMY placeholder text, edit directly.
 *   - Header search bar size   -> ".header .search" max-width.
 *   - Gap color between search
 *     bar and the white card   -> ".main.main--categories" padding-top.
 *   - Card color/border/shape  -> ".sections.sections--grid .section-inner".
 *   - Card width / how many
 *     fit per row               -> ".sections.sections--grid .section" flex basis (200px).
 *     Cards don't stretch to fill the row when there are few of them
 *     (flex-grow:0) — that's intentional, see the comment on that rule.
 *   - Card height (flatness)   -> ".sections.sections--grid .section > a" padding-bottom %.
 *   - Footer bar color         -> ".footer" at the bottom of this file.
 *   - Footer social icons      -> ".footer .menu-item[href*=...]::after" —
 *     real Whatsapp/Instagram/Facebook/Youtube links from the KB dashboard,
 *     matched by URL. Icon = icons8.com image (external, loads over the
 *     network each pageview) — swap the URL to change style/color/size.
 *     Add a 5th service? Add a matching [href*="..."] rule the same way.
 *   - Footer logo/address text -> ".footer .footer-menu::before" content
 *     (logo image is background-size:auto 2em — swap logo-footer.png for
 *     any file, it always renders at the same height as the header logo).
 *   - Footer "Hubungi Kami" /
 *     "Ikuti Kami" headings     -> ".footer .footer-menu>.menu::before /
 *     ::after" — on the <nav> itself, not the links, so they're not clickable.
 *   - Footer bottom copyright
 *     line                      -> this is the one REAL footer text field —
 *     edit it via the KB dashboard (Knowledge Base settings -> footer
 *     note), not here; this file only repositions it into a bottom bar.
 *
 * Anything marked "ponytail:" explains a workaround for a real Zammad CSS
 * conflict — read it before changing that rule, or your edit may get
 * silently overridden by Zammad's own stylesheet again.
 */

@import url("https://fonts.googleapis.com/css2?family=Sarabun:wght@400;500;600;700&display=swap");

/* EDIT: swap font everywhere on this KB */
body {
  font-family: "Sarabun", sans-serif;
}

/* ponytail: Zammad's own knowledge_base.scss sets `strong, b { font-weight: 500 }`
   — with Sarabun's regular weight at 400, bold only jumps to 500, which
   reads as barely-there instead of actually bold. Force real 700 on
   answer body content specifically (.article-content, the real wrapper
   class from answers/show.html.erb) rather than overriding strong/b
   globally, so we don't touch bold used elsewhere in the KB chrome. */
.article-content b,
.article-content strong {
  font-weight: 700;
}

:root {
  --evm-teal: #163a3f;
  /* EDIT: header text / card text / title color */
  --evm-green-bg: #d6f28f;
  /* EDIT: page background */
  --evm-green-card: #e9f8d8;
  /* EDIT: category card fill */
  --evm-green-border: #bfe28a;
  /* EDIT: category card border */
}

/* both header rows go edge-to-edge; only the inner content stays centered */
.header .container {
  max-width: none;
  width: 100%;
  margin: 0;
  box-sizing: border-box;
  padding-left: 24px;
  padding-right: 24px;
}

/* top row: logo + nav, keep white */
.header .container:first-child {
  background: #ffffff;
}

/* swap the branding logo image for the footer one — CSS-only, scoped to
   this KB (/help/ only), doesn't touch the real product_logo setting at
   all so the agent/admin app keeps whatever logo is actually configured */
.header .logo img {
  content: url("/custom/logo-footer.png"); /* EDIT: swap the header logo image */
}

.header .logo {
  padding: 16px 0; /* EDIT: space around the header logo */
}

/* search row: dark teal bar with a centered white pill search field */
.header .container:has(.search) {
  background: var(--evm-teal);
  padding-top: 24px;
  padding-bottom: 24px;
}

/* ponytail: Zammad's own .header has padding-bottom:0.9em + a border, which
   painted a plain white/gray strip between the teal bar and the green page
   below. Kill that, and add the equivalent gap as green padding on
   .main--categories instead — same visual space, right color. */
.header {
  padding-bottom: 0;
  border-bottom: none;
}

.main.main--categories {
  padding-top: 24px;
  /* EDIT: size of the green gap below the search bar */
}

.header .search {
  max-width: 700px;
  /* EDIT: how wide the search pill gets */
  margin: 0 auto;
}

.header .search-field {
  background: #ffffff;
  border-radius: 999px;
  padding: 4px 20px;
}

.header .search-field input {
  background: transparent;
}

/* page background */
body,
.main.main--categories {
  background: var(--evm-green-bg);
}

/* the categories container doubles as the white card, same treatment
   for the answer/article page so it matches (was plain green bg) */
.main.main--categories .container,
.main.main--article .container {
  background: #ffffff;
  border-radius: 16px;
  padding: 40px;
  max-width: 900px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.main.main--article {
  padding-top: 24px; /* EDIT: size of the green gap below the search bar, matches categories */
}

/* h1 only exists on sub-category pages, not the KB root */
.main.main--categories h1 {
  text-align: center;
  color: var(--evm-teal);
  margin-bottom: 24px;
}

/* Per-category description — Brand Edu (15) and Stockist Edu (11) only.
   Their own children do NOT get one (only matches each category's own
   <link rel="canonical">, not the breadcrumb, so it doesn't propagate to
   sub-pages). Same caveat as the welcome title/subtitle above: generated
   content, not a real DOM node, not translatable, not reliably read by
   screen readers. Text below is DUMMY placeholder — EDIT each one.
   New category needing one? Copy one block, swap the slug + text. */
html:has(link[rel="canonical"][href*="/10-brand-edu"]) .main.main--categories h1::after {
  content: "Anda berada di ekosistem sukses Evermos, di mana Brand Dashboard menjadi zona ikhtiar untuk mengatur dan mengembangkan bisnis lebih jauh lagi. Bingung memulainya bagaimana? Yuk, kamu bisa pilih kategori di bawah ini untuk memulai!";
  display: block;
  margin-top: 12px;
  font-size: 15px;
  font-weight: 400;
  color: #555;
  text-align: center;
}

html:has(link[rel="canonical"][href*="/12-stockist-edu"]) .main.main--categories h1::after {
  content: "Anda berada di ekosistem stockist Evermos";
  display: block;
  margin-top: 12px;
  font-size: 15px;
  font-weight: 400;
  color: #555;
  text-align: center;
}

/* ponytail: root page has no heading element at all, so this is generated
   text, not a real DOM node — hardcoded, not translatable, may be skipped
   by screen readers. Only fires when there's no real h1 (:not(:has(h1))),
   so it won't double up once you add real content. Rename a category to
   this exact title instead if you want a real, accessible, translatable h1. */
.main.main--categories .container:not(:has(h1))::before {
  content: "Selamat Datang di Evermos Edu";
  /* EDIT: title text */
  display: block;
  text-align: center;
  font-size: 26px;
  font-weight: 700;
  color: var(--evm-teal);
  margin-bottom: 12px;
}

/* subtitle: injected as the grid's first item, forced full-width via
   flex-basis so it wraps onto its own line above the cards */
.main.main--categories .container:not(:has(h1)) .sections--grid::before {
  /* EDIT: subtitle text */
  content: "Anda berada di ekosistem sukses Evermos";
  display: block;
  flex: 1 0 100%;
  box-sizing: border-box;
  text-align: center;
  color: #555;
  padding: 0 15%;
  margin-bottom: 24px;
}

/* category grid — flex-wrap (Zammad's own default display), not CSS grid:
   auto-fit's column math breaks when a flex-basis:100% pseudo shares the
   container, so stick with the layout mode that handles that predictably */
.sections.sections--grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  /* EDIT: center the row instead of left-aligning */
  gap: 12px; /* EDIT: space between cards */
}

/* ponytail: Zammad ships ".sections--grid .section-inner { @extend %box }"
   (2 classes) which beats a plain ".section-inner" (1 class) regardless of
   source order. Match its specificity so ours actually wins. Same for the
   78%-aspect-ratio box on the <a> (square-ish) — flattened to look like the
   reference cards instead. */
.sections.sections--grid .section {
  /* flex-grow:0 so cards keep a consistent size instead of stretching to
     fill the row when there are only 1-2 of them; flex-shrink:1 + min-width
     still let them shrink and wrap to fewer per row on narrow screens.
     basis is 25% (4 cols) minus a share of the gap — never more than 4
     per row, but min-width still forces fewer on narrower screens. */
  flex: 0 1 calc(25% - 9px); /* EDIT: 25%=4 cols max, 33.33%=3, 20%=5 */
  min-width: 160px; /* EDIT: how small a card can get before wrapping */
  width: auto;
}

.sections.sections--grid .section>a {
  padding-bottom: 45%;
  /* EDIT: card height as % of its width — higher = taller/squarer */
}

.sections.sections--grid .section-inner {
  background: var(--evm-green-card);
  border: 1px solid var(--evm-green-border);
  border-radius: 10px;
  box-shadow: none;
  text-align: center;
}

.sections.sections--grid .section-inner i {
  display: none;
  /* screenshot has no icons, just labels */
}

.sections.sections--grid .section-inner .title {
  color: var(--evm-teal);
  font-weight: 700;
}

/* ponytail: padding-bottom:45% aspect-ratio is width-relative — on a
   narrow phone the card stretches full-width, so 45% turns into a huge
   height with mostly empty space around the title. Drop the aspect trick
   below 480px and let the card size to its content instead. */
@media (max-width: 480px) {
  /* ponytail: the "PUBLISHED / EDIT KNOWLEDGE BASE" admin-preview topbar
     is a no-wrap flex row — its min-content width drags the whole page
     into horizontal scroll on a narrow phone. Real visitors never see this
     bar (admin-preview only, same gate as .not-published-note), so this is
     just so previewing on mobile doesn't break. */
  .topbar {
    flex-wrap: wrap;
    height: auto;
    row-gap: 4px;
  }
  .topbar-controls {
    flex-basis: 100%;
  }

  /* ponytail: the desktop calc(25% - 9px) + min-width:160px combo can't
     both be satisfied on a narrow phone (2 cards at 160px doesn't fit a
     ~300px inner width) — flexbox forces it anyway and overflows the
     page. One full-width card per row sidesteps the math entirely. */
  .sections.sections--grid .section {
    flex-basis: 100%;
    min-width: 0;
  }
  .sections.sections--grid .section > a {
    padding-bottom: 0;
  }
  .sections.sections--grid .section-inner {
    position: static;
    min-height: 70px; /* EDIT: mobile card height */
    /* Zammad's own small-phone breakpoint (<=576px, wider than this one)
       switches to a left-aligned icon+text row layout — cancel it back to
       centered column to match the reference cards */
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }
  .sections.sections--grid .section-inner > span {
    padding-left: 0; /* was 1em, spacing for their row layout's icon+text */
  }
}

/* admin-preview-only badge ("hidden, no published answers") — not part of
   the real public page, hide it so cards match the reference look */
.not-published-note {
  display: none;
}

/* admin-preview-only dimming for empty/unpublished categories (Zammad's
   .kb-item--empty { opacity: .5 }) — washes the teal title color out to
   gray. Won't affect real visitors once answers are published; overridden
   here just so the preview matches the intended final color now. */
.sections--grid .kb-item--empty {
  opacity: 1;
}

/* footer bar */
.footer {
  background: #f2f4f2;
  /* EDIT: footer background color */
  padding-top: 32px;
  /* EDIT: vertical space so text doesn't touch the edges */
}

/* align footer content with the white card above (max-width:900px + 40px
   padding there too) so "Evermos HQ" starts at the same x as the card text */
.footer .container {
  max-width: 900px;
  margin: 0 auto;
  padding-left: 40px;
  padding-right: 120px;
  box-sizing: border-box;
}

/* grid, not flex: need logo+heading (::before) stacked above the address
   body (::after) in col 1, while nav/language-picker sit in col 2 — flex
   can't stack 2 pseudo-elements in one column while a sibling column stays
   beside them (flex-basis:100% would force it to claim the WHOLE row, not
   just its column, pushing nav down too). Grid keeps columns independent. */
.footer .footer-menu {
  display: grid;
  grid-template-columns: 1fr auto auto;
  column-gap: 60px;
  row-gap: 4px;
  align-items: start;
}

/* Same caveat as the welcome title/subtitle above — generated content, not
   a real DOM node, not translatable, not reliably read by screen readers.
   There's no real field for this in the KB (the one real text field,
   .copyright below, is plain-text only). Split into ::before (logo +
   "Evermos HQ" heading) and ::after (address body) specifically so the
   heading can be bold/bigger — one `content:` run can't mix weights. */
.footer .footer-menu::before {
  /* EDIT: heading text.
     Logo sized via background-image, not content:url() mixed with text —
     width/height on generated *content* images is unreliable across
     browsers (same reason the footer social icons use background-image
     too). background-size: auto 2em matches Zammad's own default
     ".logo img { height: 2em }" used by the header logo, so both stay
     the same visual size regardless of the source file's real pixel
     dimensions — swap logo-footer.png for any size/aspect image safely. */
  content: "Evermos HQ";
  grid-column: 1;
  grid-row: 1;
  white-space: pre-line;
  font-size: 20px;
  /* EDIT: "Evermos HQ" heading size */
  font-weight: 700;
  /* EDIT: "Evermos HQ" heading weight */
  color: var(--evm-teal);
  line-height: 1.5;
  display: block;
  background-image: url("/custom/logo-footer.png");
  background-repeat: no-repeat;
  background-position: top left;
  background-size: auto 2em; /* EDIT: logo height — matches header logo */
  padding-top: calc(2em + 12px); /* EDIT: gap between logo and heading text */
}

.footer .footer-menu::after {
  /* EDIT: address text (use \A for a line break, needs white-space: pre-line) */
  content: "Jl. Ir. H. Juanda No.95, Lb. Siliwangi,\A Kecamatan Coblong, Kota Bandung,\A Jawa Barat 40132";
  grid-column: 1;
  grid-row: 2;
  display: block;
  white-space: pre-line;
  font-size: 15px;
  /* EDIT: address text size */
  line-height: 1.7;
  color: #333;
  margin-top: 8px;
}

/* right column: the 4 real admin-configured links (Whatsapp/Instagram/
   Facebook/Youtube, added via the KB dashboard's footer menu items) as
   icon buttons, matched by their real href — not by position, so this
   survives reordering/adding links. These stay real <a> tags, fully
   clickable, unlike the address block and the two headings below, which
   are generated text sharing the same caveat as the title/subtitle. */
/* ponytail: headings live on <nav> itself (not on the <a> icons) so they
   stay plain text — attaching them to the links made the whole heading
   clickable too, since pseudo-content inside an <a> is still part of it. */
.footer .footer-menu>.menu {
  grid-column: 2;
  grid-row: 1 / span 2;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-top: 30px;
  /* room for the "Hubungi Kami" label above the first icon */
}

.footer .footer-menu>.menu::before,
.footer .footer-menu>.menu::after {
  position: absolute;
  left: 0;
  font-size: 18px; /* EDIT: heading size */
  font-weight: 700;
  color: var(--evm-teal);
  white-space: nowrap;
}

.footer .footer-menu>.menu::before {
  content: "Hubungi Kami"; /* EDIT: heading above Whatsapp */
  top: -28px;
}

.footer .footer-menu>.menu::after {
  /* 30px (whatsapp) + 10px gap + 32px (instagram's margin-top) - 28px offset */
  content: "Ikuti Kami"; /* EDIT: heading above Instagram/Facebook/Youtube */
  top: 44px;
}

.footer .footer-menu>.language-picker {
  display: none;
}

/* ponytail: icons8 "ios-filled" icons are already a complete rounded-square
   tile (teal bg + white glyph baked into the PNG) — no need for our own
   circle behind them, that just doubled up as a white ring around the tile.
   Sized via background-image, not content:url() — width/height on
   generated *content* images is unreliably honored across browsers, which
   is why the icon was rendering bigger than its clickable box before (tap
   target and visible icon didn't match). background-size is reliable. */
.footer .menu-item {
  position: relative;
  display: block;
  width: 30px; /* EDIT: icon size — keep in sync with the icons8 URL px below */
  height: 30px;
  font-size: 0; /* hides the link's real text label, without clipping the
                   heading pseudo-elements below (no overflow:hidden) */
}

.footer .menu-item[href*="instagram.com"] {
  margin-top: 32px;
  /* room for the "Ikuti Kami" label above this group */
}

/* icons — real PNGs from icons8 (external, loaded over network each page
   view; not self-contained, breaks offline / if icons8 is down). EDIT the
   URL to swap icon style/color/size (url params: ios-filled/<px>/<hex>/<name>) —
   keep the px here matching .menu-item's width/height above. */
.footer .menu-item[href*="wa.me"]::after,
.footer .menu-item[href*="whatsapp.com"]::after,
.footer .menu-item[href*="facebook.com"]::after,
.footer .menu-item[href*="instagram.com"]::after,
.footer .menu-item[href*="youtube.com"]::after {
  content: "";
  position: absolute;
  inset: 0;
  background-size: contain;
  background-repeat: no-repeat;
}

.footer .menu-item[href*="wa.me"]::after,
.footer .menu-item[href*="whatsapp.com"]::after {
  background-image: url("https://img.icons8.com/ios-filled/30/024751/whatsapp.png");
}

.footer .menu-item[href*="facebook.com"]::after {
  background-image: url("https://img.icons8.com/ios-filled/30/024751/facebook-new.png");
}

.footer .menu-item[href*="instagram.com"]::after {
  background-image: url("https://img.icons8.com/ios-filled/30/024751/instagram-new.png");
}

.footer .menu-item[href*="youtube.com"]::after {
  background-image: url("https://img.icons8.com/ios-filled/30/024751/youtube-play.png");
}

/* bottom bar: the one real footer text field there is — edit the actual
   text via the KB dashboard (Knowledge Base settings -> footer note)
   rather than faking it here, that field is plain-text but real/editable */
.footer .copyright {
  grid-column: 1 / -1;
  grid-row: 3;
  text-align: center;
  padding-top: 16px;
  border-top: 1px solid #e2e2e2;
  color: #888;
  font-size: 13px;
}