/*
Theme Name:   Anointing Church
Theme URI:    https://anointingchurch.net
Description:  기름부으심교회 · Anointing Church — Twenty Twenty-Five 자식 테마.
              디자인 시스템(색·타이포·레이아웃)은 theme.json 에, 리다이렉트 등
              사이트 고유 동작은 functions.php 에 있습니다.
Author:       Anointing Church
Template:     twentytwentyfive
Version: 1.6.0
Text Domain:  anointing-child
*/

/* 대부분의 스타일은 theme.json 이 담당합니다.
   여기에는 블록 설정으로 표현할 수 없는 것만 둡니다. */

/* 한글 본문의 줄바꿈 — 단어 중간에서 끊기지 않게 */
body,
.wp-block-post-content,
.entry-content {
	word-break: keep-all;
	overflow-wrap: break-word;
}

/* ── 영문 병기는 걷어냈다 (2026-08-04 사용자 확정) ────────────
   한글만 남기기로 했다. 예전 두 줄 라벨(<span class="ac-en">영문</span>)이
   어딘가에 남아 있어도 화면에 나오지 않게 감춰 둔다 —
   메뉴 라벨은 사이트 편집기에서도 고칠 수 있어 언제든 다시 들어올 수 있다. */
.ac-en {
	display: none !important;
}

/* 한 줄이 되었으니 가운데 기준으로 맞춘다 */
.wp-block-navigation:not(.has-modal-open) > .wp-block-navigation__container {
	align-items: center;
}

/* ── 메뉴 글자 ────────────────────────────────────────────────
   중장년층이 주로 보는 사이트라 눈에 들어와야 한다.
   21px — 뉴저지초대교회 메뉴를 실제로 재 본 값이다(21px/500). 굵기만 조금 더.

   ⚠ 선택자를 `.wp-block-navigation > .wp-block-navigation__container` 처럼
   **부모-자식으로 쓰면 안 된다.** 워드프레스는 이 두 클래스를 *같은 `<ul>`* 에
   함께 붙입니다(`class="wp-block-navigation__container … wp-block-navigation"`).
   그렇게 썼다가 규칙이 통째로 죽어 있었고, 메뉴는 블록이 박아 넣은 인라인값
   15.2px 로 나오고 있었다 (2026-08-04).

   ⚠ `!important` 는 장식이 아니다 — 내비게이션 블록이 `font-size` 를
   **인라인**으로 넣습니다. 빼면 다시 작아진다. */
.ac-navrow .wp-block-navigation__container:not(.wp-block-navigation__submenu-container) > .wp-block-navigation-item > a,
.ac-navrow .wp-block-navigation__container:not(.wp-block-navigation__submenu-container) > .wp-block-navigation-item > .wp-block-navigation-submenu__toggle {
	font-size: 1.3125rem !important;   /* 21px */
	font-weight: 600;
	letter-spacing: -0.03em;
}

.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item > a {
	font-size: 1.05rem;
	font-weight: 500;
	padding: 0.7rem 1.25rem;
}

/* 헌금 버튼 — 알약 꼴로. 메뉴가 커진 만큼 함께 키운다 */
.ac-navrow .wp-block-button__link {
	font-size: 1.12rem !important;
	font-weight: 700;
	padding: 0.72rem 1.7rem !important;
	border-radius: 999px !important;
	box-shadow: 0 1px 2px rgba(22, 40, 30, 0.14);
}

/* ── 헤더 메뉴줄: 균등하되 너무 벌어지지 않게 ──────────────────
   처음에 콘텐츠 폭(1180px) 전체를 space-between 으로 채웠더니
   항목 사이가 180px 씩 벌어져 흩어져 보였고, 마지막 항목이 헌금 버튼에
   그대로 붙었다. 그래서 두 가지를 건다.

   1. 메뉴가 펴지는 폭에 상한(max-width)을 둔다 — 균등하되 성기지 않게
   2. 메뉴와 헌금 버튼 사이에 확실한 간격을 준다

   ⚠ 데스크톱에서만. 좁은 화면에서는 햄버거로 접히므로 건드리면 안 된다. */
@media (min-width: 782px) {

	.ac-navrow {
		width: 100%;
		justify-content: center;
		gap: clamp(1.5rem, 3vw, 2.5rem);   /* 메뉴 ↔ 헌금 버튼 */
	}

	.ac-navrow > .wp-block-navigation {
		flex: 1 1 auto;
		min-width: 0;
		max-width: 940px;                /* 이보다 넓어지면 성겨 보인다 */
	}

	.ac-navrow .wp-block-navigation__container:not(.wp-block-navigation__submenu-container) {
		width: 100%;
		justify-content: space-between;
		gap: 1rem;
	}

	/* 서브메뉴는 드롭다운이라 균등 배치 대상이 아니다 */
	.ac-navrow .wp-block-navigation__submenu-container {
		width: auto;
		max-width: none;
		justify-content: flex-start;
	}
}

