/*
  Kalki Avatara component sheet
  This file is loaded after site.css and acts as the design-system layer.
  Use these component rules across pages to keep radius, spacing, cards,
  buttons, sheets, and media treatment consistent.
*/

:root {
  --ka-radius-sm: 14px;
  --ka-radius-md: 20px;
  --ka-radius-lg: 28px;
  --ka-radius-xl: 36px;
  --ka-radius-round: 999px;
  --ka-border: 1px solid rgba(32, 35, 42, .09);
  --ka-surface: rgba(255, 255, 255, .92);
  --ka-shadow: 0 18px 48px rgba(31, 35, 42, .09);
  --ka-shadow-lift: 0 28px 76px rgba(31, 35, 42, .14);
  --ka-control-h: 46px;
}

.button,
button.button,
a.button,
.search-toggle,
.menu-toggle,
.language-dropdown summary,
.search-panel-form input,
.archive-search,
.archive-search input,
.site-search,
.editor-form input,
.editor-form select,
.editor-form textarea {
  border-radius: var(--ka-radius-md);
}

.button,
button.button,
a.button {
  min-height: var(--ka-control-h);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: var(--ka-border);
  font-family: Inter, Arial, sans-serif;
  font-weight: 850;
}

.button-primary {
  border-color: var(--green);
  background: var(--green);
  color: #fff;
}

.post-card,
.hero-video-card,
.lead-card,
.mini-card,
.feature-strip-card,
.event-video-card,
.sidebar-panel,
.quote-panel,
.article-aside,
.admin-panel,
.post-content,
.post-nav-card,
.about-image-card {
  border: var(--ka-border);
  border-radius: var(--ka-radius-lg);
  box-shadow: var(--ka-shadow);
}

.post-card,
.hero-video-card,
.event-video-card,
.lead-card,
.feature-strip-card,
.mini-card {
  overflow: hidden;
}

.card-media,
.lead-media,
.mini-media,
.feature-strip-card .mini-media,
.event-video-thumb,
.hero-fallback-image {
  border-radius: 0;
  background: #f4efe4;
}

.card-media img,
.lead-media img,
.mini-media img,
.event-video-thumb img,
.hero-fallback-image img,
.article-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.search-toggle,
.menu-toggle {
  width: var(--ka-control-h);
  height: var(--ka-control-h);
  border: var(--ka-border);
  background: #fff;
  box-shadow: var(--ka-shadow);
}

.search-toggle {
  border-radius: 50%;
}

.language-dropdown summary {
  min-height: var(--ka-control-h);
  border: var(--ka-border);
  background: #fff;
  box-shadow: var(--ka-shadow);
}

.language-options {
  border: var(--ka-border);
  border-radius: var(--ka-radius-lg);
  box-shadow: var(--ka-shadow-lift);
}

.search-panel {
  z-index: 80;
  border: 0;
  background: rgba(255, 255, 255, .96);
}

body.search-open {
  overflow-x: hidden;
}

.search-panel-form {
  max-width: 880px;
  margin-inline: auto;
  padding: 8px;
  border: var(--ka-border);
  border-radius: var(--ka-radius-lg);
  background: #fff;
  box-shadow: var(--ka-shadow);
}

.search-panel-form input {
  height: 54px;
  border: 0;
  background: #f7f3ed;
}

.search-panel-form .button {
  min-width: 118px;
}

.archive-search {
  border: var(--ka-border);
  border-radius: var(--ka-radius-lg);
  background: #fff;
}

.archive-search .button {
  border-radius: var(--ka-radius-md);
}

.hero-video-card,
.hero-video-card:hover,
.hero-video-card-large,
.hero-video-card-large:hover {
  transform: none;
}

.hero-video-card {
  transition: none;
}

.hero-video-card:hover,
.video-first-hero .hero-video-card-large:hover {
  box-shadow: var(--ka-shadow);
}

.is-live-hero:hover {
  box-shadow: 0 32px 96px rgba(220, 38, 38, .16);
}

@media (max-width: 900px) {
  body.search-open {
    overflow: hidden;
  }

  body.search-open::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 70;
    background: rgba(23, 26, 33, .38);
    backdrop-filter: blur(4px);
  }

  .search-panel {
    position: fixed;
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 18px 16px max(20px, env(safe-area-inset-bottom));
    border-radius: var(--ka-radius-xl) var(--ka-radius-xl) 0 0;
    box-shadow: 0 -28px 80px rgba(31, 35, 42, .18);
  }

  .search-panel::before {
    content: "";
    display: block;
    width: 54px;
    height: 5px;
    margin: 0 auto 14px;
    border-radius: var(--ka-radius-round);
    background: rgba(32, 35, 42, .18);
  }

  .search-panel-form {
    display: grid;
    gap: 10px;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
  }

  .search-panel-form input,
  .search-panel-form .button {
    width: 100%;
    min-height: 54px;
  }

  .search-panel-form input {
    padding-inline: 18px;
    border: var(--ka-border);
    background: #fff;
  }

  .archive-search {
    border-radius: var(--ka-radius-lg);
  }
}