/*
 * online-poker.rs — the desktop half.
 *
 * The Feb 2026 redesign was mobile-only: header.php sniffed the user agent and
 * served mobile-template.php to phones, and everyone else got a 2011 WooThemes
 * layout with a 960px grid, a sprite-based nav and three sidebars. That theme
 * is not being rebuilt — this widens the new design instead, so one page
 * serves both and there is a single set of markup to maintain.
 *
 * Every rule here sits behind min-width. poker.css is the untouched mobile
 * baseline; nothing in this file may lower a breakpoint into it, so the two
 * cannot end up fighting over the same viewport.
 *
 * 900px, not 768px: at 768 the hamburger nav still reads better than a
 * horizontal bar with 23 top-level items, and tablets in portrait get the
 * mobile layout the design was actually drawn for.
 */

@media (min-width: 900px) {
  :root {
    --shell: 1120px;
    --gutter: 24px;
  }

  body {
    font-size: 17px;
  }

  /* ---- header ---------------------------------------------------------- */

  /* The bar stays full-bleed black; only its contents are constrained, so the
     black band still runs edge to edge on a wide screen. */
  .m-header {
    padding: 14px calc((100vw - var(--shell)) / 2);
    gap: 0;
  }

  .m-header-logo {
    width: 128px;
    height: 128px;
    /* The mobile negative margins exist to pull a 112px chip into a 60px bar;
       with more vertical room they only clip it. */
    margin: -14px -8px -22px -14px;
  }

  .m-header h1 {
    font-size: 30px;
  }

  .m-header p {
    font-size: 13px;
    margin-top: 4px;
  }

  /* ---- navigation ------------------------------------------------------ */

  .hamburger {
    display: none;
  }

  /*
   * The mobile overlay becomes a bar below the header. Same markup and the
   * same `submenu-open` class, so the JS needs no desktop branch: hover opens
   * a dropdown, and click still toggles for keyboard and touch laptops.
   */
  .m-nav {
    display: block;
    position: static;
    width: 100%;
    height: auto;
    background: #111;
    border-top: 1px solid #262626;
    padding: 0;
    overflow: visible;
    z-index: 500;
  }

  /*
   * The bar is full-bleed black; the LIST is what lines up with the page.
   *
   * This was `padding: 0 calc((100vw - var(--shell)) / 2)` on the bar, which
   * collapses to 0 the moment the viewport is narrower than --shell — so
   * between 900 and 1120px the menu sat flush against the window edge while
   * every card on the page was inset, and the two never lined up.
   */
  .m-nav > ul {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    /* Left-aligned; the search button is last in the DOM and pushed to the
       far end by its own auto margin. */
    justify-content: flex-start;
    max-width: var(--shell);
    margin: 0 auto;
    padding: 0;
  }

  .m-nav li {
    border-bottom: none;
    position: relative;
  }

  /*
   * Ten items measured 1223px against a 1120px shell, so the bar wrapped to a
   * ragged second row at every desktop width below 1223. Tightened until the
   * full set fits on one line at the shell width; the labels are the site's
   * own and are not abbreviated to make them fit.
   */
  .m-nav > ul > li > a {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0 10px;
    height: 44px;
    font-size: 13.5px;
    font-weight: 600;
    color: #cfcfcf;
    white-space: nowrap;
    /* A transparent rule that turns solid on hover, so nothing shifts. */
    box-shadow: inset 0 -3px 0 transparent;
    transition: color .12s ease, background .12s ease, box-shadow .12s ease;
  }

  .m-nav > ul > li > a:hover,
  .m-nav > ul > li > a:focus-visible,
  .m-nav > ul > li.submenu-open > a {
    background: #000;
    color: #fff;
    box-shadow: inset 0 -3px 0 #fff;
  }

  /* The caret rotates rather than swapping character, so its box never
     changes width and the item beside it cannot jump. */
  .m-nav li.menu-item-has-children > a::after {
    content: '';
    width: 0;
    height: 0;
    border: 4px solid transparent;
    border-top-color: #8a8a8a;
    margin-top: 3px;
    transition: transform .15s ease, border-top-color .12s ease;
  }

  .m-nav > ul > li.menu-item-has-children:hover > a::after,
  .m-nav > ul > li.menu-item-has-children.submenu-open > a::after {
    border-top-color: #fff;
    transform: rotate(-180deg);
    margin-top: -3px;
  }

  .m-nav .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 250px;
    margin: 0;
    padding: 6px;
    background: #0b0b0b;
    border: 1px solid #2a2a2a;
    border-top: 3px solid #fff;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .5);
  }

  .m-nav li:hover > .sub-menu,
  .m-nav li:focus-within > .sub-menu,
  .m-nav li.submenu-open > .sub-menu {
    display: block;
  }

  .m-nav .sub-menu li { border-bottom: none; }

  .m-nav .sub-menu a {
    display: block;
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    color: #cfcfcf;
    white-space: nowrap;
  }

  .m-nav .sub-menu a:hover,
  .m-nav .sub-menu a:focus-visible {
    background: #1c1c1c;
    color: #fff;
  }

  /*
   * A diagonal move from the parent to the second row of the dropdown leaves
   * the parent's box before entering the panel's, and the menu closes under
   * the cursor. This pad bridges that gap; it is invisible and only exists
   * while the panel is open.
   */
  .m-nav li.menu-item-has-children:hover > .sub-menu::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 0;
    right: 0;
    height: 6px;
  }

  /* The nav bar has its own search field; the overlay's stacked one does not
     belong in a horizontal strip. */
  .m-nav-search {
    display: none;
  }

  /* ---- page shell ------------------------------------------------------ */

  main {
    display: block;
    max-width: var(--shell);
    margin: 0 auto;
    padding: 8px 0 40px;
  }

  .breadcrumb {
    max-width: var(--shell);
    margin: 0 auto;
    padding: 14px 0 10px;
    background: transparent;
    font-size: 13px;
  }

  .card {
    margin: 0 0 var(--gutter) 0;
    padding: 26px 28px;
    border-radius: 14px;
  }

  .card h2 {
    font-size: 24px;
    margin-bottom: 14px;
  }

  .card p {
    font-size: 17px;
    line-height: 1.7;
  }

  .article-content {
    font-size: 18px;
    line-height: 1.75;
  }

  /*
   * The reading measure goes on the TEXT, not on the container.
   *
   * A full-width line at 1120px is unreadable, but capping .article-content
   * itself caps everything inside it — the five-column no-deposit bonus table
   * got squeezed into 46em and its "Detalji" column wrapped to one word per
   * line. Tables, images and figures keep the card's full width; only prose
   * is narrowed.
   */
  .article-content > p,
  .article-content > ul,
  .article-content > ol,
  .article-content > h1,
  .article-content > h2,
  .article-content > h3,
  .article-content > h4,
  .article-content > blockquote {
    max-width: 46em;
  }

  .article-content h1 { font-size: 34px; }
  .article-content h2 { font-size: 27px; }

  .m-footer {
    max-width: var(--shell);
    margin: 24px auto 0;
    padding: 34px 0;
    border-top: 1px solid #e2e2e2;
  }

  /* ---- home ------------------------------------------------------------ */

  /*
   * The three copy cards below the rankings sit side by side rather than
   * stacking into a metre of whitespace. `main > .card:first-child` is the
   * rankings card and stays full width.
   */
  .poker-home-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--gutter);
    align-items: start;
  }

  .poker-home-grid .card {
    margin: 0;
    height: 100%;
  }

  .site {
    padding: 17px 12px;
  }

  .site-name {
    font-size: 18px;
  }

  .rank {
    width: 42px;
    height: 42px;
    font-size: 16px;
  }

  .btn,
  a.btn {
    max-width: 340px;
    margin-left: auto;
    margin-right: auto;
  }

  .cat-link {
    font-size: 16px;
  }

  /* ---- room listing and reviews ---------------------------------------- */

  .poker-room-hero {
    padding: 34px 28px;
  }

  .poker-room-hero h2 {
    font-size: 30px;
  }

  /* Two buttons side by side instead of stacked full-width slabs. The
     baseline sets `flex-direction: column`, so the direction has to be reset
     explicitly — declaring `display: flex` again changes nothing on its own. */
  .cta-buttons {
    display: flex;
    flex-direction: row;
    gap: 12px;
  }

  .cta-buttons > a {
    flex: 1;
    margin: 0;
  }

  /*
   * Two columns, two children. Placing the four loose siblings (h3, ul, h3,
   * ul) with grid-column alone let them auto-flow into their own rows, so
   * "Mane" started a row below "Prednosti" and its rule stretched across the
   * gap. The component wraps each side instead.
   */
  .pros-cons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 32px;
    align-items: start;
  }

  .pros-cons .pros-list,
  .pros-cons .cons-list {
    margin-bottom: 0 !important;
  }

  .info-table th {
    width: 190px;
  }

  .screenshots-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
  }

  .screenshot-full {
    margin: 0;
    border-radius: 8px;
  }

  /*
   * The collapsibles stay collapsible on desktop. They hold the bulk of each
   * review, so opening them all would bury the bonus and the CTA under
   * several screens of prose — the opposite of what the panels are for.
   */
  .widget-toggle {
    font-size: 17px;
    padding: 16px 4px;
  }

  /* ---- recovered tables ------------------------------------------------- */

  .poker-table {
    font-size: 15px;
  }

  .poker-table th,
  .poker-table td {
    padding: 14px 14px;
  }

  /* Widths are set on the header cells in poker.css; this only relaxes the
     scroll floor, since a desktop card is wide enough to hold the table. */
  .poker-table {
    min-width: 0;
  }
}

