/*
 Theme Name: Astra Child
 Theme URI: https://wpastra.com/
 Description: Child theme for Astra
 Author: Your Name
 Template: astra
 Version: 1.0.0
*/

/* ======================================
   1. Product 페이지 - API Family 카드 그리드
   (/product/ 화면)
   ====================================== */

.api-family-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin: 30px 0 40px;
}

/* 기본: 데스크탑에서 한 줄에 4개, 고정 폭 카드 */
.api-family-card {
  flex: 0 0 calc(25% - 20px);   /* grow:0, shrink:0, basis:25%-20px */
  max-width: calc(25% - 20px);
  min-width: 180px;

  background-color: #ffffff;
  border-radius: 16px;
  padding: 5px 5px;
  text-align: center;
  text-decoration: none;
  color: #012a63;
  font-weight: 600;

  /* 테두리 + 살짝 그림자 */
  border: 1px solid #e1e7f5;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.04);

  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.api-family-card__name {
  display: inline-block;
  font-size: 13px;
}

/* hover 효과 */
.api-family-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(0,0,0,0.08);
  background-color: #f5f8ff;
}

/* 태블릿: 한 줄에 2개 */
@media (max-width: 900px) {
  .api-family-card {
    flex: 0 0 calc(50% - 20px);
    max-width: calc(50% - 20px);
  }
}

/* 모바일: 한 줄에 1개 */
@media (max-width: 600px) {
  .api-family-card {
    flex: 0 0 100%;
    max-width: 100%;
  }
}


/* ======================================
   2. API Family 아카이브 (Abacavir 페이지 등)
   taxonomy-api_family.php 에 사용되는 스타일
   ====================================== */

/* 헤더 영역 */
.api-family-header {
  margin-top: 40px;
  margin-bottom: 24px;
  text-align: left;
}

.api-family-title {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 8px;
}

.api-family-desc {
  font-size: 14px;
  line-height: 1.6;
  max-width: 800px;
}

/* 카드 그리드 – 데스크탑 3개, 반응형 조정 */
.api-cards-wrap {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 16px;
  margin-bottom: 60px;
}

