/* =============================================================================
   PUPPY KING 305 — FOOTER PROPIO

   Sustituye al del demo, que arrastraba olas amarillas, garabatos, lorem
   ipsum, direccion de New York, servicios inexistentes, iconos de pago y
   creditos del theme.

   Se renderiza desde las plantillas de template-parts/footer/ del child theme, asi que el
   del demo no llega a dibujarse: no hay nada que ocultar ni que tapar.
   ========================================================================== */

/* OJO con el fondo: el footer NO lo lleva.

   El color va en .pk-footer__main y .pk-footer__bottom, y la curva queda
   ENTRE lo de arriba y esos bloques, en flujo normal. Si el fondo estuviera
   aqui, taparia la zona transparente del arco y la curva no se veria.

   Antes la curva iba con position:absolute + bottom:100%, es decir montada
   sobre los 80px de lo que hubiera encima. En la portada eso es la barra de
   confianza: el relleno crema le comia la parte de abajo y por las esquinas,
   donde el arco baja, asomaba el negro. De ahi la franja embarrada. */
.pk-footer {
  position: relative;
  color: var(--pk-body-ink);
}

/* -----------------------------------------------------------------------------
   CURVA DEL BORDE SUPERIOR

   Un arco amplio y bajo que hace eco del arco del hero, con la linea dorada
   siguiendo la curva.

   VA EN FLUJO NORMAL, no superpuesta. El orden real queda:

     [contenido] -> [trust bar negra, completa y recta] -> [curva] -> [footer]

   La zona del SVG por encima del arco es transparente y deja ver el fondo de
   la pagina; la de debajo lleva el color del footer. La transicion se lee como
   una curva sin tapar absolutamente nada.

   margin-bottom -1px cierra la costura con el bloque de abajo, que si no
   asoma una raya por redondeo de subpixeles.
-------------------------------------------------------------------------------- */
.pk-footer__curve {
  display: block;
  position: relative;
  width: 100%;
  height: 80px;
  margin-bottom: -1px;
  overflow: visible;   /* que no se corte el grosor del trazo en los extremos */
  pointer-events: none;
}

/* El relleno sigue el color del footer, asi que respeta el switch light/dark */
.pk-footer__curve-fill {
  fill: var(--pk-cream-warm);
}

/* Paradas del degradado como CSS, no como atributos: asi salen de los tokens
   y no hay ni un color escrito a mano. Espejo del header: oscuro -> claro. */
.pk-footer__curve-stop-1 {
  stop-color: var(--pk-gold-ink);
}

.pk-footer__curve-stop-2 {
  stop-color: var(--pk-gold);
}

.pk-footer__curve-stop-3 {
  stop-color: var(--pk-gold-pale);
}

.pk-footer__container {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 24px;
}


/* -----------------------------------------------------------------------------
   LAS 4 COLUMNAS
   La primera es mas ancha: lleva logo, texto y redes.
-------------------------------------------------------------------------------- */
/* El color del footer vive AQUI, no en .pk-footer: asi la curva puede quedar
   por encima de estos bloques con su zona superior transparente. */
.pk-footer__main,
.pk-footer__bottom {
  background-color: var(--pk-cream-warm);
}

.pk-footer__main .pk-footer__container {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1.3fr 1.2fr;
  gap: 40px;
  padding-top: 56px;
  padding-bottom: 48px;
}

.pk-footer__col {
  min-width: 0;   /* deja que el texto largo se ajuste en vez de desbordar */
}

/* --- Titulos de columna --- */
.pk-footer__title {
  margin: 0 0 18px;
  color: var(--pk-gold-ink);
  font-family: var(--pk-font-display);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: var(--pk-tracking-label);
}


/* -----------------------------------------------------------------------------
   1. MARCA
-------------------------------------------------------------------------------- */
.pk-footer__logo {
  margin-bottom: 18px;
}

.pk-footer__logo a {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.pk-footer__logo-img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 60px;
  object-fit: contain;
}

.pk-footer__about {
  max-width: 330px;
  margin: 0 0 20px;
  color: var(--pk-body-ink);
  font-family: var(--pk-font-body);
  font-size: 14px;
  line-height: 1.75;
}

/* --- Redes sociales, en dorado --- */
.pk-footer__socials {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pk-footer__social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(var(--pk-gold-rgb), 0.5);
  border-radius: 50%;
  background-color: rgba(var(--pk-gold-rgb), 0.08);
  color: var(--pk-gold-ink);
  font-size: 15px;
  line-height: 1;
  text-decoration: none;
  transition: all var(--pk-transition);
}

.pk-footer__social:hover,
.pk-footer__social:focus {
  background-color: var(--pk-gold-ink);
  border-color: var(--pk-gold-ink);
  color: var(--pk-white);
  transform: translateY(-2px);
}


/* -----------------------------------------------------------------------------
   2. QUICK LINKS  /  3. VISIT US  /  4. STORE HOURS
-------------------------------------------------------------------------------- */
.pk-footer__menu,
.pk-footer__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.pk-footer__menu li,
.pk-footer__list li {
  margin-bottom: 11px;
  font-family: var(--pk-font-body);
  font-size: 14px;
  line-height: 1.6;
}

