/*
 Theme Name: GeneratePress Child
 Theme URI: https://mtg.collectible.no/
 Description: Child theme for GeneratePress to host Typesense templates
 Author: Collectible MTG
 Template: generatepress
 Text Domain: generatepress-child
 Version: 0.1.0
*/

/* Intentionally minimal. We use a blank template to isolate CSS on the Typesense page. */

/* Ensure facet search inputs never overflow when using the child template */
#ts-search .ts-facets .ais-RefinementList-searchBox input,
#ts-search .ts-facets .ais-SearchBox-input {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

/* Extra specificity to defeat Woo/GP styles wrapping forms */
#ts-search .ts-facets .ais-RefinementList .ais-SearchBox .ais-SearchBox-form,
#ts-search .ts-facets .ais-RefinementList .ais-SearchBox .ais-SearchBox-input {
  width: 100% !important;
  max-width: 100% !important;
}

/* Ensure min/max don’t force overflow; keep inputs within 280px sidebar */
#ts-search .ts-facets .ais-RefinementList .ais-SearchBox-input {
  min-width: 0 !important;
}

/* Guard against container flex/grids causing growth */
#ts-search .ts-facets, #ts-search .ts-facets * {
  box-sizing: border-box;
}

/* Dark mode variables with a gentle default theme */
:root{
  --ct-bg:#ffffff;
  --ct-fg:#111111;
  --ct-card:#ffffff;
  --ct-border:#e5e5e5;
  --ct-accent:#0a7c3a;
  --ct-muted:#4d4d4d;
}

/* Green-on-black CRT inspired palette for dark mode */
html.dark{
  --ct-bg:#060807;           /* near black */
  --ct-fg:#9eff6b;           /* primary green text */
  --ct-card:#0c120f;         /* panels/cards */
  --ct-border:#1c2a22;       /* subtle greenish border */
  --ct-accent:#39ff88;       /* accents/highlights */
  --ct-muted:#6bdc9d;        /* muted labels */
}

/* Global surface & typography */
body{ background:var(--ct-bg); color:var(--ct-fg); }
html.dark a{ color:var(--ct-accent) !important; }
html.dark .site, html.dark .site-content, html.dark .container, html.dark .container.grid-container,
html.dark #page, html.dark #ts-search, html.dark .ts-container{ background:var(--ct-bg) !important; color:var(--ct-fg); }

/* Inputs & selects */
html.dark input[type=text],
html.dark input[type=search],
html.dark select,
html.dark textarea{
  background:transparent !important;
  border:1px solid var(--ct-border) !important;
  color:var(--ct-fg) !important;
}
html.dark ::placeholder{ color:color-mix(in oklab, var(--ct-fg) 50%, transparent) }
html.dark input[type=checkbox]{ accent-color:var(--ct-accent); }

