/* ===========================
   KaleCo Comics Styles v1.7
   Cleaned up selectors only
   =========================== */

/* Tokens */
:root {
  --kca-blue: #205f82;
  --kca-gold: #FCB900;
  --kca-text: #000000;
  --kca-on-blue: #ffffff;
  --kca-muted: #666666;
  --kca-radius-pill: 50px;
  --kca-shadow-1: 0 2px 5px rgba(0,0,0,0.15);
  --kca-shadow-2: 0 4px 8px rgba(0,0,0,0.20);
}

/* Comic image */
.kaleco-comic-wrap { margin: 0 auto; }
.kaleco-comic-image-main .kaleco-comic-main {
  max-width: 800px; width: 100%; height: auto; display: block; margin: 0 auto;
}

/* Header */
.kaleco-comic-header { text-align: center; margin-bottom: .75rem; }
.kaleco-comic-title {
  margin: 0;
  color: var(--kca-on-blue);
  font-size: clamp(1.6rem, 4vw, 2.2rem); /* smaller, responsive */
  line-height: 1.1;
}
.kaleco-comic-date {
  display: block;
  margin-top: .25rem;
  font-size: clamp(.9rem, 2.2vw, 1rem);
  color: var(--kca-on-blue); /* visible on blue bg */
}

/* Shared button styles (applies to bonus + latest) */
.kaleco-bonus-toggle.button,
.kaleco-bonus-toggle.wp-block-button__link,
.kaleco-btn-wrap a.kaleco-btn {
  display: inline-block;
  padding: 14px 28px;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--kca-text);
  background: var(--kca-gold);
  border: none;
  border-radius: var(--kca-radius-pill);
  box-shadow: var(--kca-shadow-1);
  text-decoration: none !important;
  cursor: pointer;
  transition: transform .2s ease-in-out, box-shadow .2s ease-in-out;
}
.kaleco-bonus-toggle.button:hover,
.kaleco-bonus-toggle.wp-block-button__link:hover,
.kaleco-btn-wrap a.kaleco-btn:hover,
.kaleco-btn-wrap a.kaleco-btn:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--kca-shadow-2);
  outline: none;
  text-decoration: none;
}
.kaleco-bonus-toggle.button:active,
.kaleco-bonus-toggle.wp-block-button__link:active,
.kaleco-btn-wrap a.kaleco-btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}

/* Bonus content */
.kaleco-bonus-wrap { text-align: center; margin: 1.5rem 0; }
.kaleco-bonus-content { display: none; margin-top: 1.5rem; }
.kaleco-comic-bonus-img {
  max-width: 400px; width: 100%; height: auto; display: block; margin: 0 auto;
}

/* Latest button wrapper */
.kaleco-btn-wrap { text-align: center; margin: 1.5rem 0; }

/* Nav */
.kaleco-comic-nav {
  display: flex; justify-content: center; align-items: center;
  margin: 2.5rem auto; padding: 0;
}
.kaleco-comic-nav .kcn {
  background: none; border: none; padding: 0; line-height: 0; cursor: pointer;
  margin: 0 15px; transition: transform .2s ease-in-out;
}
.kcn-arrow { height: 64px; width: auto; fill: var(--kca-gold); transition: fill .2s ease-in-out; }
.kaleco-comic-nav .kcn:hover { transform: scale(1.1); }
.kaleco-comic-nav .kcn:hover .kcn-arrow { fill: var(--kca-text); }
.kaleco-comic-nav .kcn.disabled { cursor: not-allowed; transform: none; }
.kaleco-comic-nav .kcn.disabled .kcn-arrow { fill: #ccc; }

/* Motion safe */
@media (prefers-reduced-motion: reduce) {
  .kaleco-bonus-toggle.button,
  .kaleco-bonus-toggle.wp-block-button__link,
  .kaleco-btn-wrap a.kaleco-btn,
  .kaleco-comic-nav .kcn,
  .kcn-arrow { transition: none; }
}

/* KaleCo Comic Preview Card */
.kaleco-comic-preview-card {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 10px;              /* 10px rounded edges */
    border: 1px solid #FCB900;        /* KaleCo Yellow border */
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Image */
.kaleco-comic-preview-card .kcp-media {
    display: block;
    line-height: 0;
}
.kaleco-comic-preview-card .kcp-img {
    display: block;
    width: 100%;
    height: auto; /* when using baked crop */
}

/* CSS fallback crop (if we couldn't bake the top-half) */
.kaleco-comic-preview-card .kcp-img.kcp-css-crop {
    width: 100%;
    height: 0;
    padding-bottom: 50%;           /* show approx “top half” area */
    object-fit: cover;
    object-position: top center;
    /* Make the <img> behave like a block with fixed aspect via trick: wrap in a positioned box */
    position: absolute;
    inset: 0;
}

/* Overlay */
.kaleco-comic-preview-card .kcp-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: end;
    justify-content: center;
    background: linear-gradient(to top, rgba(0,0,0,0.45), rgba(0,0,0,0.05) 60%, transparent);
    opacity: 1;
    transition: opacity .18s ease-in-out;
    padding: 10px;
}
.kaleco-comic-preview-card .kcp-overlay-text {
    background: #FCB900;   /* KaleCo Yellow */
    color: #000;           /* Black text */
    font-weight: 700;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 0.95rem;
    transition: all 0.2s ease-in-out; /* smooth animation */
}

.kaleco-comic-preview-card:hover .kcp-overlay {
    background: linear-gradient(to top, rgba(0,0,0,0.55), rgba(0,0,0,0.08) 60%, transparent);
}

/* When the card is hovered, expand the button */
.kaleco-comic-preview-card:hover .kcp-overlay-text {
    transform: scale(1.08);   /* slightly larger */
}
/* Lift entire card on hover */
.kaleco-comic-preview-card:hover {
    transform: translateY(-4px);      /* lift up a few px */
    box-shadow: 0 6px 14px rgba(0,0,0,0.25);
}