/* Shared generated markup contract, loaded after the selected theme.
   Theme colors and typography stay in each variant; these rules supply
   shared navigation and adapt the three legacy layout families. */
.site-header { padding-inline: 0; height: auto; }
.site-header > .container {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; max-width: var(--max-w, var(--max-width, 1140px));
  min-height: 64px; height: auto; margin-inline: auto; padding: 10px 20px; gap: 16px;
}
.site-header .logo { display: flex; align-items: center; gap: 8px; min-width: 0; flex-shrink: 0; }
.site-header .logo-img { display: block; width: auto; height: 30px; max-width: 110px; object-fit: contain; }
.site-header .nav { display: flex; align-items: center; flex-wrap: wrap; list-style: none; gap: 4px; margin: 0; padding: 0; }
.site-header .nav a { display: block; padding: 8px 10px; color: var(--text); text-decoration: none; font-size: .875rem; }
.site-header .nav a:hover { color: var(--accent); }
.site-header .hamburger { display: none; flex-shrink: 0; width: 44px; height: 44px; padding: 10px; border: 1px solid var(--border); border-radius: 6px; background: transparent; color: var(--text); cursor: pointer; }
.site-header .hamburger span { display: block; width: 22px; height: 2px; flex-shrink: 0; background: currentColor; }
.site-header :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
main > .hero { max-width: var(--max-w, var(--max-width, 1140px)); margin-inline: auto; padding-inline: 20px; }
main .container { min-width: 0; }
main img { max-width: 100%; }
/* Small key facts need the readable secondary colour in every theme. */
body .key-info .label { color: var(--text-secondary); }
main .btn-primary { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.provider-logo-grid { grid-template-columns: repeat(auto-fit, minmax(min(120px, 100%), 1fr)); }
/* These families originally targeted a comparison app with a nav element
   and sidebar. Generated brand pages use .nav and full-width articles. */
body:is([data-theme^="filterable-grid--"], [data-theme^="table-forward--"], [data-theme^="gamified-emoji--"]) {
  --surface: var(--card-bg); --surface-hover: var(--card-bg);
  --bg-alt: var(--card-bg); --accent-dark: var(--primary-dark);
  --green: var(--success); --green-bg: transparent; --green-border: var(--border);
  --accent-glow: transparent; --radius: var(--radius-md);
}
body:is([data-theme^="filterable-grid--"], [data-theme^="table-forward--"], [data-theme^="gamified-emoji--"]) .container { width: 100%; max-width: var(--max-width); margin-inline: auto; padding-inline: 20px; }
body:is([data-theme^="filterable-grid--"], [data-theme^="table-forward--"], [data-theme^="gamified-emoji--"]) main { display: block; padding: 24px 0; }
body:is([data-theme^="filterable-grid--"], [data-theme^="table-forward--"], [data-theme^="gamified-emoji--"]) .content-section { padding: 24px; margin-block: 24px; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-md); }
body:is([data-theme^="filterable-grid--"], [data-theme^="table-forward--"], [data-theme^="gamified-emoji--"]) .content-section :is(p, ul, ol) { margin-block: 12px; }
body:is([data-theme^="filterable-grid--"], [data-theme^="table-forward--"], [data-theme^="gamified-emoji--"]) .content-section :is(ul, ol) { padding-left: 24px; }
body:is([data-theme^="filterable-grid--"], [data-theme^="table-forward--"], [data-theme^="gamified-emoji--"]) .key-info { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 20px; }
body:is([data-theme^="filterable-grid--"], [data-theme^="table-forward--"], [data-theme^="gamified-emoji--"]) .key-info :is(.label,.value) { display: block; }
body:is([data-theme^="filterable-grid--"], [data-theme^="table-forward--"], [data-theme^="gamified-emoji--"]) .key-info .label { color: var(--text-secondary); font-size: .8rem; }
body:is([data-theme^="filterable-grid--"], [data-theme^="table-forward--"], [data-theme^="gamified-emoji--"]) .key-info .value { font-weight: 700; overflow-wrap: anywhere; }
body:is([data-theme^="filterable-grid--"], [data-theme^="table-forward--"], [data-theme^="gamified-emoji--"]) .hero { padding-block: 32px; }
body:is([data-theme^="filterable-grid--"], [data-theme^="table-forward--"], [data-theme^="gamified-emoji--"]) .hero h1 { font-size: clamp(1.7rem, 3vw, 2.6rem); line-height: 1.2; margin-bottom: 16px; }
.mobile-cta { display: none; }
@media (max-width: 900px) {
  .site-header > .container { flex-wrap: wrap; gap: 8px; }
  .site-header .logo { font-size: .95rem; gap: 5px; max-width: calc(100% - 52px); flex-wrap: wrap; }
  .site-header .logo-img { max-width: 90px; height: 26px; }
  .site-header .hamburger { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; margin-left: auto; }
  .site-header .nav { display: none; }
  .site-header .nav.open { display: flex; position: static; width: 100%; flex: 0 0 100%; flex-direction: column; align-items: stretch; padding: 8px 0; background: var(--surface, var(--card-bg, var(--bg))); }
  .site-header .nav.open a { padding: 10px; }
  body { padding-bottom: 76px; }
  .mobile-cta { display: block; position: fixed; inset: auto 0 0; z-index: 200; padding: 14px 12px max(14px, env(safe-area-inset-bottom)); background: var(--accent); color: var(--text); text-align: center; font-weight: 700; font-size: .875rem; text-decoration: none; }
}
@media (max-width: 600px) {
  body:is([data-theme^="filterable-grid--"], [data-theme^="table-forward--"], [data-theme^="gamified-emoji--"]) .key-info { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 16px; }
  .pokies-grid, .feature-grid { grid-template-columns: minmax(0, 1fr); }
  .provider-logo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .content-section { overflow-wrap: anywhere; }
}

