/* ══════════════════════════════════════════════════
   OPTIC — Estils personalitzats
   Botiga de làmines d'art òptic i geomètric
   Autor: Pau Vera Pérez
   Versió: 1.0.0
   ══════════════════════════════════════════════════ */

/* ── Variables de color ────────────────────────── */
:root {
  --optic-primary: #2B4C7E;
  --optic-primary-dark: #1E3A5F;
  --optic-accent: #FF006E;
  --optic-accent-dark: #D4005B;
  --optic-bg: #FAFAF8;
  --optic-text: #1A1A1A;
  --optic-text-muted: #6B7280;
  --optic-surface: #F4F5F7;
  --optic-border: #E5E7EB;
  --optic-white: #FFFFFF;
  --optic-error: #DC2626;
  --optic-success: #16A34A;
  --optic-radius: 6px;
  --optic-radius-lg: 8px;
  --optic-shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --optic-shadow-md: 0 4px 12px rgba(0,0,0,0.12);
  --optic-transition: 0.2s ease;
}

/* ── Tipografia general ────────────────────────── */
body {
  font-family: 'Inter', -apple-system, 'Segoe UI', sans-serif;
  color: var(--optic-text);
  background-color: var(--optic-bg);
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6,
.site-title,
.woocommerce-loop-product__title {
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  line-height: 1.2;
  color: var(--optic-text);
}

/* ── Skip link accessibilitat ──────────────────── */
.skip-link {
  position: absolute;
  top: -100%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  padding: 12px 24px;
  background: var(--optic-primary);
  color: var(--optic-white);
  font-family: 'Archivo', sans-serif;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  border-radius: 0 0 var(--optic-radius) var(--optic-radius);
}

.skip-link:focus {
  top: 0;
  outline: 3px solid var(--optic-accent);
  outline-offset: 2px;
}

/* ── Header / Navegació ────────────────────────── */
header[data-id="type-1"] {
  background: var(--optic-white);
  box-shadow: var(--optic-shadow-sm);
}

.ct-header a {
  font-family: 'Archivo', sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: var(--optic-text);
  transition: color var(--optic-transition);
}

.ct-header a:hover,
.ct-header a:focus {
  color: var(--optic-accent);
}

/* ── Botons ────────────────────────────────────── */

/* Botó primari */
.wp-element-button,
.wc-block-components-button,
button[type="submit"],
.ct-button,
.button,
.wp-block-button__link {
  font-family: 'Archivo', sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.02em;
  padding: 12px 24px;
  border-radius: var(--optic-radius);
  transition: all var(--optic-transition);
  cursor: pointer;
  text-transform: none;
}

/* Botó principal (blau) */
.wp-element-button,
.button.alt,
.checkout-button,
.single_add_to_cart_button,
button[type="submit"] {
  background-color: var(--optic-primary) !important;
  color: var(--optic-white) !important;
  border: none;
}

.wp-element-button:hover,
.button.alt:hover,
.checkout-button:hover,
.single_add_to_cart_button:hover,
button[type="submit"]:hover {
  background-color: var(--optic-primary-dark) !important;
}

/* Focus visible per accessibilitat */
.wp-element-button:focus-visible,
.button:focus-visible,
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--optic-accent);
  outline-offset: 2px;
}

/* Botó afegir a cistella (accent rosa) */
.add_to_cart_button,
.product_type_simple {
  background-color: var(--optic-accent) !important;
  color: var(--optic-white) !important;
  border: none !important;
}

.add_to_cart_button:hover,
.product_type_simple:hover {
  background-color: var(--optic-accent-dark) !important;
}

/* ── Productes - Grid de la botiga ─────────────── */
.woocommerce ul.products li.product {
  background: var(--optic-white);
  border: 1px solid var(--optic-border);
  border-radius: var(--optic-radius-lg);
  padding: 0;
  overflow: hidden;
  transition: all var(--optic-transition);
  box-shadow: var(--optic-shadow-sm);
}

.woocommerce ul.products li.product:hover {
  box-shadow: var(--optic-shadow-md);
  transform: translateY(-2px);
}

/* Imatge de producte */
.woocommerce ul.products li.product img {
  border-radius: 0;
  margin-bottom: 0;
}

/* Info del producte */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: 'Archivo', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--optic-text);
  padding: 12px 16px 4px;
}

/* Preu del producte */
.woocommerce ul.products li.product .price {
  color: var(--optic-accent);
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 16px;
  padding: 0 16px 12px;
}

/* ── Pàgina de producte individual ─────────────── */
.woocommerce div.product .product_title {
  font-family: 'Archivo', sans-serif;
  font-size: 28px;
  font-weight: 800;
  color: var(--optic-text);
}

.woocommerce div.product p.price {
  color: var(--optic-accent);
  font-size: 24px;
  font-weight: 600;
}

/* Selectors de variacions */
.woocommerce div.product .variations select {
  border: 1px solid var(--optic-border);
  border-radius: var(--optic-radius);
  padding: 10px 14px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  transition: border-color var(--optic-transition);
}

.woocommerce div.product .variations select:focus {
  border-color: var(--optic-primary);
  outline: 3px solid rgba(43, 76, 126, 0.2);
}

.woocommerce div.product .variations label {
  font-family: 'Archivo', sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--optic-text);
}