/* A wide desktop gets more gutter, not more text width. */
@media (min-width: 1400px) {
  :root {
    --shell: 1240px;
  }
}

/* ── content restored from the original, widened ───────────────────────────
   Appended after the main block on purpose: these selectors do not exist in
   the mobile baseline, so they need their own min-width scope. */
@media (min-width: 900px) {
  .poker-strip { padding: 0 calc((100vw - var(--shell)) / 2); overflow: visible; }
  .poker-strip ul { padding: 0; }
  .poker-strip a { font-size: 12.5px; padding: 11px 16px; }

  .poker-cats-grid { grid-template-columns: repeat(5, 1fr); gap: 12px; }
  .poker-cat-tile { min-height: 92px; font-size: 15px; }
  .poker-cats-grid > :last-child:nth-child(odd) { grid-column: auto; }

  /* Rankings left, aside right. The rankings card is five short rows and was
     leaving a column of empty white beside it at full width. */
  /* `> .card { margin: 0 }` zeroed the card's own bottom margin, so the
     rankings row butted straight against the categories box below it. The row
     carries the spacing instead. */
  .poker-home-top { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--gutter); align-items: start; margin-bottom: var(--gutter); }
  .poker-home-top > .card { margin: 0; }
  /* Same for the three-across copy row, which sat flush against the news. */
  .poker-home-grid { margin-bottom: var(--gutter); }
  .poker-postlist { margin: 0 0 var(--gutter); }
  .poker-aside { margin: 0; }
  .poker-aside-box { margin-bottom: var(--gutter); }
  .poker-aside-box:last-child { margin-bottom: 0; }

  .poker-postlist-heading { font-size: 24px; margin-bottom: 16px; }
  .poker-postlist-grid { grid-template-columns: repeat(2, 1fr); gap: var(--gutter); }
  .poker-postlist[data-columns="3"] .poker-postlist-grid { grid-template-columns: repeat(3, 1fr); }

  /* Stacked cards on desktop: the image leads, the text sits under it. */
  .poker-card-link { flex-direction: column; gap: 0; padding: 0; }
  .poker-card-media { flex: none; width: 100%; border-radius: 0; aspect-ratio: 16 / 9; }
  .poker-card-body { padding: 14px 16px 18px; }
  .poker-card-title { font-size: 17px; }
  .poker-card-noimage .poker-card-body { padding-top: 18px; }

  .poker-archive-title { font-size: 28px; }
}

