/* ==================================================================
   Footer -- same language as the rest of the theme
   The footer is built from widgets (Appearance > Widgets): a Contact
   Form 7 subscribe form, block headings, a page list / menu, contact
   lines, social icons. This only restyles them; the widgets stay yours.
   ================================================================== */

/* Colours come from Customizer > Global Theme Settings > Footer Colors
   (printed as --ft-* on .site-footer); the values after the commas are the
   defaults. Empty accent / hover / card colours follow the theme colour. */
.pahla-store-footer-widgets {
  --ft-primary: var(--ft-accent, var(--primary, #0F766E));
  --ft-ink: var(--ft-link, #1b2735);
  --ft-muted: var(--ft-text, #5b6777);
  --ft-line: #e3ebf4;
  background: var(--ft-bg, #fff);
  color: var(--ft-muted);
}

.pahla-store-footer-widgets .pahla-store-widget-container {
  padding-top: clamp(28px, 4vw, 48px);
  padding-bottom: clamp(20px, 3vw, 36px);
}

/* ---------- Headings (block headings and classic widget titles) ---------- */

.pahla-store-footer-widgets .wp-block-heading,
.pahla-store-footer-widgets .widget-title {
  position: relative;
  margin: 0 0 22px;
  padding-bottom: 12px;
  font-family: var(--oswald, "Oswald", sans-serif);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--ft-heading, #1b2735);
  border: 0;
}

.pahla-store-footer-widgets .wp-block-heading::after,
.pahla-store-footer-widgets .widget-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 36px;
  height: 3px;
  border-radius: 3px;
  background: var(--ft-primary);
}

/* ---------- Subscribe card (first column) ---------- */

.pahla-store-widget-container .subsriber-container {
  /* Lifted over the footer's top edge, as before: cancels the container's
     top padding, then rises 40px more. */
  margin-top: calc(clamp(28px, 4vw, 48px) * -1 - var(--ft-lift, 40px));
  padding: 24px 22px;
  border: 1px solid var(--ft-card-border, color-mix(in srgb, var(--ft-primary) 22%, #fff 78%));
  border-radius: 20px;
  background: var(--ft-card-bg, color-mix(in srgb, var(--ft-primary) 6%, #fff 94%));
  color: var(--ft-card-text, #1b2735);
}

.pahla-store-widget-container .subsriber-container .wp-block-heading {
  margin-bottom: 14px;
  font-size: 1.5rem;
  color: var(--ft-card-text, var(--ft-heading, #1b2735));
}

/* Softened with color-mix, not opacity: opacity would also fade the form
   fields and button that sit inside these paragraphs. */
.pahla-store-widget-container .subsriber-container p {
  color: color-mix(in srgb, var(--ft-card-text, #1b2735) 82%, transparent);
}

.pahla-store-widget-container .subsriber-container .wp-block-heading::after {
  background: var(--ft-btn-bg, var(--ft-primary));
}

.pahla-store-widget-container .subsriber-container .wpcf7 label {
  display: block;
  width: 100%;
  font-size: 13px;
  font-weight: 700;
  color: var(--ft-card-text, #1b2735);
}

.pahla-store-footer-widgets .wpcf7 input[type="text"],
.pahla-store-footer-widgets .wpcf7 input[type="email"] {
  height: 46px;
  margin: 6px 0 4px;
  padding: 0 14px;
  border: 1px solid #cfd6df;
  border-radius: 12px;
  background: #fff;
  font-size: 15px;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.pahla-store-footer-widgets .wpcf7 input[type="text"]:focus,
.pahla-store-footer-widgets .wpcf7 input[type="email"]:focus {
  outline: none;
  border-color: var(--ft-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ft-primary) 16%, transparent);
}

.pahla-store-footer-widgets .wpcf7 input[type="submit"] {
  width: 100%;
  height: 46px;
  margin-top: 6px;
  border: 0;
  border-radius: 999px;
  background: var(--ft-btn-bg, var(--ft-primary));
  color: var(--ft-btn-text, #fff);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .6px;
  text-transform: uppercase;
  cursor: pointer;
  transition: filter .2s ease;
}

.pahla-store-footer-widgets .wpcf7 input[type="submit"]:hover {
  filter: brightness(1.08);
}

.pahla-store-footer-widgets .wpcf7-response-output {
  margin: 10px 0 0 !important;
  border-radius: 10px;
  font-size: 13px;
}

/* ---------- Link lists (page list, menus, classic lists) ---------- */

.pahla-store-footer-widgets ul:not(.wp-block-social-links) {
  margin: 0;
  padding: 0;
  list-style: none;
}

.pahla-store-footer-widgets ul:not(.wp-block-social-links) li {
  margin: 0;
  padding: 0;
}

.pahla-store-footer-widgets ul:not(.wp-block-social-links) a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  color: var(--ft-ink);
  font-size: 14.5px;
  text-decoration: none;
  transition: color .2s ease, transform .2s ease;
}

.pahla-store-footer-widgets ul:not(.wp-block-social-links) a::before {
  content: "\f105"; /* Font Awesome angle-right */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 11px;
  color: var(--ft-primary);
}

.pahla-store-footer-widgets ul:not(.wp-block-social-links) a:hover,
.pahla-store-footer-widgets ul:not(.wp-block-social-links) a:focus {
  color: var(--ft-link-hover, var(--primary, #0F766E));
  transform: translateX(3px);
}

.pahla-store-footer-widgets ul:not(.wp-block-social-links) .current-menu-item > a {
  color: var(--ft-link-hover, var(--primary, #0F766E));
  font-weight: 700;
}

/* ---------- Contact lines ---------- */

.pahla-store-footer-widgets p.d-flex {
  gap: 12px;
  margin-bottom: 14px;
  color: var(--ft-ink);
  font-size: 14.5px;
}

.pahla-store-footer-widgets p.d-flex > span:first-child {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--ft-primary) 14%, var(--ft-bg, #fff));
  color: var(--ft-primary);
  font-size: 14px;
}

.pahla-store-footer-widgets p.d-flex > span + span {
  margin-left: 0 !important;
}

.pahla-store-footer-widgets p.d-flex a {
  color: var(--ft-ink);
  text-decoration: none;
}

.pahla-store-footer-widgets p.d-flex a:hover {
  color: var(--ft-link-hover, var(--primary, #0F766E));
}

/* ---------- Social icons ---------- */

.pahla-store-footer-widgets .wp-block-social-links {
  gap: 10px;
  margin-top: 18px;
  padding: 0;
}

.pahla-store-footer-widgets .wp-block-social-links .wp-social-link {
  margin: 0;
}

.pahla-store-footer-widgets .wp-block-social-links .wp-social-link a {
  width: 40px;
  height: 40px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.pahla-store-footer-widgets .wp-block-social-links svg {
  width: 20px;
  height: 20px;
}

/* ---------- Bottom bar ---------- */

.site-footer .copyright {
  background: var(--ft-copy-bg, #111827);
  color: var(--ft-copy-text, #cbd5e1);
}

.site-footer .copyright p,
.site-footer .copyright a {
  color: inherit;
}

.site-footer .copyright p {
  margin: 0;
  padding: 16px 0;
  font-size: 13px;
  letter-spacing: .3px;
}

@media (max-width: 767.98px) {
  .pahla-store-widget-container .subsriber-container {
    margin-top: calc(clamp(28px, 4vw, 48px) * -1 - var(--ft-lift, 40px) * .6);
    padding: 20px 16px;
  }

  .pahla-store-footer-widgets .wp-block-heading,
  .pahla-store-footer-widgets .widget-title {
    font-size: 1.2rem;
    margin-bottom: 16px;
  }

  /* 16px stops iOS zooming into the field. */
  .pahla-store-footer-widgets .wpcf7 input[type="text"],
  .pahla-store-footer-widgets .wpcf7 input[type="email"] {
    font-size: 16px;
  }
}

/* Desktop: while the floating pill is showing on the homepage or a product
   page it already has WhatsApp and back-to-top, so the floating buttons step
   aside. (The Shop / category pill has no WhatsApp, so they stay there.) */
@media (min-width: 768px) {
  body.home.titlebar-on .pahla-floating-tools,
  body.page-template-template-homev2-php.titlebar-on .pahla-floating-tools,
  body.single-product.titlebar-on .pahla-floating-tools {
    display: none;
  }
}

/* Space between the page content and the footer on every page except the
   homepage (whose last section already sits clear of it). The subscribe
   card rises 40px over the footer's edge, so the gap allows for that. */
body:not(.home):not(.page-template-template-homev2-php) #page > .container-fluid,
body:not(.home):not(.page-template-template-homev2-php) #page > .site--container {
  padding-bottom: 80px;
}

@media (max-width: 767.98px) {
  body:not(.home):not(.page-template-template-homev2-php) #page > .container-fluid,
  body:not(.home):not(.page-template-template-homev2-php) #page > .site--container {
    padding-bottom: 56px;
  }
}