/* ONCC Oriental Review HUB v2.0
   Visual rule: extend the homepage CSS, do not create a separate design language.
*/

.onccf-oriental-hub{
  background:#fff;
}

.onccf-oriental-hub .onccf-shell{
  max-width:1280px;
}

.onccf-oriental-hero{
  display:grid;
  grid-template-columns:minmax(0,1fr) 310px;
  gap:24px;
  align-items:center;
  margin:0 0 16px;
  padding:30px 32px;
  border:1px solid #d3a53b;
  border-radius:12px;
  background:
    linear-gradient(135deg,rgba(5,31,50,.97),rgba(8,54,82,.94)),
    url("https://onccfootball.com/wp-content/uploads/2026/09/onccf-oriental-review-hero-xi2c5n.webp") center/cover no-repeat;
  color:#fff;
  box-shadow:0 6px 20px rgba(7,20,31,.12);
}

.onccf-oriental-hero__copy h1{
  margin:10px 0 12px;
  color:#fff;
  font-size:38px;
  line-height:1.15;
}

.onccf-oriental-hero__copy p{
  max-width:760px;
  margin:0!important;
  color:rgba(255,255,255,.82)!important;
  font-size:14px!important;
  line-height:1.8!important;
}

.onccf-oriental-hero .onccf-homehero-image__score{
  position:static;
  width:auto;
  min-width:0;
  background:rgba(2,19,31,.88);
}

.onccf-oriental-kpi{
  margin-top:0;
}

.onccf-oriental-rolling-note{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  margin-top:10px;
  overflow:hidden;
  border:1px solid #d9e2e8;
  border-radius:9px;
  background:#fff;
}

.onccf-oriental-rolling-note span{
  padding:10px 12px;
  border-right:1px solid #d9e2e8;
  color:#355064;
  font-size:12px;
  text-align:center;
}

.onccf-oriental-rolling-note span:last-child{
  border-right:0;
}

.onccf-oriental-records-more{
  margin-top:12px;
  border:1px solid #cbd7df;
  border-radius:10px;
  background:#f6f9fb;
}

.onccf-oriental-records-more summary{
  cursor:pointer;
  padding:13px 16px;
  color:#0b304c;
  font-weight:900;
  list-style:none;
}

.onccf-oriental-records-more summary::-webkit-details-marker{
  display:none;
}

.onccf-oriental-records-more summary::after{
  content:"＋";
  float:right;
  color:#b48218;
}

.onccf-oriental-records-more[open] summary::after{
  content:"－";
}

.onccf-oriental-records-more__body{
  padding:0 10px 10px;
}

.onccf-oriental-evidence-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}

.onccf-oriental-evidence-grid article{
  min-height:132px;
  padding:16px;
  border:1px solid #d7e0e7;
  border-radius:10px;
  background:#f7fafc;
}

.onccf-oriental-evidence-grid span,
.onccf-oriental-evidence-grid strong,
.onccf-oriental-evidence-grid small{
  display:block;
}

.onccf-oriental-evidence-grid span{
  color:#6e7f8c;
  font-size:11px;
  font-weight:850;
}

.onccf-oriental-evidence-grid strong{
  margin:7px 0 5px;
  color:#0b304c;
  font-size:23px;
}

.onccf-oriental-evidence-grid small{
  color:#6e7f8c;
  font-size:11px;
  line-height:1.55;
}

.onccf-oriental-method{
  margin-top:18px;
}

