/* =============================================================================
   tushetians.com – Modern UI layer
   Rides on top of the legacy Mover theme to deliver a refined, contemporary
   look while preserving existing markup. Loaded LAST in templates/index.tpl
   so it wins specificity.
   ========================================================================== */

/* =============================================================================
   THEME CONFIG  —  edit values here to recolor / restyle the entire site.
   All UI elements below pull from these custom properties, so changing a
   single value in this block updates everywhere it is used.
   ========================================================================== */
:root {
  /* ---- Brand / accent (links, buttons, highlights, focus ring) ---- */
  --color-accent:        #8B2E2A;   /* primary brand color           */
  --color-accent-hover:  #6F2421;   /* darker shade for hover/active */
  --color-accent-soft:   #F4E9E7;   /* tinted background variant     */
  --color-accent-rgb:    139, 46, 42; /* same as --color-accent, in r,g,b
                                         (used for rgba() transparencies —
                                         keep in sync with --color-accent) */

  /* ---- Page surfaces (backgrounds & cards) ---- */
  --color-bg:            #FAF7F2;   /* page background               */
  --color-surface:       #FFFFFF;   /* cards, header, panels         */
  --color-surface-alt:   #F2EDE4;   /* secondary surfaces            */

  /* ---- Text ---- */
  --color-text:          #1B1B1B;   /* headings, primary text        */
  --color-text-soft:     #4D4D4D;   /* paragraphs, body text         */
  --color-muted:         #8A8275;   /* captions, meta info           */

  /* ---- Borders & dividers ---- */
  --color-border:        #E5DFD3;
  --color-border-strong: #D6CFC0;

  /* ---- Dark sections (top bar, footer, breadcrumbs) ---- */
  --color-dark:          #1F2933;
  --color-dark-alt:      #14202A;
  --color-on-dark:       #ffffff;   /* text color on dark surfaces   */

  /* ---- Shadows ---- */
  --shadow-sm: 0 1px 2px rgba(20, 20, 20, 0.04);
  --shadow-md: 0 4px 16px rgba(20, 20, 20, 0.06);
  --shadow-lg: 0 12px 32px rgba(20, 20, 20, 0.10);

  /* ---- Radii ---- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;

  /* ---- Motion ---- */
  --transition: 220ms cubic-bezier(.4, 0, .2, 1);

  /* ---- Typography ---- */
  --font-sans: "Noto Sans Georgian", "Inter", -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Noto Serif Georgian", "Playfair Display", Georgia,
                  "Times New Roman", serif;
}
/* =============================================================================
   END THEME CONFIG
   ========================================================================== */

