/**
 * Theme Name: Blocksy Child
 * Description: Blocksy Child theme
 * Author: Creative Themes
 * Template: blocksy
 * Text Domain: blocksy
 */
/* A. 로고 영역 자체를 확실히 보여주기 */
/*
Theme Name: Blocksy Child
Theme URI: https://creativethemes.com/blocksy/
Description: Blocksy Child theme — Mamré Créative custom styles
Author: Creative Themes (customized)
Template: blocksy
Text Domain: blocksy
Version: 1.0.0
*/

/* -------------------------------------------------------
   0) 기본 리셋 (필요 최소만)
------------------------------------------------------- */
:root {
  --mc-logo-height-desktop: 135px;  /* 데스크탑 로고 높이 */
  --mc-logo-height-tablet: 110px;   /* 태블릿 로고 높이 */
  --mc-logo-height-mobile: 90px;    /* 모바일 로고 높이 */
  --mc-logo-color-default: #000;    /* 기본(밝은 헤더/일반 상태) = 검정 */
  --mc-logo-color-on-dark: #fff;    /* 어두운/투명 헤더 위 = 흰색 */
}

/* -------------------------------------------------------
   1) 인라인 SVG 로고 (권장) — #logo-mamre
   - Blocksy > En-tête > Logo 에서 "Fichier SVG en ligne du logo" = ON
   - 원본 SVG는 수정하지 않고, CSS로만 색/크기 제어
------------------------------------------------------- */

/* 크기: 가로는 자동, 세로는 고정(높이 변수) */
svg#logo-mamre {
  width: auto;
  height: var(--mc-logo-height-desktop);
  max-width: 100%;
  display: block;
  line-height: 0; /* 줄간격 영향 제거 */
}

/* 내부 모든 도형을 글자색(currentColor)로 강제
   (원본 SVG에 남아있는 fill=black 등을 덮어씀) */
svg#logo-mamre * {
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* 의도적으로 비워둔 도형은 보존 */
svg#logo-mamre [fill="none"],
svg#logo-mamre [stroke="none"] {
  fill: none !important;
  stroke: none !important;
}

/* 기본 색: 검정 (일반/밝은 배경 헤더) */
.site-logo svg#logo-mamre {
  color: var(--mc-logo-color-default);
}

/* 투명/어두운 헤더(히어로 위에 겹쳐 보일 때) → 흰색
   Blocksy는 투명 행에 data-transparent-row="yes" 를 부여함 */
.ct-header [data-transparent-row="yes"] svg#logo-mamre {
  color: var(--mc-logo-color-on-dark);
}

/* 스티키 헤더가 활성화되어 배경을 가지면 다시 기본(검정)
   — Blocksy는 상황에 따라 data-sticky* 속성/클래스를 부여한다.
   아래 셀렉터는 여러 경우를 안전하게 커버 */
.has-sticky-header .ct-header[data-sticky*="on"] svg#logo-mamre,
.ct-header.ct-sticky-active svg#logo-mamre,
.ct-header[data-sticky*="yes"] svg#logo-mamre {
  color: var(--mc-logo-color-default);
}

/* 다크 모드(사이트 전체 다크 스킴 사용 시) 보정이 필요하면 아래 활성화
   [옵션] 사이트가 전체 다크 스킴일 때 로고를 기본 흰색으로 시작하고 싶다면 주석 해제
:root[data-scheme="dark"] .site-logo svg#logo-mamre {
  color: var(--mc-logo-color-on-dark);
}
*/

/* 반응형: 뷰포트 축소 시 로고 높이만 자연스럽게 줄이기 */
@media (max-width: 1024px) {
  svg#logo-mamre { height: var(--mc-logo-height-tablet); }
}
@media (max-width: 768px) {
  svg#logo-mamre { height: var(--mc-logo-height-mobile); }
}

/* 사용자가 모션 줄이기 설정 시 (혹시 애니메이션을 추가하게 되면 대비) */
@media (prefers-reduced-motion: reduce) {
  svg#logo-mamre { transition: none !important; }
}

/* -------------------------------------------------------
   2) <img> 로고(인라인이 아닌 경우)용 안전한 대안 (옵션)
   - 인라인 SVG를 쓸 수 없어 내부 path 제어가 불가할 때 사용
   - 투명/어두운 배경 위에서만 반전해 흰색처럼 보이게 함
------------------------------------------------------- */

/* 기본: 원본 그대로 (검정) */
.site-logo img.custom-logo {
  display: block;
  height: var(--mc-logo-height-desktop);
  width: auto;
  filter: none;
}
@media (max-width: 1024px) {
  .site-logo img.custom-logo { height: var(--mc-logo-height-tablet); }
}
@media (max-width: 768px) {
  .site-logo img.custom-logo { height: var(--mc-logo-height-mobile); }
}

