/*
Theme Name: Bait ‘n Lurez Blocksy Child
Theme URI: https://baitandlurez.com
Description: A child theme for Blocksy built specifically for the Bait ‘n Lurez streetwear brand.  It inherits the lightweight, modular nature of Blocksy【540763787712787†L78-L88】 while defining bespoke colours, typography and layout settings based on the provided brand guidelines.  This child theme should be uploaded alongside the Blocksy parent theme to WordPress.
Author: Bait ‘n Lurez
Author URI: https://baitandlurez.com
Template: blocksy
Version: 1.0.0
License: GNU General Public License v3 or later
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: baitnlurez-blocksy-child

/*
 * Import the parent theme’s styles.  Blocksy uses theme.json for most of its
 * styling, but loading the parent stylesheet keeps backwards compatibility
 * with classic templates.  Additional styling is declared in theme.json.
 */

@import url("../blocksy/style.css");

/* Custom CSS overrides.  These rules fine‑tune elements that cannot yet be
   configured through theme.json alone.  They respect the Patta‑inspired
   aesthetics: clean layouts, strong typography and controlled micro‑interactions.
*/

:root {
  /* Define CSS variables for primary colours so they can be reused across
     custom blocks and additional CSS. */
  --primary-color: #DFFF00; /* Neon chartreuse accent used for CTAs and badges */
  --accent-color: #FF5A00;  /* Hot orange support accent for highlights */
  --base-dark: #0A0A0A;
  --base-light: #FFFFFF;
  --border-color: #E6E6E6;
}

/* Buttons: rectangular with rounded corners, minimal shadow and subtle scale
   on hover. */
.wp-element-button,
button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
  border-radius: 16px;
  padding: 14px 28px;
  font-weight: 700;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.wp-element-button:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 8px rgba(0,0,0,0.08);
}

/* Primary buttons use the neon chartreuse background with dark text. */
.wp-element-button.is-style-primary {
  background-color: var(--primary-color);
  color: var(--base-dark);
}

/* Secondary/ghost buttons: dark outline on light backgrounds and vice versa. */
.wp-element-button.is-style-secondary {
  background: transparent;
  border: 2px solid currentColor;
  color: var(--base-dark);
}
.has-dark-background .wp-element-button.is-style-secondary {
  color: var(--base-light);
  border-color: var(--base-light);
}

/* Product tiles: aspect ratio of 4:5 with hover swap and slight scale.  When
   images are loaded, the container preserves space to prevent layout shifts. */
.product-tile {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background-color: var(--base-light);
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  transition: transform 0.15s ease;
}
.product-tile:hover {
  transform: scale(1.02);
}
.product-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.2s ease;
}
.product-tile img.secondary-image {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}
.product-tile:hover img.primary-image {
  opacity: 0;
}
.product-tile:hover img.secondary-image {
  opacity: 1;
}

/* Badges such as “Limited Drop” or “New”. */
.product-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background-color: var(--primary-color);
  color: var(--base-dark);
  font-size: 12px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 4px;
  text-transform: uppercase;
}

/* Announcement bar at the top of the site. */
.site-announcement {
  background-color: var(--base-dark);
  color: var(--primary-color);
  font-size: 12px;
  letter-spacing: 0.1em;
  padding: 6px 16px;
  text-align: center;
}

/* Header styling: sticky header with slight shadow when scrolled. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background-color: var(--base-light);
  transition: box-shadow 0.2s ease;
}
.site-header.is-scrolled {
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* Footer styling: clean grid with columns and minimalistic typography. */
.site-footer {
  background-color: var(--base-dark);
  color: var(--base-light);
  padding: 40px 0;
}
.site-footer .widget-title {
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--primary-color);
}
.site-footer a {
  color: var(--base-light);
  text-decoration: none;
}
.site-footer a:hover {
  text-decoration: underline;
}

/* Typography: uppercase headings with condensed fonts (Anton/Bebas Neue) and
   geometric sans for body.  These will be provided via theme.json where
   possible. */
h1, h2, h3, .has-heading-font {
  font-family: var(--wp--preset--font-family--heading), sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

body {
  font-family: var(--wp--preset--font-family--body), sans-serif;
  line-height: 1.6;
  color: var(--base-dark);
  background-color: var(--base-light);
  margin: 0;
}

/* Focus states for accessibility.  Ensure high contrast and visible outlines. */
a:focus,
button:focus,
input:focus {
  outline: 3px solid var(--primary-color);
  outline-offset: 2px;
}