/* Theme overrides (loaded after style.min.css and theme-generated.css)
   - Responsive typography
   - Tight, consistent spacing
   - Theme-based colors for links/borders/buttons
   - Fixed image heights
   - .devi uses theme color
*/

:root{
  --container: 1100px;
  --pad: clamp(12px, 2vw, 20px);

  --space-1: clamp(6px, 1.2vw, 10px);
  --space-2: clamp(10px, 2vw, 16px);
  --space-3: clamp(14px, 2.6vw, 22px);

  --h1: clamp(18px, 2.3vw, 28px);
  --h2: clamp(16px, 1.9vw, 22px);
  --h3: clamp(15px, 1.6vw, 20px);
  --p:  clamp(14px, 1.2vw, 16px);

  --lh-head: 1.2;
  --lh-text: 1.6;
}

/* Base text */
body{
  background: var(--bg) !important;
  color: var(--text) !important;
}

/* Container helpers */
.container, .wrap, .site-container{
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}

/* Headings + text */
h1{ font-size: var(--h1) !important; line-height: var(--lh-head) !important; margin: 0 0 var(--space-2) !important; color: var(--text) !important; }
h2{ font-size: var(--h2) !important; line-height: var(--lh-head) !important; margin: var(--space-3) 0 var(--space-2) !important; color: var(--text) !important; }
h3,h4,h5,h6{ font-size: var(--h3) !important; line-height: var(--lh-head) !important; margin: var(--space-2) 0 var(--space-1) !important; color: var(--text) !important; }

p, li{
  font-size: var(--p) !important;
  line-height: var(--lh-text) !important;
  margin: 0 0 var(--space-2) !important;
  color: var(--text) !important;
}

/* Reduce extra gaps in sections */
section, .section, .city-description2-section{
  padding: var(--space-3) 0 !important; text-align: center;
}

/* Theme colors */
a{ color: var(--primary) !important; }
.brand a, .top-menu a, .breadcrumb a{ color: var(--primary) !important; }

/* Borders */
.pagination a,
.city-link,
.list-item,
.post-service-item,
.top-menu a,
.site-header,
.site-footer,
.list-thumb,
.post-image{
  border-color: var(--border) !important;
}

/* Header/Footer always white */
.site-header, .site-footer{
  background: #ffffff !important;
}

/* Cards */
.post-service-item,
.list-item,
.city-link{
  background: var(--card-bg, var(--card, #fff)) !important;
  color: var(--text) !important;
}

/* Buttons */
.btn{
  background: var(--primary) !important;
  color: #ffffff !important;
  border: 2px solid var(--border) !important;
}
.btn:hover{ filter: brightness(0.95); }

/* If telegram/whatsapp should follow theme, comment these 2 blocks */
.btn.telegram, .btn.whatsapp{
  background: var(--primary) !important;
  color: #ffffff !important;
  border-color: var(--border) !important;
}

/* Fixed image heights */
.post-image,
.list-thumb{
  width: 100% !important;
  height: 200px !important;
  object-fit: cover !important;
  display: block !important;
  border-width: 2px !important;
  border-style: solid !important;
  border-radius: 8px !important;
}


/* List spacing: tighter text + smaller gaps */
.list-item{
  padding: 8px 10px !important;
}
.list-body{
  gap: 8px !important;
}
.list-title{
  margin: 0 0 4px 0 !important;
  font-size: 16px !important;
  line-height: 1.25 !important;
}
.list-text{
  margin: 0 !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
}

/* Tablet/Phone */
@media (max-width: 768px){
  .post-image, .list-thumb{ height: 200px !important; }
}

/* .devi - theme based */
.devi{
  position: fixed;
  left: 0;
  bottom: 0px;
  width: 100%;
  background: transparent !important;
  color: var(--primary) !important;
  text-align: center;
  z-index: 999;
}

/* Theme-aware contact buttons (.phone / .whatsapp / .telegram) */
.phone, .btn.phone,
.whatsapp, .btn.whatsapp,
.whtsapp, .btn.whtsapp,
.telegram, .btn.telegram,
.taligram, .btn.taligram{
  background: var(--primary) !important;
  color: #ffffff !important;
  border: 2px solid  !important;
  font-size: 15px;
}

.phone:hover, .btn.phone:hover,
.whatsapp:hover, .btn.whatsapp:hover,
.whtsapp:hover, .btn.whtsapp:hover,
.telegram:hover, .btn.telegram:hover,
.taligram:hover, .btn.taligram:hover{
  filter: brightness(0.95);
}

.phone:focus-visible, .btn.phone:focus-visible,
.whatsapp:focus-visible, .btn.whatsapp:focus-visible,
.whtsapp:focus-visible, .btn.whtsapp:focus-visible,
.telegram:focus-visible, .btn.telegram:focus-visible,
.taligram:focus-visible, .btn.taligram:focus-visible{
  outline: 2px solid var(--border);
  outline-offset: 2px;
}