/* =============================================================================
   u88-layout.css — single source of truth for page layout, measure and heading
   typography on playu88.com.

   Enqueued after `u88-app` (the compiled /assets/index-*.css design bundle), so
   equal-specificity rules here win. Nothing in this file changes copy, markup or
   the site header/footer structure.

   Why it exists: three pages (casino-payment-guide, welcome-bonus, cashback) each
   carried their own <style> block in post_content, written at different times by
   different hands. Each one repaired the same two defects for its own page only:

     1. the design bundle inherits Tailwind preflight's
        `h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}` reset, and then
        never restores font-weight anywhere. Every heading on the site outside the
        home hero was rendering at weight 400, i.e. as body text.
     2. `.info-section` — the wrapper interior pages use for long-form copy — had
        no typography rules at all, so its h2/h3/h4/p rendered at 16px/400 and its
        inline links were the same colour as the paragraph around them.

   Those three <style> blocks have been removed from post_content; their rules are
   here, applied to all 31 pages instead of 3.
   ========================================================================== */


/* ---------------------------------------------------------------------------
   1. MEASURE — the content column is `.shell` (1240px) and nothing is narrower
   ---------------------------------------------------------------------------
   The bundle caps assorted blocks at 760 / 780 / 800 / 850 / 900px and the
   removed page styles added 74ch on top. A heading capped narrower than the
   paragraph beneath it reads as misalignment, and per-page caps meant the same
   copy sat at a different measure on every URL. Cap the container, never the
   element: no `ch` limits, so every block resolves to one identical width
   regardless of its own font-size.                                            */

.section-head,
.faq,
.page-faq,
.cta h2,
.vip p,
.inner-highlight h2 { max-width: none; }

/* Banner rows are flex; without a flex basis the heading shrink-wraps its own
   text, so the same banner measured 731 / 733 / 747 / 748 / 900px across pages.
   Giving the text column the remaining space makes it one deterministic width. */
.inner-cta > .shell > div,
.vip-inner > div        { flex: 1 1 auto; min-width: 0; }
.inner-cta > .shell > a,
.vip-inner > a          { flex: 0 0 auto; }

/* Inset callouts share one inset, so their copy lands on one identical width. */
.answer-box,
.note-line,
.u88-formula {
  max-width: none;
  border-left: 4px solid #e8c456;
  padding-left: 32px;
  padding-right: 32px;
}


/* ---------------------------------------------------------------------------
   2. HEADINGS — restore the weights the preflight reset stripped
   --------------------------------------------------------------------------- */

.inner-hero h1,
.hero h1                { font-weight: 800; }

.section-head h2,
.dark-section h2,
.vip h2,
.cta h2,
.inner-cta h2,
.inner-highlight h2,
.info-section > h2      { font-weight: 800; }

.feature-card h3,
.games-grid h3,
.steps-grid h3,
.inner-cards h2,
.inner-cards h3,
.entity h4,
.footer-grid h4,
.info-section > h3,
.info-section h4        { font-weight: 700; }

/* `.hero h2` is the home hero's 17px sub-line and stays at its designed 500. */


/* ---------------------------------------------------------------------------
   3. .info-section — long-form copy, previously styled on 3 of 31 pages
   --------------------------------------------------------------------------- */

.info-section > h2 {
  color: #0c4f0d;
  font-size: 30px;
  line-height: 1.28;
  letter-spacing: -.5px;
  margin: 0 0 16px;
}
.info-section > * + h2  { margin-top: 44px; }

.info-section > h3 {
  color: #0c5a18;
  font-size: 20px;
  line-height: 1.4;
  margin: 34px 0 10px;
}

.info-section h4 {
  color: #0c4f0d;
  font-size: 17px;
  line-height: 1.45;
  margin: 22px 0 9px;
}

.info-section > p {
  color: #4c5a50;
  font-size: 16px;
  line-height: 1.8;
  margin: 0 0 18px;
}

.info-section > ul,
.info-section > ol,
.step-list,
.terms-list {
  color: #4c5a50;
  font-size: 16px;
  line-height: 1.8;
  margin: 0 0 18px;
  padding-left: 24px;
}
.info-section > ul,
.info-section > ul.step-list  { list-style: disc; }
.info-section > ol,
.step-list,
.terms-list                   { list-style: decimal; }
.info-section > ul > li,
.info-section > ol > li,
.step-list > li,
.terms-list > li              { margin: 0 0 11px; padding-left: 4px; }