@media (max-width: 1024px) {
  .api-cards-wrap {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .api-cards-wrap {
    grid-template-columns: 1fr;
  }
}

/* 카드 박스 */
.api-card {
  background: #ffffff;
  border-radius: 8px;
  border: 1px solid #e3e3e3;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  padding: 16px 18px;
}

/* 카드 헤더 */
.api-card__header {
  border-bottom: 3px solid #003f6b;
  padding-bottom: 8px;
  margin-bottom: 10px;
}

.api-card__title {
  font-size: 20px;
  font-weight: 700;
  color: #0b3b73;
  margin: 0;
}

/* 카드 본문 */
.api-card__body {
  overflow-x: auto;
}

.api-card__body p {
  margin: 3px 0;
  font-size: 13px;
  line-height: 1.5;
}

.api-card__body strong {
  font-weight: 600;
}

/* 카드 안의 표 스타일 */
.api-card__body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.api-card__body th,
.api-card__body td {
  border: 1px solid #e1e4ea;
  padding: 4px 8px;
  vertical-align: top;
}

.api-card__body th {
  font-weight: 600;
  background-color: #f5f7fb;
}

/* taxonomy 기본 글(article) 숨기고 카드만 남기기 */
.tax-api_family .site-main article:not(.api-card) {
  display: none !important;
}


/* ======================================
   3. Compound 단일 상세 페이지 (cards 안 제목/배경)
   ====================================== */

.compound-detail-title {
  font-size: 32px;      /* 필요하면 여기서 크기 조절 */
  font-weight: 700;
  color: #000000;
  margin-bottom: 30px;
}

.compound-detail-card {
  background: #ffffff !important;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}


/* ======================================
   4. 전체 배경을 흰색으로 통일
   ====================================== */

body,
.site,
.site-content {
  background: #ffffff !important;
}

/* API Family 아카이브 영역도 흰색 유지 */
body.tax-api_family,
.api-family-archive,
.api-family-container {
  background: #ffffff !important;
}
/* — A-Z 바 위쪽 간격 줄이기 — */
#content,
.site-content,
.ast-plain-container ast-article-single {
    padding-top: 0px !important;
    margin-top: 0 !important;
}

/* A-Z 네비 자체 간격도 추가로 조정 */
.alphabet-nav {
    margin-top: 5px !important;
    margin-bottom: 10px !important;
}

/* 헤더 아래 전체 공백 제거 */
.site-header + .site-content {
    margin-top: 0 !important;
    padding-top: 0 !important;
}
/* Abacavir 같은 API Family 페이지에서 A-Z 바 위/아래 여백 */
.api-family-az {
  margin-top: 20px;     /* 헤더랑 바 사이 간격 */
  margin-bottom: 20px;  /* 바랑 "Abacavir" 제목 사이 간격 */
}
/* Abacavir 같은 API Family 페이지에서 헤더 바로 아래까지 붙이기 */
body.tax-api_family .site-main.api-family-archive {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* A-Z 바 컨테이너 위/아래 여백 */
.api-family-az {
  margin-top: 20;      /* 헤더랑 A-Z 바 사이 여백 */
  margin-bottom: 20px; /* A-Z 바랑 "Abacavir" 사이 여백 */
}
/* ==========================
   Compound 검색 폼 스타일
   ========================== */

.compound-search-form {
  max-width: 900px;
  margin: 10px auto 30px;
  display: flex;
  align-items: center;
  border: 1px solid #d0d7e2;
  border-radius: 4px;
  background-color: #ffffff;
}

.compound-search-input {
  flex: 1;
  border: none;
  padding: 10px 14px;
  font-size: 14px;
  outline: none;
}

.compound-search-input::placeholder {
  color: #999999;
}

.compound-search-button {
  border: none;
  background: none;
  padding: 0 14px;
  font-size: 18px;
  cursor: pointer;
  color: #0057b8;
}

.compound-search-button:hover {
  color: #003f80;
}

/* 검색 결과 카드 그리드 – 기존 카드와 동일 느낌 */
.compound-card-grid.compound-search-results {
  margin-top: 10px;
}
/* 헤더 안에 들어간 compound 검색창 – 위치/높이/글자 크기 조정 */
.site-header .compound-search-form {
  width: 520px;          /* 필요하면 450~520 사이에서 조절해도 됨 */
  max-width: 100%;

  /* Contact 글자랑 수평 맞추기용 */
  margin: 4px 0 0 40px;  /* ↑ 위쪽 여백 (숫자를 늘리면 조금 더 아래로 내려감) */
  align-items: center;
}

/* 헤더 검색 입력 글씨 크기 & 높이 */
.site-header .compound-search-input {
  font-size: 15px;       /* 글씨가 안 짤리도록 살짝 줄임 */
  padding: 4px 10px;     /* 위/아래 여유 조금 줄이기 */
  line-height: 1.2;
}

/* 헤더 검색창 placeholder 글씨도 같이 조정 */
.site-header .compound-search-input::placeholder {
  font-size: 10px;
  line-height: 1.2;
}

/* 검색 결과 카드 그리드 (여러 개 나올 때) */
.compound-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 24px 0 60px;
}

@media (max-width: 1024px) {
  .compound-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .compound-card-grid {
    grid-template-columns: 1fr;
  }
}

/* 개별 카드 박스 */
.compound-card {
  display: block;
  background: #ffffff;
  border-radius: 8px;
  border: 1px solid #e1e4ea;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  padding: 16px 18px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.compound-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
}

/* 카드 제목 */
.compound-card__title {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 8px;
  color: #0b3b73;
}

/* 카드 안의 한 줄(레이블 + 값) */
.compound-card__row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  margin: 2px 0;
}

.compound-card__row span {
  color: #666;
}

/* 카테고리 태그 */
.compound-card__tag {
  margin-top: 10px;
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 999px;
  background: #f0f4ff;
  display: inline-block;
}

/* 검색 상세 카드(결과 1개일 때) – 이미 있는 스타일과 자연스럽게 맞추기 */
.search-detail-card {
  margin-top: 30px;
}