/* ==========================================================================
   OnlineFreeGames – PlayHub-inspired theme
   Loaded ONLY on pages whose <body> has the class "ofg-theme" (home page first).
   Sits on top of the existing master CSS: nothing in the old files is edited.
   To switch a page back to the old look, remove the `theme` prop from its view.
   Game images, logo and ad slots are untouched – only styling changes.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
body.ofg-theme {
  --ofg-bg: #0c0d14;
  --ofg-elevated: #16171f;
  --ofg-card: #1c1d28;
  --ofg-hover: #24252f;
  --ofg-border: #2a2b38;
  --ofg-text: #ffffff;
  --ofg-dim: #9a9bab;
  --ofg-dimmer: #6c6d7d;
  --ofg-accent: #3b82f6;
  --ofg-accent-hover: #2563eb;
  --ofg-link-hover: #60a5fa; /* lighter blue so hovered links stay readable on dark */
  --ofg-text-size: 0.9375rem; /* 15px: menu, game names, breadcrumbs (was 13-14px) */
  --ofg-body-size: 1rem; /* 16px: paragraphs and descriptions (was 13.6px on most pages) */

  /* The site's standard "small paragraph" size (was 0.85rem = 13.6px) follows the body size */
  --font-size-p: var(--ofg-body-size);
  --ofg-radius: 12px;
  --ofg-font: "Nunito", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Re-point the site's existing colour variables to the new palette */
  --color-black: var(--ofg-bg);
  --color-grey-dark: var(--ofg-elevated);
  --color-grey: var(--ofg-hover);
  --color-grey-light: var(--ofg-dimmer);
  --color-grey-super-light: var(--ofg-dim);
  --color-primary: var(--ofg-accent);

  /* Re-point the site's font variables to Nunito */
  --font-family-primary: var(--ofg-font);
  --font-family-secondary: var(--ofg-font);
  --font-family-general: var(--ofg-font);
  --font-family-title: var(--ofg-font);
  --font-family-subtitle: var(--ofg-font);
  --font-family-description: var(--ofg-font);
  --font-family-date: var(--ofg-font);
  --font-family-caption: var(--ofg-font);
  --font-family-number: var(--ofg-font);
  --font-family-tag: var(--ofg-font);
  --font-family-link: var(--ofg-font);
  --font-family-button: var(--ofg-font);
  --font-family-textprice: var(--ofg-font);
  --font-family-sellprice: var(--ofg-font);

  background: var(--ofg-bg);
  color: var(--ofg-dim);
  font-family: var(--ofg-font);
}

/* ---------- 2. Top bar ---------- */
body.ofg-theme .navbar.primary,
body.ofg-theme .navbar.primary .navbar-wrapper.primary {
  background: var(--ofg-elevated);
}
body.ofg-theme .navbar.primary {
  border-bottom: 1px solid var(--ofg-border);
}

/* Search field: pill with card background and accent-colored focus ring */
body.ofg-theme .navbar.primary .navbar-form .form-control,
body.ofg-theme .navbar.primary .navbar-form .input-type input {
  background: var(--ofg-card);
  border-color: var(--ofg-border);
  color: var(--ofg-text);
  font-family: var(--ofg-font);
}
body.ofg-theme .navbar.primary .navbar-form .form-control:focus,
body.ofg-theme .navbar.primary .navbar-form .input-type input:focus {
  border-color: var(--ofg-accent);
  box-shadow: none;
}

/* ---------- 3. Sidebar (icon rail that expands on hover) ---------- */
body.ofg-theme .sidebar.primary {
  background: var(--ofg-elevated);
  border-right: 1px solid var(--ofg-border);
}
/* Desktop (992px and up, including wide screens): rail is exactly as wide as the icons
   (so it never covers the page) and opens over the content on hover, like the PlayHub
   reference design. */
