/* ==========================================================================
   Design Refresh — KyivType + Purple-centric palette
   ========================================================================== */

/* --- Fonts --- */
@font-face {
  font-family: 'KyivType Sans';
  src: url('../fonts/KyivTypeSans-Light.woff2') format('woff2'),
       url('../fonts/KyivTypeSans-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'KyivType Sans';
  src: url('../fonts/KyivTypeSans-Regular.woff2') format('woff2'),
       url('../fonts/KyivTypeSans-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'KyivType Sans';
  src: url('../fonts/KyivTypeSans-Bold.woff2') format('woff2'),
       url('../fonts/KyivTypeSans-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'KyivType Serif';
  src: url('../fonts/KyivTypeSerif-Regular.woff2') format('woff2'),
       url('../fonts/KyivTypeSerif-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'KyivType Serif';
  src: url('../fonts/KyivTypeSerif-Bold.woff2') format('woff2'),
       url('../fonts/KyivTypeSerif-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'KyivType Titling';
  src: url('../fonts/KyivTypeTitling-Bold.woff2') format('woff2'),
       url('../fonts/KyivTypeTitling-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* --- Color variables (CSS custom properties for easy tweaking) --- */
:root {
  --color-bg-dark:     #2A2538;     /* deeper purple-charcoal (header/footer) */
  --color-bg-dark-alt:  #352F45;    /* slightly lighter variant */
  --color-accent:       #87479B;    /* logo purple */
  --color-accent-hover: #6B3580;    /* deeper purple on hover */
  --color-accent-light: #A85FBF;    /* lighter purple for highlights */
  --color-gold:         #D4A843;    /* warm gold for secondary accents */
  --color-gold-hover:   #B8902A;
  --color-body-bg:      #F8F7FC;    /* very light lavender */
  --color-card-bg:      #FFFFFF;
  --color-text:         #2C2A35;    /* dark near-black with purple tint */
  --color-text-light:   #6B6778;    /* muted text */
  --color-text-on-dark: #EBE8F0;    /* light text on dark bg */
  --color-border:       #E0DCE8;    /* soft purple-grey border */
}

/* --- Typography overrides --- */
body {
  font-family: 'KyivType Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
  color: var(--color-text);
  background-color: var(--color-body-bg);
  line-height: 1.7;
  letter-spacing: 0.01em;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'KyivType Serif', Georgia, serif !important;
  letter-spacing: 0.02em;
  color: var(--color-text);
}

/* Banner / hero headings — use Sans */
#banner h1,
#banner h2,
#banner p,
.wrapper.style2 h1 {
  font-family: 'KyivType Sans', sans-serif !important;
}

/* --- Header --- */
#header {
  background: var(--color-bg-dark) !important;
}

#header .logo span {
  font-family: 'KyivType Sans', sans-serif !important;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.85) !important;
  font-size: 0.95em !important;
}

.contact_info ul li,
.contact_info ul li a,
.contact_info ul li p {
  color: var(--color-text-on-dark) !important;
}

/* --- Banner / Hero --- */
#banner {
  background-color: var(--color-bg-dark);
}

#banner .inner p {
  font-family: 'KyivType Sans', sans-serif !important;
  font-weight: 700;
  letter-spacing: normal;
  font-size: clamp(1.4em, 3vw, 2.2em);
  text-shadow: 0 2px 20px rgba(0,0,0,0.4);
}

#banner .inner p sup {
  font-size: 0.55em;
  vertical-align: baseline;
  position: relative;
  top: -0.55em;
  line-height: 0;
}

/* --- Buttons --- */
.button.special,
input[type="submit"].button.special {
  background-color: var(--color-accent) !important;
  border-color: var(--color-accent) !important;
  color: #fff !important;
  font-family: 'KyivType Sans', sans-serif !important;
  font-weight: 700;
  letter-spacing: 0.06em;
  border-radius: 4px;
  padding: 0 2.2em;
  transition: all 0.25s ease;
  text-transform: uppercase;
  font-size: 0.85em;
  height: 3em;
  line-height: 3em;
  display: inline-block;
  vertical-align: middle;
  box-sizing: border-box;
}

.button.special:hover,
input[type="submit"].button.special:hover {
  background-color: var(--color-accent-hover) !important;
  border-color: var(--color-accent-hover) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 15px rgba(135, 71, 155, 0.35);
}

/* Banner button — outlined style for contrast */
#banner .button.special {
  background-color: transparent !important;
  border: 2px solid rgba(255,255,255,0.8) !important;
  color: #fff !important;
  backdrop-filter: blur(2px);
}

#banner .button.special:hover {
  background-color: var(--color-accent) !important;
  border-color: var(--color-accent) !important;
  box-shadow: 0 4px 20px rgba(135, 71, 155, 0.5);
}

