/*
 * WordPress-specific additions on top of site.css (the original compiled Tailwind build).
 * Keep this small: layout and look come from site.css utility classes in the templates.
 */

/* Utility classes like .flex would otherwise override the hidden attribute. */
[hidden] { display: none !important; }

.apex-sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.apex-skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: #cc2222; color: #fff; padding: .75rem 1rem;
  font-family: var(--font-space-grotesk), system-ui, sans-serif;
  text-transform: uppercase; letter-spacing: .1em; font-size: .75rem;
}
.apex-skip:focus { left: 1rem; top: 1rem; }

html.apex-lock, html.apex-lock body { overflow: hidden; }
.apex-break, main a[href^="mailto:"] { overflow-wrap: anywhere; }

/* The original scrolled sideways on phones; clip stray overflow without breaking the sticky header. */
main { overflow-x: clip; }

/* Product quantity stepper: the original's 3 x 5rem buttons overflow a phone screen. */
@media (max-width: 639px) {
  .apex-qty > button, .apex-qty > span { width: 3.5rem; height: 3.5rem; }
  .js-cart-page > div { padding: 1rem; }
}

/* Focus rings for keyboard users only (the original showed them after every mouse click). */
:focus:not(:focus-visible) { --tw-ring-shadow: 0 0 #0000 !important; box-shadow: none !important; }

/* Sticky header sits under the WordPress admin bar when logged in. */
body.admin-bar .apex-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .apex-header { top: 0; } }

/* Cart drawer: keep it out of reach when closed. */
.js-cart-drawer[inert] { visibility: hidden; transition: transform .2s, visibility 0s .2s; }
.js-cart-drawer:not([inert]) { visibility: visible; }