@media (min-width: 992px) {
  body.ofg-theme .sidebar.primary {
    width: 84px;
    transition: width 0.18s ease, box-shadow 0.18s ease;
  }
  body.ofg-theme .sidebar.primary:hover {
    width: calc(13.5rem + 2rem);
    box-shadow: 8px 0 24px rgba(0, 0, 0, 0.45);
  }
  /* Closed strip: hide the language box (and its divider); it appears when the menu opens */
  body.ofg-theme .sidebar.primary:not(:hover) .wrapper-inner:has(> .ofg-lang-switch) {
    display: none;
  }
  body.ofg-theme .sidebar.primary:not(:hover) .sidebar-content .content-wrapper.primary > .wrapper-inner:has(+ .wrapper-inner > .ofg-lang-switch) {
    border-bottom: 0;
  }
}
/* Desktop: a little breathing room between the rail and the content (and the right edge) */
@media (min-width: 992px) {
  body.ofg-theme .page .page-content .container {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}
/* Wide screens (1600px+): the original shows the sidebar fully open and gives the page
   an extra 9rem left margin for it. With the hover rail we undo both, so the games sit
   right next to the rail and there is no empty gap. */
@media (min-width: 1600px) {
  body.ofg-theme .sidebar.primary:not(:hover) .sidebar-content .content-link .link .link-content {
    width: 3.25rem;
  }
  body.ofg-theme .sidebar.primary:not(:hover) .sidebar-content .content-link .link .link-content > span.text {
    opacity: 0;
  }
  body.ofg-theme .page .page-content {
    margin-left: 0;
  }
  body.ofg-theme .page .page-content .container {
    max-width: 1760px;
  }
  /* Game page keeps the original's widest size so the player keeps its proportions */
  body.ofg-theme .page .page-content .game-feature .container {
    max-width: 1500px;
  }
}
body.ofg-theme .sidebar.primary .sidebar-content .content-wrapper.primary > .wrapper-inner {
  border-bottom-color: var(--ofg-border);
}
body.ofg-theme .sidebar.primary .sidebar-content .content-link .link .link-content {
  background: transparent;
  border-radius: 8px;
  color: var(--ofg-dim);
  font-weight: 700;
}
/* Menu text: 15px (the PlayHub demo uses 14px, the original site used 16px) */
body.ofg-theme .sidebar.primary .sidebar-content .content-link .link .link-content {
  font-size: var(--ofg-text-size);
}
body.ofg-theme .sidebar.primary .ofg-lang-switch select {
  font-size: var(--ofg-text-size) !important;
  /* Own arrow instead of the browser's: same distance from the border (1rem) as the
     language name has on the left, so the arrow is not squeezed against the edge */
  -webkit-appearance: none !important;
  appearance: none !important;
  padding: 0.6rem 2.75rem 0.6rem 1rem !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239a9bab' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 1rem center !important;
  background-size: 14px 14px !important;
}
body.ofg-theme .sidebar.primary .sidebar-content .content-link .link .link-content:hover {
  background: var(--ofg-hover);
  color: var(--ofg-text);
}
body.ofg-theme .sidebar.primary .sidebar-content .content-link .link .link-content.active {
  background: var(--ofg-hover);
  color: var(--ofg-accent);
}
body.ofg-theme .sidebar.primary .sidebar-content .content-link .link .link-content.active svg path {
  fill: var(--ofg-accent);
}

/* ---------- 4. Section titles ---------- */
body.ofg-theme .wizard .theme.game-list.primary .game-list-header .header-text .title .text-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--ofg-text);
}

/* ---------- 5. Intro / SEO text blocks (home h1 + description) ---------- */
body.ofg-theme .wizard .theme.description-text.primary .section-wrapper.primary {
  background: var(--ofg-elevated);
  border: 1px solid var(--ofg-border);
  border-radius: var(--ofg-radius);
}

/* ---------- 6. Game grid: even tiles instead of the old mosaic ---------- */
body.ofg-theme .wizard .theme.game-list.primary .game-list-content .content-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); /* tile size: raise for bigger cards, lower for smaller */
  grid-auto-flow: row;
  gap: 18px 14px;
}
/* Remove the "first tile is 2x2" rule so every game gets the same size */
body.ofg-theme .wizard .theme.game-list.primary .game-list-content .content-grid .grid-item,
body.ofg-theme .wizard .theme.game-list.primary .game-list-content .content-grid .grid-item:nth-child(n) {
  grid-column: auto;
  grid-row: auto;
  grid-area: auto;
  width: auto;
}

/* ---------- 7. Game card: image on top, title underneath ---------- */
body.ofg-theme .card-game.primary {
  position: relative;
  overflow: visible;
  border-radius: var(--ofg-radius);
  transition: transform 0.2s ease;
}
/* Hover "pop": lifts higher, grows a little, gets a shadow and an accent outline,
   and sits above its neighbours. Only on devices that really have hover (not touch). */