/* An archive is a full-width grid — it has no aside to sit beside. */
@media (min-width: 900px) {
  main > .poker-postlist { max-width: var(--shell); }
}

@media (min-width: 900px) {
  .poker-single-title { font-size: 32px; max-width: 22em; }
  .poker-lead-image img { border-radius: 12px; }
  .poker-adjacent { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 900px) {
  /* Content left, sidebar right — the shape page.php had. */
  main.poker-has-sidebar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: var(--gutter);
    align-items: start;
  }
  main.poker-has-sidebar > .poker-main-col { min-width: 0; }
  .poker-sidebar { position: sticky; top: 16px; }
  .poker-sidebar-card { margin-bottom: var(--gutter); }
  .poker-sidebar-card:last-child { margin-bottom: 0; }

  /* The prose measure is set on .article-content's children; inside a
     narrower column it would only shrink it further, so it is released. */
  main.poker-has-sidebar .article-content > p,
  main.poker-has-sidebar .article-content > ul,
  main.poker-has-sidebar .article-content > ol,
  main.poker-has-sidebar .article-content > h2,
  main.poker-has-sidebar .article-content > h3,
  main.poker-has-sidebar .article-content > h4,
  main.poker-has-sidebar .article-content > blockquote { max-width: none; }
}

@media (min-width: 900px) {
  .poker-book { grid-template-columns: 130px minmax(0, 1fr); gap: 22px; padding: 22px; }
  .poker-book-title { font-size: 20px; }
  .poker-book-summary { font-size: 15px; max-width: 62ch; }
  .poker-book-rank { width: 32px; height: 32px; font-size: 14px; }
}

