@import url('https://fonts.googleapis.com/css2?family=Lexend+Exa:wght@700;800&family=Karla:ital,wght@0,300;0,400;0,500;0,700;1,300&display=swap');

/* ══════════════════════════════════════════
   SHARED WIDGET SHELL
   All vcs-* widgets + .vcs-native-wrap
   (the wrapper class for native Elementor
    widgets dropped into the sidebar)
══════════════════════════════════════════ */
.vcs-about,
.vcs-recent-posts,
.vcs-featured-posts,
.vcs-related,
.vcs-toc,
.vcs-link-list,
.vcs-ad-banner,
.vcs-native-wrap {
  background:    #f4ede0;
  border:        1.5px solid #e0cebc;
  border-radius: 6px;
  padding:       16px;
  font-family:   'Karla', sans-serif;
}

/* ── Section header: rule line + label ── */
.vcs-section-header {
  display:        flex;
  align-items:    center;
  gap:            8px;
  margin-bottom:  14px;
  padding-bottom: 10px;
  border-bottom:  1px solid #e0cebc;
}
.vcs-label-line {
  width:         16px;
  height:        2px;
  background:    #c84820;
  border-radius: 1px;
  flex-shrink:   0;
}
.vcs-section-label {
  font-family:    'Lexend Exa', sans-serif;
  font-size:      9px;
  font-weight:    700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color:          #c84820;
}

