/* =============================================================
   Site Toolkit — Footer module styles v1.0.3
   Loaded by class-footer.php → wp_enqueue_style('loco-tk-footer')
   Depends on: loco-tk-shared (tokens)
   Front-facing shortcode: [loco_footer]
   Breakpoints:
     Desktop ≥1025 → 4-column grid
     Tablet  768-1024 → 2-column grid (50/50), no accordion
     Mobile  ≤767 → 1-column stack + accordion for service lists
   ============================================================= */

/* ============================================================
   LOCO Footer — reference styles for plugin module
   Tokens per CONTEXT.md + Figma variants.

   Grid on desktop (4 columns):
     brand  |  services-people  |  services-business  |  (company + info stacked)

   Breakpoints:
     Desktop  ≥1025           → 4-column grid
     Tablet   768–1024        → 2-column grid, no accordion
     Mobile   ≤767            → 1-column stack + accordion for service lists
   ============================================================ */

:root{
  --loco-primary:     #1F65E9;   /* Blue/600 */
  --loco-secondary:   #1E56C3;   /* Blue/700 */
  --loco-text:        #415170;   /* Neutral/600 — body & col titles */
  --loco-accent:      #1E1E1E;   /* Neutral/900 */
  --loco-bg-white:    #FFFFFF;
  --loco-bg-alt:      #F5F9FE;
  --loco-bg-card:     #EAF3FF;
  --loco-border:      #DCE7F8;
  --loco-blue-soft:   #AFC5EB;   /* Blue/300 — link colour per Figma */
  --loco-blue-muted:  #6683B6;   /* Blue/400 — used for links here (readable) */

  --loco-t: .2s cubic-bezier(.4,0,.2,1);
}

