/*
Theme Name:   Моите Финанси
Theme URI:    https://moitefinansi.bg
Description:  Kadence Child Theme за Моите Финанси
Author:       Моите Финанси
Template:     kadence
Version:      1.0.0
Text Domain:  moite-finansi
Tags: child-theme, kadence
*/

/* ============================================
   МОИТЕ ФИНАНСИ — KADENCE CHILD THEME
   Цветова палитра от логото:
   --accent-orange:  #F5820D  (основен портокал)
   --accent-amber:   #F9B812  (жълто/злато)
   --accent-red:     #D94125  (червено/тъмен портокал)
   --text-dark:      #4A4A4A  (тъмно сиво — текст)
   --text-mid:       #666666  (средно сиво)
   --bg-light:       #FAFAFA  (фон)
   --white:          #FFFFFF
============================================ */

/* ---------- CSS Custom Properties ---------- */
:root {
  --mf-orange:     #F5820D;
  --mf-amber:      #F9B812;
  --mf-red:        #D94125;
  --mf-gradient:   linear-gradient(135deg, #F9B812 0%, #F5820D 50%, #D94125 100%);
  --mf-dark:       #3A3A3A;
  --mf-mid:        #666666;
  --mf-light-bg:   #FFF8F3;
  --mf-border:     #F0E0D0;
  --mf-white:      #FFFFFF;
  --mf-shadow:     0 4px 20px rgba(245, 130, 13, 0.15);
  --mf-shadow-lg:  0 8px 40px rgba(245, 130, 13, 0.2);
  --mf-radius:     8px;
  --mf-radius-lg:  16px;
}

/* ---------- Body & Base ---------- */
body {
  color: var(--mf-dark);
  background-color: var(--mf-white);
  font-family: 'Inter', 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Links ---------- */
a {
  color: var(--mf-orange);
  transition: color 0.2s ease;
}
a:hover,
a:focus {
  color: var(--mf-red);
  text-decoration: underline;
}

/* ---------- Headings ---------- */
h1, h2, h3, h4, h5, h6,
.wp-block-heading {
  color: var(--mf-dark);
  font-weight: 700;
}

h1 { font-size: clamp(2rem, 4vw, 3rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); }
h3 { font-size: clamp(1.2rem, 2.5vw, 1.75rem); }

/* Accent first word via span utility */
.mf-accent { color: var(--mf-orange); }

/* ---------- Header ---------- */
.site-header,
.kadence-sticky-header,
header.header-wrap {
  background: var(--mf-white) !important;
  border-bottom: 3px solid var(--mf-orange);
  box-shadow: 0 2px 16px rgba(245, 130, 13, 0.1);
}

/* ---------- Top Bar ---------- */
.header-top-wrap,
.kadence-top-header {
  background: var(--mf-gradient) !important;
  color: var(--mf-white);
}
.header-top-wrap a,
.kadence-top-header a {
  color: var(--mf-white) !important;
}

/* ---------- Navigation ---------- */
.main-navigation a,
.kadence-navigation a,
nav.primary-navigation a {
  color: var(--mf-dark);
  font-weight: 600;
  transition: color 0.2s ease;
  text-decoration: none;
}
.main-navigation a:hover,
.kadence-navigation a:hover,
nav.primary-navigation a:hover {
  color: var(--mf-orange) !important;
}

/* Active / current menu item */
.main-navigation .current-menu-item > a,
.kadence-navigation .current-menu-item > a,
nav.primary-navigation .current-menu-item > a {
  color: var(--mf-orange) !important;
  border-bottom: 2px solid var(--mf-orange);
}

/* Dropdown */
.main-navigation .sub-menu,
.kadence-navigation .sub-menu {
  background: var(--mf-white);
  border-top: 3px solid var(--mf-orange);
  box-shadow: var(--mf-shadow-lg);
  border-radius: 0 0 var(--mf-radius) var(--mf-radius);
}
.main-navigation .sub-menu a:hover,
.kadence-navigation .sub-menu a:hover {
  background: var(--mf-light-bg);
  color: var(--mf-orange) !important;
}

/* Mobile hamburger */
.menu-toggle,
.kadence-menu-toggle-wrap button {
  color: var(--mf-orange) !important;
}
.menu-toggle svg,
.kadence-menu-toggle-wrap svg {
  fill: var(--mf-orange);
}

/* ---------- Buttons ---------- */
.wp-block-button .wp-block-button__link,
.button,
button,
input[type="submit"],
.kb-btn,
.kadence-button {
  background: var(--mf-gradient) !important;
  background-size: 200% auto !important;
  color: var(--mf-white) !important;
  border: none;
  border-radius: var(--mf-radius);
  padding: 0.75rem 1.75rem;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: background-position 0.4s ease, box-shadow 0.3s ease, transform 0.2s ease;
  text-decoration: none;
  display: inline-block;
}
.wp-block-button .wp-block-button__link:hover,
.button:hover,
button:hover,
input[type="submit"]:hover,
.kb-btn:hover,
.kadence-button:hover {
  background-position: right center !important;
  box-shadow: var(--mf-shadow-lg);
  transform: translateY(-2px);
  color: var(--mf-white) !important;
}

/* Outline variant */
.wp-block-button.is-style-outline .wp-block-button__link,
.button.outline {
  background: transparent !important;
  border: 2px solid var(--mf-orange) !important;
  color: var(--mf-orange) !important;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.button.outline:hover {
  background: var(--mf-orange) !important;
  color: var(--mf-white) !important;
}

/* ---------- Forms ---------- */
input[type="text"],
input[type="email"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="search"],
select,
textarea {
  border: 2px solid var(--mf-border);
  border-radius: var(--mf-radius);
  padding: 0.65rem 1rem;
  color: var(--mf-dark);
  background: var(--mf-white);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
  width: 100%;
}
input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--mf-orange);
  box-shadow: 0 0 0 3px rgba(245, 130, 13, 0.15);
}

/* ---------- Cards / Blocks ---------- */
.kb-block-info-box,
.wp-block-group,
.kadence-column {
  border-radius: var(--mf-radius-lg);
}

/* Feature card accent */
.mf-card {
  background: var(--mf-white);
  border-radius: var(--mf-radius-lg);
  border: 1px solid var(--mf-border);
  padding: 2rem;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.mf-card:hover {
  box-shadow: var(--mf-shadow-lg);
  transform: translateY(-4px);
}
.mf-card .mf-card-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: var(--mf-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
}
.mf-card .mf-card-icon svg,
.mf-card .mf-card-icon img {
  width: 28px;
  height: 28px;
  filter: brightness(0) invert(1);
}

/* ---------- Hero Section ---------- */
.mf-hero,
.kb-hero-section,
section.hero {
  background: linear-gradient(160deg, #FFF8F3 0%, #FFF3E6 60%, #FDEBD0 100%);
  padding: 5rem 1.5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.mf-hero::before {
  content: '';
  position: absolute;
  top: -80px;
  right: -80px;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(249,184,18,0.12) 0%, transparent 70%);
  pointer-events: none;
}
.mf-hero::after {
  content: '';
  position: absolute;
  bottom: -60px;
  left: -60px;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(217,65,37,0.08) 0%, transparent 70%);
  pointer-events: none;
}
.mf-hero h1 {
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  margin-bottom: 1.5rem;
  line-height: 1.15;
}
.mf-hero p.subtitle {
  font-size: 1.2rem;
  color: var(--mf-mid);
  max-width: 560px;
  margin: 0 auto 2.5rem;
}

/* ---------- Section Accents ---------- */
.mf-section-title {
  position: relative;
  display: inline-block;
  margin-bottom: 2.5rem;
}
.mf-section-title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -10px;
  width: 60px;
  height: 4px;
  background: var(--mf-gradient);
  border-radius: 2px;
}

/* ---------- Blockquote ---------- */
blockquote,
.wp-block-quote {
  border-left: 4px solid var(--mf-orange);
  background: var(--mf-light-bg);
  border-radius: 0 var(--mf-radius) var(--mf-radius) 0;
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0;
  font-style: italic;
  color: var(--mf-mid);
}

/* ---------- Tables ---------- */
table {
  width: 100%;
  border-collapse: collapse;
  border-radius: var(--mf-radius);
  overflow: hidden;
}
th {
  background: var(--mf-gradient);
  color: var(--mf-white);
  padding: 0.85rem 1rem;
  text-align: left;
  font-weight: 700;
}
td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--mf-border);
  color: var(--mf-dark);
}
tr:hover td {
  background: var(--mf-light-bg);
}