.pk-footer__menu li:last-child,
.pk-footer__list li:last-child {
  margin-bottom: 0;
}

.pk-footer__menu a,
.pk-footer__list a {
  color: var(--pk-body-ink);
  text-decoration: none;
  transition: color var(--pk-transition);
}

.pk-footer__menu a:hover,
.pk-footer__menu a:focus,
.pk-footer__list a:hover,
.pk-footer__list a:focus {
  color: var(--pk-gold-ink);
}

/* Flechita que asoma al pasar por Quick Links */
.pk-footer__menu a {
  position: relative;
  display: inline-block;
  padding-left: 0;
}

.pk-footer__menu a::before {
  content: "\203A";
  position: absolute;
  left: -12px;
  opacity: 0;
  transition: all var(--pk-transition);
}

.pk-footer__menu a:hover::before,
.pk-footer__menu a:focus::before {
  left: -14px;
  opacity: 1;
}

/* --- Visit Us: icono + texto alineados arriba --- */
.pk-footer__list a,
.pk-footer__list > li > span {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.pk-footer__icon {
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--pk-gold-ink);
  font-size: 14px;
  line-height: 1.5;
}

/* --- Store Hours --- */
.pk-footer__list--hours li {
  color: var(--pk-body-ink);
}

.pk-footer__wa {
  margin-top: 18px;
  min-height: 40px;
  padding: 0 18px;
  font-size: 13px;
}


/* -----------------------------------------------------------------------------
   BARRA FINAL
   Sin iconos de pago (no se vende online) y sin creditos del theme.
-------------------------------------------------------------------------------- */
.pk-footer__bottom {
  border-top: 1px solid rgba(var(--pk-black-rgb), 0.10);
}

.pk-footer__bottom .pk-footer__container {
  padding-top: 20px;
  padding-bottom: 20px;
}

.pk-footer__copy {
  margin: 0;
  color: var(--pk-gray-dark);
  font-family: var(--pk-font-body);
  font-size: 13px;
  line-height: 1.6;
  text-align: center;
}


/* -----------------------------------------------------------------------------
   VARIANTE OSCURA — sigue PK_FOOTER_STYLE
-------------------------------------------------------------------------------- */
body.pk-footer-dark .pk-footer {
  color: var(--pk-text-on-dark);
}

body.pk-footer-dark .pk-footer__main,
body.pk-footer-dark .pk-footer__bottom {
  background-color: var(--pk-black);
}

body.pk-footer-dark .pk-footer__curve-fill {
  fill: var(--pk-black);
}

body.pk-footer-dark .pk-footer__title {
  color: var(--pk-gold);
}

body.pk-footer-dark .pk-footer__about,
body.pk-footer-dark .pk-footer__list--hours li,
body.pk-footer-dark .pk-footer__menu a,
body.pk-footer-dark .pk-footer__list a {
  color: var(--pk-text-on-dark);
}

body.pk-footer-dark .pk-footer__menu a:hover,
body.pk-footer-dark .pk-footer__list a:hover {
  color: var(--pk-gold);
}

body.pk-footer-dark .pk-footer__icon,
body.pk-footer-dark .pk-footer__social {
  color: var(--pk-gold);
}

body.pk-footer-dark .pk-footer__social:hover {
  background-color: var(--pk-gold);
  border-color: var(--pk-gold);
  color: var(--pk-black);
}

body.pk-footer-dark .pk-footer__bottom {
  border-top-color: rgba(var(--pk-white-rgb), 0.12);
}

body.pk-footer-dark .pk-footer__copy {
  color: var(--pk-gray);
}


/* -----------------------------------------------------------------------------
   RESPONSIVE
-------------------------------------------------------------------------------- */

/* Tablet: 2 x 2. La curva se aplana bajando su alto: el viewBox se estira
   con preserveAspectRatio="none", asi que menos alto = arco mas plano.
   El trazo dorado sigue en 3px gracias a non-scaling-stroke. */
@media screen and (max-width: 991px) {
  .pk-footer__curve {
    height: 54px;
  }

  .pk-footer__main .pk-footer__container {
    grid-template-columns: 1fr 1fr;
    gap: 36px 32px;
    padding-top: 44px;
    padding-bottom: 36px;
  }

  /* La marca ocupa el ancho completo arriba */
  .pk-footer__col--brand {
    grid-column: 1 / -1;
  }

  .pk-footer__about {
    max-width: 100%;
  }
}

/* Movil: una sola columna y la curva casi plana */
@media screen and (max-width: 575px) {
  .pk-footer__curve {
    height: 34px;
  }

  .pk-footer__container {
    padding-left: 18px;
    padding-right: 18px;
  }

  .pk-footer__main .pk-footer__container {
    grid-template-columns: 1fr;
    gap: 30px;
    padding-top: 36px;
    padding-bottom: 30px;
  }

  .pk-footer__title {
    margin-bottom: 14px;
  }

  .pk-footer__wa {
    width: 100%;
  }

  .pk-footer__copy {
    font-size: 12px;
  }
}