@media (hover: hover) {
  body.ofg-theme .card-game.primary:hover {
    transform: translateY(-8px) scale(1.06);
    z-index: 5;
  }
  body.ofg-theme .card-game.primary:hover .card-wrapper.primary .card-image .image {
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.6), 0 0 0 2px var(--ofg-accent);
  }
}
body.ofg-theme .card-game.primary .card-wrapper.primary {
  display: block;
}
/* The original image area keeps the original picture – only the frame changes */
body.ofg-theme .card-game.primary .card-wrapper.primary .card-image .image {
  border-radius: var(--ofg-radius);
  overflow: hidden;
  background: var(--ofg-card);
  transition: box-shadow 0.2s ease;
}
body.ofg-theme .card-game.primary .card-wrapper.primary .card-image .image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 370 / 277; /* real thumbnail size, so nothing is cropped */
  object-fit: cover;
}
/* Title: was a hover overlay, now always visible below the image */
body.ofg-theme .card-game.primary .card-wrapper.primary > .wrapper-inner {
  position: static;
  height: auto !important;
  width: 100% !important;
  padding: 8px 2px 0;
  opacity: 1;
  transform: none;
}
body.ofg-theme .card-game.primary .card-wrapper.primary > .wrapper-inner::before {
  display: none;
}
body.ofg-theme .card-game.primary .card-wrapper.primary > .wrapper-inner > .outer {
  display: block;
}
body.ofg-theme .card-game.primary .card-wrapper.primary .card-text {
  width: 100%;
  padding-right: 0 !important;
}
body.ofg-theme .card-game.primary .card-wrapper.primary .card-text .title .text-title {
  font-size: var(--ofg-text-size);
  line-height: 1.35;
  font-weight: 700;
  color: var(--ofg-text);
}

/* ---------- 8. Game page ---------- */
/* Player frame + control bar (name, likes, fullscreen) get rounded, bordered edges.
   Games that need to overflow their frame set overflow:visible inline, which wins over this. */
body.ofg-theme .wizard .theme.game-feature.primary .game-feature-content .content-iframe .iframe {
  border-radius: var(--ofg-radius) var(--ofg-radius) 0 0;
  overflow: hidden;
}
body.ofg-theme .wizard .theme.game-feature.primary .game-feature-content .content-iframe .control {
  background: var(--ofg-elevated);
  border: 1px solid var(--ofg-border);
  border-top: 0;
  border-radius: 0 0 var(--ofg-radius) var(--ofg-radius);
}
body.ofg-theme .wizard .theme.game-feature.primary .game-feature-content .content-iframe .control .control-text .title .text-title {
  color: var(--ofg-text);
  font-weight: 800;
}

/* Side column: related-game tiles in two equal columns (long names no longer widen one column) */
body.ofg-theme .wizard .theme.game-feature.primary .game-feature-content .content-grid.secondary {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 10px;
}
body.ofg-theme .wizard .theme.game-feature.primary .game-feature-content .content-grid.secondary .grid-item {
  min-width: 0;
}

/* Category chips under the game title */
body.ofg-theme .wizard .theme.description-text.primary .description-text-header .header-tag .tag {
  background: var(--ofg-card);
  border: 1px solid var(--ofg-border);
  border-radius: 999px;
}
body.ofg-theme .wizard .theme.description-text.primary .description-text-header .header-tag .tag:hover {
  border-color: var(--ofg-accent);
  background: var(--ofg-accent); /* the original used an orange gradient here */
}

/* Chips without a count (game page): the original padding (4px left, 16px right) leaves room
   for a count badge. With no count, use equal padding so the text sits in the middle. */
body.ofg-theme .wizard .theme.description-text.primary .description-text-header .header-tag .tag:has(.value:empty) {
  padding: 4px 16px !important;
  justify-content: center;
}
body.ofg-theme .wizard .theme.description-text.primary .description-text-header .header-tag .tag .value:empty {
  display: none;
}

/* Link hover: the original turned links bold with a red-to-orange gradient.
   Keep the underline, but only the color changes: no bold, so the text does not
   get wider and jump when you hover. */
body.ofg-theme .wizard .theme.description-text.primary .description-text-header .header-text .desc a:hover,
body.ofg-theme .wizard .theme.description-text.primary .description-text-content .content-text .desc a:hover,
body.ofg-theme .wizard .theme.description-text.primary .description-text-header .header-link .link .link-header:hover {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: var(--ofg-link-hover);
  -webkit-text-fill-color: var(--ofg-link-hover);
  font-weight: inherit;
}

