/*
Theme Name: TurkmenFinder
Theme URI: https://turkmenfinder.com
Description: TurkmenFinder child theme for ListingHive. Brand identity, Yelp-style category and listing cards, and a full site footer with social links.
Author: TurkmenFinder
Version: 1.0.5
Template: listinghive
License: GNU General Public License v2 or later
Text Domain: turkmenfinder
*/

/* ============================================================
   1. Brand tokens
   Sampled from the TurkmenFinder logo (TF.jpg):
   blue #0155D9 · amber #FEAC0A · red #F93110
   ============================================================ */
:root {
  --tf-blue:        #0155D9;
  --tf-blue-dark:   #0143AB;
  --tf-amber:       #FEAC0A;
  --tf-red:         #F93110;
  --tf-red-dark:    #D9260A;

  --tf-ink:         #121826;
  --tf-body:        #47506A;
  --tf-muted:       #7B849C;
  --tf-line:        #E4E8F0;
  --tf-line-soft:   #EFF2F7;
  --tf-surface:     #FFFFFF;
  --tf-ground:      #F7F9FC;

  --tf-radius:      10px;
  --tf-shadow:      0 1px 2px rgba(18,24,38,.04), 0 8px 20px -12px rgba(18,24,38,.18);
  --tf-shadow-lift: 0 2px 4px rgba(18,24,38,.06), 0 14px 28px -14px rgba(18,24,38,.26);
}

body { color: var(--tf-body); background: var(--tf-surface); }
h1, h2, h3, h4, h5, h6 { color: var(--tf-ink); }
a { color: var(--tf-blue); }
a:hover { color: var(--tf-blue-dark); }

/* ============================================================
   2. Buttons — red primary, Yelp-style
   ============================================================ */