/* ---------- Pagination ---------- */
.page-numbers,
.kadence-pagination a {
  color: var(--mf-orange);
  border: 2px solid var(--mf-border);
  border-radius: var(--mf-radius);
  padding: 0.4rem 0.85rem;
  transition: all 0.2s;
  text-decoration: none;
  font-weight: 600;
}
.page-numbers.current,
.page-numbers:hover,
.kadence-pagination a:hover {
  background: var(--mf-orange);
  border-color: var(--mf-orange);
  color: var(--mf-white);
}

/* ---------- Sidebar Widgets ---------- */
.widget-title,
.widgettitle {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--mf-dark);
  padding-bottom: 0.6rem;
  border-bottom: 3px solid var(--mf-orange);
  margin-bottom: 1rem;
}

/* ---------- Tags & Categories ---------- */
.wp-block-tag-cloud a,
.tags-links a,
a.tag {
  background: var(--mf-light-bg);
  color: var(--mf-orange);
  border: 1px solid var(--mf-border);
  border-radius: 100px;
  padding: 0.3rem 0.85rem;
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
  margin: 0.2rem;
  transition: all 0.2s;
}
.wp-block-tag-cloud a:hover,
.tags-links a:hover,
a.tag:hover {
  background: var(--mf-orange);
  color: var(--mf-white);
  border-color: var(--mf-orange);
}

