/*
Theme Name:        Valtum
Theme URI:         https://valtum.com
Author:            Valtum
Author URI:        https://valtum.com
Description:       B2B commercial diving equipment procurement platform – converted from Next.js.
Version:           1.0.0
Requires at least: 6.2
Tested up to:      6.7
Requires PHP:      8.0
License:           GNU General Public License v2 or later
License URI:       https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:       valtum-theme
*/

/* ═══════════════════════════════════════════════════════════════
   RESET
═══════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html  { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background-color: #0d1016; margin-top: 0 !important; padding-top: 0 !important; }

body  {
    background-color: #0d1016;
    color: #fff;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin-top: 0 !important;
    padding-top: 0 !important;
}
a   { color: inherit; text-decoration: none; }
img, video { display: block; max-width: 100%; }
button { cursor: pointer; background: none; border: none; font: inherit; color: inherit; }

/* ═══════════════════════════════════════════════════════════════
   PAGE OFFSET  –  compensate for fixed 72px header
═══════════════════════════════════════════════════════════════ */

/* Anchor targets sit behind the header without this */
:target { scroll-margin-top: 80px; }

/* ═══════════════════════════════════════════════════════════════
   FONT UTILITY  (Tailwind maps "font-sf-pro-display" via config)
═══════════════════════════════════════════════════════════════ */

.font-sf-pro-display {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
}

/* ═══════════════════════════════════════════════════════════════
   SCROLLBAR HIDE  –  used by How-It-Works scroll container
═══════════════════════════════════════════════════════════════ */

.scrollbar-hide                       { -ms-overflow-style: none; scrollbar-width: none; }
.scrollbar-hide::-webkit-scrollbar    { display: none; }

/* ═══════════════════════════════════════════════════════════════
   TAILWIND v4 → v3 GRADIENT FALLBACKS
   Source uses bg-linear-to-* (v4 syntax).
   These rules consume Tailwind v3's --tw-gradient-stops variables
   so from-*, via-* and to-* arbitrary colour stops work correctly.
═══════════════════════════════════════════════════════════════ */

.bg-linear-to-r { background-image: linear-gradient(to right,  var(--tw-gradient-stops)); }
.bg-linear-to-l { background-image: linear-gradient(to left,   var(--tw-gradient-stops)); }
.bg-linear-to-t { background-image: linear-gradient(to top,    var(--tw-gradient-stops)); }
.bg-linear-to-b { background-image: linear-gradient(to bottom, var(--tw-gradient-stops)); }

/* ═══════════════════════════════════════════════════════════════
   CATALOG CARD  –  image hover scale fallback
   Tailwind group-hover:scale-105 works via the Play CDN JIT;
   this plain CSS rule is the safety net.
═══════════════════════════════════════════════════════════════ */

.group:hover img { transform: scale(1.05); }

/* ═══════════════════════════════════════════════════════════════
   MISC UTILITIES
═══════════════════════════════════════════════════════════════ */

/* border-white/10 fallback (Tailwind v3 opacity modifier) */
.border-white\/10 { border-color: rgba(255,255,255,0.10); }
.border-white\/12 { border-color: rgba(255,255,255,0.12); }

/* WooCommerce float-era clearfix becomes a grid item when ul.products is display:grid */
ul.products::before,
ul.products::after {
    display: none !important;
    content: none !important;
}