/* --- Tour cards section --- */
#three {
  background-color: var(--color-bg-dark) !important;
}

/* Grid: equal-height columns */
#three .grid-style {
  display: flex !important;
  flex-wrap: wrap !important;
}

#three .grid-style > div {
  display: flex !important;
}

#three .grid-style .box {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 15px rgba(0,0,0,0.08);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  display: flex !important;
  flex-direction: column !important;
  width: 100%;
}

#three .grid-style .box:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.15);
}

#three .grid-style .box .image {
  flex-shrink: 0;
}

#three .grid-style .box .content {
  padding: 2em 1.5em;
  display: flex !important;
  flex-direction: column !important;
  flex-grow: 1;
}

#three .grid-style .box .content h2 {
  font-family: 'KyivType Serif', serif !important;
  font-size: 1.3em;
  margin-bottom: 0.5em;
}

#three .grid-style .box .content p {
  flex-grow: 1;
}

#three .grid-style .box .content .button {
  align-self: center;
  margin-top: auto;
  flex-shrink: 0;
}

/* --- "МОЯ МЕТА" section --- */
#two {
  background-color: var(--color-bg-dark-alt) !important;
}

#two h1, #two h2 {
  color: var(--color-text-on-dark) !important;
  font-family: 'KyivType Sans', sans-serif !important;
  font-weight: 700;
}

#two h3, #two h4, #two h5 {
  font-family: 'KyivType Sans', sans-serif !important;
}

/* --- Content / single post pages --- */
#one .box {
  border-radius: 8px;
  box-shadow: 0 2px 20px rgba(0,0,0,0.06);
}

#one .box .content {
  font-size: 1.05em;
  line-height: 1.8;
}

#one .box .content h2 {
  font-family: 'KyivType Serif', serif !important;
  color: var(--color-text);
}

#one .box .content h3 {
  font-family: 'KyivType Serif', serif !important;
  color: var(--color-accent);
  margin-top: 1.5em;
}

/* --- HR / dividers --- */
hr {
  border-color: var(--color-border);
}

/* --- Footer --- */
#footer {
  background: var(--color-bg-dark) !important;
}

#footer .contact_footer {
  background: var(--color-bg-dark) !important;
}

#footer .contact_footer ul li,
#footer .contact_footer ul li a,
#footer .contact_footer ul li p {
  color: var(--color-text-on-dark) !important;
}

/* --- Contact form --- */
#footer h2 {
  font-family: 'KyivType Serif', serif !important;
  color: var(--color-text) !important;
}

input[type="text"],
input[type="email"],
textarea,
select {
  font-family: 'KyivType Sans', sans-serif !important;
  border-radius: 4px;
  border: 1px solid var(--color-border);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus,
select:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(135, 71, 155, 0.15);
  outline: none;
}

/* --- Testimonials page --- */
.test1, .test2 {
  border-radius: 8px;
}

/* --- Promo / image section at bottom --- */
#four {
  background-color: var(--color-bg-dark) !important;
}

/* --- Post navigation --- */
.nav-links a {
  color: var(--color-accent) !important;
  font-family: 'KyivType Sans', sans-serif !important;
  font-weight: 700;
  transition: color 0.2s ease;
}

.nav-links a:hover {
  color: var(--color-accent-hover) !important;
}

/* --- Scrollbar styling (subtle) --- */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--color-body-bg);
}
::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-accent);
}

/* --- SVG icons alignment (match PNG icon style) --- */
img.icon[src$=".svg"] {
  filter: brightness(0) invert(1);
  vertical-align: middle;
}

/* --- Clickable links in post content (blend with body text) --- */
.wrapper.style2 a {
  color: #5e5e5e !important;
}

.wrapper.style2 .content a:hover,
#one .content a:hover {
  text-decoration-color: var(--color-accent);
}

/* --- Contact info links (header, footer, nav) --- */
.contact_info a,
.contact_footer a,
.menu_contact_info a {
  color: var(--color-text-on-dark) !important;
  transition: opacity 0.2s ease;
}

.contact_info a:hover,
.contact_footer a:hover,
.menu_contact_info a:hover {
  opacity: 0.8;
}

.contact_info li p a,
.contact_footer li p a,
.menu_contact_info li p a {
  color: var(--color-text-on-dark) !important;
  text-decoration: none;
}

.contact_info li p a:hover,
.contact_footer li p a:hover,
.menu_contact_info li p a:hover {
  text-decoration: underline;
}

/* --- Selection color --- */
::selection {
  background-color: rgba(135, 71, 155, 0.2);
  color: var(--color-text);
}