@media(max-width:900px){
  .onccf-oriental-hero{
    grid-template-columns:1fr;
  }

  .onccf-oriental-evidence-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:760px){
  .onccf-oriental-hero{
    margin:0 8px 12px;
    padding:20px 14px;
    border-radius:10px;
  }

  .onccf-oriental-hero__copy h1{
    font-size:29px;
  }

  .onccf-oriental-hero__copy p{
    font-size:13px!important;
  }

  .onccf-oriental-hero .onccf-homehero-image__score{
    display:block!important;
  }

  .onccf-oriental-rolling-note{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .onccf-oriental-rolling-note span:nth-child(2){
    border-right:0;
  }

  .onccf-oriental-rolling-note span:nth-child(-n+2){
    border-bottom:1px solid #d9e2e8;
  }

  .onccf-oriental-evidence-grid{
    grid-template-columns:1fr;
  }

  .onccf-oriental-records-more__body{
    padding:0 5px 7px;
  }
}


/* =========================================================
   v2.0.1 CSS ALIGNMENT FIX
   Keep the HUB inside the same homepage visual system.
   ========================================================= */

/* WordPress/global heading rules were overriding the custom HUB hero title. */
.onccf-oriental-hub .onccf-oriental-hero h1,
.onccf-oriental-hub .onccf-hero.onccf-oriental-hero h1{
  color:#fff!important;
  text-shadow:0 2px 8px rgba(0,0,0,.28)!important;
}

/* Keep Hero kicker readable on the dark visual, matching homepage gold accent. */
.onccf-oriental-hub .onccf-oriental-hero .onccf-homehero-image__eyebrow{
  color:#f0c75e!important;
}

/* Explicitly preserve homepage settlement badge colors.
   The classes are now the exact homepage classes: is-hit/is-miss/is-push. */
.onccf-oriental-hub #latest-records .onccf-home-settle-ref.is-hit{
  background:#2b8e35!important;
  color:#fff!important;
  opacity:1!important;
}
.onccf-oriental-hub #latest-records .onccf-home-settle-ref.is-miss{
  background:#e32227!important;
  color:#fff!important;
  opacity:1!important;
}
.onccf-oriental-hub #latest-records .onccf-home-settle-ref.is-push{
  background:#858c92!important;
  color:#fff!important;
  opacity:1!important;
}

/* The chart tooltip CSS uses display:grid; without this rule the HTML hidden
   attribute can be visually overridden and appear as a black horizontal block. */
.onccf-oriental-hub .onccf-home-trend-tooltip[hidden]{
  display:none!important;
}

/* Make the 10 + folded 20 record blocks read as one visual family. */
.onccf-oriental-hub .onccf-oriental-records-more .onccf-home-table-ref-wrap{
  border-color:#cfd9e1!important;
  background:#fff!important;
}

.onccf-oriental-hub .onccf-oriental-records-more[open]{
  background:#f7fafc!important;
  box-shadow:0 4px 14px rgba(7,20,31,.045);
}

/* Prevent the custom Hero from looking like a separate site. */
.onccf-oriental-hub .onccf-oriental-hero{
  border-color:#d3a53b!important;
  box-shadow:0 5px 18px rgba(7,20,31,.10)!important;
}

@media(max-width:760px){
  .onccf-oriental-hub .onccf-oriental-hero h1{
    color:#fff!important;
    font-size:29px!important;
  }
}


/* v2.1.1 — 東方拆局分類圖片完整顯示 + 手機置中 */
#market-performance .onccf-home-market-ref__media{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:hidden!important;
  background:#071d2b!important;
}

#market-performance .onccf-home-market-ref__media img{
  display:block!important;
  width:100%!important;
  height:auto!important;
  max-width:100%!important;
  margin-left:auto!important;
  margin-right:auto!important;
  object-fit:contain!important;
  object-position:center center!important;
}

@media(max-width:760px){
  #market-performance .onccf-home-market-ref__media{
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }

  #market-performance .onccf-home-market-ref__media img{
    width:100%!important;
    height:auto!important;
    max-width:100%!important;
    max-height:none!important;
    margin:0 auto!important;
    object-fit:contain!important;
    object-position:center center!important;
  }
}


/* =========================================================
   v2.2.3 — PREVIOUS LAYOUT, RANKING FIRST
   No new feature sections. Existing historical layout retained.
   ========================================================= */

