/*
Theme Name: STA Custom
Theme URI: https://example.com
Author: Your Name
Description: Systech Canada audio-visual storefront for WordPress + WooCommerce, styled with Tailwind CSS.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: sta-custom
*/

/* ---------- Base ---------- */
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; }
:focus-visible { outline: 3px solid #185bd8; outline-offset: 2px; }
img, svg { max-width: 100%; }

/* ---------- Buttons ---------- */
.sta-btn,
.sta-btn-secondary {
    display: inline-flex; min-height: 3rem; align-items: center; justify-content: center; gap: .5rem;
    border-radius: .5rem; padding: .75rem 1.25rem; font-size: 1rem; line-height: 1.5rem; font-weight: 600;
    text-decoration: none; cursor: pointer; transition: background-color .15s, border-color .15s;
}
.sta-btn { background: #185bd8; color: #fff; border: 0; }
.sta-btn:hover { background: #0a1f44; color: #fff; }
.sta-btn:disabled, .sta-btn[disabled] { cursor: not-allowed; opacity: .5; }
.sta-btn-secondary { background: #fff; color: #0a1f44; border: 1px solid #d5deeb; }
.sta-btn-secondary:hover { background: #eff6ff; }
.sta-btn.loading { opacity: .7; }
.sta-btn.added::after { content: "✓"; margin-left: .25rem; }
a.added_to_cart { display: none; } /* the toast replaces WooCommerce's "View cart" link */

/* ---------- Dialogs ---------- */
.sta-dialog {
    position: fixed; inset: 0; margin: auto; width: calc(100% - 32px); max-width: 36rem; max-height: 90dvh;
    overflow-y: auto; border: 0; border-radius: 1rem; background: #fff; color: #0a1f44; padding: 1.5rem;
    box-shadow: 0 25px 50px -12px rgb(0 0 0 / .25);
}
@media (min-width: 640px) { .sta-dialog { padding: 2rem; } }
.sta-dialog::backdrop { background: rgb(6 19 43 / .65); backdrop-filter: blur(4px); }

/* ---------- Hero dots ---------- */
.sta-dot { height: .375rem; width: .375rem; border-radius: 9999px; background: #a9bad1; transition: all .2s; padding: 0; border: 0; }
.sta-dot[aria-current="true"] { width: 1.25rem; background: #185bd8; }

/* ---------- Product grid ---------- */
.sta-grid { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 419px) { .sta-grid { grid-template-columns: 1fr; } }
@media (min-width: 768px) { .sta-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1280px) {
    .sta-grid.sta-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .sta-grid.sta-cols-6 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1536px) { .sta-grid.sta-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.sta-grid.sta-cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1100px) { .sta-grid.sta-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 419px) { .sta-grid.sta-cols-3 { grid-template-columns: 1fr; } }

/* Prices: new price big, old price struck through (WooCommerce prints <del> then <ins>). */
.sta-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; }
.sta-price ins { order: 1; text-decoration: none; font-size: 1.5rem; font-weight: 700; }
.sta-price del { order: 2; font-size: .875rem; color: #5a6a84; opacity: 1; }
.sta-price > .woocommerce-Price-amount { font-size: 1.5rem; font-weight: 700; }
.sta-price .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- Page content (policy / about / faq) ---------- */
.sta-entry p { line-height: 1.75; }
.sta-entry details > summary { list-style: none; }
.sta-entry details > summary::-webkit-details-marker { display: none; }
.sta-entry details > summary::after { content: "+"; font-size: 1.5rem; color: #185bd8; }
.sta-entry details[open] > summary::after { content: "–"; }

/* ---------- Forms (contact + WooCommerce share the look) ---------- */
.sta-form label { display: block; margin-bottom: .375rem; font-weight: 600; }
.sta-form input:not([type="checkbox"]), .sta-form select, .sta-form textarea { display: block; }
input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"],
input[type="search"], input[type="url"], select, textarea {
    min-height: 3rem; width: 100%; border-radius: .5rem; border: 1px solid #d5deeb; background: #fff;
    padding: .75rem; font-size: 1rem; color: #0a1f44; outline: none;
}
input:focus, select:focus, textarea:focus { border-color: #185bd8; }

/* ---------- Filters ---------- */
.sta-filters > summary { list-style: none; }
.sta-filters > summary::-webkit-details-marker { display: none; }
@media (min-width: 1024px) { .sta-filters > summary { pointer-events: none; } }