/* ---------- Base & typography --------------------------------------------- */
html, body {
  background: var(--color-bg) !important;
  color: var(--color-text) !important;
  font-family: var(--font-sans) !important;
  font-size: 16px !important;
  line-height: 1.65 !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

p, li, td, th, label, .grey { color: var(--color-text-soft) !important; }

a { color: var(--color-accent); transition: color var(--transition); }
a:hover, a:focus { color: var(--color-accent-hover); text-decoration: none; }

h1, h2, h3, h4, h5, h6,
.entry-title, .module-header, .section_header, .widget-title {
  font-family: var(--font-display) !important;
  color: var(--color-text) !important;
  letter-spacing: -0.01em !important;
  font-weight: 700 !important;
}
h1, .h1 { font-size: clamp(2rem, 4vw, 2.75rem) !important; line-height: 1.15 !important; }
h2, .h2, .section_header { font-size: clamp(1.6rem, 3vw, 2.1rem) !important; line-height: 1.25 !important; }
h3, .h3 { font-size: 1.5rem !important; }
h4, .h4 { font-size: 1.2rem !important; }

.highlight { color: var(--color-accent) !important; }

/* ---------- Top bar (language switcher) ----------------------------------- */
.page_topline {
  background: var(--color-dark) !important;
  color: rgba(255,255,255,0.78) !important;
  padding: 8px 0 !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}
.page_topline.with_search.ls.ms { background: var(--color-dark) !important; }
.page_topline a {
  color: rgba(255,255,255,0.65) !important;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  padding: 0 8px;
  text-transform: uppercase;
  transition: color var(--transition);
}
.page_topline a:hover,
.page_topline a.active { color: #fff !important; }
.page_topline .topline-tagline {
  color: rgba(255,255,255,0.6) !important;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---------- Header / nav -------------------------------------------------- */
.page_header.header_white {
  background: var(--color-surface) !important;
  border-bottom: 1px solid var(--color-border) !important;
  box-shadow: var(--shadow-sm);
}
.page_header .container { padding-top: 14px; padding-bottom: 14px; }

.top_logo img { max-height: 80px; width: auto; }

.mainmenu.nav.sf-menu > li > a {
  color: var(--color-text) !important;
  font-weight: 500 !important;
  font-size: 0.92rem !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 14px 18px !important;
  border: none !important;
  background: transparent !important;
  transition: color var(--transition);
}
.mainmenu.nav.sf-menu > li > a:hover,
.mainmenu.nav.sf-menu > li.active > a { color: var(--color-accent) !important; }

.mainmenu.nav.sf-menu ul {
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border) !important;
  box-shadow: var(--shadow-md);
  border-radius: var(--radius-sm);
  padding: 6px 0;
}
.mainmenu.nav.sf-menu ul li a {
  color: var(--color-text) !important;
  padding: 8px 16px !important;
  font-size: 0.9rem;
  border: none !important;
}
.mainmenu.nav.sf-menu ul li a:hover {
  background: var(--color-surface-alt) !important;
  color: var(--color-accent) !important;
}

.header_right_buttons .social-icon.color-bg-icon.rounded-icon {
  background: var(--color-surface-alt) !important;
  color: var(--color-text-soft) !important;
  width: 36px; height: 36px; line-height: 36px;
  border-radius: 50% !important;
  margin-left: 6px;
  transition: all var(--transition);
}
.header_right_buttons .social-icon.color-bg-icon.rounded-icon:hover {
  background: var(--color-accent) !important;
  color: #fff !important;
}

/* ---------- Buttons ------------------------------------------------------- */
.theme_button,
.theme_button.color1,
.theme_button.color3,
button.theme_button,
button[type="submit"].theme_button,
.btn.btn-primary {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  background: var(--color-accent) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--radius-sm) !important;
  padding: 12px 28px !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 0.85rem !important;
  line-height: 1 !important;
  text-shadow: none !important;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition);
  cursor: pointer;
}
.theme_button:hover,
.btn.btn-primary:hover {
  background: var(--color-accent-hover) !important;
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.theme_button.color3 {
  background: transparent !important;
  color: var(--color-accent) !important;
  border: 1.5px solid var(--color-accent) !important;
  box-shadow: none !important;
}
.theme_button.color3:hover {
  background: var(--color-accent) !important;
  color: #fff !important;
}
.theme_button.wide_button { width: 100%; }

/* ---------- Site-wide section spacing ------------------------------------- */
.section_padding_top_40,
.section_padding_top_50  { padding-top: 56px !important; }
.section_padding_bottom_100,
.section_padding_bottom_130 { padding-bottom: 72px !important; }
.section_padding_top_100 { padding-top: 64px !important; }
.section_padding_top_25,
.section_padding_bottom_25 { padding-top: 32px !important; padding-bottom: 32px !important; }
.section_padding_15 { padding: 20px 0 !important; }
.section_padding_50 { padding: 56px 0 !important; }

/* ---------- Breadcrumbs --------------------------------------------------- */
.page_breadcrumbs.ds {
  background: linear-gradient(135deg, var(--color-dark) 0%, var(--color-dark-alt) 100%) !important;
  color: #fff !important;
  border-bottom: 4px solid var(--color-accent);
}
.page_breadcrumbs.ds h2,
.page_breadcrumbs.ds h2.highlight {
  color: #fff !important;
  /* Legacy main.min.css forces `display: inline` here, which collapses the
     heading onto the same line as the breadcrumb. Restore block flow. */
  display: block !important;
  margin: 0 0 12px !important;
}
.page_breadcrumbs.ds .breadcrumb { display: inline-flex; }
.page_breadcrumbs.ds .breadcrumb {
  background: transparent !important;
  display: inline-flex;
  gap: 6px;
  font-size: 0.85rem;
  margin: 0;
  padding: 0;
}
.page_breadcrumbs.ds .breadcrumb li,
.page_breadcrumbs.ds .breadcrumb li a {
  color: rgba(255,255,255,0.7) !important;
}
.page_breadcrumbs.ds .breadcrumb li.active { color: #fff !important; }
.page_breadcrumbs.ds .breadcrumb > li + li:before { color: rgba(255,255,255,0.4); }

/* ---------- Teaser cards (home page) -------------------------------------- */
#services .teaser {
  background: var(--color-surface);
  padding: 40px 28px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition);
  height: 100%;
}
#services .teaser:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-accent-soft);
}
#services .teaser .teaser_icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 78px; height: 78px;
  margin: 0 auto 22px;
  border-radius: 50%;
  background: var(--color-accent-soft) !important;
  color: var(--color-accent) !important;
  font-size: 32px !important;
  border: none !important;
}
#services .teaser .teaser_icon i { color: var(--color-accent) !important; }
#services .teaser h4 a { color: var(--color-text) !important; }
#services .teaser h4 a:hover { color: var(--color-accent) !important; }