@media (min-width: 900px) {
  .m-footer-nav { padding: 34px calc((100vw - var(--shell)) / 2) 8px; margin-top: 40px; }
  .m-footer-cols { max-width: var(--shell); margin: 0 auto; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 28px 20px; }
  .m-footer-nav + .m-footer { padding: 18px 0 34px; }

  /* Breathing room between the nav bar and the first card — the bar sat
     tight against the content on the front page. */
  main { padding-top: 22px; }
  .breadcrumb { padding-top: 20px; }
}

@media (min-width: 900px) {
  /* Pushed to the right of the bar, away from the section links. */
  .poker-nav-search { display: block; position: relative; margin-left: auto; }
  .poker-nav-search > button {
    display: flex; align-items: center; justify-content: center;
    height: 44px; width: 44px; padding: 0;
    background: none; border: 0; color: #cfcfcf; cursor: pointer;
    box-shadow: inset 0 -3px 0 transparent;
    transition: color .12s ease, background .12s ease, box-shadow .12s ease;
  }
  .poker-nav-search > button:hover,
  .poker-nav-search > button:focus-visible,
  .poker-nav-search > button[aria-expanded='true'] {
    background: #000; color: #fff; box-shadow: inset 0 -3px 0 #fff;
  }

  .poker-nav-search-panel {
    display: none;
    position: absolute; top: 100%; right: 0; z-index: 60;
    padding: 10px; min-width: 320px;
    background: #0b0b0b; border: 1px solid #2a2a2a; border-top: 3px solid #fff;
    border-radius: 0 0 10px 10px; box-shadow: 0 14px 34px rgba(0, 0, 0, .5);
  }
  /* `.active` is what the layout's delegated toggle sets. */
  .poker-nav-search-panel.active { display: block; }

  .poker-nav-search-panel form { display: flex; gap: 8px; }
  .poker-nav-search-panel input {
    flex: 1; min-width: 0; padding: 9px 12px; font-size: 15px;
    background: #fff; border: 1px solid #2a2a2a; border-radius: 6px; color: #111;
  }
  .poker-nav-search-panel input:focus { outline: 2px solid #fff; outline-offset: 1px; }
  .poker-nav-search-panel button[type='submit'] {
    padding: 9px 16px; background: #fff; color: #000; border: 0;
    border-radius: 6px; font-weight: 700; font-size: 14px; cursor: pointer;
  }
  .poker-nav-search-panel button[type='submit']:hover { background: #ddd; }
}

@media (min-width: 900px) {
  .poker-section-heading { font-size: 26px; margin: 34px 0 18px; }
}

@media (min-width: 900px) {
  /* Two columns for the short fields, full width for the message. */
  .wpcf7-form { max-width: 640px; }
  .wpcf7-form textarea { min-height: 190px; }
}