/* 투명/어두운 헤더 위에서만 반전 */
.ct-header [data-transparent-row="yes"] .site-logo img.custom-logo {
  filter: invert(1);
}

/* 스티키로 내려오면 다시 원복 */
.has-sticky-header .ct-header[data-sticky*="on"] .site-logo img.custom-logo,
.ct-header.ct-sticky-active .site-logo img.custom-logo,
.ct-header[data-sticky*="yes"] .site-logo img.custom-logo {
  filter: none;
}

/* -------------------------------------------------------
   3) 기타(테마/헤더 배치로 인해 간헐적 가림 현상 방지)
   - 로고 래퍼가 다른 요소에 가려지는 경우를 예방 (필요 시)
------------------------------------------------------- */
.site-branding,
.site-logo,
.site-logo-container {
  position: relative;
  z-index: 2; /* 헤더 내부 기본 컨텐츠(메뉴 등)보다 살짝 위 */
}

/* -------------------------------------------------------
   4) 여기에 사이트 추가 커스텀 스타일을 계속 작성하세요
------------------------------------------------------- */
/* 헤더 3열 폭 규정 — start(로고)=내용만큼, middle=가변, end=내용만큼 */
.ct-header .ct-row [data-column="start"] { flex: 0 0 auto !important; }
.ct-header .ct-row [data-column="middle"] { flex: 1 1 auto !important; }
.ct-header .ct-row [data-column="end"] { flex: 0 0 auto !important; }

/* 로고 래퍼가 알아서 줄 서도록 (폭 강제 금지) */
.site-branding,
.site-logo,
.site-logo-container {
  flex: 0 0 auto !important;
}

/* 기본: 검정 */
.site-logo svg#logo-mamre {
  color: var(--mc-logo-color-default) !important;
  filter: none !important; /* 혹시 테마가 필터 걸면 무력화 */
}

/* 투명/어두운 헤더(히어로 위)에서는 흰색 */
.ct-header [data-transparent-row="yes"] .site-logo svg#logo-mamre {
  color: var(--mc-logo-color-on-dark) !important;
}

/* 스티키로 배경 생기면 다시 기본(검정) */
.has-sticky-header .ct-header[data-sticky*="on"] .site-logo svg#logo-mamre,
.ct-header.ct-sticky-active .site-logo svg#logo-mamre,
.ct-header[data-sticky*="yes"] .site-logo svg#logo-mamre {
  color: var(--mc-logo-color-default) !important;
}

/* 1) 로고 내부 path가 언제나 '글자색'을 따르게 강제 */
svg#logo-mamre,
svg#logo-mamre * {
  fill: currentColor !important;
  stroke: none !important; /* 필요하면 유지, 외곽선 쓰면 지우세요 */
}

/* 2) 일반(비투명) 헤더 = 검정 */
.site-logo svg#logo-mamre { 
  color: #000 !important;
  filter: none !important;
  opacity: 1 !important;
}

/* 3) 투명/어두운 헤더(히어로 위에 겹칠 때) = 흰색 강제
   Blocksy가 a, 아이콘 등에는 흰색을 주는데 로고에는 filter/opacity가 남는 경우가 있어
   로고 관련 래퍼까지 전부 흰색·필터해제·불투명도로 고정합니다. */
.ct-header [data-transparent-row="yes"] .site-branding,
.ct-header [data-transparent-row="yes"] .site-logo,
.ct-header [data-transparent-row="yes"] .site-logo-container,
.ct-header [data-transparent-row="yes"] .site-branding a,
.ct-header [data-transparent-row="yes"] .site-branding a .site-logo,
.ct-header [data-transparent-row="yes"] .site-branding a svg#logo-mamre {
  color: #fff !important;
  filter: none !important;
  opacity: 1 !important;
}

/* 4) Sticky로 배경이 생기면 = 다시 검정 */
.has-sticky-header .ct-header[data-sticky*="on"] .site-logo svg#logo-mamre,
.ct-header.ct-sticky-active .site-logo svg#logo-mamre,
.ct-header[data-sticky*="yes"] .site-logo svg#logo-mamre {
  color: #000 !important;
  filter: none !important;
  opacity: 1 !important;
}

/* 혹시 줄간격/여백 영향으로 영역이 커지는 걸 차단 */
.site-logo-container { line-height: 0 !important; }
/* 예: 헤더 로고 좌측 정렬 강제 (필요할 때만)
.ct-header .site-branding { justify-content: flex-start; }






*/