/* Toolbar buttons */
.ts-toolbar button, .ts-toolbar a{ color:var(--ct-fg); background:var(--ct-card); border-color:var(--ct-border); }
.ts-toolbar #ts-link-cart, .ts-toolbar #ts-link-checkout{ margin-left:.5rem; }
.ts-toolbar .active{ background:var(--ct-accent) !important; color:#000 !important; border-color:var(--ct-accent); }

/* Facets */
html.dark .ts-facets{ color:var(--ct-fg); }
html.dark .ais-RefinementList-labelText, html.dark .ais-RefinementList-count{ color:var(--ct-fg); }
/* Remove pill/background from refinement counts for cleaner dark mode */
.ais-RefinementList-count{
  background:none !important;
  color:inherit !important;
  border:none !important;
  padding:0 !important;
}
/* Also neutralize possible theme styles applied to counts */
#ts-search .ais-RefinementList-count{ background:none !important; border:none !important; box-shadow:none !important; }
/* Hide right sidebar widgets we don't want globally */
.widget_recent_entries, .widget_recent_comments { display:none !important; }
/* Hide top menu items (we inject search instead) */
.main-navigation .main-nav > ul > li { display:none !important; }
html.dark .ais-SearchBox-input{ background:transparent; color:var(--ct-fg); border:1px solid var(--ct-border); }
html.dark .ais-SearchBox-form{ border-color:var(--ct-border); }
html.dark .ais-Stats-text, html.dark .ais-Panel-header, html.dark .ais-Panel-subtitle{ color:var(--ct-muted); }
html.dark .ais-Panel{ color:var(--ct-fg); }
html.dark .ais-RefinementList{ color:var(--ct-fg); }

/* Hits */
.ts-hits.view-grid .ts-card{ background:var(--ct-card); border-color:var(--ct-border); }
.ts-hits.view-list .ts-card{ background:transparent; border-color:var(--ct-border); }
html.dark #ts-head{ color:var(--ct-muted); background:transparent; border-color:var(--ct-border); }
html.dark .ts-sku, html.dark .ts-price, html.dark .ts-stock, html.dark .ts-name{ color:var(--ct-fg); }

/* Pagination */
html.dark .ais-Pagination-link{ color:var(--ct-fg); border:1px solid var(--ct-border); background:var(--ct-card); }
html.dark .ais-Pagination-item--selected .ais-Pagination-link{ background:var(--ct-accent); color:#000; border-color:var(--ct-accent); }

/* WooCommerce form elements in blank cart/checkout */
html.dark .woocommerce a.button, html.dark .woocommerce button.button, html.dark .woocommerce .button{
  background:var(--ct-accent) !important; color:#000 !important; border:1px solid var(--ct-accent) !important;
}

/* Simple top-right back button on checkout */
.ts-back-btn{
  position: absolute;
  right: 20px;
  top: 56px; /* drop below dark mode toggle */
  display: inline-block;
  padding: 8px 12px;
  border: 1px solid var(--ct-border, #666);
  background: #0f0f0f;
  color: #ffffff !important;
  text-decoration:none;
  border-radius:4px;
  font-weight:600;
}
.ts-back-btn:hover{ background: var(--ct-accent, #3f3); color:#000 !important; border-color: var(--ct-accent, #3f3); }

@media (max-width: 768px){
  .ts-back-btn{ top: 64px; right: 12px; }
}

/* Hide dark mode toggle for now */
.ct-dark-toggle{ display:none !important; }

/* Mobile-only readability to avoid iOS zoom on focus */
@media (max-width: 768px){
  input, select, textarea{ font-size:16px; }
}

/* Mobile layout fixes for landing page (Typesense) */
@media (max-width: 768px){
  /* prevent any residual transform/scale from ancestors */
  html, body, #ts-blank-wrap, #ts-search{ transform:none !important; zoom:1 !important; }
  /* ensure containers don’t overflow viewport width */
  #ts-blank-wrap, #ts-search{ max-width:100vw; overflow-x:hidden; }
  /* tighten paddings to fit full width */
  .ts-container, .ts-hits, .ts-facets{ padding-left:8px; padding-right:8px; }
}
html.dark .woocommerce table, html.dark .woocommerce th, html.dark .woocommerce td{
  border-color:var(--ct-border) !important; color:var(--ct-fg);
}
html.dark .woocommerce input[type=text],
html.dark .woocommerce input[type=email],
html.dark .woocommerce input[type=tel],
html.dark .woocommerce input[type=password],
html.dark .woocommerce select,
html.dark .woocommerce textarea{
  background:transparent; color:var(--ct-fg); border:1px solid var(--ct-border);
}

/* Hard clamp facet search inputs so they never exceed the sidebar */
#ts-search .ts-facets .ais-SearchBox,
#ts-search .ts-facets .ais-SearchBox-form,
#ts-search .ts-facets .ais-SearchBox-input {
  max-width: 260px !important;
}

/* Hide Typesense UI on cart/checkout pages */
.woocommerce-cart #ts-search,
.woocommerce-checkout #ts-search { display:none !important; }

/* Hide redundant small checkout link on cart form; keep the totals button */
.woocommerce-cart .woocommerce-cart-form a[href*="checkout"],
.woocommerce-cart .woocommerce-cart-form .checkout-button { display:none !important; }
/* Extra guard: hide any checkout link outside totals, but keep the main totals button */
.woocommerce-cart a.button[href*="/checkout/"] { display:none !important; }
.woocommerce-cart .cart_totals a.button[href*="/checkout/"] { display:inline-block !important; }