/* Standard site HUB H1 */
html body .onccf-page.onccf-oriental-hub .onccf-oriental-title-hero{
  display:block!important;
  width:100%!important;
  margin:0 0 16px!important;
  padding:22px 24px 20px!important;
  border:0!important;
  border-left:5px solid #d6a52e!important;
  border-bottom:1px solid #d9e1e7!important;
  border-radius:0!important;
  background:#f4f6f7!important;
  box-shadow:none!important;
  color:#0b2438!important;
}
html body .onccf-page.onccf-oriental-hub .onccf-oriental-title-hero__eyebrow{
  display:block!important;
  margin:0 0 6px!important;
  color:#a36f00!important;
  font-size:13px!important;
  font-weight:900!important;
}
html body .onccf-page.onccf-oriental-hub .onccf-oriental-title-hero h1{
  margin:0 0 10px!important;
  color:#071d2d!important;
  line-height:1.08!important;
  font-weight:900!important;
}
html body .onccf-page.onccf-oriental-hub .onccf-oriental-title-hero p{
  max-width:980px!important;
  margin:0!important;
  color:#526777!important;
  font-size:15px!important;
  line-height:1.65!important;
}

/* Existing classification board keeps prior 3-column format. */
html body .onccf-page.onccf-oriental-hub .onccf-home-market-ref-grid--three{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:12px!important;
}
html body .onccf-page.onccf-oriental-hub .onccf-home-market-ref-grid--three > article{
  min-width:0!important;
}

/* Readable typography — titles H1/H2/H3 are not resized. */
html body .onccf-page.onccf-oriental-hub p,
html body .onccf-page.onccf-oriental-hub li,
html body .onccf-page.onccf-oriental-hub summary,
html body .onccf-page.onccf-oriental-hub dt,
html body .onccf-page.onccf-oriental-hub dd,
html body .onccf-page.onccf-oriental-hub th,
html body .onccf-page.onccf-oriental-hub td{
  font-size:15px!important;
  line-height:1.5!important;
}
html body .onccf-page.onccf-oriental-hub small{
  font-size:14px!important;
}
html body .onccf-page.onccf-oriental-hub .onccf-home-trend__lead{
  font-size:15px!important;
  line-height:1.65!important;
}
html body .onccf-page.onccf-oriental-hub .onccf-quickjump,
html body .onccf-page.onccf-oriental-hub .onccf-quickjump a,
html body .onccf-page.onccf-oriental-hub .onccf-home-section-ref__head>a{
  font-size:14px!important;
}

html body .onccf-page.onccf-oriental-hub .onccf-home-kpi-ref__lead small,
html body .onccf-page.onccf-oriental-hub .onccf-home-kpi-ref__cell small{
  font-size:14px!important;
}
html body .onccf-page.onccf-oriental-hub .onccf-home-kpi-ref__cell strong{
  font-size:24px!important;
}
html body .onccf-page.onccf-oriental-hub .onccf-home-kpi-ref__cell span{
  font-size:13px!important;
}

html body .onccf-page.onccf-oriental-hub #market-performance dt,
html body .onccf-page.onccf-oriental-hub #market-performance dd{
  font-size:15px!important;
}

html body .onccf-page.onccf-oriental-hub #latest-records th{
  font-size:14px!important;
}
html body .onccf-page.onccf-oriental-hub #latest-records td{
  font-size:15px!important;
}
html body .onccf-page.onccf-oriental-hub #latest-records td[data-col="date"],
html body .onccf-page.onccf-oriental-hub #latest-records td[data-col="fb"]{
  font-size:15.5px!important;
  font-weight:900!important;
}
html body .onccf-page.onccf-oriental-hub #latest-records td[data-col="match"]{
  font-size:17px!important;
  font-weight:900!important;
}
html body .onccf-page.onccf-oriental-hub #latest-records td[data-col="odds"]{
  font-size:19px!important;
  font-weight:950!important;
}
html body .onccf-page.onccf-oriental-hub #latest-records td[data-col="result"]{
  font-size:17px!important;
  font-weight:900!important;
}
html body .onccf-page.onccf-oriental-hub .onccf-home-method-ref__steps strong{
  font-size:16px!important;
}
html body .onccf-page.onccf-oriental-hub .onccf-home-method-ref__steps span{
  font-size:14px!important;
}
html body .onccf-page.onccf-oriental-hub .onccf-home-faq-ref summary{
  font-size:15px!important;
}
html body .onccf-page.onccf-oriental-hub .onccf-home-faq-ref details p,
html body .onccf-page.onccf-oriental-hub .onccf-home-trust-ref>p{
  font-size:14px!important;
}