.wp-block-navigation .wp-block-navigation-item__label {
	line-height: 1.4;
}

/* 드롭다운 화살표가 두 줄 라벨 가운데에 오도록 */
.wp-block-navigation .wp-block-navigation-submenu__toggle .wp-block-navigation__submenu-icon {
	align-self: center;
	opacity: 0.55;
}

/* ── 상위 메뉴 모양 ──────────────────────────────────────────
   밑줄 애니메이션을 걷어내고 **알약 배경**으로 바꿨다.
   글자가 커지면서 얇은 밑줄이 글자에 눌려 보였고,
   눌린 곳을 손가락으로 짚기에도 배경이 있는 쪽이 낫다.
   (선택자 주의사항은 위 「메뉴 글자」 설명 참조) */
.ac-navrow .wp-block-navigation__container:not(.wp-block-navigation__submenu-container) > .wp-block-navigation-item > a,
.ac-navrow .wp-block-navigation__container:not(.wp-block-navigation__submenu-container) > .wp-block-navigation-item > .wp-block-navigation-submenu__toggle {
	padding: 0.5rem 0.9rem;
	border-radius: 999px;
	transition: background-color 0.16s ease, color 0.16s ease;
}

.ac-navrow .wp-block-navigation__container:not(.wp-block-navigation__submenu-container) > .wp-block-navigation-item:hover > a,
.ac-navrow .wp-block-navigation__container:not(.wp-block-navigation__submenu-container) > .wp-block-navigation-item:focus-within > a,
.ac-navrow .wp-block-navigation__container:not(.wp-block-navigation__submenu-container) > .wp-block-navigation-item:hover > .wp-block-navigation-submenu__toggle,
.ac-navrow .wp-block-navigation__container:not(.wp-block-navigation__submenu-container) > .wp-block-navigation-item:focus-within > .wp-block-navigation-submenu__toggle {
	background: var(--wp--preset--color--soft);
	color: var(--wp--preset--color--primary);
}

/* 지금 보고 있는 쪽은 색으로만 — 배경까지 주면 마우스를 올린 것과 구분이 안 된다 */
.ac-navrow .wp-block-navigation__container > .current-menu-item > a {
	color: var(--wp--preset--color--primary);
	font-weight: 700;
}

/* ── 서브메뉴(드롭다운) ────────────────────────────────────── */
.wp-block-navigation .wp-block-navigation__submenu-container {
	min-width: 13.5rem;
	padding-block: 0.5rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
	background: #fff;
	box-shadow: 0 10px 28px rgba(22, 40, 30, 0.1);
}

.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item > a {
	padding: 0.55rem 1.1rem;
	transition: background-color 0.15s ease;
}

.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item > a:hover,
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item > a:focus {
	background: var(--wp--preset--color--soft);
}

/* ── 헌금 버튼 ─────────────────────────────────────────────── */
.wp-block-button__link {
	transition: background-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.ac-navrow .wp-block-button__link:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(30, 107, 60, 0.28);
}

/* 키보드 사용자를 위한 또렷한 초점 표시 */
.wp-block-navigation a:focus-visible,
.wp-block-button__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 3px;
}

/* ── 본문 링크 ─────────────────────────────────────────────── */
/* 카드 안 「자세히 보기 →」 처럼 화살표가 붙은 링크가 살짝 움직이게 */
.wp-block-post-content a:hover,
.entry-content a:hover {
	text-underline-offset: 3px;
}

/* 모바일 오버레이 메뉴 — 항목 간격을 넉넉히 (중장년층 터치 대상 확보) */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	padding-block: 0.35rem;
}

/* 인스타그램·유튜브 피드가 자체 스타일을 갖고 있어 모서리만 맞춰 줍니다 */
#sb_instagram .sbi_photo,
.sby_item .sby_video_thumbnail {
	border-radius: 6px;
}

/* 표 — 예배시간 등. 모바일에서 가로 스크롤 */
.wp-block-table {
	overflow-x: auto;
}

.wp-block-table table {
	border-collapse: collapse;
	width: 100%;
}

/* 건너뛰기 링크가 밝은 배경에서 보이도록 */
.skip-link:focus {
	background-color: var(--wp--preset--color--primary);
	color: #fff;
}