.button--primary,
button[type="submit"],
input[type="submit"],
.wp-block-button.is-style-primary .wp-block-button__link,
.hp-form__button .button {
  background-color: var(--tf-red) !important;
  border-color: var(--tf-red) !important;
  color: #fff !important;
  border-radius: 8px !important;
  font-weight: 700;
  letter-spacing: .01em;
  transition: background-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.button--primary:hover,
button[type="submit"]:hover,
input[type="submit"]:hover,
.wp-block-button.is-style-primary .wp-block-button__link:hover {
  background-color: var(--tf-red-dark) !important;
  border-color: var(--tf-red-dark) !important;
  box-shadow: 0 6px 16px -8px rgba(249,49,16,.7);
}

.button--secondary {
  border-radius: 8px !important;
  border-color: var(--tf-line) !important;
  color: var(--tf-ink) !important;
}
.button--secondary:hover {
  border-color: var(--tf-blue) !important;
  color: var(--tf-blue) !important;
}

/* ============================================================
   3. Header
   ============================================================ */
.site-header {
  background: var(--tf-surface);
  border-bottom: 1px solid var(--tf-line);
}
.header-logo__image img,
.header-logo img {
  max-height: 44px;
  width: auto;
}
.header-logo__name {
  color: var(--tf-ink);
  font-weight: 800;
  letter-spacing: -.02em;
}
.header-logo__description { color: var(--tf-muted); }

.header-navbar__menu ul li a:hover,
.header-navbar__menu ul li.active > a,
.header-navbar__menu ul li.current-menu-item > a { color: var(--tf-red) !important; }
.header-navbar__menu > ul > li.current-menu-item::before,
.header-navbar__burger > ul > li.current-menu-item::before { background-color: var(--tf-red) !important; }

/* ============================================================
   4. Search form — bigger, rounded, red action
   ============================================================ */
.hp-form--listing-search,
.hp-form--listing-filter {
  border-radius: var(--tf-radius);
  box-shadow: var(--tf-shadow);
  border: 1px solid var(--tf-line);
  overflow: hidden;
}
.hp-form--listing-search input[type="text"],
.hp-form--listing-search input[type="search"] {
  border: none;
  font-size: 1rem;
}

/* ============================================================
   5. Category cards — icon-led, Yelp style
   ============================================================ */
.hp-listing-category--view-block,
.hp-listing-category--submit-block {
  background: var(--tf-surface) !important;
  border: 1px solid var(--tf-line);
  border-radius: var(--tf-radius) !important;
  padding: 28px 18px 22px !important;
  text-align: center;
  height: 100%;
  color: var(--tf-ink) !important;
  position: relative;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.hp-listing-category--view-block:hover,
.hp-listing-category--submit-block:hover {
  border-color: transparent;
  box-shadow: var(--tf-shadow-lift);
  transform: translateY(-3px) !important;
}

/* kill the parent's full-bleed image + absolutely positioned overlay */
.hp-listing-category--view-block .hp-listing-category__header,
.hp-listing-category--submit-block .hp-listing-category__header {
  background: none !important;
  padding: 0 !important;
  margin: 0 0 16px !important;
  min-height: 0 !important;
  position: static !important;
  display: block !important;
}
.hp-listing-category--view-block .hp-listing-category__image,
.hp-listing-category--submit-block .hp-listing-category__image {
  position: static !important;
  width: 60px !important;
  height: 60px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  background: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
}
.hp-listing-category--view-block .hp-listing-category__image a,
.hp-listing-category--submit-block .hp-listing-category__image a {
  display: block !important;
  position: static !important;
  width: 100% !important;
  height: 100% !important;
}
.hp-listing-category--view-block .hp-listing-category__image img,
.hp-listing-category--submit-block .hp-listing-category__image img {
  position: static !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  border-radius: 0 !important;
  transform: none !important;
  opacity: 1 !important;
}
/* the parent paints a dark scrim over the whole card so white text reads on a
   photo; our cards are white with dark text, so it has to go */
.hp-listing-category--view-block .hp-listing-category__image::before,
.hp-listing-category--view-block .hp-listing-category__image::after,
.hp-listing-category--view-block .hp-listing-category__image a::before,
.hp-listing-category--view-block .hp-listing-category__image a::after,
.hp-listing-category--view-block .hp-listing-category__header::before,
.hp-listing-category--view-block .hp-listing-category__header::after,
.hp-listing-category--submit-block .hp-listing-category__image a::before,
.hp-listing-category--submit-block .hp-listing-category__image a::after {
  display: none !important;
  content: none !important;
  background: none !important;
}

.hp-listing-category--view-block .hp-listing-category__content,
.hp-listing-category--submit-block .hp-listing-category__content {
  position: static !important;
  left: auto !important;
  bottom: auto !important;
  padding: 0 !important;
}
.hp-listing-category--view-block .hp-listing-category__name,
.hp-listing-category--submit-block .hp-listing-category__name {
  margin: 0 0 5px !important;
  font-size: 1rem;
  line-height: 1.3;
}
.hp-listing-category--view-block .hp-listing-category__name a,
.hp-listing-category--view-block .hp-listing-category__content a,
.hp-listing-category--view-block .hp-listing-category__content h1,
.hp-listing-category--view-block .hp-listing-category__content h2,
.hp-listing-category--view-block .hp-listing-category__content h3,
.hp-listing-category--submit-block .hp-listing-category__name a {
  color: var(--tf-ink) !important;
  font-weight: 700;
  text-shadow: none !important;
}
.hp-listing-category--view-block:hover .hp-listing-category__name a { color: var(--tf-red) !important; }

.hp-listing-category--view-block .hp-listing-category__count,
.hp-listing-category--view-block .hp-listing-category__item-count,
.hp-listing-category--submit-block .hp-listing-category__item-count {
  position: static !important;
  display: inline-block;
  background: none !important;
  color: var(--tf-muted) !important;
  font-size: .78rem;
  font-weight: 500;
  padding: 0 !important;
  margin: 0 !important;
  letter-spacing: .02em;
  text-shadow: none !important;
}
.hp-listing-category--view-block .hp-listing-category__description {
  color: var(--tf-muted) !important;
  font-size: .84rem;
  line-height: 1.5;
  margin-top: 10px !important;
  text-shadow: none !important;
}
.hp-listing-category--view-block .hp-listing-category__details { justify-content: center; }

/* Compact tiles inside a categories block (home page grids). Descriptions are
   useful on a category page but make a 14-tile grid unreadable, so drop them
   here only. */
.hp-listing-categories .hp-listing-category--view-block {
  padding: 26px 14px 20px !important;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
.hp-listing-categories .hp-listing-category__description { display: none !important; }

/* let the header's children join the card's flex flow, so the order becomes
   icon → name → count instead of icon → count → name */
.hp-listing-categories .hp-listing-category__header { display: contents !important; }
.hp-listing-categories .hp-listing-category__image {
  order: 1;
  width: 52px !important;
  height: 52px !important;
  margin: 0 0 14px !important;
}
.hp-listing-categories .hp-listing-category__content {
  order: 2;
  text-align: center !important;
  width: 100%;
}
.hp-listing-categories .hp-listing-category__item-count,
.hp-listing-categories .hp-listing-category__count {
  order: 3;
  margin-top: 3px !important;
}
.hp-listing-categories .hp-listing-category__name,
.hp-listing-categories .hp-listing-category__name a { text-align: center !important; }
.hp-listing-categories .hp-listing-category__name { margin: 0 !important; }

/* Category archive hero. The parent renders this as a full-bleed photo cover
   with a dark scrim; our categories carry icons, not photographs, so it lands
   as a grey slab. Replace it with a light band. */
.header-hero.hp-listing-category--view-page {
  background-color: var(--tf-ground) !important;
  background-image: none !important;
  color: var(--tf-ink) !important;
  min-height: 0 !important;
  padding: 44px 0 !important;
  border-bottom: 1px solid var(--tf-line);
}
.header-hero.hp-listing-category--view-page::before,
.header-hero.hp-listing-category--view-page::after {
  display: none !important;
  content: none !important;
  background: none !important;
}
.header-hero.hp-listing-category--view-page .hp-listing-category__image { display: none !important; }
.header-hero.hp-listing-category--view-page .hp-listing-category__name { color: var(--tf-ink) !important; }
.header-hero.hp-listing-category--view-page .hp-listing-category__description,
.header-hero.hp-listing-category--view-page .header-hero__content { color: var(--tf-body) !important; }
.header-hero.hp-listing-category--view-page .hp-listing-category__count,
.header-hero.hp-listing-category--view-page .hp-listing-category__item-count {
  background: var(--tf-surface) !important;
  color: var(--tf-body) !important;
  border: 1px solid var(--tf-line);
}

/* ============================================================
   6. Listing cards
   ============================================================ */
.hp-listing--view-block {
  background: var(--tf-surface);
  border: 1px solid var(--tf-line);
  border-radius: var(--tf-radius);
  overflow: hidden;
  height: 100%;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.hp-listing--view-block:hover {
  border-color: transparent;
  box-shadow: var(--tf-shadow-lift);
  transform: translateY(-2px);
}
.hp-listing--view-block .hp-listing__content,
.hp-listing--view-block .hp-listing__footer { padding-left: 16px; padding-right: 16px; }
.hp-listing--view-block .hp-listing__footer { padding-bottom: 16px; }
.hp-listing--view-block .hp-listing__title a { color: var(--tf-ink); font-weight: 700; }
.hp-listing--view-block:hover .hp-listing__title a { color: var(--tf-red); }
.hp-listing__attribute--price {
  color: var(--tf-ink);
  font-weight: 800;
  font-size: 1.05rem;
}
.hp-listing__categories a,
.hp-listing__category a {
  background: var(--tf-ground);
  color: var(--tf-body);
  border-radius: 999px;
  font-size: .72rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-weight: 600;
}

/* rating stars keep the brand amber */
.hp-rating__star,
.hp-rating i,
.star-rating { color: var(--tf-amber) !important; }

/* ============================================================
   7. Section headings on the home page
   ============================================================ */
.entry-content > h2 {
  font-size: clamp(1.35rem, 2.6vw, 1.75rem);
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 44px 0 20px;
}

/* ============================================================
   8. Footer — the theme's thin footer is replaced by ours
   ============================================================ */
.site-footer { display: none !important; }

.tf-footer {
  background: var(--tf-ink);
  color: #A9B2C7;
  padding: 56px 0 0;
  margin-top: 64px;
  font-size: .92rem;
  line-height: 1.65;
}
.tf-footer a { color: #C9D1E2; text-decoration: none; }
.tf-footer a:hover { color: #fff; }

.tf-footer__inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  gap: 40px;
  grid-template-columns: 1fr;
}
@media (min-width: 720px)  { .tf-footer__inner { grid-template-columns: 1.4fr 1fr 1fr; } }
@media (min-width: 1000px) { .tf-footer__inner { grid-template-columns: 1.6fr 1fr 1fr 1fr; } }

.tf-footer__brand img { max-width: 210px; height: auto; margin-bottom: 16px; }
.tf-footer__brand p { color: #8C96AE; max-width: 34ch; margin: 0 0 20px; }

.tf-footer__title {
  color: #fff;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: 0 0 14px;
}
.tf-footer ul { list-style: none; margin: 0; padding: 0; }
.tf-footer li { margin-bottom: 9px; }

.tf-social { display: flex; flex-wrap: wrap; gap: 10px; }
.tf-social a {
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  color: #C9D1E2;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
}
.tf-social a:hover {
  background: var(--tf-red);
  border-color: var(--tf-red);
  color: #fff;
  transform: translateY(-2px);
}
.tf-social svg { width: 16px; height: 16px; fill: currentColor; display: block; }

.tf-footer__bar {
  margin-top: 48px;
  border-top: 1px solid rgba(255,255,255,.09);
  padding: 20px 0 28px;
}
.tf-footer__bar-inner {
  max-width: 1180px; margin: 0 auto; padding: 0 24px;
  display: flex; flex-wrap: wrap; gap: 8px 24px;
  align-items: center; justify-content: space-between;
  color: #79839C; font-size: .84rem;
}

@media (prefers-reduced-motion: reduce) {
  .hp-listing--view-block, .hp-listing-category--view-block, .tf-social a, .button--primary { transition: none; transform: none; }
}
