/*
Theme Name: BLVCKOUT
Description: Dark gothic child theme of Twenty Twenty-Five for the BLVCKOUT clothing brand, ported from its Shopify store and ready for WooCommerce.
Template: twentytwentyfive
Version: 1.0.0
Requires at least: 6.7
Text Domain: blvckout
License: GPL-2.0-or-later
*/

/* Tokens shared by every page (the home page adds its own in assets/home.css). */
:root {
  --bo-void: #000;
  --bo-surface: #0e0e0e;
  --bo-line: #272725;
  --bo-smoke: #8b8b85;
  --bo-ash: #c7c7c2;
  --bo-bone: #efeee9;
  --bo-pad: clamp(20px, 5vw, 48px);
  --bo-notch: 12px;
  /* The cut corner of every button, top left and bottom right. */
  --bo-cut: polygon(var(--bo-notch) 0, 100% 0, 100% calc(100% - var(--bo-notch)), calc(100% - var(--bo-notch)) 100%, 0 100%, 0 var(--bo-notch));
}

body {
  -webkit-font-smoothing: antialiased;
}

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--bo-bone);
  outline-offset: 3px;
}

/* ---------- Header ---------- */

.bo-header {
  display: flex;
  align-items: center;
  gap: clamp(16px, 4vw, 40px);
  max-width: 1240px;
  margin-inline: auto;
  padding: 18px var(--bo-pad);
}

/* On the home page the header floats over the full-screen hero. */
.is-overlay {
  position: absolute;
  inset: 0 0 auto;
  z-index: 20;
}
body.admin-bar .is-overlay {
  top: var(--wp-admin--admin-bar--height, 0px);
}

.bo-wordmark {
  font-weight: 600;
  font-size: 1.15rem;
  letter-spacing: .24em;
  text-decoration: none;
}

.bo-nav {
  margin-left: auto;
}
.bo-nav ul {
  display: flex;
  gap: clamp(14px, 3vw, 32px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.bo-nav a {
  color: var(--bo-ash);
  text-decoration: none;
  text-underline-offset: 6px;
}
.bo-nav a:hover,
.bo-nav a[aria-current="page"] {
  color: var(--bo-bone);
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

.bo-header-tools {
  display: flex;
  align-items: center;
  gap: 6px;
}
.bo-icon-link {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  color: var(--bo-bone);
}
.bo-icon-link svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}
.bo-header .wc-block-mini-cart__button {
  color: var(--bo-bone);
}

@media (max-width: 599px) {
  /* The wordmark already leads home. */
  .bo-nav-home {
    display: none;
  }
}

/* ---------- Footer ---------- */

.bo-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px 32px;
  max-width: 1240px;
  margin: clamp(60px, 10vw, 120px) auto 0;
  padding: 32px var(--bo-pad) calc(32px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--bo-line);
  color: var(--bo-smoke);
  font-size: .95rem;
}
.bo-footer p {
  margin: 0;
}
.bo-footer-mark {
  font-family: "Grenze Gotisch", serif;
  font-size: 1.6rem;
  color: var(--bo-bone);
}
.bo-footer ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.bo-footer a {
  color: var(--bo-ash);
}
/* The home page ends in its own black FAQ section; no extra gap needed. */
.home .bo-footer {
  margin-top: 0;
}

/* ---------- Buttons everywhere (WordPress + WooCommerce) ---------- */

.wp-element-button,
.wp-block-button__link,
.wc-block-components-button:not(.is-link),
.woocommerce .button,
.woocommerce button.button,
.woocommerce a.button {
  min-height: 52px;
  padding: 0 32px;
  border: 0;
  border-radius: 0;
  background: var(--bo-bone);
  color: var(--bo-void);
  font-family: Grenze, Georgia, serif;
  font-weight: 600;
  letter-spacing: .04em;
  clip-path: var(--bo-cut);
  transition: background-color .2s, transform .1s;
}
.wp-element-button:hover,
.wc-block-components-button:not(.is-link):hover,
.woocommerce .button:hover {
  background: #fff;
  color: var(--bo-void);
}
.wp-element-button:active,
.wc-block-components-button:not(.is-link):active {
  transform: scale(.98);
}
/* clip-path cuts off outlines, so focus is drawn inside the button. */
.wp-element-button:focus-visible,
.wc-block-components-button:not(.is-link):focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 3px var(--bo-void), inset 0 0 0 5px var(--bo-bone);
}

/* ---------- Shop pages ---------- */

/* Form fields: dark with a hairline, like the FAQ rules on the home page. */
.wc-block-components-text-input input,
.wc-block-components-combobox .components-combobox-control input,
.wc-blocks-components-select__select,
.woocommerce form .input-text,
.woocommerce select,
.wp-block-search__input {
  border: 1px solid var(--bo-line) !important;
  border-radius: 0 !important;
  background: var(--bo-surface) !important;
  color: var(--bo-bone) !important;
}
.wc-block-components-text-input label,
.wc-block-components-combobox label {
  color: var(--bo-smoke) !important;
}

/* Product names are long ("BLVCKOUT — Fallen Crown Zipper"): a calmer size than page titles. */
.single-product main h1.wp-block-post-title {
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3.2rem);
  line-height: 1.05;
}
/* Shirts are black on black: a faint panel shows where each image ends. */
.wp-block-woocommerce-product-image-gallery img {
  border: 1px solid var(--bo-line);
}

/* Product grid: the artwork carries the page, so the cards stay quiet. */
.wc-block-product-template .wp-block-post-title,
.wc-block-grid__product-title {
  font-family: Grenze, Georgia, serif;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.3;
}
.wc-block-product-template .wp-block-post-title a {
  text-decoration: none;
}
.wc-block-components-product-image img,
.wp-block-woocommerce-product-image-gallery img {
  background: var(--bo-surface);
}
.wc-block-components-product-price,
.wp-block-woocommerce-product-price {
  color: var(--bo-ash);
}

/* Sale badge and notices in brand colours instead of WooCommerce purple. */
.wc-block-components-product-sale-badge {
  border: 1px solid var(--bo-bone);
  border-radius: 0;
  background: var(--bo-void);
  color: var(--bo-bone);
}
.wc-block-components-notice-banner {
  border-radius: 0;
  background: var(--bo-surface);
  color: var(--bo-bone);
}

/* Size picker: square chips with a clear selected state. */
.wc-block-add-to-cart-with-options-variation-selector-attribute-options__pill {
  border-radius: 0;
  border-color: var(--bo-line);
  background: transparent;
  color: var(--bo-bone);
}
.wc-block-add-to-cart-with-options-variation-selector-attribute-options__pill--selected {
  border-color: var(--bo-bone);
  background: var(--bo-bone);
  color: var(--bo-void);
}

/* Cart and checkout panels. */
.wc-block-components-sidebar-layout .wc-block-components-sidebar,
.wc-block-components-order-summary,
.wc-block-components-totals-wrapper {
  border-color: var(--bo-line);
}
.wc-block-components-radio-control__option,
.wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-option {
  border-color: var(--bo-line) !important;
}
.wc-block-mini-cart__drawer .components-modal__content {
  background: var(--bo-void);
  color: var(--bo-bone);
}

@media (prefers-reduced-motion: reduce) {
  .wp-element-button,
  .wc-block-components-button {
    transition: none;
  }
}