/* ---------- Alerts / Notices ---------- */
.mf-alert {
  padding: 1rem 1.25rem;
  border-radius: var(--mf-radius);
  border-left: 4px solid;
  margin: 1rem 0;
  font-weight: 500;
}
.mf-alert-info    { border-color: var(--mf-amber); background: #FFFBF0; color: #7A5C00; }
.mf-alert-success { border-color: #27AE60; background: #F0FAF4; color: #1A6B3C; }
.mf-alert-warning { border-color: var(--mf-orange); background: #FFF8F0; color: #8B4500; }
.mf-alert-danger  { border-color: var(--mf-red); background: #FFF0EE; color: #8B1A0D; }

/* ---------- Footer ---------- */
.site-footer,
footer.footer-wrap {
  background: var(--mf-dark) !important;
  color: rgba(255,255,255,0.85);
  padding: 4rem 1.5rem 2rem;
}
.site-footer a,
footer.footer-wrap a {
  color: var(--mf-amber);
  transition: color 0.2s;
}
.site-footer a:hover,
footer.footer-wrap a:hover {
  color: var(--mf-orange);
}
.site-footer .widget-title,
footer.footer-wrap .widget-title {
  color: var(--mf-white);
  border-bottom-color: var(--mf-orange);
}
.footer-credit,
.site-footer .sub-footer {
  background: #2A2A2A !important;
  border-top: 1px solid rgba(245,130,13,0.25);
  color: rgba(255,255,255,0.5);
  font-size: 0.85rem;
  padding: 1rem 1.5rem;
  text-align: center;
}
.footer-credit a {
  color: var(--mf-amber) !important;
}

/* ---------- Scroll to Top ---------- */
.kadence-scrollup,
#scroll-up {
  background: var(--mf-gradient) !important;
  border-radius: 50%;
  box-shadow: var(--mf-shadow);
}

/* ---------- WooCommerce (ако е нужен) ---------- */
.woocommerce .price,
.woocommerce-Price-amount {
  color: var(--mf-orange) !important;
  font-weight: 700;
}
.woocommerce button.button,
.woocommerce a.button {
  background: var(--mf-gradient) !important;
  color: var(--mf-white) !important;
  border-radius: var(--mf-radius) !important;
}
.woocommerce .star-rating span,
.woocommerce .star-rating::before {
  color: var(--mf-amber) !important;
}

/* ---------- Utility Classes ---------- */
.text-orange  { color: var(--mf-orange); }
.text-amber   { color: var(--mf-amber); }
.text-red     { color: var(--mf-red); }
.text-dark    { color: var(--mf-dark); }
.bg-orange    { background: var(--mf-orange); color: #fff; }
.bg-gradient  { background: var(--mf-gradient); color: #fff; }
.bg-light-mf  { background: var(--mf-light-bg); }
.rounded-mf   { border-radius: var(--mf-radius); }
.shadow-mf    { box-shadow: var(--mf-shadow); }

/* ---------- Responsive tweaks ---------- */
@media (max-width: 768px) {
  .site-header { padding: 0.75rem 1rem; }
  .mf-hero     { padding: 3rem 1rem; }
  table        { font-size: 0.875rem; }
  th, td       { padding: 0.6rem 0.75rem; }
}