/* ── 전면 블록 사이 흰 틈 ───────────────────────────────────
   커버(사진 배경) 블록이 잇달아 오면 그 사이에 테마 기본 blockGap 만큼
   흰 줄이 생긴다. 사진 → 사진으로 이어지는 자리라 그 줄이 갈라진 틈처럼
   보인다 (2026-08-04 사용자 지적).

   ⚠ 전면(alignfull) 블록끼리 붙었을 때만 없앤다. 본문 안 문단 사이 간격까지
      건드리면 글이 붙어 읽기 어려워진다. */
.wp-block-post-content > .alignfull + .alignfull,
.entry-content > .alignfull + .alignfull {
	margin-block-start: 0;
}

/* ── 유튜브 최근 영상 ([anointing_youtube]) ─────────────────── */
.ac-yt {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 1.5rem;
}

.ac-yt-item {
	display: block;
	text-decoration: none;
	color: inherit;
}

.ac-yt-thumb {
	display: block;
	position: relative;
	border-radius: 10px;
	overflow: hidden;
	background: rgba(0, 0, 0, 0.2);
	aspect-ratio: 16 / 9;
}

.ac-yt-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.3s ease;
}

.ac-yt-item:hover .ac-yt-thumb img { transform: scale(1.04); }

/* 재생 표시 — 사진만 있으면 눌러야 하는 것인지 모른다 */
.ac-yt-thumb::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='68' height='48' viewBox='0 0 68 48'%3E%3Cpath d='M66.5 7.7a8.6 8.6 0 0 0-6-6C55.1 0 34 0 34 0S12.9 0 7.5 1.6a8.6 8.6 0 0 0-6 6A90 90 0 0 0 0 24a90 90 0 0 0 1.5 16.3 8.6 8.6 0 0 0 6 6C12.9 48 34 48 34 48s21.1 0 26.5-1.7a8.6 8.6 0 0 0 6-6A90 90 0 0 0 68 24a90 90 0 0 0-1.5-16.3z' fill='%23000' fill-opacity='.55'/%3E%3Cpath d='M27 34V14l18 10z' fill='%23fff'/%3E%3C/svg%3E") center / 58px no-repeat;
	transition: background-color 0.2s ease;
}

.ac-yt-item:hover .ac-yt-thumb::after { background-color: rgba(0, 0, 0, 0.02); }

.ac-yt-title {
	display: block;
	margin-top: 0.75rem;
	font-size: 1.02rem;
	font-weight: 600;
	line-height: 1.55;
	word-break: keep-all;
}

.ac-yt-more,
.ac-yt-empty {
	margin-top: 1.8rem;
	text-align: center;
}

.ac-yt-more a,
.ac-yt-empty a {
	font-weight: 700;
	text-decoration: none;
	border-bottom: 2px solid currentColor;
	padding-bottom: 2px;
}

/* ── 영상 모달 ──────────────────────────────────────────────
   카드를 누르면 유튜브로 나가지 않고 그 자리에서 본다.
   `hidden` 을 쓰므로 JS 가 열기 전에는 화면에 아무것도 없다. */
.ac-ytm[hidden] {
	display: none;
}

.ac-ytm {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.25rem;
	background: rgba(10, 18, 13, 0.88);
}

/* 뒤 화면이 따라 스크롤되지 않게 */
body.ac-ytm-open {
	overflow: hidden;
}

.ac-ytm-box {
	position: relative;
	width: 100%;
	max-width: 1000px;
}

.ac-ytm-frame {
	aspect-ratio: 16 / 9;
	border-radius: 10px;
	overflow: hidden;
	background: #000;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.ac-ytm-frame iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

/* 닫기 단추 — 상자 **바깥 위쪽**에 둔다. 영상 위에 겹치면 재생 단추와 헷갈린다 */
.ac-ytm-x {
	position: absolute;
	top: -2.9rem;
	right: 0;
	width: 2.4rem;
	height: 2.4rem;
	padding: 0;
	font-size: 1.9rem;
	line-height: 1;
	color: #fff;
	background: transparent;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
}

.ac-ytm-x:hover,
.ac-ytm-x:focus-visible {
	background: rgba(255, 255, 255, 0.16);
}

/* 좁은 화면에서는 위에 공간이 없으니 영상 아래로 내린다 */
@media (max-width: 600px) {

	.ac-ytm-x {
		top: auto;
		bottom: -3.2rem;
		right: 50%;
		transform: translateX(50%);
		background: rgba(255, 255, 255, 0.14);
	}
}