/* Server-rendered chart */
html body .onccf-page.onccf-oriental-hub .onccf-oriental-server-chart{
  display:block!important;
  width:100%!important;
  height:auto!important;
}
html body .onccf-page.onccf-oriental-hub .onccf-trend-axis-label{
  font-size:13px!important;
}

@media(max-width:900px){
  html body .onccf-page.onccf-oriental-hub .onccf-home-market-ref-grid--three{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}
@media(max-width:640px){
  html body .onccf-page.onccf-oriental-hub .onccf-oriental-title-hero{
    padding:18px 16px 16px!important;
  }
  html body .onccf-page.onccf-oriental-hub .onccf-oriental-title-hero p{
    font-size:14px!important;
  }
  html body .onccf-page.onccf-oriental-hub .onccf-home-market-ref-grid--three{
    grid-template-columns:1fr!important;
  }
}


/* =========================================================
   v2.2.4 — RESTORE ORIGINAL MARKET IMAGE PRESENTATION
   Exact visual intention from the earlier/home v1.11.6 cards:
   - fixed compact media height
   - dark navy side space
   - image fully contained and centered
   - DO NOT stretch the artwork to fill the card
   No other layout is changed.
   ========================================================= */

html body .onccf-page.onccf-oriental-hub #market-performance .onccf-home-market-ref__media{
  height:150px!important;
  min-height:150px!important;
  max-height:150px!important;
  aspect-ratio:auto!important;
  overflow:hidden!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:#071d2b!important;
}

html body .onccf-page.onccf-oriental-hub #market-performance .onccf-home-market-ref__media img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  margin:0 auto!important;
  object-fit:contain!important;
  object-position:center center!important;
}

/* Preserve the original compact card rhythm. */
html body .onccf-page.onccf-oriental-hub #market-performance .onccf-home-market-ref h3{
  min-height:32px!important;
  padding:5px 8px!important;
  line-height:1.25!important;
}

html body .onccf-page.onccf-oriental-hub #market-performance .onccf-home-market-ref dl>div{
  min-height:34px!important;
  padding:6px 10px!important;
}

@media(max-width:900px){
  html body .onccf-page.onccf-oriental-hub #market-performance .onccf-home-market-ref__media{
    height:145px!important;
    min-height:145px!important;
    max-height:145px!important;
  }
}

@media(max-width:760px){
  html body .onccf-page.onccf-oriental-hub #market-performance .onccf-home-market-ref__media{
    height:135px!important;
    min-height:135px!important;
    max-height:135px!important;
  }
}


/* =========================================================
   v2.2.6 — RESTORE APPROVED MOBILE LATEST-RECORD CARD
   Target = approved screenshot:
   - "實測紀錄 01" navy index strip with settlement-colored top edge
   - navy Date / FB / Settlement row
   - warm match row
   - blue Market / Selection row
   - 2-column Odds / Result footer
   - NO blank Evidence column
   ========================================================= */