/* Description / SEO text headings (game, home, category, list pages):
   white and a calmer size, like the section titles */
body.ofg-theme .wizard .theme.description-text.primary .description-text-content :is(.text-description, .desc) :is(h1, h2, h3, h4) {
  color: var(--ofg-text);
  font-weight: 800;
}
body.ofg-theme .wizard .theme.description-text.primary .description-text-content :is(.text-description, .desc) h2 {
  font-size: 1.35rem;
}
body.ofg-theme .wizard .theme.description-text.primary .description-text-content :is(.text-description, .desc) h3 {
  font-size: 1.1rem;
}

/* Breadcrumbs stay slightly smaller than paragraphs */
body.ofg-theme .wizard .theme.description-text.primary .description-text-header .header-link .link .link-header,
body.ofg-theme .game-list-header .ofg-genre-breadcrumb .link a.link-header {
  font-size: var(--ofg-text-size);
}

/* Paragraph line spacing: a little more air now that the text is bigger */
body.ofg-theme .wizard .theme.game-list.primary .game-list-header .header-desc p,
body.ofg-theme .wizard .theme.description-text.primary .description-text-content .desc p,
body.ofg-theme .wizard .theme.description-text.primary .description-text-header .header-text .desc,
body.ofg-theme .wizard .theme.description-text.primary .description-text-content .desc li {
  line-height: 1.6;
}

/* ---------- 9. Other pages: replace the old red with the accent color ---------- */
/* Category page breadcrumb (Games » Action) */
body.ofg-theme .game-list-header .ofg-genre-breadcrumb .link a.link-header {
  color: var(--ofg-accent) !important;
}
body.ofg-theme .game-list-header .ofg-genre-breadcrumb .link a.link-header:hover {
  color: var(--ofg-accent-hover) !important;
}
body.ofg-theme .game-list-header .ofg-genre-breadcrumb > span {
  color: var(--ofg-dimmer) !important;
}

/* Text pages (about, privacy, cookies, DMCA, terms) */
body.ofg-theme .static-page-content a {
  color: var(--ofg-accent);
}
body.ofg-theme .static-page-content hr {
  border-color: var(--ofg-border);
}

/* Contact page: the "Contact Us" heading was hidden under the fixed top bar (this page has
   no ad above it to push it down), so give the section some room at the top */
body.ofg-theme .wizard .section.contact-form {
  padding-top: 2rem;
}

/* Contact form: labels were 15.2px, now 16px to match the rest of the text */
body.ofg-theme #ofg-contact-form > .contact-field-group > label,
body.ofg-theme .contact-radio-group label,
body.ofg-theme .contact-field-label {
  font-size: 1rem !important;
}

/* Contact form */
body.ofg-theme .contact-radio-group input {
  accent-color: var(--ofg-accent) !important;
}
body.ofg-theme #ofg-contact-form sup {
  color: var(--ofg-accent) !important;
}
body.ofg-theme #ofg-contact-form input[type='text'],
body.ofg-theme #ofg-contact-form input[type='email'],
body.ofg-theme #ofg-contact-form textarea {
  background: var(--ofg-card);
  border-color: var(--ofg-border);
  border-radius: 8px;
  font-family: var(--ofg-font);
}
body.ofg-theme #ofg-contact-form input[type='text']:focus,
body.ofg-theme #ofg-contact-form input[type='email']:focus,
body.ofg-theme #ofg-contact-form textarea:focus {
  border-color: var(--ofg-accent);
}
body.ofg-theme #cf-submit {
  background: var(--ofg-accent);
  border-radius: 999px;
  font-family: var(--ofg-font);
  font-weight: 700;
}
body.ofg-theme #cf-submit:hover {
  background: var(--ofg-accent-hover);
}
body.ofg-theme .contact-address a {
  color: var(--ofg-accent);
}

/* ---------- 10. Phones ---------- */
@media (max-width: 767.98px) {
  body.ofg-theme .wizard .theme.game-list.primary .game-list-content .content-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 10px;
  }
  body.ofg-theme .wizard .theme.game-list.primary .game-list-content .content-grid .grid-item {
    min-width: 0;
  }
}