body:is([data-theme^="filterable-grid--"], [data-theme^="table-forward--"], [data-theme^="gamified-emoji--"]) main a:not(.btn-primary):not(.btn):not(.btn-cta) { color: var(--primary); }
body:is([data-theme^="filterable-grid--"], [data-theme^="table-forward--"], [data-theme^="gamified-emoji--"]) .hero .subtitle { margin-block: 16px; }
@media (max-width: 480px) {
  .key-info .info-item { min-width: 0; overflow-wrap: anywhere; }
  .key-info .value { font-size: .85rem; }
}

/* Wide comparison tables scroll within their own region, not the page. */
.table-scroll { max-width: 100%; min-width: 0; overflow-x: auto; margin-block: 24px; }
.table-scroll table { width: 100%; min-width: 32rem; margin-block: 0; }
.table-scroll:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Keep shared controls readable on both light and dark accent palettes. */
body a.mobile-cta, body main a.btn-primary {
  background: var(--accent); color: var(--cta-foreground); filter: none;
}
body a.mobile-cta:hover, body main a.btn-primary:hover {
  color: var(--cta-foreground); filter: none; text-decoration: underline;
}
body .post-meta, body .breadcrumbs { color: var(--text-secondary); }
main .provider-logo-card { min-width: 0; align-self: stretch; }
main .provider-logo-card img {
  width: 80px; height: 64px; object-fit: contain; padding: 6px;
  background: #fff; border-radius: 4px;
}
main .provider-logo-card span { font-size: .8rem; overflow-wrap: normal; word-break: normal; }
@media (max-width: 600px) {
  main .provider-logo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  main .pros-cons { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 360px) {
  main .provider-logo-grid { grid-template-columns: minmax(0, 1fr) !important; }
  main .provider-logo-card { flex-direction: row; justify-content: flex-start; }
  main .provider-logo-card img { flex: 0 0 80px; }
}

:root { --cta-foreground: #fff; }