@media(max-width:760px){

  html body .onccf-page.onccf-oriental-hub #latest-records .onccf-home-table-ref tbody{
    counter-reset:onccf-oriental-record;
    display:grid!important;
    gap:18px!important;
  }

  html body .onccf-page.onccf-oriental-hub #latest-records .onccf-home-record-row{
    counter-increment:onccf-oriental-record;

    display:grid!important;
    grid-template-columns:repeat(12,minmax(0,1fr))!important;
    grid-template-areas:
      "index index index index index index index index index index index index"
      "date date date date fb fb fb fb settle settle settle settle"
      "match match match match match match match match match match match match"
      "market market market market market market selection selection selection selection selection selection"
      "odds odds odds odds odds odds result result result result result result"!important;

    overflow:hidden!important;
    border:1px solid #ced9e1!important;
    border-top:0!important;
    border-radius:12px!important;
    background:#fff!important;
    box-shadow:0 4px 12px rgba(7,20,31,.07)!important;
  }

  html body .onccf-page.onccf-oriental-hub #latest-records .onccf-home-record-row::before{
    content:"實測紀錄 " counter(onccf-oriental-record, decimal-leading-zero);
    grid-area:index!important;

    display:flex!important;
    align-items:center!important;
    min-height:34px!important;
    padding:6px 12px!important;

    border-top:6px solid #7d8b95!important;
    border-bottom:1px solid rgba(255,255,255,.12)!important;

    background:#082b45!important;
    color:#fff!important;

    font-size:13px!important;
    line-height:1.15!important;
    font-weight:950!important;
    letter-spacing:.02em!important;
  }

  html body .onccf-page.onccf-oriental-hub #latest-records .onccf-home-record-row--win::before{
    border-top-color:#219653!important;
  }

  html body .onccf-page.onccf-oriental-hub #latest-records .onccf-home-record-row--loss::before{
    border-top-color:#df3038!important;
  }

  html body .onccf-page.onccf-oriental-hub #latest-records .onccf-home-record-row--push::before{
    border-top-color:#7d8b95!important;
  }

  html body .onccf-page.onccf-oriental-hub #latest-records .onccf-home-record-row--half_win::before{
    border-top-color:#14805a!important;
  }

  html body .onccf-page.onccf-oriental-hub #latest-records .onccf-home-record-row--half_loss::before{
    border-top-color:#d97838!important;
  }

  /* Header row */
  html body .onccf-page.onccf-oriental-hub #latest-records .onccf-home-record-row td[data-col="date"],
  html body .onccf-page.onccf-oriental-hub #latest-records .onccf-home-record-row td[data-col="fb"],
  html body .onccf-page.onccf-oriental-hub #latest-records .onccf-home-record-row td[data-col="settlement"]{
    min-height:66px!important;
    padding:10px 12px!important;

    border:0!important;
    border-right:1px solid rgba(255,255,255,.15)!important;
    border-bottom:1px solid rgba(255,255,255,.12)!important;

    background:#0b3554!important;
    color:#fff!important;
  }

  html body .onccf-page.onccf-oriental-hub #latest-records .onccf-home-record-row td[data-col="date"]{
    grid-area:date!important;
  }

  html body .onccf-page.onccf-oriental-hub #latest-records .onccf-home-record-row td[data-col="fb"]{
    grid-area:fb!important;
  }

  html body .onccf-page.onccf-oriental-hub #latest-records .onccf-home-record-row td[data-col="settlement"]{
    grid-area:settle!important;
    border-right:0!important;
  }

  html body .onccf-page.onccf-oriental-hub #latest-records .onccf-home-record-row td[data-col="date"]::before,
  html body .onccf-page.onccf-oriental-hub #latest-records .onccf-home-record-row td[data-col="fb"]::before,
  html body .onccf-page.onccf-oriental-hub #latest-records .onccf-home-record-row td[data-col="settlement"]::before{
    margin-bottom:5px!important;
    color:#bcd0de!important;
    font-size:11px!important;
    line-height:1.1!important;
    font-weight:900!important;
  }

  html body .onccf-page.onccf-oriental-hub #latest-records .onccf-home-record-row td[data-col="date"],
  html body .onccf-page.onccf-oriental-hub #latest-records .onccf-home-record-row td[data-col="fb"]{
    font-size:16px!important;
    line-height:1.1!important;
    font-weight:950!important;
  }

  /* Match */
  html body .onccf-page.onccf-oriental-hub #latest-records .onccf-home-record-row td[data-col="match"]{
    grid-area:match!important;

    min-height:72px!important;
    padding:11px 13px!important;

    border:0!important;
    border-bottom:1px solid #e1c66d!important;

    background:#fff0bd!important;
    color:#08283f!important;

    font-size:17px!important;
    line-height:1.4!important;
    font-weight:950!important;
  }

  html body .onccf-page.onccf-oriental-hub #latest-records .onccf-home-record-row td[data-col="match"]::before{
    margin-bottom:5px!important;
    color:#9b6d00!important;
    font-size:11px!important;
  }

  /* Market / Selection */
  html body .onccf-page.onccf-oriental-hub #latest-records .onccf-home-record-row td[data-col="market"],
  html body .onccf-page.onccf-oriental-hub #latest-records .onccf-home-record-row td[data-col="selection"]{
    min-height:72px!important;
    padding:10px 12px!important;

    border:0!important;
    border-right:1px solid #b8d4e6!important;
    border-bottom:1px solid #b8d4e6!important;

    background:#e4f2fa!important;
    color:#0d3a58!important;

    font-size:15px!important;
    line-height:1.4!important;
  }

  html body .onccf-page.onccf-oriental-hub #latest-records .onccf-home-record-row td[data-col="market"]{
    grid-area:market!important;
  }

  html body .onccf-page.onccf-oriental-hub #latest-records .onccf-home-record-row td[data-col="selection"]{
    grid-area:selection!important;
    border-right:0!important;
    font-weight:900!important;
  }

  html body .onccf-page.onccf-oriental-hub #latest-records .onccf-home-record-row td[data-col="market"]::before,
  html body .onccf-page.onccf-oriental-hub #latest-records .onccf-home-record-row td[data-col="selection"]::before{
    margin-bottom:5px!important;
    color:#376b8b!important;
    font-size:11px!important;
  }

  /* Odds / Result — exactly two equal footer cells */
  html body .onccf-page.onccf-oriental-hub #latest-records .onccf-home-record-row td[data-col="odds"],
  html body .onccf-page.onccf-oriental-hub #latest-records .onccf-home-record-row td[data-col="result"]{
    min-height:64px!important;
    padding:10px 12px!important;

    border:0!important;
    border-right:1px solid #ced7de!important;

    background:#e5ebef!important;
    color:#0b304c!important;

    font-size:17px!important;
    line-height:1.2!important;
    font-weight:950!important;
  }

  html body .onccf-page.onccf-oriental-hub #latest-records .onccf-home-record-row td[data-col="odds"]{
    grid-area:odds!important;
  }

  html body .onccf-page.onccf-oriental-hub #latest-records .onccf-home-record-row td[data-col="result"]{
    grid-area:result!important;
    border-right:0!important;
  }

  html body .onccf-page.onccf-oriental-hub #latest-records .onccf-home-record-row td[data-col="odds"]::before,
  html body .onccf-page.onccf-oriental-hub #latest-records .onccf-home-record-row td[data-col="result"]::before{
    margin-bottom:5px!important;
    color:#617785!important;
    font-size:11px!important;
  }

  /* Evidence is removed in PHP; never reserve or display a third footer cell. */
  html body .onccf-page.onccf-oriental-hub #latest-records .onccf-home-record-row td[data-col="evidence"]{
    display:none!important;
  }
}

@media(max-width:430px){
  html body .onccf-page.onccf-oriental-hub #latest-records .onccf-home-record-row{
    grid-template-columns:repeat(12,minmax(0,1fr))!important;
    grid-template-areas:
      "index index index index index index index index index index index index"
      "date date date date fb fb fb fb settle settle settle settle"
      "match match match match match match match match match match match match"
      "market market market market market market selection selection selection selection selection selection"
      "odds odds odds odds odds odds result result result result result result"!important;
  }
}