/* ══════════════════════════════════════════
   NATIVE ELEMENTOR WIDGET WRAPPER
   Wrap any built-in Elementor widget with
   [vcs-native-wrap] custom CSS class to
   match the sidebar card style.
   Typography overrides for palette harmony.
══════════════════════════════════════════ */
.vcs-native-wrap { background: #f4ede0; }

/* Headings inside native widgets */
.vcs-native-wrap .elementor-widget-heading .elementor-heading-title,
.vcs-native-wrap h1, .vcs-native-wrap h2,
.vcs-native-wrap h3, .vcs-native-wrap h4 {
  font-family:    'Lexend Exa', sans-serif !important;
  color:          #3a1c08;
  text-transform: uppercase;
  letter-spacing: -.01em;
}

/* Body text inside native widgets */
.vcs-native-wrap p,
.vcs-native-wrap .elementor-text-editor,
.vcs-native-wrap .elementor-widget-text-editor {
  font-family: 'Karla', sans-serif;
  font-size:   13px;
  font-weight: 300;
  line-height: 1.7;
  color:       #5a3818;
}

/* Links inside native widgets */
.vcs-native-wrap a {
  color:           #c84820;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.vcs-native-wrap a:hover { opacity: .8; }

/* Divider widget */
.vcs-native-wrap .elementor-divider-separator {
  border-color: #e0cebc !important;
}

/* Image widget */
.vcs-native-wrap .elementor-widget-image img {
  border-radius: 4px;
  max-width:     100%;
  height:        auto;
}

/* Button widget */
.vcs-native-wrap .elementor-button {
  font-family:    'Lexend Exa', sans-serif !important;
  font-size:      9px !important;
  font-weight:    700 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  border-radius:  2px !important;
}

/* ══════════════════════════════════════════
   ABOUT ME
══════════════════════════════════════════ */
.vcs-about { background: #ecddc8; }

.vcs-about-photo-wrap { margin-bottom: 12px; }
.vcs-about-photo {
  width:        100%;
  aspect-ratio: 1 / 1;
  object-fit:   cover;
  display:      inline-block;
  border-radius: 6px;
  max-width:    100%;
}
.vcs-about-name {
  font-family:    'Lexend Exa', sans-serif;
  font-size:      14px;
  font-weight:    700;
  letter-spacing: -.02em;
  color:          #3a1c08;
  margin-bottom:  4px;
  line-height:    1.2;
}
.vcs-about-tagline {
  font-size:      11px;
  font-weight:    500;
  font-style:     italic;
  color:          #c84820;
  margin-bottom:  10px;
  letter-spacing: .02em;
}
.vcs-about-bio {
  font-size:     13px;
  font-weight:   300;
  line-height:   1.65;
  color:         #5a3818;
  margin-bottom: 12px;
}
.vcs-about-link {
  font-family:           'Lexend Exa', sans-serif;
  font-size:             9px;
  font-weight:           700;
  letter-spacing:        .1em;
  text-transform:        uppercase;
  color:                 #c84820;
  text-decoration:       underline;
  text-underline-offset: 3px;
  display:               inline-block;
}
.vcs-about-link:hover { opacity: .75; }

/* ── Social icons ── */
.vcs-social-row {
  display:    flex;
  gap:        8px;
  flex-wrap:  wrap;
  margin-top: 12px;
}
.vcs-social-icon {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           34px;
  height:          34px;
  border:          1.5px solid #3a1c08;
  border-radius:   4px;
  color:           #3a1c08;
  text-decoration: none;
  transition:      color .15s, border-color .15s;
  flex-shrink:     0;
}
.vcs-social-icon:hover { color: #c84820; border-color: #c84820; }
.vcs-social-icon svg   { width: 16px; height: 16px; display: block; }

/* ══════════════════════════════════════════
   POST LIST — shared by Recent, Featured, Related
══════════════════════════════════════════ */
.vcs-post-item {
  display:       flex;
  gap:           10px;
  align-items:   flex-start;
  padding:       10px 0;
  border-bottom: 1px solid #e0cebc;
}
.vcs-post-item:first-child { padding-top: 0; }
.vcs-post-item:last-child  { border-bottom: none; padding-bottom: 0; }

.vcs-post-thumb-wrap { flex-shrink: 0; display: block; width: 64px; }
.vcs-post-thumb {
  width:         64px;
  height:        48px;
  object-fit:    cover;
  display:       block;
  border-radius: 4px;
}

.vcs-post-info  { flex: 1; min-width: 0; }

.vcs-post-tag {
  display:        inline-block;
  font-family:    'Lexend Exa', sans-serif;
  font-size:      7px;
  font-weight:    700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding:        2px 7px;
  border-radius:  2px;
  background:     #c84820;
  color:          #fff;
  margin-bottom:  5px;
}
.vcs-post-title {
  font-family:    'Lexend Exa', sans-serif;
  font-size:      11px;
  font-weight:    700;
  line-height:    1.25;
  letter-spacing: -.01em;
  margin-bottom:  4px;
}
.vcs-post-title a { color: #3a1c08; text-decoration: none; }
.vcs-post-title a:hover { color: #c84820; }

.vcs-post-excerpt {
  font-size:     11px;
  font-weight:   300;
  font-style:    italic;
  line-height:   1.5;
  color:         #5a3818;
  margin-bottom: 4px;
}
.vcs-post-meta {
  display:        flex;
  align-items:    center;
  gap:            4px;
  font-size:      9px;
  font-weight:    400;
  letter-spacing: .04em;
  text-transform: uppercase;
  color:          #5a3818;
  opacity:        .55;
}
.vcs-meta-dot { opacity: .4; }

/* ══════════════════════════════════════════
   TABLE OF CONTENTS
══════════════════════════════════════════ */
.vcs-toc-list { list-style: none; margin: 0; padding: 0; }
.vcs-toc-list li { margin: 0; padding: 0; }

.vcs-toc-link {
  display:         block;
  font-size:       14px;
  font-weight:     400;
  line-height:     1.5;
  color:           #5a3818;
  text-decoration: none;
  padding:         5px 10px;
  border-left:     2px solid transparent;
  border-radius:   0 3px 3px 0;
  transition:      color .15s, border-color .15s, background .15s;
  margin-bottom:   2px;
}
.vcs-toc-link:hover       { color: #c84820; background: rgba(200,72,32,.06); }
.vcs-toc-h3               { font-size: 13px; padding-left: 22px; opacity: .8; }
.vcs-toc-link.vcs-toc-active {
  color:             #c84820 !important;
  border-left-color: #c84820 !important;
  font-weight:       500;
  background:        rgba(200,72,32,.07);
}

/* ══════════════════════════════════════════
   LINK LIST (categories / countries)
══════════════════════════════════════════ */
.vcs-ll-list { list-style: none; margin: 0; padding: 0; }

.vcs-ll-item {
  display:       flex;
  align-items:   center;
  padding:       8px 0;
  border-bottom: 1px solid #e0cebc;
}
.vcs-ll-item:first-child { padding-top: 0; }
.vcs-ll-item:last-child  { border-bottom: none; padding-bottom: 0; }
.vcs-ll-item a {
  font-size:       13px;
  font-weight:     500;
  color:           #3a1c08;
  text-decoration: none;
  transition:      color .15s;
  flex:            1;
}
.vcs-ll-item a:hover { color: #c84820; }

.vcs-ll-pills-wrap { display: flex; flex-wrap: wrap; gap: 6px; }
.vcs-ll-pill {
  font-family:     'Lexend Exa', sans-serif;
  font-size:       8px;
  font-weight:     700;
  letter-spacing:  .1em;
  text-transform:  uppercase;
  padding:         5px 12px;
  border-radius:   2px;
  background:      #3a1c08;
  color:           #e8b860;
  text-decoration: none;
  display:         inline-block;
  transition:      opacity .15s;
}
.vcs-ll-pill:hover { opacity: .8; }

/* ══════════════════════════════════════════
   AD / BANNER
══════════════════════════════════════════ */
.vcs-ad-label {
  font-family:    'Lexend Exa', sans-serif;
  font-size:      8px;
  font-weight:    700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color:          #5a3818;
  opacity:        .45;
  margin-bottom:  8px;
}
.vcs-ad-link    { display: block; }
.vcs-ad-img     { width: 100%; height: auto; display: block; border-radius: 4px; }
.vcs-ad-code    { width: 100%; overflow: hidden; }
.vcs-ad-caption {
  font-size:   11px;
  font-weight: 300;
  font-style:  italic;
  color:       #5a3818;
  margin-top:  8px;
  line-height: 1.5;
}