/* Native select with appearance-none needs its caret back. */
.apex-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23ffffff' stroke-opacity='.5' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.5rem;
}
.apex-select option { background: #1a1a3e; color: #fff; }

/* Product tab strip scrolls rather than wrapping on phones. */
.apex-tablist { overflow-x: auto; scrollbar-width: none; }
.apex-tablist::-webkit-scrollbar { display: none; }
.apex-tablist > button { white-space: nowrap; flex-shrink: 0; }

/* Content written in the WordPress editor (new pages/posts). */
.apex-content a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.apex-content a:hover { color: #cc2222; }
.apex-content img { max-width: 100%; height: auto; }
.apex-content .wp-block-image, .apex-content figure { margin: 2rem 0; }
.apex-content figcaption { font-size: .8rem; color: #94a3b8; margin-top: .5rem; }
.apex-content p:last-child { margin-bottom: 0; }

/* Blog pagination */
.apex-pagination { margin-top: 3rem; }
.apex-pagination .nav-links { display: flex; flex-wrap: wrap; gap: .5rem; }
.apex-pagination .page-numbers {
  font-family: var(--font-space-grotesk), system-ui, sans-serif; text-transform: uppercase;
  letter-spacing: .1em; font-size: .75rem; padding: .5rem 1rem;
  border: 1px solid rgba(255, 255, 255, .2); color: rgba(255, 255, 255, .6);
}
.apex-pagination .page-numbers.current, .apex-pagination a.page-numbers:hover { background: #cc2222; border-color: #cc2222; color: #fff; }

/* WooCommerce pay-for-order screen (only used if a card processor is added later). */
.apex-wc { color: rgba(255, 255, 255, .8); }
.apex-wc table { width: 100%; border-collapse: collapse; margin-bottom: 2rem; }
.apex-wc th, .apex-wc td { border-bottom: 1px solid rgba(255, 255, 255, .1); padding: .75rem .5rem; text-align: left; }
.apex-wc .button, .apex-wc button[type="submit"] {
  background: #cc2222; color: #fff; border: 0; padding: 1rem 2rem; cursor: pointer;
  font-family: var(--font-space-grotesk), system-ui, sans-serif; text-transform: uppercase; letter-spacing: .1em;
}
.apex-wc .woocommerce-error, .apex-wc .woocommerce-info, .apex-wc .woocommerce-message {
  list-style: none; border: 1px solid rgba(255, 255, 255, .15); padding: 1rem; margin-bottom: 1.5rem;
}

/* ------------------------------------------------------------------------------------------
 * Text pages (Shipping, Returns, Privacy, Terms, new pages): block-editor content styled like
 * the original policy pages. Also used by assets/css/editor.css so the editor matches.
 * ---------------------------------------------------------------------------------------- */
.apex-text { font-family: var(--font-space-grotesk), system-ui, sans-serif; color: rgba(255, 255, 255, .7); line-height: 1.625; }
.apex-text > * { margin: 0 0 .75rem; }
.apex-text h2 { font-size: 1.5rem; line-height: 2rem; color: #fff; font-weight: 400; margin: 2rem 0 .75rem; }
.apex-text h3 { font-size: 1.25rem; line-height: 1.75rem; color: #fff; font-weight: 400; margin: 1.5rem 0 .5rem; }
.apex-text > :first-child,
.apex-callout > :first-child,
.apex-callout > .wp-block-group__inner-container > :first-child { margin-top: 0; }
.apex-text ul { list-style: disc; padding-left: 1.5rem; }
.apex-text ol { list-style: decimal; padding-left: 1.5rem; }
.apex-text li + li { margin-top: .25rem; }
.apex-text a { text-decoration: underline; text-underline-offset: 2px; }
.apex-text a:hover { color: #cc2222; }
.apex-text strong { font-weight: 700; }
.apex-text .apex-note { font-size: .875rem; line-height: 1.25rem; color: #6b7280; }
.apex-text .apex-callout { border: 1px solid #e5e7eb; background: #1a1a3e; padding: 1.5rem; margin-bottom: 2rem; }
.apex-text .apex-callout > :last-child,
.apex-text .apex-callout > .wp-block-group__inner-container > :last-child { margin-bottom: 0; }
.apex-text .apex-callout > .wp-block-group__inner-container > * { margin-top: 0; }
.apex-text .apex-callout h2 { margin-bottom: .75rem; }
/* (more specific than WordPress's own table block styles, which load alongside) */
.apex-text .wp-block-table { margin: 0 0 .75rem; overflow-x: auto; }
.apex-text .wp-block-table table { width: 100%; border-collapse: collapse; border: 1px solid #e5e7eb; }
.apex-text .wp-block-table table.has-fixed-layout { table-layout: fixed; }
.apex-text .wp-block-table thead { border-bottom: 0; }
.apex-text .wp-block-table th,
.apex-text .wp-block-table td { padding: 1rem; text-align: left; border: 0; border-bottom: 1px solid #e5e7eb; vertical-align: top; }
.apex-text .wp-block-table th { background: #1a1a3e; font-weight: 400; font-size: .75rem; line-height: 1rem; text-transform: uppercase; letter-spacing: .1em; }
.apex-text blockquote { border-left: 4px solid #cc2222; padding-left: 1.5rem; font-style: italic; }
.apex-text hr { border: 0; border-top: 1px solid rgba(255, 255, 255, .1); margin: 2rem 0; }

/* Block markup inside blog posts (prose handles most of it). */
/* Undo WordPress's table-block borders so article tables look like the original (row rules only). */
.prose .wp-block-table { margin: 0; overflow-x: auto; overflow-wrap: normal; }
.prose .wp-block-table table { width: 100%; border: 0; border-collapse: collapse; }
.prose .wp-block-table table.has-fixed-layout { table-layout: auto; }
.prose .wp-block-table thead { border: 0; border-bottom: 1px solid var(--tw-prose-th-borders, #2a2a50); }
.prose .wp-block-table tbody tr { border-bottom: 1px solid var(--tw-prose-td-borders, #2a2a50); }
.prose .wp-block-table th, .prose .wp-block-table td { border: 0; padding: .75em; vertical-align: top; }
.prose .wp-block-table th:first-child, .prose .wp-block-table td:first-child { padding-left: 0; }
.prose .wp-block-table table th, .prose .wp-block-table table td { word-break: normal; overflow-wrap: normal; }
.prose .wp-block-table tbody tr:last-child { border-bottom: 0; }
.prose .wp-block-separator { border: 0; border-top: 1px solid #2a2a50; }