/* ---------- Article / list cards (news + portfolio + projects) ------------ */
article.post.side-item,
article.vertical-item {
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-sm);
  margin-bottom: 28px;
  overflow: hidden;
  transition: all var(--transition);
}
article.post.side-item:hover,
article.vertical-item:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-border-strong);
}
article.post.side-item .item-content,
article.vertical-item .item-content {
  padding: 26px 28px !important;
  background: transparent !important;
}
article .item-media {
  background: var(--color-surface-alt);
  overflow: hidden;
  position: relative;
}
article .item-media { aspect-ratio: 16 / 10; }
article.vertical-item .item-media { aspect-ratio: 4 / 3; }
article .item-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 600ms ease;
}
article:hover .item-media img { transform: scale(1.04); }

article .item-content h4,
article .item-content .entry-title {
  margin: 6px 0 10px !important;
  font-size: 1.25rem !important;
}
article .item-content h4 a { color: var(--color-text) !important; }
article .item-content h4 a:hover { color: var(--color-accent) !important; }

article .entry-date.small-text.main_bg_color.rounded {
  display: inline-block;
  background: var(--color-accent) !important;
  color: #fff !important;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 8px;
}

/* Single article (news / portfolio detail) */
article.event-single.vertical-item {
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-lg) !important;
  padding: 0;
  overflow: hidden;
}
article.event-single .item-content.with_background {
  background: transparent !important;
  padding: 40px 44px !important;
}
article.event-single .entry-content {
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--color-text-soft);
}
article.event-single .entry-content img {
  border-radius: var(--radius-md);
  margin: 18px 0;
  max-width: 100%;
  height: auto;
}
article.event-single .item-media.entry-thumbnail { padding: 0 44px 40px; }
article.event-single .item-media.entry-thumbnail img {
  width: 100%;
  border-radius: var(--radius-md);
  margin-top: 24px;
  box-shadow: var(--shadow-md);
}

/* ---------- Forms --------------------------------------------------------- */
.form-control {
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-sm) !important;
  background: var(--color-surface) !important;
  color: var(--color-text) !important;
  height: 46px !important;
  padding: 12px 16px !important;
  font-size: 0.95rem !important;
  box-shadow: none !important;
  transition: border-color var(--transition), box-shadow var(--transition);
}
textarea.form-control { height: auto !important; min-height: 120px; }
.form-control:focus {
  border-color: var(--color-accent) !important;
  box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.15) !important;
  outline: none !important;
}
.form-group label {
  font-weight: 500 !important;
  color: var(--color-text) !important;
  margin-bottom: 6px !important;
  font-size: 0.92rem;
}

/* Contact form: icons placed before each input/textarea in the legacy markup
   would overlap the placeholder. Anchor them inside the field on the left and
   pad the field's text so the placeholder clears the icon. */
.contact-form .form-group { position: relative; }
.contact-form .form-group > .form-control { padding-left: 42px !important; }
.contact-form .form-group > i.fa {
  position: absolute;
  left: 14px;
  bottom: 15px;            /* vertically centered in the 46px input */
  font-size: 16px;
  line-height: 1;
  color: var(--color-accent) !important;
  pointer-events: none;
  z-index: 2;
}
/* Textarea is taller and grows — anchor the icon to the top of the field */
.contact-form .contact-form-message.form-group > i.fa {
  bottom: auto;
  top: 40px;
}

/* ---------- Pagination ---------------------------------------------------- */
.pagination {
  display: inline-flex;
  gap: 4px;
  background: transparent;
  margin: 24px 0;
}
.pagination > li > a {
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--color-text-soft) !important;
  padding: 8px 14px !important;
  background: var(--color-surface) !important;
  font-weight: 500;
  transition: all var(--transition);
}
.pagination > li > a:hover {
  background: var(--color-surface-alt) !important;
  border-color: var(--color-border-strong) !important;
  color: var(--color-accent) !important;
}
.pagination > li.active > a {
  background: var(--color-accent) !important;
  border-color: var(--color-accent) !important;
  color: #fff !important;
}

/* ---------- Tabs (transactions) ------------------------------------------ */
.nav.nav-tabs {
  border-bottom: 1px solid var(--color-border) !important;
  margin-bottom: 28px;
}
.nav.nav-tabs > li > a {
  border: none !important;
  border-radius: 0 !important;
  color: var(--color-text-soft) !important;
  padding: 14px 22px !important;
  font-weight: 500;
}
.nav.nav-tabs > li.active > a,
.nav.nav-tabs > li.active > a:hover {
  background: transparent !important;
  border: none !important;
  border-bottom: 3px solid var(--color-accent) !important;
  color: var(--color-accent) !important;
  font-weight: 600;
}

