/* Madeja theme CSS — extras not covered by Tailwind utility classes. */

/* CSS variables (mirror Customizer defaults) */
:root {
  --madeja-color-rosa: #E8C7E1;
  --madeja-color-lavanda: #E7E1E9;
  --madeja-color-arena: #FFCB8E;
  --madeja-color-azul: #5BB8E1;
  --madeja-color-fucsia: #F25F9D;
  --madeja-color-uva: #7F4F6B;
  --madeja-color-light-pink: #FDF5F9;
  --madeja-font-heading: 'Outfit', system-ui, sans-serif;
  --madeja-font-body: 'Quicksand', sans-serif;
}

/* Base font fallbacks — apply immediately, before Tailwind CDN runs */
html, body {
  font-family: var(--madeja-font-body);
  background-color: var(--madeja-color-light-pink);
  color: var(--madeja-color-uva);
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--madeja-font-heading);
  font-weight: 700;
}

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

.line-clamp-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

/* Prose — replicates Astro global.css for post content */
.prose {
  color: rgba(127, 79, 107, 0.9);
  line-height: 1.65;
}
.prose > * + * { margin-top: 1em; }
.prose h2 {
  font-family: 'Outfit', system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.5rem;
  color: #7F4F6B;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  line-height: 1.25;
}
@media (min-width: 768px) {
  .prose h2 { font-size: 1.875rem; }
}
.prose h3 {
  font-family: 'Outfit', system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  color: #7F4F6B;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}
@media (min-width: 768px) {
  .prose h3 { font-size: 1.5rem; }
}
.prose p { margin-bottom: 1rem; }
.prose img {
  border-radius: 0.5rem;
  max-width: 100%;
  height: auto;
  margin: 1.5rem auto;
  display: block;
}
.prose ul, .prose ol {
  margin-bottom: 1rem;
  padding-left: 1.5rem;
}
.prose ul { list-style-type: disc; }
.prose ol { list-style-type: decimal; }
.prose li { margin-bottom: 0.25rem; }
.prose a {
  color: #F25F9D;
  text-decoration: underline;
  transition: color 0.2s;
}
.prose a:hover { color: rgba(242, 95, 157, 0.8); }
.prose blockquote {
  border-left: 4px solid rgba(242, 95, 157, 0.3);
  padding-left: 1rem;
  font-style: italic;
  color: rgba(127, 79, 107, 0.7);
  margin: 1.5rem 0;
}
.prose figure { margin: 1.5rem 0; }
.prose figcaption {
  font-size: 0.875rem;
  color: rgba(127, 79, 107, 0.5);
  text-align: center;
  margin-top: 0.5rem;
}
.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
}
.prose th, .prose td {
  border: 1px solid #E7E1E9;
  padding: 0.5rem 0.75rem;
  text-align: left;
}
.prose th {
  background: #E7E1E9;
  font-weight: 600;
}
.prose iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 0.5rem;
  margin: 1.5rem 0;
}

/* WordPress Gutenberg support */
.prose .wp-block-image { margin: 1.5rem 0; }
.prose .wp-block-image img { margin-left: auto; margin-right: auto; }
.prose .wp-block-quote {
  border-left: 4px solid rgba(242, 95, 157, 0.3);
  padding-left: 1rem;
  font-style: italic;
  color: rgba(127, 79, 107, 0.7);
}
.prose .wp-block-separator {
  border: 0;
  border-top: 1px solid #E7E1E9;
  margin: 2rem auto;
  max-width: 6rem;
}
.prose .aligncenter { text-align: center; }
.prose .alignleft { float: left; margin-right: 1rem; }
.prose .alignright { float: right; margin-left: 1rem; }

/* Editor styles accessed via add_editor_style */
.editor-styles-wrapper .wp-block {
  font-family: 'Quicksand', sans-serif;
}

/* Login page branding (wp-login.php) */
body.login {
  background: #FDF5F9;
}
.login h1 a {
  background-image: none !important;
  color: #F25F9D !important;
  text-indent: 0 !important;
  font-family: 'Outfit', sans-serif;
  font-size: 2rem;
  font-weight: 800;
  width: auto !important;
  height: auto !important;
}