/* Inline links inside prose were inheriting the paragraph colour, i.e. invisible.
   Scoped to p/li/td so the `.context-links` link cards keep their button look. */
.info-section p > a,
.info-section li > a,
.info-section td > a {
  color: #127113;
  font-weight: 600;
  border-bottom: 1px solid #b7d4b9;
}
.info-section p > a:hover,
.info-section li > a:hover,
.info-section td > a:hover { border-bottom-color: #127113; }

/* Accordion answers were the one prose block left at 14px. Sharing a pixel
   measure with 16px prose while running 14px type meant the same column carried
   ~166 characters per line against prose's ~150. Same size, same measure. */
.page-faq details p,
.faq-list details p { font-size: 16px; }


/* --- Single lever for the overall measure -----------------------------------
   The content column is deliberately set to the wide end (the full 1240px shell),
   which lands prose at roughly 150 characters per line. If that ever needs
   narrowing, change it in ONE place by uncommenting the block below: it caps
   every prose block at the same pixel value, so they all stay level with each
   other. Do not cap in `ch` — `ch` resolves against each element's own
   font-size, which is how the ragged measure this file replaced came about.

   .info-section > p, .info-section > ul, .info-section > ol,
   .step-list, .terms-list, .page-faq details p, .faq-list details p,
   .answer-box p, .entity p, #u88-unique-block p { max-width: 860px; }
   ------------------------------------------------------------------------- */


/* ---------------------------------------------------------------------------
   4. Blocks that only existed inside the removed page styles
   --------------------------------------------------------------------------- */

.entity-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  margin: 20px 0 6px;
}
.entity {
  background: #fff;
  border: 1px solid #dfebdf;
  border-radius: 18px;
  padding: 24px;
  box-shadow: 0 10px 30px #073e130a;
  min-width: 0;
}
.entity p          { color: #4c5a50; font-size: 15px; line-height: 1.8; margin: 0 0 12px; }
.entity p:last-child { margin-bottom: 0; }

.note-line {
  background: #eef7e9;
  border-radius: 0 14px 14px 0;
  padding-top: 20px;
  padding-bottom: 20px;
  margin: 22px 0 0;
}
.note-line p       { color: #344b39; font-size: 15px; line-height: 1.8; margin: 0; }

.u88-formula {
  background: #eef7e9;
  border-radius: 0 18px 18px 0;
  margin: 0 0 22px;
  padding-top: 24px;
  padding-bottom: 24px;
}
.u88-formula span  { display: block; color: #718075; font-size: 12px; letter-spacing: 1.6px; font-weight: 800; margin-bottom: 9px; }
.u88-formula b     { display: block; color: #0c4f0d; font-size: 18px; line-height: 1.45; letter-spacing: -.3px; overflow-wrap: break-word; }


/* ---------------------------------------------------------------------------
   5. GRID ORPHANS — last row must fill the row
   ---------------------------------------------------------------------------
   Rules are keyed to the exact child count, never a blanket column cap: a
   four-item row that already fills its row must keep four columns.
   Desktop and tablet resolve different column counts, so each gets its own rule. */

/* --- .inner-cards: 3 columns on desktop --- */
@media (min-width: 901px) {
  /* 4 items -> 2 x 2 */
  .inner-cards:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* 5 items -> 3 + 2, on a 6-track grid so both rows run full width */
  .inner-cards:has(> :nth-child(5):last-child) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .inner-cards:has(> :nth-child(5):last-child) > *              { grid-column: span 2; }
  .inner-cards:has(> :nth-child(5):last-child) > :nth-child(4),
  .inner-cards:has(> :nth-child(5):last-child) > :nth-child(5)  { grid-column: span 3; }
  /* 7 items -> 3 + 4 */
  .inner-cards:has(> :nth-child(7):last-child) { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .inner-cards:has(> :nth-child(7):last-child) > *              { grid-column: span 3; }
  .inner-cards:has(> :nth-child(7):last-child) > :nth-child(1),
  .inner-cards:has(> :nth-child(7):last-child) > :nth-child(2),
  .inner-cards:has(> :nth-child(7):last-child) > :nth-child(3)  { grid-column: span 4; }
}

/* --- .inner-cards: 2 columns at 641-900px.
   The bundle spans the last child full width unconditionally, which is right for
   an odd count and wrong for an even one (4 items became 2 + 1 + 1). --- */
@media (min-width: 641px) and (max-width: 900px) {
  .inner-cards > article:last-child,
  .inner-cards > :last-child                                     { grid-column: auto; }
  .inner-cards:has(> :nth-child(odd):last-child) > :last-child    { grid-column: 1 / -1; }
}

/* --- .context-links: 4 columns on desktop, 2 below --- */
@media (min-width: 901px) {
  .context-links:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .context-links:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .context-links:has(> :nth-child(5):last-child) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .context-links:has(> :nth-child(6):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .context-links:has(> :nth-child(7):last-child) { grid-template-columns: repeat(7, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .context-links:has(> :nth-child(odd):last-child) > :last-child { grid-column: 1 / -1; }
}

/* --- .inner-highlight bullet list: 2 columns, odd tail spans both --- */
.inner-highlight ul > li:nth-child(odd):last-child { grid-column: 1 / -1; }

/* --- home hero language row. The bundle spans the first link across both
   columns unconditionally; that is right for the three-language markup but this
   site renders two (mu-u88-langfix drops the Chinese entry), which left the
   second link alone at half width. Span only when the count is odd. --- */
@media (max-width: 640px) {
  .language-row > a:first-child { grid-column: auto; }
  .language-row:has(> :nth-child(odd):last-child) > a:first-child { grid-column: 1 / -1; }
}

/* --- entity grids (payment guide): ported from the removed page style --- */
@media (min-width: 641px) {
  .banks-grid,
  .gw-grid                     { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .banks-grid > :nth-child(5)  { grid-column: 1 / -1; }
}
@media (min-width: 961px) {
  .banks-grid                  { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .banks-grid > *              { grid-column: span 2; }
  .banks-grid > :nth-child(4),
  .banks-grid > :nth-child(5)  { grid-column: span 3; }
}


/* ---------------------------------------------------------------------------
   6. #u88-unique-block — the home-page depth section spliced in by
      mu-plugins/mu-u88-unique.php
   ---------------------------------------------------------------------------
   It ships as fully inline-styled HTML with its own typeface and its own
   container (`max-width:1240px; padding:72px 24px`), which put its copy at
   1192px starting at x=124 while the rest of the page ran 1240px from x=100 —
   a visible 24px jog at the foot of the home page. The overrides below re-point
   it at the `.shell` measure and the site typeface. `!important` is required
   only because the values being replaced are inline attributes.               */

#u88-unique-block,
#u88-unique-block h2,
#u88-unique-block h3,
#u88-unique-block h4,
#u88-unique-block p,
#u88-unique-block div,
#u88-unique-block li,
#u88-unique-block td,
#u88-unique-block th,
#u88-unique-block b,
#u88-unique-block strong { font-family: Poppins, Arial, sans-serif !important; }

#u88-unique-block [style*="max-width:1240px"] {
  width: min(1240px, 100% - 56px);
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 641px) and (max-width: 900px) {
  #u88-unique-block [style*="max-width:1240px"] { width: calc(100% - 40px); }
}
@media (max-width: 640px) {
  #u88-unique-block [style*="max-width:1240px"] { width: calc(100% - 28px); }
}
@media (max-width: 360px) {
  #u88-unique-block [style*="max-width:1240px"] { width: calc(100% - 22px); }
}

/* Its card grids use `repeat(auto-fit,minmax(260px,1fr))`, which resolves to a
   different column count per breakpoint and left 4+1 and 2+1 holes. Replaced
   with the same count-exact scheme used above. */
@media (min-width: 901px) {
  #u88-unique-block [style*="auto-fit"]      { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
  #u88-unique-block [style*="auto-fit"] > *  { grid-column: span 2; }
  #u88-unique-block [style*="auto-fit"]:has(> :nth-child(2):last-child) > * { grid-column: span 3; }
  #u88-unique-block [style*="auto-fit"]:has(> :nth-child(4):last-child) > * { grid-column: span 3; }
  #u88-unique-block [style*="auto-fit"]:has(> :nth-child(5):last-child) > :nth-child(4),
  #u88-unique-block [style*="auto-fit"]:has(> :nth-child(5):last-child) > :nth-child(5) { grid-column: span 3; }
}
@media (min-width: 641px) and (max-width: 900px) {
  #u88-unique-block [style*="auto-fit"]      { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  #u88-unique-block [style*="auto-fit"]:has(> :nth-child(odd):last-child) > :last-child { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  #u88-unique-block [style*="auto-fit"]      { grid-template-columns: minmax(0, 1fr) !important; }
}

/* Its tables are `width:100%` with no wrapper; give them the same horizontal
   scroll affordance the theme's `.table-wrap` provides so narrow screens cannot
   be pushed sideways. */
#u88-unique-block table { display: block; overflow-x: auto; max-width: 100%; }


/* ---------------------------------------------------------------------------
   7. Small-screen guards
   --------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .answer-box,
  .note-line,
  .u88-formula { padding-left: 22px; padding-right: 22px; }

  .info-section > h2 { font-size: 24px; }
  .info-section > h3 { font-size: 18px; margin-top: 26px; }
  .info-section > p,
  .info-section > ul,
  .info-section > ol,
  .step-list,
  .terms-list        { font-size: 15px; }
  .entity            { padding: 20px; }
}

/* Long unbroken strings (promo codes, wallet addresses, URLs) must wrap rather
   than push the page sideways. */
.info-section > p,
.info-section li,
.answer-box p,
.entity p,
#u88-unique-block p { overflow-wrap: break-word; }

/* ---------------------------------------------------------------------------
   Back to top.

   Fixed bottom right. 46px so it clears the 44px minimum touch target on a phone
   without covering the text it exists to help you leave.

   [hidden] is honoured explicitly: the UA default for it is display:none, but this
   button sets display:flex to centre its icon, and an element rule outranks the UA
   sheet. Without this line the button would never hide.

   Colours reuse the header CTA's gold gradient rather than introducing an accent,
   so it reads as part of the site rather than a bolted-on widget.
--------------------------------------------------------------------------- */
#u88-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 60;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: #14361c;
  background: linear-gradient(135deg, #f7d774, #d9a53a);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .3);
  transition: transform .18s ease, box-shadow .18s ease;
}
#u88-top[hidden] { display: none; }
#u88-top:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(0, 0, 0, .36); }
#u88-top:focus-visible { outline: 3px solid #f7d774; outline-offset: 3px; }

@media (max-width: 600px) {
  #u88-top { right: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) {
  #u88-top { transition: none; }
  #u88-top:hover { transform: none; }
}

/* The back-to-top button is position:fixed, so at the very bottom of the page it
   floats over whatever the footer put there. Measured at 390px it landed squarely
   on the "FAQ" link, which then could not be tapped at all. The footer carries
   padding-bottom:0, so give it enough room on small screens for the button plus its
   own offset, and the last row of links clears it. Desktop is unaffected: the footer
   there is wide enough that the bottom-right corner holds no links. */
@media (max-width: 600px) {
  footer { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important; }
}

/* ---------------------------------------------------------------------------
   Compact hero for the four demoted category pages.

   .inner-hero is min-height:570px with align-items:center, and .inner-hero-copy
   carries padding-top:90px to clear the fixed header. A hero holding a kicker, an
   H1 and one sentence is only 229px tall, so centering handed 104px to the top and
   104px to the bottom and the 90px padding stacked on the upper share: 198px of
   empty band above the kicker, 104px below the lede.

   The first attempt at this cut the padding to 34px and the kicker slid straight
   under the logo, because that 90px is header clearance, not decoration. So keep
   the clearance, stop centring, and let the content decide the height instead.

   The content section below also drops some of its 95px top pad: on every other
   page that space holds the answer box, but these pages moved their lede into the
   hero, so it opens onto a bare H2.
--------------------------------------------------------------------------- */
.inner-hero--compact {
  min-height: 0;
  align-items: flex-start;
}
.inner-hero--compact .inner-hero-copy {
  padding-top: 118px;   /* 90px header clearance plus the 28px the full hero reads as */
  padding-bottom: 64px;
}
.inner-hero--compact + .inner-content { padding-top: 62px; }

@media (max-width: 760px) {
  .inner-hero--compact .inner-hero-copy {
    padding-top: 104px;
    padding-bottom: 48px;
  }
  .inner-hero--compact + .inner-content { padding-top: 44px; }
}