/* ---------- Tables -------------------------------------------------------- */
.table {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-border);
}
.table thead th {
  background: var(--color-surface-alt);
  border-bottom: 1px solid var(--color-border) !important;
  color: var(--color-text) !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  padding: 14px 18px !important;
}
.table tbody td {
  border-top: 1px solid var(--color-border) !important;
  padding: 14px 18px !important;
  color: var(--color-text-soft);
  vertical-align: middle !important;
}
.table.table-striped tbody tr:nth-of-type(odd) {
  background: rgba(245, 241, 234, 0.4);
}

/* ---------- Footer -------------------------------------------------------- */
.page_footer.ds {
  background: var(--color-dark) !important;
  background-image: none !important;
  color: rgba(255,255,255,0.72) !important;
  padding: 64px 0 48px !important;
  border-top: 4px solid var(--color-accent);
}
.page_footer .widget-title {
  color: #fff !important;
  font-family: var(--font-display) !important;
  font-size: 1.05rem !important;
  letter-spacing: 0.04em;
  margin-bottom: 22px !important;
  position: relative;
  padding-bottom: 14px;
}
.page_footer .widget-title::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 36px; height: 2px;
  background: var(--color-accent);
}
.page_footer .widget_recent_entries ul li {
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding-bottom: 14px;
  margin-bottom: 14px !important;
}
.page_footer .widget_recent_entries .post-date {
  color: rgba(255,255,255,0.45) !important;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 4px;
}
.page_footer .widget_recent_entries a p { color: rgba(255,255,255,0.88) !important; transition: color var(--transition); margin: 0; }
.page_footer .widget_recent_entries a:hover p { color: #fff !important; }
.page_footer p,
.page_footer .widget_text p,
.page_footer .widget_text { color: rgba(255,255,255,0.78) !important; }
.page_footer .list1 li { color: rgba(255,255,255,0.78) !important; padding: 4px 0; }
.page_footer .list1 li i { color: var(--color-accent) !important; margin-right: 8px; }
.page_footer a { color: rgba(255,255,255,0.88) !important; }
.page_footer a:hover { color: #fff !important; }
.page_footer .small-teaser { margin-bottom: 14px; align-items: center; }
.page_footer .small-teaser .media-body { color: rgba(255,255,255,0.85); }
.page_footer .social-icon.color-icon.border-icon {
  background: rgba(255,255,255,0.06) !important;
  color: rgba(255,255,255,0.85) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  width: 36px; height: 36px; line-height: 36px;
  border-radius: 50% !important;
  transition: all var(--transition);
}
.page_footer .social-icon.color-icon.border-icon:hover {
  background: var(--color-accent) !important;
  color: #fff !important;
  border-color: var(--color-accent) !important;
}

/* Copyright + developer */
.page_copyright.ls {
  background: var(--color-dark-alt) !important;
  color: rgba(255,255,255,0.5) !important;
  padding: 20px 0 !important;
  border-top: 1px solid rgba(255,255,255,0.05);
}
.page_copyright p { color: rgba(255,255,255,0.5) !important; margin: 0; font-size: 0.85rem; }
.page_developed.ls {
  background: var(--color-dark-alt) !important;
  color: rgba(255,255,255,0.4) !important;
  padding: 0 0 18px !important;
}
.page_developed p { color: rgba(255,255,255,0.4) !important; font-size: 0.78rem; margin: 0; }
.page_developed a { color: rgba(255,255,255,0.7) !important; }

/* ---------- Site-wide alert / message ------------------------------------- */
.site-message.alert-info {
  background: var(--color-accent-soft) !important;
  color: var(--color-accent-hover) !important;
  border: 1px solid rgba(var(--color-accent-rgb), 0.18);
  border-radius: 0;
  padding: 12px 0 !important;
  margin: 0 !important;
}

/* ---------- Error / 404 --------------------------------------------------- */
.not_found {
  font-family: var(--font-display) !important;
  font-size: clamp(6rem, 18vw, 12rem) !important;
  line-height: 1;
  margin: 0 0 12px;
}
.not_found .highlight { color: var(--color-accent) !important; }

/* ---------- Misc cleanups ------------------------------------------------- */
.darklinks { color: var(--color-text-soft) !important; }
.with_background { background: transparent !important; }
.with_background.rounded { background: var(--color-surface) !important; }
.bg_image { background-image: none !important; }

/* Image fallback hook — when an <img> fails or is empty, browsers will keep
   alt text; we fall back via inline backgrounds where templates use the SVG. */
img.no-photo,
.no-photo-bg {
  background: url('../../images/no-photo.svg') center/cover no-repeat;
}

/* Small responsive polish */
@media (max-width: 991px) {
  .mainmenu.nav.sf-menu > li > a { padding: 10px 14px !important; }
  .top_logo img { max-height: 60px; }
  article.event-single .item-content.with_background { padding: 28px 22px !important; }
  article.event-single .item-media.entry-thumbnail { padding: 0 22px 28px; }
}