/* Animated tag cloud (footer) */
.madeja-tag-cloud-item {
  display: inline-block;
  padding: 0.35rem 0.8rem;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.85);
  font-weight: 600;
  text-decoration: none;
  transform: rotate(var(--r, 0deg));
  transform-origin: center;
  transition: background 0.25s ease, color 0.25s ease, transform 0.35s ease, box-shadow 0.35s ease;
  animation: madeja-tag-float 5s ease-in-out infinite;
  will-change: transform;
  white-space: nowrap;
}
.madeja-tag-cloud-item:hover {
  transform: rotate(0deg) scale(1.12);
  z-index: 2;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  animation-play-state: paused;
}
.madeja-tag-accent-arena  { background: rgba(255, 203, 142, 0.18); color: #FFCB8E; }
.madeja-tag-accent-arena:hover  { background: #FFCB8E; color: #7F4F6B; }
.madeja-tag-accent-rosa   { background: rgba(232, 199, 225, 0.22); color: #F0D2E9; }
.madeja-tag-accent-rosa:hover   { background: #E8C7E1; color: #7F4F6B; }
.madeja-tag-accent-azul   { background: rgba(91, 184, 225, 0.20); color: #A8DBF0; }
.madeja-tag-accent-azul:hover   { background: #5BB8E1; color: #FFFFFF; }
.madeja-tag-accent-fucsia { background: rgba(242, 95, 157, 0.22); color: #F8B6D3; }
.madeja-tag-accent-fucsia:hover { background: #F25F9D; color: #FFFFFF; }

@keyframes madeja-tag-float {
  0%, 100% {
    transform: rotate(var(--r, 0deg)) translateY(0);
  }
  50% {
    transform: rotate(var(--r, 0deg)) translateY(-5px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .madeja-tag-cloud-item {
    animation: none;
  }
}

/* ---------- Copy protection (single posts) ---------- */
body.single-post .madeja-article-content,
body.single-post .prose,
body.single-post article.post {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
#madeja-copy-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(127, 79, 107, 0.4);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: none;
  align-items: center;
  justify-content: center;
}
#madeja-copy-modal.is-open { display: flex; }
#madeja-copy-modal .madeja-copy-modal-card {
  background: #fff;
  border: 1px solid #E8C7E1;
  border-radius: 1rem;
  padding: 2rem;
  max-width: 22rem;
  margin: 1rem;
  text-align: center;
  box-shadow: 0 20px 60px rgba(127, 79, 107, 0.25);
  animation: madejaBounceIn 0.4s ease-out;
}
#madeja-copy-modal .madeja-copy-modal-emoji { font-size: 3rem; margin-bottom: 1rem; }
#madeja-copy-modal .madeja-copy-modal-title {
  font-family: var(--madeja-font-heading);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--madeja-color-uva);
  margin: 0 0 0.5rem 0;
}
#madeja-copy-modal .madeja-copy-modal-body {
  color: rgba(127, 79, 107, 0.7);
  font-size: 0.875rem;
  margin: 0 0 1.25rem 0;
  line-height: 1.5;
}
#madeja-copy-modal .madeja-copy-modal-cta {
  display: block;
  background: var(--madeja-color-fucsia);
  color: #fff;
  font-weight: 700;
  padding: 0.65rem 1.5rem;
  border-radius: 9999px;
  text-decoration: none;
  margin-bottom: 0.5rem;
  transition: opacity 0.2s;
}
#madeja-copy-modal .madeja-copy-modal-cta:hover { opacity: 0.9; }
#madeja-copy-modal .madeja-copy-modal-close {
  background: transparent;
  border: 0;
  color: rgba(127, 79, 107, 0.5);
  font-size: 0.85rem;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  transition: color 0.2s;
}
#madeja-copy-modal .madeja-copy-modal-close:hover { color: var(--madeja-color-uva); }
@keyframes madejaBounceIn {
  0%   { transform: scale(0.8); opacity: 0; }
  50%  { transform: scale(1.05); }
  100% { transform: scale(1); opacity: 1; }
}

/* ---------- Cookie / GDPR consent banner ---------- */
.madeja-cookie-banner {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  z-index: 9998;
  max-width: 28rem;
  margin-left: auto;
  background: #fff;
  border: 1px solid var(--madeja-color-lavanda, #E7E1E9);
  border-radius: 1rem;
  box-shadow: 0 16px 48px rgba(127, 79, 107, 0.2);
  padding: 1rem 1.25rem;
  font-family: var(--madeja-font-body, inherit);
  animation: madejaCookieSlideUp 0.35s ease-out;
}
.madeja-cookie-banner[hidden] { display: none; }
.madeja-cookie-banner-body {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.madeja-cookie-banner-emoji { font-size: 1.5rem; line-height: 1; }
.madeja-cookie-banner-text {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--madeja-color-uva, #7F4F6B);
}
.madeja-cookie-banner-link {
  color: var(--madeja-color-fucsia, #F25F9D);
  text-decoration: underline;
  white-space: nowrap;
}
.madeja-cookie-banner-link:hover { opacity: 0.85; }
.madeja-cookie-banner-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}
.madeja-cookie-banner-actions button {
  font-family: inherit;
  font-weight: 600;
  font-size: 0.875rem;
  padding: 0.55rem 1.1rem;
  border-radius: 9999px;
  cursor: pointer;
  border: 0;
  transition: opacity 0.2s, background 0.2s;
}
.madeja-cookie-reject {
  background: transparent;
  color: rgba(127, 79, 107, 0.7);
  border: 1px solid var(--madeja-color-lavanda, #E7E1E9) !important;
}
.madeja-cookie-reject:hover { background: var(--madeja-color-lavanda, #E7E1E9); }
.madeja-cookie-accept {
  background: var(--madeja-color-fucsia, #F25F9D);
  color: #fff;
}
.madeja-cookie-accept:hover { opacity: 0.9; }
@keyframes madejaCookieSlideUp {
  0%   { transform: translateY(20px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}
@media (max-width: 640px) {
  .madeja-cookie-banner { left: 0.5rem; right: 0.5rem; bottom: 0.5rem; max-width: none; }
}

/* ---------- WooCommerce compatibility ----------
   We dequeued WC's own stylesheets (they break Tailwind images).
   These minimal rules restore the essential WC UI inside the Madeja design. */

.woocommerce form .form-row {
  margin-bottom: 1rem;
}
.woocommerce form .form-row label {
  display: block;
  font-size: 0.875rem;
  color: var(--madeja-color-uva);
  margin-bottom: 0.375rem;
  font-weight: 500;
}
.woocommerce form .form-row input[type="text"],
.woocommerce form .form-row input[type="email"],
.woocommerce form .form-row input[type="password"],
.woocommerce form .form-row input[type="tel"],
.woocommerce form .form-row input[type="number"],
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
  display: block;
  width: 100%;
  padding: 0.625rem 1rem;
  border: 1px solid var(--madeja-color-lavanda);
  border-radius: 0.75rem;
  background: #fff;
  color: var(--madeja-color-uva);
  font-family: var(--madeja-font-body);
  font-size: 0.95rem;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.woocommerce form .form-row input:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
  border-color: var(--madeja-color-fucsia);
  box-shadow: 0 0 0 3px rgba(242, 95, 157, 0.15);
}

/* WC buttons */
.woocommerce button.button,
.woocommerce a.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: var(--madeja-color-fucsia);
  color: #fff !important;
  font-weight: 600;
  font-family: var(--madeja-font-body);
  padding: 0.75rem 1.75rem;
  border: 0;
  border-radius: 9999px;
  cursor: pointer;
  text-decoration: none;
  font-size: 0.95rem;
  transition: opacity 0.2s, transform 0.1s;
  box-shadow: 0 4px 14px rgba(242, 95, 157, 0.25);
}
.woocommerce button.button:hover,
.woocommerce a.button:hover,
.woocommerce input.button:hover,
.woocommerce .button:hover {
  opacity: 0.9;
}
.woocommerce button.button:active,
.woocommerce .button:active {
  transform: scale(0.98);
}
.woocommerce button.button.alt,
.woocommerce a.button.alt,
.woocommerce input.button.alt,
.woocommerce .button.alt {
  background: var(--madeja-color-fucsia);
  color: #fff !important;
}

/* Add to cart button specifically */
.woocommerce div.product form.cart {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}
.woocommerce div.product form.cart .button {
  padding: 0.95rem 2rem;
  font-size: 1rem;
  flex: 1;
  min-width: 200px;
}
.woocommerce div.product form.cart .quantity {
  display: inline-flex;
}
.woocommerce div.product form.cart .quantity input.qty {
  width: 4rem;
  padding: 0.75rem 0.5rem;
  border: 1px solid var(--madeja-color-lavanda);
  border-radius: 0.75rem;
  text-align: center;
  font-family: var(--madeja-font-body);
  color: var(--madeja-color-uva);
}

/* WC notices (success, info, error) */
.woocommerce-notices-wrapper,
.woocommerce-error,
.woocommerce-info,
.woocommerce-message {
  list-style: none;
  padding: 1rem 1.25rem;
  margin: 1rem 0;
  border-radius: 1rem;
  border: 1px solid var(--madeja-color-lavanda);
  background: #fff;
  color: var(--madeja-color-uva);
  font-size: 0.9rem;
}
.woocommerce-error {
  background: #FEF2F7;
  border-color: #F25F9D;
  color: #9e2960;
}
.woocommerce-message {
  background: #F0FDF4;
  border-color: #86efac;
  color: #166534;
}
.woocommerce-info {
  background: #F0F9FF;
  border-color: #7dd3fc;
  color: #075985;
}
.woocommerce-message a.button,
.woocommerce-error a.button,
.woocommerce-info a.button {
  float: right;
  padding: 0.35rem 1rem;
  font-size: 0.85rem;
}

/* Cart + checkout tables */
.woocommerce table.shop_table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border-radius: 1rem;
  overflow: hidden;
  margin: 1rem 0 2rem;
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
  padding: 0.85rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--madeja-color-lavanda);
  color: var(--madeja-color-uva);
}
.woocommerce table.shop_table th {
  background: rgba(232, 199, 225, 0.2);
  font-weight: 600;
  font-family: var(--madeja-font-heading);
}
.woocommerce table.shop_table td.product-remove a.remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 9999px;
  background: var(--madeja-color-lavanda);
  color: var(--madeja-color-uva);
  font-size: 0.9rem;
  text-decoration: none;
}

/* Price */
.woocommerce .price,
.woocommerce-Price-amount {
  font-weight: 700;
  color: var(--madeja-color-fucsia);
}
.woocommerce del .woocommerce-Price-amount {
  color: var(--madeja-color-uva);
  opacity: 0.5;
}

/* Product image in single product (prevents WC's height:auto from shrinking) */
.woocommerce div.product div.images img {
  width: 100%;
  height: auto;
  border-radius: 1rem;
}

/* Remove default bullet styling on WC lists */
.woocommerce ul.products {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Ensure images inside .madeja-img-wrap fill the container regardless of context */
.madeja-img-wrap > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Animated tag cloud (footer column 4) ---------- */
.madeja-tag-cloud {
  perspective: 600px;
}
.madeja-tag-cloud-item {
  display: inline-block;
  padding: 0.35rem 0.85rem;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.85);
  font-weight: 500;
  line-height: 1.1;
  text-decoration: none;
  transform: rotate(var(--r, 0deg));
  animation: madeja-tag-float 5s ease-in-out infinite;
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: transform;
}
.madeja-tag-cloud-item:hover {
  transform: rotate(0deg) scale(1.12);
  background: #FFCB8E; /* arena default */
  color: #7F4F6B;
  z-index: 2;
}
.madeja-tag-accent-arena:hover  { background: #FFCB8E; color: #7F4F6B; }
.madeja-tag-accent-rosa:hover   { background: #E8C7E1; color: #7F4F6B; }
.madeja-tag-accent-azul:hover   { background: #5BB8E1; color: #fff; }
.madeja-tag-accent-fucsia:hover { background: #F25F9D; color: #fff; }

@keyframes madeja-tag-float {
  0%, 100% {
    transform: translateY(0) rotate(var(--r, 0deg));
  }
  50% {
    transform: translateY(-5px) rotate(var(--r, 0deg));
  }
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .madeja-tag-cloud-item {
    animation: none;
  }
}

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