/* ── Formulari de contacte (CF7) ───────────────── */
.wpcf7-form label {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: var(--optic-text);
  display: block;
  margin-bottom: 4px;
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea {
  width: 100%;
  border: 1px solid var(--optic-border);
  border-radius: var(--optic-radius);
  padding: 12px 16px;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  color: var(--optic-text);
  background: var(--optic-white);
  transition: border-color var(--optic-transition);
  margin-bottom: 16px;
}

.wpcf7-form input:focus,
.wpcf7-form textarea:focus {
  border-color: var(--optic-primary);
  outline: 3px solid rgba(43, 76, 126, 0.2);
}

/* Missatge d'error del formulari */
.wpcf7-not-valid-tip {
  color: var(--optic-error);
  font-size: 13px;
  margin-top: -12px;
  margin-bottom: 8px;
}

/* Missatge d'èxit */
.wpcf7-mail-sent-ok,
.wpcf7-response-output {
  border-color: var(--optic-success) !important;
  color: var(--optic-success);
  font-family: 'Inter', sans-serif;
}

/* ── Cistella i Checkout ───────────────────────── */
.woocommerce-cart .cart_totals h2,
.woocommerce-checkout h3 {
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
}

.woocommerce table.shop_table {
  border: 1px solid var(--optic-border);
  border-radius: var(--optic-radius-lg);
  overflow: hidden;
}

.woocommerce table.shop_table th {
  font-family: 'Archivo', sans-serif;
  font-weight: 600;
  background: var(--optic-surface);
}

/* ── Footer ────────────────────────────────────── */
footer[data-id="type-1"] {
  background-color: var(--optic-text) !important;
  color: var(--optic-bg);
}

footer[data-id="type-1"] a {
  color: #9CA3AF;
  transition: color var(--optic-transition);
}

footer[data-id="type-1"] a:hover {
  color: var(--optic-accent);
}

/* ── Breadcrumbs ───────────────────────────────── */
.woocommerce .woocommerce-breadcrumb {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: var(--optic-text-muted);
  margin-bottom: 20px;
}

.woocommerce .woocommerce-breadcrumb a {
  color: var(--optic-primary);
}

.woocommerce .woocommerce-breadcrumb a:hover {
  color: var(--optic-accent);
}

/* ── Paginació ─────────────────────────────────── */
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  border-color: var(--optic-border);
  color: var(--optic-text);
  font-family: 'Archivo', sans-serif;
  border-radius: var(--optic-radius);
}

.woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--optic-primary);
  border-color: var(--optic-primary);
  color: var(--optic-white);
}

/* ── Responsive ────────────────────────────────── */
@media (max-width: 767px) {
  h1 { font-size: 28px; }
  h2 { font-size: 22px; }

  .woocommerce div.product .product_title {
    font-size: 22px;
  }

  .woocommerce div.product p.price {
    font-size: 20px;
  }

  .woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 14px;
    padding: 8px 12px 2px;
  }

  .woocommerce ul.products li.product .price {
    font-size: 14px;
    padding: 0 12px 8px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .woocommerce ul.products[class*="columns-"] li.product {
    width: 48%;
  }
}

/* ── Utilitats ─────────────────────────────────── */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Animació suau per a tots els elements interactius */
a, button, input, select, textarea, .product {
  transition: all var(--optic-transition);
}


/* ══════════════════════════════════════════════════
   ITERACIONS — Millores basades en tests d'usuari
   Data: Maig 2026
   ══════════════════════════════════════════════════ */

/* Iteracio 1: Botons mes grans en mobil (min 48px per accessibilitat tactil) */
@media (max-width: 767px) {
  .add_to_cart_button,
  .single_add_to_cart_button,
  .checkout-button,
  button[type="submit"],
  .wp-element-button {
    min-height: 48px;
    font-size: 15px;
    padding: 14px 20px;
  }
}

/* Iteracio 2: Selectors de variacions mes grans en mobil */
@media (max-width: 767px) {
  .woocommerce div.product .variations select {
    min-height: 48px;
    font-size: 16px;
    padding: 12px 16px;
  }
  
  .woocommerce div.product .variations td {
    display: block;
    padding: 4px 0;
  }
  
  .woocommerce div.product .variations label {
    font-size: 15px;
    margin-bottom: 6px;
  }
}

/* Iteracio 3: Footer mes llegible en mobil */
@media (max-width: 767px) {
  footer[data-id="type-1"] {
    padding: 30px 16px;
  }
  
  footer[data-id="type-1"] .ct-container {
    flex-direction: column;
    gap: 24px;
  }
}


/* ══════════════════════════════════════════════════
   CORRECCIONS D'ACCESSIBILITAT — Lighthouse Audit
   Data: Març 2026
   ══════════════════════════════════════════════════ */

/* Fix 1: Millorar contrast de text secundari (AA compliance) */
:root {
  --optic-text-muted: #4B5563; /* canvi de #6B7280 a #4B5563 per AA */
}

/* Fix 2: Links dins de blocs de text — underline per distingir-los */
.entry-content a,
.woocommerce-product-details__short-description a,
.page-content a,
p a,
.widget a,
.comment-content a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.entry-content a:hover,
p a:hover {
  text-decoration-thickness: 2px;
}

/* Fix 3: Footer links contrast millorat */
footer[data-id="type-1"] a {
  color: #D1D5DB; /* canvi de #9CA3AF a #D1D5DB per AA sobre fons fosc */
}

/* Fix 4: Breadcrumb links distingibles */
.woocommerce .woocommerce-breadcrumb a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* Fix 5: Price links i product title links */
.woocommerce ul.products li.product a {
  text-decoration: none; /* productes no necessiten underline (son cards) */
}

/* Fix 6: Missatges WooCommerce contrast */
.woocommerce-info,
.woocommerce-message {
  color: var(--optic-text);
}