/* Mobile support shim for the legacy tender_home pages — added 2026-08.
 *
 * Why this exists: each page used to run Mobile_Detect and redirect phones to
 * /m/ (or the bare homepage), which DISCARDED the requested URL — every deep
 * link, including chatbot citations and the mobile site's own links, landed on
 * a homepage. The redirects were removed, so these desktop pages now serve
 * phones directly and need to reflow.
 *
 * Rules are confined to `@media (max-width: 900px)`, so desktop rendering is
 * byte-for-byte unchanged. !important is required because the fixed widths
 * live in inline style attributes.
 */

@media (max-width: 900px) {

  /* --- 1. Fluid shells: the 1000/1010/800px boxes ------------------------ */
  [style*="width:1000px"], [style*="width: 1000px"],
  [style*="width:1010px"], [style*="width: 1010px"],
  [style*="width:800px"],  [style*="width: 800px"] {
    width: auto !important;
    max-width: 100% !important;
  }
  nav, .menu, .wrapper, .header-shining, .header-indent {
    width: auto !important;
    max-width: 100% !important;
    float: none !important;
  }
  table[width="1000"], table[width="800"] { width: 100% !important; }
  /* A table can never render narrower than its cells' declared pixel widths —
   * table-layout:fixed does not help while <td width="250"> survives. Percent
   * widths are kept: the layout rules above depend on them. */
  table[width]:not([width*="%"]) { width: 100% !important; }
  td[width]:not([width*="%"]),
  th[width]:not([width*="%"]) { width: auto !important; max-width: 100% !important; }
  /* the ticker sits a few px past the viewport on narrow phones */
  marquee, .mainbottom { max-width: 100% !important; }
  /* Slider tracks and tickers are intentionally wider than the screen; their
   * wrapper must clip them or the page itself scrolls sideways. */
  .owl-stage-outer, marquee { overflow: hidden !important; }
  /* The homepage carousel track still pokes 3-4px past a 320px screen; the
   * content itself fits, so clip at the page level rather than fight the
   * slider's transforms. */
  body.ti-home { overflow-x: hidden !important; }
  .header-shining { min-height: 0 !important; margin-bottom: 12px !important; }

  /* --- 2. Media never overflows the viewport ----------------------------
   * min-width is the real hazard: several CMS images carry inline
   * `min-width:225px`, which refuses to shrink inside a narrow column. */
  img:not([style*="height"]), iframe, video, embed, object {
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
  }
  /* An image that declares its own height (logo rows, flyers) keeps it —
   * overriding it to auto re-inflates a 170px logo to full-bleed. Cap the
   * width and let object-fit prevent distortion. */
  img[style*="height"] {
    max-width: 100% !important;
    min-width: 0 !important;
    object-fit: contain;
  }
  /* --- 3. Header: logo / tagline / contact stack instead of colliding --- */
  .ti-stack-header, .ti-stack-header > tbody, .ti-stack-header > tbody > tr { display: block !important; width: 100% !important; }
  .ti-stack-header > tbody > tr > td {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    padding: 2px 0 !important;
  }

  /* --- 4. Top nav becomes a wrapping, touch-sized menu ------------------ */
  .menu {
    display: flex !important;
    flex-wrap: wrap !important;
    min-height: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    background-color: #151138 !important;
  }
  .menu > li {
    float: none !important;
    padding: 0 !important;
    background: none !important;
    flex: 1 1 auto;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
  }
  .menu > li > a {
    display: block !important;
    font-size: 14px !important;
    padding: 12px 8px !important;   /* >=44px touch target */
    white-space: nowrap;
  }

  /* --- 5. Page body: one column, ARTICLE FIRST, sidebar below ----------
   * The layout table carries an explicit .ti-stack class (added per page), so
   * CMS-authored tables that happen to use rowspan are never restructured.  */
  .ti-stack, .ti-stack > tbody { display: block !important; width: 100% !important; }
  .ti-stack > tbody > tr {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
  }
  .ti-stack > tbody > tr > td {
    display: block !important;
    width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  /* the content cell is the rowspan'd one — pull it above the rubrik index */
  .ti-stack > tbody > tr > td[rowspan] { order: -1 !important; }
  /* spacer column is pure desktop gutter */
  .ti-stack > tbody > tr > td[width="1%"] { display: none !important; }
  /* the content cell is the rowspan'd / full-width one — pull it above the
   * rubrik index (the 13 rubrik-style pages use rowspan, tender.php uses 100%) */
  .ti-stack > tbody > tr > td[rowspan],
  .ti-stack > tbody > tr > td[width="100%"] { order: -1 !important; }
  /* --- 6. Wide CMS tables scroll sideways instead of widening the page ---
   * A table ignores width:100% when its content needs more room (table layout
   * uses min-content), so nested tables become scrollable blocks instead. */
  /* Any table that is not one of the two layout tables gets the same
   * treatment - top-level tables overflow the page otherwise. */
  /* Inner tables FIT by default. Making every one a scroll box turned the
   * article's single-column wrapper into a sideways scroller, so the whole
   * page had to be dragged left/right to read it. Only tables that JS proves
   * are genuinely too wide get .ti-scrollable (see mobile-enhance.js). */
  /* Content tables FIT by default. max-width alone cannot shrink a table
   * below its content's min-width (a 580px image inside keeps it 610px wide),
   * so the article needs a fixed layout: then cells get a share of 100% and
   * images/text shrink to match. JS only overrides this for tables with more
   * columns than a phone can show (see mobile-enhance.js). */
  table:not(.ti-stack):not(.ti-stack-header),
  td table {
    max-width: 100% !important;
  }
  /* .ti-fit is applied by mobile-enhance.js ONLY to tables that actually
   * overflow. Forcing it on every content table starved the article image's
   * column: fixed layout splits the width by the first row's cells, so a
   * full-width scan ended up in a third of the screen. */
  /* Text/data tables get a fixed layout straight from CSS so the page fits at
   * FIRST PAINT — relying on JS meant a visible flash of a sideways-scrolling
   * page. Tables containing images are exempt: fixed layout would split the
   * width by the first row and starve the scan's column, and those tables
   * cannot overflow anyway because media is capped to the viewport below. */
  /* Two kinds of legacy table, two treatments — both fit at first paint:
   *   - text/data tables  -> fixed layout, cells share 100% and text wraps
   *   - tables with media -> STACK them. They are layout scaffolding, and
   *     stacking both removes the overflow and gives the scan the full width
   *     (fixed layout would hand it 1/N of the row instead). */
  td table:not(:has(img)):not(.ti-scrollable),
  table.ti-fit {
    table-layout: fixed !important;
    width: 100% !important;
  }
  td table:has(img):not(.ti-scrollable),
  td table:has(img):not(.ti-scrollable) > tbody,
  td table:has(img):not(.ti-scrollable) > tbody > tr,
  td table:has(img):not(.ti-scrollable) > tbody > tr > td {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  /* Cap media against the VIEWPORT, not the container. A percentage max-width
   * inside an auto-layout table is circular (the cell is sized by its content),
   * which is why a 580px scan kept the table 610px wide. A vw cap breaks that
   * loop and lets the image fill the screen instead of shrinking. */
  /* EVERY image is capped against the viewport, not its container. Inside an
   * auto-layout table a percentage max-width is circular (the cell is sized by
   * its content), so an oversized image silently widens the whole page — which
   * is what still broke /news and /registrasi. A vw cap cannot be circular. */
  img, object, video, iframe, embed {
    max-width: calc(100vw - 18px) !important;
  }
  /* An embed indented by its parent still overflows a viewport-based cap
   * (offset + width > screen), so size embeds relative to their container. */
  iframe:not([width="1"]):not([height="1"]), video, embed {
    width: 100% !important;
    max-width: 100% !important;
  }
  /* The article scan is the point of the page — let it use the full column. */
  .ti-stack > tbody > tr > td[rowspan] img,
  .ti-stack > tbody > tr > td[width="100%"] img {
    width: 100% !important;
    max-width: calc(100vw - 18px) !important;
    height: auto !important;
  }
  .ti-stack td table td, .ti-stack td table th,
  table.ti-fit td, table.ti-fit th { word-break: break-word; overflow-wrap: anywhere; }
  table.ti-scrollable {
    display: block !important;
    overflow-x: auto !important;
    table-layout: auto !important;
    width: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Carousel caption blocks and any content div carry fixed pixel widths in
   * this theme (600px); nothing inside the article may exceed its column. */
  td div,
  .new-caption-area,
  [class*=caption-area] {
    max-width: 100% !important;
  }
  .new-caption-area, [class*=caption-area] { width: auto !important; }

  /* Bootstrap carousel wrappers carry a fixed 600px width in this theme. */
  .bs-example, .carousel, .carousel-inner, .carousel-item, .item {
    width: auto !important;
    max-width: 100% !important;
  }

  /* --- 6b. Fixed-width containers that set their width in CSS, not inline - */
  #header, #header2, #footer, #footer2, #wrapper, #container, #main, #content,
  table[id^="AutoNumber"] {
    width: auto !important;
    max-width: 100% !important;
  }

  /* Decorative fullscreen background slideshow: fixed 1020px and pure weight
   * on a phone. */
  #cbp-bislideshow { display: none !important; }

  /* --- 7. Reading comfort ---------------------------------------------- */
  body { -webkit-text-size-adjust: 100%; }
  .ti-stack td p, .ti-stack td li, .ti-stack td span { line-height: 1.55; }
  .ti-stack > tbody > tr > td[rowspan] font[size="3"] { font-size: 16px !important; }

  /* --- 8. Footer strip ------------------------------------------------- */
  #AutoNumber52, table[id^="AutoNumber"] {
    width: 100% !important;
    height: auto !important;
  }

  /* --- 9. Legacy float grid: 24% columns are unusable at phone width, and
   * their 10px padding must live inside the box. ------------------------- */
  .column {
    width: 50% !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
  }
  .ti-stack > tbody > tr > td,
  .ti-stack-header > tbody > tr > td { box-sizing: border-box !important; }

  /* --- 10. Homepage (body.ti-home) ------------------------------------
   * The homepage is built from nested layout tables plus 100vh hero cells.
   * The generic scroll-box treatment above collapses its cells to ~63px, so
   * here tables STACK instead: rows become wrapping flex lines and cells
   * become full-width blocks. */
  .ti-home table, .ti-home tbody {
    display: block !important;
    overflow: visible !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .ti-home tr {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
  }
  .ti-home td, .ti-home th {
    display: block !important;
    flex: 1 1 240px !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    box-sizing: border-box !important;
  }

  /* 100vh hero cells leave giant empty gaps on a phone */
  .ti-home [style*="100vh"], .ti-home .mainUtama, .ti-home .mainUtama2 {
    height: auto !important;
    min-height: 0 !important;
  }

  /* the 50/50 and 25% float grids stack */
  .ti-home .column50, .ti-home .column {
    float: none !important;
    width: 100% !important;
    padding-bottom: 20px !important;
    box-sizing: border-box !important;
  }

  /* header / nav strip */
  .ti-home #headerUtama, .ti-home .nav, .ti-home .main_nav {
    width: auto !important;
    max-width: 100% !important;
  }
  .ti-home .main_nav { display: flex !important; flex-wrap: wrap !important; padding-left: 0 !important; }
  .ti-home .main_nav > li { float: none !important; flex: 1 1 auto; list-style: none; }

  /* the news ticker keeps its own clipping */
  .ti-home marquee { width: 100% !important; max-width: 100% !important; }

  /* homepage: logo/icon grids stay 2-up, and capped in height — the global
   * img{height:auto} above otherwise blows inline height:170px logos up to
   * full-bleed. */
  .ti-home .column { width: 50% !important; padding: 8px !important; }
  .ti-home .column img, .ti-home .column image {
    max-height: 96px !important;
    width: auto !important;
    max-width: 100% !important;
    display: block;
    margin: 0 auto;
    object-fit: contain;
  }

  /* W3.CSS absolute overlays sit on top of the hero art on a narrow screen;
   * drop them into normal flow so the copy is readable. */
  .ti-home .w3-display-container { position: static !important; }
  .ti-home [class*="w3-display-"] {
    position: static !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* the date ticker is absolutely positioned and lands mid-page on a phone */
  .ti-home .mainbottom { position: static !important; width: 100% !important; }

  /* cells the author marked as half-width stay 2-up instead of stacking */
  .ti-home td[width="50%"] { flex: 1 1 45% !important; }

  /* Portrait flyers sized in vh get a full-width row of their own — squeezed
   * into a half cell they letterbox to a 152px sliver. */
  .ti-home td:has(img[style*="vh"]) { flex: 1 1 100% !important; }
  .ti-home img[style*="vh"] { height: auto !important; max-height: 70vh !important; }

  /* Hero copy sits directly on the photo; a translucent panel keeps it
   * readable at phone size without touching the desktop composition. */
  .ti-home .section-title {
    background: rgba(255, 255, 255, .88) !important;
    padding: 12px 10px !important;
    border-radius: 6px;
  }

  /* Hero copy overlaps the slideshow photo behind it at phone width; the one
   * cell holding it (verified: a single match on the homepage) gets a
   * translucent panel so the text stays readable. */
  .ti-home td:has(> u) {
    background: rgba(255, 255, 255, .88) !important;
    border-radius: 6px;
    padding: 12px 10px !important;
  }

  /* --- 11. Best-practice mobile ergonomics ------------------------------
   * Measured defects this addresses: tap targets under 44px, form fields
   * under 16px (iOS zooms the page on focus), tables that scroll with no
   * affordance, and notch-area clipping. */

  html { -webkit-text-size-adjust: 100%; }
  body {
    -webkit-tap-highlight-color: rgba(0, 0, 0, .08);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }

  /* Long words, URLs and IDs must not force a horizontal scrollbar. */
  .ti-stack td, .ti-home td, p, li, dd, dt { overflow-wrap: break-word; }

  /* 44px minimum touch target for navigation and list links. Inline links
   * inside running prose are left alone on purpose. */
  nav a,
  .menu > li > a,
  .main_nav a,
  .ti-stack li > a,
  .ti-home li > a {
    display: block;
    min-height: 44px;
    padding: 11px 10px;
    line-height: 1.4;
    box-sizing: border-box;
  }

  /* Form fields: 16px stops iOS zooming on focus; 44px is the touch floor. */
  input:not([type=hidden]):not([type=checkbox]):not([type=radio]),
  select,
  textarea {
    font-size: 16px !important;
    min-height: 44px;
    max-width: 100% !important;
    padding: 8px 10px;
    box-sizing: border-box !important;
  }
  input[type=checkbox], input[type=radio] { min-width: 24px; min-height: 24px; }
  input[type=submit], input[type=button], button {
    min-height: 44px;
    padding: 10px 18px;
    font-size: 16px !important;
  }
  label { display: inline-block; padding: 4px 0; }

  /* Scrollable tables get a visible edge hint (set by mobile-enhance.js). */
  table.ti-scrollable {
    background-image: linear-gradient(to right, rgba(0,0,0,.10), rgba(0,0,0,0) 24px);
    background-attachment: local;
  }
  table.ti-scrollable::after { content: ; }

  /* --- collapsible navigation ------------------------------------------ */
  .ti-nav-toggle {
    display: block;
    width: 100%;
    margin: 0 0 4px;
    padding: 12px 14px;
    border: 0;
    border-radius: 5px;
    background: #151138;
    color: #fff;
    font: 600 16px/1.2 system-ui, sans-serif;
    text-align: left;
  }
  .ti-nav-bars {
    display: inline-block;
    width: 18px;
    height: 2px;
    margin-right: 8px;
    background: currentColor;
    box-shadow: 0 6px 0 currentColor, 0 -6px 0 currentColor;
    vertical-align: middle;
  }
  .ti-nav-collapsed { display: none !important; }
  .ti-nav-open {
    display: block !important;
    background-color: #151138 !important;
  }
  .ti-nav-open > li { display: block !important; width: 100% !important; }
  /* Anchors that only wrap an image collapse to a baseline-height box, which
   * measures as a sub-44px tap target even though the image is large. */
  a:has(img), .owl-item a { display: inline-block; }
  .owl-item a > img { display: block; }

  /* A link that is the only thing in its container is navigation, not prose —
   * give it a real touch target. */
  .ti-home div:has(> a:only-child) > a,
  .ti-home td:has(> a:only-child) > a,
  .ti-stack div:has(> a:only-child) > a {
    display: block;
    min-height: 44px;
    padding: 11px 0;
    box-sizing: border-box;
  }
  .ti-skip { min-height: 44px; }

  /* Remaining sub-44px targets are grid captions and links wrapped in legacy
   * <font> tags. Prose links are deliberately excluded — only links that are
   * the sole content of their cell/wrapper are treated as navigation. */
  .column a,
  font > a,
  td > a:only-child {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }


  /* tap-to-enlarge affordance for embedded magazine scans */
  a.ti-zoom { display: block; position: relative; }
  a.ti-zoom::after {
    content: "⤢";
    position: absolute;
    right: 6px;
    bottom: 6px;
    background: rgba(0, 0, 0, .6);
    color: #fff;
    font-size: 15px;
    line-height: 1;
    padding: 7px 9px;
    border-radius: 4px;
  }

}

/* ---------------------------------------------------------------------------
 * Accessibility + input ergonomics. These are correctness fixes, not layout,
 * so they apply at every width.
 * ------------------------------------------------------------------------ */

.ti-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  background: #151138;
  color: #fff;
  padding: 12px 16px;
  border-radius: 0 0 6px 0;
  font: 600 15px/1.2 system-ui, sans-serif;
  text-decoration: none;
}
.ti-skip:focus { left: 0; }

/* A visible focus ring: the legacy CSS removes outlines in places. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid #2fd5f7 !important;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

}