/* ============ ROOT ============ */
.loco-footer{
  /* Radial glow per Figma: light center, blue edges */
  background: radial-gradient(ellipse 80% 60% at 50% 60%, #FEFDFF 0%, #E8F2FD 70%) !important;
  border-radius: 30px 30px 0 0;
  overflow: hidden;
  color:var(--loco-text) !important;
  padding:45px 0 16px;                  /* per Figma: top 45, bottom 16 to copyright */
  font-size:16px !important;
  line-height:1.5 !important;
}
.loco-footer__inner{
  max-width:1600px;
  margin:0 auto;
  padding:0 80px;
}

/* ============ DESKTOP GRID (default, 4 cols) ============ */
.loco-footer__grid{
  display:grid;
  grid-template-columns:
    minmax(300px, 1.5fr)    /* brand */
    1fr                     /* services people */
    1fr                     /* services business */
    minmax(220px, 0.9fr);   /* company + info stacked */
  gap:40px;
  align-items:start;
}

/* ============ BRAND COLUMN ============ */
.loco-footer__brand{
  display:flex;
  flex-direction:column;
  gap:24px;
  min-width:0;
}
.loco-footer .loco-footer__logo,
.loco-footer .loco-footer__logo:link,
.loco-footer .loco-footer__logo:visited,
.loco-footer .loco-footer__logo:hover{
  display:inline-flex;
  align-items:center;
  text-decoration:none !important;
  background:transparent !important;
  padding:0 !important;
  border:0 !important;
  box-shadow:none !important;
}
.loco-footer__logo-img{
  display:block;
  height:40px;                          /* Figma: 172×40 */
  width:auto;
}
.loco-footer__desc{
  margin:0;
  color:var(--loco-text);               /* Neutral/600 */
  font-size:16px !important;
  line-height:1.55 !important;
  max-width:512px;                      /* Figma resizing W 512 */
}

/* on desktop, contacts + socials live inside brand column */
.loco-footer__contact-block{
  display:flex;
  flex-direction:column;
  gap:20px;
}

/* ============ CONTACTS ============ */
.loco-footer__contacts{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin:0;
  padding:0;
  list-style:none;
}
.loco-footer__contact{
  display:flex;
  align-items:center;
  gap:14px;
}
/* NEW: Figma uses outlined blue icons WITHOUT circle background */
.loco-footer__contact-icon{
  flex:0 0 24px;
  width:24px;
  height:24px;
  color:var(--loco-primary);            /* Blue/600 stroke */
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.loco-footer__contact-icon svg{
  width:24px;
  height:24px;
  display:block;
}
.loco-footer .loco-footer__contact a,
.loco-footer .loco-footer__contact a:link,
.loco-footer .loco-footer__contact a:visited,
.loco-footer .loco-footer__contact span.loco-footer__contact-text{
  color:var(--loco-secondary) !important;   /* Blue/700 */
  text-decoration:none !important;
  font-size:16px !important;
  background:transparent !important;
  padding:0 !important;
  transition:color var(--loco-t);
}
.loco-footer .loco-footer__contact a:hover,
.loco-footer .loco-footer__contact a:focus{
  color:var(--loco-primary) !important;
  text-decoration:none !important;
}

/* ============ SOCIALS ============ */
.loco-footer__socials{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin:0;
  padding:0;
  list-style:none;
}
.loco-footer .loco-footer__social,
.loco-footer .loco-footer__social:link,
.loco-footer .loco-footer__social:visited{
  width:40px;
  height:40px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#fff !important;
  text-decoration:none !important;
  padding:0 !important;
  transition:transform var(--loco-t), box-shadow var(--loco-t);
}
.loco-footer__social:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 18px rgba(31,101,233,.18);
}
.loco-footer__social svg{ width:18px; height:18px; display:block; }

.loco-footer__social--facebook{ background:#1877F2; }
.loco-footer__social--instagram{
  background:
    radial-gradient(circle at 30% 110%, #FFD776 0%, #F26A3A 30%, #E1306C 55%, #C13584 75%, #833AB4 100%);
}
.loco-footer__social--viber{ background:#7360F2; }
.loco-footer__social--telegram{ background:#2AABEE; }
.loco-footer__social--whatsapp{ background:#25D366; }

/* ============ LINK COLUMNS ============ */
.loco-footer__col{
  display:flex;
  flex-direction:column;
  gap:14px;
  min-width:0;
}
.loco-footer .loco-footer__col-title{
  margin:0 0 6px !important;
  padding:0 !important;
  font-family: inherit !important;
  font-size:16px !important;            /* Figma label 16 */
  font-weight:700 !important;           /* label bold */
  color:var(--loco-text) !important;    /* Neutral/600 */
  letter-spacing:.04em !important;
  text-transform:uppercase !important;
  text-decoration: none !important;
  line-height:1.25 !important;
}

/* mobile accordion toggle — hidden on desktop/tablet.
   !important + explicit resets to override theme button/Elementor .button styles
   that otherwise turn this <button> into a blue pill on desktop. */
.loco-footer .loco-footer__col-toggle{
  display:none !important;
  background:transparent !important;
  background-color:transparent !important;
  background-image:none !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  padding:0 !important;
  margin:0 !important;
  width:100%;
  min-height:0 !important;
  height:auto !important;
  font:inherit;
  font-family:inherit !important;
  color:inherit !important;
  cursor:pointer;
  text-align:left;
  align-items:center;
  justify-content:space-between;
  text-transform:none !important;
  letter-spacing:normal !important;
}
.loco-footer .loco-footer__col-toggle:hover,
.loco-footer .loco-footer__col-toggle:focus,
.loco-footer .loco-footer__col-toggle:active{
  background:transparent !important;
  background-color:transparent !important;
  color:inherit !important;
  box-shadow:none !important;
  outline:none;
}
.loco-footer__col-toggle-icon{
  width:16px;
  height:16px;
  flex:0 0 16px;
  transition:transform var(--loco-t);
  color:var(--loco-text) !important;
}

.loco-footer__list{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin:0;
  padding:0;
  list-style:none;
}
.loco-footer .loco-footer__list a,
.loco-footer .loco-footer__list a:link,
.loco-footer .loco-footer__list a:visited{
  color:#8AA3CE !important;             /* Blue-muted soft, per Figma */
  text-decoration:none !important;
  font-size:16px !important;
  font-weight:400 !important;
  line-height:1.4 !important;
  background:transparent !important;
  padding:0 !important;
  transition:color var(--loco-t);
  display:inline-block;
}
.loco-footer .loco-footer__list a:hover,
.loco-footer .loco-footer__list a:focus{
  color:var(--loco-primary) !important;
  text-decoration:none !important;
}

/* minor wrapper stacks Company then Info in the last column */
.loco-footer__minor{
  display:flex;
  flex-direction:column;
  gap:28px;
  min-width:0;
}

/* ============ COPYRIGHT ============ */
.loco-footer__bottom{
  max-width:1600px;
  margin:40px auto 0;
  padding:0 80px;
}
.loco-footer__copy{
  margin:0;
  color:var(--loco-blue-muted) !important;
  font-size:13px !important;
}


/* ================================================================
   TABLET  (≤1024)
   Layout:
     row1  brand+desc     |  contacts+socials
     row2  services-ppl   |  services-biz
     row3  company        |  info
   Services stay expanded (no accordion).
   ================================================================ */
@media (max-width:1024px){
  .loco-footer{ padding:40px 0 16px; }
  .loco-footer__inner{ padding:0 40px; }
  .loco-footer__bottom{ padding:0 40px; margin-top:24px; border-top:1px solid var(--loco-border); }
  .loco-footer__bottom .loco-footer__copy{ padding-top:16px; }

  /* 2 columns 50/50, 40px gap between rows */
  .loco-footer__grid{
    grid-template-columns:1fr 1fr;
    grid-auto-rows:auto;
    column-gap:32px;
    row-gap:40px;
  }

  .loco-footer__brand{ display:contents; }

  /* row 1: brand-info | contact-block */
  .loco-footer__brand-info{
    grid-column:1; grid-row:1;
    display:flex; flex-direction:column;
    gap:20px;                             /* 20px under logo per Figma */
    min-width:0;
  }
  .loco-footer__contact-block{
    grid-column:2; grid-row:1;
    align-items:flex-start;
    gap:20px;
  }
  .loco-footer__contact-block .loco-footer__contacts{ align-self:stretch; }
  .loco-footer__contact-block .loco-footer__socials{ align-self:center; }

  /* row 2: services 50/50 */
  .loco-footer__col--services-people   { grid-column:1; grid-row:2; }
  .loco-footer__col--services-business { grid-column:2; grid-row:2; }

  /* row 3: company | info — .minor flattens into grid */
  .loco-footer__minor{ display:contents; }
  .loco-footer__col--company { grid-column:1; grid-row:3; }
  .loco-footer__col--info    { grid-column:2; grid-row:3; }
}

/* ================================================================
   MOBILE  (≤767)
   1-column stack.
   Services collapse into accordion (per Figma mobile screen).
   Company + Info side-by-side at bottom.
   ================================================================ */
@media (max-width:767px){
  .loco-footer{ padding:40px 0 16px; }
  .loco-footer__inner{ padding:0 24px; }
  .loco-footer__bottom{ padding:0 24px; margin-top:24px; }

  .loco-footer__grid{
    grid-template-columns:1fr;
    grid-auto-rows:auto;
    gap:28px;
  }

  .loco-footer__brand{ display:contents; }
  .loco-footer__brand-info,
  .loco-footer__contact-block,
  .loco-footer__col{
    grid-column:1 !important;
    grid-row:auto !important;
  }
  .loco-footer__brand-info{
    display:flex; flex-direction:column; gap:16px;
  }
  .loco-footer__contact-block{ gap:20px; align-items:flex-start; }

  /* services → accordion */
  .loco-footer__col--services-people,
  .loco-footer__col--services-business{
    border-top:1px solid var(--loco-border);
    padding-top:18px;
    gap:0;
  }
  .loco-footer__col--services-business{
    border-bottom:1px solid var(--loco-border);
    padding-bottom:18px;
  }
  .loco-footer__col--services-people .loco-footer__col-title,
  .loco-footer__col--services-business .loco-footer__col-title{ display:none; }
  .loco-footer .loco-footer__col--services-people .loco-footer__col-toggle,
  .loco-footer .loco-footer__col--services-business .loco-footer__col-toggle{
    display:flex !important;
    font-size:16px; font-weight:700;
    color:var(--loco-text) !important;
    letter-spacing:.04em !important;
    text-transform:uppercase !important;
    padding:6px 0 !important;
  }
  .loco-footer__col--services-people .loco-footer__list,
  .loco-footer__col--services-business .loco-footer__list{
    max-height:0; overflow:hidden; opacity:0; margin-top:0;
    transition:max-height .3s cubic-bezier(.4,0,.2,1), opacity .2s, margin-top .3s;
  }
  .loco-footer__col.is-open .loco-footer__list{
    max-height:800px; opacity:1; margin-top:16px;
  }
  .loco-footer__col.is-open .loco-footer__col-toggle-icon{ transform:rotate(180deg); }

  /* company + info side by side */
  .loco-footer__minor{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px 16px;
    grid-column:1;
  }
}